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

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

@@ -1,119 +1,196 @@
 import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
+//#endregion Types and Interfaces
 /**
- * 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
+ * Recursively searches for a tree item with the specified ID within the given list of tree items.
+ * @param items - The list of tree items to search through
+ * @param itemId - The ID of the tree item to find
+ * @returns The tree item with the matching ID, or undefined if not found
+ *
+ * @note Short-circuiting is used to avoid unnecessary searches once a match is found (compared to e.g., `flatMap()`)
  */
-const sortTreeNodes = (nodes, nodeIndex) => {
-    // Sort the top level nodes first. We sort by displayName because that's what the user sees
-    nodes.sort((a, b) => {
-        const aDisplayName = nodeIndex.get(a.id)?.displayName ?? a.label;
-        const bDisplayName = nodeIndex.get(b.id)?.displayName ?? b.label;
-        return aDisplayName.localeCompare(bDisplayName);
-    });
-    // Use a queue for breadth-first traversal to avoid recursion
-    const queue = [...nodes];
-    let index = 0;
-    // For each node in the queue, sort its children and add them to the end of the queue
-    while (index < queue.length) {
-        const node = queue[index];
-        index += 1;
-        if (node.children && node.children.length > 0) {
-            node.children.sort((a, b) => {
-                const aDisplayName = nodeIndex.get(a.id)?.displayName ?? a.label;
-                const bDisplayName = nodeIndex.get(b.id)?.displayName ?? b.label;
-                return aDisplayName.localeCompare(bDisplayName);
-            });
-            queue.push(...node.children);
+export const findTreeItemById = (items, itemId) => {
+    for (const item of items) {
+        if (item.id === itemId) {
+            return item;
+        }
+        const childMatch = item.children ? findTreeItemById(item.children, itemId) : undefined;
+        if (childMatch) {
+            return childMatch;
         }
     }
+    return undefined;
 };
 /**
- * Add a single AgentInfo entry into the tree structure
+ * Converts a raw agent name into a display name for the tree view, respecting the user's preference for native
+ * vs cleaned names.
+ * @param itemName - The raw agent name from the API
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @returns The display name to show in the tree view
+ */
+const toDisplayName = (itemName, useNativeNames) => useNativeNames ? itemName : cleanUpAgentName(removeTrailingUuid(itemName));
+/**
+ * Computes the display name for a network (leaf) node.
+ * @param label - The label to use for the tree item (usually derived from the agent name)
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @param displayNameOverride - For temporary networks, `label` is the raw reservation_id, which is canonicalized and
+ * may have lost the word separators (_/-) that cleanUpAgentName relies on. When provided (the temp network's
+ * agentNetworkName), it is used as the basis for the cleaned name instead of the path part.
+ * @returns The display name to show in the tree view
+ */
+const toLeafDisplayName = (label, useNativeNames, displayNameOverride) => {
+    // Native mode shows the raw agent name part, unmodified.
+    if (useNativeNames) {
+        return label;
+    }
+    const cleanedName = cleanUpAgentName(displayNameOverride ?? removeTrailingUuid(label));
+    return cleanedName;
+};
+/**
+ * Converts an AgentInfo object into a tree item model representing a network (leaf node).
+ * @param network - The AgentInfo object containing details about the network
+ * @param label - The label to use for the tree item (usually derived from the agent name)
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @param metadata - Additional metadata for the network tree item, such as icon suggestions and temporary network info
+ * @returns An AgentNetworkTreeItemModel representing the network as a leaf node in the tree
+ */
+const toNetworkLeaf = (network, label, useNativeNames, metadata = {}) => ({
+    id: network.agent_name,
+    label,
+    displayName: toLeafDisplayName(label, useNativeNames, metadata.displayNameOverride),
+    iconSuggestion: metadata.iconSuggestion,
+    isNetwork: true,
+    tags: network.tags,
+    temporaryNetworkExpirationTime: metadata.temporaryNetworkExpirationTime,
+    temporaryNetworkDefinition: metadata.temporaryNetworkDefinition,
+});
+/**
+ * Recursively sort tree nodes and their children by display name
+ * @param nodes - Array of tree nodes to sort
+ * @returns New array of tree nodes sorted by display name, with children also sorted
+ */
+const toSortedTreeNodes = (nodes) => [...nodes]
+    .sort((a, b) => a.displayName.localeCompare(b.displayName))
+    .map((node) => ({
+    ...node,
+    children: node.children ? toSortedTreeNodes(node.children) : undefined,
+}));
+/**
+ * Creates a tree item model representing a category (folder node) in the tree view.
+ * @param id - The unique ID for the folder node, typically derived from the category path
+ * @param label - The label to use for the tree item (usually derived from the category name)
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @returns An AgentNetworkTreeItemModel representing the category as a folder node in the tree
  */
-const addNetworkToTree = (network, result, uncategorized, map, nodeIndex, displayNameCounts) => {
+const toFolderNode = (id, label, useNativeNames) => ({
+    id,
+    label,
+    displayName: toDisplayName(label, useNativeNames),
+    isNetwork: false,
+    children: [],
+});
+/**
+ * Recursively adds a network to the categorized tree structure based on its agent name parts.
+ * @param nodes - The current list of tree nodes at this level of the hierarchy
+ * @param network - The AgentInfo object representing the network to add
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @param metadata - Additional metadata for the network tree item, such as icon suggestions and temporary network info
+ * @param parts - The parts of the agent name split by "/", used to determine the category hierarchy
+ * @param depth - The current depth in the category hierarchy, used to determine which part of the agent name to use
+ * for this level. For example, if the agent name is "category/subcategory/network", then at depth 0 we use "category",
+ * at depth 1 we use "subcategory", and at depth 2 we use "network".
+ */
+const withCategorizedNetworkAdded = (nodes, network, useNativeNames, metadata, parts, depth = 0) => {
+    const label = parts[depth];
+    // The node ID is constructed from the parts up to the current depth, analogous to a file path.
+    const nodeId = parts.slice(0, depth + 1).join("/");
+    // It's a network (leaf node) if we're at the last part of the agent name, otherwise it's a category (folder node)
+    const isNetwork = depth === parts.length - 1;
+    // Check if a node with this ID already exists at the current level
+    const existingIndex = nodes.findIndex((node) => node.id === nodeId);
+    // If it's a network, we create a leaf node. If it's a category, we either create a new folder node or
+    // update the existing one with the new child.
+    const nextNode = isNetwork
+        ? toNetworkLeaf(network, label, useNativeNames, metadata)
+        : {
+            ...(existingIndex >= 0 ? nodes[existingIndex] : toFolderNode(nodeId, label, useNativeNames)),
+            children: withCategorizedNetworkAdded(existingIndex >= 0 ? (nodes[existingIndex].children ?? []) : [], network, useNativeNames, metadata, parts, depth + 1),
+        };
+    // If the node doesn't already exist, we add it to the list. If it does exist, we replace it with the updated node.
+    if (existingIndex < 0) {
+        return [...nodes, nextNode];
+    }
+    // Return a new array with the existing node replaced by the updated node
+    return nodes.map((node, index) => (index === existingIndex ? nextNode : node));
+};
+/**
+ * Adds a network to the tree build state, either as an uncategorized item if its agent name has no "/"
+ * or as a categorized item
+ * @param state - The current state of the tree build, containing categorized and uncategorized items
+ * @param network - The AgentInfo object representing the network to add to the tree
+ * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @param metadata - Additional metadata for the network tree item, such as icon suggestions and temporary network info
+ */
+const withNetworkAdded = (state, network, useNativeNames, metadata) => {
+    // Split the agent name into parts based on "/", which indicates category hierarchy. For example, an agent name
     const parts = network.agent_name.split("/");
-    // If there's only one part, it means this network isn't in any folder, so we add it directly under "Uncategorized"
+    // If there are no "/" in the agent name, we consider it uncategorized and add it to the uncategorized items list.
     if (parts.length === 1) {
-        uncategorized.children.push({ id: network.agent_name, label: network.agent_name, children: [] });
-        nodeIndex.set(network.agent_name, { agentInfo: network, displayName: cleanUpAgentName(network.agent_name) });
-    }
-    else {
-        // Otherwise, we need to build out the tree structure based on the parts of the agent_name. Some paths might
-        // already exist if we've processed another network that shares the same parent folders,
-        // so we check the map to avoid duplicating nodes.
-        let currentLevel = result;
-        parts.forEach((part, index) => {
-            // Build the full path ID by joining all parts up to the current position
-            const nodeId = parts.slice(0, index + 1).join("/");
-            let node = map.get(nodeId);
-            if (!node) {
-                // If we haven't created a node for this path yet, create it and add it to the map
-                node = { id: nodeId, label: part, children: [] };
-                map.set(nodeId, node);
-                if (index === parts.length - 1) {
-                    const cleanedName = cleanUpAgentName(removeTrailingUuid(part));
-                    // Handle duplicate display names by appending a number (e.g. "macys", "macys 2", "macys 3", etc.)
-                    const count = displayNameCounts.get(cleanedName) || 0;
-                    displayNameCounts.set(cleanedName, count + 1);
-                    const displayName = count > 0 ? `${cleanedName} ${count + 1}` : cleanedName;
-                    // Add the AgentInfo to the nodeIndex for quick lookup later, using the full path as the key
-                    nodeIndex.set(nodeId, { agentInfo: network, displayName });
-                }
-                // If this is a top-level node (index 0), add it directly to the result.
-                // Otherwise, find its parent and add it there.
-                if (index === 0) {
-                    // Top-level node, add directly to result
-                    currentLevel.push(node);
-                }
-                else {
-                    // Not a top-level node, find parent and add to its children
-                    const parentId = parts.slice(0, index).join("/");
-                    const parentNode = map.get(parentId);
-                    if (parentNode) {
-                        parentNode.children.push(node);
-                    }
-                }
-            }
-            // Move down to the next level of the tree for the next iteration
-            currentLevel = node.children;
-        });
+        return {
+            ...state,
+            uncategorizedItems: [
+                ...state.uncategorizedItems,
+                toNetworkLeaf(network, network.agent_name, useNativeNames, metadata),
+            ],
+        };
     }
+    // Return the updated state with the network added to the categorized items
+    return {
+        ...state,
+        categorizedItems: withCategorizedNetworkAdded(state.categorizedItems, network, useNativeNames, metadata, parts),
+    };
 };
 /**
  * Build a tree view structure from a flat list of networks.
  * The list of networks comes from a call to the Neuro-san /list API
- * 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 {@linkcode TreeViewDefaultItemModelProperties} objects representing the tree structure and an
- * index for rapid access
+ * The tree structure is used by the RichTreeView component to display the networks.
+ *
+ * @param useNativeNames - Whether to use the raw agent names from the API or to clean them up for display.
+ * @param regularNetworks - Array of networks from the Neuro-san /list API
+ * @param temporaryNetworks - Array of temporary networks (e.g., ones recently created by the user)
+ * @param iconSuggestions
+ * @returns Array of {@linkcode AgentNetworkTreeItemModel} objects representing the tree structure
  */
-export const buildTreeViewItems = (networks, temporaryNetworks) => {
-    // Map to keep track of created nodes in a tree structure
-    const treeBuilderMap = new Map();
-    // Index to quickly look up AgentInfo by node ID without having to traverse the tree
-    const nodeIndex = new Map();
-    // 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: [],
+export const buildTreeViewItems = (useNativeNames, regularNetworks = [], temporaryNetworks = [], iconSuggestions = {}) => {
+    let tree = {
+        categorizedItems: [],
+        uncategorizedItems: [],
     };
-    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
-    // structure from that.
-    networks.forEach((network) => addNetworkToTree(network, treeViewItems, uncategorized, treeBuilderMap, nodeIndex, displayNameCounts));
-    // Now handle temporary networks
-    temporaryNetworks?.forEach((temporaryNetwork) => addNetworkToTree(temporaryNetwork.agentInfo, treeViewItems, uncategorized, treeBuilderMap, nodeIndex, displayNameCounts));
-    // Add "Uncategorized" to the result if there are any such networks
-    if (uncategorized.children.length > 0) {
-        treeViewItems.push(uncategorized);
+    for (const network of regularNetworks) {
+        tree = withNetworkAdded(tree, network, useNativeNames, {
+            iconSuggestion: iconSuggestions[network.agent_name],
+        });
+    }
+    for (const temporaryNetwork of temporaryNetworks) {
+        tree = withNetworkAdded(tree, temporaryNetwork.agentInfo, useNativeNames, {
+            iconSuggestion: "HourglassTop",
+            temporaryNetworkExpirationTime: new Date(temporaryNetwork.reservation.expiration_time_in_seconds * 1000),
+            // The structured definition is carried through and serialized at download time (it's the same shape
+            // the import modal reads back in).
+            temporaryNetworkDefinition: temporaryNetwork.agentNetworkDefinition,
+            displayNameOverride: temporaryNetwork.agentNetworkName,
+        });
     }
-    // Sort all nodes in the tree
-    sortTreeNodes(treeViewItems, nodeIndex);
-    return { treeViewItems, nodeIndex };
+    const treeViewItems = tree.uncategorizedItems.length > 0
+        ? [
+            ...tree.categorizedItems,
+            {
+                id: "uncategorized",
+                label: "uncategorized",
+                displayName: toDisplayName("uncategorized", useNativeNames),
+                isNetwork: false,
+                children: tree.uncategorizedItems,
+            },
+        ]
+        : tree.categorizedItems;
+    return toSortedTreeNodes(treeViewItems);
 };

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

@@ -62,3 +62,25 @@ export declare const isTemporaryNetwork: (agentName: string | null, networks: Te
  * Returns a new array; does not mutate either argument.
  */
 export declare const mergeNetworks: (target: TemporaryNetwork[], incoming: TemporaryNetwork[]) => TemporaryNetwork[];
+/** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
+export declare const notifySaveError: (agentName: string, e: unknown) => void;
+/**
+ * Streams a network definition through the network designer, collecting the
+ * reservations returned across every chunk. Returns the accumulated networks
+ * (empty if the designer returned no reservation).
+ */
+export declare const streamNetworkDesignerUpsert: (neuroSanURL: string, signal: AbortSignal, frontman: string, networkDef: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, username: string) => Promise<TemporaryNetwork[]>;
+/** Reasons an import can fail before its networks reach the store. */
+export type ImportFailureReason = "invalid-definition" | "no-reservation";
+export type ImportNetworkResult = {
+    networks: TemporaryNetwork[];
+} | {
+    failure: ImportFailureReason;
+};
+export declare const IMPORT_FAILURE_DETAIL: Record<ImportFailureReason, string>;
+/**
+ * Converts imported JSON into a network definition and streams it through the
+ * network designer to obtain reservations. Returns the resulting networks, or a
+ * failure reason if the content is not a valid definition or no reservation is returned.
+ */
+export declare const importNetworkFromJson: (content: string, agentNetworkName: string, neuroSanURL: string, username: string) => Promise<ImportNetworkResult>;

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,10 @@
+import { getFrontman } from "./AgentFlow/GraphStructure.js";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, DisplayAs, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
+import { jsonToNetworkDefinition } from "./Sidebar/ImportNetworkModal.js";
+import { sendNetworkDesignerRequest } from "../../controller/agent/Agent.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-import { removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { chatMessageFromChunk, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { NotificationType, sendNotification } from "../Common/notification.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
@@ -44,7 +48,11 @@ export const extractNetworkHocon = (message) => {
  * @returns List of TemporaryNetwork objects ready for the store.
  */
 export const convertReservationsToNetworks = (agentReservations, networkHocon, agentNetworkDefinition, agentNetworkName) => {
-    return agentReservations.map((reservation) => ({
+    return (agentReservations
+        // reservation_id is typed as required but is echoed from un-vetted backend data; skip entries
+        // missing it rather than build a "temporary/undefined" network.
+        .filter((reservation) => Boolean(reservation?.reservation_id))
+        .map((reservation) => ({
         reservation,
         agentInfo: {
             agent_name: `${TEMPORARY_NETWORK_FOLDER}/${reservation.reservation_id}`,
@@ -54,7 +62,7 @@ export const convertReservationsToNetworks = (agentReservations, networkHocon, a
         agentNetworkName: agentNetworkName ?? removeTrailingUuid(reservation.reservation_id),
         networkHocon,
         agentNetworkDefinition,
-    }));
+    })));
 };
 export const isEditableAgent = (displayAs) => displayAs === DisplayAs.LLM_AGENT;
 /**
@@ -93,3 +101,66 @@ export const mergeNetworks = (target, incoming) => incoming.reduce((result, n) =
     }
     return result;
 }, [...target]);
+/**
+ * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
+ * Returns `accumulated` unchanged if the chunk yields no reservations or on parse error.
+ */
+const collectNetworksFromChunk = (chunk, updated, accumulated) => {
+    try {
+        const chatMessage = chatMessageFromChunk(chunk);
+        if (!chatMessage)
+            return accumulated;
+        // Always use the user's edited definition as the authoritative value.
+        const converted = extractTemporaryNetworksFromMessage(chatMessage, updated);
+        if (converted.length === 0)
+            return accumulated;
+        return mergeNetworks(accumulated, converted);
+    }
+    catch (e) {
+        console.warn("Failed to process chunk from network designer:", e);
+        return accumulated;
+    }
+};
+/** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
+export const notifySaveError = (agentName, e) => {
+    if (e instanceof DOMException && e.name === "AbortError")
+        return;
+    console.error("Failed to submit agent network update:", e);
+    const detail = e instanceof DOMException && e.name === "TimeoutError"
+        ? "The request timed out waiting for the server. Please try again."
+        : String(e);
+    sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, detail);
+};
+/**
+ * Streams a network definition through the network designer, collecting the
+ * reservations returned across every chunk. Returns the accumulated networks
+ * (empty if the designer returned no reservation).
+ */
+export const streamNetworkDesignerUpsert = async (neuroSanURL, signal, frontman, networkDef, agentNetworkName, username) => {
+    let newNetworks = [];
+    await sendNetworkDesignerRequest(neuroSanURL, signal, frontman, networkDef, agentNetworkName, username, (chunk) => {
+        newNetworks = collectNetworksFromChunk(chunk, networkDef, newNetworks);
+    });
+    return newNetworks;
+};
+export const IMPORT_FAILURE_DETAIL = {
+    "invalid-definition": "The file does not contain a valid network definition.",
+    "no-reservation": "The network designer did not return a reservation. Please try again.",
+};
+/**
+ * Converts imported JSON into a network definition and streams it through the
+ * network designer to obtain reservations. Returns the resulting networks, or a
+ * failure reason if the content is not a valid definition or no reservation is returned.
+ */
+export const importNetworkFromJson = async (content, agentNetworkName, neuroSanURL, username) => {
+    const networkDef = jsonToNetworkDefinition(JSON.parse(content));
+    if (networkDef.length === 0) {
+        return { failure: "invalid-definition" };
+    }
+    const frontman = getFrontman(networkDef)?.origin ?? networkDef[0]?.origin ?? "agent";
+    const networks = await streamNetworkDesignerUpsert(neuroSanURL, new AbortController().signal, frontman, networkDef, agentNetworkName, username);
+    if (networks.length === 0) {
+        return { failure: "no-reservation" };
+    }
+    return { networks };
+};

package/dist/components/MultiAgentAccelerator/{ThoughtBubbleEdge.d.ts → ThoughtBubbles/ThoughtBubbleEdge.d.ts}

@@ -1,6 +1,6 @@
 import { Edge, EdgeProps } from "@xyflow/react";
 import { FC } from "react";
-import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 interface ThoughtBubbleEdgeData extends Record<string, unknown> {
     text?: string;
     showAlways?: boolean;

package/dist/components/MultiAgentAccelerator/{ThoughtBubbleOverlay.js → ThoughtBubbles/ThoughtBubbleOverlay.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // #endregion: Types
 // #region: Constants
 const BUBBLE_DISTANCE_FROM_RIGHT_EDGE = 20; // Fixed distance from right edge

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

@@ -24,13 +24,15 @@ export const MAIN_TOUR_STEPS = [
         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"),
+        content: "This indicator shows the online status of the Neuro SAN backend service. " +
+            "Mouse over it to see the current server URL, status, version, and any error details.",
+        target: () => document.querySelector("#multi-agent-accelerator-sidebar-agent-network-status-light"),
         placement: "bottom",
     },
     {
-        content: "These are the agents within the current network.",
+        content: "These are the agents within the current network. The arrows show the flow of information between " +
+            "them and the tools used by each agent. For networks you have created, you can click on an agent " +
+            "to edit it",
         target: () => document.querySelector("#multi-agent-accelerator-grid-agent-flow"),
         placement: "auto",
     },
@@ -61,14 +63,19 @@ export const MAIN_TOUR_STEPS = [
         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"),
+        content: "Click this button to display a menu that allows you to choose how content is displayed in the chat window",
+        target: () => document.querySelector("#agent-network-ui-options-menu-button-container"),
+        placement: "bottom",
+    },
+    {
+        content: "This button allows you to download the chat with this agent, including history, as a plain text file.",
+        target: () => document.querySelector("#save-chat-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!",
+            "auto branding for a particular customer, enter API keys for providers like OpenAI and Anthropic, and " +
+            "configure the URL used to access Neuro SAN services!",
         target: () => document.querySelector("#settings-icon"),
         placement: "top",
     },

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

@@ -26,3 +26,6 @@ export declare enum DisplayAs {
     LANGCHAIN_TOOL = "langchain_tool",
     EXTERNAL_AGENT = "external_agent"
 }
+export declare const GRACE_PERIOD_MS: number;
+export declare const SHOW_TOUR_DELAY_MS = 5000;
+export declare const EXPIRED_NETWORKS_CHECK_INTERVAL_MS: number;

package/dist/components/MultiAgentAccelerator/const.js

@@ -45,3 +45,9 @@ export var DisplayAs;
     DisplayAs["LANGCHAIN_TOOL"] = "langchain_tool";
     DisplayAs["EXTERNAL_AGENT"] = "external_agent";
 })(DisplayAs || (DisplayAs = {}));
+// 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
+// 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;
+// Check for expired networks every this many milliseconds
+export const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;

package/dist/components/Settings/ApiKeyInput.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
-import ErrorIcon from "@mui/icons-material/Error";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Box from "@mui/material/Box";
@@ -13,6 +11,7 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import { useEffect, useState } from "react";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
+import { StatusLight } from "../Common/StatusLight.js";
 /**
  * Component for inputting an API key for a given vendor, with the ability to test the key and forget the saved key.
  */
@@ -43,6 +42,10 @@ export const ApiKeyInput = ({ forgetKey, id, logo, onSave, onTest, persistedValu
         setInputValue(persistedValue ?? "");
         setKeyValidated(null);
     }, [persistedValue]);
+    const handleClearInput = () => {
+        setInputValue("");
+        setKeyValidated(null);
+    };
     return (_jsxs(Box, { "data-testid": `${id}-input`, sx: { display: "flex", alignItems: "center", width: "100%", gap: 2 }, children: [confirmationDialogOpen ? (_jsx(ConfirmationModal, { id: `${id}-forget-key-confirmation-modal`, content: `This will forget the currently saved API key for ${vendor} and you will need to enter ` +
                     " the key again to use networks that require it. Are you sure you want to continue?", handleCancel: () => {
                     setConfirmationDialogOpen(false);
@@ -58,13 +61,9 @@ export const ApiKeyInput = ({ forgetKey, id, logo, onSave, onTest, persistedValu
                     justifyContent: "center",
                 }, children: _jsx("img", { src: logo, alt: `${vendor} logo`, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }) }), _jsx(FormLabel, { id: `${id}-label`, sx: { width: 90, flexShrink: 0 }, children: vendor }), _jsx(TextField, { "aria-labelledby": `${id}-label`, autoComplete: "off", onChange: handleValueChange, placeholder: placeholder, size: "small", slotProps: {
                     input: {
-                        endAdornment: (_jsxs(InputAdornment, { position: "end", children: [_jsx(Tooltip, { title: showKey ? "Hide API key" : "Show API key", children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "toggle key visibility", disabled: !inputValue, onClick: () => setShowKey(!showKey), onMouseDown: (e) => e.preventDefault(), size: "small", children: showKey ? (_jsx(VisibilityOff, { fontSize: "small" })) : (_jsx(Visibility, { fontSize: "small" })) }) }) }), _jsx(IconButton, { "aria-label": "Clear input", edge: "end", onClick: () => setInputValue(""), size: "small", children: _jsx(ClearIcon, { fontSize: "small" }) })] })),
+                        endAdornment: (_jsxs(InputAdornment, { position: "end", children: [_jsx(Tooltip, { title: showKey ? "Hide API key" : "Show API key", children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "toggle key visibility", disabled: !inputValue, onClick: () => setShowKey(!showKey), onMouseDown: (e) => e.preventDefault(), size: "small", children: showKey ? (_jsx(VisibilityOff, { fontSize: "small" })) : (_jsx(Visibility, { fontSize: "small" })) }) }) }), _jsx(IconButton, { "aria-label": "Clear input", edge: "end", onClick: handleClearInput, size: "small", children: _jsx(ClearIcon, { fontSize: "small" }) })] })),
                     },
                 }, sx: { flex: 1 }, 
                 // Type depends on whether we're showing or hiding the key
-                type: showKey ? "text" : "password", value: inputValue, variant: "outlined" }), _jsx(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    color: (theme) => (keyValidated ? theme.palette.success.main : theme.palette.error.main),
-                }, children: keyValidated === null ? null : keyValidated ? (_jsx(CheckIcon, { fontSize: "small" })) : (_jsx(ErrorIcon, { fontSize: "small" })) }), _jsx(Button, { disabled: disableActions, loading: isValidating, onClick: handleOnTest, size: "small", variant: "contained", children: "Test" }), _jsx(Button, { onClick: () => onSave(inputValue), size: "small", variant: "contained", disabled: disableActions, children: "Save" }), _jsx(Button, { onClick: () => setConfirmationDialogOpen(true), size: "small", variant: "contained", disabled: !persistedValue || isValidating, children: "Forget" })] }));
+                type: showKey ? "text" : "password", value: inputValue, variant: "outlined" }), _jsx(StatusLight, { id: `${id}-status-light`, statusValue: keyValidated === null ? "unknown" : keyValidated ? "green" : "red" }), _jsx(Button, { disabled: disableActions, loading: isValidating, onClick: handleOnTest, size: "small", variant: "contained", children: "Test" }), _jsx(Button, { onClick: () => onSave(inputValue), size: "small", variant: "contained", disabled: disableActions, children: "Save" }), _jsx(Button, { onClick: () => setConfirmationDialogOpen(true), size: "small", variant: "contained", disabled: !persistedValue || isValidating, children: "Forget" })] }));
 };

package/dist/components/Settings/InfoTip.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+/**
+ * Simple wrapper around MUI's Tooltip that displays an info icon which, when hovered, shows the provided title.
+ * @param props Object containing the title to be displayed in the tooltip.
+ */
+export default function InfoTip(props: {
+    title: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Settings/InfoTip.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import Tooltip from "@mui/material/Tooltip";
+/**
+ * Simple wrapper around MUI's Tooltip that displays an info icon which, when hovered, shows the provided title.
+ * @param props Object containing the title to be displayed in the tooltip.
+ */
+export default function InfoTip(props) {
+    return (_jsx(Tooltip, { title: props.title, children: _jsx(InfoOutlinedIcon, { "aria-label": "setting information", fontSize: "small", sx: {
+                color: "primary.main",
+                cursor: "help",
+                fontSize: "0.9rem",
+            } }) }));
+}