Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added tooltip for user cannot change model after starting thread (#1115)

Browse Source 
* fix: added tooltip for user cannot change model after starting thread

* fix: typo content tooltip
This commit is contained in:
Faisal Amir 2023-12-20 15:24:09 +07:00 committed by GitHub
parent 040987d1cd
commit 88fc0715b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 64 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
web/containers/DropdownListSidebar/index.tsx
View File

@ -9,6 +9,10 @@ import {
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipArrow,
Input, Input,
} from '@janhq/uikit' } from '@janhq/uikit'
@ -71,57 +75,66 @@ export default function DropdownListSidebar() {
const finishInit = threadStates[activeThread.id].isFinishInit ?? true const finishInit = threadStates[activeThread.id].isFinishInit ?? true
return ( return (
<> <Tooltip>
<Select <TooltipTrigger className="w-full">
disabled={finishInit} <Select
value={selected?.id} disabled={finishInit}
onValueChange={finishInit ? undefined : onValueSelected} value={selected?.id}
> onValueChange={finishInit ? undefined : onValueSelected}
<SelectTrigger className="w-full"> >
<SelectValue placeholder="Choose model to start"> <SelectTrigger className="w-full">
{downloadedModels.filter((x) => x.id === selected?.id)[0]?.name} <SelectValue placeholder="Choose model to start">
</SelectValue> {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
</SelectTrigger> </SelectValue>
<SelectContent className="right-5 block w-full min-w-[300px] pr-0"> </SelectTrigger>
<div className="flex w-full items-center space-x-2 px-4 py-2"> <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
<MonitorIcon size={20} className="text-muted-foreground" /> <div className="flex w-full items-center space-x-2 px-4 py-2">
<span>Local</span> <MonitorIcon size={20} className="text-muted-foreground" />
</div> <span>Local</span>
<div className="border-b border-border" />
{downloadedModels.length === 0 ? (
<div className="px-4 py-2">
<p>{`Oops, you don't have a model yet.`}</p>
</div> </div>
) : ( <div className="border-b border-border" />
<SelectGroup> {downloadedModels.length === 0 ? (
{downloadedModels.map((x, i) => ( <div className="px-4 py-2">
<SelectItem <p>{`Oops, you don't have a model yet.`}</p>
key={i} </div>
value={x.id} ) : (
className={twMerge(x.id === selected?.id && 'bg-secondary')} <SelectGroup>
> {downloadedModels.map((x, i) => (
<div className="flex w-full justify-between"> <SelectItem
<span className="line-clamp-1 block">{x.name}</span> key={i}
<span className="font-bold text-muted-foreground"> value={x.id}
{toGigabytes(x.metadata.size)} className={twMerge(x.id === selected?.id && 'bg-secondary')}
</span> >
</div> <div className="flex w-full justify-between">
</SelectItem> <span className="line-clamp-1 block">{x.name}</span>
))} <span className="font-bold text-muted-foreground">
</SelectGroup> {toGigabytes(x.metadata.size)}
)} </span>
<div className="border-b border-border" /> </div>
<div className="w-full px-4 py-2"> </SelectItem>
<Button ))}
block </SelectGroup>
className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600" )}
onClick={() => setMainViewState(MainViewState.Hub)} <div className="border-b border-border" />
> <div className="w-full px-4 py-2">
Explore The Hub <Button
</Button> block
</div> className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
</SelectContent> onClick={() => setMainViewState(MainViewState.Hub)}
</Select> >
Explore The Hub
</Button>
</div>
</SelectContent>
</Select>
</TooltipTrigger>
{finishInit && (
<TooltipContent sideOffset={10}>
<span>To change model, please start a new thread</span>
<TooltipArrow />
</TooltipContent>
)}
{selected?.engine === InferenceEngine.openai && ( {selected?.engine === InferenceEngine.openai && (
<div className="mt-4"> <div className="mt-4">
@ -141,6 +154,6 @@ export default function DropdownListSidebar() {
/> />
</div> </div>
)} )}
</> </Tooltip>
) )
} }