From d9b0625b17c94d4a6a8c9ec3efd3bc4cc1432f78 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Fri, 15 Dec 2023 14:05:06 +0700
Subject: [PATCH] chore: read and write openai settings

---
 web/containers/DropdownListSidebar/index.tsx | 19 ++++++++++++----
 web/hooks/useEngineSettings.ts               | 23 ++++++++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 web/hooks/useEngineSettings.ts

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 119b094fa..84f1fc828 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -21,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'
@@ -38,6 +39,16 @@ export default function DropdownListSidebar() {
   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) => {
@@ -129,20 +140,20 @@ export default function DropdownListSidebar() {
         </SelectContent>
       </Select>
 
-      {selected?.engine === 'openai' && (
+      {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"
           >
-            API_KEY
+            API Key
           </label>
           <Input
             id="assistant-instructions"
             placeholder="Enter your API_KEY"
-            value=""
+            defaultValue={opeenAISettings?.api_key}
             onChange={(e) => {
-              console.log(e.target.value)
+              saveOpenAISettings({ apiKey: e.target.value })
             }}
           />
         </div>
diff --git a/web/hooks/useEngineSettings.ts b/web/hooks/useEngineSettings.ts
new file mode 100644
index 000000000..50dcd0518
--- /dev/null
+++ b/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 }
+}