Feat: Modify the default style of the agent node anchor #9869 (#10489)

### What problem does this PR solve?

Feat: Modify the default style of the agent node anchor #9869

### Type of change


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

web/src/locales/en.ts

@@ -116,7 +116,7 @@ export default {
       generate: 'Generate',
       raptor: 'Raptor',
       processingType: 'Processing Type',
-      dataPipeline: 'Data Pipeline',
+      dataPipeline: 'Ingestion pipeline',
       operations: 'Operations',
       taskId: 'Task ID',
       duration: 'Duration',
@@ -284,11 +284,11 @@ export default {
       fileFilter: 'File Filter',
       setDefaultTip: '',
       setDefault: 'Set as Default',
-      eidtLinkDataPipeline: 'Edit Data Pipeline',
+      eidtLinkDataPipeline: 'Edit Ingestion pipeline',
-      linkPipelineSetTip: 'Manage data pipeline linkage with this dataset',
+      linkPipelineSetTip: 'Manage Ingestion pipeline linkage with this dataset',
       default: 'Default',
-      dataPipeline: 'Data Pipeline',
+      dataPipeline: 'Ingestion pipeline',
-      linkDataPipeline: 'Link Data Pipeline',
+      linkDataPipeline: 'Link Ingestion pipeline',
       enableAutoGenerate: 'Enable Auto Generate',
       teamPlaceholder: 'Please select a team.',
       dataFlowPlaceholder: 'Please select a pipeline.',
@@ -1595,7 +1595,7 @@ This delimiter is used to split the input text into several text pieces echo of
       createFromTemplate: 'Create from template',
       importJsonFile: 'Import JSON file',
       ceateAgent: 'Agent flow',
-      createPipeline: 'Data pipeline',
+      createPipeline: 'Ingestion pipeline',
       chooseAgentType: 'Choose Agent Type',
     },
     llmTools: {
@@ -1688,9 +1688,9 @@ This delimiter is used to split the input text into several text pieces echo of
       <p>To keep them, please click Rerun to re-run the current stage.</p> `,
       changeStepModalConfirmText: 'Switch Anyway',
       changeStepModalCancelText: 'Cancel',
-      unlinkPipelineModalTitle: 'Unlink data pipeline',
+      unlinkPipelineModalTitle: 'Unlink Ingestion pipeline',
       unlinkPipelineModalContent: `
-      <p>Once unlinked, this Dataset will no longer be connected to the current Data Pipeline.</p> 
+      <p>Once unlinked, this Dataset will no longer be connected to the current Ingestion pipeline.</p> 
       <p>Files that are already being parsed  will continue until completion</p> 
       <p>Files that are not yet parsed will no longer be processed</p> <br/>
       <p>Are you sure you want to proceed?</p> `,

web/src/pages/agent/canvas/edge/index.tsx

@@ -102,7 +102,7 @@ function InnerButtonEdge({
           ...showHighlight,
           ...placeholderHighlightStyle,
         }}
-        className={cn('text-text-secondary')}
+        className={cn('text-text-disabled')}
       />
 
       <EdgeLabelRenderer>

web/src/pages/agent/canvas/index.tsx

@@ -1,4 +1,4 @@
-import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
+import { useTheme } from '@/components/theme-provider';
 import {
   Tooltip,
   TooltipContent,
@@ -19,7 +19,6 @@ import { NotebookPen } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChatSheet } from '../chat/chat-sheet';
-import { AgentBackground } from '../components/background';
 import {
   AgentChatContext,
   AgentChatLogContext,
@@ -42,6 +41,7 @@ import { useMoveNote } from '../hooks/use-move-note';
 import { usePlaceholderManager } from '../hooks/use-placeholder-manager';
 import { useDropdownManager } from './context';
 
+import { AgentBackground } from '@/components/canvas/background';
 import Spotlight from '@/components/spotlight';
 import {
   useHideFormSheetOnNodeDeletion,
@@ -61,7 +61,6 @@ import { GenerateNode } from './node/generate-node';
 import { InvokeNode } from './node/invoke-node';
 import { IterationNode, IterationStartNode } from './node/iteration-node';
 import { KeywordNode } from './node/keyword-node';
-import { LogicNode } from './node/logic-node';
 import { MessageNode } from './node/message-node';
 import NoteNode from './node/note-node';
 import { PlaceholderNode } from './node/placeholder-node';
@@ -78,7 +77,6 @@ export const nodeTypes: NodeTypes = {
   beginNode: BeginNode,
   placeholderNode: PlaceholderNode,
   relevantNode: RelevantNode,
-  logicNode: LogicNode,
   noteNode: NoteNode,
   switchNode: SwitchNode,
   generateNode: GenerateNode,
@@ -173,8 +171,6 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     }
   };
 
-  const isDarkTheme = useIsDarkTheme();
-
   useHideFormSheetOnNodeDeletion({ hideFormDrawer });
 
   const { visible, hideModal, showModal } = useSetModalState();
@@ -243,7 +239,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
       >
         <defs>
           <marker
-            fill="rgb(157 149 225)"
+            fill="var(--text-disabled)"
             id="logo"
             viewBox="0 0 40 40"
             refX="8"
@@ -286,12 +282,6 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
           defaultEdgeOptions={{
             type: 'buttonEdge',
             markerEnd: 'logo',
-            style: {
-              strokeWidth: 1,
-              stroke: isDarkTheme
-                ? 'rgba(91, 93, 106, 1)'
-                : 'rgba(151, 154, 171, 1)',
-            },
             zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
           }}
           deleteKeyCode={['Delete', 'Backspace']}

web/src/pages/agent/canvas/node/agent-node.tsx

@@ -7,9 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { AgentExceptionMethod, NodeHandleId } from '../../constant';
 import useGraphStore from '../../store';
 import { isBottomSubAgent } from '../../utils';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { RightHandleStyle } from './handle-icon';
-import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
@@ -40,19 +39,11 @@ function InnerAgentNode({
       <NodeWrapper selected={selected}>
         {isHeadAgent && (
           <>
-            <CommonHandle
+            <LeftEndHandle></LeftEndHandle>
-              type="target"
-              position={Position.Left}
-              isConnectable={isConnectable}
-              style={LeftHandleStyle}
-              nodeId={id}
-              id={NodeHandleId.End}
-            ></CommonHandle>
             <CommonHandle
               type="source"
               position={Position.Right}
               isConnectable={isConnectable}
-              className={styles.handle}
               style={RightHandleStyle}
               nodeId={id}
               id={NodeHandleId.Start}
@@ -61,18 +52,22 @@ function InnerAgentNode({
           </>
         )}
 
+        {isHeadAgent || (
           <Handle
             type="target"
             position={Position.Top}
             isConnectable={false}
             id={NodeHandleId.AgentTop}
+            className="!bg-accent-primary !size-2"
           ></Handle>
+        )}
         <Handle
           type="source"
           position={Position.Bottom}
           isConnectable={false}
           id={NodeHandleId.AgentBottom}
           style={{ left: 180 }}
+          className="!bg-accent-primary !size-2"
         ></Handle>
         <Handle
           type="source"
@@ -80,6 +75,7 @@ function InnerAgentNode({
           isConnectable={false}
           id={NodeHandleId.Tool}
           style={{ left: 20 }}
+          className="!bg-accent-primary !size-2"
         ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="flex flex-col gap-2">

web/src/pages/agent/canvas/node/categorize-node.tsx

@@ -3,8 +3,7 @@ import { ICategorizeNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
 import { memo } from 'react';
-import { NodeHandleId } from '../../constant';
+import { CommonHandle, LeftEndHandle } from './handle';
-import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@@ -20,13 +19,7 @@ export function InnerCategorizeNode({
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected}>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          type="target"
-          position={Position.Left}
-          isConnectable
-          id={NodeHandleId.End}
-          nodeId={id}
-        ></CommonHandle>
 
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
 
@@ -41,7 +34,6 @@ export function InnerCategorizeNode({
                   {position.name}
                 </div>
                 <CommonHandle
-                  // key={position.text}
                   id={position.uuid}
                   type="source"
                   position={Position.Right}

web/src/pages/agent/canvas/node/handle.tsx

@@ -1,8 +1,9 @@
 import { useSetModalState } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
-import { Handle, HandleProps } from '@xyflow/react';
+import { Handle, HandleProps, Position } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { HandleContext } from '../../context';
 import { useDropdownManager } from '../context';
 import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
@@ -33,7 +34,7 @@ export function CommonHandle({
       <Handle
         {...props}
         className={cn(
-          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
+          'inline-flex justify-center items-center !bg-accent-primary !border-none group-hover:!size-4 group-hover:!rounded-sm',
           className,
         )}
         onClick={(e) => {
@@ -47,7 +48,7 @@ export function CommonHandle({
           showModal();
         }}
       >
-        <Plus className="size-3 pointer-events-none text-text-title-invert" />
+        <Plus className="size-3 pointer-events-none text-white hidden group-hover:inline-block" />
         {visible && (
           <InnerNextStepDropdown
             hideModal={() => {
@@ -62,3 +63,19 @@ export function CommonHandle({
     </HandleContext.Provider>
   );
 }
+
+export function LeftEndHandle({
+  isConnectable,
+  ...props
+}: Omit<HandleProps, 'type' | 'position'>) {
+  return (
+    <Handle
+      isConnectable={isConnectable}
+      className="!bg-accent-primary !size-2"
+      id={NodeHandleId.End}
+      type="target"
+      position={Position.Left}
+      {...props}
+    ></Handle>
+  );
+}

web/src/pages/agent/canvas/node/index.tsx

@@ -3,8 +3,8 @@ import { NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { needsSingleStepDebugging } from '../../utils';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
@@ -23,14 +23,7 @@ function InnerRagNode({
       showRun={needsSingleStepDebugging(data.label)}
     >
       <NodeWrapper selected={selected}>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
         <CommonHandle
           type="source"
           position={Position.Right}

web/src/pages/agent/canvas/node/iteration-node.tsx

@@ -7,8 +7,7 @@ import { NodeProps, NodeResizeControl, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
 import OperatorIcon from '../../operator-icon';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
-import { RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@@ -24,30 +23,21 @@ export function InnerIterationNode({
   return (
     <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
       <section
-        className={cn('h-full bg-transparent rounded-b-md ', {
+        className={cn('h-full bg-transparent rounded-b-md group', {
           [styles.selectedHeader]: selected,
         })}
       >
         <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
           <ResizeIcon />
         </NodeResizeControl>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          nodeId={id}
-        ></CommonHandle>
         <CommonHandle
           id={NodeHandleId.Start}
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
-          className={styles.handle}
           nodeId={id}
         ></CommonHandle>
-
         <NodeHeader
           id={id}
           name={data.name}
@@ -75,8 +65,6 @@ function InnerIterationStartNode({
         type="source"
         position={Position.Right}
         isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
         isConnectableEnd={false}
         id={NodeHandleId.Start}
         nodeId={id}

web/src/pages/agent/canvas/node/logic-node.tsx

@@ -1,41 +0,0 @@
-import { ILogicNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
-
-export function InnerLogicNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<ILogicNode>) {
-  return (
-    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id="c"
-          type="source"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <CommonHandle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          style={RightHandleStyle}
-          id="b"
-          nodeId={id}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      </NodeWrapper>
-    </ToolBar>
-  );
-}
-
-export const LogicNode = memo(InnerLogicNode);

web/src/pages/agent/canvas/node/message-node.tsx

@@ -1,35 +1,21 @@
 import { IMessageNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
+import { NodeProps } from '@xyflow/react';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
-import { NodeHandleId } from '../../constant';
+import { LeftEndHandle } from './handle';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
 
-function InnerMessageNode({
+function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IMessageNode>) {
   const messages: string[] = get(data, 'form.messages', []);
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected}>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
         {/* <CommonHandle
           type="source"
           position={Position.Right}
@@ -47,7 +33,6 @@ function InnerMessageNode({
             [styles.nodeHeader]: messages.length > 0,
           })}
         ></NodeHeader>
-
         <Flex vertical gap={8} className={styles.messageNodeContainer}>
           {messages.map((message, idx) => {
             return (

web/src/pages/agent/canvas/node/node-wrapper.tsx

@@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
   return (
     <section
       className={cn(
-        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
+        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs group',
         { 'border border-accent-primary': selected },
         className,
       )}

web/src/pages/agent/canvas/node/retrieval-node.tsx

@@ -7,8 +7,7 @@ import { get } from 'lodash';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@@ -28,22 +27,12 @@ function InnerRetrievalNode({
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected}>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
         <CommonHandle
           id={NodeHandleId.Start}
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
-          className={styles.handle}
-          style={RightHandleStyle}
           nodeId={id}
           isConnectableEnd={false}
         ></CommonHandle>

web/src/pages/agent/canvas/node/switch-node.tsx

@@ -2,10 +2,10 @@ import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo, useCallback } from 'react';
-import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
+import { SwitchOperatorOptions } from '../../constant';
 import { LogicalOperatorIcon } from '../../form/switch-form';
 import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@@ -66,13 +66,7 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
   return (
     <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
       <NodeWrapper selected={selected}>
-        <CommonHandle
+        <LeftEndHandle></LeftEndHandle>
-          type="target"
-          position={Position.Left}
-          isConnectable
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="gap-2.5 flex flex-col">
           {positions.map((position, idx) => {

web/src/pages/agent/canvas/node/tool-node.tsx

@@ -49,6 +49,7 @@ function InnerToolNode({
         type="target"
         position={Position.Top}
         isConnectable={isConnectable}
+        className="!bg-accent-primary !size-2"
       ></Handle>
       <ul className="space-y-2">
         {tools.map((x) => (

web/src/pages/agent/canvas/node/toolbar.tsx

@@ -66,7 +66,7 @@ export function ToolBar({
 
   return (
     <TooltipNode selected={selected}>
-      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipTrigger className="h-full">{children}</TooltipTrigger>
 
       <TooltipContent position={Position.Top}>
         <section className="flex gap-2 items-center">

web/src/pages/agent/constant.tsx

@@ -69,7 +69,6 @@ export enum Operator {
   AkShare = 'AkShare',
   YahooFinance = 'YahooFinance',
   Jin10 = 'Jin10',
-  Concentrator = 'Concentrator',
   TuShare = 'TuShare',
   Note = 'Note',
   Crawler = 'Crawler',
@@ -102,7 +101,6 @@ export const AgentOperatorList = [
   Operator.RewriteQuestion,
   Operator.KeywordExtract,
   Operator.Switch,
-  Operator.Concentrator,
   Operator.Iteration,
   Operator.WaitingDialogue,
   Operator.Note,
@@ -129,9 +127,6 @@ export const componentMenuList = [
   {
     name: Operator.Switch,
   },
-  {
-    name: Operator.Concentrator,
-  },
   {
     name: Operator.Iteration,
   },
@@ -544,8 +539,6 @@ export const initialJin10Values = {
   ...initialQueryBaseValues,
 };
 
-export const initialConcentratorValues = {};
-
 export const initialTuShareValues = {
   token: 'xxx',
   src: 'eastmoney',
@@ -824,7 +817,6 @@ export const RestrictedUpstreamMap = {
   [Operator.AkShare]: [Operator.Begin],
   [Operator.YahooFinance]: [Operator.Begin],
   [Operator.Jin10]: [Operator.Begin],
-  [Operator.Concentrator]: [Operator.Begin],
   [Operator.TuShare]: [Operator.Begin],
   [Operator.Crawler]: [Operator.Begin],
   [Operator.Note]: [],
@@ -840,6 +832,7 @@ export const RestrictedUpstreamMap = {
   [Operator.StringTransform]: [Operator.Begin],
   [Operator.UserFillUp]: [Operator.Begin],
   [Operator.Tool]: [Operator.Begin],
+  [Operator.Placeholder]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -865,7 +858,6 @@ export const NodeMap = {
   [Operator.SearXNG]: 'ragNode',
   [Operator.ExeSQL]: 'ragNode',
   [Operator.Switch]: 'switchNode',
-  [Operator.Concentrator]: 'logicNode',
   [Operator.WenCai]: 'ragNode',
   [Operator.AkShare]: 'ragNode',
   [Operator.YahooFinance]: 'ragNode',
@@ -908,7 +900,6 @@ export const BeginQueryTypeIconMap = {
 
 export const NoDebugOperatorsList = [
   Operator.Begin,
-  Operator.Concentrator,
   Operator.Message,
   Operator.RewriteQuestion,
   Operator.Switch,

web/src/pages/agent/form-sheet/form-config-map.tsx

@@ -136,9 +136,6 @@ export const FormConfigMap = {
   [Operator.SearXNG]: {
     component: SearXNGForm,
   },
-  [Operator.Concentrator]: {
-    component: () => <></>,
-  },
   [Operator.Note]: {
     component: () => <></>,
   },

web/src/pages/agent/hooks.tsx

@@ -25,7 +25,6 @@ import {
   initialBingValues,
   initialCategorizeValues,
   initialCodeValues,
-  initialConcentratorValues,
   initialCrawlerValues,
   initialDeepLValues,
   initialDuckValues,
@@ -124,7 +123,6 @@ export const useInitializeOperatorParams = () => {
       [Operator.AkShare]: initialAkShareValues,
       [Operator.YahooFinance]: initialYahooFinanceValues,
       [Operator.Jin10]: initialJin10Values,
-      [Operator.Concentrator]: initialConcentratorValues,
       [Operator.TuShare]: initialTuShareValues,
       [Operator.Note]: initialNoteValues,
       [Operator.Crawler]: initialCrawlerValues,
@@ -140,6 +138,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Tool]: {},
       [Operator.UserFillUp]: initialUserFillUpValues,
       [Operator.StringTransform]: initialStringTransformValues,
+      [Operator.Placeholder]: {},
     };
   }, [llmId]);
 

web/src/pages/agent/hooks/use-add-node.ts

@@ -18,7 +18,6 @@ import {
   initialBingValues,
   initialCategorizeValues,
   initialCodeValues,
-  initialConcentratorValues,
   initialCrawlerValues,
   initialDeepLValues,
   initialDuckValues,
@@ -100,7 +99,6 @@ export const useInitializeOperatorParams = () => {
       [Operator.AkShare]: initialAkShareValues,
       [Operator.YahooFinance]: initialYahooFinanceValues,
       [Operator.Jin10]: initialJin10Values,
-      [Operator.Concentrator]: initialConcentratorValues,
       [Operator.TuShare]: initialTuShareValues,
       [Operator.Note]: initialNoteValues,
       [Operator.Crawler]: initialCrawlerValues,

web/src/pages/agent/version-dialog/index.tsx

@@ -1,3 +1,5 @@
+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -22,7 +24,6 @@ import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
-import { AgentBackground } from '../components/background';
 
 export function VersionDialog({
   hideModal,
@@ -121,6 +122,7 @@ export function VersionDialog({
                         minZoom={0.1}
                       >
                         <AgentBackground></AgentBackground>
+                        <Spotlight className="z-0" opcity={0.7} coverage={70} />
                       </ReactFlow>
                     </ReactFlowProvider>
                   </section>

web/src/pages/data-flow/canvas/index.tsx

@@ -21,7 +21,6 @@ import '@xyflow/react/dist/style.css';
 import { NotebookPen } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AgentBackground } from '../components/background';
 import { AgentInstanceContext, HandleContext } from '../context';
 
 import FormSheet from '../form-sheet/next';
@@ -31,6 +30,8 @@ import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useMoveNote } from '../hooks/use-move-note';
 import { useDropdownManager } from './context';
 
+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { useRunDataflow } from '../hooks/use-run-dataflow';
 import {
   useHideFormSheetOnNodeDeletion,
@@ -263,6 +264,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
           onBeforeDelete={handleBeforeDelete}
         >
           <AgentBackground></AgentBackground>
+          <Spotlight className="z-0" opcity={0.7} coverage={70} />
           <Controls position={'bottom-center'} orientation="horizontal">
             <ControlButton>
               <Tooltip>

web/src/pages/data-flow/components/background.tsx

@@ -1,13 +0,0 @@
-import { useIsDarkTheme } from '@/components/theme-provider';
-import { Background } from '@xyflow/react';
-
-export function AgentBackground() {
-  const isDarkTheme = useIsDarkTheme();
-
-  return (
-    <Background
-      color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
-      bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
-    />
-  );
-}

web/src/pages/data-flow/version-dialog/index.tsx

@@ -1,3 +1,5 @@
+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -22,7 +24,6 @@ import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
-import { AgentBackground } from '../components/background';
 
 export function VersionDialog({
   hideModal,
@@ -121,6 +122,7 @@ export function VersionDialog({
                         minZoom={0.1}
                       >
                         <AgentBackground></AgentBackground>
+                        <Spotlight className="z-0" opcity={0.7} coverage={70} />
                       </ReactFlow>
                     </ReactFlowProvider>
                   </section>