lint, update swarm styles

waldiez · Jan 14, 2025 · 9cea75b · 9cea75b
1 parent c0a85af
commit 9cea75b
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 43 deletions.
diff --git a/src/waldiez/containers/edges/hooks/useWaldiezEdge.ts b/src/waldiez/containers/edges/hooks/useWaldiezEdge.ts
@@ -1,4 +1,4 @@
-import { EdgeProps, getBezierPath } from "@xyflow/react";
+import { EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
 import { WaldiezEdge, WaldiezEdgeType, WaldiezNodeAgent, WaldiezNodeAgentType } from "@waldiez/models";
 import { useWaldiez } from "@waldiez/store";
@@ -14,7 +14,7 @@ export const useWaldiezEdge = (props: EdgeProps<WaldiezEdge> & { type: WaldiezEd
     const updateEdgeData = useWaldiez(s => s.updateEdgeData);
     const sourceAgent = getAgentById(source) as WaldiezNodeAgent | null;
     const targetAgent = getAgentById(props.target) as WaldiezNodeAgent | null;
-    const [edgePath, labelX, labelY] = getBezierPath({
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
         sourceX,
         sourceY,
         sourcePosition,

diff --git a/src/waldiez/containers/edges/swarm.tsx b/src/waldiez/containers/edges/swarm.tsx
@@ -1,4 +1,4 @@
-import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
 
 import { GiNestEggs } from "react-icons/gi";
 import { MdMessage } from "react-icons/md";
@@ -27,7 +27,7 @@ export const WaldiezEdgeSwarmView = (
         sourcePosition,
         targetPosition,
     } = props;
-    const [edgePath, labelX, labelY] = getBezierPath({
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
         sourceX,
         sourceY,
         sourcePosition,
@@ -51,6 +51,8 @@ export const WaldiezEdgeSwarmView = (
             onEdgeDoubleClick(event, edge);
         }
     };
+    const className =
+        swarmType === "source" ? "agent-edge-user-to-swarm-view" : "agent-edge-swarm-to-swarm-view";
     return (
         <>
             <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
@@ -68,7 +70,7 @@ export const WaldiezEdgeSwarmView = (
                     data-testid={`edge-label-${id}`}
                     onClick={onOpenModal}
                 >
-                    <div className="agent-edge-swarm-view clickable">{icon}</div>
+                    <div className={`agent-edge-swarm-view clickable ${className}`}>{icon}</div>
                 </div>
             </EdgeLabelRenderer>
         </>

diff --git a/src/waldiez/containers/nodes/agent/main.tsx b/src/waldiez/containers/nodes/agent/main.tsx
@@ -61,11 +61,22 @@ export const WaldiezNodeAgentView = (props: WaldiezNodeAgentProps) => {
                 className={data.parentId ? "hidden" : ""}
                 type="target"
                 isConnectableEnd
-                position={agentType === "swarm" ? Position.Top : Position.Left}
+                position={Position.Left}
                 onConnect={onEdgeConnection}
-                data-testid={`agent-handle-${id}-${agentType === "swarm" ? "top" : "left"}`}
-                id={`agent-handle-${id}-${agentType === "swarm" ? "top" : "left"}`}
+                data-testid={`agent-handle-${id}-left"}`}
+                id={`agent-handle-${id}-left`}
             />
+            {agentType === "swarm" && (
+                <Handle
+                    className="swarm-handle"
+                    type="target"
+                    isConnectableStart
+                    position={Position.Top}
+                    onConnect={onEdgeConnection}
+                    data-testid={`agent-handle-${id}-top`}
+                    id={`agent-handle-${id}-top`}
+                />
+            )}
             <Handle
                 className={data.parentId ? "hidden" : ""}
                 type="source"
@@ -77,7 +88,7 @@ export const WaldiezNodeAgentView = (props: WaldiezNodeAgentProps) => {
             />
             {agentType === "swarm" && (
                 <Handle
-                    className={data.parentId ? "hidden" : ""}
+                    className="swarm-handle"
                     type="source"
                     isConnectableStart
                     position={Position.Bottom}

diff --git a/src/waldiez/containers/nodes/agent/modal/tabs/main.tsx b/src/waldiez/containers/nodes/agent/modal/tabs/main.tsx
@@ -145,22 +145,22 @@ export const WaldiezNodeAgentModalTabs = ({
                 </TabItem>
             )}
             {isSwarm && (
-                <TabItem label="Hand offs" id={`wf-${flowId}-agent-swarm-${id}`}>
-                    <WaldiezAgentSwarmHandoffs
+                <TabItem label="Skills" id={`wf-${flowId}-agent-swarm-${id}`}>
+                    <WaldiezAgentSwarmFunctions
                         id={id}
                         data={data as WaldiezNodeAgentSwarmData}
-                        agentConnections={agentConnections}
-                        agents={agents}
+                        skills={skills}
                         onDataChange={onDataChange}
                     />
                 </TabItem>
             )}
             {isSwarm && (
-                <TabItem label="Functions" id={`wf-${flowId}-agent-swarm-${id}`}>
-                    <WaldiezAgentSwarmFunctions
+                <TabItem label="Hand offs" id={`wf-${flowId}-agent-swarm-${id}`}>
+                    <WaldiezAgentSwarmHandoffs
                         id={id}
                         data={data as WaldiezNodeAgentSwarmData}
-                        skills={skills}
+                        agentConnections={agentConnections}
+                        agents={agents}
                         onDataChange={onDataChange}
                     />
                 </TabItem>

diff --git a/src/waldiez/styles/overrides.css b/src/waldiez/styles/overrides.css
@@ -24,48 +24,57 @@
     border: none;
 }
 
+.flow-wrapper .agent-node .react-flow__handle-left,
+.flow-wrapper .agent-node .react-flow__handle-right,
+.flow-wrapper .swarm-container .react-flow__handle-left,
+.flow-wrapper .swarm-container .react-flow__handle-right {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
 .flow-wrapper .swarm .react-flow__handle {
     background-color: var(--swarm-agent-color);
+    width: 12px;
+    height: 12px;
+    transform: rotate(45deg);
+    border-radius: 0;
 }
 
-.flow-wrapper .agent-node.assistant .react-flow__handle {
-    background-color: var(--assistant-agent-color);
+.flow-wrapper .swarm .react-flow__handle-left {
+    margin-left: -6px;
+    margin-top: -3px;
 }
 
-.flow-wrapper .agent-node.user .react-flow__handle {
-    background-color: var(--user-agent-color);
+.flow-wrapper .swarm .react-flow__handle-right {
+    margin-right: -6px;
+    margin-top: -3px;
 }
 
-.flow-wrapper .agent-node.manager .react-flow__handle {
-    background-color: var(--group-manager-color);
+.flow-wrapper .agent-node .react-flow__handle-top {
+    margin-top: -6px;
+    margin-left: -3px;
 }
 
-.flow-wrapper .agent-node.rag_user .react-flow__handle {
-    background-color: var(--rag-user-color);
+.flow-wrapper .agent-node .react-flow__handle-bottom {
+    margin-bottom: -6px;
+    margin-left: -3px;
 }
 
-.flow-wrapper .agent-node .react-flow__handle-left,
-.flow-wrapper .agent-node .react-flow__handle-right,
-.flow-wrapper .swarm-container .react-flow__handle-left,
-.flow-wrapper .swarm-container .react-flow__handle-right {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
+.flow-wrapper .agent-node.assistant .react-flow__handle {
+    background-color: var(--assistant-agent-color);
 }
 
-.flow-wrapper .agent-node .react-flow__handle-top,
-.flow-wrapper .agent-node .react-flow__handle-bottom {
-    width: 12px;
-    height: 12px;
-    rotate: 45deg;
+.flow-wrapper .agent-node.user .react-flow__handle {
+    background-color: var(--user-agent-color);
 }
 
-.flow-wrapper .agent-node .react-flow__handle-top {
-    margin-top: 4px;
+.flow-wrapper .agent-node.manager .react-flow__handle {
+    background-color: var(--group-manager-color);
 }
 
-.flow-wrapper .agent-node .react-flow__handle-bottom {
-    margin-bottom: -4px;
+.flow-wrapper .agent-node.rag_user .react-flow__handle {
+    background-color: var(--rag-user-color);
 }
 
 .flow-wrapper .rc-slider {

diff --git a/src/waldiez/styles/swarm.css b/src/waldiez/styles/swarm.css
@@ -18,6 +18,14 @@
     cursor: pointer;
 }
 
+.flow-wrapper .agent-edge-user-to-swarm-view:hover {
+    box-shadow: 0 0 4px var(--user-agent-color);
+}
+
+.flow-wrapper .agent-edge-swarm-to-swarm-view:hover {
+    box-shadow: 0 0 4px var(--swarm-agent-color);
+}
+
 .flow-wrapper .agent-handoff-recipients {
     display: flex;
     flex-direction: column;

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -22,5 +22,5 @@
         },
         "types": ["vitest/globals", "@vitest/browser/providers/playwright", "@testing-library/jest-dom"]
     },
-    "include": ["src", "tests", "e2e"],
+    "include": ["src", "tests", "e2e"]
 }
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -1,5 +1,5 @@
 {
     "extends": "./tsconfig.app.json",
     "types": ["node"],
-    "exclude": ["src/index.tsx", "src/index.css", "tests"]
+    "exclude": ["src/index.tsx", "src/index.css", "tests", "e2e"]
 }
diff --git a/tsconfig.docs.json b/tsconfig.docs.json
@@ -5,5 +5,5 @@
         "strict": true,
         "types": []
     },
-    "exclude": ["tests"]
+    "exclude": ["tests", "e2e"]
 }