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

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

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import AddBoxRounded from "@mui/icons-material/AddBoxRounded";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
 import ClearIcon from "@mui/icons-material/Clear";
 import HighlightOff from "@mui/icons-material/HighlightOff";
 import SettingsIcon from "@mui/icons-material/Settings";
@@ -121,7 +121,7 @@ var CONNECTION_STATUS;
 })(CONNECTION_STATUS || (CONNECTION_STATUS = {}));
 // #endregion: Types
 const EMPTY_ARRAY = [];
-export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networkIconSuggestions, networks, newlyAddedTemporaryNetworks, onDeleteNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
+export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networkIconSuggestions, networks, newlyAddedTemporaryNetworks, onDeleteNetwork, onEditNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
     // Get default URL from the environment store.
     const { backendNeuroSanApiUrl } = useEnvironmentStore();
     const [urlInput, setUrlInput] = useState(customURLLocalStorage || backendNeuroSanApiUrl);
@@ -134,6 +134,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
     const [settingsAnchorEl, setSettingsAnchorEl] = useState(null);
     const settingsPopoverOpen = Boolean(settingsAnchorEl);
     const [expandedItems, setExpandedItems] = useState([]);
+    const [selectedItem, setSelectedItem] = useState(null);
     // Theming/Dark mode
     const darkMode = useTheme().palette.mode === "dark";
     const handleSettingsClick = (event) => {
@@ -202,6 +203,15 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         };
         void fetchVersion();
     }, [customURLLocalStorage, backendNeuroSanApiUrl]);
+    // When the edit pencil is clicked, select the network first (if not already selected) so the network loads
+    // before entering edit mode — the user shouldn't have to click the network and then click the pencil separately.
+    const handleEditNetworkWithSelect = (network) => {
+        if (selectedItem !== network) {
+            setSelectedItem(network);
+            setSelectedNetwork(network);
+        }
+        onEditNetwork?.(network);
+    };
     const { treeViewItems, nodeIndex } = buildTreeViewItems(networks, temporaryNetworks);
     const temporaryNetworkExpirationTimes = temporaryNetworks.reduce((acc, tempNetwork) => {
         acc[tempNetwork.agentInfo.agent_name] = new Date(tempNetwork.reservation.expiration_time_in_seconds * 1000);
@@ -211,7 +221,6 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         acc[tempNetwork.agentInfo.agent_name] = tempNetwork.networkHocon;
         return acc;
     }, {});
-    const [selectedItem, setSelectedItem] = useState(null);
     const handleSelectedItemsChange = (_event, itemId) => {
         if (!itemId) {
             return;
@@ -272,6 +281,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                                 networkIconSuggestions,
                                 nodeIndex,
                                 onDeleteNetwork,
+                                onEditNetwork: handleEditNetworkWithSelect,
                                 temporaryNetworkExpirationTimes,
                                 temporaryNetworkHoconStrings,
                             },
@@ -295,8 +305,14 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                             marginLeft: "0.35rem",
                             marginTop: "2px",
                             color: darkMode ? "var(--bs-dark-mode-link)" : undefined,
-                        }, variant: "text", children: "Default" }), (connectionStatusSuccess || connectionStatusError) && (_jsxs(Box, { id: "connection-status-box", display: "flex", alignItems: "center", sx: {
+                        }, variant: "text", children: "Default" }), (connectionStatusSuccess || connectionStatusError) && (_jsxs(Box, { id: "connection-status-box", sx: {
+                            display: "flex",
+                            alignItems: "center",
                             marginLeft: "0.25rem",
                             marginBottom: "0.5rem",
-                        }, children: [connectionStatusSuccess && (_jsxs(_Fragment, { children: [_jsx(CheckCircleOutlineIcon, { id: "connection-status-success-icon", sx: { color: "var(--bs-green)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-success-msg", variant: "body2", color: "var(--bs-green)", children: "Connected successfully" })] })), connectionStatusError && (_jsxs(_Fragment, { children: [_jsx(HighlightOff, { id: "connection-status-error-icon", sx: { color: "var(--bs-red)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-failed-msg", variant: "body2", color: "var(--bs-red)", children: `Connection failed: "${testConnectionResult?.status || "unknown error"}"` })] }))] }))] })] }));
+                        }, children: [connectionStatusSuccess && (_jsxs(_Fragment, { children: [_jsx(CheckCircleOutlinedIcon, { id: "connection-status-success-icon", sx: { color: "var(--bs-green)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-success-msg", variant: "body2", sx: {
+                                            color: "var(--bs-green)",
+                                        }, children: "Connected successfully" })] })), connectionStatusError && (_jsxs(_Fragment, { children: [_jsx(HighlightOff, { id: "connection-status-error-icon", sx: { color: "var(--bs-red)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-failed-msg", variant: "body2", sx: {
+                                            color: "var(--bs-red)",
+                                        }, children: `Connection failed: "${testConnectionResult?.status || "unknown error"}"` })] }))] }))] })] }));
 };

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

@@ -1,4 +1,4 @@
-import { TreeViewBaseItem } from "@mui/x-tree-view/models";
+import { TreeViewDefaultItemModelProperties } from "@mui/x-tree-view/models";
 import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
 export type NodeIndex = Map<string, {
@@ -11,9 +11,10 @@ export type NodeIndex = Map<string, {
  * The tree structure is used by the RichTreeView component to display the networks
  * @param networks - Array of networks from the Neuro-san /list API
  * @param temporaryNetworks - Array of temporary networks (e.g. ones recently created by the user)
- * @returns Array of TreeViewBaseItem objects representing the tree structure and an index for rapid access
+ * @returns Array of {@linkcode TreeViewDefaultItemModelProperties} objects representing the tree structure and an
+ * index for rapid access
  */
 export declare const buildTreeViewItems: (networks: readonly AgentInfo[], temporaryNetworks: readonly TemporaryNetwork[]) => {
-    treeViewItems: TreeViewBaseItem[];
+    treeViewItems: TreeViewDefaultItemModelProperties[];
     nodeIndex: NodeIndex;
 };

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

@@ -2,6 +2,7 @@ import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Uti
 /**
  * Iteratively sort all children of tree nodes using a queue-based approach
  * @param nodes - Array of tree nodes to sort
+ * @param nodeIndex - Index mapping node IDs to their AgentInfo and display names, used for sorting by display name
  */
 const sortTreeNodes = (nodes, nodeIndex) => {
     // Sort the top level nodes first. We sort by displayName because that's what the user sees
@@ -85,7 +86,8 @@ const addNetworkToTree = (network, result, uncategorized, map, nodeIndex, displa
  * The tree structure is used by the RichTreeView component to display the networks
  * @param networks - Array of networks from the Neuro-san /list API
  * @param temporaryNetworks - Array of temporary networks (e.g. ones recently created by the user)
- * @returns Array of TreeViewBaseItem objects representing the tree structure and an index for rapid access
+ * @returns Array of {@linkcode TreeViewDefaultItemModelProperties} objects representing the tree structure and an
+ * index for rapid access
  */
 export const buildTreeViewItems = (networks, temporaryNetworks) => {
     // Map to keep track of created nodes in a tree structure
@@ -95,7 +97,11 @@ export const buildTreeViewItems = (networks, temporaryNetworks) => {
     // Resulting tree view items, ready for consumption by RichTreeView
     const treeViewItems = [];
     // Special parent node for networks that aren't in any folder
-    const uncategorized = { id: "uncategorized", label: "Uncategorized", children: [] };
+    const uncategorized = {
+        id: "uncategorized",
+        label: "Uncategorized",
+        children: [],
+    };
     const displayNameCounts = new Map();
     // Build a tree structure from the flat list of networks.
     // The networks come in as a series of "paths" like "industry/retail/macys" and we need to build a tree

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

@@ -40,8 +40,25 @@ export declare const extractNetworkHocon: (message: ChatMessage) => string | nul
  * @param networkHocon Optional network HOCON string associated with the reservations.
  * @param agentNetworkDefinition Optional agent network definition entries.
  * @param agentNetworkName Optional backend canonical network name used to match / deduplicate networks.
- *   When omitted, the name is derived from the reservation_id via {@link extractNetworkNameFromReservationId}.
  * @returns List of TemporaryNetwork objects ready for the store.
  */
 export declare const convertReservationsToNetworks: (agentReservations: AgentReservation[], networkHocon: string | null, agentNetworkDefinition?: AgentNetworkDefinitionEntry[], agentNetworkName?: string) => TemporaryNetwork[];
-export { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";
+export declare const isEditableAgent: (displayAs: string | undefined) => boolean;
+/**
+ * Extracts TemporaryNetwork objects from a chat message by reading reservations, HOCON,
+ * agent network definition, and agent network name from the message / sly_data.
+ * @param message The chat message to extract from.
+ * @param agentNetworkDefinitionOverride Optional definition override (e.g. a locally-edited version) that
+ *   takes precedence over whatever the backend echoes in sly_data.
+ * @returns A (possibly empty) array of TemporaryNetwork objects ready for the store.
+ */
+export declare const extractTemporaryNetworksFromMessage: (message: ChatMessage, agentNetworkDefinitionOverride?: AgentNetworkDefinitionEntry[]) => TemporaryNetwork[];
+/**
+ * Returns true when agentName refers to a known temporary network.
+ */
+export declare const isTemporaryNetwork: (agentName: string | null, networks: TemporaryNetwork[]) => boolean;
+/**
+ * Merges incoming networks into target, keeping the entry with the highest expiration time.
+ * Returns a new array; does not mutate either argument.
+ */
+export declare const mergeNetworks: (target: TemporaryNetwork[], incoming: TemporaryNetwork[]) => TemporaryNetwork[];

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,6 @@
-import { AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, DisplayAs, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-import { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";
+import { removeTrailingUuid } from "../AgentChat/Common/Utils.js";
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -41,7 +41,6 @@ export const extractNetworkHocon = (message) => {
  * @param networkHocon Optional network HOCON string associated with the reservations.
  * @param agentNetworkDefinition Optional agent network definition entries.
  * @param agentNetworkName Optional backend canonical network name used to match / deduplicate networks.
- *   When omitted, the name is derived from the reservation_id via {@link extractNetworkNameFromReservationId}.
  * @returns List of TemporaryNetwork objects ready for the store.
  */
 export const convertReservationsToNetworks = (agentReservations, networkHocon, agentNetworkDefinition, agentNetworkName) => {
@@ -52,9 +51,45 @@ export const convertReservationsToNetworks = (agentReservations, networkHocon, a
         },
         // Use the explicit name when provided; fall back to extracting it from the reservation_id so that
         // networks are always deduplicated by name even when the backend omits AGENT_NETWORK_NAME_KEY.
-        agentNetworkName: agentNetworkName ?? extractNetworkNameFromReservationId(reservation.reservation_id),
+        agentNetworkName: agentNetworkName ?? removeTrailingUuid(reservation.reservation_id),
         networkHocon,
         agentNetworkDefinition,
     }));
 };
-export { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";
+export const isEditableAgent = (displayAs) => displayAs === DisplayAs.LLM_AGENT;
+/**
+ * Extracts TemporaryNetwork objects from a chat message by reading reservations, HOCON,
+ * agent network definition, and agent network name from the message / sly_data.
+ * @param message The chat message to extract from.
+ * @param agentNetworkDefinitionOverride Optional definition override (e.g. a locally-edited version) that
+ *   takes precedence over whatever the backend echoes in sly_data.
+ * @returns A (possibly empty) array of TemporaryNetwork objects ready for the store.
+ */
+export const extractTemporaryNetworksFromMessage = (message, agentNetworkDefinitionOverride) => {
+    const reservations = extractReservations(message);
+    if (reservations.length === 0)
+        return [];
+    const networkHocon = extractNetworkHocon(message);
+    const agentNetworkDefinition = agentNetworkDefinitionOverride ??
+        message.sly_data?.[AGENT_NETWORK_DEFINITION_KEY];
+    return convertReservationsToNetworks(reservations, networkHocon, agentNetworkDefinition);
+};
+/**
+ * Returns true when agentName refers to a known temporary network.
+ */
+export const isTemporaryNetwork = (agentName, networks) => agentName !== null && networks.some((n) => n.agentInfo.agent_name === agentName);
+/**
+ * Merges incoming networks into target, keeping the entry with the highest expiration time.
+ * Returns a new array; does not mutate either argument.
+ */
+export const mergeNetworks = (target, incoming) => incoming.reduce((result, n) => {
+    const existingIdx = result.findIndex((e) => e.agentNetworkName === n.agentNetworkName);
+    // No existing entry with this name - append.
+    if (existingIdx < 0)
+        return [...result, n];
+    // Existing entry found - keep whichever reservation expires later.
+    if (n.reservation.expiration_time_in_seconds > result[existingIdx].reservation.expiration_time_in_seconds) {
+        return result.map((e, i) => (i === existingIdx ? n : e));
+    }
+    return result;
+}, [...target]);

package/dist/components/MultiAgentAccelerator/ThoughtBubbleOverlay.js

@@ -81,6 +81,13 @@ const TruncatedText = styled("div")(({ isHovered, isTruncated }) => ({
 }));
 // #endregion: Styled Components
 export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true, isStreaming = false, onBubbleHoverChange, }) => {
+    /**
+     * A pure, managed timestamp that can be safely referenced during renders.
+     * Instead of calling the impure Date.now() directly in the render phase (which violates React's purity rules
+     * and triggers linting warnings), the component captures timestamps at controlled moments and stores them
+     * in state.
+     */
+    const [time, setTime] = useState(() => Date.now());
     // hoveredBubbleId: id of currently hovered bubble (or null)
     const [hoveredBubbleId, setHoveredBubbleId] = useState(null);
     // truncatedBubbles: set of edge ids whose text overflows the collapsed box
@@ -101,6 +108,13 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
     // rAF ref for scheduling post-paint updates
     const rafRef = useRef(null);
     const mountedRef = useRef(true);
+    // Effect to update `time` every second to trigger re-renders for animation timing and line updates.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(Date.now());
+        }, 250);
+        return () => clearInterval(interval);
+    }, []);
     // Filter edges with meaningful text (memoized to prevent infinite re-renders)
     const thoughtBubbleEdges = useMemo(() => edges.filter((e) => {
         const text = e.data?.text;
@@ -120,13 +134,12 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
             // Find new bubbles that should appear
             const newBubbles = thoughtBubbleEdges.filter((e) => !previousBubbleIds.has(e.id));
             // Find bubbles that should disappear
-            const removingBubbles = Array.from(previousBubbleIds).filter((id) => !currentEdgeIds.has(id));
+            const removingBubbles = [...previousBubbleIds].filter((id) => !currentEdgeIds.has(id));
             const newState = new Map(prev);
             // Add new bubbles in entering state. Record when they entered so we can delay showing
             // connecting lines until the bubble's entrance animation delay.
-            const now = Date.now();
             newBubbles.forEach((edge) => {
-                newState.set(edge.id, { isVisible: true, isExiting: false, enteredAt: now });
+                newState.set(edge.id, { isVisible: true, isExiting: false, enteredAt: time });
             });
             // Mark removing bubbles as exiting
             removingBubbles.forEach((id) => {
@@ -152,7 +165,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
             });
             return newState;
         });
-    }, [thoughtBubbleEdges]);
+    }, [thoughtBubbleEdges, time]);
     // Cleanup timeouts on unmount
     useEffect(() => {
         const timeouts = animationTimeouts.current;
@@ -178,9 +191,9 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
         for (const node of nodes) {
             const getConversations = node.data?.["getConversations"];
             if (typeof getConversations === "function") {
-                const convs = getConversations();
-                if (Array.isArray(convs)) {
-                    const hasSelf = convs.some((conv) => conv?.agents?.has?.(node.id));
+                const conversations = getConversations();
+                if (Array.isArray(conversations)) {
+                    const hasSelf = conversations.some((conversation) => conversation?.agents?.has?.(node.id));
                     if (hasSelf) {
                         set.add(node.id);
                     }
@@ -297,13 +310,13 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
         }
         return results;
     }, [activeAgentIds]);
-    // Get all bubbles to render (including exiting ones)
-    const allBubbleIds = Array.from(bubbleStates.keys());
     // Memoize the resolved edges so updateAllLines (and effects depending on it)
     // doesn't get recreated on every render unnecessarily.
-    const renderableBubbles = useMemo(() => allBubbleIds
+    const renderableBubbles = useMemo(() => 
+    // Get all bubbles to render (including exiting ones)
+    [...bubbleStates.keys()]
         .map((id) => sortedEdges.find((e) => e.id === id) ?? edges.find((e) => e.id === id))
-        .filter((edge) => edge !== undefined), [allBubbleIds, sortedEdges, edges]);
+        .filter((edge) => edge !== undefined), [bubbleStates, sortedEdges, edges]);
     // Update all SVG lines imperatively after paint. This reads DOM (getBoundingClientRect)
     // and writes attributes on existing <line> elements stored in `lineRefs`.
     const updateAllLines = useCallback(() => {
@@ -313,7 +326,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
                 if (!bubbleState.isVisible || bubbleState.isExiting)
                     return;
                 // Respect the entrance animation delay gating (lines appear only after bubble start)
-                const elapsed = Date.now() - (bubbleState?.enteredAt ?? 0);
+                const elapsed = time - (bubbleState?.enteredAt ?? 0);
                 const animationDelay = index * LAYOUT_BUBBLES_ANIMATION_DELAY_MS;
                 if (elapsed < animationDelay)
                     return;
@@ -338,7 +351,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
             // Do not throw to avoid breaking the app
             console.error("ThoughtBubbleOverlay: updateAllLines error", err);
         }
-    }, [renderableBubbles, bubbleStates, calculateLineCoordinates]);
+    }, [bubbleStates, calculateLineCoordinates, renderableBubbles, time]);
     // Schedule post-paint updates with rAF and ResizeObserver. Also, optionally run a
     // continuous loop while `isStreaming` is true to keep lines in sync during streaming.
     useEffect(() => {
@@ -416,7 +429,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
                     if (!bubbleState.isVisible)
                         return null;
                     // Only render lines after the bubble's entrance animation delay has elapsed.
-                    const elapsed = Date.now() - (bubbleState.enteredAt || 0);
+                    const elapsed = time - (bubbleState.enteredAt || 0);
                     const shouldShowLines = elapsed >= animationDelay;
                     if (!shouldShowLines)
                         return null;

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

@@ -0,0 +1,7 @@
+import { Step } from "react-joyride";
+/**
+ * This file defines the steps for the main tour of the Multi-Agent Accelerator application.
+ *
+ * @see https://react-joyride.com/docs/step
+ */
+export declare const MAIN_TOUR_STEPS: Step[];

package/dist/components/MultiAgentAccelerator/Tour/MainTourSteps.js

@@ -0,0 +1,88 @@
+/**
+ * This file defines the steps for the main tour of the Multi-Agent Accelerator application.
+ *
+ * @see https://react-joyride.com/docs/step
+ */
+export const MAIN_TOUR_STEPS = [
+    {
+        // First step doesn't refer to any particular UI element, just a welcome message
+        content: "Welcome to Cognizant AI Lab Multi-Agent Accelerator! This tour will give you a quick overview of " +
+            "the application.",
+        target: () => document.querySelector("#multi-agent-accelerator-grid"),
+        placement: "center",
+    },
+    {
+        content: "This is the list of agent networks available on the server. Select a network to see its agents and " +
+            "start interacting with it!",
+        target: () => document.querySelector("#multi-agent-accelerator-sidebar-heading"),
+        placement: "bottom",
+    },
+    {
+        content: "Agent Network Designer: Click here to create and edit your own network, with the help of a " +
+            "powerful AI assistant.",
+        target: () => document.querySelector("#add-network-icon"),
+        placement: "bottom",
+    },
+    {
+        content: "Click this icon to connect to any Neuro SAN backend service. Mouse over it to see the current " +
+            "server you are connected to including the version.",
+        target: () => document.querySelector("#agent-network-settings-icon"),
+        placement: "bottom",
+    },
+    {
+        content: "These are the agents within the current network.",
+        target: () => document.querySelector("#multi-agent-accelerator-grid-agent-flow"),
+        placement: "auto",
+    },
+    {
+        content: "These buttons allow you to adjust the look of the agent flow to your liking. " +
+            "Mouse over them to see what they do!",
+        // get by aria-label "Control Panel"
+        target: () => document.querySelector('div[aria-label="Control Panel"]'),
+    },
+    {
+        content: "This is the legend for the agent flow. You can select either 'depth' or 'heatmap' view " +
+            "to see the corresponding information about the agents in the flow.",
+        target: () => document.querySelector("#multi-agent-accelerator-agent-flow-legend"),
+    },
+    {
+        content: "This is the chat window where you can interact with the currently selected network.",
+        target: () => document.querySelector("#llm-chat-agent-network-ui"),
+        placement: "auto",
+    },
+    {
+        content: "These are the sample queries for your currently selected network. Click one to send it to the agents!",
+        target: () => document.querySelector("#sample-queries-box"),
+        placement: "top",
+    },
+    {
+        content: "Try typing your query here and sending it to the agents by hitting <Enter>!",
+        target: () => document.querySelector("#user-input-div"),
+        placement: "top",
+    },
+    {
+        content: "These buttons allow you to control what is shown in the Chat window. " +
+            "Try mousing over them to see what they do!",
+        target: () => document.querySelector("#show-thinking-button"),
+        placement: "bottom",
+    },
+    {
+        content: "Access Settings from this icon. Here you can change the look and feel of the application, including " +
+            "auto branding for a particular customer!",
+        target: () => document.querySelector("#settings-icon"),
+        placement: "top",
+    },
+    {
+        content: "Select the items in this menu to learn more about Neuro-san, our open-source framework for building " +
+            "and running multi-agent systems, including access our GitHub repository with code samples " +
+            "and documentation.",
+        target: () => document.querySelector("#explore-dropdown"),
+        placement: "top",
+    },
+    {
+        content: "If you want to take the tour again, or if you have any questions or need help, click here to access " +
+            "the help information or to contact the Cognizant AI Labs team. We'd love to hear from you!",
+        target: () => document.querySelector("#help-dropdown"),
+        placement: "top",
+    },
+];

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

@@ -10,6 +10,7 @@ export declare const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
 export declare const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
 export declare const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
 export declare const AGENT_NETWORK_NAME_KEY = "agent_network_name";
+export declare const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
 /**
  * A single agent entry within an agent network definition, as received in sly_data from the backend.
  * Extends ConnectivityInfo with editable instructions and description fields for the Agent Network Designer.
@@ -19,13 +20,9 @@ export type AgentNetworkDefinitionEntry = ConnectivityInfo & {
     readonly description?: string;
 };
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
-export declare const DISPLAY_AS_LLM_AGENT = "llm_agent";
-export declare const DISPLAY_AS_CODED_TOOL = "coded_tool";
-export declare const DISPLAY_AS_LANGCHAIN_TOOL = "langchain_tool";
-export declare const DISPLAY_AS_EXTERNAL_AGENT = "external_agent";
-/**
- * Returns true when an agent node supports the edit popup (instructions + description).
- * Only `llm_agent` nodes (and the Frontman, whose `display_as` is undefined) are editable.
- * `coded_tool`, `langchain_tool`, `external_agent`, and any other types are read-only.
- */
-export declare const isEditableAgent: (displayAs: string | undefined) => boolean;
+export declare enum DisplayAs {
+    LLM_AGENT = "llm_agent",
+    CODED_TOOL = "coded_tool",
+    LANGCHAIN_TOOL = "langchain_tool",
+    EXTERNAL_AGENT = "external_agent"
+}

package/dist/components/MultiAgentAccelerator/const.js

@@ -35,14 +35,13 @@ export const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
 export const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
 // The key in sly_data where the agent network name is stored
 export const AGENT_NETWORK_NAME_KEY = "agent_network_name";
+// The event name that needs to be fired for the app tour to start
+export const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
-export const DISPLAY_AS_LLM_AGENT = "llm_agent";
-export const DISPLAY_AS_CODED_TOOL = "coded_tool";
-export const DISPLAY_AS_LANGCHAIN_TOOL = "langchain_tool";
-export const DISPLAY_AS_EXTERNAL_AGENT = "external_agent";
-/**
- * Returns true when an agent node supports the edit popup (instructions + description).
- * Only `llm_agent` nodes (and the Frontman, whose `display_as` is undefined) are editable.
- * `coded_tool`, `langchain_tool`, `external_agent`, and any other types are read-only.
- */
-export const isEditableAgent = (displayAs) => displayAs === DISPLAY_AS_LLM_AGENT;
+export var DisplayAs;
+(function (DisplayAs) {
+    DisplayAs["LLM_AGENT"] = "llm_agent";
+    DisplayAs["CODED_TOOL"] = "coded_tool";
+    DisplayAs["LANGCHAIN_TOOL"] = "langchain_tool";
+    DisplayAs["EXTERNAL_AGENT"] = "external_agent";
+})(DisplayAs || (DisplayAs = {}));

package/dist/const.d.ts

@@ -1,9 +1,13 @@
 export declare const LOGO: string;
 export declare const NEURO_SAN_UI_VERSION: string;
 export declare const getContactUsConfirmationText: (email: string) => string;
+/**
+ * The default username to use when the user is not authenticated or does not have a name available, or when
+ * auentication is disabled
+ */
+export declare const DEFAULT_USERNAME = "Guest";
 /**
  * The default user image to use when the user does not have a profile picture.
  */
 export declare const DEFAULT_USER_IMAGE = "https://www.gravatar.com/avatar/?d=mp";
 export declare const authenticationEnabled: () => boolean;
-export declare const DEFAULT_NEURO_SAN_SERVER_URL = "https://neuro-san-dev.decisionai.ml";

package/dist/const.js

@@ -20,10 +20,13 @@ export const getContactUsConfirmationText = (email) => "Would you like to send t
     "You will need to have an email client installed on your device in order " +
     "to continue. If you don't have an email client, you can still contact us at " +
     `${email} using a web based email client.`;
+/**
+ * The default username to use when the user is not authenticated or does not have a name available, or when
+ * auentication is disabled
+ */
+export const DEFAULT_USERNAME = "Guest";
 /**
  * The default user image to use when the user does not have a profile picture.
  */
 export const DEFAULT_USER_IMAGE = "https://www.gravatar.com/avatar/?d=mp";
 export const authenticationEnabled = () => process.env["NEXT_PUBLIC_ENABLE_AUTHENTICATION"] !== "false";
-// Default "dev URL" for NeuroSan server, to allow for "zero config" execution.
-export const DEFAULT_NEURO_SAN_SERVER_URL = "https://neuro-san-dev.decisionai.ml";

package/dist/controller/agent/Agent.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Controller module for interacting with the Agent LLM API.
+ */
+import { AgentNetworkDefinitionEntry } from "../../components/MultiAgentAccelerator/const.js";
 import { AgentInfo, ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
 import { StreamingUnit } from "../llm/LlmChat.js";
 import { AgentIconSuggestions } from "../Types/AgentIconSuggestions.js";
@@ -76,3 +80,9 @@ export declare const getConnectivity: (url: string, network: string, userId: str
  * @throws Various exceptions if anything goes wrong such as network issues or invalid agent type.
  */
 export declare const getAgentFunction: (url: string, agent: string, userId: string) => Promise<FunctionResponse>;
+/**
+ * Streams the Agent Network Designer endpoint with an updated agent definition.
+ * Calls `onChunk` for each line received; callers are responsible for parsing
+ * reservations / networks out of each chunk.
+ */
+export declare const sendNetworkDesignerUpdate: (url: string, signal: AbortSignal, agentName: string, updated: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, currentUser: string, onChunk: (chunk: string) => void) => Promise<void>;

package/dist/controller/agent/Agent.js

@@ -16,7 +16,7 @@ limitations under the License.
 /**
  * Controller module for interacting with the Agent LLM API.
  */
-import { TEMPORARY_NETWORK_FOLDER } from "../../components/MultiAgentAccelerator/const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, TEMPORARY_NETWORK_FOLDER, } from "../../components/MultiAgentAccelerator/const.js";
 import { ApiPaths, 
 // eslint-disable-next-line camelcase
 ChatFilterChat_filter_type, ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.js";
@@ -213,3 +213,19 @@ export const getAgentFunction = async (url, agent, userId) => {
     }
     return response.json();
 };
+/**
+ * Streams the Agent Network Designer endpoint with an updated agent definition.
+ * Calls `onChunk` for each line received; callers are responsible for parsing
+ * reservations / networks out of each chunk.
+ */
+export const sendNetworkDesignerUpdate = async (url, signal, agentName, updated, agentNetworkName, currentUser, onChunk) => {
+    await sendChatQuery(url, signal, 
+    // Shouldn't have to pass a user message, but API behaves different without it
+    `Update instructions for agent "${agentName}"`, AGENT_NETWORK_DESIGNER_ID, onChunk, null, {
+        [AGENT_NETWORK_DEFINITION_KEY]: updated,
+        // Use the backend's canonical name, not the local UUID-based key.
+        ...(agentNetworkName ? { [AGENT_NETWORK_NAME_KEY]: agentNetworkName } : {}),
+        // skip_designer prevents the backend from using a reasoning model for edits
+        skip_designer: true,
+    }, currentUser, StreamingUnit.Line);
+};

package/dist/controller/llm/LlmChat.js

@@ -56,9 +56,9 @@ const handleStreamingCallback = async (res, callback, streamingUnit) => {
             let newlineIndex;
             while ((newlineIndex = buffer.indexOf("\n")) !== -1) {
                 // Extract the complete line (without the newline)
-                const line = buffer.substring(0, newlineIndex).trim();
+                const line = buffer.slice(0, Math.max(0, newlineIndex)).trim();
                 // Keep the rest for next iteration
-                buffer = buffer.substring(newlineIndex + 1);
+                buffer = buffer.slice(Math.max(0, newlineIndex + 1));
                 // Skip empty lines
                 if (line.length > 0) {
                     // Send the current line

package/dist/index.d.ts

@@ -13,7 +13,6 @@ export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
 export * from "./components/Common/Footer.js";
-export * from "./components/Common/LlmChatOptionsButton.js";
 export * from "./components/Common/LoadingSpinner.js";
 export * from "./components/Common/MUIAccordion.js";
 export * from "./components/Common/MUIAlert.js";

package/dist/index.js

@@ -28,7 +28,6 @@ export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
 export * from "./components/Common/Footer.js";
-export * from "./components/Common/LlmChatOptionsButton.js";
 export * from "./components/Common/LoadingSpinner.js";
 export * from "./components/Common/MUIAccordion.js";
 export * from "./components/Common/MUIAlert.js";

package/dist/state/TemporaryNetworks.d.ts

@@ -9,7 +9,7 @@ export type TemporaryNetwork = {
     readonly reservation: AgentReservation;
     readonly agentInfo: AgentInfo;
     /** The agent_network_name as sent by the backend — used when bouncing sly_data back to the backend. */
-    readonly agentNetworkName?: string;
+    readonly agentNetworkName: string;
     readonly networkHocon?: string | null;
     readonly agentNetworkDefinition?: AgentNetworkDefinitionEntry[];
 };
@@ -21,24 +21,14 @@ interface TempNetworksStore {
     readonly setTempNetworks: (tempNetworks: TemporaryNetwork[]) => void;
     /**
      * Upsert new networks into the store. Networks are matched by the UUID-stripped portion of
-     * their `reservation_id` (e.g. `"travel_agency_ops"` from `"travel_agency_ops-{uuid}"`), falling
-     * back to `agentNetworkName` when the reservation_id has no UUID suffix. If an incoming network
+     * their `reservation_id` (e.g. `"travel_agency_ops"` from `"travel_agency_ops-{uuid}"`), or, just
+     * `agentNetworkName` which is the same as having the UUID-stripped. If an incoming network
      * matches an existing one, the existing entry is replaced. Returns the final list of upserted
      * networks (those that were added or replaced).
      */
-    readonly upsertTempNetworks: (newNetworks: TemporaryNetwork[]) => TemporaryNetwork[];
-    readonly updateTempNetworkDefinition: (networkName: string, definition: AgentNetworkDefinitionEntry[]) => void;
+    readonly upsertTempNetworks: (incomingNetworks: TemporaryNetwork[]) => TemporaryNetwork[];
+    readonly updateTempNetworkDefinition: (networkName: string, agentNetworkDefinition: AgentNetworkDefinitionEntry[]) => void;
 }
-/**
- * Derives the canonical network name from a reservation ID.
- *
- * The backend encodes the network name as a prefix in the reservation ID, followed by a UUID suffix:
- * `{network_name}-{uuid}`, e.g. `travel_agency_ops-7876642e-fe75-4d44-a61e-300688a1a6c5`.
- *
- * Stripping the UUID suffix gives the stable name that can be used for deduplication across reservations.
- * Returns `undefined` when the reservation ID doesn't match the expected format.
- */
-export declare const extractNetworkNameFromReservationId: (reservationId: string) => string | undefined;
 /**
  * The hook that lets apps use the store.
  */