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/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;