Skip to content

Commit 9cea75b

Browse files
lazToumlazToum
committed
lint, update swarm styles
1 parent c0a85af commit 9cea75b

File tree

9 files changed

+73
-43
lines changed

9 files changed

+73
-43
lines changed

‎src/waldiez/containers/edges/hooks/useWaldiezEdge.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EdgeProps, getBezierPath } from "@xyflow/react";
1+
import { EdgeProps, getSmoothStepPath } from "@xyflow/react";
22

33
import { WaldiezEdge, WaldiezEdgeType, WaldiezNodeAgent, WaldiezNodeAgentType } from "@waldiez/models";
44
import { useWaldiez } from "@waldiez/store";
@@ -14,7 +14,7 @@ export const useWaldiezEdge = (props: EdgeProps<WaldiezEdge> & { type: WaldiezEd
1414
const updateEdgeData = useWaldiez(s => s.updateEdgeData);
1515
const sourceAgent = getAgentById(source) as WaldiezNodeAgent | null;
1616
const targetAgent = getAgentById(props.target) as WaldiezNodeAgent | null;
17-
const [edgePath, labelX, labelY] = getBezierPath({
17+
const [edgePath, labelX, labelY] = getSmoothStepPath({
1818
sourceX,
1919
sourceY,
2020
sourcePosition,

‎src/waldiez/containers/edges/swarm.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
1+
import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
22

33
import { GiNestEggs } from "react-icons/gi";
44
import { MdMessage } from "react-icons/md";
@@ -27,7 +27,7 @@ export const WaldiezEdgeSwarmView = (
2727
sourcePosition,
2828
targetPosition,
2929
} = props;
30-
const [edgePath, labelX, labelY] = getBezierPath({
30+
const [edgePath, labelX, labelY] = getSmoothStepPath({
3131
sourceX,
3232
sourceY,
3333
sourcePosition,
@@ -51,6 +51,8 @@ export const WaldiezEdgeSwarmView = (
5151
onEdgeDoubleClick(event, edge);
5252
}
5353
};
54+
const className =
55+
swarmType === "source" ? "agent-edge-user-to-swarm-view" : "agent-edge-swarm-to-swarm-view";
5456
return (
5557
<>
5658
<BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
@@ -68,7 +70,7 @@ export const WaldiezEdgeSwarmView = (
6870
data-testid={`edge-label-${id}`}
6971
onClick={onOpenModal}
7072
>
71-
<div className="agent-edge-swarm-view clickable">{icon}</div>
73+
<div className={`agent-edge-swarm-view clickable ${className}`}>{icon}</div>
7274
</div>
7375
</EdgeLabelRenderer>
7476
</>

‎src/waldiez/containers/nodes/agent/main.tsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,22 @@ export const WaldiezNodeAgentView = (props: WaldiezNodeAgentProps) => {
6161
className={data.parentId ? "hidden" : ""}
6262
type="target"
6363
isConnectableEnd
64-
position={agentType === "swarm" ? Position.Top : Position.Left}
64+
position={Position.Left}
6565
onConnect={onEdgeConnection}
66-
data-testid={`agent-handle-${id}-${agentType === "swarm" ? "top" : "left"}`}
67-
id={`agent-handle-${id}-${agentType === "swarm" ? "top" : "left"}`}
66+
data-testid={`agent-handle-${id}-left"}`}
67+
id={`agent-handle-${id}-left`}
6868
/>
69+
{agentType === "swarm" && (
70+
<Handle
71+
className="swarm-handle"
72+
type="target"
73+
isConnectableStart
74+
position={Position.Top}
75+
onConnect={onEdgeConnection}
76+
data-testid={`agent-handle-${id}-top`}
77+
id={`agent-handle-${id}-top`}
78+
/>
79+
)}
6980
<Handle
7081
className={data.parentId ? "hidden" : ""}
7182
type="source"
@@ -77,7 +88,7 @@ export const WaldiezNodeAgentView = (props: WaldiezNodeAgentProps) => {
7788
/>
7889
{agentType === "swarm" && (
7990
<Handle
80-
className={data.parentId ? "hidden" : ""}
91+
className="swarm-handle"
8192
type="source"
8293
isConnectableStart
8394
position={Position.Bottom}

‎src/waldiez/containers/nodes/agent/modal/tabs/main.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -145,22 +145,22 @@ export const WaldiezNodeAgentModalTabs = ({
145145
</TabItem>
146146
)}
147147
{isSwarm && (
148-
<TabItem label="Hand offs" id={`wf-${flowId}-agent-swarm-${id}`}>
149-
<WaldiezAgentSwarmHandoffs
148+
<TabItem label="Skills" id={`wf-${flowId}-agent-swarm-${id}`}>
149+
<WaldiezAgentSwarmFunctions
150150
id={id}
151151
data={data as WaldiezNodeAgentSwarmData}
152-
agentConnections={agentConnections}
153-
agents={agents}
152+
skills={skills}
154153
onDataChange={onDataChange}
155154
/>
156155
</TabItem>
157156
)}
158157
{isSwarm && (
159-
<TabItem label="Functions" id={`wf-${flowId}-agent-swarm-${id}`}>
160-
<WaldiezAgentSwarmFunctions
158+
<TabItem label="Hand offs" id={`wf-${flowId}-agent-swarm-${id}`}>
159+
<WaldiezAgentSwarmHandoffs
161160
id={id}
162161
data={data as WaldiezNodeAgentSwarmData}
163-
skills={skills}
162+
agentConnections={agentConnections}
163+
agents={agents}
164164
onDataChange={onDataChange}
165165
/>
166166
</TabItem>

‎src/waldiez/styles/overrides.css

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,48 +24,57 @@
2424
border: none;
2525
}
2626

27+
.flow-wrapper .agent-node .react-flow__handle-left,
28+
.flow-wrapper .agent-node .react-flow__handle-right,
29+
.flow-wrapper .swarm-container .react-flow__handle-left,
30+
.flow-wrapper .swarm-container .react-flow__handle-right {
31+
width: 12px;
32+
height: 12px;
33+
border-radius: 50%;
34+
}
35+
2736
.flow-wrapper .swarm .react-flow__handle {
2837
background-color: var(--swarm-agent-color);
38+
width: 12px;
39+
height: 12px;
40+
transform: rotate(45deg);
41+
border-radius: 0;
2942
}
3043

31-
.flow-wrapper .agent-node.assistant .react-flow__handle {
32-
background-color: var(--assistant-agent-color);
44+
.flow-wrapper .swarm .react-flow__handle-left {
45+
margin-left: -6px;
46+
margin-top: -3px;
3347
}
3448

35-
.flow-wrapper .agent-node.user .react-flow__handle {
36-
background-color: var(--user-agent-color);
49+
.flow-wrapper .swarm .react-flow__handle-right {
50+
margin-right: -6px;
51+
margin-top: -3px;
3752
}
3853

39-
.flow-wrapper .agent-node.manager .react-flow__handle {
40-
background-color: var(--group-manager-color);
54+
.flow-wrapper .agent-node .react-flow__handle-top {
55+
margin-top: -6px;
56+
margin-left: -3px;
4157
}
4258

43-
.flow-wrapper .agent-node.rag_user .react-flow__handle {
44-
background-color: var(--rag-user-color);
59+
.flow-wrapper .agent-node .react-flow__handle-bottom {
60+
margin-bottom: -6px;
61+
margin-left: -3px;
4562
}
4663

47-
.flow-wrapper .agent-node .react-flow__handle-left,
48-
.flow-wrapper .agent-node .react-flow__handle-right,
49-
.flow-wrapper .swarm-container .react-flow__handle-left,
50-
.flow-wrapper .swarm-container .react-flow__handle-right {
51-
width: 12px;
52-
height: 12px;
53-
border-radius: 50%;
64+
.flow-wrapper .agent-node.assistant .react-flow__handle {
65+
background-color: var(--assistant-agent-color);
5466
}
5567

56-
.flow-wrapper .agent-node .react-flow__handle-top,
57-
.flow-wrapper .agent-node .react-flow__handle-bottom {
58-
width: 12px;
59-
height: 12px;
60-
rotate: 45deg;
68+
.flow-wrapper .agent-node.user .react-flow__handle {
69+
background-color: var(--user-agent-color);
6170
}
6271

63-
.flow-wrapper .agent-node .react-flow__handle-top {
64-
margin-top: 4px;
72+
.flow-wrapper .agent-node.manager .react-flow__handle {
73+
background-color: var(--group-manager-color);
6574
}
6675

67-
.flow-wrapper .agent-node .react-flow__handle-bottom {
68-
margin-bottom: -4px;
76+
.flow-wrapper .agent-node.rag_user .react-flow__handle {
77+
background-color: var(--rag-user-color);
6978
}
7079

7180
.flow-wrapper .rc-slider {

‎src/waldiez/styles/swarm.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@
1818
cursor: pointer;
1919
}
2020

21+
.flow-wrapper .agent-edge-user-to-swarm-view:hover {
22+
box-shadow: 0 0 4px var(--user-agent-color);
23+
}
24+
25+
.flow-wrapper .agent-edge-swarm-to-swarm-view:hover {
26+
box-shadow: 0 0 4px var(--swarm-agent-color);
27+
}
28+
2129
.flow-wrapper .agent-handoff-recipients {
2230
display: flex;
2331
flex-direction: column;

‎tsconfig.app.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,5 @@
2222
},
2323
"types": ["vitest/globals", "@vitest/browser/providers/playwright", "@testing-library/jest-dom"]
2424
},
25-
"include": ["src", "tests", "e2e"],
25+
"include": ["src", "tests", "e2e"]
2626
}

‎tsconfig.build.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"extends": "./tsconfig.app.json",
33
"types": ["node"],
4-
"exclude": ["src/index.tsx", "src/index.css", "tests"]
4+
"exclude": ["src/index.tsx", "src/index.css", "tests", "e2e"]
55
}

‎tsconfig.docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
"strict": true,
66
"types": []
77
},
8-
"exclude": ["tests"]
8+
"exclude": ["tests", "e2e"]
99
}

0 commit comments

Comments
 (0)