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

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

@@ -15,27 +15,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import AddBoxRounded from "@mui/icons-material/AddBoxRounded";
-import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
-import ClearIcon from "@mui/icons-material/Clear";
-import HighlightOff from "@mui/icons-material/HighlightOff";
-import SettingsIcon from "@mui/icons-material/Settings";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import InputAdornment from "@mui/material/InputAdornment";
-import Popover from "@mui/material/Popover";
-import { keyframes, styled, useTheme } from "@mui/material/styles";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
+import { keyframes, styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
-import { useEffect, useState, } from "react";
+import httpStatus from "http-status";
+import { useEffect, useState } from "react";
 import { AgentNetworkTreeItem } from "./AgentNetworkTreeItem.js";
-import { buildTreeViewItems } from "./TreeBuilder.js";
+import { buildTreeViewItems, findTreeItemById } from "./TreeBuilder.js";
 import { testConnection } from "../../../controller/agent/Agent.js";
-import { useEnvironmentStore } from "../../../state/Environment.js";
+import { useSettingsStore } from "../../../state/Settings.js";
 import { getZIndex } from "../../../utils/zIndexLayers.js";
+import { StatusLight } from "../../Common/StatusLight.js";
 import { AGENT_NETWORK_DESIGNER_ID, TEMPORARY_NETWORK_FOLDER } from "../const.js";
+//#region Constants
 // Animation for the sparkle effect when a new temporary network is added.
 const sparkle = keyframes `
     0% {
@@ -71,13 +66,13 @@ const sparkle = keyframes `
         opacity: 0.25;
     }
 `;
-// #region: Styled Components
-const PrimaryButton = styled(Button)({
-    marginLeft: "0.5rem",
-    marginTop: "2px",
-});
 // Name for sparkle animation CSS class
 export const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
+const EMPTY_ARRAY = [];
+// Interval for pinging the Neuro-san server to check if it's online, in milliseconds
+const NEURO_SAN_PING_INTERVAL_MS = 30_000;
+//#endregion: Constants
+//#region: Styled Components
 // Styled component for Sidebar aside element, including styles for the sparkle highlight animation
 // when a new temporary network is added.
 const SidebarAside = styled("aside")({
@@ -111,98 +106,48 @@ const SidebarHeading = styled("h2")(({ theme }) => ({
     top: 0,
     zIndex: getZIndex(1, theme),
 }));
-// #endregion: Styled Components
-// #region: Types
-var CONNECTION_STATUS;
-(function (CONNECTION_STATUS) {
-    CONNECTION_STATUS["IDLE"] = "idle";
-    CONNECTION_STATUS["SUCCESS"] = "success";
-    CONNECTION_STATUS["ERROR"] = "error";
-})(CONNECTION_STATUS || (CONNECTION_STATUS = {}));
-// #endregion: Types
-const EMPTY_ARRAY = [];
-export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networkIconSuggestions, networks, newlyAddedTemporaryNetworks, onDeleteNetwork, onEditNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
-    // Get default URL from the environment store.
-    const { backendNeuroSanApiUrl } = useEnvironmentStore();
-    const [urlInput, setUrlInput] = useState(customURLLocalStorage || backendNeuroSanApiUrl);
-    const [connectionStatus, setConnectionStatus] = useState(CONNECTION_STATUS.IDLE);
-    const [testConnectionResult, setTestConnectionResult] = useState(null);
-    const connectionStatusSuccess = connectionStatus === CONNECTION_STATUS.SUCCESS;
-    const connectionStatusError = connectionStatus === CONNECTION_STATUS.ERROR;
-    const isDefaultUrl = urlInput === backendNeuroSanApiUrl;
-    const saveEnabled = urlInput && (connectionStatusSuccess || (isDefaultUrl && !connectionStatusError));
-    const [settingsAnchorEl, setSettingsAnchorEl] = useState(null);
-    const settingsPopoverOpen = Boolean(settingsAnchorEl);
+// For showing server status which can be lengthy
+const ServerStatusTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { describeChild: true, ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: "rgba(97, 97, 97, 1)",
+        maxWidth: 500,
+        opacity: 1,
+    },
+});
+//#endregion: Types
+export const Sidebar = ({ id, isAwaitingLlm, networkIconSuggestions, networks, neuroSanServerURL, newlyAddedTemporaryNetworks, onDeleteNetwork, onEditNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
     const [expandedItems, setExpandedItems] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
-    // Theming/Dark mode
-    const darkMode = useTheme().palette.mode === "dark";
-    const handleSettingsClick = (event) => {
-        // On open of Settings popover, reset the connection status to idle
-        setConnectionStatus(CONNECTION_STATUS.IDLE);
-        setSettingsAnchorEl(event.currentTarget);
-    };
-    const handleSettingsClose = (cancel = false) => {
-        setSettingsAnchorEl(null);
-        // If the user cancels, reset the custom URL input to the local storage value, or the default URL
-        if (cancel) {
-            setUrlInput(customURLLocalStorage || backendNeuroSanApiUrl);
-        }
-    };
-    const handleURLChange = (event) => {
-        setUrlInput(event.target.value);
-        // Reset connection check since URL input was changed
-        setConnectionStatus(CONNECTION_STATUS.IDLE);
-    };
-    const handleDefaultSettings = () => {
-        // Clear input but don't close the popover
-        setUrlInput(backendNeuroSanApiUrl);
-        // Reset connection check since URL input was cleared
-        setConnectionStatus(CONNECTION_STATUS.IDLE);
-    };
-    const handleSaveSettings = () => {
-        let tempUrl = urlInput;
-        if (tempUrl.endsWith("/")) {
-            tempUrl = tempUrl.slice(0, -1);
-        }
-        if (tempUrl && !tempUrl.startsWith("http://") && !tempUrl.startsWith("https://")) {
-            tempUrl = `https://${tempUrl}`;
-        }
-        // Call setSelectedNetwork(null) otherwise it can cause issues when switching agent networks (i.e. for Save)
-        setSelectedNetwork(null);
-        handleSettingsClose();
-        customURLCallback(tempUrl);
-    };
-    const handleSettingsSaveEnterKey = (event) => {
-        if (event.key === "Enter" && saveEnabled) {
-            handleSaveSettings();
-        }
-    };
-    const handleTestConnection = async () => {
-        const result = await testConnection(urlInput);
-        setTestConnectionResult(result);
-        if (result.success) {
-            setConnectionStatus(CONNECTION_STATUS.SUCCESS);
-        }
-        else {
-            setConnectionStatus(CONNECTION_STATUS.ERROR);
-        }
-    };
-    const handleClearInput = () => {
-        setUrlInput("");
-        setConnectionStatus(CONNECTION_STATUS.IDLE);
-    };
-    // Fetch Neuro-san version on load and whenever the saved URL changes
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
+    const [neuroSanServerStatus, setNeuroSanServerStatus] = useState({ onlineStatus: "unknown", version: null });
     useEffect(() => {
-        const fetchVersion = async () => {
-            // We aren't really trying to test the connection here, just getting the version.
-            const result = await testConnection(customURLLocalStorage || backendNeuroSanApiUrl);
-            if (result.success) {
-                setTestConnectionResult(result);
+        let isCurrentRequest = true;
+        const checkStatus = async () => {
+            try {
+                const result = await testConnection(neuroSanServerURL);
+                if (!isCurrentRequest) {
+                    return;
+                }
+                setNeuroSanServerStatus(result.success
+                    ? { onlineStatus: "online", version: result.version }
+                    : { error: result.status, httpStatus: result.httpStatus, onlineStatus: "offline", version: null });
+            }
+            catch (error) {
+                if (!isCurrentRequest) {
+                    return;
+                }
+                const errorString = error instanceof Error ? error.message : String(error);
+                setNeuroSanServerStatus({ error: errorString, onlineStatus: "offline", version: null });
             }
         };
-        void fetchVersion();
-    }, [customURLLocalStorage, backendNeuroSanApiUrl]);
+        void checkStatus();
+        const intervalId = setInterval(checkStatus, NEURO_SAN_PING_INTERVAL_MS);
+        return () => {
+            isCurrentRequest = false;
+            clearInterval(intervalId);
+        };
+    }, [neuroSanServerURL]);
     // When the edit pencil is clicked, select the network first (if not already selected) so the network loads
     // before entering edit mode — the user shouldn't have to click the network and then click the pencil separately.
     const handleEditNetworkWithSelect = (network) => {
@@ -212,26 +157,21 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         }
         onEditNetwork?.(network);
     };
-    const { treeViewItems, nodeIndex } = buildTreeViewItems(networks, temporaryNetworks);
-    const temporaryNetworkExpirationTimes = temporaryNetworks.reduce((acc, tempNetwork) => {
-        acc[tempNetwork.agentInfo.agent_name] = new Date(tempNetwork.reservation.expiration_time_in_seconds * 1000);
-        return acc;
-    }, {});
-    const temporaryNetworkHoconStrings = temporaryNetworks.reduce((acc, tempNetwork) => {
-        acc[tempNetwork.agentInfo.agent_name] = tempNetwork.networkHocon;
-        return acc;
-    }, {});
+    const treeViewItems = buildTreeViewItems(useNativeNames, networks, temporaryNetworks, networkIconSuggestions);
     const handleSelectedItemsChange = (_event, itemId) => {
         if (!itemId) {
             return;
         }
-        // Only select leaf nodes (items in nodeIndex) as networks
-        const isLeafNode = nodeIndex.has(itemId);
-        if (!isLeafNode) {
+        const treeItem = findTreeItemById(treeViewItems, itemId);
+        if (!treeItem) {
+            return;
+        }
+        // Only allow selecting child nodes (i.e., actual networks), not parent nodes (folders).
+        if (!treeItem.isNetwork) {
             return;
         }
         // Don't allow selecting expired temporary networks
-        const expirationTime = temporaryNetworkExpirationTimes[itemId];
+        const expirationTime = treeItem?.temporaryNetworkExpirationTime;
         if (expirationTime && expirationTime < new Date()) {
             return;
         }
@@ -251,7 +191,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                 in MUI RichTreeView including the imperative API (https://mui.com/x/react-tree-view/rich-tree-view/selection/#imperative-api)
                 but couldn't get it to work so resorting to this for now.
                 */
-                const temporaryNetworkNode = document.querySelector(`[data-itemid="${firstItem}"]`);
+                const temporaryNetworkNode = document.querySelector(`[data-itemid="${CSS.escape(firstItem)}"]`);
                 if (temporaryNetworkNode) {
                     temporaryNetworkNode.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
                     temporaryNetworkNode.classList.add(SPARKLE_HIGHLIGHT_CLASS);
@@ -266,53 +206,29 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
             clearTimeout(removeHighlightTimeout);
         };
     }, [newlyAddedTemporaryNetworks]);
-    return (_jsxs(_Fragment, { children: [_jsxs(SidebarAside, { id: `${id}-sidebar`, children: [_jsxs(SidebarHeading, { id: `${id}-heading`, children: ["Agent Networks", _jsxs(Box, { sx: { display: "flex" }, children: [_jsx(Button, { "aria-label": "Add New Network", disabled: isAwaitingLlm, id: "add-network-btn", onClick: () => {
-                                            setSelectedItem(AGENT_NETWORK_DESIGNER_ID);
-                                            setSelectedNetwork(AGENT_NETWORK_DESIGNER_ID);
-                                        }, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { title: "Create your own agent network", placement: "top", children: _jsx(AddBoxRounded, { id: "add-network-icon", sx: { color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)" } }) }) }), _jsx(Button, { "aria-label": "Agent Network Settings", disabled: isAwaitingLlm, id: "agent-network-settings-btn", onClick: handleSettingsClick, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { id: "agent-network-settings-tooltip", placement: "top", title: `${customURLLocalStorage || backendNeuroSanApiUrl}\nversion: ${testConnectionResult?.version || "unknown"}`, children: _jsx(SettingsIcon, { id: "agent-network-settings-icon", sx: {
-                                                    color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)",
-                                                } }) }) })] })] }), _jsx(RichTreeView, { items: treeViewItems, expandedItems: expandedItems, onExpandedItemsChange: (_event, itemIds) => setExpandedItems(itemIds), multiSelect: false, onSelectedItemsChange: handleSelectedItemsChange, selectedItems: selectedItem, disableSelection: isAwaitingLlm, slots: {
-                            item: AgentNetworkTreeItem,
-                        }, 
-                        // Pass custom props to tree items via slotProps.
-                        // Reference: https://github.com/mui/mui-x/issues/13351
-                        slotProps: {
-                            item: {
-                                networkIconSuggestions,
-                                nodeIndex,
-                                onDeleteNetwork,
-                                onEditNetwork: handleEditNetworkWithSelect,
-                                temporaryNetworkExpirationTimes,
-                                temporaryNetworkHoconStrings,
-                            },
-                        } }, Object.keys(networkIconSuggestions || {}).length)] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
-                    vertical: "bottom",
-                    horizontal: "left",
-                }, slotProps: {
-                    paper: {
-                        sx: {
-                            paddingTop: "0.75rem",
-                            paddingLeft: "0.5rem",
-                            paddingRight: "0.5rem",
-                            paddingBottom: "0.2rem",
-                        },
-                    },
-                }, children: [_jsx(TextField, { autoComplete: "off", label: "Agent server address", id: "agent-network-settings-url", onChange: handleURLChange, onKeyUp: handleSettingsSaveEnterKey, placeholder: "https://my_server_address:port", size: "small", sx: { marginBottom: "0.5rem", minWidth: "400px" }, type: "url", variant: "outlined", value: urlInput, slotProps: {
-                            input: {
-                                endAdornment: urlInput && urlInput !== backendNeuroSanApiUrl ? (_jsx(InputAdornment, { id: "clear-input-adornment", position: "end", children: _jsx(IconButton, { id: "clear-input-icon-button", edge: "end", onClick: handleClearInput, size: "small", "aria-label": "Clear input", children: _jsx(ClearIcon, { fontSize: "small", id: "clear-input-icon" }) }) })) : undefined,
-                            },
-                        } }), _jsx(PrimaryButton, { disabled: !urlInput, id: "agent-network-settings-test-btn", onClick: handleTestConnection, variant: "contained", children: "Test" }), _jsx(PrimaryButton, { disabled: !saveEnabled, id: "agent-network-settings-save-btn", onClick: handleSaveSettings, variant: "contained", children: "Save" }), _jsx(PrimaryButton, { id: "agent-network-settings-cancel-btn", onClick: () => handleSettingsClose(true), variant: "contained", children: "Cancel" }), _jsx(Button, { id: "agent-network-settings-default-btn", onClick: handleDefaultSettings, sx: {
-                            marginLeft: "0.35rem",
-                            marginTop: "2px",
-                            color: darkMode ? "var(--bs-dark-mode-link)" : undefined,
-                        }, variant: "text", children: "Default" }), (connectionStatusSuccess || connectionStatusError) && (_jsxs(Box, { id: "connection-status-box", sx: {
-                            display: "flex",
-                            alignItems: "center",
-                            marginLeft: "0.25rem",
-                            marginBottom: "0.5rem",
-                        }, children: [connectionStatusSuccess && (_jsxs(_Fragment, { children: [_jsx(CheckCircleOutlinedIcon, { id: "connection-status-success-icon", sx: { color: "var(--bs-green)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-success-msg", variant: "body2", sx: {
-                                            color: "var(--bs-green)",
-                                        }, children: "Connected successfully" })] })), connectionStatusError && (_jsxs(_Fragment, { children: [_jsx(HighlightOff, { id: "connection-status-error-icon", sx: { color: "var(--bs-red)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-failed-msg", variant: "body2", sx: {
-                                            color: "var(--bs-red)",
-                                        }, children: `Connection failed: "${testConnectionResult?.status || "unknown error"}"` })] }))] }))] })] }));
+    const toStatusColor = () => {
+        switch (neuroSanServerStatus.onlineStatus) {
+            case "online":
+                return "green";
+            case "offline":
+                return "red";
+            case "unknown":
+            default:
+                return "unknown";
+        }
+    };
+    const getStatusLight = () => (_jsx(ServerStatusTooltip, { slotProps: {
+            popper: {
+                "aria-label": "Neuro-san server status",
+            },
+        }, title: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Status:" }), " ", neuroSanServerStatus.onlineStatus] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Version:" }), " ", neuroSanServerStatus.version ?? "unknown"] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "URL:" }), " ", neuroSanServerURL || "unknown"] }), neuroSanServerStatus.error && (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Error:" }), " ", neuroSanServerStatus.error] }), neuroSanServerStatus.httpStatus && (_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "HTTP status:" }), " ", `${neuroSanServerStatus.httpStatus} (${httpStatus[neuroSanServerStatus.httpStatus] ?? "Unknown status"})`] }))] }))] }), placement: "right", children: _jsx("span", { children: _jsx(StatusLight, { id: `${id}-agent-network-status-light`, statusValue: toStatusColor() }) }) }));
+    const getAddNetworkButton = () => (_jsx(Box, { sx: { display: "flex" }, children: _jsx(Button, { "aria-label": "Add New Network", disabled: isAwaitingLlm, id: "add-network-btn", onClick: () => {
+                setSelectedItem(AGENT_NETWORK_DESIGNER_ID);
+                setSelectedNetwork(AGENT_NETWORK_DESIGNER_ID);
+            }, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { title: "Create your own agent network", placement: "top", children: _jsx(AddBoxRounded, { id: "add-network-icon", sx: { color: "var(--bs-secondary)" } }) }) }) }));
+    const getSidebarHeading = () => (_jsxs(SidebarHeading, { id: `${id}-heading`, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: (theme) => theme.spacing(1.5) }, children: [getStatusLight(), "Agent Networks"] }), getAddNetworkButton()] }));
+    const getSidebarNetworksTree = () => (_jsx(RichTreeView, { disableSelection: isAwaitingLlm, expandedItems: expandedItems, items: treeViewItems, multiSelect: false, onExpandedItemsChange: (_event, itemIds) => setExpandedItems(itemIds), onSelectedItemsChange: handleSelectedItemsChange, selectedItems: selectedItem, slotProps: {
+            item: { onDeleteNetwork, onEditNetwork: handleEditNetworkWithSelect },
+        }, slots: { item: AgentNetworkTreeItem } }));
+    return (_jsxs(SidebarAside, { id: `${id}-sidebar`, children: [getSidebarHeading(), getSidebarNetworksTree()] }));
 };

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

@@ -1,20 +1,37 @@
 import { TreeViewDefaultItemModelProperties } from "@mui/x-tree-view/models";
 import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
-export type NodeIndex = Map<string, {
-    agentInfo: AgentInfo;
-    displayName: string;
-}>;
+/**
+ * Represents either a category (folder) or a network (leaf) in the tree view.
+ * Note that we omit the `children` property from the parent as we want to use read-only semantics
+ */
+export interface AgentNetworkTreeItemModel extends Omit<TreeViewDefaultItemModelProperties, "children"> {
+    readonly children?: readonly AgentNetworkTreeItemModel[];
+    readonly displayName: string;
+    readonly iconSuggestion?: string;
+    readonly isNetwork: boolean;
+    readonly tags?: readonly string[];
+    readonly temporaryNetworkExpirationTime?: Date;
+    readonly temporaryNetworkHocon?: string | null;
+}
+/**
+ * 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()`)
+ */
+export declare const findTreeItemById: (items: readonly AgentNetworkTreeItemModel[], itemId: string) => AgentNetworkTreeItemModel | undefined;
 /**
  * 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 declare const buildTreeViewItems: (networks: readonly AgentInfo[], temporaryNetworks: readonly TemporaryNetwork[]) => {
-    treeViewItems: TreeViewDefaultItemModelProperties[];
-    nodeIndex: NodeIndex;
-};
+export declare const buildTreeViewItems: (useNativeNames: boolean, regularNetworks?: readonly AgentInfo[], temporaryNetworks?: readonly TemporaryNetwork[], iconSuggestions?: Record<string, string>) => AgentNetworkTreeItemModel[];