@cognizant-ai-lab/ui-common 1.4.1 → 1.4.2

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 import StopCircle from "@mui/icons-material/StopCircle";
 import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
 import { ReactFlowProvider } from "@xyflow/react";
@@ -26,7 +25,7 @@ import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
 import { TEMPORARY_NETWORK_FOLDER } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { extractReservations } from "./TemporaryNetworks.js";
+import { extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
 import { getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, } from "../../controller/agent/Agent.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
@@ -35,7 +34,6 @@ import { ChatCommon } from "../AgentChat/ChatCommon.js";
 import { SmallLlmChatButton } from "../AgentChat/LlmChatButton.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Utils.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
-import { MUIAlert } from "../Common/MUIAlert.js";
 import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
 // Display expired temporary networks for this amount of time after they expire so users can see what happened
 const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
@@ -45,9 +43,13 @@ const GROW_ANIMATION_TIME_MS = 800;
  * Helper function to convert agent reservations received from the backend into temporary networks that can be displayed
  * in the tree.
  * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
+ * @param networkHocon Optional network HOCON string that may be included in the same message as the
+ * reservations. Note: for now we assume that all reservations are associated with the same network definition.
+ * This will fail if ever we get multiple reservations for different networks in a single chat stream, but that is
+ * not a valid scenario currently; we are focusing on Agent Network Design which has a simple output.
  * @returns List of TemporaryNetwork objects that can be displayed in the UI
  */
-const convertReservationsToNetworks = (agentReservations) => {
+const convertReservationsToNetworks = (agentReservations, networkHocon) => {
     return agentReservations.map((reservation) => ({
         reservation,
         agentInfo: {
@@ -55,6 +57,7 @@ const convertReservationsToNetworks = (agentReservations) => {
             origin: reservation.reservation_id,
             status: "active",
         },
+        networkHocon,
     }));
 };
 /**
@@ -90,8 +93,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [networkToBeDeleted, setNetworkToBeDeleted] = useState(null);
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
-    // For controlling alert when temporary network is created
-    const [alertContents, setAlertContents] = useState(null);
     const customURLCallback = useCallback((url) => {
         setNeuroSanURL(url || backendNeuroSanApiUrl);
         setCustomURLLocalStorage(url === "" ? null : url);
@@ -244,7 +245,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         const reservationsResult = extractReservations(chatMessage);
         // Handle agent reservations (temporary networks) that come in through the chat stream.
         if (reservationsResult?.length > 0) {
-            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult);
+            // Retrieve network definition, if present
+            const networkHocon = extractNetworkHocon(chatMessage);
+            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult, networkHocon);
             const currentNetworks = useTempNetworksStore.getState().tempNetworks;
             useTempNetworksStore.getState().setTempNetworks([...currentNetworks, ...newTemporaryNetworks]);
             // record the new temporary networks so we can select them for the user. For now, we only
@@ -258,7 +261,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         agentCountsRef.current = new Map();
         // Reset newly added temporary networks
         setNewlyAddedTemporaryNetworks(new Set());
-        setAlertContents(null);
         // Show info popup only once per session
         if (!haveShownPopup) {
             sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
@@ -268,31 +270,11 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         setIsStreaming(true);
     }, [haveShownPopup]);
     const onStreamingComplete = useCallback(() => {
-        const network = newlyAddedTemporaryNetworks?.values().next().value;
-        if (network?.length > 0) {
-            // We show an Alert after streaming completes (in case of Zen mode where the user might miss it)
-            const agentNameDisplay = cleanUpAgentName(removeTrailingUuid(network));
-            setAlertContents(`A temporary network "${agentNameDisplay}" has been created.`);
-        }
         // When streaming is complete, clean up any refs and state
         conversationsRef.current = null;
         setCurrentConversations(null);
         resetState();
     }, [newlyAddedTemporaryNetworks]);
-    useEffect(() => {
-        if (alertContents?.length > 0) {
-            // Set a timer to clear the alert after a few seconds so it doesn't overstay its welcome
-            const timeoutId = window.setTimeout(() => {
-                setAlertContents(null);
-            }, 10_000);
-            return () => {
-                window.clearTimeout(timeoutId);
-            };
-        }
-        else {
-            return undefined;
-        }
-    }, [alertContents]);
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const handleDeleteNetwork = (networkId, isExpired) => {
         if (isExpired) {
@@ -354,8 +336,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
-    const getAlert = () => (_jsx(Collapse, { in: alertContents?.length > 0, timeout: 1000, children: _jsx(MUIAlert, { id: "temporary-network-created-alert", closeable: true, severity: "success", sx: { marginTop: "1rem", marginBottom: 0 }, children: alertContents }) }));
-    return (_jsxs(_Fragment, { children: [getAlert(), getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    return (_jsxs(_Fragment, { children: [getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
                     display: "flex",
                     flex: 1,
                     height: "85%",

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

@@ -6,6 +6,7 @@ export interface AgentNetworkNodeProps extends TreeItemProps {
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => 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

@@ -4,14 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as MuiIcons from "@mui/icons-material";
 import BookmarkIcon from "@mui/icons-material/Bookmark";
 import Delete from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
 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 { 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/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
@@ -40,7 +43,7 @@ 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, temporaryNetworkExpirationTimes, }) => {
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, temporaryNetworkExpirationTimes, temporaryNetworkHoconStrings, }) => {
     const theme = useTheme();
     // We know all labels are strings because we set them that way in the tree view items
     const labelString = label;
@@ -66,6 +69,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
     const expirationTime = temporaryNetworkExpirationTimes?.[itemId];
     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]) {
@@ -93,7 +97,22 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                             .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 && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
+                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null, isTemporaryNetwork && networkHocon && (_jsx(Tooltip, { title: isExpired ? "Network 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: {
+                                                    padding: 0,
+                                                    color: "var(--bs-secondary)",
+                                                    "&:hover": { color: "var(--bs-secondary-dark)" },
+                                                    "&.Mui-disabled": {
+                                                        color: "var(--bs-secondary)",
+                                                        opacity: 0.3,
+                                                    },
+                                                }, children: _jsx(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) }))] }), isChild && isTemporaryNetwork && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
                                         e.stopPropagation();
                                         onDeleteNetwork?.(itemId, isExpired);
                                     }, sx: {

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

@@ -203,6 +203,10 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         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 [selectedItem, setSelectedItem] = useState(null);
     const handleSelectedItemsChange = (_event, itemId) => {
         if (!itemId) {
@@ -263,6 +267,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                                 nodeIndex,
                                 onDeleteNetwork,
                                 temporaryNetworkExpirationTimes,
+                                temporaryNetworkHoconStrings,
                             },
                         } }, Object.keys(networkIconSuggestions || {}).length)] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
                     vertical: "bottom",

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

@@ -24,3 +24,10 @@ export type AgentReservation = {
  * if the message is not of the expected type.
  */
 export declare const extractReservations: (message: ChatMessage) => AgentReservation[];
+/**
+ * Extracts the agent network HOCON from a chat message, if it exists.
+ * @param message The chat message to extract network HOCON from.
+ * We expect the network definition to be present in messages of type AGENT_FRAMEWORK only.
+ * @return The network HOCON as a string, or null if not found or not the right type of message.
+ */
+export declare const extractNetworkHocon: (message: ChatMessage) => string | null;

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,5 @@
+import { AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY } from "./const.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-// We expect the agent reservations to be stored in sly_data under this key
-const AGENT_RESERVATIONS_KEY = "agent_reservations";
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -18,3 +17,19 @@ export const extractReservations = (message) => {
         return [];
     }
 };
+/**
+ * Extracts the agent network HOCON from a chat message, if it exists.
+ * @param message The chat message to extract network HOCON from.
+ * We expect the network definition to be present in messages of type AGENT_FRAMEWORK only.
+ * @return The network HOCON as a string, or null if not found or not the right type of message.
+ */
+export const extractNetworkHocon = (message) => {
+    // Check for agent network HOCON in sly_data
+    if (message?.type === ChatMessageType.AGENT_FRAMEWORK && message?.sly_data?.[AGENT_NETWORK_HOCON]) {
+        return message.sly_data[AGENT_NETWORK_HOCON];
+    }
+    else {
+        // Not the type of message that would contain a network HOCON, or no network HOCON found, return null
+        return null;
+    }
+};

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

@@ -3,3 +3,5 @@ export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 export declare const BASE_RADIUS = 100;
 export declare const LEVEL_SPACING = 150;
 export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
+export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
+export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";

package/dist/components/MultiAgentAccelerator/const.js

@@ -23,3 +23,7 @@ export const LEVEL_SPACING = 150;
 // they come from the backend, but we need to put them somewhere in the UI, and this makes it clear that they're
 // temporary.
 export const TEMPORARY_NETWORK_FOLDER = "temporary";
+// We expect the agent reservations to be stored in sly_data under this key
+export const AGENT_RESERVATIONS_KEY = "agent_reservations";
+// We expect the agent network HOCON to be stored in sly_data under this key, if it is provided by the backend
+export const AGENT_NETWORK_HOCON = "agent_network_hocon_text";

package/dist/state/TemporaryNetworks.d.ts

@@ -7,6 +7,7 @@ type AgentReservation = {
 export type TemporaryNetwork = {
     readonly reservation: AgentReservation;
     readonly agentInfo: AgentInfo;
+    readonly networkHocon?: string | null;
 };
 /**
  * Zustand state store for temporary networks, such as vibe coded networks created by the user.