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/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>
+  );
+}