chore: Optimize operations in Q&A mode (#9274)

Co-authored-by: billsyli <billsyli@tencent.com>

web/app/components/base/popover/index.tsx

@@ -17,6 +17,7 @@ type IPopover = {
   btnElement?: string | React.ReactNode
   btnClassName?: string | ((open: boolean) => string)
   manualClose?: boolean
+  disabled?: boolean
 }
 
 const timeoutDuration = 100
@@ -30,6 +31,7 @@ export default function CustomPopover({
   className,
   btnClassName,
   manualClose,
+  disabled = false,
 }: IPopover) {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const timeOutRef = useRef<NodeJS.Timeout | null>(null)
@@ -60,6 +62,7 @@ export default function CustomPopover({
             >
               <Popover.Button
                 ref={buttonRef}
+                disabled={disabled}
                 className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName
                   ? ''
                   : typeof btnClassName === 'string'

web/app/components/datasets/create/step-two/index.tsx

@@ -132,6 +132,7 @@ const StepTwo = ({
       ? IndexingType.QUALIFIED
       : IndexingType.ECONOMICAL,
   )
+  const [isLanguageSelectDisabled, setIsLanguageSelectDisabled] = useState(false)
   const [docForm, setDocForm] = useState<DocForm | string>(
     (datasetId && documentDetail) ? documentDetail.doc_form : DocForm.TEXT,
   )
@@ -200,9 +201,9 @@ const StepTwo = ({
     }
   }
 
-  const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT) => {
+  const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT, language?: string) => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams(docForm)!)
+    const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams(docForm, language)!)
     if (segmentationType === SegmentType.CUSTOM)
       setCustomFileIndexingEstimate(res)
     else
@@ -270,7 +271,7 @@ const StepTwo = ({
     }
   }
 
-  const getFileIndexingEstimateParams = (docForm: DocForm): IndexingEstimateParams | undefined => {
+  const getFileIndexingEstimateParams = (docForm: DocForm, language?: string): IndexingEstimateParams | undefined => {
     if (dataSourceType === DataSourceType.FILE) {
       return {
         info_list: {
@@ -282,7 +283,7 @@ const StepTwo = ({
         indexing_technique: getIndexing_technique() as string,
         process_rule: getProcessRule(),
         doc_form: docForm,
-        doc_language: docLanguage,
+        doc_language: language || docLanguage,
         dataset_id: datasetId as string,
       }
     }
@@ -295,7 +296,7 @@ const StepTwo = ({
         indexing_technique: getIndexing_technique() as string,
         process_rule: getProcessRule(),
         doc_form: docForm,
-        doc_language: docLanguage,
+        doc_language: language || docLanguage,
         dataset_id: datasetId as string,
       }
     }
@@ -308,7 +309,7 @@ const StepTwo = ({
         indexing_technique: getIndexing_technique() as string,
         process_rule: getProcessRule(),
         doc_form: docForm,
-        doc_language: docLanguage,
+        doc_language: language || docLanguage,
         dataset_id: datasetId as string,
       }
     }
@@ -483,8 +484,26 @@ const StepTwo = ({
       setDocForm(DocForm.TEXT)
   }
 
+  const previewSwitch = async (language?: string) => {
+    setPreviewSwitched(true)
+    setIsLanguageSelectDisabled(true)
+    if (segmentationType === SegmentType.AUTO)
+      setAutomaticFileIndexingEstimate(null)
+    else
+      setCustomFileIndexingEstimate(null)
+    try {
+      await fetchFileIndexingEstimate(DocForm.QA, language)
+    }
+    finally {
+      setIsLanguageSelectDisabled(false)
+    }
+  }
+
   const handleSelect = (language: string) => {
     setDocLanguage(language)
+    // Switch language, re-cutter
+    if (docForm === DocForm.QA && previewSwitched)
+      previewSwitch(language)
   }
 
   const changeToEconomicalType = () => {
@@ -494,15 +513,6 @@ const StepTwo = ({
     }
   }
 
-  const previewSwitch = async () => {
-    setPreviewSwitched(true)
-    if (segmentationType === SegmentType.AUTO)
-      setAutomaticFileIndexingEstimate(null)
-    else
-      setCustomFileIndexingEstimate(null)
-    await fetchFileIndexingEstimate(DocForm.QA)
-  }
-
   useEffect(() => {
     // fetch rules
     if (!isSetting) {
@@ -777,7 +787,7 @@ const StepTwo = ({
                     <div className='mb-[2px] text-md font-medium text-gray-900'>{t('datasetCreation.stepTwo.QATitle')}</div>
                     <div className='inline-flex items-center text-[13px] leading-[18px] text-gray-500'>
                       <span className='pr-1'>{t('datasetCreation.stepTwo.QALanguage')}</span>
-                      <LanguageSelect currentLanguage={docLanguage} onSelect={handleSelect} />
+                      <LanguageSelect currentLanguage={docLanguage} onSelect={handleSelect} disabled={isLanguageSelectDisabled} />
                     </div>
                   </div>
                   <div className='shrink-0'>
@@ -948,7 +958,7 @@ const StepTwo = ({
               <div className='grow flex items-center'>
                 <div>{t('datasetCreation.stepTwo.previewTitle')}</div>
                 {docForm === DocForm.QA && !previewSwitched && (
-                  <Button className='ml-2' variant='secondary-accent' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
+                  <Button className='ml-2' variant='secondary-accent' onClick={() => previewSwitch()}>{t('datasetCreation.stepTwo.previewButton')}</Button>
                 )}
               </div>
               <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>

web/app/components/datasets/create/step-two/language-select/index.tsx

@@ -9,16 +9,19 @@ import { languages } from '@/i18n/language'
 export type ILanguageSelectProps = {
   currentLanguage: string
   onSelect: (language: string) => void
+  disabled?: boolean
 }
 
 const LanguageSelect: FC<ILanguageSelectProps> = ({
   currentLanguage,
   onSelect,
+  disabled,
 }) => {
   return (
     <Popover
       manualClose
       trigger='click'
+      disabled={disabled}
       htmlContent={
         <div className='w-full py-1'>
           {languages.filter(language => language.supported).map(({ prompt_name, name }) => (