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

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -14,37 +14,70 @@ 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 StopCircle from "@mui/icons-material/StopCircle";
 import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ReactFlowProvider } from "reactflow";
+import { ReactFlowProvider } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { extractConversations } from "./AgentConversations.js";
+import { getUpdatedAgentCounts } from "./AgentCounts.js";
 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 { TEMPORARY_NETWORK_FOLDER } from "./const.js";
+import { Sidebar } from "./Sidebar/Sidebar.js";
+import { extractReservations } from "./TemporaryNetworks.js";
+import { getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, } from "../../controller/agent/Agent.js";
+import { useSettingsStore } from "../../state/Settings.js";
+import { useTempNetworksStore } from "../../state/TemporaryNetworks.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 { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Utils.js";
+import { ConfirmationModal } from "../Common/ConfirmationModal.js";
+import { MUIAlert } from "../Common/MUIAlert.js";
 import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
+// Display expired temporary networks for this amount of time after they expire so users can see what happened
+const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
+// Animation time for the left and right panels to slide in or out when launching the animation
+const GROW_ANIMATION_TIME_MS = 800;
+/**
+ * Helper function to convert agent reservations received from the backend into temporary networks that can be displayed
+ * in the tree.
+ * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
+ * @returns List of TemporaryNetwork objects that can be displayed in the UI
+ */
+const convertReservationsToNetworks = (agentReservations) => {
+    return agentReservations.map((reservation) => ({
+        reservation,
+        agentInfo: {
+            agent_name: `${TEMPORARY_NETWORK_FOLDER}/${reservation.reservation_id}`,
+            origin: reservation.reservation_id,
+            status: "active",
+        },
+    }));
+};
 /**
  * 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;
+export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
+    const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     // 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([]);
+    // List of known temporary networks (agent reservations) received from the backend
+    const temporaryNetworks = useTempNetworksStore((state) => state.tempNetworks);
+    // Track newly added temp networks so we can highlight them
+    const [newlyAddedTemporaryNetworks, setNewlyAddedTemporaryNetworks] = useState(new Set());
+    const [networkIconSuggestions, setNetworkIconSuggestions] = useState({});
     const [agentsInNetwork, setAgentsInNetwork] = useState([]);
+    const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     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);
@@ -53,13 +86,22 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
     const [neuroSanURL, setNeuroSanURL] = useState(customURLLocalStorage?.replaceAll('"', "") || backendNeuroSanApiUrl);
     const agentCountsRef = useRef(new Map());
     const conversationsRef = useRef(null);
-    const [currentConversations, setCurrentConversations] = useState(null);
+    const [currentConversations, setCurrentConversations] = useState([]);
+    const [networkToBeDeleted, setNetworkToBeDeleted] = useState(null);
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
+    // For controlling alert when temporary network is created
+    const [alertContents, setAlertContents] = useState(null);
     const customURLCallback = useCallback((url) => {
         setNeuroSanURL(url || backendNeuroSanApiUrl);
         setCustomURLLocalStorage(url === "" ? null : url);
     }, [backendNeuroSanApiUrl, setCustomURLLocalStorage]);
+    // Memoized key for agent names to trigger icon suggestion updates when the set of agents changes, not just
+    // when sorting/other operations on the agents list
+    const agentNamesKey = useMemo(() => agentsInNetwork
+        .map((agent) => agent.origin)
+        .sort()
+        .join(","), [agentsInNetwork]);
     const resetState = useCallback(() => {
         setThoughtBubbleEdges(new Map());
         setIsStreaming(false);
@@ -72,25 +114,36 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
         resetState();
     }, []);
     useEffect(() => {
-        async function getNetworks() {
+        ;
+        (async () => {
             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]);
+                setNetworks(networksTmp);
                 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}.`);
+                sendNotification(NotificationType.error, "Connection error", `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 (networks?.length > 0) {
+                try {
+                    const suggestions = await getNetworkIconSuggestions(networks);
+                    setNetworkIconSuggestions(suggestions);
+                }
+                catch (e) {
+                    console.warn("Unable to get network icon suggestions from LLM:", e);
+                    setNetworkIconSuggestions({});
+                }
+            }
+        })();
+    }, [networks]);
     useEffect(() => {
         ;
         (async () => {
@@ -101,17 +154,37 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
                         .concat()
                         .sort((a, b) => a?.origin.localeCompare(b?.origin));
                     setAgentsInNetwork(agentsInNetworkSorted);
+                    setAgentIconSuggestions(null);
+                    closeNotification();
                 }
                 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}.`);
+                    sendNotification(NotificationType.error, "Connection error", `Unable to get agent list for "${networkName}". Verify that ${neuroSanURL} is a valid ` +
+                        `Multi-Agent Accelerator Server. Error: ${e}.`);
                     setAgentsInNetwork([]);
                 }
             }
+            else {
+                setAgentsInNetwork([]);
+            }
         })();
     }, [neuroSanURL, selectedNetwork]);
+    useEffect(() => {
+        ;
+        (async () => {
+            if (agentsInNetwork.length > 0) {
+                try {
+                    const connectivity = { connectivity_info: agentsInNetwork };
+                    const agentIconSuggestionsTmp = await getAgentIconSuggestions(connectivity);
+                    setAgentIconSuggestions(agentIconSuggestionsTmp);
+                }
+                catch (e) {
+                    console.warn("Unable to get agent icon suggestions:", e);
+                    setAgentIconSuggestions(null);
+                }
+            }
+        })();
+    }, [agentNamesKey]);
     // Set up handler to allow Escape key to stop the interaction with the LLM.
     useEffect(() => {
         if (!isAwaitingLlm) {
@@ -131,16 +204,61 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
             setIsStreaming(false);
         }
     }, [isAwaitingLlm]);
+    // Reaper: remove temporary networks that have been expired for more than GRACE_PERIOD_MS
+    useEffect(() => {
+        if (temporaryNetworks.length === 0)
+            return undefined;
+        const interval = setInterval(() => {
+            const now = Date.now() / 1000; // convert to seconds since epoch
+            const currentTemporaryNetworks = useTempNetworksStore.getState().tempNetworks;
+            // Remove networks that have been expired for more than GRACE_PERIOD_MS
+            useTempNetworksStore
+                .getState()
+                .setTempNetworks(currentTemporaryNetworks.filter((n) => n.reservation.expiration_time_in_seconds > now - GRACE_PERIOD_MS / 1000));
+            // Figure out which networks have expired on the server (not including our grace period) so we can
+            // deselect them if they're currently selected
+            const expiredNetwork = currentTemporaryNetworks.filter((network) => network.reservation.expiration_time_in_seconds <= now);
+            // If the selected network is one of the expired ones, deselect it
+            if (expiredNetwork.some((n) => n.agentInfo.agent_name === selectedNetwork)) {
+                setSelectedNetwork(null);
+                agentCountsRef.current = new Map();
+            }
+        }, 10_000); // check every 10s
+        return () => clearInterval(interval);
+    }, [temporaryNetworks, selectedNetwork]);
     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);
+        // Extract ChatMessage structure
+        const chatMessage = chatMessageFromChunk(chunk);
+        if (!chatMessage) {
+            return true;
+        }
+        // Conversations between agents
+        const result = extractConversations(chatMessage, conversationsRef.current);
+        if (result != null) {
+            conversationsRef.current = result;
+            setCurrentConversations(result);
         }
-        return result.success;
+        // Agent hit counts
+        agentCountsRef.current = getUpdatedAgentCounts(agentCountsRef.current, chatMessage?.origin);
+        // Temporary networks/reservations
+        const reservationsResult = extractReservations(chatMessage);
+        // Handle agent reservations (temporary networks) that come in through the chat stream.
+        if (reservationsResult?.length > 0) {
+            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult);
+            const currentNetworks = useTempNetworksStore.getState().tempNetworks;
+            useTempNetworksStore.getState().setTempNetworks([...currentNetworks, ...newTemporaryNetworks]);
+            // record the new temporary networks so we can select them for the user. For now, we only
+            // care about the first one.
+            setNewlyAddedTemporaryNetworks(new Set(newTemporaryNetworks.map((network) => network.agentInfo.agent_name)));
+        }
+        return true;
     }, []);
     const onStreamingStarted = useCallback(() => {
+        // Reset agent counts
+        agentCountsRef.current = new Map();
+        // Reset newly added temporary networks
+        setNewlyAddedTemporaryNetworks(new Set());
+        setAlertContents(null);
         // Show info popup only once per session
         if (!haveShownPopup) {
             sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
@@ -150,21 +268,55 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
         setIsStreaming(true);
     }, [haveShownPopup]);
     const onStreamingComplete = useCallback(() => {
+        const network = newlyAddedTemporaryNetworks?.values().next().value;
+        if (network?.length > 0) {
+            // We show an Alert after streaming completes (in case of Zen mode where the user might miss it)
+            const agentNameDisplay = cleanUpAgentName(removeTrailingUuid(network));
+            setAlertContents(`A temporary network "${agentNameDisplay}" has been created.`);
+        }
         // When streaming is complete, clean up any refs and state
         conversationsRef.current = null;
-        agentCountsRef.current = new Map();
         setCurrentConversations(null);
         resetState();
-    }, []);
+    }, [newlyAddedTemporaryNetworks]);
+    useEffect(() => {
+        if (alertContents?.length > 0) {
+            // Set a timer to clear the alert after a few seconds so it doesn't overstay its welcome
+            const timeoutId = window.setTimeout(() => {
+                setAlertContents(null);
+            }, 10_000);
+            return () => {
+                window.clearTimeout(timeoutId);
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [alertContents]);
+    const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
+    const handleDeleteNetwork = (networkId, isExpired) => {
+        if (isExpired) {
+            // It's expired so just delete it without confirmation
+            const tempNetworksWithoutThisOne = temporaryNetworks.filter((network) => network.agentInfo.agent_name !== networkId);
+            useTempNetworksStore.getState().setTempNetworks(tempNetworksWithoutThisOne);
+        }
+        else {
+            setNetworkToBeDeleted(networkId);
+            setConfirmationModalOpen(true);
+        }
+    };
     const getLeftPanel = () => {
-        return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !isAwaitingLlm, direction: "right", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
+        return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !enableZenMode || !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: {
+            }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: enableZenMode && 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 }) }) }));
+                }, children: _jsx(Sidebar, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, setSelectedNetwork: (newNetwork) => {
+                        agentCountsRef.current = new Map();
+                        setSelectedNetwork(newNetwork);
+                    }, temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
-        return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: isStreaming ? 18 : 8.25, sx: {
+        return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
                 height: "100%",
             }, children: _jsx(ReactFlowProvider, { children: _jsx(Box, { id: "multi-agent-accelerator-agent-flow-container", sx: {
                         display: "flex",
@@ -174,35 +326,42 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, darkMode, userInf
                         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 }) }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCountsRef.current, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, 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: () => {
+        return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !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: {
+            }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-agent-chat-common", size: enableZenMode && 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)" }) }) }));
+                }, 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 }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
-        return (_jsx(_Fragment, { children: isAwaitingLlm && (_jsx(Box, { id: "stop-button-container", sx: {
+        return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_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()] }));
+    const getConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
+            "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {
+            setConfirmationModalOpen(false);
+            setNetworkToBeDeleted(null);
+        }, handleOk: () => {
+            useTempNetworksStore
+                .getState()
+                .setTempNetworks(temporaryNetworks.filter((network) => network.agentInfo.agent_name !== networkToBeDeleted));
+            setNetworkToBeDeleted(null);
+            setConfirmationModalOpen(false);
+        }, title: "Delete Network" })) : null;
+    const getAlert = () => (_jsx(Collapse, { in: alertContents?.length > 0, timeout: 1000, children: _jsx(MUIAlert, { id: "temporary-network-created-alert", closeable: true, severity: "success", sx: { marginTop: "1rem", marginBottom: 0 }, children: alertContents }) }));
+    return (_jsxs(_Fragment, { children: [getAlert(), getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+                    display: "flex",
+                    flex: 1,
+                    height: "85%",
+                    justifyContent: isAwaitingLlm ? "center" : "unset",
+                    marginTop: "1rem",
+                    overflow: "hidden",
+                    position: "relative",
+                }, children: [getLeftPanel(), getCenterPanel(), getRightPanel(), getStopButton()] })] }));
 };

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

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

package/dist/components/MultiAgentAccelerator/PlasmaEdge.js

@@ -14,12 +14,10 @@ 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 { getBezierPath } from "@xyflow/react";
 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();
+import { useSettingsStore } from "../../state/Settings.js";
+const createFunnelParticleOnPath = (pathEl, canvasOffset, baseProgress, plasmaColor) => {
     const totalLength = pathEl.getTotalLength();
     const speed = 0.02 + Math.random() * 0.003;
     const life = 100;
@@ -55,8 +53,8 @@ function createFunnelParticleOnPath(pathEl, canvasOffset, baseProgress) {
         ctx.beginPath();
         ctx.globalAlpha = alpha * 0.9 * pulse;
         ctx.shadowBlur = 8 + 8 * pulse; // Lowered for performance
-        ctx.shadowColor = green;
-        ctx.fillStyle = green;
+        ctx.shadowColor = plasmaColor;
+        ctx.fillStyle = plasmaColor;
         ctx.arc(x, y, 2, 0, Math.PI * 2);
         ctx.fill();
         ctx.globalAlpha = 1;
@@ -65,12 +63,13 @@ function createFunnelParticleOnPath(pathEl, canvasOffset, baseProgress) {
     };
     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 animationRef = useRef(null);
     const particles = useRef([]);
+    const plasmaColor = useSettingsStore((state) => state.settings.appearance.plasmaColor);
     const [edgePath] = getBezierPath({
         sourceX,
         sourceY,
@@ -106,7 +105,7 @@ export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition,
                 if (particles.current.length < MAX_PARTICLES) {
                     const t = Math.random();
                     if (Math.random() < 1 - t) {
-                        particles.current.push(createFunnelParticleOnPath(pathEl, canvasOffset, t));
+                        particles.current.push(createFunnelParticleOnPath(pathEl, canvasOffset, t, plasmaColor));
                     }
                 }
             }
@@ -118,7 +117,10 @@ export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition,
             animationRef.current = requestAnimationFrame(animate);
         };
         animate();
-        return () => cancelAnimationFrame(animationRef.current);
-    }, [edgePath, width, height, x, y]);
+        return () => {
+            if (animationRef.current !== undefined)
+                cancelAnimationFrame(animationRef.current);
+        };
+    }, [edgePath, width, height, plasmaColor, 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/AgentNetworkTreeItem.d.ts

@@ -0,0 +1,15 @@
+import { TreeItemProps } from "@mui/x-tree-view/TreeItem";
+import { FC } from "react";
+import { NodeIndex } from "./TreeBuilder.js";
+export interface AgentNetworkNodeProps extends TreeItemProps {
+    readonly nodeIndex: NodeIndex;
+    readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
+    readonly networkIconSuggestions: Record<string, string>;
+    readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
+}
+/**
+ * Custom Tree Item for MUI RichTreeView to display agent networks with tags
+ * @param props - see AgentNetworkNode interface
+ * @returns JSX.Element containing the custom tree item
+ */
+export declare const AgentNetworkTreeItem: FC<AgentNetworkNodeProps>;

package/dist/components/MultiAgentAccelerator/Sidebar/AgentNetworkTreeItem.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Need to disable restricted imports because we want to import all MUI icons dynamically
+// eslint-disable-next-line no-restricted-imports
+import * as MuiIcons from "@mui/icons-material";
+import BookmarkIcon from "@mui/icons-material/Bookmark";
+import Delete from "@mui/icons-material/Delete";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import { useTheme } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
+import { TreeItemContent, TreeItemGroupTransition, TreeItemLabel, TreeItemRoot, } from "@mui/x-tree-view/TreeItem";
+import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
+import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
+import { useRef } from "react";
+import { cleanUpAgentName } from "../../AgentChat/Utils.js";
+// Palette of colors we can use for tags
+const TAG_COLORS = [
+    "--bs-accent2-light",
+    "--bs-accent1-medium",
+    "--bs-accent3-medium",
+    "--bs-accent3-dark",
+    "--bs-green",
+    "--bs-orange",
+    "--bs-pink",
+    "--bs-secondary",
+    "--bs-yellow",
+];
+// Keep track of which tags have which colors so that the same tag always has the same color
+const tagsToColors = new Map();
+/**
+ * Helper function to determine if a temporary network is expired based on its expiration date
+ * @param expirationDate - Date object representing the expiration time of the temporary network
+ * @returns boolean indicating whether the temporary network is expired
+ */
+const isTemporaryNetworkExpired = (expirationDate) => {
+    return Date.now() > expirationDate.getTime();
+};
+/**
+ * Custom Tree Item for MUI RichTreeView to display agent networks with tags
+ * @param props - see AgentNetworkNode interface
+ * @returns JSX.Element containing the custom tree item
+ */
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, temporaryNetworkExpirationTimes, }) => {
+    const theme = useTheme();
+    // We know all labels are strings because we set them that way in the tree view items
+    const labelString = label;
+    const displayLabel = nodeIndex.get(itemId)?.displayName || cleanUpAgentName(labelString);
+    const { getContextProviderProps, getRootProps, getContentProps, getLabelProps, getGroupTransitionProps } = useTreeItem({ itemId, children, label, disabled });
+    const rootRef = useRef(null);
+    const isParent = Array.isArray(children) && children.length > 0;
+    const isChild = !isParent;
+    const agentNode = nodeIndex?.get(itemId)?.agentInfo;
+    // Only child items (the actual networks, not the containing folders) have tags. Retrieve tags from the
+    // networkFolders data structure passed in as a prop. This could in theory be a custom property for the
+    // RichTreeView item, but that isn't well-supported at this time.
+    // Discussion: https://stackoverflow.com/questions/69481071/material-ui-how-to-pass-custom-props-to-a-custom-treeitem
+    const tags = isChild ? agentNode?.tags || [] : [];
+    // Assign colors to tags as needed and store in tagsToColors map
+    for (const tag of tags) {
+        if (!tagsToColors.has(tag)) {
+            const color = TAG_COLORS[tagsToColors.size % TAG_COLORS.length];
+            tagsToColors.set(tag, color);
+        }
+    }
+    // Determine if expired (temporary networks only)
+    const expirationTime = temporaryNetworkExpirationTimes?.[itemId];
+    const isTemporaryNetwork = Boolean(expirationTime);
+    const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
+    const iconNameSuggestion = isTemporaryNetwork ? "HourglassTop" : isChild ? networkIconSuggestions?.[itemId] : null;
+    let muiIconElement = null;
+    if (iconNameSuggestion && MuiIcons[iconNameSuggestion]) {
+        const IconComponent = MuiIcons[iconNameSuggestion];
+        muiIconElement = _jsx(IconComponent, { sx: { fontSize: "1rem" } });
+    }
+    else if (iconNameSuggestion) {
+        console.warn(`Icon "${iconNameSuggestion}" not found in MUI icons library.`);
+    }
+    return (_jsx(TreeItemProvider, { ...getContextProviderProps(), children: _jsxs(TreeItemRoot, { ...getRootProps(), ref: rootRef, children: [_jsx(TreeItemContent, { ...getContentProps(), sx: {
+                        cursor: isExpired ? "not-allowed" : "pointer",
+                    }, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [_jsx(Tooltip, { title: isChild && isExpired
+                                            ? "Expired"
+                                            : expirationTime && `Expires at ${expirationTime.toLocaleString()}`, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [muiIconElement, _jsx(TreeItemLabel, { ...getLabelProps(), sx: {
+                                                        fontWeight: isParent ? "bold" : "normal",
+                                                        fontSize: isParent ? "1rem" : "0.9rem",
+                                                        color: isParent ? "var(--heading-color)" : null,
+                                                        opacity: isExpired ? 0.25 : 1,
+                                                        "&:hover": {
+                                                            textDecoration: "underline",
+                                                        },
+                                                    }, children: displayLabel })] }) }), isChild && tags?.length > 0 ? (_jsx(Tooltip, { title: tags
+                                            .slice()
+                                            .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+                                            .map((tag) => (_jsx(Chip, { label: tag, style: {
+                                                margin: "0.25rem",
+                                                backgroundColor: `var(${tagsToColors.get(tag) || TAG_COLORS[0]})`,
+                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null] }), isChild && isTemporaryNetwork && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onDeleteNetwork?.(itemId, isExpired);
+                                    }, sx: {
+                                        cursor: "pointer",
+                                        fontSize: "1rem",
+                                        "&:hover": { color: theme.palette.warning.main },
+                                    } }) }))] }) }, labelString), children && _jsx(TreeItemGroupTransition, { ...getGroupTransitionProps() })] }) }));
+};

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { NetworkIconSuggestions } from "../../../controller/Types/NetworkIconSuggestions.js";
+import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
+export interface SidebarProps {
+    readonly customURLCallback: (url: string) => void;
+    readonly customURLLocalStorage?: string;
+    readonly id: string;
+    readonly isAwaitingLlm: boolean;
+    readonly networkIconSuggestions?: NetworkIconSuggestions;
+    readonly networks: readonly AgentInfo[];
+    readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
+    readonly setSelectedNetwork: (network: string) => void;
+    readonly temporaryNetworks?: readonly TemporaryNetwork[];
+    readonly newlyAddedTemporaryNetworks?: Set<string>;
+}
+export declare const Sidebar: FC<SidebarProps>;