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

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -19,6 +19,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
 import { useTheme } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -27,18 +28,18 @@ import { extractConversations } from "./AgentConversations.js";
 import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
 import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, GRACE_PERIOD_MS, SHOW_TOUR_DELAY_MS, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
 import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, mergeNetworks } from "./TemporaryNetworks.js";
-import { getAgentFunction, getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { getAgentFunction, getAgentNetworks, getConnectivity, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { getAgentIconSuggestions, getNetworkIconSuggestions } from "../../controller/agent/IconSuggestions.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { TourPromptState, useTourStore } from "../../state/Tour.js";
-import { useLocalStorage } from "../../utils/useLocalStorage.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
-import { SmallLlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
+import { LlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
 import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
 import { ConfirmationModal, StyledButton } from "../Common/ConfirmationModal.js";
@@ -47,14 +48,10 @@ import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
 // Check for expired networks every this many milliseconds
 const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
-// Display expired temporary networks for this amount of time after they expire so users can see what happened
-export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
 // Animation time for the left and right panels to slide in or out when launching the animation
 const GROW_ANIMATION_TIME_MS = 800;
 // Optimization to avoid creating a new empty map on every render
 const EMPTY_THOUGHT_BUBBLE_EDGES = new Map();
-// We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
-export const SHOW_TOUR_DELAY_MS = 5000;
 // #region: Agent-save helpers
 /**
  * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
@@ -76,7 +73,7 @@ const collectNetworksFromChunk = (chunk, updated, accumulated) => {
         return accumulated;
     }
 };
-/** Logs and notifies about a save error. Suppresses AbortError (user-cancelled). */
+/** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
 const notifySaveError = (agentName, e) => {
     if (e instanceof DOMException && e.name === "AbortError")
         return;
@@ -90,13 +87,15 @@ const notifySaveError = (agentName, e) => {
 /**
  * Main Multi-Agent Accelerator component that contains the sidebar, agent flow, and chat components.
  * @param backendNeuroSanApiUrl Initial URL of the backend Neuro-San API. User can change this in the UI.
- * @param darkMode Whether dark mode is enabled.
- * @param userInfo Information about the current user, including userName and userImage.
+ * @param username Identifier to use for interactions with the backend (for personalization and tracking).
  */
-export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
+export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // MUI theme
     const theme = useTheme();
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
+    const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const [isEditingNetwork, setIsEditingNetwork] = useState(false);
@@ -117,13 +116,12 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
-    const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
-    const [customURLLocalStorage, setCustomURLLocalStorage] = useLocalStorage("customAgentNetworkURL", null);
-    // An extra set of quotes is making it in the string in local storage.
-    const [neuroSanURL, setNeuroSanURL] = useState(customURLLocalStorage?.replaceAll('"', "") || backendNeuroSanApiUrl);
+    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
+    const [providerKeysRequired, setProviderKeysRequired] = useState(new Set());
+    const neuroSanURL = useSettingsStore((state) => state.settings.externalServices.neuroSanUrl) ?? defaultNeuroSanUrl;
     // Tracks how many times each agent has been involved in the conversation
     const [agentCounts, setAgentCounts] = useState(new Map());
-    //common function to change the selected network and reset related state
+    // Common function to change the selected network and reset related state
     const changeSelectedNetwork = useCallback((next) => {
         setSelectedNetwork(next);
         setAgentCounts(new Map());
@@ -136,10 +134,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const [tourModalOpen, setTourModalOpen] = useState(false);
     const [haveShownTourModal, setHaveShownTourModal] = useState(false);
-    const customURLCallback = useCallback((url) => {
-        setNeuroSanURL(url || backendNeuroSanApiUrl);
-        setCustomURLLocalStorage(url === "" ? null : url);
-    }, [backendNeuroSanApiUrl, setCustomURLLocalStorage]);
     // Memoized key for agent names to trigger icon suggestion updates when the set of agents changes, not just
     // when sorting/other operations on the agents list
     const agentNamesKey = useMemo(() => agentsInNetwork
@@ -203,23 +197,62 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const designerTempNetwork = designerNetworkName
         ? temporaryNetworks.find((n) => n.agentNetworkName === designerNetworkName)
         : undefined;
-    const extraSlyData = currentTempNetwork
+    /**
+     * Builds the API keys object to be sent as extraSlyData with each request, based on the LLM providers required
+     * by the currently selected network. Only includes keys for providers that are required.
+     */
+    const getApiKeys = () => {
+        const llmConfig = {};
+        if (providerKeysRequired.has("OpenAI")) {
+            llmConfig["openai_api_key"] = apiKeys["OpenAI"];
+        }
+        if (providerKeysRequired.has("Anthropic")) {
+            llmConfig["anthropic_api_key"] = apiKeys["Anthropic"];
+        }
+        return { llm_config: llmConfig };
+    };
+    /**
+     * Builds the extraSlyData object to be sent with each request, including information for Agent Network Designer
+     * and (if required) API keys for LLM providers.
+     */
+    const buildExtraSlyData = () => {
+        if (currentTempNetwork) {
+            const result = {
+                [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
+            };
+            // Use agentNetworkName, not reservation_id
+            if (currentTempNetwork.agentNetworkName) {
+                result[AGENT_NETWORK_NAME_KEY] = currentTempNetwork.agentNetworkName;
+            }
+            if (currentTempNetwork.networkHocon) {
+                result[AGENT_NETWORK_HOCON] = currentTempNetwork.networkHocon;
+            }
+            return result;
+        }
+        if (designerTempNetwork) {
+            return {
+                [AGENT_NETWORK_DEFINITION_KEY]: designerTempNetwork.agentNetworkDefinition,
+            };
+        }
+        return undefined;
+    };
+    // Whether any API keys are required
+    const anyApiKeysRequired = providerKeysRequired.size > 0;
+    // Build base extraSlyData
+    const baseExtraSlyData = buildExtraSlyData();
+    // Add API keys to extraSlyData if needed, merging with baseExtraSlyData if it exists
+    const extraSlyData = anyApiKeysRequired || baseExtraSlyData
         ? {
-            [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
-            // Use the agentNetworkName, not reservation_id
-            ...(currentTempNetwork.agentNetworkName
-                ? { [AGENT_NETWORK_NAME_KEY]: currentTempNetwork.agentNetworkName }
-                : {}),
-            ...(currentTempNetwork.networkHocon ? { [AGENT_NETWORK_HOCON]: currentTempNetwork.networkHocon } : {}),
+            ...baseExtraSlyData,
+            ...(anyApiKeysRequired ? getApiKeys() : {}),
         }
-        : designerTempNetwork
-            ? { [AGENT_NETWORK_DEFINITION_KEY]: designerTempNetwork.agentNetworkDefinition }
-            : undefined;
+        : undefined;
     // Handle external stop button click - stops streaming and exits zen mode
     const handleExternalStop = useCallback(() => {
         chatRef.current?.handleStop();
         resetState();
     }, [resetState]);
+    const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
     useEffect(() => {
         ;
         (async () => {
@@ -240,11 +273,26 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         const fetchAgentDetails = async () => {
             // It is a Neuro-san agent, so get the function and connectivity info
             try {
-                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, userInfo.userName);
+                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, username);
                 setNetworkDescription(agentFunction?.function?.description || "");
+                const schema = agentFunction?.function?.sly_data_schema;
+                const schemaProperties = isRecord(schema) ? schema["properties"] : undefined;
+                const llmConfig = isRecord(schemaProperties) ? schemaProperties["llm_config"] : undefined;
+                const llmConfigRequired = isRecord(llmConfig) ? llmConfig["required"] : undefined;
+                setProviderKeysRequired(new Set((Array.isArray(llmConfigRequired) ? llmConfigRequired : []).flatMap((key) => {
+                    if (key === "openai_api_key") {
+                        return ["OpenAI"];
+                    }
+                    if (key === "anthropic_api_key") {
+                        return ["Anthropic"];
+                    }
+                    console.warn(`Unknown API key requirement "${key}" for network ${selectedNetwork}. Skipping.`);
+                    // Will get dropped by flatMap
+                    return [];
+                })));
             }
-            catch {
-                // Ignore. May be a legacy agent without a functional description in Neuro-san.
+            catch (e) {
+                console.warn(`Unable to get agent details for network ${selectedNetwork}:`, e);
             }
         };
         // Clear out existing
@@ -252,7 +300,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
             void fetchAgentDetails();
         }
-    }, [neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -273,7 +321,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         (async () => {
             if (selectedNetwork) {
                 try {
-                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, userInfo.userName);
+                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, username);
                     const agentsInNetworkSorted = [...connectivity.connectivity_info].sort((a, b) => a?.origin.localeCompare(b?.origin));
                     setAgentsInNetwork(agentsInNetworkSorted);
                     const sampleQueriesTmp = connectivity?.metadata?.["sample_queries"];
@@ -296,7 +344,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setAgentsInNetwork([]);
             }
         })();
-    }, [networkDisplayName, neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [networkDisplayName, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -419,7 +467,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const onSaveAgent = useCallback(async (agentName, updated, agentNetworkName, signal) => {
         try {
             let newNetworks = [];
-            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, userInfo.userName, (chunk) => {
+            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, username, (chunk) => {
                 newNetworks = collectNetworksFromChunk(chunk, updated, newNetworks);
             });
             if (newNetworks.length === 0) {
@@ -443,7 +491,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         catch (e) {
             notifySaveError(agentName, e);
         }
-    }, [neuroSanURL, userInfo.userName, selectedNetwork]);
+    }, [neuroSanURL, username, selectedNetwork]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
         setAgentCounts(new Map());
@@ -506,12 +554,15 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             setTourRequested(false);
         }
     }, [tourRequested, selectedNetwork, agentsInNetwork, networks, controls, setTourStatus]);
+    const getMissingApiKeys = () => {
+        return providerKeysRequired.size > 0 ? [...providerKeysRequired].filter((provider) => !apiKeys?.[provider]) : [];
+    };
     const getLeftPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !enableZenMode || !isAwaitingLlm, direction: "right", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: enableZenMode && isStreaming ? 0 : 3.25, sx: {
                     height: "100%",
-                }, children: _jsx(Sidebar, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onEditNetwork: handleEditNetwork, onDeleteNetwork: handleDeleteNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
+                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
         return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
@@ -524,26 +575,30 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                         height: "100%",
                         maxWidth: 1000,
                         margin: "0 auto",
-                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: userInfo.userName, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: selectedNetwork || undefined, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: username, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: networkDisplayName || "", networkId: isSelectedNetworkTemporary ? selectedNetwork : "", neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
     };
     const getRightPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-agent-chat-common", size: enableZenMode && isStreaming ? 0 : 6.5, sx: {
                     height: "100%",
-                }, children: _jsx(ChatCommon, { customAgentGreetings: {
-                        [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
-                    }, agentPlaceholders: {
+                }, children: _jsx(ChatCommon, { agentPlaceholders: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
-                    }, currentUser: userInfo.userName, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, targetAgent: selectedNetwork, userImage: userInfo.userImage }, selectedNetwork ?? "no-network") }) }));
+                    }, currentUser: username, customAgentGreetings: {
+                        [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
+                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, missingApiKeys: getMissingApiKeys(), networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork, setSelectedNetwork: changeSelectedNetwork }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_jsx(Box, { id: "stop-button-container", sx: {
                     position: "absolute",
                     bottom: "1rem",
                     right: "1rem",
-                    zIndex: 10,
-                }, children: _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: handleExternalStop, posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) }) })) }));
+                    zIndex: getZIndex(2, theme),
+                }, children: _jsx(Tooltip, { title: "Stop response (Esc)", children: _jsx(LlmChatButton, { "aria-label": "Stop", id: "stop-output-button", onClick: handleExternalStop, sx: {
+                            "&:hover": {
+                                backgroundColor: "error.main",
+                            },
+                        }, children: _jsx(StopCircle, { fontSize: "large", id: "stop-button-icon" }) }) }) })) }));
     };
     const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
             "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {

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

@@ -1,13 +1,8 @@
 import { TreeItemProps } from "@mui/x-tree-view/TreeItem";
 import { FC } from "react";
-import { NodeIndex } from "./TreeBuilder.js";
 export interface AgentNetworkNodeProps extends TreeItemProps {
-    readonly nodeIndex: NodeIndex;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly onEditNetwork?: (network: string) => void;
-    readonly networkIconSuggestions: Record<string, string>;
-    readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
-    readonly temporaryNetworkHoconStrings?: Record<string, string | null>;
 }
 /**
  * Custom Tree Item for MUI RichTreeView to display agent networks with tags

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

@@ -9,14 +9,13 @@ import Edit from "@mui/icons-material/Edit";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import IconButton from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
+import { useTreeItemModel } from "@mui/x-tree-view/hooks";
 import { TreeItemContent, TreeItemGroupTransition, TreeItemLabel, TreeItemRoot, } from "@mui/x-tree-view/TreeItem";
 import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
 import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
 import { useRef } from "react";
 import { downloadFile, toSafeFilename } from "../../../utils/File.js";
-import { cleanUpAgentName } from "../../AgentChat/Common/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -44,21 +43,15 @@ const isTemporaryNetworkExpired = (expirationDate) => {
  * @param props - see AgentNetworkNode interface
  * @returns JSX.Element containing the custom tree item
  */
-export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, onEditNetwork, temporaryNetworkExpirationTimes, temporaryNetworkHoconStrings, }) => {
-    const theme = useTheme();
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDeleteNetwork, onEditNetwork, }) => {
+    const item = useTreeItemModel(itemId);
     // We know all labels are strings because we set them that way in the tree view items
     const labelString = label;
-    const displayLabel = nodeIndex.get(itemId)?.displayName || cleanUpAgentName(labelString);
     const { getContextProviderProps, getRootProps, getContentProps, getLabelProps, getGroupTransitionProps } = useTreeItem({ itemId, children, label, disabled });
     const rootRef = useRef(null);
     const isParent = Array.isArray(children) && children.length > 0;
     const isChild = !isParent;
-    const agentNode = nodeIndex?.get(itemId)?.agentInfo;
-    // Only child items (the actual networks, not the containing folders) have tags. Retrieve tags from the
-    // networkFolders data structure passed in as a prop. This could in theory be a custom property for the
-    // RichTreeView item, but that isn't well-supported at this time.
-    // Discussion: https://stackoverflow.com/questions/69481071/material-ui-how-to-pass-custom-props-to-a-custom-treeitem
-    const tags = isChild ? agentNode?.tags || [] : [];
+    const tags = item.tags ?? [];
     // Assign colors to tags as needed and store in tagsToColors map
     for (const tag of tags) {
         if (!tagsToColors.has(tag)) {
@@ -67,18 +60,33 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
         }
     }
     // Determine if expired (temporary networks only)
-    const expirationTime = temporaryNetworkExpirationTimes?.[itemId];
+    const expirationTime = item?.temporaryNetworkExpirationTime;
     const isTemporaryNetwork = Boolean(expirationTime);
     const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
-    const networkHocon = isTemporaryNetwork ? temporaryNetworkHoconStrings?.[itemId] : null;
-    const iconNameSuggestion = isTemporaryNetwork ? "HourglassTop" : isChild ? networkIconSuggestions?.[itemId] : null;
-    let muiIconElement = null;
-    if (iconNameSuggestion && MuiIcons[iconNameSuggestion]) {
-        const IconComponent = MuiIcons[iconNameSuggestion];
-        muiIconElement = _jsx(IconComponent, { sx: { fontSize: "1rem" } });
+    const networkHocon = item?.temporaryNetworkHocon ?? null;
+    const iconNameSuggestion = item.iconSuggestion;
+    let muiIconElement;
+    // If the item is a child (i.e., a network), we want to render an icon next to it.
+    if (isChild) {
+        if (iconNameSuggestion) {
+            if (MuiIcons[iconNameSuggestion]) {
+                // If the icon name suggestion is valid, use it to render the icon
+                const IconComponent = MuiIcons[iconNameSuggestion];
+                muiIconElement = _jsx(IconComponent, { sx: { fontSize: "1rem" } });
+            }
+            else {
+                // If the icon name suggestion is not valid, use a default icon
+                muiIconElement = _jsx(MuiIcons.Hub, { sx: { fontSize: "1rem" } });
+            }
+        }
+        else {
+            // If no icon name suggestion is provided, use a default icon
+            muiIconElement = _jsx(MuiIcons.Hub, { sx: { fontSize: "1rem" } });
+        }
     }
-    else if (iconNameSuggestion) {
-        console.warn(`Icon "${iconNameSuggestion}" not found in MUI icons library.`);
+    else {
+        // Use folder icon for parent items (i.e., folders)
+        muiIconElement = _jsx(MuiIcons.Folder, { sx: { fontSize: "1rem" } });
     }
     return (_jsx(TreeItemProvider, { ...getContextProviderProps(), children: _jsxs(TreeItemRoot, { ...getRootProps(), ref: rootRef, "data-itemid": itemId, children: [_jsx(TreeItemContent, { ...getContentProps(), sx: {
                         cursor: isExpired ? "not-allowed" : "pointer",
@@ -92,16 +100,13 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                         "&:hover": {
                                                             textDecoration: "underline",
                                                         },
-                                                    }, children: displayLabel })] }) }), isChild && tags?.length > 0 ? (_jsx(Tooltip, { title: [...tags]
+                                                    }, children: item.displayName })] }) }), isChild && tags.length > 0 ? (_jsx(Tooltip, { title: [...tags]
                                             .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
                                             .map((tag) => (_jsx(Chip, { label: tag, style: {
                                                 margin: "0.25rem",
                                                 backgroundColor: `var(${tagsToColors.get(tag) || TAG_COLORS[0]})`,
                                             } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null] }), isChild && isTemporaryNetwork && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem", marginLeft: "auto" }, children: [networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
                                                     e.stopPropagation();
-                                                    if (isExpired) {
-                                                        return;
-                                                    }
                                                     const fileName = `${toSafeFilename(labelString)}.hocon`;
                                                     downloadFile(networkHocon, fileName);
                                                 }, disabled: isExpired, "aria-label": "Download network definition", size: "small", sx: {
@@ -128,7 +133,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                 onDeleteNetwork?.(itemId, isExpired);
                                             }, sx: {
                                                 color: "var(--bs-secondary)",
-                                                "&:hover": { color: theme.palette.warning.main },
+                                                "&:hover": { color: (theme) => theme.palette.warning.main },
                                                 "&.Mui-disabled": {
                                                     color: "var(--bs-secondary)",
                                                     opacity: 0.3,

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

@@ -4,16 +4,15 @@ import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
 export declare const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
 export interface SidebarProps {
-    readonly customURLCallback: (url: string) => void;
-    readonly customURLLocalStorage?: string;
     readonly id: string;
     readonly isAwaitingLlm: boolean;
     readonly networkIconSuggestions?: NetworkIconSuggestions;
     readonly networks: readonly AgentInfo[];
-    readonly onEditNetwork?: (network: string) => void;
+    readonly neuroSanServerURL: string;
+    readonly newlyAddedTemporaryNetworks?: Set<string>;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
+    readonly onEditNetwork?: (network: string) => void;
     readonly setSelectedNetwork: (network: string) => void;
     readonly temporaryNetworks?: readonly TemporaryNetwork[];
-    readonly newlyAddedTemporaryNetworks?: Set<string>;
 }
 export declare const Sidebar: FC<SidebarProps>;