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

fix: prepare add UI input for openai key

Browse Source
This commit is contained in:
Faisal Amir 2023-12-15 13:27:54 +07:00
parent 9dd13716be
commit 48195371e2
1 changed files with 69 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import {
SelectItem,
SelectTrigger,
SelectValue,
Input,
} from '@janhq/uikit'
import { atom, useAtomValue, useSetAtom } from 'jotai'
@ -36,7 +37,6 @@ export default function DropdownListSidebar() {
const activeThread = useAtomValue(activeThreadAtom)
const [selected, setSelected] = useState<Model | undefined>()
const { setMainViewState } = useMainViewState()
const { activeModel, stateModel } = useActiveModel()
useEffect(() => {
@ -77,55 +77,76 @@ export default function DropdownListSidebar() {
}
return (
<Select
disabled={finishInit}
value={selected?.id}
onValueChange={finishInit ? undefined : onValueSelected}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Choose model to start">
{downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
</SelectValue>
</SelectTrigger>
<SelectContent className="right-5 block w-full min-w-[300px] pr-0">
<div className="flex w-full items-center space-x-2 px-4 py-2">
<MonitorIcon size={20} className="text-muted-foreground" />
<span>Local</span>
</div>
<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>
<>
<Select
disabled={finishInit}
value={selected?.id}
onValueChange={finishInit ? undefined : onValueSelected}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Choose model to start">
{downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
</SelectValue>
</SelectTrigger>
<SelectContent className="right-5 block w-full min-w-[300px] pr-0">
<div className="flex w-full items-center space-x-2 px-4 py-2">
<MonitorIcon size={20} className="text-muted-foreground" />
<span>Local</span>
</div>
) : (
<SelectGroup>
{downloadedModels.map((x, i) => (
<SelectItem
key={i}
value={x.id}
className={twMerge(x.id === selected?.id && 'bg-secondary')}
>
<div className="flex w-full justify-between">
<span className="line-clamp-1 block">{x.name}</span>
<span className="font-bold text-muted-foreground">
{toGigabytes(x.metadata.size)}
</span>
</div>
</SelectItem>
))}
</SelectGroup>
)}
<div className="border-b border-border" />
<div className="w-full px-4 py-2">
<Button
block
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" />
{downloadedModels.length === 0 ? (
<div className="px-4 py-2">
<p>{`Oops, you don't have a model yet.`}</p>
</div>
) : (
<SelectGroup>
{downloadedModels.map((x, i) => (
<SelectItem
key={i}
value={x.id}
className={twMerge(x.id === selected?.id && 'bg-secondary')}
>
<div className="flex w-full justify-between">
<span className="line-clamp-1 block">{x.name}</span>
<span className="font-bold text-muted-foreground">
{toGigabytes(x.metadata.size)}
</span>
</div>
</SelectItem>
))}
</SelectGroup>
)}
<div className="border-b border-border" />
<div className="w-full px-4 py-2">
<Button
block
className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
onClick={() => setMainViewState(MainViewState.Hub)}
>
Explore The Hub
</Button>
</div>
</SelectContent>
</Select>
{selected?.engine === 'openai' && (
<div className="mt-4">
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
>
Explore The Hub
</Button>
API_KEY
</label>
<Input
id="assistant-instructions"
placeholder="Enter your API_KEY"
value=""
onChange={(e) => {
console.log(e.target.value)
}}
/>
</div>
</SelectContent>
</Select>
)}
</>
)
}