perf: confirm ux (#4843)

* perf: delete tip ux

* perf: confirm ux

projects/app/src/pageComponents/dataset/detail/CollectionCard/Context.tsx

@@ -3,7 +3,7 @@ import { type Dispatch, type ReactNode, type SetStateAction, useState } from 're
 import { useTranslation } from 'next-i18next';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
-import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useDisclosure } from '@chakra-ui/react';
 import { checkTeamWebSyncLimit } from '@/web/support/user/team/api';
 import { getDatasetCollections, postWebsiteSync } from '@/web/core/dataset/api';

projects/app/src/pageComponents/dataset/detail/CollectionCard/WebsiteConfig.tsx

@@ -3,22 +3,12 @@ import { useTranslation } from 'next-i18next';
 import { strIsLink } from '@fastgpt/global/common/string/tools';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useForm } from 'react-hook-form';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { getDocPath } from '@/web/common/system/doc';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useMyStep } from '@fastgpt/web/hooks/useStep';
 import MyDivider from '@fastgpt/web/components/common/MyDivider';
-import React, { useRef } from 'react';
-import {
-  Box,
-  Link,
-  Input,
-  Button,
-  ModalBody,
-  ModalFooter,
-  Textarea,
-  Stack
-} from '@chakra-ui/react';
+import React from 'react';
+import { Box, Link, Input, Button, ModalBody, ModalFooter, Stack } from '@chakra-ui/react';
 import {
   DataChunkSplitModeEnum,
   DatasetCollectionDataProcessModeEnum
@@ -33,6 +23,7 @@ import CollectionChunkForm, {
 } from '../Form/CollectionChunkForm';
 import { getLLMDefaultChunkSize } from '@fastgpt/global/core/dataset/training/utils';
 import { type ChunkSettingsType } from '@fastgpt/global/core/dataset/type';
+import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 
 export type WebsiteConfigFormType = {
   websiteConfig: {
@@ -78,10 +69,6 @@ const WebsiteConfigModal = ({
 
   const isEdit = !!websiteConfig?.url;
 
-  const { ConfirmModal, openConfirm } = useConfirm({
-    type: 'common'
-  });
-
   const { activeStep, goToPrevious, goToNext, MyStep } = useMyStep({
     defaultStep: 0,
     steps
@@ -186,73 +173,31 @@ const WebsiteConfigModal = ({
             <Button variant={'whiteBase'} onClick={goToPrevious}>
               {t('common:last_step')}
             </Button>
-            <Button
-              ml={2}
-              onClick={form.handleSubmit((data) => {
-                openConfirm(
-                  () =>
-                    onSuccess({
-                      websiteConfig: websiteInfoGetValues(),
-                      chunkSettings: collectionChunkForm2StoreChunkData({
-                        ...data,
-                        agentModel: datasetDetail.agentModel,
-                        vectorModel: datasetDetail.vectorModel
-                      })
-                    }),
-                  undefined,
-                  isEdit
-                    ? t('common:core.dataset.website.Confirm Update Tips')
-                    : t('common:core.dataset.website.Confirm Create Tips')
-                )();
-              })}
-            >
-              {t('common:core.dataset.website.Start Sync')}
-            </Button>
+            <PopoverConfirm
+              Trigger={<Button ml={2}>{t('common:core.dataset.website.Start Sync')}</Button>}
+              content={
+                isEdit
+                  ? t('common:core.dataset.website.Confirm Update Tips')
+                  : t('common:core.dataset.website.Confirm Create Tips')
+              }
+              onConfirm={() =>
+                form.handleSubmit((data) =>
+                  onSuccess({
+                    websiteConfig: websiteInfoGetValues(),
+                    chunkSettings: collectionChunkForm2StoreChunkData({
+                      ...data,
+                      agentModel: datasetDetail.agentModel,
+                      vectorModel: datasetDetail.vectorModel
+                    })
+                  })
+                )()
+              }
+            />
           </>
         )}
       </ModalFooter>
-      <ConfirmModal />
     </MyModal>
   );
 };
 
 export default WebsiteConfigModal;
-
-const PromptTextarea = ({
-  defaultValue,
-  onChange,
-  onClose
-}: {
-  defaultValue: string;
-  onChange: (e: string) => void;
-  onClose: () => void;
-}) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-  const { t } = useTranslation();
-
-  return (
-    <MyModal
-      isOpen
-      title={t('common:core.dataset.import.Custom prompt')}
-      iconSrc="modal/edit"
-      w={'600px'}
-      onClose={onClose}
-    >
-      <ModalBody whiteSpace={'pre-wrap'} fontSize={'sm'} px={[3, 6]} pt={[3, 6]}>
-        <Textarea ref={ref} rows={8} fontSize={'sm'} defaultValue={defaultValue} />
-        <Box>{Prompt_AgentQA.fixedText}</Box>
-      </ModalBody>
-      <ModalFooter>
-        <Button
-          onClick={() => {
-            const val = ref.current?.value || Prompt_AgentQA.description;
-            onChange(val);
-            onClose();
-          }}
-        >
-          {t('common:Confirm')}
-        </Button>
-      </ModalFooter>
-    </MyModal>
-  );
-};

projects/app/src/pageComponents/dataset/detail/DataCard.tsx

@@ -7,7 +7,6 @@ import {
 } from '@/web/core/dataset/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -32,6 +31,7 @@ import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import TrainingStates from './CollectionCard/TrainingStates';
 import { getTextValidLength } from '@fastgpt/global/common/string/utils';
+import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 
 const DataCard = () => {
   const theme = useTheme();
@@ -90,28 +90,22 @@ const DataCard = () => {
 
   const canWrite = useMemo(() => datasetDetail.permission.hasWritePer, [datasetDetail]);
 
-  const { openConfirm, ConfirmModal } = useConfirm({
-    content: t('common:dataset.Confirm to delete the data'),
-    type: 'delete'
-  });
-  const onDeleteOneData = useMemoizedFn((dataId: string) => {
-    openConfirm(async () => {
-      try {
-        await delOneDatasetDataById(dataId);
-        setDatasetDataList((prev) => {
-          return prev.filter((data) => data._id !== dataId);
-        });
-        toast({
-          title: t('common:delete_success'),
-          status: 'success'
-        });
-      } catch (error) {
-        toast({
-          title: getErrText(error),
-          status: 'error'
-        });
-      }
-    })();
+  const onDeleteOneData = useMemoizedFn(async (dataId: string) => {
+    try {
+      await delOneDatasetDataById(dataId);
+      setDatasetDataList((prev) => {
+        return prev.filter((data) => data._id !== dataId);
+      });
+      toast({
+        title: t('common:delete_success'),
+        status: 'success'
+      });
+    } catch (error) {
+      toast({
+        title: getErrText(error),
+        status: 'error'
+      });
+    }
   });
 
   return (
@@ -333,18 +327,24 @@ const DataCard = () => {
                     {getTextValidLength(item.q + item.a || '')}
                   </Flex>
                   {canWrite && (
-                    <IconButton
-                      display={'flex'}
-                      p={1}
-                      boxShadow={'1'}
-                      icon={<MyIcon name={'common/trash'} w={'14px'} color={'myGray.600'} />}
-                      variant={'whiteDanger'}
-                      size={'xsSquare'}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteOneData(item._id);
-                      }}
-                      aria-label={''}
+                    <PopoverConfirm
+                      Trigger={
+                        <IconButton
+                          display={'flex'}
+                          p={1}
+                          boxShadow={'1'}
+                          icon={<MyIcon name={'common/trash'} w={'14px'} />}
+                          variant={'whiteDanger'}
+                          size={'xsSquare'}
+                          aria-label={''}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        />
+                      }
+                      content={t('common:dataset.Confirm to delete the data')}
+                      type="delete"
+                      onConfirm={() => onDeleteOneData(item._id)}
                     />
                   )}
                 </Flex>
@@ -386,7 +386,6 @@ const DataCard = () => {
           onClose={() => setErrorModalId('')}
         />
       )}
-      <ConfirmModal />
     </MyBox>
   );
 };

projects/app/src/pageComponents/dataset/detail/Info/index.tsx

@@ -55,10 +55,6 @@ const Info = ({ datasetId }: { datasetId: string }) => {
   const vllmModelList = useMemo(() => getVlmModelList(), [getVlmModelList]);
   const vlmModel = watch('vlmModel');
 
-  const { ConfirmModal: ConfirmDelModal } = useConfirm({
-    content: t('common:core.dataset.Delete Confirm'),
-    type: 'delete'
-  });
   const { openConfirm: onOpenConfirmRebuild, ConfirmModal: ConfirmRebuildModal } = useConfirm({
     title: t('common:action_confirm'),
     content: t('dataset:confirm_to_rebuild_embedding_tip'),
@@ -414,7 +410,6 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </>
       )}
 
-      <ConfirmDelModal />
       <ConfirmRebuildModal countDown={10} />
       <ConfirmSyncScheduleModal />
       {editedDataset && (