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/flow-drawer/index.less

@@ -13,3 +13,9 @@
   padding-top: 16px;
   font-weight: normal;
 }
+
+.formDrawer {
+  :global(.ant-drawer-content-wrapper) {
+    transform: translateX(0) !important;
+  }
+}

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

@@ -1,6 +1,9 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
+import { CloseOutlined } from '@ant-design/icons';
 import { Drawer, Flex, Form, Input } from 'antd';
+import { lowerFirst } from 'lodash';
+import { Play } from 'lucide-react';
 import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import { Operator, operatorMap } from '../constant';
@@ -15,6 +18,7 @@ import CategorizeForm from '../form/categorize-form';
 import CrawlerForm from '../form/crawler-form';
 import DeepLForm from '../form/deepl-form';
 import DuckDuckGoForm from '../form/duckduckgo-form';
+import EmailForm from '../form/email-form';
 import ExeSQLForm from '../form/exesql-form';
 import GenerateForm from '../form/generate-form';
 import GithubForm from '../form/github-form';
@@ -30,22 +34,24 @@ import RelevantForm from '../form/relevant-form';
 import RetrievalForm from '../form/retrieval-form';
 import RewriteQuestionForm from '../form/rewrite-question-form';
 import SwitchForm from '../form/switch-form';
+import TemplateForm from '../form/template-form';
 import TuShareForm from '../form/tushare-form';
 import WenCaiForm from '../form/wencai-form';
 import WikipediaForm from '../form/wikipedia-form';
 import YahooFinanceForm from '../form/yahoo-finance-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
 import OperatorIcon from '../operator-icon';
+import { getDrawerWidth, needsSingleStepDebugging } from '../utils';
+import SingleDebugDrawer from './single-debug-drawer';
 
-import { CloseOutlined } from '@ant-design/icons';
-import { lowerFirst } from 'lodash';
-import EmailForm from '../form/email-form';
-import TemplateForm from '../form/template-form';
-import { getDrawerWidth } from '../utils';
+import { RunTooltip } from '../flow-tooltip';
 import styles from './index.less';
 
 interface IProps {
   node?: Node;
+  singleDebugDrawerVisible: IModalProps<any>['visible'];
+  hideSingleDebugDrawer: IModalProps<any>['hideModal'];
+  showSingleDebugDrawer: IModalProps<any>['showModal'];
 }
 
 const FormMap = {
@@ -91,6 +97,9 @@ const FormDrawer = ({
   visible,
   hideModal,
   node,
+  singleDebugDrawerVisible,
+  hideSingleDebugDrawer,
+  showSingleDebugDrawer,
 }: IModalProps<any> & IProps) => {
   const operatorName: Operator = node?.data.label;
   const OperatorForm = FormMap[operatorName] ?? EmptyContent;
@@ -99,12 +108,14 @@ const FormDrawer = ({
     id: node?.id,
     data: node?.data,
   });
+
   const { t } = useTranslate('flow');
 
   const { handleValuesChange } = useHandleFormValuesChange(node?.id);
 
   useEffect(() => {
     if (visible) {
+      form.resetFields();
       form.setFieldsValue(node?.data?.form);
     }
   }, [visible, form, node?.data?.form]);
@@ -128,6 +139,14 @@ const FormDrawer = ({
                 onChange={handleNameChange}
               ></Input>
             </Flex>
+            {needsSingleStepDebugging(operatorName) && (
+              <RunTooltip>
+                <Play
+                  className="size-5 cursor-pointer"
+                  onClick={showSingleDebugDrawer}
+                />
+              </RunTooltip>
+            )}
             <CloseOutlined onClick={hideModal} />
           </Flex>
           <span className={styles.operatorDescription}>
@@ -142,6 +161,7 @@ const FormDrawer = ({
       mask={false}
       width={getDrawerWidth()}
       closeIcon={null}
+      rootClassName={styles.formDrawer}
     >
       <section className={styles.formWrapper}>
         {visible && (
@@ -152,6 +172,13 @@ const FormDrawer = ({
           ></OperatorForm>
         )}
       </section>
+      {singleDebugDrawerVisible && (
+        <SingleDebugDrawer
+          visible={singleDebugDrawerVisible}
+          hideModal={hideSingleDebugDrawer}
+          componentId={node?.id}
+        ></SingleDebugDrawer>
+      )}
     </Drawer>
   );
 };

web/src/pages/flow/flow-drawer/single-debug-drawer/index.tsx

@@ -0,0 +1,81 @@
+import CopyToClipboard from '@/components/copy-to-clipboard';
+import { useDebugSingle, useFetchInputElements } from '@/hooks/flow-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { CloseOutlined } from '@ant-design/icons';
+import { Drawer } from 'antd';
+import { isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import DebugContent from '../../debug-content';
+
+interface IProps {
+  componentId?: string;
+}
+
+const SingleDebugDrawer = ({
+  componentId,
+  visible,
+  hideModal,
+}: IModalProps<any> & IProps) => {
+  const { t } = useTranslation();
+  const { data: list } = useFetchInputElements(componentId);
+  const { debugSingle, data, loading } = useDebugSingle();
+
+  const onOk = useCallback(
+    (nextValues: any[]) => {
+      if (componentId) {
+        debugSingle({ component_id: componentId, params: nextValues });
+      }
+    },
+    [componentId, debugSingle],
+  );
+
+  const content = JSON.stringify(data, null, 2);
+
+  return (
+    <Drawer
+      title={
+        <div className="flex justify-between">
+          {t('flow.testRun')}
+          <CloseOutlined onClick={hideModal} />
+        </div>
+      }
+      width={'100%'}
+      onClose={hideModal}
+      open={visible}
+      getContainer={false}
+      mask={false}
+      placement={'bottom'}
+      height={'95%'}
+      closeIcon={null}
+    >
+      <section className="overflow-y-auto">
+        <DebugContent
+          parameters={list}
+          ok={onOk}
+          isNext={false}
+          loading={loading}
+          submitButtonDisabled={list.length === 0}
+        ></DebugContent>
+        {!isEmpty(data) ? (
+          <div className="mt-4 rounded-md bg-slate-200 border border-neutral-200">
+            <div className="flex justify-between p-2">
+              <span>JSON</span>
+              <CopyToClipboard text={content}></CopyToClipboard>
+            </div>
+            <JsonView
+              src={data}
+              displaySize
+              collapseStringsAfterLength={100000000000}
+              className="w-full h-[800px] break-words overflow-auto p-2 bg-slate-100"
+            />
+          </div>
+        ) : null}
+      </section>
+    </Drawer>
+  );
+};
+
+export default SingleDebugDrawer;