reset confirm for completion page

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

@@ -142,5 +142,6 @@
   "MacOS is not yet supported for performing this operation, please do it manually.": "MacOS尚未支持此操作, 请手动执行",
   "Linux is not yet supported for performing this operation, please do it manually.": "Linux尚未支持此操作, 请手动执行",
   "On Linux system, you must manually install python dependencies.": "在Linux系统下, 你必须手动安装python依赖",
-  "Update completed, please restart the program.": "更新完成, 请重启程序"
+  "Update completed, please restart the program.": "更新完成, 请重启程序",
+  "Are you sure you want to reset this page? It cannot be undone.": "你确定要重置本页吗？这无法撤销"
 }

frontend/src/components/DialogButton.tsx

@@ -13,17 +13,22 @@ import { ToolTipButton } from './ToolTipButton';
 import { useTranslation } from 'react-i18next';
 
 export const DialogButton: FC<{
-  icon: ReactElement,
-  tooltip: string,
+  text?: string | null
+  icon?: ReactElement,
+  tooltip?: string | null,
+  className?: string,
   title: string,
   contentText: string,
   onConfirm: () => void
-}> = ({ tooltip, icon, title, contentText, onConfirm }) => {
+}> = ({ text, icon, tooltip, className, title, contentText, onConfirm }) => {
   const { t } = useTranslation();
 
   return <Dialog>
     <DialogTrigger disableButtonEnhancement>
-      <ToolTipButton desc={tooltip} icon={icon} />
+      {tooltip ?
+        <ToolTipButton className={className} desc={tooltip} text={text} icon={icon} /> :
+        <Button className={className} icon={icon}>{text}</Button>
+      }
     </DialogTrigger>
     <DialogSurface>
       <DialogBody>

frontend/src/components/ToolTipButton.tsx

@@ -5,6 +5,7 @@ export const ToolTipButton: FC<{
   text?: string | null,
   desc: string,
   icon?: ReactElement,
+  className?: string,
   size?: 'small' | 'medium' | 'large',
   shape?: 'rounded' | 'circular' | 'square';
   appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
@@ -14,6 +15,7 @@ export const ToolTipButton: FC<{
   text,
   desc,
   icon,
+  className,
   size,
   shape,
   appearance,
@@ -22,7 +24,7 @@ export const ToolTipButton: FC<{
 }) => {
   return (
     <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
-      <Button disabled={disabled} icon={icon} onClick={onClick} size={size} shape={shape}
+      <Button className={className} disabled={disabled} icon={icon} onClick={onClick} size={size} shape={shape}
         appearance={appearance}>{text}</Button>
     </Tooltip>
   );

frontend/src/pages/Completion.tsx

@@ -9,6 +9,7 @@ import { ApiParameters } from './Configs';
 import commonStore, { ModelStatus } from '../stores/commonStore';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { toast } from 'react-toastify';
+import { DialogButton } from '../components/DialogButton';
 
 export type CompletionParams = Omit<ApiParameters, 'apiPort'> & {
   stop: string,
@@ -348,9 +349,11 @@ const CompletionPanel: FC = observer(() => {
         </div>
         <div className="grow" />
         <div className="flex justify-between gap-2">
-          <Button className="grow" onClick={() => {
+          <DialogButton className="grow" text={t('Reset')} title={t('Reset')}
+            contentText={t('Are you sure you want to reset this page? It cannot be undone.')}
+            onConfirm={() => {
               setPreset(defaultPresets.find((preset) => preset.name === name)!);
-          }}>{t('Reset')}</Button>
+            }} />
           <Button className="grow" appearance="primary" onClick={() => {
             if (commonStore.completionGenerating) {
               completionSseController?.abort();