From 48195371e25d9580700384318deba3853775cd6b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 15 Dec 2023 13:27:54 +0700
Subject: [PATCH] fix: prepare add UI input for openai key

---
 web/containers/DropdownListSidebar/index.tsx | 117 +++++++++++--------
 1 file changed, 69 insertions(+), 48 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 473b5debc..119b094fa 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -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>
+      )}
+    </>
   )
 }