@cognizant-ai-lab/ui-common 1.7.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/Theme/Palettes.d.ts

@@ -7,12 +7,3 @@ export declare const PALETTES: {
     coldToHot: string[];
     visionImpaired: string[];
 };
-export type PaletteKey = keyof typeof PALETTES | "brand";
-/**
- * Custom hook to get the current color palette based on user settings.
- * If the user has selected custom branding, it will return the palette for that.
- * Otherwise, it will return one of the predefined palettes from the PALETTES object based on the user's selection.
- *
- * @returns An array of color hex codes representing the current color palette.
- */
-export declare const usePalette: () => string[];

package/dist/Theme/Palettes.js

@@ -1,5 +1,4 @@
 // Palettes for progressive coloring of nodes based on depth or heatmap value
-import { useSettingsStore } from "../state/Settings.js";
 export const PALETTES = {
     blue: [
         "#f7fbff",
@@ -75,20 +74,3 @@ export const PALETTES = {
         "#b6dbff",
     ],
 };
-/**
- * Custom hook to get the current color palette based on user settings.
- * If the user has selected custom branding, it will return the palette for that.
- * Otherwise, it will return one of the predefined palettes from the PALETTES object based on the user's selection.
- *
- * @returns An array of color hex codes representing the current color palette.
- */
-export const usePalette = () => {
-    const brandPalette = useSettingsStore((state) => state.settings.branding.rangePalette);
-    const paletteKey = useSettingsStore((state) => state.settings.appearance.rangePalette);
-    if (paletteKey === "brand" && brandPalette) {
-        return brandPalette;
-    }
-    else {
-        return PALETTES[paletteKey];
-    }
-};

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 {
     /**
@@ -22,6 +22,10 @@ export interface ChatCommonProps {
      * The network to send the request to.
      */
     readonly selectedNetwork: string | null;
+    /**
+     * Setter for changing the selected network.
+     */
+    readonly setSelectedNetwork?: (network: string | null) => void;
     /**
      * Special endpoint for legacy agents since they do not have a single unified endpoint like Neuro-san agents.
      */
@@ -92,15 +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;
 };
-export declare const MAX_TURNS = 50;
+/**
+ * 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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
 Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
 
@@ -18,6 +18,7 @@ limitations under the License.
  * See main function description.
  */
 import { AIMessage, HumanMessage } from "@langchain/core/messages";
+import AddBoxRounded from "@mui/icons-material/AddBoxRounded";
 import ClearIcon from "@mui/icons-material/Clear";
 import CloseIcon from "@mui/icons-material/Close";
 import TuneIcon from "@mui/icons-material/Tune";
@@ -36,7 +37,8 @@ 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";
 import { MessageRole } from "./ConversationTurn.js";
@@ -47,11 +49,18 @@ import { sendChatQuery } from "../../../controller/agent/Agent.js";
 import { sendLlmRequest, StreamingUnit } from "../../../controller/llm/LlmChat.js";
 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";
 import { MicrophoneButton } from "../VoiceChat/MicrophoneButton.js";
 import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "../VoiceChat/VoiceChat.js";
+//#endregion
+//#region Constants
 // Define fancy EMPTY constant to avoid linter error about using object literals as default props
 const EMPTY = {};
 // How many times to retry the entire agent interaction process. Some networks have a well-defined success condition.
@@ -63,15 +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"];
-// Maximum number of turns to save
-export const MAX_TURNS = 50;
+// 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 { customAgentGreetings = EMPTY, agentPlaceholders = EMPTY, backgroundColor, currentUser, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, missingApiKeys = [], networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, setIsAwaitingLlm, setPreviousResponse, selectedNetwork, 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
@@ -100,6 +123,12 @@ 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
     const updateChatContext = useAgentChatHistoryStore((state) => state.updateChatContext);
     const updateChatHistory = useAgentChatHistoryStore((state) => state.updateChatHistory);
@@ -134,7 +163,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const agentDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
+    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -169,7 +198,11 @@ export const ChatCommon = ({ ref, ...props }) => {
     const legacyTurnIdRef = useRef(null);
     const handleLegacyAgentChunk = useCallback((chunk) => {
         currentResponse.current += chunk;
-        if (!legacyTurnIdRef.current) {
+        if (legacyTurnIdRef.current) {
+            // We already have a turn for this response, so just update the text of that turn.
+            setTurns((prev) => prev.map((t) => (t.id === legacyTurnIdRef.current ? { ...t, text: currentResponse.current } : t)));
+        }
+        else {
             // We don't yet have a turn for this response, so create one. On subsequent chunks, we'll just
             // update the text of this turn.
             legacyTurnIdRef.current = uuid();
@@ -180,10 +213,6 @@ export const ChatCommon = ({ ref, ...props }) => {
                 text: currentResponse.current,
             });
         }
-        else {
-            // We already have a turn for this response, so just update the text of that turn.
-            setTurns((prev) => prev.map((t) => (t.id === legacyTurnIdRef.current ? { ...t, text: currentResponse.current } : t)));
-        }
     }, [addTurn]);
     const handleNeuroSanAgentChunk = useCallback((chunk) => {
         // For Neuro-san agents, we expect a ChatMessage structure in the chunk.
@@ -219,9 +248,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             // This is the normal happy path for an incoming message.
             // The backend sometimes sends messages with no text content, and we don't want to display those to the
             // user. Agent name is the last tool in the origin array. If it's not there, use a default name.
-            const agentName = chatMessage.origin?.length > 0
-                ? cleanUpAgentName(chatMessage.origin[chatMessage.origin.length - 1].tool)
-                : "Agent";
+            const agentName = chatMessage.origin?.at(-1)?.tool ?? "agent";
             addTurn({
                 agentName,
                 id: uuid(),
@@ -283,8 +310,8 @@ export const ChatCommon = ({ ref, ...props }) => {
                 else {
                     // It's a Neuro-san agent.
                     // Some coded tools (data generator...) expect the username provided in slyData.
-                    const slyDataWithUserName = { ...agentChatHistory?.slyData, ...extraSlyData, login: currentUser };
-                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, selectedNetwork, handleChunk, agentChatHistory.chatContext, slyDataWithUserName, currentUser, StreamingUnit.Line);
+                    const slyDataWithUsername = { ...agentChatHistory?.slyData, ...extraSlyData, login: currentUser };
+                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, selectedNetwork, handleChunk, agentChatHistory.chatContext, slyDataWithUsername, currentUser, StreamingUnit.Line);
                 }
             }
             catch (error) {
@@ -469,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
@@ -477,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 ${agentDisplayName}` : null;
+    const [clearChatConfirmationDialogOpen, setClearChatConfirmationDialogOpen] = useState(false);
+    const getPlaceholder = () => agentPlaceholders[selectedNetwork] || `Chat with ${networkDisplayName}`;
     const handleClearChat = useCallback(() => {
         setTurns([]);
         resetHistory(selectedNetwork);
@@ -495,7 +561,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             left: 0,
             right: 0,
             bottom: 0,
-            zIndex: theme.zIndex.modal - 1,
+            zIndex: getZIndex(2, theme),
             cursor: "not-allowed",
             // Capture all pointer events to prevent interaction with the chat when no agent is selected
             pointerEvents: "all",
@@ -516,14 +582,17 @@ export const ChatCommon = ({ ref, ...props }) => {
             paddingTop: "0.25rem",
             paddingBottom: "0.25rem",
         }, children: [_jsx(Typography, { id: `llm-chat-title-${id}-text`, sx: { fontSize: "0.9rem" }, children: title }), onClose && (_jsx(IconButton, { "data-testid": `close-button-${id}`, id: `close-button-${id}`, onClick: onClose, children: _jsx(CloseIcon, { id: `close-icon-${id}` }) }))] }));
-    const getOptionsMenuButton = () => (_jsx(Box, { sx: {
+    const getOptionsMenuButton = () => (_jsx(Box, { id: `${id}-options-menu-button-container`, sx: {
+            backgroundColor: theme.palette.background.paper,
+            borderRadius: "var(--bs-border-radius)",
             position: "absolute",
-            top: "0.25rem",
-            right: "0.0rem",
+            right: theme.spacing(2.5),
+            top: theme.spacing(1),
+            zIndex: getZIndex(2, theme),
         }, children: _jsx(IconButton, { onClick: (e) => {
                 setOptionsMenuAnchorEl(e.currentTarget);
                 setOptionsMenuOpen(true);
-            }, children: _jsx(TuneIcon, { sx: { fontSize: "1.2rem" } }) }) }));
+            }, children: _jsx(TuneIcon, { fontSize: "small" }) }) }));
     const agentGreeting = customAgentGreetings[selectedNetwork] ?? "Hi, how can I help?";
     const handleOptionsMenuClose = () => {
         setOptionsMenuAnchorEl(null);
@@ -546,6 +615,21 @@ export const ChatCommon = ({ ref, ...props }) => {
                 },
             },
         }, children: [_jsxs(MenuItem, { onClick: handleToggleAutoScroll, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: autoScrollEnabled, tabIndex: -1, sx: { pointerEvents: "none" } }) }), _jsx(ListItemText, { primary: "Auto-scroll output" })] }), _jsxs(MenuItem, { onClick: handleToggleWrapOutput, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: shouldWrapOutput, tabIndex: -1, sx: { pointerEvents: "none" } }) }), _jsx(ListItemText, { primary: "Wrap output" })] })] }));
+    const getNetworkIntro = () => (_jsxs(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem" }, children: [_jsxs(Typography, { component: "span", sx: { fontWeight: 700 }, variant: "inherit", children: [networkDisplayName, networkDescription && ":"] }), networkDescription && (_jsxs(Typography, { component: "span", sx: { ml: 0.5 }, variant: "inherit", children: [" ", networkDescription] }))] }));
+    const getChatHistory = () => (_jsx(_Fragment, { children: agentChatHistory?.chatHistory?.length > 0 && (_jsx(Box, { sx: { my: "0.5rem" }, children: _jsx(ChatHistory, { id: id, messages: agentChatHistory.chatHistory }) })) }));
+    const getAgentGreeting = () => _jsx(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem" }, children: agentGreeting });
+    const getControlButtons = () => (_jsx(Box, { sx: {
+            bottom: theme.spacing(3),
+            right: theme.spacing(3),
+            position: "absolute",
+            zIndex: getZIndex(2, theme),
+        }, 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 = () => (_jsxs(Box, { id: "llm-response-div", sx: {
             ...divStyle,
             border: "var(--bs-border-width) var(--bs-border-style)",
@@ -555,7 +639,16 @@ export const ChatCommon = ({ ref, ...props }) => {
             marginLeft: "10px",
             position: "relative",
             overflowY: "auto",
-        }, children: [_jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
+        }, 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",
@@ -566,16 +659,12 @@ export const ChatCommon = ({ ref, ...props }) => {
                     paddingTop: "7.5px",
                     scrollbarGutter: "stable",
                     width: "100%",
-                }, tabIndex: -1, children: [getOptionsMenu(), getOptionsMenuButton(), agentChatHistory?.chatHistory?.length > 0 && (_jsx(ChatHistory, { id: id, messages: agentChatHistory.chatHistory })), _jsxs(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem", color: "var(--bs-gray)" }, children: [_jsxs(Typography, { component: "span", sx: { fontWeight: 700 }, variant: "inherit", children: [selectedNetwork, networkDescription && ":"] }), networkDescription && (_jsxs(Typography, { component: "span", sx: { ml: 0.5 }, variant: "inherit", children: [" ", networkDescription] }))] }), _jsx(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem" }, children: agentGreeting }), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: sampleQueries }), _jsx(Conversation, { id: id, includeAgentMessages: !givesFinalAnswer(selectedNetwork), shouldWrapOutput: shouldWrapOutput, turns: turns }), !isAwaitingLlm && turns.length > 0 && (
-                    // Only show thinking once streaming is complete
-                    _jsx(Thinking, { id: id, turns: turns })), 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" })] }))] }), _jsx(ControlButtons, { enableClearChatButton: enableClearChatButton, handleClearChat: handleClearChat, handleSend: handleSend, handleStop: handleStop, isAwaitingLlm: isAwaitingLlm, previousUserQuery: previousUserQuery, shouldEnableRegenerateButton: shouldEnableRegenerateButton })] }));
+                }, 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",
             display: "flex",
             margin: "10px",
-            alignItems: "flex-end",
             position: "relative",
         }, children: [_jsx(Input, { autoComplete: "off", id: "user-input", multiline: true, placeholder: getPlaceholder(), ref: chatInputRef, sx: {
                     border: "var(--bs-border-style) var(--bs-border-width) var(--bs-gray-light)",
@@ -604,7 +693,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                             }, sx: {
                                 color: "var(--bs-primary)",
                                 opacity: userInputEmpty ? "25%" : "100%",
-                            }, disabled: userInputEmpty, tabIndex: -1, edge: "end", children: _jsx(ClearIcon, { id: "clear-input-icon" }) })] }) }), _jsx(MicrophoneButton, { isMicOn: isMicOn, onMicToggle: setIsMicOn, speechRecognitionRef: speechRecognitionRef, voiceInputState: voiceInputState, setVoiceInputState: setVoiceInputState }), _jsx(SendButton, { enableSendButton: shouldEnableSendButton, id: "submit-query-button", onClickCallback: () => handleSend(chatInput) })] }));
+                            }, disabled: userInputEmpty, tabIndex: -1, edge: "end", children: _jsx(ClearIcon, { id: "clear-input-icon" }) })] }) }), _jsxs(Box, { sx: { display: "flex", gap: "0.25rem", position: "relative", alignItems: "center" }, children: [_jsx(MicrophoneButton, { isMicOn: isMicOn, onMicToggle: setIsMicOn, setVoiceInputState: setVoiceInputState, speechRecognitionRef: speechRecognitionRef, voiceInputState: voiceInputState }), _jsx(SendButton, { enableSendButton: shouldEnableSendButton, id: "submit-query-button", onClickCallback: () => handleSend(chatInput) })] })] }));
     const getChatBox = () => (_jsxs(Box, { id: `llm-chat-${id}`, sx: {
             display: "flex",
             flexDirection: "column",
@@ -614,16 +703,20 @@ export const ChatCommon = ({ ref, ...props }) => {
             pointerEvents: selectedNetwork ? "auto" : "none",
             position: "relative",
         }, children: [title && getTitle(), getResponseBox(), getUserInputBox()] }));
+    const getSelectNetworkOverlayBody = () => (_jsxs(Typography, { component: "span", children: ["Please select a Network from the list to start the chat, or click", _jsx(IconButton, { onClick: () => setSelectedNetwork?.(AGENT_NETWORK_DESIGNER_ID), "aria-label": "select-network-designer", sx: {
+                    px: 0.5,
+                    verticalAlign: "middle",
+                    mb: "4px",
+                }, children: _jsx(AddBoxRounded, { sx: {
+                        color: "var(--bs-secondary)",
+                        fontSize: "1rem",
+                    } }) }), "to design your own network!"] }));
     return (_jsx(Box, { id: `llm-chat-${id}`, sx: {
-            display: "flex",
-            flexDirection: "column",
-            flexGrow: 1,
             height: "100%",
             position: "relative",
         }, children: selectedNetwork
-            ? missingApiKeys?.length === 0
-                ? getChatBox()
-                : getErrorOverlay(`API key(s) required for: ${missingApiKeys.join(", ")}. ` +
-                    "Please add the required key(s) in Settings to use this Network.")
-            : getErrorOverlay("Please select a Network from the list to start the chat.") }));
+            ? 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/Const.d.ts

@@ -0,0 +1 @@
+export declare const MAX_TURNS = 50;

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

@@ -0,0 +1,2 @@
+// Maximum number of turns to save
+export const MAX_TURNS = 50;

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

@@ -1,15 +1,17 @@
 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;
 }
 /**
- * Generate the Control Buttons for a chat window.
+ * Generate the Control Buttons for a chat window (resend, clear chat, stop)
  * @returns A fragment containing the Control Buttons.
  */
 export declare const ControlButtons: FC<ControlButtonsProps>;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
 Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
 
@@ -16,11 +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
+//#endregion: Types
 /**
- * Generate the Control Buttons for a chat window.
+ * 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, }) => (_jsxs(_Fragment, { children: [!isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, posBottom: 8, posRight: 65, children: _jsx(DeleteOutlined, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), !isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), posBottom: 8, posRight: 23, children: _jsx(Loop, { fontSize: "small", id: "generate-icon", sx: { color: "var(--bs-white)" } }) }))] }));
+export const ControlButtons = ({ enableClearChatButton, enableSaveChatButton, handleClearChat, handleSave, handleSend, handleStop, isAwaitingLlm, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsx(_Fragment, { children: isAwaitingLlm ? (
+    // Stop Button
+    _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/FormattedMarkdown.js

@@ -53,6 +53,9 @@ export const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false,
         // If not, do our best to synthesize a key
         return `${hashString(node?.toString() || "")}-${index}`;
     };
+    if (!nodesList || nodesList.length === 0) {
+        return null;
+    }
     // Walk through the nodes list. If we encounter a string node, we'll aggregate it with other string nodes.
     const formattedOutput = [];
     let currentTextNodes = [];

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

@@ -15,14 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import SendIcon from "@mui/icons-material/Send";
+import Tooltip from "@mui/material/Tooltip";
 import { LlmChatButton } from "../Common/LlmChatButton.js";
-// #endregion: Types
+//#endregion: Types
 /**
  * Generate the Send Button for a chat window.
  * @returns The Send Button.
  */
-export const SendButton = ({ enableSendButton, id, onClickCallback }) => (_jsx(LlmChatButton, { "aria-label": "Send", disabled: !enableSendButton, id: id, onClick: onClickCallback, sx: {
-        padding: "0.6rem",
-        position: "relative",
-    }, tabIndex: 0, children: _jsx(SendIcon, { fontSize: "small", id: "stop-button-icon" // Could update this but it would impact QA
-        , sx: { color: "var(--bs-white)" } }) }));
+export const SendButton = ({ enableSendButton, id, onClickCallback }) => (_jsx(Tooltip, { placement: "top", title: enableSendButton ? "Send" : "Enter a message to enable the send button", children: _jsx("span", { style: {
+            display: "inline-block",
+            cursor: enableSendButton ? "inherit" : "not-allowed",
+        }, children: _jsx(LlmChatButton, { "aria-label": "Send", disabled: !enableSendButton, id: id, onClick: onClickCallback, tabIndex: 0, children: _jsx(SendIcon, { fontSize: "small", id: "stop-button-icon" // Could update this but it would impact QA
+             }) }) }) }));

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

@@ -17,7 +17,7 @@ limitations under the License.
  * List of available hljs themes for the syntax highlighter.
  * See: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/hljs/index.js
  */
-import { a11yDark, a11yLight, atelierDuneDark, docco } from "react-syntax-highlighter/dist/cjs/styles/hljs/index.js";
+import { a11yDark, a11yLight, atelierDuneDark, docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 // hljs themes
 export const HLJS_THEMES = {
     a11yDark,

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

@@ -3,6 +3,7 @@ import { ConversationTurn } from "./ConversationTurn.js";
 interface ThinkingProps {
     readonly id: string;
     readonly turns: ConversationTurn[];
+    readonly useNativeNames: boolean;
 }
 /**
  * Component to render the "thinking" section of the chat, which includes all messages from the agent that are