add ResetConfigsButton to Home Page

frontend/src/pages/Configs.tsx

@@ -1,27 +1,5 @@
-import {
-  Button,
-  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 { Dropdown, Input, Label, Option, Select, Switch, Text } from '@fluentui/react-components';
+import { AddCircle20Regular, 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>
-            <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>
+          <ResetConfigsButton afterConfirm={() => {
+            setSelectedIndex(0);
+            setSelectedConfig(commonStore.modelConfigs[0]);
+          }} />
           <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>