feat: Disable clicking the Next button while uploading files in RunDrawer #3355 (#3477)

### What problem does this PR solve?

feat: Disable clicking the Next button while uploading files in
RunDrawer #3355

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/file-icon/index.tsx

@@ -18,7 +18,9 @@ const FileIcon = ({ name, id }: IProps) => {
   const fileThumbnail = fileThumbnails[id];
 
   useEffect(() => {
+    if (id) {
       setDocumentIds([id]);
+    }
   }, [id, setDocumentIds]);
 
   return fileThumbnail ? (

web/src/interfaces/database/knowledge.ts

@@ -94,6 +94,7 @@ export interface ITestingChunk {
   doc_id: string;
   doc_name: string;
   img_id: string;
+  image_id: string;
   important_kwd: any[];
   kb_id: string;
   similarity: number;

web/src/pages/flow/hooks.tsx

@@ -462,13 +462,13 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
         const resetRet = await resetFlow();
         // After resetting, all previous messages will be cleared.
         if (resetRet?.code === 0) {
+          show();
           // fetch prologue
           const sendRet = await send({ id });
           if (receiveMessageError(sendRet)) {
             message.error(sendRet?.data?.message);
           } else {
             refetch();
-            show();
           }
         }
       }
@@ -641,13 +641,13 @@ export const useBuildComponentIdSelectOptions = (nodeId?: string) => {
 
   const groupedOptions = [
     {
-      label: <span>Component id</span>,
-      title: 'Component Id',
+      label: <span>Component Output</span>,
+      title: 'Component Output',
       options: componentIdOptions,
     },
     {
-      label: <span>Begin input</span>,
-      title: 'Begin input',
+      label: <span>Begin Input</span>,
+      title: 'Begin Input',
       options: query.map((x) => ({
         label: x.name,
         value: `begin@${x.key}`,

web/src/pages/flow/run-drawer/index.tsx

@@ -20,7 +20,7 @@ import {
 } from 'antd';
 import { pick } from 'lodash';
 import { Link2, Trash2 } from 'lucide-react';
-import { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BeginQueryType } from '../constant';
 import {
@@ -32,6 +32,7 @@ import useGraphStore from '../store';
 import { getDrawerWidth } from '../utils';
 import { PopoverForm } from './popover-form';
 
+import { UploadChangeParam, UploadFile } from 'antd/es/upload';
 import styles from './index.less';
 
 const RunDrawer = ({
@@ -49,6 +50,7 @@ const RunDrawer = ({
   } = useSetModalState();
   const { setRecord, currentRecord } = useSetSelectedRecord<number>();
   const { submittable } = useHandleSubmittable(form);
+  const [isUploading, setIsUploading] = useState(false);
 
   const handleShowPopover = useCallback(
     (idx: number) => () => {
@@ -80,6 +82,16 @@ const RunDrawer = ({
     return e?.fileList;
   };
 
+  const onChange = useCallback(
+    (optional: boolean) =>
+      ({ fileList }: UploadChangeParam<UploadFile>) => {
+        if (!optional) {
+          setIsUploading(fileList.some((x) => x.status === 'uploading'));
+        }
+      },
+    [],
+  );
+
   const renderWidget = useCallback(
     (q: BeginQuery, idx: number) => {
       const props: FormItemProps & { key: number } = {
@@ -124,6 +136,7 @@ const RunDrawer = ({
               action={api.parse}
               multiple
               headers={{ [Authorization]: getAuthorization() }}
+              onChange={onChange(q.optional)}
             >
               <p className="ant-upload-drag-icon">
                 <InboxOutlined />
@@ -146,7 +159,7 @@ const RunDrawer = ({
           </Form.Item>
         ),
         [BeginQueryType.Url]: (
-          <>
+          <React.Fragment key={idx}>
             <Form.Item
               {...pick(props, ['key', 'label', 'rules'])}
               required={!q.optional}
@@ -190,13 +203,21 @@ const RunDrawer = ({
                 ) : null;
               }}
             </Form.Item>
-          </>
+          </React.Fragment>
         ),
       };
 
       return BeginQueryTypeMap[q.type as BeginQueryType];
     },
-    [form, handleRemoveUrl, handleShowPopover, switchVisible, t, visible],
+    [
+      form,
+      handleRemoveUrl,
+      handleShowPopover,
+      onChange,
+      switchVisible,
+      t,
+      visible,
+    ],
   );
 
   const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatModal!);
@@ -221,9 +242,9 @@ const RunDrawer = ({
         value.forEach((x, idx) => {
           if (x?.originFileObj instanceof File) {
             if (idx === 0) {
-              nextValue += `${x.name}\n\n${x.response.data}\n\n`;
+              nextValue += `${x.name}\n\n${x.response?.data}\n\n`;
             } else {
-              nextValue += `${x.response.data}\n\n`;
+              nextValue += `${x.response?.data}\n\n`;
             }
           } else {
             if (idx === 0) {
@@ -274,7 +295,12 @@ const RunDrawer = ({
           </Form>
         </Form.Provider>
       </section>
-      <Button type={'primary'} block onClick={onOk} disabled={!submittable}>
+      <Button
+        type={'primary'}
+        block
+        onClick={onOk}
+        disabled={!submittable || isUploading}
+      >
         {t('common.next')}
       </Button>
     </Drawer>

web/src/pages/search/index.tsx

@@ -186,7 +186,7 @@ const SearchPage = () => {
                                     }
                                   >
                                     <FileIcon
-                                      id={item.img_id}
+                                      id={item.image_id}
                                       name={item.docnm_kwd}
                                     ></FileIcon>
                                     {item.docnm_kwd}