feat: add a cancel button to each modal

youngle316 · Aug 12, 2023 · e5faa5b · e5faa5b
1 parent d287f95
commit e5faa5b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 13 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -28,7 +28,8 @@
     "dark": "Dark",
     "light": "Light",
     "system": "System",
-    "modelSettingTitle": "Stream AI responses word by word (typing animation)"
+    "modelSettingTitle": "Stream AI responses word by word (typing animation)",
+    "cancel": "Cancel"
   },
   "response": {
     "ApiKeyIsRequired": "Please enter your OpenAI API key."
@@ -65,6 +66,7 @@
     "advancedOptions": "View Advanced Options (Context Limit etc.)",
     "contextLimit": "Context Limit",
     "contextLimitDes": "The number of messages to include in the context for the AI assistant. When set to 1, the AI assistant will only see and remember the most recent message.",
-    "all": "All"
+    "all": "All",
+    "cancel": "Cancel"
   }
 }
diff --git a/messages/zh.json b/messages/zh.json
@@ -28,7 +28,8 @@
     "dark": "深色主题",
     "light": "浅色主题",
     "system": "跟随系统",
-    "modelSettingTitle": "逐字逐句地流式传输AI的回答（打字动画）"
+    "modelSettingTitle": "逐字逐句地流式传输AI的回答（打字动画）",
+    "cancel": "取消"
   },
   "response": {
     "ApiKeyIsRequired": "请输入 OpenAI API 密钥"
@@ -65,6 +66,7 @@
     "advancedOptions": "查看高级选项（上下文限制 等）",
     "contextLimit": "上下文限制",
     "contextLimitDes": "AI 助手上下文中包含的信息数量。当设置为 1 时，AI 助手将只看到并记住最近的信息。",
-    "all": "所有"
+    "all": "所有",
+    "cancel": "取消"
   }
 }
diff --git a/src/app/[locale]/SettingContent.tsx b/src/app/[locale]/SettingContent.tsx
@@ -80,6 +80,10 @@ const AppSetting = () => {
     setIsModalOpen(false);
   };
 
+  const cancelSetting = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <div>
       <div className="mb-4">
@@ -117,10 +121,19 @@ const AppSetting = () => {
             placeholder="https://api.openai.com/v1"
           />
         </div>
-        <button type="button" className="primary-button" onClick={saveSetting}>
+      </form>
+      <div className="flex justify-center gap-2">
+        <button
+          type="button"
+          className="basic_button bg-blue-600 hover:bg-blue-500"
+          onClick={saveSetting}
+        >
           {t("save")}
         </button>
-      </form>
+        <button type="button" className="basic_button" onClick={cancelSetting}>
+          {t("cancel")}
+        </button>
+      </div>
     </div>
   );
 };

diff --git a/src/app/[locale]/chat/[chatId]/PageModelSet.tsx b/src/app/[locale]/chat/[chatId]/PageModelSet.tsx
@@ -62,6 +62,10 @@ function PageModelSet() {
     setIsModalOpen(false);
   };
 
+  const cancelSetting = () => {
+    setIsModalOpen(false);
+  };
+
   const contextLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setContextLimit(Number(e.target.value));
   };
@@ -123,13 +127,18 @@ function PageModelSet() {
         </Disclosure>
       </div>
 
-      <button
-        type="button"
-        className="primary-button"
-        onClick={saveModelSetting}
-      >
-        {t("save")}
-      </button>
+      <div className="flex justify-center gap-2">
+        <button
+          type="button"
+          className="basic_button bg-blue-600 hover:bg-blue-500"
+          onClick={saveModelSetting}
+        >
+          {t("save")}
+        </button>
+        <button type="button" className="basic_button" onClick={cancelSetting}>
+          {t("cancel")}
+        </button>
+      </div>
     </div>
   );
 }