@cognizant-ai-lab/ui-common 1.3.3 → 1.4.0

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -14,14 +14,20 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+// We have to disable the restricted imports rule here because we need to dynamically access MUI icons by name.
+// eslint-disable-next-line no-restricted-imports
+import * as MuiIcons from "@mui/icons-material";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import HandymanIcon from "@mui/icons-material/Handyman";
 import PersonIcon from "@mui/icons-material/Person";
 import TravelExploreIcon from "@mui/icons-material/TravelExplore";
-import { Tooltip, useTheme } from "@mui/material";
+import { keyframes, styled, useTheme } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { Handle, Position } from "reactflow";
-import { BACKGROUND_COLORS, BACKGROUND_COLORS_DARK_IDX, HEATMAP_COLORS } from "./const.js";
+import { Handle, Position } from "@xyflow/react";
+import { useSettingsStore } from "../../state/Settings.js";
+import { usePalette } from "../../Theme/Palettes.js";
+import { isLightColor } from "../../Theme/Theme.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 // Node dimensions
 export const NODE_HEIGHT = 100;
@@ -30,90 +36,127 @@ export const NODE_WIDTH = 100;
 // These are used to set the size of the icons displayed in the agent nodes.
 const AGENT_ICON_SIZE = "2.25rem";
 const FRONTMAN_ICON_SIZE = "4.5rem";
+// Pulsing glow animation for when an agent is active.
+const glowKeyFrames = (color) => keyframes `
+    0% {
+        box-shadow: 0 0 10px 4px ${color};
+        opacity: 0.6;
+    }
+    50% {
+        box-shadow: 0 0 30px 12px ${color};
+        opacity: 0.9;
+    }
+    100% {
+        box-shadow: 0 0 10px 4px ${color};
+        opacity: 1.0;
+    }
+`;
+// Styled component for the agent nodes, applies glow animation if active
+const AnimatedNode = styled("div", {
+    shouldForwardProp: (prop) => prop !== "glowColor" && prop !== "isActive",
+})(({ glowColor, isActive }) => ({
+    alignItems: "center",
+    borderRadius: "50%",
+    display: "flex",
+    justifyContent: "center",
+    position: "relative",
+    shapeOutside: "circle(50%)",
+    textAlign: "center",
+    ...(isActive && {
+        animation: `${glowKeyFrames(glowColor)} 2s infinite`,
+    }),
+}));
 /**
  * A node representing an agent in the network for use in react-flow.
  * @param props See AgentNodeProps
  */
 export const AgentNode = (props) => {
     const theme = useTheme();
+    // Agent node color from settings store
+    const agentNodeColor = useSettingsStore((state) => state.settings.appearance.agentNodeColor);
+    // Agent node icon color from settings store
+    const agentNodeIconColor = useSettingsStore((state) => state.settings.appearance.agentIconColor);
+    const autoAgentIconColor = useSettingsStore((state) => state.settings.appearance.autoAgentIconColor);
+    // Color palette for depth/heatmap coloring
+    const palette = usePalette();
     // Unpack the node-specific data
     const data = props.data;
-    const { agentCounts, agentName, depth, displayAs, getConversations, isAwaitingLlm } = data;
+    const { agentCounts, agentName, depth, displayAs, getConversations, agentIconSuggestion, isAwaitingLlm } = data;
+    // Determine if this is the Frontman node (depth 0)
     const isFrontman = depth === 0;
+    // Determine max agent count for heatmap scaling
     const maxAgentCount = agentCounts ? Math.max(...Array.from(agentCounts.values())) : 0;
     // Unpack the node-specific id
     const agentId = props.id;
     // "Active" agents are those at either end of the current communication from the incoming chat messages.
-    // We highlight them with a green background.
+    // We highlight them with a different color
     const conversations = getConversations();
     const isActiveAgent = conversations?.some((conversation) => conversation.agents.has(agentId)) ?? false;
+    // Determine background color based on active status, heatmap, or depth
     let backgroundColor;
-    let color;
-    const isHeatmap = agentCounts?.size > 0 && maxAgentCount > 0;
+    // HACK: parent passes in agentCounts as undefined when not using heatmap mode. We distinguish between
+    // "undefined" (no heatmap) and "defined but empty" (heatmap with zero counts).
+    const isHeatmap = agentCounts !== undefined;
     if (isActiveAgent) {
-        backgroundColor = "var(--bs-green)";
-        color = "var(--bs-white)";
+        // Highlight active agents with a distinct color
+        backgroundColor = agentNodeColor;
     }
     else if (isHeatmap) {
+        // Color by "heatmap" of agent invocation counts
         const agentCount = agentCounts.has(agentId) ? agentCounts.get(agentId) : 0;
         // Calculate "heat" as a fraction of the times this agent was invoked compared to the maximum agent count.
-        const colorIndex = Math.floor((agentCount / maxAgentCount) * (HEATMAP_COLORS.length - 1));
-        backgroundColor = HEATMAP_COLORS[colorIndex];
-        const isDarkBackground = colorIndex >= BACKGROUND_COLORS_DARK_IDX;
-        color = isDarkBackground ? "var(--bs-white)" : "var(--bs-dark)";
+        const colorIndex = Math.floor((agentCount / maxAgentCount) * (palette.length - 1));
+        backgroundColor = palette[colorIndex];
     }
     else {
-        const colorIndex = depth % BACKGROUND_COLORS.length;
-        backgroundColor = BACKGROUND_COLORS[colorIndex];
-        const isDarkBackground = colorIndex >= BACKGROUND_COLORS_DARK_IDX;
-        color = isDarkBackground ? "var(--bs-white)" : "var(--bs-dark)";
+        // Color by depth in the agent graph
+        const colorIndex = depth % palette.length;
+        backgroundColor = palette[colorIndex];
     }
-    // Animation style for making active agent glow and pulse
-    // TODO: more idiomatic MUI/style= way of doing this?
-    const glowAnimation = isActiveAgent
-        ? `@keyframes glow {
-            0% { box-shadow: 0 0 10px 4px ${backgroundColor}; opacity: 0.60; }
-            50% { box-shadow: 0 0 30px 12px ${backgroundColor}; opacity: 0.90; }
-            100% { box-shadow: 0 0 10px 4px ${backgroundColor}; opacity: 1.0; }
-        }`
-        : "none";
-    const boxShadow = isActiveAgent ? "0 0 30px 12px var(--bs-primary), 0 0 60px 24px var(--bs-primary)" : undefined;
     // Hide handles when awaiting LLM response ("zen mode")
     const handleVisibility = isAwaitingLlm ? "none" : "block";
     // Determine which icon to display based on the agent type whether it is Frontman or not
     const getDisplayAsIcon = () => {
         const id = `${agentId}-icon`;
-        if (isFrontman) {
-            return (
-            // Use special icon and larger size for Frontman
-            _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
+        if (agentIconSuggestion && MuiIcons[agentIconSuggestion]) {
+            const IconComponent = MuiIcons[agentIconSuggestion];
+            return _jsx(IconComponent, { sx: { fontSize: AGENT_ICON_SIZE } });
         }
-        switch (displayAs) {
-            case "external_agent":
-                return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-            case "coded_tool":
-                return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-            case "llm_agent":
-            default:
-                return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+        else {
+            if (agentIconSuggestion) {
+                console.warn(`Invalid MUI icon suggestion: ${agentIconSuggestion}`);
+            }
+            if (isFrontman) {
+                return (
+                // Use special icon and larger size for Frontman
+                _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
+            }
+            else {
+                switch (displayAs) {
+                    case "external_agent":
+                        return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+                    case "coded_tool":
+                        return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+                    case "llm_agent":
+                    default:
+                        return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+                }
+            }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { id: agentId, style: {
-                    alignItems: "center",
-                    animation: isActiveAgent ? "glow 2.0s infinite" : "none",
+    // Determine icon color based on settings. If auto color is enabled, use contrasting color for readability.
+    const color = autoAgentIconColor ? theme.palette.getContrastText(backgroundColor) : agentNodeIconColor;
+    // Choose a glow color that contrasts with the background for visibility.
+    const glowColor = isLightColor(theme.palette.background.default)
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return (_jsxs(_Fragment, { children: [_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, sx: {
                     backgroundColor,
-                    borderRadius: "50%",
-                    boxShadow,
                     color,
-                    display: "flex",
                     height: NODE_HEIGHT * (isFrontman ? 1.25 : 1.0),
-                    justifyContent: "center",
-                    shapeOutside: "circle(50%)",
-                    textAlign: "center",
                     width: NODE_WIDTH * (isFrontman ? 1.25 : 1.0),
                     zIndex: getZIndex(1, theme),
-                    position: "relative",
-                }, children: [_jsx("style", { id: `${agentId}-glow-animation`, children: glowAnimation }), getDisplayAsIcon(), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { display: handleVisibility } })] }), _jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
+                }, children: [getDisplayAsIcon(), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { display: handleVisibility } })] }), _jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
                         display: "-webkit-box",
                         fontSize: "18px",
                         fontWeight: "bold",

package/dist/components/MultiAgentAccelerator/GraphLayouts.d.ts

@@ -1,33 +1,36 @@
-import { Edge, EdgeProps, Node as RFNode } from "reactflow";
+import { Edge, Node as RFNode } from "@xyflow/react";
+import { AgentConversation } from "./AgentConversations.js";
 import { AgentNodeProps } from "./AgentNode.js";
+import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
+import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
 import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
-import { AgentConversation } from "../../utils/agentConversations.js";
 export declare const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+/**
+ * Result of the layout algorithms, containing the nodes and edges with their computed positions and properties.
+ */
+export type LayoutResult = {
+    nodes: RFNode<AgentNodeProps>[];
+    edges: Edge[];
+};
 export declare const addThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
-    edge: Edge<EdgeProps>;
+    edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>, conversationId: string, edge: Edge<EdgeProps>) => void;
+}>, conversationId: string, edge: ThoughtBubbleEdgeShape) => void;
 export declare const removeThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
-    edge: Edge<EdgeProps>;
+    edge: ThoughtBubbleEdgeShape;
     timestamp: number;
 }>, conversationId: string) => void;
 export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
-    edge: Edge<EdgeProps>;
+    edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>) => Edge<EdgeProps>[];
+}>) => ThoughtBubbleEdgeShape[];
 export declare const layoutRadial: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
 isAwaitingLlm: boolean, thoughtBubbleEdges: Map<string, {
-    edge: Edge<EdgeProps>;
+    edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>) => {
-    nodes: RFNode<AgentNodeProps>[];
-    edges: Edge<EdgeProps>[];
-};
+}>, agentIconSuggestions?: AgentIconSuggestions) => LayoutResult;
 export declare const layoutLinear: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
 isAwaitingLlm: boolean, thoughtBubbleEdges: Map<string, {
-    edge: Edge<EdgeProps>;
+    edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>) => {
-    nodes: RFNode<AgentNodeProps>[];
-    edges: Edge<EdgeProps>[];
-};
+}>, agentIconSuggestions?: AgentIconSuggestions) => LayoutResult;

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -16,9 +16,9 @@ limitations under the License.
 /**
  * Graph layout algorithms and associated functions for the agent network.
  */
-import dagre from "dagre";
+import dagre from "@dagrejs/dagre";
+import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.js";
-import { MarkerType } from "reactflow";
 import { NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
 import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
 import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Utils.js";
@@ -100,7 +100,7 @@ const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAni
     };
 };
 export const layoutRadial = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, thoughtBubbleEdges) => {
+isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Compute depth of each node using breadth-first traversal
@@ -187,6 +187,7 @@ isAwaitingLlm, thoughtBubbleEdges) => {
                     // Use current conversations for node highlighting (cleared at end)
                     getConversations: () => currentConversations,
                     isAwaitingLlm,
+                    agentIconSuggestion: agentIconSuggestions?.[nodeId],
                 },
                 position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x, y },
                 style: {
@@ -206,27 +207,28 @@ isAwaitingLlm, thoughtBubbleEdges) => {
     return { nodes: nodesInNetwork, edges: edgesInNetwork };
 };
 export const layoutLinear = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, thoughtBubbleEdges) => {
+isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
     const parentAgents = getParentAgents(agentsInNetwork);
     const childAgents = getChildAgents(parentAgents);
     const frontman = getFrontman(parentAgents, childAgents);
-    agentsInNetwork.forEach(({ origin: originOfNode }) => {
-        const parentIds = getParents(originOfNode, parentAgents);
-        const isFrontman = frontman?.origin === originOfNode;
+    agentsInNetwork.forEach(({ origin: nodeId }) => {
+        const parentIds = getParents(nodeId, parentAgents);
+        const isFrontman = frontman?.origin === nodeId;
         nodesInNetwork.push({
-            id: originOfNode,
+            id: nodeId,
             type: AGENT_NODE_TYPE_NAME,
             data: {
                 agentCounts,
-                agentName: cleanUpAgentName(originOfNode),
-                displayAs: agentsInNetwork.find((a) => a.origin === originOfNode)?.display_as,
+                agentName: cleanUpAgentName(nodeId),
+                displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
                 // Use current conversations for node highlighting (cleared at end)
                 getConversations: () => currentConversations,
                 isAwaitingLlm,
-                depth: undefined, // Depth will be computed later
+                depth: undefined, // Depth will be computed later,
+                agentIconSuggestion: agentIconSuggestions?.[nodeId],
             },
             position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x: 0, y: 0 },
             style: {
@@ -240,10 +242,10 @@ isAwaitingLlm, thoughtBubbleEdges) => {
         if (!isFrontman) {
             for (const parentNode of parentIds) {
                 // Add edges from parents to node
-                const isEdgeAnimated = areInSameConversation(currentConversations, parentNode, originOfNode);
+                const isEdgeAnimated = areInSameConversation(currentConversations, parentNode, nodeId);
                 // Include all edges here, since dagre needs them to compute the layout correctly.
                 // We will filter them later if we're in "awaiting LLM" mode.
-                edgesInNetwork.push(getEdgeProperties(parentNode, originOfNode, `${parentNode}-right-handle`, `${originOfNode}-left-handle`, isEdgeAnimated));
+                edgesInNetwork.push(getEdgeProperties(parentNode, nodeId, `${parentNode}-right-handle`, `${nodeId}-left-handle`, isEdgeAnimated));
             }
         }
     });
@@ -271,7 +273,7 @@ isAwaitingLlm, thoughtBubbleEdges) => {
     // Convert dagre's layout to what our flow graph needs
     nodesTmp.forEach((node) => {
         const nodeWithPosition = dagreGraph.node(node.id);
-        // We are shifting the dagre node position (anchor=center center) to the top left
+        // We are shifting the dagre node position (anchor=center) to the top left
         // so it matches the React Flow node anchor point (top left).
         node.position = {
             x: nodeWithPosition.x - NODE_WIDTH / 2,

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.d.ts

@@ -1,11 +1,10 @@
-import { JSX as ReactJSX } from "react";
+import { FC } from "react";
 interface MultiAgentAcceleratorProps {
     readonly userInfo: {
         userName: string;
         userImage: string;
     };
     readonly backendNeuroSanApiUrl: string;
-    readonly darkMode: boolean;
 }
 /**
  * Main Multi-Agent Accelerator component that contains the sidebar, agent flow, and chat components.
@@ -13,5 +12,5 @@ interface MultiAgentAcceleratorProps {
  * @param darkMode Whether dark mode is enabled.
  * @param userInfo Information about the current user, including userName and userImage.
  */
-export declare const MultiAgentAccelerator: ({ backendNeuroSanApiUrl, darkMode, userInfo, }: MultiAgentAcceleratorProps) => ReactJSX.Element;
+export declare const MultiAgentAccelerator: FC<MultiAgentAcceleratorProps>;
 export {};