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?.();
+    }} />;
+};