Feat: Supports to debug single component in Agent. #3993 (#4007)

### What problem does this PR solve?

Feat: Supports to debug single component in Agent. #3993
Fix: The github button on the login page is displayed incorrectly  #4002

### Type of change


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

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

@@ -1,26 +1,7 @@
-import { Authorization } from '@/constants/authorization';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useSetSelectedRecord } from '@/hooks/logic-hooks';
-import { useHandleSubmittable } from '@/hooks/login-hooks';
 import { IModalProps } from '@/interfaces/common';
-import api from '@/utils/api';
-import { getAuthorization } from '@/utils/authorization-util';
-import { UploadOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Drawer,
-  Form,
-  FormItemProps,
-  Input,
-  InputNumber,
-  Select,
-  Switch,
-  Upload,
-} from 'antd';
-import { pick } from 'lodash';
-import React, { useCallback, useState } from 'react';
+import { Drawer } from 'antd';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BeginQueryType } from '../constant';
 import {
   useGetBeginNodeDataQuery,
   useSaveGraphBeforeOpeningDebugDrawer,
@@ -28,152 +9,23 @@ import {
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { getDrawerWidth } from '../utils';
-import { PopoverForm } from './popover-form';
 
-import { UploadChangeParam, UploadFile } from 'antd/es/upload';
-import { Link } from 'lucide-react';
-import styles from './index.less';
+import DebugContent from '../debug-content';
 
 const RunDrawer = ({
   hideModal,
   showModal: showChatModal,
 }: IModalProps<any>) => {
   const { t } = useTranslation();
-  const [form] = Form.useForm();
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-  const {
-    visible,
-    hideModal: hidePopover,
-    switchVisible,
-    showModal: showPopover,
-  } = useSetModalState();
-  const { setRecord, currentRecord } = useSetSelectedRecord<number>();
-  const { submittable } = useHandleSubmittable(form);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleShowPopover = useCallback(
-    (idx: number) => () => {
-      setRecord(idx);
-      showPopover();
-    },
-    [setRecord, showPopover],
-  );
 
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
   const query: BeginQuery[] = getBeginNodeDataQuery();
 
-  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 { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
+    showChatModal!,
   );
 
-  const renderWidget = useCallback(
-    (q: BeginQuery, idx: number) => {
-      const props: FormItemProps & { key: number } = {
-        key: idx,
-        label: q.name,
-        name: idx,
-      };
-      if (q.optional === false) {
-        props.rules = [{ required: true }];
-      }
-
-      const urlList: { url: string; result: string }[] =
-        form.getFieldValue(idx) || [];
-
-      const BeginQueryTypeMap = {
-        [BeginQueryType.Line]: (
-          <Form.Item {...props}>
-            <Input></Input>
-          </Form.Item>
-        ),
-        [BeginQueryType.Paragraph]: (
-          <Form.Item {...props}>
-            <Input.TextArea rows={4}></Input.TextArea>
-          </Form.Item>
-        ),
-        [BeginQueryType.Options]: (
-          <Form.Item {...props}>
-            <Select
-              allowClear
-              options={q.options?.map((x) => ({ label: x, value: x })) ?? []}
-            ></Select>
-          </Form.Item>
-        ),
-        [BeginQueryType.File]: (
-          <React.Fragment key={idx}>
-            <Form.Item label={q.name} required={!q.optional}>
-              <div className="relative">
-                <Form.Item
-                  {...props}
-                  valuePropName="fileList"
-                  getValueFromEvent={normFile}
-                  noStyle
-                >
-                  <Upload
-                    name="file"
-                    action={api.parse}
-                    multiple
-                    headers={{ [Authorization]: getAuthorization() }}
-                    onChange={onChange(q.optional)}
-                  >
-                    <Button icon={<UploadOutlined />}>
-                      {t('common.upload')}
-                    </Button>
-                  </Upload>
-                </Form.Item>
-                <Form.Item
-                  {...pick(props, ['key', 'label', 'rules'])}
-                  required={!q.optional}
-                  className={urlList.length > 0 ? 'mb-1' : ''}
-                  noStyle
-                >
-                  <PopoverForm visible={visible} switchVisible={switchVisible}>
-                    <Button
-                      onClick={handleShowPopover(idx)}
-                      className="absolute left-1/2 top-0"
-                      icon={<Link className="size-3" />}
-                    >
-                      {t('flow.pasteFileLink')}
-                    </Button>
-                  </PopoverForm>
-                </Form.Item>
-              </div>
-            </Form.Item>
-            <Form.Item name={idx} noStyle {...pick(props, ['rules'])} />
-          </React.Fragment>
-        ),
-        [BeginQueryType.Integer]: (
-          <Form.Item {...props}>
-            <InputNumber></InputNumber>
-          </Form.Item>
-        ),
-        [BeginQueryType.Boolean]: (
-          <Form.Item valuePropName={'checked'} {...props}>
-            <Switch></Switch>
-          </Form.Item>
-        ),
-      };
-
-      return BeginQueryTypeMap[q.type as BeginQueryType];
-    },
-    [form, handleShowPopover, onChange, switchVisible, t, visible],
-  );
-
-  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatModal!);
-
   const handleRunAgent = useCallback(
     (nextValues: Record<string, any>) => {
       const currentNodes = updateNodeForm('begin', nextValues, ['query']);
@@ -183,25 +35,12 @@ const RunDrawer = ({
     [handleRun, hideModal, updateNodeForm],
   );
 
-  const onOk = useCallback(async () => {
-    const values = await form.validateFields();
-    const nextValues = Object.entries(values).map(([key, value]) => {
-      const item = query[Number(key)];
-      let nextValue = value;
-      if (Array.isArray(value)) {
-        nextValue = ``;
-
-        value.forEach((x) => {
-          nextValue +=
-            x?.originFileObj instanceof File
-              ? `${x.name}\n${x.response?.data}\n----\n`
-              : `${x.url}\n${x.result}\n----\n`;
-        });
-      }
-      return { ...item, value: nextValue };
-    });
-    handleRunAgent(nextValues);
-  }, [form, handleRunAgent, query]);
+  const onOk = useCallback(
+    async (nextValues: any[]) => {
+      handleRunAgent(nextValues);
+    },
+    [handleRunAgent],
+  );
 
   return (
     <Drawer
@@ -213,39 +52,11 @@ const RunDrawer = ({
       width={getDrawerWidth()}
       mask={false}
     >
-      <section className={styles.formWrapper}>
-        <Form.Provider
-          onFormFinish={(name, { values, forms }) => {
-            if (name === 'urlForm') {
-              const { basicForm } = forms;
-              const urlInfo = basicForm.getFieldValue(currentRecord) || [];
-              basicForm.setFieldsValue({
-                [currentRecord]: [...urlInfo, { ...values, name: values.url }],
-              });
-              hidePopover();
-            }
-          }}
-        >
-          <Form
-            name="basicForm"
-            autoComplete="off"
-            layout={'vertical'}
-            form={form}
-          >
-            {query.map((x, idx) => {
-              return renderWidget(x, idx);
-            })}
-          </Form>
-        </Form.Provider>
-      </section>
-      <Button
-        type={'primary'}
-        block
-        onClick={onOk}
-        disabled={!submittable || isUploading}
-      >
-        {t('common.next')}
-      </Button>
+      <DebugContent
+        ok={onOk}
+        parameters={query}
+        loading={loading}
+      ></DebugContent>
     </Drawer>
   );
 };