clear confirm for chat page

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

@@ -145,5 +145,6 @@
   "Update completed, please restart the program.": "更新完成, 请重启程序",
   "Are you sure you want to reset this page? It cannot be undone.": "你确定要重置本页吗？这无法撤销",
   "Model file download is not complete": "模型文件下载未完成",
-  "Error": "错误"
+  "Error": "错误",
+  "Are you sure you want to clear the conversation? It cannot be undone.": "你确定要清空对话吗？这无法撤销"
 }

frontend/src/components/DialogButton.tsx

@@ -19,15 +19,22 @@ export const DialogButton: FC<{
   className?: string,
   title: string,
   contentText: string,
-  onConfirm: () => void
-}> = ({ text, icon, tooltip, className, title, contentText, onConfirm }) => {
+  onConfirm: () => void,
+  size?: 'small' | 'medium' | 'large',
+  shape?: 'rounded' | 'circular' | 'square',
+  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent',
+}> = ({
+  text, icon, tooltip, className, title, contentText,
+  onConfirm, size, shape, appearance
+}) => {
   const { t } = useTranslation();
 
   return <Dialog>
     <DialogTrigger disableButtonEnhancement>
       {tooltip ?
-        <ToolTipButton className={className} desc={tooltip} text={text} icon={icon} /> :
-        <Button className={className} icon={icon}>{text}</Button>
+        <ToolTipButton className={className} desc={tooltip} text={text} icon={icon} size={size} shape={shape}
+          appearance={appearance} /> :
+        <Button className={className} icon={icon} size={size} shape={shape} appearance={appearance}>{text}</Button>
       }
     </DialogTrigger>
     <DialogSurface>

frontend/src/pages/Chat.tsx

@@ -15,6 +15,7 @@ import { CopyButton } from '../components/CopyButton';
 import { ReadButton } from '../components/ReadButton';
 import { toast } from 'react-toastify';
 import { WorkHeader } from '../components/WorkHeader';
+import { DialogButton } from '../components/DialogButton';
 
 export const userName = 'M E';
 export const botName = 'A I';
@@ -251,16 +252,16 @@ const ChatPanel: FC = observer(() => {
         })}
       </div>
       <div className="flex items-end gap-2">
-        <ToolTipButton desc={t('Clear')}
+        <DialogButton tooltip={t('Clear')}
           icon={<Delete28Regular />}
-          size="large" shape="circular" appearance="subtle"
-          onClick={(e) => {
+          size="large" shape="circular" appearance="subtle" title={t('Clear')}
+          contentText={t('Are you sure you want to clear the conversation? It cannot be undone.')}
+          onConfirm={() => {
             if (generating)
               chatSseController?.abort();
             commonStore.setConversations({});
             commonStore.setConversationsOrder([]);
-          }}
-        />
+          }} />
         <Textarea
           ref={inputRef}
           className="grow"