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

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

@@ -1,119 +1,176 @@
 import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
+//#endregion
 /**
- * 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));
+/**
+ * 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: toDisplayName(label, useNativeNames),
+    iconSuggestion: metadata.iconSuggestion,
+    isNetwork: true,
+    tags: network.tags,
+    temporaryNetworkExpirationTime: metadata.temporaryNetworkExpirationTime,
+    temporaryNetworkHocon: metadata.temporaryNetworkHocon,
+});
+/**
+ * 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 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 addNetworkToTree = (network, result, uncategorized, map, nodeIndex, displayNameCounts) => {
+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),
+            temporaryNetworkHocon: temporaryNetwork.networkHocon,
+        });
     }
-    // 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/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,14 @@ 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: "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,5 @@ 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;

package/dist/components/MultiAgentAccelerator/const.js

@@ -45,3 +45,7 @@ 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;

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+interface ApiKeyInputProps {
+    readonly forgetKey: () => void;
+    readonly id: string;
+    readonly logo: string;
+    readonly onSave: (key: string) => void;
+    readonly onTest: (key: string) => Promise<boolean>;
+    readonly persistedValue: string;
+    readonly placeholder: string;
+    readonly vendor: string;
+}
+/**
+ * Component for inputting an API key for a given vendor, with the ability to test the key and forget the saved key.
+ */
+export declare const ApiKeyInput: FC<ApiKeyInputProps>;
+export {};

package/dist/components/Settings/ApiKeyInput.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ClearIcon from "@mui/icons-material/Clear";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormLabel from "@mui/material/FormLabel";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+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.
+ */
+export const ApiKeyInput = ({ forgetKey, id, logo, onSave, onTest, persistedValue, placeholder, vendor, }) => {
+    const [inputValue, setInputValue] = useState(persistedValue ?? "");
+    const [keyValidated, setKeyValidated] = useState(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+    const [showKey, setShowKey] = useState(false);
+    const handleValueChange = (e) => {
+        setKeyValidated(null);
+        setInputValue(e.target.value);
+    };
+    const handleOnTest = async () => {
+        setIsValidating(true);
+        setKeyValidated(null);
+        try {
+            const isValid = await onTest(inputValue);
+            setKeyValidated(isValid);
+        }
+        finally {
+            setIsValidating(false);
+        }
+    };
+    const disableActions = !inputValue || inputValue === persistedValue || isValidating;
+    // Sync with persisted value changes - if the persisted value changes from outside
+    useEffect(() => {
+        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);
+                }, handleOk: () => {
+                    setConfirmationDialogOpen(false);
+                    setInputValue("");
+                    forgetKey();
+                }, okBtnLabel: "Yes, forget key", title: `Forget ${vendor} API key?` })) : null, _jsx(Box, { sx: {
+                    width: 25,
+                    height: 25,
+                    display: "flex",
+                    alignItems: "center",
+                    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: 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(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",
+            } }) }));
+}