perf: confirm ux (#4843)

* perf: delete tip ux

* perf: confirm ux

projects/app/src/pageComponents/chat/ChatHistorySlider.tsx

@@ -7,7 +7,6 @@ import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import MyMenu from '@fastgpt/web/components/common/MyMenu';
 import { useContextSelector } from 'use-context-selector';
@@ -16,6 +15,7 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
 import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
 import { useChatStore } from '@/web/core/chat/context/useChatStore';
+import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 
 type HistoryItemType = {
   id: string;
@@ -73,9 +73,6 @@ const ChatHistorySlider = ({ confirmClearText }: { confirmClearText: string }) =
     title: t('common:core.chat.Custom History Title'),
     placeholder: t('common:core.chat.Custom History Title Description')
   });
-  const { openConfirm, ConfirmModal } = useConfirm({
-    content: confirmClearText
-  });
 
   const canRouteToDetail = useMemo(
     () => appId && userInfo?.team.permission.hasWritePer && showRouteToAppDetail,
@@ -153,19 +150,21 @@ const ChatHistorySlider = ({ confirmClearText }: { confirmClearText: string }) =
         </Button>
         {/* Clear */}
         {isPc && histories.length > 0 && (
-          <IconButton
-            ml={3}
-            h={'100%'}
-            variant={'whiteDanger'}
-            size={'mdSquare'}
-            aria-label={''}
-            borderRadius={'50%'}
-            icon={<MyIcon name={'common/clearLight'} w={'16px'} />}
-            onClick={() =>
-              openConfirm(() => {
-                onClearHistory();
-              })()
+          <PopoverConfirm
+            Trigger={
+              <Box ml={3} h={'100%'}>
+                <IconButton
+                  variant={'whiteDanger'}
+                  size={'mdSquare'}
+                  aria-label={''}
+                  borderRadius={'50%'}
+                  icon={<MyIcon name={'common/clearLight'} w={'16px'} />}
+                />
+              </Box>
             }
+            type="delete"
+            content={confirmClearText}
+            onConfirm={() => onClearHistory()}
           />
         )}
       </Flex>
@@ -314,7 +313,6 @@ const ChatHistorySlider = ({ confirmClearText }: { confirmClearText: string }) =
         </Flex>
       )}
       <EditTitleModal />
-      <ConfirmModal />
     </MyBox>
   );
 };