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, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
Input,
} from '@janhq/uikit' } from '@janhq/uikit'
import { atom, useAtomValue, useSetAtom } from 'jotai' import { atom, useAtomValue, useSetAtom } from 'jotai'
@ -36,7 +37,6 @@ export default function DropdownListSidebar() {
const activeThread = useAtomValue(activeThreadAtom) const activeThread = useAtomValue(activeThreadAtom)
const [selected, setSelected] = useState<Model | undefined>() const [selected, setSelected] = useState<Model | undefined>()
const { setMainViewState } = useMainViewState() const { setMainViewState } = useMainViewState()
const { activeModel, stateModel } = useActiveModel() const { activeModel, stateModel } = useActiveModel()
useEffect(() => { useEffect(() => {
@ -77,55 +77,76 @@ export default function DropdownListSidebar() {
} }
return ( return (
<Select <>
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">
<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 API_KEY
</Button> </label>
<Input
id="assistant-instructions"
placeholder="Enter your API_KEY"
value=""
onChange={(e) => {
console.log(e.target.value)
}}
/>
</div> </div>
</SelectContent> )}
</Select> </>
) )
} }