@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -0,0 +1,297 @@
+/*
+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.
+*/
+/**
+ * Graph layout algorithms and associated functions for the agent network.
+ */
+import dagre from "dagre";
+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";
+export const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+export const addThoughtBubbleEdge = (thoughtBubbleEdges, conversationId, edge) => {
+    // Add with timestamp for age-based cleanup
+    thoughtBubbleEdges.set(conversationId, {
+        edge,
+        timestamp: Date.now(),
+    });
+    // Enforce max limit - remove oldest if over limit
+    if (thoughtBubbleEdges.size > MAX_GLOBAL_THOUGHT_BUBBLES) {
+        const entries = Array.from(thoughtBubbleEdges.entries());
+        const sorted = entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+        const toRemove = sorted.slice(0, sorted.length - MAX_GLOBAL_THOUGHT_BUBBLES);
+        toRemove.forEach(([id]) => {
+            thoughtBubbleEdges.delete(id);
+        });
+    }
+};
+export const removeThoughtBubbleEdge = (thoughtBubbleEdges, conversationId) => {
+    thoughtBubbleEdges.delete(conversationId);
+};
+export const getThoughtBubbleEdges = (thoughtBubbleEdges) => {
+    return Array.from(thoughtBubbleEdges.values()).map((item) => item.edge);
+};
+// Helper function for plasma edges to check if two agents are in the same conversation
+const areInSameConversation = (conversations, sourceAgent, targetAgent) => {
+    if (!conversations)
+        return false;
+    return conversations
+        .filter((conversation) => KNOWN_MESSAGE_TYPES_FOR_PLASMA.includes(conversation.type))
+        .some((conversation) => conversation.agents.has(sourceAgent) && conversation.agents.has(targetAgent));
+};
+// #region: Constants
+// Name for custom node
+const AGENT_NODE_TYPE_NAME = "agentNode";
+// #endregion: Constants
+/**
+ * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
+ * higher are not included.
+ *
+ * @param node Node ID for which to find parents
+ * @param parentAgents Full list of parent agents in the network
+ * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
+ */
+const getParents = (node, parentAgents) => {
+    return parentAgents.filter((agent) => agent.tools.includes(node)).map((parentNode) => parentNode.origin);
+};
+// "Parent agents" are those that have tools, aka "child agents"
+const getParentAgents = (agentsInNetwork) => agentsInNetwork.length === 1 ? agentsInNetwork : agentsInNetwork.filter((agent) => agent.tools?.length > 0);
+// "Child agents" are those that are declared as tools by other agents
+const getChildAgents = (parentAgents) => {
+    const childAgentsSet = new Set();
+    parentAgents.forEach((agent) => {
+        agent?.tools?.forEach((tool) => {
+            childAgentsSet.add(tool);
+        });
+    });
+    return childAgentsSet;
+};
+// Frontman is defined as the agent that has no parent. There should be only one in the graph.
+// Frontman is one of the parent agents.
+// There is no explicit field that tells us which agent is the frontman, so we determine it by checking
+// which parent agent does not appear in the set of child agents.
+const getFrontman = (parentAgents, childAgents) => parentAgents.find((agent) => !childAgents.has(agent.origin));
+// Generates the properties for an edge in the graph.
+// Common for both radial and linear layouts.
+const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAnimated) => {
+    return {
+        animated: false,
+        id: `${targetId}-edge-${sourceId}`,
+        markerEnd: { type: MarkerType.ArrowClosed, width: 30, height: 30 },
+        source: sourceId,
+        sourceHandle,
+        target: targetId,
+        targetHandle,
+        type: isAnimated ? "plasmaEdge" : undefined,
+    };
+};
+export const layoutRadial = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
+isAwaitingLlm, thoughtBubbleEdges) => {
+    const nodesInNetwork = [];
+    const edgesInNetwork = [];
+    // Compute depth of each node using breadth-first traversal
+    const nodeDepths = new Map();
+    const queue = [];
+    const parentAgents = getParentAgents(agentsInNetwork);
+    const childAgents = getChildAgents(parentAgents);
+    const frontman = getFrontman(parentAgents, childAgents);
+    if (frontman) {
+        // Add the frontman node to the network
+        queue.push({ id: frontman.origin, depth: 0 });
+        nodeDepths.set(frontman.origin, 0);
+    }
+    // Perform a breadth-first traversal of the tree to compute the depth of each node.
+    while (queue.length > 0) {
+        const { id: currentNodeId, depth } = queue.shift();
+        agentsInNetwork.forEach(({ origin: nodeId }) => {
+            // For each node, check if it is a direct child of the  current node in the queue.
+            const parentIds = getParents(nodeId, parentAgents);
+            if (parentIds?.includes(currentNodeId) && !nodeDepths.has(nodeId)) {
+                // It's a child of the current node so set its depth to the depth of the current node + 1.
+                nodeDepths.set(nodeId, depth + 1);
+                queue.push({ id: nodeId, depth: depth + 1 });
+            }
+        });
+    }
+    // Construct a map where keys are depths and values are arrays of node IDs at that depth.
+    const nodesByDepth = new Map();
+    nodeDepths.forEach((depth, nodeId) => {
+        if (!nodesByDepth.has(depth)) {
+            nodesByDepth.set(depth, []);
+        }
+        nodesByDepth.get(depth).push(nodeId);
+    });
+    // Assign layout positions based on depth & spread angles per level
+    // Use currentConversations for plasma edges and node highlighting (cleared at network end)
+    nodesByDepth.forEach((nodeIds, depth) => {
+        const radius = BASE_RADIUS + depth * LEVEL_SPACING;
+        const angleStep = (2 * Math.PI) / nodeIds.length; // Divide full circle among nodes at this level
+        nodeIds.forEach((nodeId, index) => {
+            const angle = index * angleStep; // Spread nodes evenly in their depth level
+            const x = DEFAULT_FRONTMAN_X_POS + radius * Math.cos(angle);
+            const y = DEFAULT_FRONTMAN_Y_POS + radius * Math.sin(angle);
+            const isFrontman = frontman?.origin === nodeId;
+            const parentNodes = getParents(nodeId, parentAgents);
+            // Create an edge from each parent node to this node
+            for (const parentNode of parentNodes) {
+                const graphNode = nodesInNetwork.find((node) => node.id === parentNode);
+                // Determine if the agent is left or right of its parent node for symmetrical layout
+                if (graphNode) {
+                    const dx = x - graphNode.position.x;
+                    const dy = y - graphNode.position.y;
+                    let sourceHandle;
+                    let targetHandle;
+                    // Determine the handle based on the direction of the node relative to its parent
+                    if (Math.abs(dx) > Math.abs(dy)) {
+                        // More horizontal: use left/right handles
+                        const isLeftOfParent = dx < 0;
+                        sourceHandle = isLeftOfParent ? `${graphNode.id}-left-handle` : `${graphNode.id}-right-handle`;
+                        targetHandle = isLeftOfParent ? `${nodeId}-right-handle` : `${nodeId}-left-handle`;
+                    }
+                    else {
+                        // More vertical: use top/bottom handles
+                        const isAboveParent = dy < 0;
+                        sourceHandle = isAboveParent ? `${graphNode.id}-top-handle` : `${graphNode.id}-bottom-handle`;
+                        targetHandle = isAboveParent ? `${nodeId}-bottom-handle` : `${nodeId}-top-handle`;
+                    }
+                    // Plasma edges based on currentConversations (live, cleared at network end)
+                    const isEdgeAnimated = areInSameConversation(currentConversations, nodeId, graphNode.id);
+                    // Add edge from parent to node
+                    if (!isAwaitingLlm || isEdgeAnimated) {
+                        edgesInNetwork.push(getEdgeProperties(graphNode.id, nodeId, sourceHandle, targetHandle, isEdgeAnimated));
+                    }
+                }
+            }
+            nodesInNetwork.push({
+                id: nodeId,
+                type: AGENT_NODE_TYPE_NAME,
+                data: {
+                    agentCounts,
+                    agentName: cleanUpAgentName(nodeId),
+                    depth,
+                    displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
+                    // Use current conversations for node highlighting (cleared at end)
+                    getConversations: () => currentConversations,
+                    isAwaitingLlm,
+                },
+                position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x, y },
+                style: {
+                    border: "none",
+                    background: "transparent",
+                    boxShadow: "none",
+                    padding: 0,
+                    margin: 0,
+                },
+            });
+        });
+    });
+    // Add thought bubble edges from cache to avoid duplicates across layout recalculations
+    const bubbleEdges = getThoughtBubbleEdges(thoughtBubbleEdges);
+    const thoughtBubbleEdgesToAdd = bubbleEdges.filter((edge) => edgesInNetwork.every((existing) => existing.id !== edge.id && edge.type === "thoughtBubbleEdge"));
+    edgesInNetwork.push(...thoughtBubbleEdgesToAdd);
+    return { nodes: nodesInNetwork, edges: edgesInNetwork };
+};
+export const layoutLinear = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
+isAwaitingLlm, thoughtBubbleEdges) => {
+    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;
+        nodesInNetwork.push({
+            id: originOfNode,
+            type: AGENT_NODE_TYPE_NAME,
+            data: {
+                agentCounts,
+                agentName: cleanUpAgentName(originOfNode),
+                displayAs: agentsInNetwork.find((a) => a.origin === originOfNode)?.display_as,
+                // Use current conversations for node highlighting (cleared at end)
+                getConversations: () => currentConversations,
+                isAwaitingLlm,
+                depth: undefined, // Depth will be computed later
+            },
+            position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x: 0, y: 0 },
+            style: {
+                border: "none",
+                background: "transparent",
+                boxShadow: "none",
+                padding: 0,
+                margin: 0,
+            },
+        });
+        if (!isFrontman) {
+            for (const parentNode of parentIds) {
+                // Add edges from parents to node
+                const isEdgeAnimated = areInSameConversation(currentConversations, parentNode, originOfNode);
+                // 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));
+            }
+        }
+    });
+    // Add thought bubble edges from cache to avoid duplicates across layout recalculations
+    const bubbleEdges = getThoughtBubbleEdges(thoughtBubbleEdges);
+    const thoughtBubbleEdgesToAdd = bubbleEdges.filter((edge) => edgesInNetwork.every((existing) => existing.id !== edge.id && edge.type === "thoughtBubbleEdge"));
+    edgesInNetwork.push(...thoughtBubbleEdgesToAdd);
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    // Configure for left-to-right layout
+    dagreGraph.setGraph({ rankdir: "LR" });
+    // Don't want to update nodes directly in existing flow so make a copy
+    const nodesTmp = cloneDeep(nodesInNetwork);
+    nodesTmp.forEach((node) => {
+        dagreGraph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    });
+    // Add edges to the dagre graph
+    edgesInNetwork.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+    });
+    // Compute the layout using dagre
+    dagre.layout(dagreGraph);
+    // Get x positions for the nodes in nodesTmp. Keep only unique values and sort numerically
+    const xPositions = Array.from(new Set(nodesTmp.map((node) => dagreGraph.node(node.id).x))).sort((a, b) => a - b);
+    // 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
+        // so it matches the React Flow node anchor point (top left).
+        node.position = {
+            x: nodeWithPosition.x - NODE_WIDTH / 2,
+            y: nodeWithPosition.y - NODE_HEIGHT / 2,
+        };
+        // Depth is index of x position in xPositions array
+        // Create a new data object with updated depth
+        node.data = {
+            ...node.data,
+            depth: xPositions.indexOf(nodeWithPosition.x),
+        };
+    });
+    // If we're in "awaiting LLM" mode, we filter edges to only include those that are between conversation agents.
+    // Use currentConversations (plasma edges are live and clear at network end)
+    const filteredEdges = isAwaitingLlm
+        ? edgesInNetwork.filter((edge) => areInSameConversation(currentConversations, edge.source, edge.target))
+        : edgesInNetwork;
+    // Add thought bubble edges from cache to avoid duplicates across layout recalculations
+    const globalBubbleEdges = getThoughtBubbleEdges(thoughtBubbleEdges);
+    const thoughtBubbles = globalBubbleEdges.filter((edge) => filteredEdges.every((existing) => existing.id !== edge.id));
+    filteredEdges.push(...thoughtBubbles);
+    return { nodes: nodesTmp, edges: filteredEdges };
+};

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

@@ -0,0 +1,17 @@
+import { JSX as ReactJSX } 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.
+ * @param backendNeuroSanApiUrl Initial URL of the backend Neuro-San API. User can change this in the UI.
+ * @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 {};

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { StopCircle } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Slide from "@mui/material/Slide";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ReactFlowProvider } from "reactflow";
+import { AgentFlow } from "./AgentFlow.js";
+import { Sidebar } from "./Sidebar.js";
+import { getAgentNetworks, getConnectivity } from "../../controller/agent/Agent.js";
+import { processChatChunk } from "../../utils/agentConversations.js";
+import { useLocalStorage } from "../../utils/useLocalStorage.js";
+import { ChatCommon } from "../AgentChat/ChatCommon.js";
+import { SmallLlmChatButton } from "../AgentChat/LlmChatButton.js";
+import { cleanUpAgentName } from "../AgentChat/Utils.js";
+import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
+/**
+ * Main Multi-Agent Accelerator component that contains the sidebar, agent flow, and chat components.
+ * @param backendNeuroSanApiUrl Initial URL of the backend Neuro-San API. User can change this in the UI.
+ * @param darkMode Whether dark mode is enabled.
+ * @param userInfo Information about the current user, including userName and userImage.
+ */
+export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInfo, }) => {
+    // Animation time for the left and right panels to slide in or out when launching the animation
+    const GROW_ANIMATION_TIME_MS = 800;
+    // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
+    const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
+    // Track streaming state - controls thought bubble cleanup timer, and enables "zen mode" (hides outer panels after
+    // animation)
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [networks, setNetworks] = useState([]);
+    const [agentsInNetwork, setAgentsInNetwork] = useState([]);
+    const [selectedNetwork, setSelectedNetwork] = useState(null);
+    // Track whether we've shown the info popup so we don't keep bugging the user with it
+    const [haveShownPopup, setHaveShownPopup] = useState(false);
+    const [customURLLocalStorage, setCustomURLLocalStorage] = useLocalStorage("customAgentNetworkURL", null);
+    // An extra set of quotes is making it in the string in local storage.
+    const [neuroSanURL, setNeuroSanURL] = useState(customURLLocalStorage?.replaceAll('"', "") || backendNeuroSanApiUrl);
+    const agentCountsRef = useRef(new Map());
+    const conversationsRef = useRef(null);
+    const [currentConversations, setCurrentConversations] = useState(null);
+    // State to hold thought bubble edges - avoids duplicates across layout recalculations
+    const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
+    const customURLCallback = useCallback((url) => {
+        setNeuroSanURL(url || backendNeuroSanApiUrl);
+        setCustomURLLocalStorage(url === "" ? null : url);
+    }, [backendNeuroSanApiUrl, setCustomURLLocalStorage]);
+    const resetState = useCallback(() => {
+        setThoughtBubbleEdges(new Map());
+        setIsStreaming(false);
+    }, []);
+    // Reference to the ChatCommon component to allow external stop button to call its handleStop method
+    const chatRef = useRef(null);
+    // Handle external stop button click - stops streaming and exits zen mode
+    const handleExternalStop = useCallback(() => {
+        chatRef.current?.handleStop();
+        resetState();
+    }, []);
+    useEffect(() => {
+        async function getNetworks() {
+            try {
+                const networksTmp = await getAgentNetworks(neuroSanURL);
+                const sortedNetworks = networksTmp?.sort((a, b) => a.localeCompare(b));
+                setNetworks(sortedNetworks);
+                // Set the first network as the selected network
+                setSelectedNetwork(sortedNetworks[0]);
+                closeNotification();
+            }
+            catch (e) {
+                sendNotification(NotificationType.error, "Connection error", 
+                // eslint-disable-next-line max-len
+                `Unable to get list of Agent Networks. Verify that ${neuroSanURL} is a valid Multi-Agent Accelerator Server. Error: ${e}.`);
+                setNetworks([]);
+                setSelectedNetwork(null);
+            }
+        }
+        void getNetworks();
+    }, [neuroSanURL]);
+    useEffect(() => {
+        ;
+        (async () => {
+            if (selectedNetwork) {
+                try {
+                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, userInfo.userName);
+                    const agentsInNetworkSorted = connectivity.connectivity_info
+                        .concat()
+                        .sort((a, b) => a?.origin.localeCompare(b?.origin));
+                    setAgentsInNetwork(agentsInNetworkSorted);
+                }
+                catch (e) {
+                    const networkName = cleanUpAgentName(selectedNetwork);
+                    sendNotification(NotificationType.error, "Connection error", 
+                    // eslint-disable-next-line max-len
+                    `Unable to get agent list for "${networkName}". Verify that ${neuroSanURL} is a valid Multi-Agent Accelerator Server. Error: ${e}.`);
+                    setAgentsInNetwork([]);
+                }
+            }
+        })();
+    }, [neuroSanURL, selectedNetwork]);
+    // Set up handler to allow Escape key to stop the interaction with the LLM.
+    useEffect(() => {
+        if (!isAwaitingLlm) {
+            return undefined;
+        }
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                handleExternalStop();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isAwaitingLlm, handleExternalStop]);
+    // Effect to exit zen mode when streaming ends
+    useEffect(() => {
+        if (!isAwaitingLlm) {
+            setIsStreaming(false);
+        }
+    }, [isAwaitingLlm]);
+    const onChunkReceived = useCallback((chunk) => {
+        const result = processChatChunk(chunk, agentCountsRef.current, conversationsRef.current);
+        if (result.success) {
+            agentCountsRef.current = result.newCounts;
+            conversationsRef.current = result.newConversations;
+            setCurrentConversations(result.newConversations);
+        }
+        return result.success;
+    }, []);
+    const onStreamingStarted = useCallback(() => {
+        // Show info popup only once per session
+        if (!haveShownPopup) {
+            sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
+            setHaveShownPopup(true);
+        }
+        // Mark that streaming has started
+        setIsStreaming(true);
+    }, [haveShownPopup]);
+    const onStreamingComplete = useCallback(() => {
+        // When streaming is complete, clean up any refs and state
+        conversationsRef.current = null;
+        agentCountsRef.current = new Map();
+        setCurrentConversations(null);
+        resetState();
+    }, []);
+    const getLeftPanel = () => {
+        return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !isAwaitingLlm, direction: "right", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
+                setIsStreaming(true);
+            }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: isStreaming ? 0 : 3.25, sx: {
+                    height: "100%",
+                }, children: _jsx(Sidebar, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, selectedNetwork: selectedNetwork, setSelectedNetwork: setSelectedNetwork }) }) }));
+    };
+    const getCenterPanel = () => {
+        return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: isStreaming ? 18 : 8.25, sx: {
+                height: "100%",
+            }, children: _jsx(ReactFlowProvider, { children: _jsx(Box, { id: "multi-agent-accelerator-agent-flow-container", sx: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        width: "100%",
+                        height: "100%",
+                        maxWidth: 1000,
+                        margin: "0 auto",
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCountsRef.current, agentsInNetwork: agentsInNetwork, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, isAwaitingLlm: isAwaitingLlm, isStreaming: isStreaming, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }) }) }) }));
+    };
+    const getRightPanel = () => {
+        return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
+                setIsStreaming(true);
+            }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-agent-chat-common", size: isStreaming ? 0 : 6.5, sx: {
+                    height: "100%",
+                }, children: _jsx(ChatCommon, { ref: chatRef, neuroSanURL: neuroSanURL, id: "agent-network-ui", currentUser: userInfo.userName, userImage: userInfo.userImage, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: selectedNetwork, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, clearChatOnNewAgent: true, backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-secondary-blue)" }) }) }));
+    };
+    const getStopButton = () => {
+        return (_jsx(_Fragment, { children: isAwaitingLlm && (_jsx(Box, { id: "stop-button-container", sx: {
+                    position: "absolute",
+                    bottom: "1rem",
+                    right: "1rem",
+                    zIndex: 10,
+                }, children: _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: handleExternalStop, posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) }) })) }));
+    };
+    return (_jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+            border: "solid 1px #CFCFDC",
+            borderRadius: "var(--bs-border-radius)",
+            display: "flex",
+            flex: 1,
+            height: "85%",
+            marginTop: "1rem",
+            overflow: "hidden",
+            padding: "1rem",
+            background: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",
+            color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
+            justifyContent: isAwaitingLlm ? "center" : "unset",
+            position: "relative",
+        }, children: [getLeftPanel(), getCenterPanel(), getRightPanel(), getStopButton()] }));
+};

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { EdgeProps } from "reactflow";
+export declare const PlasmaEdge: FC<EdgeProps>;

package/dist/components/MultiAgentAccelerator/PlasmaEdge.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { useEffect, useRef } from "react";
+import { getBezierPath } from "reactflow";
+function createFunnelParticleOnPath(pathEl, canvasOffset, baseProgress) {
+    // Prettier and ESlint conflict over this
+    // eslint-disable-next-line newline-per-chained-call
+    const green = getComputedStyle(document.documentElement).getPropertyValue("--bs-green").trim();
+    const totalLength = pathEl.getTotalLength();
+    const speed = 0.02 + Math.random() * 0.003;
+    const life = 100;
+    const initialLife = life;
+    let progress = baseProgress;
+    let oscAngle = Math.random() * Math.PI * 2;
+    const oscSpeed = 0.1 + Math.random() * 0.05;
+    const maxAmp = 16 + Math.random() * 8;
+    let remainingLife = life;
+    let basePoint = pathEl.getPointAtLength(progress * totalLength);
+    const update = () => {
+        remainingLife -= 1;
+        progress += speed;
+        oscAngle += oscSpeed;
+        const _length = Math.min(progress * totalLength, totalLength);
+        basePoint = pathEl.getPointAtLength(_length);
+    };
+    const draw = (ctx) => {
+        const t = progress;
+        const taper = Math.max(0.75, 1 - t);
+        const amp = maxAmp * taper;
+        const delta = 1;
+        const p1 = pathEl.getPointAtLength(Math.max(0, totalLength * t));
+        const p2 = pathEl.getPointAtLength(Math.min(totalLength, totalLength * t + delta));
+        const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) + Math.PI / 2;
+        const offsetX = Math.cos(angle) * Math.sin(oscAngle) * amp;
+        const offsetY = Math.sin(angle) * Math.sin(oscAngle) * amp;
+        const x = basePoint.x + offsetX - canvasOffset.x;
+        const y = basePoint.y + offsetY - canvasOffset.y;
+        const alpha = Math.max(0, remainingLife / initialLife);
+        const pulse = 0.7 + 0.3 * Math.abs(Math.sin(oscAngle * 1.5));
+        ctx.save();
+        ctx.beginPath();
+        ctx.globalAlpha = alpha * 0.9 * pulse;
+        ctx.shadowBlur = 8 + 8 * pulse; // Lowered for performance
+        ctx.shadowColor = green;
+        ctx.fillStyle = green;
+        ctx.arc(x, y, 2, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.shadowBlur = 0;
+        ctx.restore();
+    };
+    const isAlive = () => progress * totalLength < totalLength * 0.98;
+    return { update, draw, isAlive };
+}
+export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }) => {
+    const canvasRef = useRef(null);
+    const pathRef = useRef(null);
+    const animationRef = useRef();
+    const particles = useRef([]);
+    const [edgePath] = getBezierPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    });
+    const padding = 40;
+    const x = Math.min(sourceX, targetX) - padding;
+    const y = Math.min(sourceY, targetY) - padding;
+    const width = Math.abs(targetX - sourceX) + padding * 2;
+    const height = Math.abs(targetY - sourceY) + padding * 2;
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const pathEl = pathRef.current;
+        if (!canvas || !pathEl)
+            return undefined;
+        const ctx = canvas.getContext("2d");
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(dpr, dpr);
+        const canvasOffset = { x, y };
+        const MAX_PARTICLES = 250;
+        const PARTICLES_PER_FRAME = 25;
+        const animate = () => {
+            ctx.clearRect(0, 0, width, height);
+            for (let i = 0; i < PARTICLES_PER_FRAME; i += 1) {
+                if (particles.current.length < MAX_PARTICLES) {
+                    const t = Math.random();
+                    if (Math.random() < 1 - t) {
+                        particles.current.push(createFunnelParticleOnPath(pathEl, canvasOffset, t));
+                    }
+                }
+            }
+            particles.current.forEach((p) => {
+                p.update();
+                p.draw(ctx);
+            });
+            particles.current = particles.current.filter((p) => p.isAlive());
+            animationRef.current = requestAnimationFrame(animate);
+        };
+        animate();
+        return () => cancelAnimationFrame(animationRef.current);
+    }, [edgePath, width, height, x, y]);
+    return (_jsxs(_Fragment, { children: [_jsx("foreignObject", { id: `foreign-object-${x}-${y}`, width: width, height: height, x: x, y: y, style: { pointerEvents: "none", overflow: "visible" }, children: _jsx("canvas", { id: `canvas-${x}-${y}`, ref: canvasRef }) }), _jsx("path", { id: `path-${edgePath}`, ref: pathRef, d: edgePath, fill: "none", stroke: "none", style: { position: "absolute", visibility: "hidden" } })] }));
+};

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+interface SidebarProps {
+    customURLCallback: (url: string) => void;
+    customURLLocalStorage?: string;
+    id: string;
+    isAwaitingLlm: boolean;
+    networks: string[];
+    selectedNetwork: string;
+    setSelectedNetwork: (network: string) => void;
+}
+export declare const Sidebar: FC<SidebarProps>;
+export {};