Skip to content

Commit

Permalink
fix: content setting right panel default to collapse (janhq#2026)
Browse files Browse the repository at this point in the history
  • Loading branch information
@urmauur
urmauur authored Feb 15, 2024
1 parent 3ab23d5 commit ab77622
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 132 deletions.
2 changes: 1 addition & 1 deletion web/containers/CardSidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function CardSidebar({
rightAction,
hideMoreVerticalAction,
}: Props) {
const [show, setShow] = useState(true)
const [show, setShow] = useState(false)
const [more, setMore] = useState(false)
const [menu, setMenu] = useState<HTMLDivElement | null>(null)
const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
Expand Down
258 changes: 127 additions & 131 deletions web/screens/Chat/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,21 +156,87 @@ const Sidebar: React.FC = () => {
<div>
{activeThread?.assistants[0]?.tools &&
componentDataAssistantSetting.length > 0 && (
<div className="mt-2">
<CardSidebar title="Tools">
<div className="px-2 pt-4">
<div className="mb-2">
<CardSidebar title="Tools">
<div className="px-2 pt-4">
<div className="mb-2">
<div className="flex items-center justify-between">
<label
id="retrieval"
className="inline-flex items-center font-bold text-zinc-500 dark:text-gray-300"
>
Retrieval
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 text-black dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
side="top"
className="max-w-[240px]"
>
<span>
Retrieval helps the assistant use information
from files you send to it. Once you share a
file, the assistant automatically fetches the
relevant content based on your request.
</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</label>

<div className="flex items-center justify-between">
<label
id="retrieval"
className="inline-flex items-center font-bold text-zinc-500 dark:text-gray-300"
>
Retrieval
<Switch
name="retrieval"
className="mr-2"
checked={
activeThread?.assistants[0].tools[0].enabled
}
onCheckedChange={(e) => {
if (activeThread)
updateThreadMetadata({
...activeThread,
assistants: [
{
...activeThread.assistants[0],
tools: [
{
type: 'retrieval',
enabled: e,
settings:
(activeThread.assistants[0].tools &&
activeThread.assistants[0]
.tools[0]?.settings) ??
{},
},
],
},
],
})
}}
/>
</div>
</div>
</div>
{activeThread?.assistants[0]?.tools[0].enabled && (
<div className="pb-4 pt-2">
<div className="mb-4">
<div className="item-center mb-2 flex">
<label
id="embedding-model"
className="inline-flex font-bold text-zinc-500 dark:text-gray-300"
>
Embedding Model
</label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 text-black dark:text-gray-500"
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
Expand All @@ -179,140 +245,70 @@ const Sidebar: React.FC = () => {
className="max-w-[240px]"
>
<span>
Retrieval helps the assistant use
information from files you send to it. Once
you share a file, the assistant
automatically fetches the relevant content
based on your request.
Embedding model is crucial for understanding
and processing the input text effectively by
converting text to numerical
representations. Align the model choice with
your task, evaluate its performance, and
consider factors like resource availability.
Experiment to find the best fit for your
specific use case.
</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</label>
</div>

<div className="flex items-center justify-between">
<Switch
name="retrieval"
className="mr-2"
checked={
activeThread?.assistants[0].tools[0].enabled
}
onCheckedChange={(e) => {
if (activeThread)
updateThreadMetadata({
...activeThread,
assistants: [
{
...activeThread.assistants[0],
tools: [
{
type: 'retrieval',
enabled: e,
settings:
(activeThread.assistants[0]
.tools &&
activeThread.assistants[0]
.tools[0]?.settings) ??
{},
},
],
},
],
})
}}
/>
<Input value={selectedModel?.name} disabled />
</div>
</div>
</div>
{activeThread?.assistants[0]?.tools[0].enabled && (
<div className="pb-4 pt-2">
<div className="mb-4">
<div className="item-center mb-2 flex">
<label
id="embedding-model"
className="inline-flex font-bold text-zinc-500 dark:text-gray-300"
>
Embedding Model
</label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
side="top"
className="max-w-[240px]"
>
<span>
Embedding model is crucial for
understanding and processing the input
text effectively by converting text to
numerical representations. Align the model
choice with your task, evaluate its
performance, and consider factors like
resource availability. Experiment to find
the best fit for your specific use case.
</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>

<div className="flex items-center justify-between">
<Input value={selectedModel?.name} disabled />
</div>
<div className="mb-4">
<div className="mb-2 flex items-center">
<label
id="vector-database"
className="inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Vector Database
</label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
side="top"
className="max-w-[240px]"
>
<span>
Vector Database is crucial for efficient
storage and retrieval of embeddings.
Consider your specific task, available
resources, and language requirements.
Experiment to find the best fit for your
specific use case.
</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
<div className="mb-4">
<div className="mb-2 flex items-center">
<label
id="vector-database"
className="inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Vector Database
</label>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
size={16}
className="ml-2 flex-shrink-0 dark:text-gray-500"
/>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent
side="top"
className="max-w-[240px]"
>
<span>
Vector Database is crucial for efficient
storage and retrieval of embeddings.
Consider your specific task, available
resources, and language requirements.
Experiment to find the best fit for your
specific use case.
</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>

<div className="flex items-center justify-between">
<Input value="HNSWLib" disabled />
</div>
<div className="flex items-center justify-between">
<Input value="HNSWLib" disabled />
</div>
<AssistantSetting
componentData={componentDataAssistantSetting}
/>
</div>
)}
</div>
</CardSidebar>
</div>
<AssistantSetting
componentData={componentDataAssistantSetting}
/>
</div>
)}
</div>
</CardSidebar>
)}
</div>
)}
Expand Down

0 comments on commit ab77622

Please sign in to comment.