💄 style: improve clear topic tips (lobehub#1247)

bentwnghk · Feb 6, 2024 · 2d133e9 · 2d133e9
1 parent 7354096
commit 2d133e9
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/features/ChatInput/ActionBar/Clear.tsx b/src/features/ChatInput/ActionBar/Clear.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { Eraser } from 'lucide-react';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
@@ -14,26 +14,31 @@ const Clear = memo(() => {
   const [clearMessage] = useChatStore((s) => [s.clearMessage]);
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
   const hotkeys = [META_KEY, PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+  const [confirmOpened, updateConfirmOpened] = useState(false);
 
   const resetConversation = useCallback(() => {
     clearMessage();
     clearImageList();
   }, []);
 
+  const actionTitle: any = confirmOpened
+    ? void 0
+    : <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+
   return (
     <Popconfirm
       arrow={false}
       okButtonProps={{ danger: true, type: 'primary' }}
-      onConfirm={() => {
-        resetConversation();
-      }}
+      onConfirm={resetConversation}
+      onOpenChange={updateConfirmOpened}
+      open={confirmOpened}
       placement={'topRight'}
       title={t('confirmClearCurrentMessages', { ns: 'chat' })}
     >
       <ActionIcon
         icon={Eraser}
         placement={'bottom'}
-        title={(<HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />) as any}
+        title={actionTitle}
       />
     </Popconfirm>
   );