fix: add input for api key remote model

extensions/inference-openai-extension/src/helpers/sse.ts

@@ -40,6 +40,13 @@ export function requestInference(
       signal: controller?.signal,
     })
       .then(async (response) => {
+        if (!response.ok) {
+          subscriber.next(
+            (await response.json()).error?.message ?? "Error occured"
+          );
+          subscriber.complete();
+          return;
+        }
         if (model.parameters.stream) {
           const stream = response.body;
           const decoder = new TextDecoder("utf-8");

web/containers/DropdownListSidebar/index.tsx

@@ -9,6 +9,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Input,
 } from '@janhq/uikit'
 
 import { atom, useAtomValue, useSetAtom } from 'jotai'
@@ -20,6 +21,7 @@ import { twMerge } from 'tailwind-merge'
 import { MainViewState } from '@/constants/screens'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
+import { useEngineSettings } from '@/hooks/useEngineSettings'
 import { getDownloadedModels } from '@/hooks/useGetDownloadedModels'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
@@ -36,8 +38,17 @@ export default function DropdownListSidebar() {
   const activeThread = useAtomValue(activeThreadAtom)
   const [selected, setSelected] = useState<Model | undefined>()
   const { setMainViewState } = useMainViewState()
-
   const { activeModel, stateModel } = useActiveModel()
+  const [opeenAISettings, setOpenAISettings] = useState<
+    { api_key: string } | undefined
+  >(undefined)
+  const { readOpenAISettings, saveOpenAISettings } = useEngineSettings()
+
+  useEffect(() => {
+    readOpenAISettings().then((settings) => {
+      setOpenAISettings(settings)
+    })
+  }, [])
 
   useEffect(() => {
     getDownloadedModels().then((downloadedModels) => {
@@ -77,55 +88,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 === InferenceEngine.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"
+            defaultValue={opeenAISettings?.api_key}
+            onChange={(e) => {
+              saveOpenAISettings({ apiKey: e.target.value })
+            }}
+          />
         </div>
-      </SelectContent>
-    </Select>
+      )}
+    </>
   )
 }

web/hooks/useEngineSettings.ts

@@ -0,0 +1,23 @@
+import { join } from 'path'
+
+import { fs } from '@janhq/core'
+
+export const useEngineSettings = () => {
+  const readOpenAISettings = async () => {
+    const settings = await fs.readFile(join('engines', 'openai.json'))
+    if (settings) {
+      return JSON.parse(settings)
+    }
+    return {}
+  }
+  const saveOpenAISettings = async ({
+    apiKey,
+  }: {
+    apiKey: string | undefined
+  }) => {
+    const settings = await readOpenAISettings()
+    settings.api_key = apiKey
+    await fs.writeFile(join('engines', 'openai.json'), JSON.stringify(settings))
+  }
+  return { readOpenAISettings, saveOpenAISettings }
+}