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/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 { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import { CommonHandle, LeftEndHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
 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
-              type="target"
-              position={Position.Left}
-              isConnectable={isConnectable}
-              style={LeftHandleStyle}
-              nodeId={id}
-              id={NodeHandleId.End}
-            ></CommonHandle>
+            <LeftEndHandle></LeftEndHandle>
             <CommonHandle
               type="source"
               position={Position.Right}
               isConnectable={isConnectable}
-              className={styles.handle}
               style={RightHandleStyle}
               nodeId={id}
               id={NodeHandleId.Start}
@@ -61,18 +52,22 @@ function InnerAgentNode({
           </>
         )}
 
-        <Handle
-          type="target"
-          position={Position.Top}
-          isConnectable={false}
-          id={NodeHandleId.AgentTop}
-        ></Handle>
+        {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 } from './handle';
+import { CommonHandle, LeftEndHandle } 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
-          type="target"
-          position={Position.Left}
-          isConnectable
-          id={NodeHandleId.End}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
 
         <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 { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
+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
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
         <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 { RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
 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
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
         <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 { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
+import { LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
 
-function InnerMessageNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IMessageNode>) {
+function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
   const messages: string[] = get(data, 'form.messages', []);
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected}>
-        <CommonHandle
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
         {/* <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 { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
 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
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
         <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
-          type="target"
-          position={Position.Left}
-          isConnectable
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
         <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">