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

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -45,8 +45,8 @@ import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
 import { sendChatQuery } from "../../controller/agent/Agent.js";
 import { StreamingUnit } from "../../controller/llm/LlmChat.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
+import { usePalette, useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
-import { usePalette } from "../../Theme/Palettes.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
 import { MUIAlert } from "../Common/MUIAlert.js";
@@ -55,7 +55,7 @@ import { NotificationType, sendNotification } from "../Common/notification.js";
 // #region: Constants
 // Timeout for thought bubbles is set to 10 seconds
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
-// How long the dock'sstatus banner stays visible before auto-dismissing. Error banners persist until dismissed.
+// How long the dock's status banner stays visible before auto-dismissing. Error banners persist until dismissed.
 // Exported for tests.
 export const DOCK_BANNER_AUTO_DISMISS_MS = 5_000;
 // #endregion: Constants
@@ -113,6 +113,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     }, []);
     // Ref for isStreaming, read inside the cleanup interval.
     const isStreamingRef = useRef(isStreaming);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Keep the ref current after every render.
     useEffect(() => {
         isStreamingRef.current = isStreaming;
@@ -166,7 +168,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             return edgesMap ?? prev;
         });
     }, [currentConversations, showThoughtBubbles, setThoughtBubbleEdges]);
-    // Cleanup expired thought bubble edges — created once on mount, reads isStreaming via ref.
+    // Clean up expired thought bubble edges — created once on mount, reads isStreaming via ref.
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
             if (!isStreamingRef.current)
@@ -187,9 +189,6 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 1000);
         return () => clearInterval(cleanupInterval);
     }, [setThoughtBubbleEdges]); // mount/unmount only
-    // Shadow color for icon
-    const isDarkMode = theme.palette.mode === "dark";
-    const foregroundColor = isDarkMode ? theme.palette.common.white : theme.palette.common.black;
     const isHeatmap = coloringOption === "heatmap";
     const palette = usePalette();
     // Merge agents from active thought bubbles with agentsInNetwork for layout
@@ -216,8 +215,28 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Create the flow layout depending on user preference
     // Memoize layoutResult so it only recalculates when relevant data changes
     const layoutResult = useMemo(() => layout === "linear"
-        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork)
-        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork), [
+        ? layoutLinear({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        })
+        : layoutRadial({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        }), [
         agentCounts,
         agentIconSuggestions,
         currentConversations,
@@ -228,6 +247,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         layout,
         mergedAgentsInNetwork,
         thoughtBubbleEdges,
+        useNativeNames,
     ]);
     const [nodes, setNodes] = useState(layoutResult.nodes);
     // Sync up the nodes with the layout result
@@ -237,7 +257,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Track which node the user clicked on so we can open the popup
     const [selectedAgent, setSelectedAgent] = useState(null);
     const [isPopupOpen, setIsPopupOpen] = useState(false);
-    // True while the agent-edit request is in-flight so we can disable the Save button.
+    // True, while the agent-edit request is in-flight so we can disable the Save button.
     const [isSavingAgent, setIsSavingAgent] = useState(false);
     // AbortController for the in-flight save request — stored in a ref so handlePopupClose can cancel it.
     const saveAbortControllerRef = useRef(null);
@@ -247,7 +267,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const dockAbortControllerRef = useRef(null);
     // Stop-confirm overlay state: null = not shown, "confirming" = abort dialog open.
     const [stopState, setStopState] = useState(null);
-    // Inline status banner shown above the dock header after an apply succeeds, is cancelled, or fails.
+    // Inline status banner shown above the dock header after an "apply" succeeds, is canceled, or fails.
     const [dockBanner, setDockBanner] = useState(null);
     const bannerTimeoutRef = useRef(null);
     // Clear the banner auto-dismiss timer on unmount.
@@ -333,7 +353,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             }
             return true;
         }
-        // Reservations came back but none matched the current network — surface this in the dock banner.
+        // Reservations came back, but none matched the current network — surface this in the dock banner.
         showDockBanner({
             severity: "error",
             title: "Failed to apply network change.",
@@ -370,15 +390,17 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }
         catch (e) {
             const isAbort = e instanceof DOMException && e.name === "AbortError";
-            if (!isAbort) {
-                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
+            if (isAbort) {
+                if (hasTimedOut) {
+                    showDockBanner({
+                        severity: "error",
+                        title: "Failed to apply network change.",
+                        detail: "The request timed out. Please try again.",
+                    });
+                }
             }
-            else if (hasTimedOut) {
-                showDockBanner({
-                    severity: "error",
-                    title: "Failed to apply network change.",
-                    detail: "The request timed out. Please try again.",
-                });
+            else {
+                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
             }
         }
         finally {
@@ -445,8 +467,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     }, [agentsInNetwork, fitView, layout]);
     const onNodesChange = useCallback((changes) => {
         setNodes((currentNodes) => applyNodeChanges(
-        // For now, we only allow dragging, no updates. In agent network designer mode, doesn't make sense
-        // to allow position changes since the user isn't actually manipulating a real network
+        // For now, we only allow dragging, no updates. In agent network designer mode, it doesn't make
+        // sense to allow position changes since the user isn't actually manipulating a real network
         changes.filter((c) => c.type === "position" && !isAgentNetworkDesignerMode), currentNodes));
     }, [isAgentNetworkDesignerMode]);
     const transform = useStore((state) => state.transform);
@@ -479,53 +501,62 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const getLegend = () => {
         const length = isHeatmap ? palette.length : Math.min(maxDepth, palette.length);
         return (_jsxs(Box, { id: `${id}-legend`, sx: {
-                position: "absolute",
-                top: "1.5rem",
-                right: "10px",
-                padding: "5px",
+                alignItems: "center",
+                backgroundColor: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                boxShadow: `0 2px 8px ${alpha(theme.palette.text.primary, 0.18)}`,
                 borderRadius: "5px",
-                boxShadow: `0 0 5px color-mix(in srgb, ${foregroundColor} 30%, transparent)`,
                 display: "flex",
-                alignItems: "center",
+                padding: theme.spacing(0.5),
+                position: "absolute",
+                right: theme.spacing(2),
+                top: theme.spacing(4),
                 zIndex: getZIndex(2, theme),
-            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, style: {
+            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, sx: {
                         alignItems: "center",
                         backgroundColor: palette[i],
                         borderRadius: "50%",
                         color: theme.palette.getContrastText(palette[i]),
                         display: "flex",
-                        height: "15px",
+                        fontSize: "0.5rem",
                         justifyContent: "center",
-                        marginLeft: "5px",
+                        marginLeft: theme.spacing(0.75),
                         width: "15px",
-                    }, children: _jsx(Typography, { id: `${id}-legend-depth-${i}-text`, sx: {
-                            fontSize: "8px",
-                        }, children: i }) }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
+                    }, children: i }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
                         if (newValue !== null) {
                             setColoringOption(newValue);
                         }
-                    }, sx: {
-                        fontSize: "2rem",
-                        zIndex: 10,
-                        marginLeft: "0.5rem",
-                    }, size: "small", children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, size: "small", value: "depth", sx: {
+                    }, size: "small", sx: {
+                        marginLeft: theme.spacing(2),
+                        "& .MuiToggleButton-root": {
+                            backgroundColor: theme.palette.background.paper,
+                            borderColor: theme.palette.divider,
+                            color: theme.palette.text.primary,
+                            minHeight: 22,
+                            px: 1,
+                            "&:hover": {
+                                backgroundColor: theme.palette.action.hover,
+                            },
+                            "&.Mui-selected": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                            "&.Mui-selected:hover": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                        },
+                    }, children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, value: "depth", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-depth-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Depth" }) }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, size: "small", value: "heatmap", sx: {
+                            }, children: "Depth" }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, value: "heatmap", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-heatmap-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Heatmap" }) })] })] }));
+                            }, children: "Heatmap" })] })] }));
     };
     // Get the background color for the control buttons based on the layout and dark mode setting
     const getControlButtonBackgroundColor = (isActive) => {
-        if (!isActive) {
-            return undefined;
-        }
-        return isDarkMode ? theme.palette.grey[800] : theme.palette.grey[200];
+        return isActive ? theme.palette.action.selected : undefined;
     };
     // Only show radial guides if radial layout is selected, radial guides are enabled, and it's not just Frontman
     const shouldShowRadialGuides = enableRadialGuides && layout === "radial" && maxDepth > 1;
@@ -604,9 +635,12 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 fill: theme.palette.text.primary,
             },
         }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, onNodeClick: handleNodeClick, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { sx: {
+                    backdropFilter: "blur(8px)",
+                    backgroundColor: alpha(theme.palette.background.paper, 0.2),
                     borderTop: `2px solid ${theme.palette.primary.main}`,
-                    backgroundColor: theme.palette.background.paper,
                     flexShrink: 0,
+                    position: "relative",
+                    zIndex: getZIndex(2, theme),
                 }, children: [dockBanner && (_jsx(MUIAlert, { closeable: true, id: `${id}-dock-banner`, onClose: handleDismissBanner, severity: dockBanner.severity, sx: {
                             borderRadius: 0,
                             // Override MUIAlert's default 1rem bottom margin so the banner sits flush
@@ -617,10 +651,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                             // vertically with the header's close X below it.
                             paddingRight: 0.5,
                             alignItems: "center",
-                            // Frost the banner like the dock header so the graph doesn't show through the
-                            // app's translucent paper background; keep a tinted, mostly-opaque severity wash.
-                            backdropFilter: "blur(8px)",
-                            backgroundColor: alpha(theme.palette[dockBanner.severity].main, isDarkMode ? 0.28 : 0.16),
+                            // Frost the banner like the dock header, so the graph doesn't show through the
+                            // app's translucent paper background; keep a tinted, mostly opaque severity wash.
                             "& .MuiAlert-action": {
                                 alignItems: "center",
                                 marginRight: 0,

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -29,8 +29,7 @@ import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
 import { useState } from "react";
 import { DisplayAs } from "./const.js";
-import { useSettingsStore } from "../../state/Settings.js";
-import { usePalette } from "../../Theme/Palettes.js";
+import { usePalette, useSettingsStore } from "../../state/Settings.js";
 import { isLightColor } from "../../Theme/Theme.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 // A zero-width space character, used to give the browser a hint where to break long names
@@ -125,32 +124,28 @@ export const AgentNode = (props) => {
     // Determine which icon to display based on the agent type whether it is Frontman or not
     const getDisplayAsIcon = () => {
         const id = `${agentId}-icon`;
-        if (agentIconSuggestion && MuiIcons[agentIconSuggestion]) {
-            const IconComponent = MuiIcons[agentIconSuggestion];
-            return _jsx(IconComponent, { sx: { fontSize: AGENT_ICON_SIZE } });
+        // Check for valid MUI icon suggestion from the LLM suggestion service
+        const SuggestedIcon = agentIconSuggestion ? MuiIcons[agentIconSuggestion] : undefined;
+        // If the LLM provided a valid icon suggestion, use it. Otherwise, fall back to default icons based on
+        // agent type.
+        if (SuggestedIcon) {
+            return (_jsx(SuggestedIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
-        else {
-            if (agentIconSuggestion) {
-                console.warn(`Invalid MUI icon suggestion: ${agentIconSuggestion}`);
-            }
-            if (isFrontman) {
-                return (
-                // Use special icon and larger size for Frontman
-                _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
-            }
-            else {
-                switch (displayAs) {
-                    case DisplayAs.EXTERNAL_AGENT:
-                        return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    // This should be a supported type but we're not seeing it?
-                    case DisplayAs.LANGCHAIN_TOOL:
-                    case DisplayAs.CODED_TOOL:
-                        return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case DisplayAs.LLM_AGENT:
-                    default:
-                        return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                }
-            }
+        if (isFrontman) {
+            return (
+            // Use special icon and larger size for Frontman
+            _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
+        }
+        switch (displayAs) {
+            case DisplayAs.EXTERNAL_AGENT:
+                return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            // This should be a supported type but we're not seeing it?
+            case DisplayAs.LANGCHAIN_TOOL:
+            case DisplayAs.CODED_TOOL:
+                return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            case DisplayAs.LLM_AGENT:
+            default:
+                return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
     };
     // Determine icon color based on settings. If auto color is enabled, use contrasting color for readability.
@@ -160,6 +155,7 @@ export const AgentNode = (props) => {
         ? theme.palette.common.black
         : theme.palette.common.white;
     const [isHovered, setIsHovered] = useState(false);
+    // Insert zero-width spaces into the agent name to give the browser hints where to wrap.
     const wrappedAgentName = agentName
         // Allow wrap after underscore
         .replaceAll("_", `_${ZERO_WIDTH_SPACE}`)

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>;