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

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

@@ -9,14 +9,14 @@ 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";
+import { removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -44,21 +44,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 +61,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 networkDefinition = item?.temporaryNetworkDefinition ?? 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,18 +101,19 @@ 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) => {
+                                            } }, 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: [networkDefinition && (_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);
+                                                    // Strip the reservation UUID before building the filename so
+                                                    // exported files carry a clean name (toSafeFilename would
+                                                    // otherwise flatten the UUID's hyphens to underscores).
+                                                    const cleanName = removeTrailingUuid(labelString);
+                                                    const fileName = `${toSafeFilename(cleanName)}.json`;
+                                                    downloadFile(JSON.stringify(networkDefinition, null, 2), fileName, "application/json");
                                                 }, disabled: isExpired, "aria-label": "Download network definition", size: "small", sx: {
                                                     padding: 0,
                                                     color: "var(--bs-secondary)",
@@ -128,7 +138,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/ImportNetworkModal.d.ts

@@ -0,0 +1,67 @@
+import { FC } from "react";
+import { AgentNetworkDefinitionEntry } from "../const.js";
+export declare const IMPORT_MODAL_MAX_FILE_SIZE_BYTES: number;
+export type ImportFileValidation = "valid" | "unsupported_type" | "too_large";
+export interface ImportNetworkModalProps {
+    readonly existingNetworkNames?: readonly string[];
+    readonly isOpen: boolean;
+    readonly onClose: () => void;
+    readonly onImport?: (name: string, content: string) => void;
+}
+export interface NetworkSummary {
+    readonly agents: number;
+    readonly codedTools: number;
+    readonly externalAgents: number;
+    readonly frontman: string;
+}
+/**
+ * Parse and validate a network definition file. Imports are JSON only.
+ *
+ * Returns the parsed value on success, or an error message on failure. The value is typed `unknown`,
+ * so callers narrow it (see `jsonToNetworkDefinition`) or stringify it as needed.
+ */
+export declare const parseNetworkFileContent: (text: string) => {
+    success: true;
+    data: unknown;
+} | {
+    success: false;
+    error: string;
+};
+/**
+ * Converts a parsed network definition into an array of AgentNetworkDefinitionEntry objects
+ * suitable for sendNetworkDesignerRequest.
+ *
+ * Expects the top-level array shape — each entry carrying `origin`, `tools`, `display_as`, etc.
+ * Anything that isn't an array yields an empty result, and entries without a string `origin`
+ * are dropped. The `instructions` and `description` fields are trimmed when present.
+ */
+export declare const jsonToNetworkDefinition: (parsed: unknown) => AgentNetworkDefinitionEntry[];
+export declare const summarizeNetworkDefinition: (networkDef: AgentNetworkDefinitionEntry[]) => NetworkSummary;
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * Validate a selected file against the advertised constraints before reading it.
+ *
+ * The `<input accept>` attribute only filters the file-picker dialog and is bypassed
+ * entirely by drag/drop, so we re-check the extension here. We also enforce the
+ * advertised size limit — purely a client-side guard so a pathological file can't be
+ * fed into the synchronous parsing/regex pass and freeze the UI; the server imposes
+ * no such limit.
+ *
+ * Returns a status the caller can branch on; rendering a message is left to the caller
+ * (see `importFileValidationMessage`).
+ */
+export declare const validateImportFile: (file: File) => ImportFileValidation;
+export declare const importFileValidationMessage: (validation: ImportFileValidation, file: File) => string | null;
+/** Convert a filename stem to a display-friendly network name.
+ *
+ * Strips a trailing UUID that neuro-san appends to exported filenames (e.g.
+ * `my_network_683b0dfb_4816_464d_9c83_7e59ce6497d3.json` → `My Network`).
+ */
+export declare const filenameToNetworkName: (filename: string) => string;
+/** Pick the first non-colliding name by appending an incrementing index (" 2", " 3", …).
+ *
+ * Starts at 2 and skips any index already in use, so importing "My Network" alongside an existing
+ * "My Network" yields "My Network (2)" — or "My Network (3)" if "My Network (2)" is also taken.
+ */
+export declare const nextAvailableNetworkName: (baseName: string, existingNames: readonly string[]) => string;
+export declare const ImportNetworkModal: FC<ImportNetworkModalProps>;