perf: confirm ux (#4843)

* perf: delete tip ux

* perf: confirm ux

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>
-  );
-};