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/edge/index.less

-.edgeButton {
-  width: 14px;
-  height: 14px;
-  background: #eee;
-  border: 1px solid #fff;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.edgeButton:hover {
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
-}
-
-.edgeButtonDark {
-  width: 14px;
-  height: 14px;
-  background: #0e0c0c;
-  border: 1px solid #fff;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.edgeButtonDark:hover {
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
-}

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

 } from '@xyflow/react';
 import useGraphStore from '../../store';
 
-import { useTheme } from '@/components/theme-provider';
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { cn } from '@/lib/utils';
 import { useMemo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
-import styles from './index.less';
 
 export function ButtonEdge({
   id,
     targetY,
     targetPosition,
   });
-  const { theme } = useTheme();
   const selectedStyle = useMemo(() => {
-    return selected ? { strokeWidth: 2, stroke: '#1677ff' } : {};
+    return selected ? { strokeWidth: 1, stroke: 'rgba(76, 164, 231, 1)' } : {};
   }, [selected]);
 
   const onEdgeClick = () => {
       // The set of elements following source
       const slicedGraphPath = graphPath.slice(idx + 1);
       if (slicedGraphPath.some((x) => x === target)) {
-        return { strokeWidth: 2, stroke: 'red' };
+        return { strokeWidth: 1, stroke: 'red' };
       }
     }
     return {};
         path={edgePath}
         markerEnd={markerEnd}
         style={{ ...style, ...selectedStyle, ...highlightStyle }}
+        className="text-text-sub-title"
       />
 
       <EdgeLabelRenderer>
         >
           <button
             className={cn(
-              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton,
+              'size-3.5 border border-text-delete-red text-text-delete-red rounded-full leading-none',
               'invisible',
               { visible },
             )}

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

             type: 'buttonEdge',
             markerEnd: 'logo',
             style: {
-              strokeWidth: 2,
-              stroke: 'rgb(202 197 245)',
+              strokeWidth: 1,
+              stroke: 'rgba(91, 93, 106, 1)',
             },
             zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
           }}

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

 
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
+      <NodeWrapper selected={selected}>
         {isHeadAgent && (
           <>
             <CommonHandle

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

 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

   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

 }: 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

 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

 }: 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

   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

 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

   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>>({
   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

 
   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

   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

 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);
   );
 
   return (
-    <NodeWrapper>
+    <NodeWrapper selected={selected}>
       <Handle
         id={NodeHandleId.End}
         type="target"

web/src/pages/agent/debug-content/index.tsx

 import { BeginQuery } from '../interface';
 import { FileUploadDirectUpload } from './uploader';
 
-export const BeginQueryComponentMap = {
-  [BeginQueryType.Line]: 'string',
-  [BeginQueryType.Paragraph]: 'string',
-  [BeginQueryType.Options]: 'string',
-  [BeginQueryType.File]: 'file',
-  [BeginQueryType.Integer]: 'number',
-  [BeginQueryType.Boolean]: 'boolean',
-};
-
 const StringFields = [
   BeginQueryType.Line,
   BeginQueryType.Paragraph,
         } else if (type === BeginQueryType.Boolean) {
           fieldSchema = z.boolean();
           value = false;
-        } else if (type === BeginQueryType.Integer) {
+        } else if (type === BeginQueryType.Integer || type === 'float') {
           fieldSchema = z.coerce.number();
         } else {
           fieldSchema = z.record(z.any());

web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx

 import CopyToClipboard from '@/components/copy-to-clipboard';
 import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
-import { useDebugSingle } from '@/hooks/flow-hooks';
-import { useFetchInputForm } from '@/hooks/use-agent-request';
+import { useDebugSingle, useFetchInputForm } from '@/hooks/use-agent-request';
 import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
 import { isEmpty } from 'lodash';
 import { X } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
 import DebugContent from '../../debug-content';
+import { transferInputsArrayToObject } from '../../form/begin-form/use-watch-change';
 import { buildBeginInputListFromObject } from '../../form/begin-form/utils';
 
 interface IProps {
   const onOk = useCallback(
     (nextValues: any[]) => {
       if (componentId) {
-        debugSingle({ component_id: componentId, params: nextValues });
+        debugSingle({
+          component_id: componentId,
+          params: transferInputsArrayToObject(nextValues),
+        });
       }
     },
     [componentId, debugSingle],
             submitButtonDisabled={list.length === 0}
           ></DebugContent>
           {!isEmpty(data) ? (
-            <div className="mt-4 rounded-md bg-slate-200 border border-neutral-200">
+            <div
+              className={cn('mt-4 rounded-md border', {
+                [`border-text-delete-red`]: !isEmpty(data._ERROR),
+              })}
+            >
               <div className="flex justify-between p-2">
                 <span>JSON</span>
                 <CopyToClipboard text={content}></CopyToClipboard>
                 src={data}
                 displaySize
                 collapseStringsAfterLength={100000000000}
-                className="w-full h-[800px] break-words overflow-auto p-2 bg-slate-100"
+                className="w-full h-[800px] break-words overflow-auto p-2"
+                dark
               />
             </div>
           ) : null}