add ResetConfigsButton to Home Page

frontend/src/components/DialogButton.tsx

@@ -0,0 +1,46 @@
+import { FC, ReactElement } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger
+} from '@fluentui/react-components';
+import { ToolTipButton } from './ToolTipButton';
+import { useTranslation } from 'react-i18next';
+
+export const DialogButton: FC<{
+  icon: ReactElement,
+  tooltip: string,
+  title: string,
+  contentText: string,
+  onConfirm: () => void
+}> = ({ tooltip, icon, title, contentText, onConfirm }) => {
+  const { t } = useTranslation();
+
+  return <Dialog>
+    <DialogTrigger disableButtonEnhancement>
+      <ToolTipButton desc={tooltip} icon={icon} />
+    </DialogTrigger>
+    <DialogSurface>
+      <DialogBody>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          {contentText}
+        </DialogContent>
+        <DialogActions>
+          <DialogTrigger disableButtonEnhancement>
+            <Button appearance="secondary">{t('Cancel')}</Button>
+          </DialogTrigger>
+          <DialogTrigger disableButtonEnhancement>
+            <Button appearance="primary" onClick={onConfirm}>{t('Confirm')}
+            </Button>
+          </DialogTrigger>
+        </DialogActions>
+      </DialogBody>
+    </DialogSurface>
+  </Dialog>;
+};

frontend/src/components/ResetConfigsButton.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { DialogButton } from './DialogButton';
+import { useTranslation } from 'react-i18next';
+import { ArrowReset20Regular } from '@fluentui/react-icons';
+import commonStore from '../stores/commonStore';
+import { defaultModelConfigs } from '../pages/Configs';
+
+export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => {
+  const { t } = useTranslation();
+  return <DialogButton icon={<ArrowReset20Regular />} tooltip={t('Reset All Configs')} title={t('Reset All Configs')}
+    contentText={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.')}
+    onConfirm={() => {
+      commonStore.setModelConfigs(defaultModelConfigs, false);
+      commonStore.setCurrentConfigIndex(0, true);
+      afterConfirm?.();
+    }} />;
+};

frontend/src/pages/Configs.tsx

@@ -1,27 +1,5 @@
-import {
+import { Dropdown, Input, Label, Option, Select, Switch, Text } from '@fluentui/react-components';
-  Button,
+import { AddCircle20Regular, DataUsageSettings20Regular, Delete20Regular, Save20Regular } from '@fluentui/react-icons';
-  Dialog,
-  DialogActions,
-  DialogBody,
-  DialogContent,
-  DialogSurface,
-  DialogTitle,
-  DialogTrigger,
-  Dropdown,
-  Input,
-  Label,
-  Option,
-  Select,
-  Switch,
-  Text
-} 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';
@@ -41,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { WindowShow } from '../../wailsjs/runtime/runtime';
 import strategyImg from '../assets/images/strategy.jpg';
 import strategyZhImg from '../assets/images/strategy_zh.jpg';
+import { ResetConfigsButton } from '../components/ResetConfigsButton';
 
 export type ApiParameters = {
   apiPort: number
@@ -704,31 +683,10 @@ export const Configs: FC = observer(() => {
             commonStore.deleteModelConfig(selectedIndex);
             updateSelectedIndex(Math.min(selectedIndex, commonStore.modelConfigs.length - 1));
           }} />
-          <Dialog>
+          <ResetConfigsButton afterConfirm={() => {
-            <DialogTrigger disableButtonEnhancement>
+            setSelectedIndex(0);
-              <ToolTipButton desc={t('Reset All Configs')} icon={<ArrowReset20Regular />} />
+            setSelectedConfig(commonStore.modelConfigs[0]);
-            </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/pages/Home.tsx

@@ -17,6 +17,7 @@ import { ConfigSelector } from '../components/ConfigSelector';
 import MarkdownRender from '../components/MarkdownRender';
 import commonStore from '../stores/commonStore';
 import { Completion } from './Completion';
+import { ResetConfigsButton } from '../components/ResetConfigsButton';
 
 export type IntroductionContent = { [lang: string]: string }
 
@@ -65,7 +66,8 @@ export const Home: FC = observer(() => {
 
   return (
     <div className="flex flex-col justify-between h-full">
-      <img className="rounded-xl select-none hidden sm:block" src={banner} />
+      <img className="rounded-xl select-none hidden sm:block"
+        style={{ maxHeight: '40%', margin: '0 auto' }} src={banner} />
       <div className="flex flex-col gap-2">
         <Text size={600} weight="medium">{t('Introduction')}</Text>
         <div className="h-40 overflow-y-auto overflow-x-hidden p-1">
@@ -85,6 +87,7 @@ export const Home: FC = observer(() => {
       <div className="flex flex-col gap-2">
         <div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
           <div className="flex gap-3">
+            <ResetConfigsButton />
             <ConfigSelector />
             <RunButton />
           </div>