Feat: Adjust the style of the agent canvas connection line #3221 (#8922)

### What problem does this PR solve?

Feat: Adjust the style of the agent canvas connection line #3221

### Type of change


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

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

@@ -25,7 +25,7 @@ function InnerAgentNode({
 
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         {isHeadAgent && (
           <>
             <CommonHandle

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

@@ -18,12 +18,12 @@ import styles from './index.less';
 import { NodeWrapper } from './node-wrapper';
 
 // TODO: do not allow other nodes to connect to this node
-function InnerBeginNode({ data, id }: NodeProps<IBeginNode>) {
+function InnerBeginNode({ data, id, selected }: NodeProps<IBeginNode>) {
   const { t } = useTranslation();
   const inputs: Record<string, BeginQuery> = get(data, 'form.inputs', {});
 
   return (
-    <NodeWrapper>
+    <NodeWrapper selected={selected}>
       <CommonHandle
         type="source"
         position={Position.Right}

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

@@ -19,7 +19,7 @@ export function InnerCategorizeNode({
   const { positions } = useBuildCategorizeHandlePositions({ data, id });
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           type="target"
           position={Position.Left}

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

@@ -16,7 +16,7 @@ function InnerRagNode({
 }: NodeProps<IRagNode>) {
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           id={NodeHandleId.End}
           type="target"

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

@@ -67,9 +67,10 @@ export function InnerIterationNode({
 function InnerIterationStartNode({
   isConnectable = true,
   id,
+  selected,
 }: NodeProps<IIterationStartNode>) {
   return (
-    <NodeWrapper className="w-20">
+    <NodeWrapper className="w-20" selected={selected}>
       <CommonHandle
         type="source"
         position={Position.Right}

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

@@ -15,7 +15,7 @@ export function InnerLogicNode({
 }: NodeProps<ILogicNode>) {
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           id="c"
           type="source"

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

@@ -21,7 +21,7 @@ function InnerMessageNode({
   const messages: string[] = get(data, 'form.messages', []);
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           type="target"
           position={Position.Left}

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

@@ -1,14 +1,14 @@
 import { cn } from '@/lib/utils';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 
-export function NodeWrapper({
-  children,
-  className,
-}: PropsWithChildren & HTMLAttributes<HTMLDivElement>) {
+type IProps = HTMLAttributes<HTMLDivElement> & { selected?: boolean };
+
+export function NodeWrapper({ children, className, selected }: IProps) {
   return (
     <section
       className={cn(
         'bg-background-header-bar p-2.5 rounded-md w-[200px] text-xs',
+        { 'border border-background-checked': selected },
         className,
       )}
     >

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

@@ -24,7 +24,7 @@ const FormSchema = z.object({
   text: z.string(),
 });
 
-function NoteNode({ data, id }: NodeProps<INoteNode>) {
+function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
   const { t } = useTranslation();
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -37,7 +37,10 @@ function NoteNode({ data, id }: NodeProps<INoteNode>) {
   useWatchFormChange(id, form);
 
   return (
-    <NodeWrapper className="p-0  w-full h-full flex flex-col rounded-md ">
+    <NodeWrapper
+      className="p-0  w-full h-full flex flex-col rounded-md "
+      selected={selected}
+    >
       <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
         <ResizeIcon />
       </NodeResizeControl>

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

@@ -35,7 +35,7 @@ function InnerRetrievalNode({
 
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           id={NodeHandleId.End}
           type="target"

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

@@ -65,7 +65,7 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
   const { positions } = useBuildSwitchHandlePositions({ data, id });
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         <CommonHandle
           type="target"
           position={Position.Left}

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

@@ -8,7 +8,11 @@ import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
 import useGraphStore from '../../store';
 import { NodeWrapper } from './node-wrapper';
 
-function InnerToolNode({ id, isConnectable = true }: NodeProps<IToolNode>) {
+function InnerToolNode({
+  id,
+  isConnectable = true,
+  selected,
+}: NodeProps<IToolNode>) {
   const { edges, getNode } = useGraphStore((state) => state);
   const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
   const upstreamAgentNode = getNode(upstreamAgentNodeId);
@@ -29,7 +33,7 @@ function InnerToolNode({ id, isConnectable = true }: NodeProps<IToolNode>) {
   );
 
   return (
-    <NodeWrapper>
+    <NodeWrapper selected={selected}>
       <Handle
         id={NodeHandleId.End}
         type="target"