Skip to content

Commit

Permalink
fix: prepare add UI input for openai key
Browse files Browse the repository at this point in the history
urmauur committed Dec 15, 2023
1 parent 9dd1371 commit 4819537
Showing 1 changed file with 69 additions and 48 deletions.
117 changes: 69 additions & 48 deletions web/containers/DropdownListSidebar/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
<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>
) : (
<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)}
</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>
)}
</>
)
}

0 comments on commit 4819537

Please sign in to comment.