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

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -27,24 +27,81 @@ import Typography from "@mui/material/Typography";
 import { applyNodeChanges, Background, ConnectionMode, ControlButton, Controls, ReactFlow, useReactFlow, useStore, } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AgentNode, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
-import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
+import { AgentNodePopup } from "./AgentNodePopup.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, isEditableAgent, LEVEL_SPACING, } from "./const.js";
 import { addThoughtBubbleEdge, layoutLinear, layoutRadial } from "./GraphLayouts.js";
 import { PlasmaEdge } from "./PlasmaEdge.js";
+import { convertReservationsToNetworks, extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
 import { ThoughtBubbleEdge } from "./ThoughtBubbleEdge.js";
 import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
+import { sendChatQuery } from "../../controller/agent/Agent.js";
+import { StreamingUnit } from "../../controller/llm/LlmChat.js";
+import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
+import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { usePalette } from "../../Theme/Palettes.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
+import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
+import { NotificationType, sendNotification } from "../Common/notification.js";
 // #endregion: Types
 // #region: Constants
 // Timeout for thought bubbles is set to 10 seconds
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
 // #endregion: Constants
-export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, id, isAwaitingLlm, isStreaming, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
+// #region: Helpers
+/** Merges incoming networks into target, keeping the entry with the highest expiration time. */
+const mergeNetworks = (target, incoming) => {
+    for (const n of incoming) {
+        const key = n.agentNetworkName ?? n.reservation.reservation_id;
+        const existingIdx = target.findIndex((e) => (e.agentNetworkName ?? e.reservation.reservation_id) === key);
+        if (existingIdx < 0) {
+            target.push(n);
+        }
+        else if (n.reservation.expiration_time_in_seconds > target[existingIdx].reservation.expiration_time_in_seconds) {
+            target[existingIdx] = n;
+        }
+    }
+};
+/**
+ * Streams the Agent Network Designer endpoint with the updated definition and collects
+ * the resulting reservations. Returns the deduplicated list of new networks.
+ */
+const streamNetworkDesignerUpdate = async (neuroSanURL, signal, agentName, updated, agentNetworkName, currentUser) => {
+    const newNetworks = [];
+    await sendChatQuery(neuroSanURL, signal, 
+    // Shouldn't have to pass a user message, but API behaves different without it
+    `Update instructions for agent "${agentName}"`, AGENT_NETWORK_DESIGNER_ID, (chunk) => {
+        const chatMessage = chatMessageFromChunk(chunk);
+        if (!chatMessage)
+            return;
+        const reservations = extractReservations(chatMessage);
+        if (reservations.length === 0)
+            return;
+        const networkHocon = extractNetworkHocon(chatMessage);
+        // Always use the user's edited definition as the authoritative value.
+        // The backend may not echo agent_network_definition back, may return
+        // an empty array, or may return the pre-edit version.
+        const agentNetworkNameFromMessage = chatMessage.sly_data?.[AGENT_NETWORK_NAME_KEY];
+        // Prefer the locally-known name so upsert can match the existing entry even
+        // when the backend response omits AGENT_NETWORK_NAME_KEY.
+        const networkName = agentNetworkName ?? agentNetworkNameFromMessage;
+        const converted = convertReservationsToNetworks(reservations, networkHocon, updated, networkName);
+        mergeNetworks(newNetworks, converted);
+    }, null, {
+        [AGENT_NETWORK_DEFINITION_KEY]: updated,
+        // Use the backend's canonical name, not the local UUID-based key.
+        ...(agentNetworkName ? { [AGENT_NETWORK_NAME_KEY]: agentNetworkName } : {}),
+        // skip_designer prevents the backend from using a reasoning model for edits
+        skip_designer: true,
+    }, currentUser, StreamingUnit.Line);
+    return newNetworks;
+};
+// #endregion: Helpers
+export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, currentUser, id, isAgentNetworkDesignerMode, isAwaitingLlm, isStreaming, isSelectedNetworkTemporary: isTemporaryNetwork, networkId, neuroSanURL, onNetworkReplaced, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
     const theme = useTheme();
     const { fitView } = useReactFlow();
     const handleResize = useCallback(() => {
-        fitView(); // Adjusts the view to fit after resizing
-    }, [fitView, isAwaitingLlm]);
+        void fitView(); // Adjusts the view to fit after resizing
+    }, [fitView]);
     useEffect(() => {
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
@@ -53,6 +110,9 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const [coloringOption, setColoringOption] = useState("depth");
     const [enableRadialGuides, setEnableRadialGuides] = useState(true);
     const [showThoughtBubbles, setShowThoughtBubbles] = useState(true);
+    // Read temporary networks to find agent_network_definition for the currently selected network.
+    const tempNetworks = useTempNetworksStore((state) => state.tempNetworks);
+    const updateTempNetworkDefinition = useTempNetworksStore((state) => state.updateTempNetworkDefinition);
     // Track conversation IDs we've already processed to prevent re-adding after expiry
     const processedConversationIdsRef = useRef(new Set());
     // Track which bubble is currently being hovered
@@ -76,7 +136,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     useEffect(() => {
         if (!currentConversations || currentConversations.length === 0)
             return;
-        setThoughtBubbleEdges((prev) => {
+        setThoughtBubbleEdges?.((prev) => {
             const processedText = new Set();
             for (const entry of prev.values()) {
                 const text = entry.edge.data?.text?.trim();
@@ -121,7 +181,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             if (!isStreamingRef.current)
                 return;
             const now = Date.now();
-            setThoughtBubbleEdges((prev) => {
+            setThoughtBubbleEdges?.((prev) => {
                 let changed = false;
                 const edgesMap = new Map(prev);
                 for (const [convId, entry] of prev) {
@@ -135,7 +195,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             });
         }, 1000);
         return () => clearInterval(cleanupInterval);
-    }, []); // mount/unmount only
+    }, [setThoughtBubbleEdges]); // mount/unmount only
     // Shadow color for icon
     const shadowColor = theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
     const isHeatmap = coloringOption === "heatmap";
@@ -164,16 +224,17 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Create the flow layout depending on user preference
     // Memoize layoutResult so it only recalculates when relevant data changes
     const layoutResult = useMemo(() => layout === "linear"
-        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions)
-        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions), [
+        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork)
+        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork), [
         agentCounts,
         agentIconSuggestions,
-        coloringOption,
         currentConversations,
+        isAgentNetworkDesignerMode,
         isAwaitingLlm,
+        isHeatmap,
+        isTemporaryNetwork,
         layout,
         mergedAgentsInNetwork,
-        showThoughtBubbles,
         thoughtBubbleEdges,
     ]);
     const [nodes, setNodes] = useState(layoutResult.nodes);
@@ -181,31 +242,143 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     useEffect(() => {
         setNodes(layoutResult.nodes);
     }, [layoutResult.nodes]);
+    // Track which node the user clicked on so we can open the popup
+    const [selectedAgent, setSelectedAgent] = useState(null);
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    // True while the agent-edit request is in-flight so we can disable the Save button.
+    const [isSavingAgent, setIsSavingAgent] = useState(false);
+    // AbortController for the in-flight save request — stored in a ref so handlePopupClose can cancel it.
+    const saveAbortControllerRef = useRef(null);
+    const handleNodeClick = useCallback((_event, node) => {
+        // Popup is only available for temporary networks.
+        if (!isTemporaryNetwork)
+            return;
+        // Only llm_agent nodes support instructions/description editing.
+        if (!isEditableAgent(node.data.displayAs))
+            return;
+        // Find the clicked agent's existing instructions and description from the temp network definition.
+        const currentTempNetwork = networkId
+            ? tempNetworks.find((n) => n.agentInfo.agent_name === networkId)
+            : undefined;
+        const found = (currentTempNetwork?.agentNetworkDefinition ?? []).find((e) => e.origin === node.id);
+        setSelectedAgent({
+            agentId: node.id,
+            agentName: node.data.agentName,
+            initialInstructions: found?.instructions ?? "",
+            initialDescription: found?.description ?? "",
+        });
+        setIsPopupOpen(true);
+    }, [tempNetworks, isTemporaryNetwork, networkId]);
+    const handlePopupClose = useCallback(() => {
+        // If a save is in-flight, abort it immediately so the stream doesn't hang.
+        saveAbortControllerRef.current?.abort();
+        saveAbortControllerRef.current = null;
+        setIsPopupOpen(false);
+        setIsSavingAgent(false);
+    }, []);
+    /** Applies the networks returned by the designer: upserts them and triggers navigation if needed. */
+    const applyNetworkSaveResult = useCallback((agentName, newNetworksFromSave, currentAgentNetworkName) => {
+        if (newNetworksFromSave.length === 0) {
+            sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, "The network designer did not return a reservation. Please try again.");
+            return;
+        }
+        const replacement = newNetworksFromSave.find((n) => n.agentNetworkName === currentAgentNetworkName);
+        if (replacement) {
+            useTempNetworksStore.getState().upsertTempNetworks(newNetworksFromSave);
+            if (networkId && onNetworkReplaced) {
+                useAgentChatHistoryStore.getState().copyHistory(networkId, replacement.agentInfo.agent_name);
+                onNetworkReplaced(networkId, replacement.agentInfo.agent_name);
+            }
+        }
+        else {
+            // Reservations came back but none matched the current network — surface this to the user.
+            sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, "A reservation was returned but did not match the current network. Please try again.");
+        }
+    }, [networkId, onNetworkReplaced]);
+    const handlePopupSave = useCallback(async (agentName, instructionsText, descriptionText) => {
+        if (!selectedAgent)
+            return;
+        // Find the temp network entry for the currently selected network.
+        const currentTempNetwork = networkId
+            ? tempNetworks.find((n) => n.agentInfo.agent_name === networkId)
+            : undefined;
+        // Produce a new array with the saved agent's fields updated; all other entries pass through unchanged.
+        const currentDefinitions = currentTempNetwork?.agentNetworkDefinition ?? [];
+        const updated = currentDefinitions.map((entry) => entry.origin === selectedAgent.agentId
+            ? { ...entry, instructions: instructionsText, description: descriptionText }
+            : entry);
+        if (networkId) {
+            updateTempNetworkDefinition(networkId, updated);
+        }
+        // POST the updated definition to the Agent Network Designer and wait for the response.
+        // The backend is immutable for temporary networks, so a new reservation will always be created.
+        // We need to capture it and replace the old network in the store.
+        if (!neuroSanURL || !currentUser || updated.length === 0) {
+            setIsPopupOpen(false);
+            return;
+        }
+        setIsSavingAgent(true);
+        const saveController = new AbortController();
+        saveAbortControllerRef.current = saveController;
+        // 60-second hard timeout — belt-and-suspenders in case the server never closes the stream.
+        const saveTimeoutId = setTimeout(() => saveController.abort(new DOMException("Save timed out", "TimeoutError")), 60_000);
+        try {
+            const newNetworksFromSave = await streamNetworkDesignerUpdate(neuroSanURL, saveController.signal, agentName, updated, currentTempNetwork?.agentNetworkName, currentUser);
+            applyNetworkSaveResult(agentName, newNetworksFromSave, currentTempNetwork?.agentNetworkName);
+        }
+        catch (e) {
+            const isAbort = e instanceof DOMException && e.name === "AbortError";
+            const isTimeout = e instanceof DOMException && e.name === "TimeoutError";
+            if (!isAbort) {
+                console.error("Failed to submit agent network update:", e);
+                const detail = isTimeout
+                    ? "The request timed out waiting for the server. Please try again."
+                    : String(e);
+                sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, detail);
+            }
+            // isAbort: user dismissed the dialog — no toast needed.
+        }
+        finally {
+            clearTimeout(saveTimeoutId);
+            saveAbortControllerRef.current = null;
+            setIsSavingAgent(false);
+            setIsPopupOpen(false);
+        }
+    }, [
+        selectedAgent,
+        tempNetworks,
+        updateTempNetworkDefinition,
+        neuroSanURL,
+        currentUser,
+        networkId,
+        applyNetworkSaveResult,
+    ]);
     const edges = layoutResult.edges;
     // Make sure to extract only thought bubble edges for the overlay.
     const thoughtBubbleEdgesForOverlay = useMemo(() => edges.filter((e) => e.type === "thoughtBubbleEdge"), [edges]);
     useEffect(() => {
         // Schedule a fitView after the layout is set to ensure the view is adjusted correctly
         setTimeout(() => {
-            fitView();
+            void fitView();
         }, 50);
-    }, [agentsInNetwork, layout]);
+    }, [agentsInNetwork, fitView, layout]);
     const onNodesChange = useCallback((changes) => {
-        setNodes((ns) => applyNodeChanges(
-        // For now, we only allow dragging, no updates
-        changes.filter((c) => c.type === "position"), ns));
-    }, []);
+        setNodes((currentNodes) => applyNodeChanges(
+        // For now, we only allow dragging, no updates. In agent network designer mode, doesn't make sense
+        // to allow position changes since the user isn't actually manipulating a real network
+        changes.filter((c) => c.type === "position" && !isAgentNetworkDesignerMode), currentNodes));
+    }, [isAgentNetworkDesignerMode]);
     const transform = useStore((state) => state.transform);
     // Why not just a "const"? See: https://reactflow.dev/learn/customization/custom-nodes
     // "It’s important that the nodeTypes are memoized or defined outside the component. Otherwise, React creates
     // a new object on every render which leads to performance issues and bugs."
     const nodeTypes = useMemo(() => ({
         agentNode: AgentNode,
-    }), [AgentNode]);
+    }), []);
     const edgeTypes = useMemo(() => ({
         plasmaEdge: PlasmaEdge,
         thoughtBubbleEdge: ThoughtBubbleEdge,
-    }), [PlasmaEdge, ThoughtBubbleEdge]);
+    }), []);
     // Figure out the maximum depth of the network
     const maxDepth = useMemo(() => {
         return nodes?.reduce((max, node) => Math.max(node.data.depth, max), 0) + 1;
@@ -311,5 +484,5 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 color: theme.palette.text.primary,
                 fill: theme.palette.text.primary,
             },
-        }, children: [_jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }));
+        }, children: [_jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, onNodeClick: handleNodeClick, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange }), selectedAgent && !isAwaitingLlm && (_jsx(AgentNodePopup, { agentName: selectedAgent.agentName, initialInstructions: selectedAgent.initialInstructions, initialDescription: selectedAgent.initialDescription, isOpen: isPopupOpen, isSaving: isSavingAgent, onClose: handlePopupClose, onSave: handlePopupSave }))] }));
 };

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

@@ -0,0 +1,10 @@
+import { ChatMessage, ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
+/**
+ * Extracts network progress information from a chat message, if present. Only messages of type AGENT_PROGRESS
+ * can have this information. When present, it should be under the key defined by AGENT_PROGRESS_CONNECTIVITY_KEY
+ * in the message structure.
+ * @param message The chat message to extract network progress from
+ * @returns An array of ConnectivityInfo objects if the message contains network progress information, or an empty
+ * array if not
+ */
+export declare const extractAgentNetworkDesignerProgress: (message: ChatMessage) => ConnectivityInfo[];

package/dist/components/MultiAgentAccelerator/AgentNetworkDesigner.js

@@ -0,0 +1,20 @@
+import { AGENT_PROGRESS_CONNECTIVITY_KEY } from "./const.js";
+import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+/**
+ * Extracts network progress information from a chat message, if present. Only messages of type AGENT_PROGRESS
+ * can have this information. When present, it should be under the key defined by AGENT_PROGRESS_CONNECTIVITY_KEY
+ * in the message structure.
+ * @param message The chat message to extract network progress from
+ * @returns An array of ConnectivityInfo objects if the message contains network progress information, or an empty
+ * array if not
+ */
+export const extractAgentNetworkDesignerProgress = (message) => {
+    const agentProgress = message?.structure?.[AGENT_PROGRESS_CONNECTIVITY_KEY];
+    if (message?.type === ChatMessageType.AGENT_PROGRESS && agentProgress) {
+        return agentProgress;
+    }
+    else {
+        // Not the type of message that would contain network progress information, or the key is not present
+        return [];
+    }
+};

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

@@ -10,6 +10,7 @@ export interface AgentNodeProps extends Record<string, unknown> {
     readonly getConversations: () => AgentConversation[] | null;
     readonly isAwaitingLlm?: boolean;
     readonly agentIconSuggestion?: string;
+    readonly isTemporaryNetwork?: boolean;
 }
 export declare const NODE_HEIGHT = 100;
 export declare const NODE_WIDTH = 100;

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -25,6 +25,7 @@ import { keyframes, styled, useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
+import { DISPLAY_AS_CODED_TOOL, DISPLAY_AS_EXTERNAL_AGENT, DISPLAY_AS_LANGCHAIN_TOOL, DISPLAY_AS_LLM_AGENT, isEditableAgent, } from "./const.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { usePalette } from "../../Theme/Palettes.js";
 import { isLightColor } from "../../Theme/Theme.js";
@@ -81,7 +82,7 @@ export const AgentNode = (props) => {
     const palette = usePalette();
     // Unpack the node-specific data
     const data = props.data;
-    const { agentCounts, agentName, depth, displayAs, getConversations, agentIconSuggestion, isAwaitingLlm } = data;
+    const { agentCounts, agentName, depth, displayAs, getConversations, agentIconSuggestion, isAwaitingLlm, isTemporaryNetwork, } = data;
     // Determine if this is the Frontman node (depth 0)
     const isFrontman = depth === 0;
     // Determine max agent count for heatmap scaling
@@ -133,11 +134,13 @@ export const AgentNode = (props) => {
             }
             else {
                 switch (displayAs) {
-                    case "external_agent":
+                    case DISPLAY_AS_EXTERNAL_AGENT:
                         return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case "coded_tool":
+                    // This should be a supported type but we're not seeing it?
+                    case DISPLAY_AS_LANGCHAIN_TOOL:
+                    case DISPLAY_AS_CODED_TOOL:
                         return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case "llm_agent":
+                    case DISPLAY_AS_LLM_AGENT:
                     default:
                         return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
                 }
@@ -150,9 +153,11 @@ export const AgentNode = (props) => {
     const glowColor = isLightColor(theme.palette.background.default)
         ? theme.palette.common.black
         : theme.palette.common.white;
+    const isClickableNode = isTemporaryNetwork && isEditableAgent(displayAs);
     return (_jsxs(_Fragment, { children: [_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, sx: {
                     backgroundColor,
                     color,
+                    cursor: isClickableNode ? "pointer" : "grab",
                     height: NODE_HEIGHT * (isFrontman ? 1.25 : 1.0),
                     width: NODE_WIDTH * (isFrontman ? 1.25 : 1.0),
                     zIndex: getZIndex(1, theme),

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

@@ -0,0 +1,33 @@
+import { FC } from "react";
+export interface AgentNodePopupProps {
+    /** The agent's display name — shown read-only in the dialog header area. */
+    readonly agentName: string;
+    /** Whether the dialog is open. */
+    readonly isOpen: boolean;
+    /** Called when the user closes or cancels the dialog without saving. */
+    readonly onClose: () => void;
+    /**
+     * Called when the user saves the edited fields.
+     * @param agentName The agent's name (unchanged).
+     * @param instructions The updated instructions text.
+     * @param description The updated description text.
+     */
+    readonly onSave: (agentName: string, instructions: string, description: string) => void;
+    /** Initial instructions text shown in the editable field. Defaults to an empty string. */
+    readonly initialInstructions?: string;
+    /** Initial description text shown in the editable field. Defaults to an empty string. */
+    readonly initialDescription?: string;
+    /**
+     * When true the dialog is in a saving state: the Save button is disabled and shows a spinner.
+     * Defaults to false.
+     */
+    readonly isSaving?: boolean;
+}
+/**
+ * A popup dialog for viewing and editing an agent node's instructions and description.
+ *
+ * - Agent name is displayed read-only in the dialog header.
+ * - Both instructions and description are editable.
+ * - Saving is a no-op until the API endpoint is wired up; `onSave` receives the current values.
+ */
+export declare const AgentNodePopup: FC<AgentNodePopupProps>;

package/dist/components/MultiAgentAccelerator/AgentNodePopup.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import LinearProgress from "@mui/material/LinearProgress";
+import TextField from "@mui/material/TextField";
+import { useEffect, useState } from "react";
+import { ConfirmationModal } from "../Common/ConfirmationModal.js";
+import { MUIDialog } from "../Common/MUIDialog.js";
+// #endregion: Types
+/**
+ * A popup dialog for viewing and editing an agent node's instructions and description.
+ *
+ * - Agent name is displayed read-only in the dialog header.
+ * - Both instructions and description are editable.
+ * - Saving is a no-op until the API endpoint is wired up; `onSave` receives the current values.
+ */
+export const AgentNodePopup = ({ agentName, isOpen, onClose, onSave, initialInstructions = "", initialDescription = "", isSaving = false, }) => {
+    const [instructionsText, setInstructionsText] = useState(initialInstructions);
+    const [descriptionText, setDescriptionText] = useState(initialDescription);
+    const isDirty = instructionsText !== initialInstructions || descriptionText !== initialDescription;
+    const [displayConfirmationModal, setDisplayConfirmationModal] = useState(false);
+    // Keep local fields in sync when the dialog opens or if initial values change while open.
+    // Guarding on isOpen prevents resetting the text during the close animation, which would cause a visible flash.
+    useEffect(() => {
+        if (isOpen) {
+            setInstructionsText(initialInstructions);
+            setDescriptionText(initialDescription);
+        }
+    }, [initialInstructions, initialDescription, isOpen]);
+    const handleSave = () => {
+        onSave(agentName, instructionsText, descriptionText);
+    };
+    const handleClose = () => {
+        if (isSaving) {
+            return;
+        }
+        if (isDirty) {
+            setDisplayConfirmationModal(true);
+            return;
+        }
+        setInstructionsText(initialInstructions);
+        setDescriptionText(initialDescription);
+        onClose();
+    };
+    const footer = (_jsx(Box, { sx: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "flex-end",
+            width: "100%",
+            gap: 1,
+        }, children: _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Button, { id: "agent-node-popup-cancel-btn", onClick: handleClose, variant: "outlined", size: "small", disabled: isSaving, children: "Cancel" }), _jsx(Button, { id: "agent-node-popup-save-btn", onClick: handleSave, variant: "contained", size: "small", disabled: isSaving || !isDirty, startIcon: isSaving ? (_jsx(CircularProgress, { size: 14, color: "inherit" })) : undefined, children: isSaving ? "Applying changes…" : "Save" })] }) }));
+    const getConfirmationModal = () => (_jsx(ConfirmationModal, { id: "agent-node-popup-unsaved-changes-modal", cancelBtnLabel: "Discard changes", closeable: false, content: _jsx("p", { children: "You have unsaved edits. Are you sure you want to discard your changes and close the dialog?" }), handleCancel: () => {
+            setDisplayConfirmationModal(false);
+            setInstructionsText(initialInstructions);
+            setDescriptionText(initialDescription);
+            onClose();
+        }, handleOk: handleSave, maskCloseable: false, okBtnLabel: "Save changes", title: "Unsaved Changes" }));
+    return (_jsxs(_Fragment, { children: [displayConfirmationModal && getConfirmationModal(), _jsxs(MUIDialog, { dialogSx: isSaving ? { "& *, & *::before, & *::after": { cursor: "wait !important" } } : undefined, footer: footer, id: "agent-node-popup", isOpen: isOpen, onClose: handleClose, paperProps: { minWidth: "480px", maxWidth: "600px", width: "100%" }, title: agentName, children: [isSaving && (_jsx(LinearProgress, { "aria-label": "Saving agent", sx: { mb: 2, borderRadius: 1 } })), _jsx(TextField, { disabled: isSaving, fullWidth: true, id: "agent-node-popup-description-field", label: "Description", multiline: true, onChange: (e) => setDescriptionText(e.target.value), onKeyDown: (e) => {
+                            if (e.key !== "Escape")
+                                e.stopPropagation();
+                        }, placeholder: "Enter a short description of this agent\u2026", rows: 6, size: "small", sx: { "& .MuiInputBase-input": { fontSize: "0.85rem" } }, value: descriptionText }), _jsx(TextField, { autoFocus: true, disabled: isSaving, fullWidth: true, id: "agent-node-popup-instructions-field", label: "Instructions", multiline: true, onChange: (e) => setInstructionsText(e.target.value), onKeyDown: (e) => {
+                            if (e.key !== "Escape")
+                                e.stopPropagation();
+                        }, placeholder: "Enter instructions for this agent\u2026", rows: 6, size: "small", sx: { "& .MuiInputBase-input": { fontSize: "0.85rem" }, marginTop: 2 }, value: instructionsText })] })] }));
+};

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

@@ -25,12 +25,12 @@ export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
     timestamp: number;
 }>) => ThoughtBubbleEdgeShape[];
 export declare const layoutRadial: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, thoughtBubbleEdges: Map<string, {
+isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
     edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions) => LayoutResult;
+}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;
 export declare const layoutLinear: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, thoughtBubbleEdges: Map<string, {
+isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
     edge: ThoughtBubbleEdgeShape;
     timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions) => LayoutResult;
+}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -21,7 +21,7 @@ import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.js";
 import { NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
 import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
-import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Utils.js";
+import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Common/Utils.js";
 export const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
 export const addThoughtBubbleEdge = (thoughtBubbleEdges, conversationId, edge) => {
     // Add with timestamp for age-based cleanup
@@ -100,7 +100,7 @@ const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAni
     };
 };
 export const layoutRadial = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
+isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Compute depth of each node using breadth-first traversal
@@ -170,8 +170,10 @@ isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
                     }
                     // Plasma edges based on currentConversations (live, cleared at network end)
                     const isEdgeAnimated = areInSameConversation(currentConversations, nodeId, graphNode.id);
-                    // Add edge from parent to node
-                    if (!isAwaitingLlm || isEdgeAnimated) {
+                    // Add edge from parent to node.
+                    // We always show animated edges, all edges when in "idle mode" (not awaiting LLM),
+                    // and all edges in the designer mode preview.
+                    if (!isAwaitingLlm || isAgentNetworkDesignerMode || isEdgeAnimated) {
                         edgesInNetwork.push(getEdgeProperties(graphNode.id, nodeId, sourceHandle, targetHandle, isEdgeAnimated));
                     }
                 }
@@ -188,6 +190,7 @@ isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
                     getConversations: () => currentConversations,
                     isAwaitingLlm,
                     agentIconSuggestion: agentIconSuggestions?.[nodeId],
+                    isTemporaryNetwork,
                 },
                 position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x, y },
                 style: {
@@ -207,7 +210,7 @@ isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
     return { nodes: nodesInNetwork, edges: edgesInNetwork };
 };
 export const layoutLinear = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
+isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
@@ -229,6 +232,7 @@ isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
                 isAwaitingLlm,
                 depth: undefined, // Depth will be computed later,
                 agentIconSuggestion: agentIconSuggestions?.[nodeId],
+                isTemporaryNetwork,
             },
             position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x: 0, y: 0 },
             style: {
@@ -286,9 +290,9 @@ isAwaitingLlm, thoughtBubbleEdges, agentIconSuggestions = null) => {
             depth: xPositions.indexOf(nodeWithPosition.x),
         };
     });
-    // If we're in "awaiting LLM" mode, we filter edges to only include those that are between conversation agents.
-    // Use currentConversations (plasma edges are live and clear at network end)
-    const filteredEdges = isAwaitingLlm
+    // If we're in "awaiting LLM" mode, but not Agent Network Designer mode, we filter edges to only include those
+    // that are between conversation agents. Use currentConversations (plasma edges are live and clear at network end)
+    const filteredEdges = isAwaitingLlm && !isAgentNetworkDesignerMode
         ? edgesInNetwork.filter((edge) => areInSameConversation(currentConversations, edge.source, edge.target))
         : edgesInNetwork;
     // Add thought bubble edges from cache to avoid duplicates across layout recalculations

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

@@ -6,6 +6,7 @@ interface MultiAgentAcceleratorProps {
     };
     readonly backendNeuroSanApiUrl: string;
 }
+export declare const GRACE_PERIOD_MS: number;
 /**
  * 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.