From 2c328a45405c0fca28f15fb15285ed86a5b89e06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Sat, 15 Apr 2023 17:54:33 +0100
Subject: [PATCH] feat: hide ask ai button when key is empty (#1515)

* Add option to hide Ask AI and update dev version

* Fix formatting according to eslint

* Replace option to hide Ask AI with auto hiding based on config

* Fix golangci-lint errors

* Remove showAskAI logic from OpenAPI
---
 api/system.go                                 |  2 +
 server/system.go                              | 11 +++++
 web/src/components/Header.tsx                 | 20 +++++----
 web/src/components/Settings/SystemSection.tsx | 41 +++++++++----------
 web/src/store/module/global.ts                |  8 ++++
 web/src/store/reducer/global.ts               |  4 ++
 web/src/types/modules/system.d.ts             |  1 +
 7 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/api/system.go b/api/system.go
index 82e886586..da94161e7 100644
--- a/api/system.go
+++ b/api/system.go
@@ -24,4 +24,6 @@ type SystemStatus struct {
 	StorageServiceID int `json:"storageServiceId"`
 	// Local storage path
 	LocalStoragePath string `json:"localStoragePath"`
+	// Local storage path
+	OpenAIConfig OpenAIConfig `json:"openAIConfig"`
 }
diff --git a/server/system.go b/server/system.go
index ac5214571..5581a17bb 100644
--- a/server/system.go
+++ b/server/system.go
@@ -56,6 +56,10 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 			},
 			StorageServiceID: api.DatabaseStorage,
 			LocalStoragePath: "",
+			OpenAIConfig: api.OpenAIConfig{
+				Key:  "",
+				Host: "",
+			},
 		}
 
 		systemSettingList, err := s.Store.FindSystemSettingList(ctx, &api.SystemSettingFind{})
@@ -95,6 +99,13 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 				systemStatus.StorageServiceID = int(baseValue.(float64))
 			} else if systemSetting.Name == api.SystemSettingLocalStoragePathName {
 				systemStatus.LocalStoragePath = baseValue.(string)
+			} else if systemSetting.Name == api.SystemSettingOpenAIConfigName {
+				openAIConfig := api.OpenAIConfig{}
+				err := json.Unmarshal([]byte(systemSetting.Value), &openAIConfig)
+				if err != nil {
+					return echo.NewHTTPError(http.StatusInternalServerError, "Failed to unmarshal system setting open ai config value").SetInternal(err)
+				}
+				systemStatus.OpenAIConfig = openAIConfig
 			}
 		}
 
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index f4ff0031b..6df7b50f2 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useLayoutStore, useUserStore } from "@/store/module";
+import { useGlobalStore, useLayoutStore, useUserStore } from "@/store/module";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
 import showSettingDialog from "./SettingDialog";
@@ -14,8 +14,10 @@ const Header = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const userStore = useUserStore();
+  const globalStore = useGlobalStore();
   const layoutStore = useLayoutStore();
   const showHeader = layoutStore.state.showHeader;
+  const showAskAI = globalStore.showAskAI();
   const isVisitorMode = userStore.isVisitorMode() && !userStore.state.user;
 
   useEffect(() => {
@@ -107,13 +109,15 @@ const Header = () => {
           </NavLink>
           {!isVisitorMode && (
             <>
-              <button
-                id="header-ask-ai"
-                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
-                onClick={() => showAskAIDialog()}
-              >
-                <Icon.Bot className="mr-3 w-6 h-auto opacity-70" /> {t("ask-ai.title")}
-              </button>
+              {showAskAI && (
+                <button
+                  id="header-ask-ai"
+                  className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                  onClick={() => showAskAIDialog()}
+                >
+                  <Icon.Bot className="mr-3 w-6 h-auto opacity-70" /> {t("ask-ai.title")}
+                </button>
+              )}
               <button
                 id="header-archived-memo"
                 className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx
index b70af0fdb..c6d361360 100644
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@@ -16,6 +16,7 @@ interface State {
   disablePublicMemos: boolean;
   additionalStyle: string;
   additionalScript: string;
+  openAIConfig: OpenAIConfig;
 }
 
 const SystemSection = () => {
@@ -29,10 +30,7 @@ const SystemSection = () => {
     additionalStyle: systemStatus.additionalStyle,
     additionalScript: systemStatus.additionalScript,
     disablePublicMemos: systemStatus.disablePublicMemos,
-  });
-  const [openAIConfig, setOpenAIConfig] = useState<OpenAIConfig>({
-    key: "",
-    host: "",
+    openAIConfig: systemStatus.openAIConfig,
   });
 
   useEffect(() => {
@@ -47,18 +45,10 @@ const SystemSection = () => {
       additionalStyle: systemStatus.additionalStyle,
       additionalScript: systemStatus.additionalScript,
       disablePublicMemos: systemStatus.disablePublicMemos,
+      openAIConfig: systemStatus.openAIConfig,
     });
   }, [systemStatus]);
 
-  useEffect(() => {
-    api.getSystemSetting().then(({ data: { data: systemSettings } }) => {
-      const openAIConfigSetting = systemSettings.find((setting) => setting.name === "openai-config");
-      if (openAIConfigSetting) {
-        setOpenAIConfig(JSON.parse(openAIConfigSetting.value));
-      }
-    });
-  }, []);
-
   const handleAllowSignUpChanged = async (value: boolean) => {
     setState({
       ...state,
@@ -97,9 +87,12 @@ const SystemSection = () => {
   };
 
   const handleOpenAIConfigKeyChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      key: value,
+    setState({
+      ...state,
+      openAIConfig: {
+        ...state.openAIConfig,
+        key: value,
+      },
     });
   };
 
@@ -107,8 +100,9 @@ const SystemSection = () => {
     try {
       await api.upsertSystemSetting({
         name: "openai-config",
-        value: JSON.stringify(openAIConfig),
+        value: JSON.stringify(state.openAIConfig),
       });
+      globalStore.setSystemStatus({ openAIConfig: state.openAIConfig });
     } catch (error) {
       console.error(error);
       return;
@@ -117,9 +111,12 @@ const SystemSection = () => {
   };
 
   const handleOpenAIConfigHostChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      host: value,
+    setState({
+      ...state,
+      openAIConfig: {
+        ...state.openAIConfig,
+        host: value,
+      },
     });
   };
 
@@ -225,7 +222,7 @@ const SystemSection = () => {
           fontSize: "14px",
         }}
         placeholder={t("setting.system-section.openai-api-key-placeholder")}
-        value={openAIConfig.key}
+        value={state.openAIConfig.key}
         onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
       />
       <div className="form-label mt-2">
@@ -238,7 +235,7 @@ const SystemSection = () => {
           fontSize: "14px",
         }}
         placeholder={t("setting.system-section.openai-api-host-placeholder")}
-        value={openAIConfig.host}
+        value={state.openAIConfig.host}
         onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
       />
       <Divider className="!mt-3 !my-4" />
diff --git a/web/src/store/module/global.ts b/web/src/store/module/global.ts
index e246e09b4..d095e83b3 100644
--- a/web/src/store/module/global.ts
+++ b/web/src/store/module/global.ts
@@ -23,6 +23,10 @@ export const initialGlobalState = async () => {
         appearance: "system",
         externalUrl: "",
       },
+      openAIConfig: {
+        key: "",
+        host: "",
+      },
     } as SystemStatus,
   };
 
@@ -65,6 +69,10 @@ export const useGlobalStore = () => {
     isDev: () => {
       return state.systemStatus.profile.mode !== "prod";
     },
+    showAskAI: () => {
+      const openAIConfig = state.systemStatus.openAIConfig;
+      return Boolean(openAIConfig.key && openAIConfig.host);
+    },
     fetchSystemStatus: async () => {
       const { data: systemStatus } = (await api.getSystemStatus()).data;
       store.dispatch(setGlobalState({ systemStatus: systemStatus }));
diff --git a/web/src/store/reducer/global.ts b/web/src/store/reducer/global.ts
index bd201f781..f45d7ab23 100644
--- a/web/src/store/reducer/global.ts
+++ b/web/src/store/reducer/global.ts
@@ -31,6 +31,10 @@ const globalSlice = createSlice({
         appearance: "system",
         externalUrl: "",
       },
+      openAIConfig: {
+        key: "",
+        host: "",
+      },
     },
   } as State,
   reducers: {
diff --git a/web/src/types/modules/system.d.ts b/web/src/types/modules/system.d.ts
index 7142bf58d..a99729c40 100644
--- a/web/src/types/modules/system.d.ts
+++ b/web/src/types/modules/system.d.ts
@@ -30,6 +30,7 @@ interface SystemStatus {
   customizedProfile: CustomizedProfile;
   storageServiceId: number;
   localStoragePath: string;
+  openAIConfig: OpenAIConfig;
 }
 
 interface SystemSetting {