@cognizant-ai-lab/ui-common 1.8.0 → 1.10.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,14 +50,17 @@ 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 { toDisplayName } from "../../../utils/AgentName.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";
+import { chatMessageFromChunk, checkError } from "../Common/Utils.js";
 import { MicrophoneButton } from "../VoiceChat/MicrophoneButton.js";
 import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "../VoiceChat/VoiceChat.js";
-//#endregion
+//#endregion Types and Interfaces
 //#region Constants
 // Define fancy EMPTY constant to avoid linter error about using object literals as default props
 const EMPTY = {};
@@ -70,14 +73,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"];
-//#endregion
+// 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 Constants
+/**
+ * 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 +124,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
@@ -142,7 +164,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
+    const networkDisplayName = useMemo(() => toDisplayName(selectedNetwork, useNativeNames), [selectedNetwork, useNativeNames]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -475,6 +497,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 +543,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 +624,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 +640,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 +712,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/ChatCommon/Thinking.js

@@ -5,8 +5,8 @@ import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import { MessageRole } from "./ConversationTurn.js";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { toDisplayName } from "../../../utils/AgentName.js";
 import { AccordionLite } from "../../Common/AccordionLite.js";
-import { cleanUpAgentName, removeTrailingUuid } from "../Common/Utils.js";
 /**
  * Set of message types that should be included in the "thinking" section.
  */
@@ -19,7 +19,7 @@ const THINKING_MESSAGE_TYPES = new Set([
 const DEFAULT_AGENT_NAME = "agent";
 const formatTurn = (turn, useNativeNames) => {
     const agentName = turn.agentName ?? DEFAULT_AGENT_NAME;
-    const displayName = useNativeNames ? agentName : cleanUpAgentName(removeTrailingUuid(agentName));
+    const displayName = toDisplayName(agentName, useNativeNames);
     const headerLine = `**${displayName}**: ${turn.text || ""}`;
     const structureLine = turn.structure == null ? "" : `\n\`${JSON.stringify(turn.structure, null, 2)}\``;
     return `${headerLine}${structureLine}`;

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

@@ -3,10 +3,3 @@ 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;
-export declare const removeTrailingUuid: (agentName: string) => string;
-/**
- * Convert FOO_BAR to more human "Foo Bar".
- * @param agentName Agent name in SNAKE_CASE format.
- * @returns User-friendly agent name.
- */
-export declare const cleanUpAgentName: (agentName: string) => string;

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

@@ -14,7 +14,6 @@ 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 { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // We ignore any messages that are not of these types
 export const KNOWN_MESSAGE_TYPES = [
@@ -60,14 +59,3 @@ export const checkError = (chatMessageJson) => {
     const { error, traceback, tool } = chatMessageJson;
     return `Error occurred. Error: "${error}", traceback: "${traceback}", tool: "${tool}"`;
 };
-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, "");
-};
-/**
- * Convert FOO_BAR to more human "Foo Bar".
- * @param agentName Agent name in SNAKE_CASE format.
- * @returns User-friendly agent name.
- */
-export const cleanUpAgentName = (agentName) => {
-    return startCase(agentName);
-};

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/Footer.js

@@ -7,6 +7,8 @@ import { navigateToUrl } from "../../utils/BrowserNavigation.js";
 const HeaderLine = styled("h6")({
     fontWeight: "bold",
     fontSize: "smaller",
+    margin: 0,
+    marginBottom: "0.9rem",
 });
 const LinkDivider = styled("div")({
     border: "1px solid var(--bs-accent3-medium)",
@@ -16,6 +18,7 @@ const LinkDivider = styled("div")({
 const FooterSectionHeader = styled("div")({
     display: "inline-flex",
     flexDirection: "column",
+    alignItems: "flex-start",
     marginTop: "0.1rem",
 });
 const FooterItemLink = styled("a")(({ theme }) => ({
@@ -31,6 +34,7 @@ const FooterItemLink = styled("a")(({ theme }) => ({
 const FooterContainer = styled("footer")({
     backgroundColor: "var(--bs-primary)",
     borderTop: "var(--bs-border-width) var(--bs-border-style) var(--bs-gray-lighter)",
+    alignItems: "flex-start",
     columnGap: "60px",
     display: "flex",
     justifyContent: "center",

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>;