add button to reset all configs

frontend/src/_locales/zh-hans/main.json

@@ -125,5 +125,9 @@
   "Writer, Translator, Role-playing": "写作，翻译，角色扮演",
   "Chinese Kongfu": "情境冒险",
   "Allow external access to the API (service must be restarted)": "允许外部访问API (必须重启服务)",
-  "Custom": "自定义"
+  "Custom": "自定义",
+  "Reset All Configs": "重置所有配置",
+  "Cancel": "取消",
+  "Confirm": "确认",
+  "Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.": "你确定要重置所有配置吗？这会获取最新的预设配置，但会覆盖你的自定义配置，并且无法撤销"
 }

frontend/src/pages/Configs.tsx

@@ -1,5 +1,26 @@
-import { Dropdown, Input, Label, Option, Select, Switch } from '@fluentui/react-components';
-import { AddCircle20Regular, DataUsageSettings20Regular, Delete20Regular, Save20Regular } from '@fluentui/react-icons';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Dropdown,
+  Input,
+  Label,
+  Option,
+  Select,
+  Switch
+} from '@fluentui/react-components';
+import {
+  AddCircle20Regular,
+  ArrowReset20Regular,
+  DataUsageSettings20Regular,
+  Delete20Regular,
+  Save20Regular
+} from '@fluentui/react-icons';
 import React, { FC } from 'react';
 import { Section } from '../components/Section';
 import { Labeled } from '../components/Labeled';
@@ -680,6 +701,31 @@ export const Configs: FC = observer(() => {
             commonStore.deleteModelConfig(selectedIndex);
             updateSelectedIndex(Math.min(selectedIndex, commonStore.modelConfigs.length - 1));
           }} />
+          <Dialog>
+            <DialogTrigger disableButtonEnhancement>
+              <ToolTipButton desc={t('Reset All Configs')} icon={<ArrowReset20Regular />} />
+            </DialogTrigger>
+            <DialogSurface>
+              <DialogBody>
+                <DialogTitle>{t('Reset All Configs')}</DialogTitle>
+                <DialogContent>
+                  {t('Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.')}
+                </DialogContent>
+                <DialogActions>
+                  <DialogTrigger disableButtonEnhancement>
+                    <Button appearance="secondary">{t('Cancel')}</Button>
+                  </DialogTrigger>
+                  <DialogTrigger disableButtonEnhancement>
+                    <Button appearance="primary" onClick={() => {
+                      commonStore.setModelConfigs(defaultModelConfigs, false); // updateSelectedIndex() will save configs
+                      updateSelectedIndex(0);
+                    }}>{t('Confirm')}
+                    </Button>
+                  </DialogTrigger>
+                </DialogActions>
+              </DialogBody>
+            </DialogSurface>
+          </Dialog>
           <ToolTipButton desc={t('Save Config')} icon={<Save20Regular />} onClick={onClickSave} />
         </div>
         <div className="flex items-center gap-4">

frontend/src/stores/commonStore.ts

@@ -89,14 +89,16 @@ class CommonStore {
   };
 
   setModelConfigs = (configs: ModelConfig[], saveConfig: boolean = true) => {
-    this.modelConfigs = configs;
+    this.modelConfigs = JSON.parse(JSON.stringify(configs)); // deep copy
     if (saveConfig)
       saveConfigs();
   };
 
   createModelConfig = (config: ModelConfig = defaultModelConfigs[0], saveConfig: boolean = true) => {
-    if (config.name === defaultModelConfigs[0].name)
+    if (config.name === defaultModelConfigs[0].name) {
+      config = JSON.parse(JSON.stringify(config)); // deep copy
       config.name = new Date().toLocaleString();
+    }
     this.modelConfigs.push(config);
     if (saveConfig)
       saveConfigs();