@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/ErrorPage/ErrorPage.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+import Box from "@mui/material/Box";
+import { useRouter } from "next/router.js";
+import { LOGO } from "../../const.js";
+import { useEnvironmentStore } from "../../state/environment.js";
+import { useUserInfoStore } from "../../state/UserInfo.js";
+import { smartSignOut, useAuthentication } from "../../utils/Authentication.js";
+import { NeuroAIBreadcrumbs } from "../Common/Breadcrumbs.js";
+import { Navbar } from "../Common/Navbar.js";
+/**
+ * This is the page that will be shown to users when the outer error boundary is triggered
+ * @param id HTML id for the <code>div</code> for this page
+ * @param errorText Error text to be displayed
+ */
+export default function ErrorPage({ id, errorText }) {
+    const { auth0ClientId, auth0Domain, supportEmailAddress } = useEnvironmentStore();
+    // Access NextJS router
+    const router = useRouter();
+    // Access user info store
+    const { currentUser, setCurrentUser, setPicture, oidcProvider } = useUserInfoStore();
+    // Infer authentication type
+    const authenticationType = currentUser ? `ALB using ${oidcProvider}` : "NextAuth";
+    const { data: { user: userInfo } = {} } = useAuthentication();
+    async function handleSignOut() {
+        // Clear our state storage variables
+        setCurrentUser(undefined);
+        setPicture(undefined);
+        await smartSignOut(currentUser, auth0Domain, auth0ClientId, oidcProvider);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { id: "nav-bar", logo: LOGO, query: router.query, pathname: router.pathname, authenticationType: authenticationType, signOut: handleSignOut, supportEmailAddress: supportEmailAddress, userInfo: userInfo }), _jsxs(Box, { id: id, sx: { marginLeft: "1rem" }, children: [_jsx(NeuroAIBreadcrumbs, {}), _jsx("h4", { id: "error-header", style: { color: "var(--bs-red)", marginTop: "1rem" }, children: "Oops, an internal error occurred on our end." }), _jsxs("div", { id: "error-div-1", children: [_jsxs(Box, { id: "no-need-to-worry", sx: { marginBottom: "1.5rem" }, children: [_jsx("b", { id: "bold-1", children: "There's no need to worry \u2013 you didn't do anything wrong." }), " This is a bug in our server and we'll fix it as soon as possible."] }), _jsx(Box, { id: "try-these-steps", sx: { marginBottom: "1.5rem" }, children: "To attempt to recover from the error, try these steps:" }), _jsx(Box, { id: "refresh-page", sx: { marginBottom: "1.5rem" }, children: _jsxs("ul", { id: "error-boundary-advice-list", className: "list-decimal list-inside", children: [_jsx("li", { id: "error-advice-refresh", children: "Refresh the page to see if the error goes away." }), _jsx("li", { id: "error-advice-reload", children: "Close and re-open your browser, then navigate back to the page where you encountered the error." })] }) }), "If none of that helps, please report the following error to the LEAF team:"] }), _jsx("div", { id: "error-text-div", style: { fontFamily: "monospace", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: errorText }), "More information may be available in the browser console. Please include such information in your report if possible."] })] }));
+}

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

@@ -0,0 +1,21 @@
+import { Dispatch, FC, SetStateAction } from "react";
+import { Edge, EdgeProps } from "reactflow";
+import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentConversation } from "../../utils/agentConversations.js";
+export interface AgentFlowProps {
+    readonly agentCounts?: Map<string, number>;
+    readonly agentsInNetwork: ConnectivityInfo[];
+    readonly currentConversations?: AgentConversation[] | null;
+    readonly id: string;
+    readonly isAwaitingLlm?: boolean;
+    readonly isStreaming?: boolean;
+    readonly thoughtBubbleEdges: Map<string, {
+        edge: Edge<EdgeProps>;
+        timestamp: number;
+    }>;
+    readonly setThoughtBubbleEdges: Dispatch<SetStateAction<Map<string, {
+        edge: Edge<EdgeProps>;
+        timestamp: number;
+    }>>>;
+}
+export declare const AgentFlow: FC<AgentFlowProps>;

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -0,0 +1,394 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+import AdjustRoundedIcon from "@mui/icons-material/AdjustRounded";
+import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
+import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
+import ScatterPlotOutlinedIcon from "@mui/icons-material/ScatterPlotOutlined";
+import { ToggleButton, ToggleButtonGroup, useColorScheme, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { applyNodeChanges, Background, ConnectionMode, ControlButton, Controls, ReactFlow, useReactFlow, useStore, } from "reactflow";
+import { AgentNode, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
+import { BACKGROUND_COLORS, BACKGROUND_COLORS_DARK_IDX, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, HEATMAP_COLORS, LEVEL_SPACING, } from "./const.js";
+import { addThoughtBubbleEdge, layoutLinear, layoutRadial, removeThoughtBubbleEdge } from "./GraphLayouts.js";
+import { PlasmaEdge } from "./PlasmaEdge.js";
+import { ThoughtBubbleEdge } from "./ThoughtBubbleEdge.js";
+import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
+import { isDarkMode } from "../../utils/Theme.js";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+// #endregion: Types
+// #region: Constants
+// Timeout for thought bubbles is set to 10 seconds
+const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
+// Maximum number of thought bubbles allowed on screen at any time. As more arrive, older ones are removed.
+const MAX_THOUGHT_BUBBLES = 5;
+// #endregion: Constants
+export const AgentFlow = ({ agentCounts, agentsInNetwork, currentConversations, id, isAwaitingLlm, isStreaming, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
+    const theme = useTheme();
+    const { fitView } = useReactFlow();
+    // Helper functions to update thought bubble edges state immutably
+    const addThoughtBubbleEdgeHelper = useCallback((conversationId, edge) => {
+        setThoughtBubbleEdges((prev) => {
+            const newMap = new Map(prev);
+            addThoughtBubbleEdge(newMap, conversationId, edge);
+            return newMap;
+        });
+    }, [setThoughtBubbleEdges]);
+    const removeThoughtBubbleEdgeHelper = useCallback((conversationId) => {
+        setThoughtBubbleEdges((prev) => {
+            const newMap = new Map(prev);
+            removeThoughtBubbleEdge(newMap, conversationId);
+            return newMap;
+        });
+    }, [setThoughtBubbleEdges]);
+    const handleResize = useCallback(() => {
+        fitView(); // Adjusts the view to fit after resizing
+    }, [fitView, isAwaitingLlm]);
+    useEffect(() => {
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [handleResize]);
+    // Save this as a mutable ref so child nodes see updates
+    const conversationsRef = useRef(currentConversations);
+    useEffect(() => {
+        conversationsRef.current = currentConversations;
+    }, [currentConversations]);
+    const [layout, setLayout] = useState("radial");
+    const [coloringOption, setColoringOption] = useState("depth");
+    const [enableRadialGuides, setEnableRadialGuides] = useState(true);
+    const [showThoughtBubbles, setShowThoughtBubbles] = useState(true);
+    // State for managing active thought bubbles with timers. Use ActiveThoughtBubble which
+    // references the original conversation via `conversationId`.
+    const [activeThoughtBubbles, setActiveThoughtBubbles] = useState([]);
+    // Track conversation IDs we've already processed to prevent re-adding after expiry
+    const processedConversationIdsRef = useRef(new Set());
+    // Track which bubble is currently being hovered
+    const hoveredBubbleIdRef = useRef(null);
+    const handleBubbleHoverChange = useCallback((bubbleId) => {
+        hoveredBubbleIdRef.current = bubbleId;
+    }, []);
+    // Clear processed conversation IDs when thought bubble edges are cleared (streaming ends)
+    useEffect(() => {
+        if (thoughtBubbleEdges.size === 0) {
+            processedConversationIdsRef.current.clear();
+        }
+    }, [thoughtBubbleEdges.size]);
+    // Effect to add and remove thought bubbles - only when we actually have conversations to process
+    useEffect(() => {
+        if (!currentConversations || currentConversations.length === 0) {
+            return; // Skip processing when no conversations
+        }
+        setActiveThoughtBubbles((prevBubbles) => {
+            const newBubbles = [];
+            // Check the text that user sees as one level of duplicate prevention
+            const processedText = new Set();
+            thoughtBubbleEdges.forEach((thoughtBubbleEdge) => {
+                const edgeText = thoughtBubbleEdge.edge.data?.text?.trim();
+                if (edgeText) {
+                    // Add edge text to prevent duplicates
+                    processedText.add(edgeText);
+                }
+            });
+            // Only add bubbles for conversations with unique parsed content
+            // TODO: Even though there are two duplicate checks here, some duplicates still get through
+            for (const conv of currentConversations) {
+                const convText = conv.text?.trim();
+                if (
+                // Has text
+                convText &&
+                    // Haven't already displayed this text (duplicate check #1)
+                    !processedText.has(convText) &&
+                    // Haven't already displayed this conversation ID (duplicate check #2)
+                    !processedConversationIdsRef.current.has(conv.id)) {
+                    // Create an AgentConversation object representing the active thought bubble.
+                    // Use the conversation id from the incoming conversation and set startedAt
+                    // to "now" so the bubble timeout is measured from when the bubble appeared.
+                    newBubbles.push({
+                        agents: new Set(conv.agents),
+                        conversationId: conv.id,
+                        startedAt: new Date(),
+                        type: conv.type,
+                        // No text needed. This is for tracking which conversations are active.
+                    });
+                    // Mark this conversation ID as processed. This protects against duplicates if conversations have
+                    // the same ID, although some duplicates still get through.
+                    processedConversationIdsRef.current.add(conv.id);
+                    const agentList = Array.from(conv.agents);
+                    // TODO: Check if agentList has at least 2 agents. This allows us to set a source and target.
+                    // However, this can also have more than 2 agents. We may want to think more about that case.
+                    if (agentList.length >= 2) {
+                        // These source and target agents are going to be useful later when we point bubbles to nodes.
+                        const sourceAgent = agentList[0];
+                        const targetAgent = agentList[1];
+                        const edge = {
+                            id: `thought-bubble-${conv.id}`,
+                            source: sourceAgent,
+                            target: targetAgent,
+                            type: "thoughtBubbleEdge",
+                            data: {
+                                text: conv.text,
+                                showAlways: showThoughtBubbles,
+                                conversationId: conv.id,
+                                // Include full agent list so overlays can point to all participants
+                                agents: agentList,
+                                type: conv.type, // Add conversation type for filtering
+                            },
+                            style: { pointerEvents: "none" },
+                        };
+                        addThoughtBubbleEdgeHelper(conv.id, edge);
+                    }
+                }
+            }
+            if (newBubbles.length === 0) {
+                return prevBubbles; // No changes
+            }
+            const allBubbles = [...prevBubbles, ...newBubbles];
+            // If we're over the limit, first remove expired bubbles, then oldest if still needed
+            if (allBubbles.length > MAX_THOUGHT_BUBBLES) {
+                const now = Date.now();
+                const dropped = [];
+                // First, filter out expired bubbles by checking THOUGHT_BUBBLE_TIMEOUT_MS
+                const activeBubbles = allBubbles.filter((bubble) => {
+                    const age = now - bubble.startedAt.getTime();
+                    const isExpired = age >= THOUGHT_BUBBLE_TIMEOUT_MS;
+                    if (isExpired) {
+                        dropped.push(bubble);
+                    }
+                    return !isExpired;
+                });
+                // If still over the limit after removing expired, remove oldest non-expired
+                let finalBubbles = activeBubbles;
+                if (activeBubbles.length > MAX_THOUGHT_BUBBLES) {
+                    const sorted = activeBubbles.sort((a, b) => a.startedAt.getTime() - b.startedAt.getTime());
+                    finalBubbles = sorted.slice(-MAX_THOUGHT_BUBBLES);
+                    const additionalDropped = sorted.slice(0, -MAX_THOUGHT_BUBBLES);
+                    dropped.push(...additionalDropped);
+                }
+                // Clean up all dropped bubbles from edge cache
+                dropped.forEach((bubble) => {
+                    removeThoughtBubbleEdgeHelper(bubble.conversationId);
+                });
+                return finalBubbles;
+            }
+            return allBubbles;
+        });
+    }, [currentConversations, addThoughtBubbleEdgeHelper, removeThoughtBubbleEdgeHelper]);
+    // Independent thought bubble cleanup - run timer only during streaming
+    useEffect(() => {
+        const cleanupInterval = setInterval(() => {
+            // Only clean up if we're currently streaming
+            if (!isStreaming)
+                return;
+            setActiveThoughtBubbles((prevBubbles) => {
+                if (prevBubbles.length === 0)
+                    return prevBubbles;
+                const now = Date.now();
+                const filteredBubbles = prevBubbles.filter((bubble) => {
+                    const age = now - bubble.startedAt.getTime();
+                    const shouldKeep = age < THOUGHT_BUBBLE_TIMEOUT_MS;
+                    // Keep bubble if it's being hovered, even if expired
+                    const isHovered = hoveredBubbleIdRef.current === `thought-bubble-${bubble.conversationId}`;
+                    if (isHovered) {
+                        return true;
+                    }
+                    // If bubble is expiring, remove it from the edge cache
+                    if (!shouldKeep) {
+                        removeThoughtBubbleEdgeHelper(bubble.conversationId);
+                    }
+                    return shouldKeep;
+                });
+                // Only update if there are changes to prevent unnecessary re-renders
+                if (filteredBubbles.length !== prevBubbles.length) {
+                    return filteredBubbles;
+                }
+                return prevBubbles;
+            });
+        }, 1000); // Check every second
+        return () => clearInterval(cleanupInterval);
+    }, [isStreaming, removeThoughtBubbleEdgeHelper]);
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    // Shadow color for icon. TODO: use MUI theme system instead.
+    const shadowColor = darkMode ? "255, 255, 255" : "0, 0, 0";
+    const isHeatmap = coloringOption === "heatmap";
+    // Merge agents from active thought bubbles with agentsInNetwork for layout
+    // This ensures bubble edges persist even when agents disappear from the network
+    const bubbleAgentIds = useMemo(() => {
+        const ids = new Set();
+        activeThoughtBubbles.forEach((bubble) => {
+            bubble.agents.forEach((agentId) => ids.add(agentId));
+        });
+        return ids;
+    }, [activeThoughtBubbles]);
+    const mergedAgentsInNetwork = useMemo(() => {
+        // Add any missing agents from bubbles as minimal ConnectivityInfo
+        const existingIds = new Set(agentsInNetwork.map((a) => a.origin));
+        const missing = Array.from(bubbleAgentIds).filter((bubbleAgentId) => !existingIds.has(bubbleAgentId));
+        const minimalAgents = missing.map((missingId) => ({
+            origin: missingId,
+            tools: [],
+            display_as: undefined,
+        }));
+        return [...agentsInNetwork, ...minimalAgents];
+    }, [agentsInNetwork, bubbleAgentIds]);
+    // Create the flow layout depending on user preference
+    // Memoize layoutResult so it only recalculates when relevant data changes
+    const layoutResult = useMemo(() => layout === "linear"
+        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, thoughtBubbleEdges)
+        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, thoughtBubbleEdges), [
+        layout,
+        coloringOption,
+        agentCounts,
+        mergedAgentsInNetwork,
+        currentConversations,
+        activeThoughtBubbles,
+        thoughtBubbleEdges,
+        isAwaitingLlm,
+        showThoughtBubbles,
+    ]);
+    const [nodes, setNodes] = useState(layoutResult.nodes);
+    // Sync up the nodes with the layout result
+    useEffect(() => {
+        setNodes(layoutResult.nodes);
+    }, [layoutResult.nodes]);
+    const edges = layoutResult.edges;
+    useEffect(() => {
+        // Schedule a fitView after the layout is set to ensure the view is adjusted correctly
+        setTimeout(() => {
+            fitView();
+        }, 50);
+    }, [agentsInNetwork, layout]);
+    const onNodesChange = useCallback((changes) => {
+        setNodes((ns) => applyNodeChanges(
+        // For now, we only allow dragging, no updates
+        changes.filter((c) => c.type === "position"), ns));
+    }, []);
+    const transform = useStore((state) => state.transform);
+    // Why not just a "const"? See: https://reactflow.dev/learn/customization/custom-nodes
+    // "It’s important that the nodeTypes are memoized or defined outside the component. Otherwise, React creates
+    // a new object on every render which leads to performance issues and bugs."
+    const nodeTypes = useMemo(() => ({
+        agentNode: AgentNode,
+    }), [AgentNode]);
+    const edgeTypes = useMemo(() => ({
+        plasmaEdge: PlasmaEdge,
+        thoughtBubbleEdge: ThoughtBubbleEdge,
+    }), [PlasmaEdge, ThoughtBubbleEdge]);
+    // Figure out the maximum depth of the network
+    const maxDepth = useMemo(() => {
+        return nodes?.reduce((max, node) => Math.max(node.data.depth, max), 0) + 1;
+    }, [nodes]);
+    // Generate radial guides for the network to guide the eye in the radial layout
+    const getRadialGuides = () => {
+        const circles = Array.from({ length: maxDepth }).map((_, i) => (_jsx("circle", { id: `radial-guide-${BASE_RADIUS + (i + 1) * LEVEL_SPACING}`, cx: DEFAULT_FRONTMAN_X_POS + NODE_WIDTH / 2, cy: DEFAULT_FRONTMAN_Y_POS + NODE_HEIGHT / 2, r: BASE_RADIUS + (i + 1) * LEVEL_SPACING, stroke: "var(--bs-gray-medium)", fill: "none", opacity: "0.25" }, `radial-guide-${BASE_RADIUS + (i + 1) * LEVEL_SPACING}`)));
+        return (_jsx("svg", { id: `${id}-radial-guides`, style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "100%",
+                height: "100%",
+            }, children: _jsx("g", { id: `${id}-radial-guides-group`, transform: `translate(${transform[0]}, ${transform[1]}) scale(${transform[2]})`, children: circles }) }));
+    };
+    // Generate Legend for depth or heatmap colors
+    function getLegend() {
+        const palette = isHeatmap ? HEATMAP_COLORS : BACKGROUND_COLORS;
+        const title = isHeatmap ? "Heat" : "Depth";
+        const length = isHeatmap ? HEATMAP_COLORS.length : Math.min(maxDepth, BACKGROUND_COLORS.length);
+        return (_jsxs(Box, { id: `${id}-legend`, sx: {
+                position: "absolute",
+                top: "5px",
+                right: "10px",
+                padding: "5px",
+                borderRadius: "5px",
+                boxShadow: `0 0 5px rgba(${shadowColor}, 0.3)`,
+                display: "flex",
+                alignItems: "center",
+                zIndex: getZIndex(2, theme),
+            }, children: [_jsx(Typography, { id: `${id}-legend-label`, sx: {
+                        fontSize: "10px",
+                        marginLeft: "0.2rem",
+                    }, children: title }), Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, style: {
+                        alignItems: "center",
+                        backgroundColor: palette[i],
+                        borderRadius: "50%",
+                        color: i < BACKGROUND_COLORS_DARK_IDX ? "var(--bs-primary)" : "var(--bs-white)",
+                        display: "flex",
+                        height: "15px",
+                        justifyContent: "center",
+                        marginLeft: "5px",
+                        width: "15px",
+                    }, children: _jsx(Typography, { id: `${id}-legend-depth-${i}-text`, sx: {
+                            fontSize: "8px",
+                        }, children: i }) }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
+                        if (newValue !== null) {
+                            setColoringOption(newValue);
+                        }
+                    }, sx: {
+                        fontSize: "2rem",
+                        zIndex: 10,
+                        marginLeft: "0.5rem",
+                    }, size: "small", children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, size: "small", value: "depth", sx: {
+                                fontSize: "0.5rem",
+                                height: "1rem",
+                                backgroundColor: darkMode && coloringOption === "depth" ? "var(--bs-gray-medium)" : undefined,
+                            }, children: _jsx(Typography, { id: `${id}-depth-label`, sx: {
+                                    fontSize: "10px",
+                                }, children: "Depth" }) }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, size: "small", value: "heatmap", sx: {
+                                fontSize: "0.5rem",
+                                height: "1rem",
+                                backgroundColor: darkMode && isHeatmap ? "var(--bs-gray-medium)" : undefined,
+                            }, children: _jsx(Typography, { id: `${id}-heatmap-label`, sx: {
+                                    fontSize: "10px",
+                                }, children: "Heatmap" }) })] })] }));
+    }
+    // Get the background color for the control buttons based on the layout and dark mode setting
+    const getControlButtonBackgroundColor = (isActive) => {
+        return isActive ? (darkMode ? "var(--bs-gray-dark)" : "var(--bs-gray-lighter)") : undefined;
+    };
+    // Only show radial guides if radial layout is selected, radial guides are enabled, and it's not just Frontman
+    const shouldShowRadialGuides = enableRadialGuides && layout === "radial" && maxDepth > 1;
+    // Generate the control bar for the flow, including layout and radial guides toggles
+    const getControls = () => {
+        return (_jsxs(Controls, { id: "react-flow-controls", position: "top-left", style: {
+                position: "absolute",
+                top: "0px",
+                left: "0px",
+                height: "auto",
+                width: "auto",
+            }, showInteractive: true, children: [_jsx(Tooltip, { id: "radial-layout-tooltip", title: "Radial layout", placement: "right", children: _jsx("span", { id: "radial-layout-span", children: _jsx(ControlButton, { id: "radial-layout-button", onClick: () => setLayout("radial"), style: {
+                                backgroundColor: getControlButtonBackgroundColor(layout === "radial"),
+                            }, children: _jsx(HubOutlinedIcon, { id: "radial-layout-icon", sx: { color: darkMode ? "var(--bs-white)" : "var(--bs-dark-mode-dim)" } }) }) }) }), _jsx(Tooltip, { id: "linear-layout-tooltip", title: "Linear layout", placement: "right", children: _jsx("span", { id: "linear-layout-span", children: _jsx(ControlButton, { id: "linear-layout-button", onClick: () => setLayout("linear"), style: {
+                                backgroundColor: getControlButtonBackgroundColor(layout === "linear"),
+                            }, children: _jsx(ScatterPlotOutlinedIcon, { id: "linear-layout-icon", sx: { color: darkMode ? "var(--bs-white)" : "var(--bs-dark-mode-dim)" } }) }) }) }), _jsx(Tooltip, { id: "radial-guides-tooltip", title: `Enable/disable radial guides${layout === "radial" ? "" : " (only available in radial layout)"}`, placement: "right", children: _jsx("span", { id: "radial-guides-span", children: _jsx(ControlButton, { id: "radial-guides-button", onClick: () => setEnableRadialGuides(!enableRadialGuides), style: {
+                                backgroundColor: getControlButtonBackgroundColor(enableRadialGuides),
+                            }, disabled: layout !== "radial", children: _jsx(AdjustRoundedIcon, { id: "radial-guides-icon", sx: { color: darkMode ? "var(--bs-white)" : "var(--bs-dark-mode-dim)" } }) }) }) }), _jsx(Tooltip, { id: "thought-bubble-tooltip", title: `Toggle thought bubbles ${showThoughtBubbles ? "off" : "on"}`, placement: "right", children: _jsx("span", { id: "thought-bubble-span", children: _jsx(ControlButton, { id: "thought-bubble-button", onClick: () => setShowThoughtBubbles(!showThoughtBubbles), style: {
+                                backgroundColor: getControlButtonBackgroundColor(showThoughtBubbles),
+                            }, children: _jsx(ChatBubbleOutlineIcon, { id: "thought-bubble-icon", sx: { color: darkMode ? "var(--bs-white)" : "var(--bs-dark-mode-dim)" } }) }) }) })] }));
+    };
+    return (_jsxs(Box, { id: `${id}-outer-box`, sx: {
+            height: "100%",
+            width: "100%",
+            "& .react-flow__node": {
+                border: "var(--bs-border-width) var(--bs-border-style) var(--bs-black)",
+                borderRadius: "var(--bs-border-radius-2xl)",
+            },
+        }, 
+        // Theme the "React Flow" attribution logo according to dark mode.
+        className: darkMode ? "dark" : undefined, children: [_jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: edges, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }));
+};

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

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { NodeProps } from "reactflow";
+import { AgentConversation } from "../../utils/agentConversations.js";
+export interface AgentNodeProps {
+    readonly agentCounts?: Map<string, number>;
+    readonly agentName: string;
+    readonly depth: number;
+    readonly getConversations: () => AgentConversation[] | null;
+    readonly isAwaitingLlm?: boolean;
+    readonly displayAs?: string;
+}
+export declare const NODE_HEIGHT = 100;
+export declare const NODE_WIDTH = 100;
+/**
+ * A node representing an agent in the network for use in react-flow.
+ * @param props See AgentNodeProps
+ */
+export declare const AgentNode: FC<NodeProps<AgentNodeProps>>;

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+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 Typography from "@mui/material/Typography";
+import { Handle, Position } from "reactflow";
+import { BACKGROUND_COLORS, BACKGROUND_COLORS_DARK_IDX, HEATMAP_COLORS } from "./const.js";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+// Node dimensions
+export const NODE_HEIGHT = 100;
+export const NODE_WIDTH = 100;
+// Icon sizes
+// 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";
+/**
+ * A node representing an agent in the network for use in react-flow.
+ * @param props See AgentNodeProps
+ */
+export const AgentNode = (props) => {
+    const theme = useTheme();
+    // Unpack the node-specific data
+    const data = props.data;
+    const { agentCounts, agentName, depth, displayAs, getConversations, isAwaitingLlm } = data;
+    const isFrontman = depth === 0;
+    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.
+    const conversations = getConversations();
+    const isActiveAgent = conversations?.some((conversation) => conversation.agents.has(agentId)) ?? false;
+    let backgroundColor;
+    let color;
+    const isHeatmap = agentCounts?.size > 0 && maxAgentCount > 0;
+    if (isActiveAgent) {
+        backgroundColor = "var(--bs-green)";
+        color = "var(--bs-white)";
+    }
+    else if (isHeatmap) {
+        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)";
+    }
+    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)";
+    }
+    // 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 } }));
+        }
+        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",
+                    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: {
+                        display: "-webkit-box",
+                        fontSize: "18px",
+                        fontWeight: "bold",
+                        lineHeight: "1.4em",
+                        overflow: "hidden",
+                        textAlign: "center",
+                        textOverflow: "ellipsis",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: 2,
+                        width: `${NODE_WIDTH}px`,
+                        zIndex: 10,
+                    }, children: agentName }) })] }));
+};

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

@@ -0,0 +1,33 @@
+import { Edge, EdgeProps, Node as RFNode } from "reactflow";
+import { AgentNodeProps } from "./AgentNode.js";
+import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentConversation } from "../../utils/agentConversations.js";
+export declare const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+export declare const addThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
+    edge: Edge<EdgeProps>;
+    timestamp: number;
+}>, conversationId: string, edge: Edge<EdgeProps>) => void;
+export declare const removeThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
+    edge: Edge<EdgeProps>;
+    timestamp: number;
+}>, conversationId: string) => void;
+export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
+    edge: Edge<EdgeProps>;
+    timestamp: number;
+}>) => Edge<EdgeProps>[];
+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>;
+    timestamp: number;
+}>) => {
+    nodes: RFNode<AgentNodeProps>[];
+    edges: Edge<EdgeProps>[];
+};
+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>;
+    timestamp: number;
+}>) => {
+    nodes: RFNode<AgentNodeProps>[];
+    edges: Edge<EdgeProps>[];
+};