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/canvas/index.tsx

@@ -5,6 +5,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useSetModalState } from '@/hooks/common-hooks';
+import { get } from 'lodash';
 import { FolderInput, FolderOutput } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import ReactFlow, {
@@ -24,6 +25,7 @@ import {
   useHandleExportOrImportJsonFile,
   useSelectCanvasData,
   useShowFormDrawer,
+  useShowSingleDebugDrawer,
   useValidateConnection,
   useWatchNodeFormDataChange,
 } from '../hooks';
@@ -95,6 +97,11 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     showModal: showChatModal,
     hideModal: hideChatModal,
   } = useSetModalState();
+  const {
+    singleDebugDrawerVisible,
+    showSingleDebugDrawer,
+    hideSingleDebugDrawer,
+  } = useShowSingleDebugDrawer();
 
   const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
     useShowFormDrawer();
@@ -116,11 +123,24 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
   const onNodeClick: NodeMouseHandler = useCallback(
     (e, node) => {
       if (node.data.label !== Operator.Note) {
+        hideSingleDebugDrawer();
         hideRunOrChatDrawer();
         showFormDrawer(node);
       }
+      // handle single debug icon click
+      if (
+        get(e.target, 'dataset.play') === 'true' ||
+        get(e.target, 'parentNode.dataset.play') === 'true'
+      ) {
+        showSingleDebugDrawer();
+      }
     },
-    [hideRunOrChatDrawer, showFormDrawer],
+    [
+      hideRunOrChatDrawer,
+      hideSingleDebugDrawer,
+      showFormDrawer,
+      showSingleDebugDrawer,
+    ],
   );
 
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
@@ -193,12 +213,6 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
         onSelectionChange={onSelectionChange}
         nodeOrigin={[0.5, 0]}
         isValidConnection={isValidConnection}
-        onChangeCapture={(...params) => {
-          console.info('onChangeCapture:', ...params);
-        }}
-        onChange={(...params) => {
-          console.info('params:', ...params);
-        }}
         defaultEdgeOptions={{
           type: 'buttonEdge',
           markerEnd: 'logo',
@@ -214,7 +228,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           <ControlButton onClick={handleImportJson}>
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <FolderInput />
                 </TooltipTrigger>
                 <TooltipContent>Import</TooltipContent>
@@ -224,7 +238,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           <ControlButton onClick={handleExportJson}>
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <FolderOutput />
                 </TooltipTrigger>
                 <TooltipContent>Export</TooltipContent>
@@ -238,6 +252,9 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           node={clickedNode}
           visible={formDrawerVisible}
           hideModal={hideFormDrawer}
+          singleDebugDrawerVisible={singleDebugDrawerVisible}
+          hideSingleDebugDrawer={hideSingleDebugDrawer}
+          showSingleDebugDrawer={showSingleDebugDrawer}
         ></FormDrawer>
       )}
       {chatVisible && (

web/src/pages/flow/canvas/node/node-header.tsx

@@ -1,12 +1,14 @@
+import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
+import { Play } from 'lucide-react';
 import { Operator, operatorMap } from '../../constant';
 import OperatorIcon from '../../operator-icon';
+import { needsSingleStepDebugging } from '../../utils';
 import NodeDropdown from './dropdown';
-
-import { useTranslate } from '@/hooks/common-hooks';
-import styles from './index.less';
 import { NextNodePopover } from './popover';
 
+import { RunTooltip } from '../../flow-tooltip';
+import styles from './index.less';
 interface IProps {
   id: string;
   label: string;
@@ -15,12 +17,17 @@ interface IProps {
   className?: string;
 }
 
-export function RunStatus({ id, name }: Omit<IProps, 'label'>) {
+export function RunStatus({ id, name, label }: IProps) {
   const { t } = useTranslate('flow');
   return (
-    <section className="flex justify-end items-center pb-1 ">
+    <section className="flex  justify-end items-center pb-1 gap-2 text-blue-600">
+      {needsSingleStepDebugging(label) && (
+        <RunTooltip>
+          <Play className="size-3 cursor-pointer" data-play />
+        </RunTooltip> // data-play is used to trigger single step debugging
+      )}
       <NextNodePopover nodeId={id} name={name}>
-        <span className="text-blue-600 cursor-pointer text-[10px]">
+        <span className="cursor-pointer text-[10px]">
           {t('operationResults')}
         </span>
       </NextNodePopover>
@@ -30,8 +37,10 @@ export function RunStatus({ id, name }: Omit<IProps, 'label'>) {
 
 const NodeHeader = ({ label, id, name, gap = 4, className }: IProps) => {
   return (
-    <section className="haha">
-      {label !== Operator.Answer && <RunStatus id={id} name={name}></RunStatus>}
+    <section>
+      {label !== Operator.Answer && (
+        <RunStatus id={id} name={name} label={label}></RunStatus>
+      )}
       <Flex
         flex={1}
         align="center"