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

package/README.md

@@ -72,7 +72,7 @@ via the chat interface, and visualize the agent network flow.
 Among the technologies and libraries used in this package are:
 
 - ESLint and Prettier (for code quality)
-- Jest and React Testing Library (for testing)
+- Vitest and React Testing Library (for testing)
 - MUI
 - next-auth (for authentication)
 - React
@@ -160,9 +160,9 @@ async function checkServer() {
     const result = await testConnection("https://api.example.com")
 
     if (result.success) {
-        console.log(`Connected! Version: ${result.version}`)
+        console.log(`Connected!`)
     } else {
-        console.error(`Connection failed: ${result.status}`)
+        console.error(`Connection failed: ${result.statusText}`)
     }
 }
 ```

package/dist/components/AgentChat/ChatCommon/ChatCommon.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, Ref, SetStateAction } from "react";
-import { LLMProvider } from "../../../state/Settings.js";
+import { MessageRole } from "./ConversationTurn.js";
 import { CombinedAgentType } from "../Common/Types.js";
 export interface ChatCommonProps {
     /**
@@ -96,14 +96,20 @@ export interface ChatCommonProps {
      */
     readonly sampleQueries?: string[];
     /**
-     * Array of LLM providers for which API keys are required but missing. Only applies to BYOK networks.
+     * If true, indicates that the user is missing API keys for one or more LLM providers.
      */
-    readonly missingApiKeys?: LLMProvider[];
+    readonly hasMissingApiKeys?: boolean;
 }
 export type ChatCommonHandle = {
     handleStop: () => void;
     handleClearChat: () => void;
 };
+/**
+ * Helper function to convert a message role to a label for exporting chat history.
+ * @param role The message role to convert
+ * @returns The label for the message role
+ */
+export declare const roleToExportLabel: (role: MessageRole) => string;
 /**
  * Common chat component for agent chat. This component is used by all agent chat components to provide a consistent
  * experience for users when chatting with agents. It handles user input as well as displaying and nicely formatting

package/dist/components/AgentChat/ChatCommon/ChatCommon.js

@@ -37,7 +37,7 @@ import Typography from "@mui/material/Typography";
 import { isEmpty } from "lodash-es";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { v4 as uuid } from "uuid";
-import { ChatHistory } from "./ChatHistory.js";
+import { ChatHistory, toTurns } from "./ChatHistory.js";
 import { MAX_TURNS } from "./Const.js";
 import { ControlButtons } from "./ControlButtons.js";
 import { Conversation } from "./Conversation.js";
@@ -50,8 +50,10 @@ import { sendLlmRequest, StreamingUnit } from "../../../controller/llm/LlmChat.j
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { useAgentChatHistoryStore } from "../../../state/ChatHistory.js";
 import { useSettingsStore } from "../../../state/Settings.js";
+import { downloadFile, toSafeFilename } from "../../../utils/File.js";
 import { hasOnlyWhitespace } from "../../../utils/text.js";
 import { getZIndex } from "../../../utils/zIndexLayers.js";
+import { ConfirmationModal } from "../../Common/ConfirmationModal.js";
 import { AGENT_NETWORK_DESIGNER_ID } from "../../MultiAgentAccelerator/const.js";
 import { givesFinalAnswer, isLegacyAgentType } from "../Common/Types.js";
 import { chatMessageFromChunk, checkError, cleanUpAgentName, removeTrailingUuid } from "../Common/Utils.js";
@@ -70,14 +72,29 @@ const MAX_AGENT_RETRIES = 3;
  * @returns The final answer from the agent, if it exists or undefined if it doesn't
  */
 const extractFinalAnswer = (response) => /Final Answer: (?<finalAnswerText>.*)/su.exec(response)?.groups?.["finalAnswerText"];
+// List of message roles that are exported when saving chat history.
+const EXPORTED_MESSAGE_TYPES = [MessageRole.User, MessageRole.FinalAnswer, MessageRole.Warning, MessageRole.Error];
+const EXPORT_ROLE_LABELS = {
+    [MessageRole.User]: "User",
+    [MessageRole.Agent]: "Assistant",
+    [MessageRole.FinalAnswer]: "Assistant",
+    [MessageRole.Warning]: "Warning",
+    [MessageRole.Error]: "Error",
+};
 //#endregion
+/**
+ * Helper function to convert a message role to a label for exporting chat history.
+ * @param role The message role to convert
+ * @returns The label for the message role
+ */
+export const roleToExportLabel = (role) => EXPORT_ROLE_LABELS[role];
 /**
  * Common chat component for agent chat. This component is used by all agent chat components to provide a consistent
  * experience for users when chatting with agents. It handles user input as well as displaying and nicely formatting
  * agent responses. Customization for inputs and outputs is provided via event handlers-like props.
  */
 export const ChatCommon = ({ ref, ...props }) => {
-    const { agentPlaceholders = EMPTY, backgroundColor, currentUser, customAgentGreetings = EMPTY, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, missingApiKeys = [], networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, selectedNetwork, setIsAwaitingLlm, setPreviousResponse, setSelectedNetwork, title, } = props;
+    const { agentPlaceholders = EMPTY, backgroundColor, currentUser, customAgentGreetings = EMPTY, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, hasMissingApiKeys = false, networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, selectedNetwork, setIsAwaitingLlm, setPreviousResponse, setSelectedNetwork, title, } = props;
     // MUI theme
     const theme = useTheme();
     // User LLM chat input
@@ -106,6 +123,10 @@ export const ChatCommon = ({ ref, ...props }) => {
     // (see store implementation for details)
     const storedChatHistory = useAgentChatHistoryStore((state) => selectedNetwork ? state?.history?.[selectedNetwork] : undefined);
     const agentChatHistory = useMemo(() => storedChatHistory ?? { chatHistory: [], chatContext: null, slyData: {} }, [storedChatHistory]);
+    // For saving chat history. Specifically, exclude "Agent" messages as they are verbose and not useful in a saved
+    // export.
+    const exportableTurns = turns.filter((turn) => EXPORTED_MESSAGE_TYPES.includes(turn.role));
+    const enableSaveChatButton = turns.length > 0 || agentChatHistory?.chatHistory?.length > 0;
     // Display option for agent/network names
     const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Access store for context items
@@ -475,6 +496,44 @@ export const ChatCommon = ({ ref, ...props }) => {
             resetState();
         }
     }, [addTurn, resetState]);
+    const formatTurns = (items) => items.map((turn) => `${roleToExportLabel(turn.role)}: ${turn.text}`).join("\n\n");
+    /**
+     * Save the current chat history and session to a file
+     */
+    const handleSaveChat = () => {
+        const chatHistory = agentChatHistory?.chatHistory;
+        const chatHistoryTurns = toTurns(chatHistory);
+        // Get the current date and time in a human-readable format, including the local time zone
+        const exportedAt = new Date();
+        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const exportedAtText = exportedAt.toLocaleString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZoneName: "short",
+        });
+        const allHistoryText = [
+            "Chat export",
+            `Network: ${selectedNetwork}`,
+            `Exported: ${exportedAtText} (${timeZone})`,
+            "",
+            "====================",
+            "Previous history",
+            "====================",
+            formatTurns(chatHistoryTurns) || "No persisted chat history.",
+            "",
+            "====================",
+            "Current session",
+            "====================",
+            formatTurns(exportableTurns) || "No current session turns.",
+        ].join("\n");
+        // Download the file
+        const filename = `${toSafeFilename(`${selectedNetwork}-history`)}.txt`;
+        downloadFile(allHistoryText, filename, "text/plain");
+    };
     // Regex to check if user has typed anything besides whitespace
     const userInputEmpty = !chatInput || chatInput.length === 0 || hasOnlyWhitespace(chatInput);
     // Enable Send button when there is user input and not awaiting a response
@@ -483,7 +542,8 @@ export const ChatCommon = ({ ref, ...props }) => {
     const shouldEnableRegenerateButton = previousUserQuery && !isAwaitingLlm;
     // Enable Clear Chat button if not awaiting response and there is chat output to clear
     const enableClearChatButton = !isAwaitingLlm && (turns.length > 0 || agentChatHistory?.chatHistory?.length > 0);
-    const getPlaceholder = () => selectedNetwork ? agentPlaceholders[selectedNetwork] || `Chat with ${networkDisplayName}` : null;
+    const [clearChatConfirmationDialogOpen, setClearChatConfirmationDialogOpen] = useState(false);
+    const getPlaceholder = () => agentPlaceholders[selectedNetwork] || `Chat with ${networkDisplayName}`;
     const handleClearChat = useCallback(() => {
         setTurns([]);
         resetHistory(selectedNetwork);
@@ -563,14 +623,14 @@ export const ChatCommon = ({ ref, ...props }) => {
             right: theme.spacing(3),
             position: "absolute",
             zIndex: getZIndex(2, theme),
-        }, children: _jsx(ControlButtons, { enableClearChatButton: enableClearChatButton, handleClearChat: handleClearChat, handleSend: handleSend, handleStop: handleStop, isAwaitingLlm: isAwaitingLlm, previousUserQuery: previousUserQuery, shouldEnableRegenerateButton: shouldEnableRegenerateButton }) }));
+        }, children: _jsx(ControlButtons, { enableClearChatButton: enableClearChatButton, enableSaveChatButton: enableSaveChatButton, handleClearChat: () => setClearChatConfirmationDialogOpen(true), handleSave: handleSaveChat, handleSend: handleSend, handleStop: handleStop, isAwaitingLlm: isAwaitingLlm, previousUserQuery: previousUserQuery, shouldEnableRegenerateButton: shouldEnableRegenerateButton }) }));
     const getWorkingSpinner = () => (_jsx(_Fragment, { children: isAwaitingLlm && (_jsxs(Box, { id: "awaitingOutputContainer", sx: { display: "flex", alignItems: "center", fontSize: "smaller" }, children: [_jsx("span", { id: "working-span", style: { marginRight: "1rem" }, children: "Working..." }), _jsx(CircularProgress, { id: "awaitingOutputSpinner", sx: {
                         color: "var(--bs-primary)",
                     }, size: "1rem" })] })) }));
     const getThinking = () => (_jsx(_Fragment, { children: !isAwaitingLlm && turns.length > 0 && (
         // Only show thinking once streaming is complete
         _jsx(Thinking, { id: id, turns: turns, useNativeNames: useNativeNames })) }));
-    const getResponseBox = () => (_jsx(Box, { id: "llm-response-div", sx: {
+    const getResponseBox = () => (_jsxs(Box, { id: "llm-response-div", sx: {
             ...divStyle,
             border: "var(--bs-border-width) var(--bs-border-style)",
             borderRadius: "var(--bs-border-radius)",
@@ -579,18 +639,27 @@ export const ChatCommon = ({ ref, ...props }) => {
             marginLeft: "10px",
             position: "relative",
             overflowY: "auto",
-        }, children: _jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
-                backgroundColor,
-                borderRadius: "0.5rem",
-                fontSize: "16px",
-                overflowY: "auto",
-                paddingBottom: "60px",
-                paddingLeft: "15px",
-                paddingRight: "15px",
-                paddingTop: "7.5px",
-                scrollbarGutter: "stable",
-                width: "100%",
-            }, tabIndex: -1, children: [getOptionsMenu(), getOptionsMenuButton(), getChatHistory(), getNetworkIntro(), getAgentGreeting(), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: sampleQueries }), _jsx(Conversation, { id: id, includeAgentMessages: !givesFinalAnswer(selectedNetwork), shouldWrapOutput: shouldWrapOutput, turns: turns }), getThinking(), getWorkingSpinner(), getControlButtons()] }) }));
+        }, children: [clearChatConfirmationDialogOpen ? (_jsx(ConfirmationModal, { id: `${id}-clear-chat-confirmation-modal`, content: "This will clear the current chat session and any persisted chat history for this " +
+                    "network. This operation cannot be undone. Are you sure you wish to continue?", handleCancel: () => {
+                    setClearChatConfirmationDialogOpen(false);
+                }, handleOk: () => {
+                    setClearChatConfirmationDialogOpen(false);
+                    setTurns([]);
+                    resetHistory(selectedNetwork);
+                    setPreviousUserQuery("");
+                    currentResponse.current = "";
+                }, okBtnLabel: "Yes, clear chat", title: `Clear all chat including history for ${networkDisplayName}?` })) : null, _jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
+                    backgroundColor,
+                    borderRadius: "0.5rem",
+                    fontSize: "16px",
+                    overflowY: "auto",
+                    paddingBottom: "60px",
+                    paddingLeft: "15px",
+                    paddingRight: "15px",
+                    paddingTop: "7.5px",
+                    scrollbarGutter: "stable",
+                    width: "100%",
+                }, tabIndex: -1, children: [getOptionsMenu(), getOptionsMenuButton(), getChatHistory(), getNetworkIntro(), getAgentGreeting(), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: sampleQueries }), _jsx(Conversation, { id: id, includeAgentMessages: !givesFinalAnswer(selectedNetwork), shouldWrapOutput: shouldWrapOutput, turns: turns }), getThinking(), getWorkingSpinner(), getControlButtons()] })] }));
     const getUserInputBox = () => (_jsxs(Box, { id: "user-input-div", sx: {
             ...divStyle,
             alignItems: "center",
@@ -642,15 +711,12 @@ export const ChatCommon = ({ ref, ...props }) => {
                         color: "var(--bs-secondary)",
                         fontSize: "1rem",
                     } }) }), "to design your own network!"] }));
-    const allApiKeysPresent = missingApiKeys?.length === 0;
-    const getMissingApiKeysOverlayBody = () => (_jsx(Typography, { component: "span", children: `API key(s) required for: ${missingApiKeys.join(", ")}. Please add the required key(s) in
-                              "Settings" to use this Network.` }));
     return (_jsx(Box, { id: `llm-chat-${id}`, sx: {
             height: "100%",
             position: "relative",
         }, children: selectedNetwork
-            ? allApiKeysPresent
-                ? getChatBox()
-                : getErrorOverlay(getMissingApiKeysOverlayBody())
+            ? hasMissingApiKeys
+                ? getErrorOverlay("")
+                : getChatBox() // Parent will display error for this case
             : getErrorOverlay(getSelectNetworkOverlayBody()) }));
 };

package/dist/components/AgentChat/ChatCommon/ChatHistory.d.ts

@@ -1,9 +1,16 @@
 import { BaseMessage } from "@langchain/core/messages";
 import { FC } from "react";
+import { ConversationTurn } from "./ConversationTurn.js";
 interface ChatHistoryProps {
     readonly messages: BaseMessage[];
     readonly id: string;
 }
+/**
+ * Helper function to convert from BaseMessage format used in persisted chat history to ConversationTurn format used for
+ * rendering the conversation.
+ * @param chatHistory
+ */
+export declare const toTurns: (chatHistory: BaseMessage[]) => ConversationTurn[];
 /**
  * Component for displaying chat history from previous interactions with the agent.
  */

package/dist/components/AgentChat/ChatCommon/ChatHistory.js

@@ -10,7 +10,7 @@ import { AccordionLite } from "../../Common/AccordionLite.js";
  * rendering the conversation.
  * @param chatHistory
  */
-const toTurns = (chatHistory) => chatHistory
+export const toTurns = (chatHistory) => chatHistory
     .filter((message) => message.type === "human" || message.type === "ai")
     .map((message) => {
     const role = message.type === "human" ? MessageRole.User : MessageRole.Agent;

package/dist/components/AgentChat/ChatCommon/ControlButtons.d.ts

@@ -1,10 +1,12 @@
 import { FC } from "react";
 interface ControlButtonsProps {
-    handleClearChat: () => void;
     enableClearChatButton: boolean;
-    isAwaitingLlm: boolean;
+    enableSaveChatButton: boolean;
+    handleClearChat: () => void;
+    handleSave: () => void;
     handleSend: (query: string) => void;
     handleStop: () => void;
+    isAwaitingLlm: boolean;
     previousUserQuery: string;
     shouldEnableRegenerateButton: boolean;
 }

package/dist/components/AgentChat/ChatCommon/ControlButtons.js

@@ -16,14 +16,20 @@ limitations under the License.
 */
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import Loop from "@mui/icons-material/Loop";
+import SaveIcon from "@mui/icons-material/Save";
 import StopCircle from "@mui/icons-material/StopCircle";
 import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
 import { SmallLlmChatButton } from "../Common/LlmChatButton.js";
 //#endregion: Types
 /**
  * Generate the Control Buttons for a chat window (resend, clear chat, stop)
  * @returns A fragment containing the Control Buttons.
  */
-export const ControlButtons = ({ handleClearChat, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsx(_Fragment, { children: isAwaitingLlm ? (
+export const ControlButtons = ({ enableClearChatButton, enableSaveChatButton, handleClearChat, handleSave, handleSend, handleStop, isAwaitingLlm, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsx(_Fragment, { children: isAwaitingLlm ? (
     // Stop Button
-    _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon" }) })) : (_jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, children: _jsx(DeleteOutlined, { fontSize: "small", id: "stop-button-icon" }) }), _jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), children: _jsx(Loop, { fontSize: "small", id: "generate-icon" }) })] })) }));
+    _jsx(Tooltip, { title: "Terminate request", children: _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon" }) }) })) : (_jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Tooltip, { title: "Save Chat", children: _jsx("span", { children: _jsx(SmallLlmChatButton, { "aria-label": "Save Chat", disabled: !enableSaveChatButton, id: "save-chat-button", onClick: handleSave, children: _jsx(SaveIcon, { fontSize: "small", id: "save-button-icon" }) }) }) }), _jsx(Tooltip, { title: "Clear Chat", children: _jsx("span", { children: _jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, children: _jsx(DeleteOutlined, { fontSize: "small", id: "stop-button-icon", sx: {
+                                "&:hover": {
+                                    color: "error.main",
+                                },
+                            } }) }) }) }), _jsx(Tooltip, { title: "Resend last query", children: _jsx("span", { children: _jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), children: _jsx(Loop, { fontSize: "small", id: "generate-icon" }) }) }) })] })) }));

package/dist/components/AgentChat/ChatCommon/ConversationTurn.d.ts

@@ -3,11 +3,11 @@ import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js"
  * The various messages roles in a conversation turn.
  */
 export declare enum MessageRole {
-    "Agent" = "Agent",
-    "Error" = "Error",
-    "FinalAnswer" = "FinalAnswer",
-    "User" = "User",
-    "Warning" = "Warning"
+    Agent = "Agent",
+    Error = "Error",
+    FinalAnswer = "FinalAnswer",
+    User = "User",
+    Warning = "Warning"
 }
 /**
  * Represents a single turn in a conversation, which may include a message from the user or agent, or an error

package/dist/components/AgentChat/ChatCommon/ConversationTurn.js

@@ -4,6 +4,7 @@
 export var MessageRole;
 (function (MessageRole) {
     MessageRole["Agent"] = "Agent";
+    // eslint-disable-next-line no-shadow
     MessageRole["Error"] = "Error";
     MessageRole["FinalAnswer"] = "FinalAnswer";
     MessageRole["User"] = "User";

package/dist/components/AgentChat/Common/Utils.d.ts

@@ -3,6 +3,10 @@ export declare const KNOWN_MESSAGE_TYPES: ChatMessageType[];
 export declare const KNOWN_MESSAGE_TYPES_FOR_PLASMA: ChatMessageType[];
 export declare const chatMessageFromChunk: (chunk: string) => ChatMessage | null;
 export declare const checkError: (chatMessageJson: Record<string, unknown>) => string | null;
+/**
+ * Strip a trailing canonical (hyphen-delimited) UUID appended to an agent name or
+ * reservation_id, e.g. `copy_cat-hello_world-14ecb260-4389-44f3-afad-ea315dfa1966`.
+ */
 export declare const removeTrailingUuid: (agentName: string) => string;
 /**
  * Convert FOO_BAR to more human "Foo Bar".

package/dist/components/AgentChat/Common/Utils.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { isEmpty } from "lodash-es";
-import startCase from "lodash-es/startCase.js";
+import startCase from "lodash-es/startCase";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // We ignore any messages that are not of these types
 export const KNOWN_MESSAGE_TYPES = [
@@ -60,6 +60,10 @@ export const checkError = (chatMessageJson) => {
     const { error, traceback, tool } = chatMessageJson;
     return `Error occurred. Error: "${error}", traceback: "${traceback}", tool: "${tool}"`;
 };
+/**
+ * Strip a trailing canonical (hyphen-delimited) UUID appended to an agent name or
+ * reservation_id, e.g. `copy_cat-hello_world-14ecb260-4389-44f3-afad-ea315dfa1966`.
+ */
 export const removeTrailingUuid = (agentName) => {
     return agentName?.replace(/-[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/u, "");
 };

package/dist/components/Common/Breadcrumbs.js

@@ -18,7 +18,7 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import startCase from "lodash-es/startCase.js";
+import startCase from "lodash-es/startCase";
 export const NeuroAIBreadcrumbs = ({ pathname }) => {
     const urlPaths = pathname?.split("/").filter((path) => path !== "");
     const pageName = startCase(urlPaths?.at(-1));

package/dist/components/Common/notification.d.ts

@@ -1,10 +1,10 @@
 import { SnackbarOrigin } from "notistack";
 import { JSX as ReactJSX } from "react";
 export declare enum NotificationType {
-    "success" = 0,
-    "info" = 1,
-    "warning" = 2,
-    "error" = 3
+    success = 0,
+    info = 1,
+    warning = 2,
+    error = 3
 }
 export declare const closeNotification: () => void;
 /**

package/dist/components/MultiAgentAccelerator/{AgentFlow.d.ts → AgentFlow/AgentFlow.d.ts}

@@ -1,9 +1,11 @@
+import { NodeChange, Node as RFNode } from "@xyflow/react";
 import { Dispatch, FC, SetStateAction } from "react";
-import { AgentConversation } from "./AgentConversations.js";
-import { AgentNetworkDefinitionEntry } from "./const.js";
-import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
-import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
-import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentConversation } from "../AgentConversations.js";
+import { AgentNodeProps } from "./AgentNode.js";
+import { AgentNetworkDefinitionEntry } from "../const.js";
+import { AgentIconSuggestions } from "../../../controller/Types/AgentIconSuggestions.js";
+import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { ThoughtBubbleEdgeShape } from "../ThoughtBubbles/ThoughtBubbleEdge.js";
 export interface AgentFlowProps {
     readonly agentCounts?: Map<string, number>;
     readonly agentIconSuggestions?: AgentIconSuggestions;
@@ -40,4 +42,12 @@ export interface AgentFlowProps {
     }>>>;
 }
 export declare const DOCK_BANNER_AUTO_DISMISS_MS = 5000;
+/**
+ * Filters node events based on the current mode. Don't allow any topological-modifying events (adding, deleting nodes)
+ * and in Agent Network Designer mode, don't allow dragging nodes (position changes) either.
+ * @param change The node change event to filter.
+ * @param isAgentNetworkDesignerMode Whether the flow is in Agent Network Designer mode (read-only preview).
+ * @return True if the event should be allowed, false if it should be filtered out.
+ */
+export declare const filterNodeEvents: (change: NodeChange<RFNode<AgentNodeProps>>, isAgentNetworkDesignerMode: boolean) => boolean;
 export declare const AgentFlow: FC<AgentFlowProps>;

package/dist/components/MultiAgentAccelerator/{AgentFlow.js → AgentFlow/AgentFlow.js}

@@ -35,32 +35,32 @@ 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 { 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, LEVEL_SPACING, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING, } from "../const.js";
 import { addThoughtBubbleEdge, layoutLinear, layoutRadial } from "./GraphLayouts.js";
 import { PlasmaEdge } from "./PlasmaEdge.js";
-import { convertReservationsToNetworks, extractNetworkHocon, extractReservations, isEditableAgent, mergeNetworks, } 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 { usePalette, useSettingsStore } from "../../state/Settings.js";
-import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
-import { getZIndex } from "../../utils/zIndexLayers.js";
-import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
-import { MUIAlert } from "../Common/MUIAlert.js";
-import { NotificationType, sendNotification } from "../Common/notification.js";
-// #endregion: Types
-// #region: Constants
+import { sendChatQuery } from "../../../controller/agent/Agent.js";
+import { StreamingUnit } from "../../../controller/llm/LlmChat.js";
+import { useAgentChatHistoryStore } from "../../../state/ChatHistory.js";
+import { usePalette, useSettingsStore } from "../../../state/Settings.js";
+import { useTempNetworksStore } from "../../../state/TemporaryNetworks.js";
+import { getZIndex } from "../../../utils/zIndexLayers.js";
+import { chatMessageFromChunk } from "../../AgentChat/Common/Utils.js";
+import { MUIAlert } from "../../Common/MUIAlert.js";
+import { NotificationType, sendNotification } from "../../Common/notification.js";
+import { AgentNodePopup } from "../AgentNodePopup.js";
+import { convertReservationsToNetworks, extractNetworkHocon, extractReservations, isEditableAgent, mergeNetworks, } from "../TemporaryNetworks.js";
+import { ThoughtBubbleEdge } from "../ThoughtBubbles/ThoughtBubbleEdge.js";
+import { ThoughtBubbleOverlay } from "../ThoughtBubbles/ThoughtBubbleOverlay.js";
+//#endregion: Types
+//#region: Constants
 // Timeout for thought bubbles is set to 10 seconds
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
 // How long the dock's status banner stays visible before auto-dismissing. Error banners persist until dismissed.
 // Exported for tests.
 export const DOCK_BANNER_AUTO_DISMISS_MS = 5_000;
-// #endregion: Constants
 const DOCK_PROMPT_PLACEHOLDER = "Describe a change to the network";
-// #region: Helpers
+//#endregion: Constants
+//#region: Helpers
 /**
  * Streams the Agent Network Designer endpoint with a natural-language prompt and the current
  * network definition, collecting any returned reservations.
@@ -86,7 +86,22 @@ const streamNetworkDesignerPrompt = async (neuroSanURL, signal, userPrompt, curr
     }, currentUser, StreamingUnit.Line);
     return newNetworks;
 };
-// #endregion: Helpers
+/**
+ * Filters node events based on the current mode. Don't allow any topological-modifying events (adding, deleting nodes)
+ * and in Agent Network Designer mode, don't allow dragging nodes (position changes) either.
+ * @param change The node change event to filter.
+ * @param isAgentNetworkDesignerMode Whether the flow is in Agent Network Designer mode (read-only preview).
+ * @return True if the event should be allowed, false if it should be filtered out.
+ */
+export const filterNodeEvents = (change, isAgentNetworkDesignerMode) => {
+    // Only allow nodes to be dragged, no topological edits to the graph (read-only)
+    if (["remove", "add", "replace"].includes(change.type))
+        return false;
+    // Disallow dragging nodes in AND mode since it's supposed to be a read-only preview but
+    // pass along all other event types as
+    return !(change.type === "position" && isAgentNetworkDesignerMode);
+};
+//#endregion: Helpers
 export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, currentUser, id, isAgentNetworkDesignerMode, isAwaitingLlm, isEditMode, isStreaming, isSelectedNetworkTemporary: isTemporaryNetwork, networkDisplayName, networkId, neuroSanURL, onEnterEditMode, onNetworkReplaced, onExitEditMode, onSaveAgent, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
     const theme = useTheme();
     const { fitView } = useReactFlow();
@@ -466,10 +481,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 50);
     }, [agentsInNetwork, fitView, layout]);
     const onNodesChange = useCallback((changes) => {
-        setNodes((currentNodes) => applyNodeChanges(
-        // For now, we only allow dragging, no updates. In agent network designer mode, it 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));
+        setNodes((currentNodes) => applyNodeChanges(changes.filter((change) => filterNodeEvents(change, isAgentNetworkDesignerMode)), currentNodes));
     }, [isAgentNetworkDesignerMode]);
     const transform = useStore((state) => state.transform);
     // Why not just a "const"? See: https://reactflow.dev/learn/customization/custom-nodes
@@ -529,7 +541,6 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                     }, size: "small", sx: {
                         marginLeft: theme.spacing(2),
                         "& .MuiToggleButton-root": {
-                            backgroundColor: theme.palette.background.paper,
                             borderColor: theme.palette.divider,
                             color: theme.palette.text.primary,
                             minHeight: 22,
@@ -554,7 +565,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                                 height: "1rem",
                             }, children: "Heatmap" })] })] }));
     };
-    // Get the background color for the control buttons based on the layout and dark mode setting
+    // Get the background color for the control buttons; differs based on whether the button is active or not
     const getControlButtonBackgroundColor = (isActive) => {
         return isActive ? theme.palette.action.selected : undefined;
     };
@@ -593,12 +604,10 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             }, children: [_jsx(Tooltip, { title: networkDisplayName, placement: "top", children: _jsx(Box, { sx: { pointerEvents: "auto" }, children: _jsx(Typography, { id: `${id}-network-title`, variant: "subtitle1", sx: {
                                 backdropFilter: "blur(6px)",
                                 backgroundColor: titleBackgroundColor,
-                                border: `1px solid ${alpha(theme.palette.divider, 0.6)}`,
+                                border: `1px solid ${alpha(theme.palette.divider, 0.75)}`,
                                 borderRadius: 2,
-                                boxShadow: theme.palette.mode === "dark"
-                                    ? `0 6px 20px ${alpha(theme.palette.common.black, 0.35)}`
-                                    : `0 6px 16px ${alpha(theme.palette.common.black, 0.12)}`,
-                                color: theme.palette.getContrastText(alpha(titleBackgroundColor, 0.65)),
+                                boxShadow: theme.shadows[6],
+                                color: theme.palette.text.primary,
                                 fontWeight: 600,
                                 letterSpacing: "0.01em",
                                 lineHeight: 1.35,
@@ -623,18 +632,18 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             "& .react-flow__node": {
                 border: "1px solid divider",
             },
-            "& .react-flow__panel": {
+            "& .react-flow__panel, & .react-flow__controls-button": {
                 backgroundColor: theme.palette.background.paper,
-                border: "1px solid divider",
                 color: theme.palette.text.primary,
             },
+            "& .react-flow__panel": {
+                border: "1px solid divider",
+            },
             "& .react-flow__controls-button": {
-                backgroundColor: theme.palette.background.paper,
                 borderBottom: "1px solid divider",
-                color: theme.palette.text.primary,
                 fill: theme.palette.text.primary,
             },
-        }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _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 && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { sx: {
+        }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _jsx(ReactFlow, { connectionMode: ConnectionMode.Loose, edgeTypes: edgeTypes, edges: edges, fitView: true, id: `${id}-react-flow`, nodeTypes: nodeTypes, nodes: nodes, nodesDraggable: !isAgentNetworkDesignerMode, onNodeClick: handleNodeClick, onNodesChange: onNodesChange, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { sx: {
                     backdropFilter: "blur(8px)",
                     backgroundColor: alpha(theme.palette.background.paper, 0.2),
                     borderTop: `2px solid ${theme.palette.primary.main}`,

package/dist/components/MultiAgentAccelerator/{AgentNode.d.ts → AgentFlow/AgentNode.d.ts}

@@ -1,7 +1,7 @@
 import { NodeProps } from "@xyflow/react";
 import type { Node as RFNode } from "@xyflow/react";
 import { FC } from "react";
-import { AgentConversation } from "./AgentConversations.js";
+import { AgentConversation } from "../AgentConversations.js";
 export interface AgentNodeProps extends Record<string, unknown> {
     readonly agentCounts?: Map<string, number>;
     readonly agentName: string;

package/dist/components/MultiAgentAccelerator/{AgentNode.js → AgentFlow/AgentNode.js}

@@ -28,10 +28,10 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
 import { useState } from "react";
-import { DisplayAs } from "./const.js";
-import { usePalette, useSettingsStore } from "../../state/Settings.js";
-import { isLightColor } from "../../Theme/Theme.js";
-import { getZIndex } from "../../utils/zIndexLayers.js";
+import { usePalette, useSettingsStore } from "../../../state/Settings.js";
+import { isLightColor } from "../../../Theme/Theme.js";
+import { getZIndex } from "../../../utils/zIndexLayers.js";
+import { DisplayAs } from "../const.js";
 // A zero-width space character, used to give the browser a hint where to break long names
 const ZERO_WIDTH_SPACE = "\u200B";
 // Node dimensions

package/dist/components/MultiAgentAccelerator/{GraphLayouts.d.ts → AgentFlow/GraphLayouts.d.ts}

@@ -1,9 +1,9 @@
 import { Edge, Node as RFNode } from "@xyflow/react";
-import { AgentConversation } from "./AgentConversations.js";
+import { AgentConversation } from "../AgentConversations.js";
 import { AgentNodeProps } from "./AgentNode.js";
-import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
-import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
-import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentIconSuggestions } from "../../../controller/Types/AgentIconSuggestions.js";
+import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { ThoughtBubbleEdgeShape } from "../ThoughtBubbles/ThoughtBubbleEdge.js";
 export declare const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
 /**
  * Result of the layout algorithms, containing the nodes and edges with their computed positions and properties.