Feat: In a dialog message, users can enter different types of data #3221 (#8583)

### What problem does this PR solve?

Feat: In a dialog message, users can enter different types of data #3221

### Type of change


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

web/src/pages/agent/debug-content/index.tsx

@@ -12,11 +12,8 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { UploadChangeParam, UploadFile } from 'antd/es/upload';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -44,6 +41,7 @@ interface IProps {
   isNext?: boolean;
   loading?: boolean;
   submitButtonDisabled?: boolean;
+  btnText?: ReactNode;
 }
 
 const values = {};
@@ -54,76 +52,45 @@ const DebugContent = ({
   isNext = true,
   loading = false,
   submitButtonDisabled = false,
+  btnText,
 }: IProps) => {
   const { t } = useTranslation();
 
   const FormSchema = useMemo(() => {
-    const obj = parameters.reduce((pre, cur, idx) => {
-      const type = cur.type;
-      let fieldSchema;
-      if (StringFields.some((x) => x === type)) {
-        fieldSchema = z.string();
-      } else if (type === BeginQueryType.Boolean) {
-        fieldSchema = z.boolean();
-      } else if (type === BeginQueryType.Integer) {
-        fieldSchema = z.coerce.number();
-      } else {
-        fieldSchema = z.instanceof(File);
-      }
+    const obj = parameters.reduce<Record<string, z.ZodType>>(
+      (pre, cur, idx) => {
+        const type = cur.type;
+        let fieldSchema;
+        if (StringFields.some((x) => x === type)) {
+          fieldSchema = z.string();
+        } else if (type === BeginQueryType.Boolean) {
+          fieldSchema = z.boolean();
+        } else if (type === BeginQueryType.Integer) {
+          fieldSchema = z.coerce.number();
+        } else {
+          fieldSchema = z.instanceof(File);
+        }
 
-      if (cur.optional) {
-        fieldSchema.optional();
-      }
+        if (cur.optional) {
+          fieldSchema.optional();
+        }
 
-      pre[idx.toString()] = fieldSchema;
+        pre[idx.toString()] = fieldSchema;
 
-      return pre;
-    }, {});
+        return pre;
+      },
+      {},
+    );
 
     return z.object(obj);
   }, [parameters]);
 
-  const form = useForm({
+  const form = useForm<z.infer<typeof FormSchema>>({
     defaultValues: values,
     resolver: zodResolver(FormSchema),
   });
 
-  const {
-    visible,
-    hideModal: hidePopover,
-    switchVisible,
-    showModal: showPopover,
-  } = useSetModalState();
-
-  const { setRecord, currentRecord } = useSetSelectedRecord<number>();
-  // const { submittable } = useHandleSubmittable(form);
   const submittable = true;
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleShowPopover = useCallback(
-    (idx: number) => () => {
-      setRecord(idx);
-      showPopover();
-    },
-    [setRecord, showPopover],
-  );
-
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    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: string) => {
@@ -132,14 +99,6 @@ const DebugContent = ({
         label: q.name ?? q.key,
         name: idx,
       };
-      if (q.optional === false) {
-        props.rules = [{ required: true }];
-      }
-
-      // const urlList: { url: string; result: string }[] =
-      //   form.getFieldValue(idx) || [];
-
-      const urlList: { url: string; result: string }[] = [];
 
       const BeginQueryTypeMap = {
         [BeginQueryType.Line]: (
@@ -183,7 +142,10 @@ const DebugContent = ({
                   <RAGFlowSelect
                     allowClear
                     options={
-                      q.options?.map((x) => ({ label: x, value: x })) ?? []
+                      q.options?.map((x) => ({
+                        label: x,
+                        value: x as string,
+                      })) ?? []
                     }
                     {...field}
                   ></RAGFlowSelect>
@@ -295,10 +257,10 @@ const DebugContent = ({
             <ButtonLoading
               type="submit"
               loading={loading}
-              disabled={!submittable || isUploading || submitButtonDisabled}
+              disabled={!submittable || submitButtonDisabled}
               className="w-full"
             >
-              {t(isNext ? 'common.next' : 'flow.run')}
+              {btnText || t(isNext ? 'common.next' : 'flow.run')}
             </ButtonLoading>
           </form>
         </Form>