From 25d09e7fe90540f1ad878199090430cee91721a2 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 22 Jan 2024 11:21:58 +0700
Subject: [PATCH] fix: disabled apikey while server running

---
 web/containers/DropdownListSidebar/index.tsx |  5 +-
 web/containers/OpenAiKeyInput/index.tsx      |  4 +-
 web/screens/LocalServer/index.tsx            | 54 ++++++++++----------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 5780de6b8..fd0223bdb 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -233,7 +233,10 @@ export default function DropdownListSidebar() {
         </SelectPortal>
       </Select>
 
-      <OpenAiKeyInput selectedModel={selectedModel} />
+      <OpenAiKeyInput
+        selectedModel={selectedModel}
+        serverEnabled={serverEnabled}
+      />
     </div>
   )
 }
diff --git a/web/containers/OpenAiKeyInput/index.tsx b/web/containers/OpenAiKeyInput/index.tsx
index c6c6e6489..3d4a32f42 100644
--- a/web/containers/OpenAiKeyInput/index.tsx
+++ b/web/containers/OpenAiKeyInput/index.tsx
@@ -7,9 +7,10 @@ import { useEngineSettings } from '@/hooks/useEngineSettings'
 
 type Props = {
   selectedModel?: Model
+  serverEnabled?: boolean
 }
 
-const OpenAiKeyInput: React.FC<Props> = ({ selectedModel }) => {
+const OpenAiKeyInput: React.FC<Props> = ({ selectedModel, serverEnabled }) => {
   const [openAISettings, setOpenAISettings] = useState<
     { api_key: string } | undefined
   >(undefined)
@@ -34,6 +35,7 @@ const OpenAiKeyInput: React.FC<Props> = ({ selectedModel }) => {
         API Key
       </label>
       <Input
+        disabled={serverEnabled}
         id="assistant-instructions"
         placeholder="Enter your API_KEY"
         defaultValue={openAISettings?.api_key}
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 1ff126753..6f6261f78 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/web/screens/LocalServer/index.tsx
@@ -309,35 +309,33 @@ const LocalServerScreen = () => {
             : 'w-0 translate-x-full opacity-0'
         )}
       >
-        <CardSidebar title="Model" hideMoreVerticalAction>
-          <div className="px-2">
-            <div className="mt-4">
-              <DropdownListSidebar />
-            </div>
-
-            {componentDataEngineSetting.filter(
-              (x) => x.name === 'prompt_template'
-            ).length !== 0 && (
-              <div className="mt-4">
-                <CardSidebar title="Model Parameters" asChild>
-                  <div className="px-2 py-4">
-                    {settingComponentBuilder(componentDataEngineSetting, true)}
-                  </div>
-                </CardSidebar>
-              </div>
-            )}
-
-            {componentDataEngineSetting.length !== 0 && (
-              <div className="my-4">
-                <CardSidebar title="Engine Parameters" asChild>
-                  <div className="px-2 py-4">
-                    <EngineSetting />
-                  </div>
-                </CardSidebar>
-              </div>
-            )}
+        <div className="px-4">
+          <div className="mt-4">
+            <DropdownListSidebar />
           </div>
-        </CardSidebar>
+
+          {componentDataEngineSetting.filter(
+            (x) => x.name === 'prompt_template'
+          ).length !== 0 && (
+            <div className="mt-4">
+              <CardSidebar title="Model Parameters" asChild>
+                <div className="px-2 py-4">
+                  {settingComponentBuilder(componentDataEngineSetting, true)}
+                </div>
+              </CardSidebar>
+            </div>
+          )}
+
+          {componentDataEngineSetting.length !== 0 && (
+            <div className="my-4">
+              <CardSidebar title="Engine Parameters" asChild>
+                <div className="px-2 py-4">
+                  <EngineSetting />
+                </div>
+              </CardSidebar>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )