@cognizant-ai-lab/ui-common 1.7.0 → 1.8.0

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

@@ -24,13 +24,20 @@ export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
     edge: ThoughtBubbleEdgeShape;
     timestamp: number;
 }>) => ThoughtBubbleEdgeShape[];
-export declare const layoutRadial: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;
-export declare const layoutLinear: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;
+/** * Shared options for graph layout functions. */
+export type LayoutOptions = {
+    readonly agentCounts: Map<string, number>;
+    readonly agentIconSuggestions?: AgentIconSuggestions | null;
+    readonly agentsInNetwork: ConnectivityInfo[];
+    readonly currentConversations: AgentConversation[] | null;
+    readonly isAgentNetworkDesignerMode: boolean;
+    readonly isAwaitingLlm: boolean;
+    readonly isTemporaryNetwork?: boolean;
+    readonly thoughtBubbleEdges: Map<string, {
+        edge: ThoughtBubbleEdgeShape;
+        timestamp: number;
+    }>;
+    readonly useNativeNames: boolean;
+};
+export declare const layoutRadial: ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork, thoughtBubbleEdges, useNativeNames, }: LayoutOptions) => LayoutResult;
+export declare const layoutLinear: ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork, thoughtBubbleEdges, useNativeNames, }: LayoutOptions) => LayoutResult;

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -102,8 +102,7 @@ const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAni
         type: isAnimated ? "plasmaEdge" : undefined,
     };
 };
-export const layoutRadial = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
+export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork = false, thoughtBubbleEdges, useNativeNames, }) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Compute depth of each node using breadth-first traversal
@@ -186,7 +185,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
                 type: AGENT_NODE_TYPE_NAME,
                 data: {
                     agentCounts,
-                    agentName: cleanUpAgentName(nodeId),
+                    agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
                     depth,
                     displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
                     // Use current conversations for node highlighting (cleared at end)
@@ -216,8 +215,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
     edgesInNetwork.push(...thoughtBubbleEdgesToAdd);
     return { nodes: nodesInNetwork, edges: edgesInNetwork };
 };
-export const layoutLinear = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
+export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork = false, thoughtBubbleEdges, useNativeNames, }) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
@@ -232,7 +230,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
             type: AGENT_NODE_TYPE_NAME,
             data: {
                 agentCounts,
-                agentName: cleanUpAgentName(nodeId),
+                agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
                 displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
                 // Use current conversations for node highlighting (cleared at end)
                 getConversations: () => currentConversations,

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

@@ -1,17 +1,11 @@
 import { FC } from "react";
 export interface MultiAgentAcceleratorProps {
-    readonly userInfo: {
-        userName: string;
-        userImage: string;
-    };
-    readonly backendNeuroSanApiUrl: string;
+    readonly username: string;
+    readonly defaultNeuroSanUrl: string;
 }
-export declare const GRACE_PERIOD_MS: number;
-export declare const SHOW_TOUR_DELAY_MS = 5000;
 /**
  * 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.
+ * @param username Identifier to use for interactions with the backend (for personalization and tracking).
  */
 export declare const MultiAgentAccelerator: FC<MultiAgentAcceleratorProps>;

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -19,6 +19,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
 import { useTheme } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -27,18 +28,18 @@ import { extractConversations } from "./AgentConversations.js";
 import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
 import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, GRACE_PERIOD_MS, SHOW_TOUR_DELAY_MS, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
 import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, mergeNetworks } from "./TemporaryNetworks.js";
-import { getAgentFunction, getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { getAgentFunction, getAgentNetworks, getConnectivity, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { getAgentIconSuggestions, getNetworkIconSuggestions } from "../../controller/agent/IconSuggestions.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { TourPromptState, useTourStore } from "../../state/Tour.js";
-import { useLocalStorage } from "../../utils/useLocalStorage.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
-import { SmallLlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
+import { LlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
 import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
 import { ConfirmationModal, StyledButton } from "../Common/ConfirmationModal.js";
@@ -47,14 +48,10 @@ import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
 // Check for expired networks every this many milliseconds
 const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
-// Display expired temporary networks for this amount of time after they expire so users can see what happened
-export 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;
 // Optimization to avoid creating a new empty map on every render
 const EMPTY_THOUGHT_BUBBLE_EDGES = new Map();
-// We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
-export const SHOW_TOUR_DELAY_MS = 5000;
 // #region: Agent-save helpers
 /**
  * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
@@ -76,7 +73,7 @@ const collectNetworksFromChunk = (chunk, updated, accumulated) => {
         return accumulated;
     }
 };
-/** Logs and notifies about a save error. Suppresses AbortError (user-cancelled). */
+/** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
 const notifySaveError = (agentName, e) => {
     if (e instanceof DOMException && e.name === "AbortError")
         return;
@@ -90,14 +87,15 @@ const notifySaveError = (agentName, e) => {
 /**
  * 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.
+ * @param username Identifier to use for interactions with the backend (for personalization and tracking).
  */
-export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
+export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // MUI theme
     const theme = useTheme();
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const [isEditingNetwork, setIsEditingNetwork] = useState(false);
@@ -118,11 +116,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
-    const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
+    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
     const [providerKeysRequired, setProviderKeysRequired] = useState(new Set());
-    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 neuroSanURL = useSettingsStore((state) => state.settings.externalServices.neuroSanUrl) ?? defaultNeuroSanUrl;
     // Tracks how many times each agent has been involved in the conversation
     const [agentCounts, setAgentCounts] = useState(new Map());
     // Common function to change the selected network and reset related state
@@ -138,10 +134,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const [tourModalOpen, setTourModalOpen] = useState(false);
     const [haveShownTourModal, setHaveShownTourModal] = useState(false);
-    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
@@ -281,7 +273,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         const fetchAgentDetails = async () => {
             // It is a Neuro-san agent, so get the function and connectivity info
             try {
-                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, userInfo.userName);
+                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, username);
                 setNetworkDescription(agentFunction?.function?.description || "");
                 const schema = agentFunction?.function?.sly_data_schema;
                 const schemaProperties = isRecord(schema) ? schema["properties"] : undefined;
@@ -308,7 +300,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
             void fetchAgentDetails();
         }
-    }, [neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -329,7 +321,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         (async () => {
             if (selectedNetwork) {
                 try {
-                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, userInfo.userName);
+                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, username);
                     const agentsInNetworkSorted = [...connectivity.connectivity_info].sort((a, b) => a?.origin.localeCompare(b?.origin));
                     setAgentsInNetwork(agentsInNetworkSorted);
                     const sampleQueriesTmp = connectivity?.metadata?.["sample_queries"];
@@ -352,7 +344,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setAgentsInNetwork([]);
             }
         })();
-    }, [networkDisplayName, neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [networkDisplayName, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -475,7 +467,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const onSaveAgent = useCallback(async (agentName, updated, agentNetworkName, signal) => {
         try {
             let newNetworks = [];
-            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, userInfo.userName, (chunk) => {
+            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, username, (chunk) => {
                 newNetworks = collectNetworksFromChunk(chunk, updated, newNetworks);
             });
             if (newNetworks.length === 0) {
@@ -499,7 +491,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         catch (e) {
             notifySaveError(agentName, e);
         }
-    }, [neuroSanURL, userInfo.userName, selectedNetwork]);
+    }, [neuroSanURL, username, selectedNetwork]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
         setAgentCounts(new Map());
@@ -570,7 +562,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setIsStreaming(true);
             }, 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, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onEditNetwork: handleEditNetwork, onDeleteNetwork: handleDeleteNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
+                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
         return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
@@ -583,7 +575,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                         height: "100%",
                         maxWidth: 1000,
                         margin: "0 auto",
-                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: userInfo.userName, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: selectedNetwork || undefined, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: username, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: networkDisplayName || "", networkId: isSelectedNetworkTemporary ? selectedNetwork : "", neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
     };
     const getRightPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
@@ -592,17 +584,21 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     height: "100%",
                 }, children: _jsx(ChatCommon, { agentPlaceholders: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
-                    }, currentUser: userInfo.userName, customAgentGreetings: {
+                    }, currentUser: username, customAgentGreetings: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
-                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, missingApiKeys: getMissingApiKeys(), networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork }, selectedNetwork ?? "no-network") }) }));
+                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, missingApiKeys: getMissingApiKeys(), networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork, setSelectedNetwork: changeSelectedNetwork }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         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)" } }) }) })) }));
+                    zIndex: getZIndex(2, theme),
+                }, children: _jsx(Tooltip, { title: "Stop response (Esc)", children: _jsx(LlmChatButton, { "aria-label": "Stop", id: "stop-output-button", onClick: handleExternalStop, sx: {
+                            "&:hover": {
+                                backgroundColor: "error.main",
+                            },
+                        }, children: _jsx(StopCircle, { fontSize: "large", id: "stop-button-icon" }) }) }) })) }));
     };
     const getDeleteNetworkConfirmationModal = () => 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: () => {

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

@@ -1,13 +1,8 @@
 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 onEditNetwork?: (network: string) => void;
-    readonly networkIconSuggestions: Record<string, string>;
-    readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
-    readonly temporaryNetworkHoconStrings?: Record<string, string | null>;
 }
 /**
  * Custom Tree Item for MUI RichTreeView to display agent networks with tags

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

@@ -9,14 +9,13 @@ import Edit from "@mui/icons-material/Edit";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import IconButton from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
+import { useTreeItemModel } from "@mui/x-tree-view/hooks";
 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 { downloadFile, toSafeFilename } from "../../../utils/File.js";
-import { cleanUpAgentName } from "../../AgentChat/Common/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -44,21 +43,15 @@ const isTemporaryNetworkExpired = (expirationDate) => {
  * @param props - see AgentNetworkNode interface
  * @returns JSX.Element containing the custom tree item
  */
-export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, onEditNetwork, temporaryNetworkExpirationTimes, temporaryNetworkHoconStrings, }) => {
-    const theme = useTheme();
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDeleteNetwork, onEditNetwork, }) => {
+    const item = useTreeItemModel(itemId);
     // 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 || [] : [];
+    const tags = item.tags ?? [];
     // Assign colors to tags as needed and store in tagsToColors map
     for (const tag of tags) {
         if (!tagsToColors.has(tag)) {
@@ -67,18 +60,33 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
         }
     }
     // Determine if expired (temporary networks only)
-    const expirationTime = temporaryNetworkExpirationTimes?.[itemId];
+    const expirationTime = item?.temporaryNetworkExpirationTime;
     const isTemporaryNetwork = Boolean(expirationTime);
     const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
-    const networkHocon = isTemporaryNetwork ? temporaryNetworkHoconStrings?.[itemId] : null;
-    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" } });
+    const networkHocon = item?.temporaryNetworkHocon ?? null;
+    const iconNameSuggestion = item.iconSuggestion;
+    let muiIconElement;
+    // If the item is a child (i.e., a network), we want to render an icon next to it.
+    if (isChild) {
+        if (iconNameSuggestion) {
+            if (MuiIcons[iconNameSuggestion]) {
+                // If the icon name suggestion is valid, use it to render the icon
+                const IconComponent = MuiIcons[iconNameSuggestion];
+                muiIconElement = _jsx(IconComponent, { sx: { fontSize: "1rem" } });
+            }
+            else {
+                // If the icon name suggestion is not valid, use a default icon
+                muiIconElement = _jsx(MuiIcons.Hub, { sx: { fontSize: "1rem" } });
+            }
+        }
+        else {
+            // If no icon name suggestion is provided, use a default icon
+            muiIconElement = _jsx(MuiIcons.Hub, { sx: { fontSize: "1rem" } });
+        }
     }
-    else if (iconNameSuggestion) {
-        console.warn(`Icon "${iconNameSuggestion}" not found in MUI icons library.`);
+    else {
+        // Use folder icon for parent items (i.e., folders)
+        muiIconElement = _jsx(MuiIcons.Folder, { sx: { fontSize: "1rem" } });
     }
     return (_jsx(TreeItemProvider, { ...getContextProviderProps(), children: _jsxs(TreeItemRoot, { ...getRootProps(), ref: rootRef, "data-itemid": itemId, children: [_jsx(TreeItemContent, { ...getContentProps(), sx: {
                         cursor: isExpired ? "not-allowed" : "pointer",
@@ -92,16 +100,13 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                         "&:hover": {
                                                             textDecoration: "underline",
                                                         },
-                                                    }, children: displayLabel })] }) }), isChild && tags?.length > 0 ? (_jsx(Tooltip, { title: [...tags]
+                                                    }, children: item.displayName })] }) }), isChild && tags.length > 0 ? (_jsx(Tooltip, { title: [...tags]
                                             .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 && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem", marginLeft: "auto" }, children: [networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
                                                     e.stopPropagation();
-                                                    if (isExpired) {
-                                                        return;
-                                                    }
                                                     const fileName = `${toSafeFilename(labelString)}.hocon`;
                                                     downloadFile(networkHocon, fileName);
                                                 }, disabled: isExpired, "aria-label": "Download network definition", size: "small", sx: {
@@ -128,7 +133,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                 onDeleteNetwork?.(itemId, isExpired);
                                             }, sx: {
                                                 color: "var(--bs-secondary)",
-                                                "&:hover": { color: theme.palette.warning.main },
+                                                "&:hover": { color: (theme) => theme.palette.warning.main },
                                                 "&.Mui-disabled": {
                                                     color: "var(--bs-secondary)",
                                                     opacity: 0.3,

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

@@ -4,16 +4,15 @@ import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
 export declare const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
 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 onEditNetwork?: (network: string) => void;
+    readonly neuroSanServerURL: string;
+    readonly newlyAddedTemporaryNetworks?: Set<string>;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
+    readonly onEditNetwork?: (network: string) => void;
     readonly setSelectedNetwork: (network: string) => void;
     readonly temporaryNetworks?: readonly TemporaryNetwork[];
-    readonly newlyAddedTemporaryNetworks?: Set<string>;
 }
 export declare const Sidebar: FC<SidebarProps>;