fix: prepare add UI input for openai key

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,6 +77,7 @@ export default function DropdownListSidebar() {
   }
 
   return (
+    <>
       <Select
         disabled={finishInit}
         value={selected?.id}
@@ -127,5 +128,25 @@ export default function DropdownListSidebar() {
           </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"
+          >
+            API_KEY
+          </label>
+          <Input
+            id="assistant-instructions"
+            placeholder="Enter your API_KEY"
+            value=""
+            onChange={(e) => {
+              console.log(e.target.value)
+            }}
+          />
+        </div>
+      )}
+    </>
   )
 }