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

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

@@ -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.
      */
@@ -100,7 +104,6 @@ export type ChatCommonHandle = {
     handleStop: () => void;
     handleClearChat: () => void;
 };
-export declare const MAX_TURNS = 50;
 /**
  * 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";
@@ -37,6 +38,7 @@ 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 { MAX_TURNS } from "./Const.js";
 import { ControlButtons } from "./ControlButtons.js";
 import { Conversation } from "./Conversation.js";
 import { MessageRole } from "./ConversationTurn.js";
@@ -47,11 +49,16 @@ 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 { hasOnlyWhitespace } from "../../../utils/text.js";
+import { getZIndex } from "../../../utils/zIndexLayers.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 +70,14 @@ 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;
+//#endregion
 /**
  * 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, missingApiKeys = [], 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 +106,8 @@ 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]);
+    // 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 +142,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 +177,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 +192,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 +227,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 +289,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) {
@@ -477,7 +483,7 @@ 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 getPlaceholder = () => selectedNetwork ? agentPlaceholders[selectedNetwork] || `Chat with ${networkDisplayName}` : null;
     const handleClearChat = useCallback(() => {
         setTurns([]);
         resetHistory(selectedNetwork);
@@ -495,7 +501,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 +522,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,7 +555,22 @@ 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 getResponseBox = () => (_jsxs(Box, { id: "llm-response-div", sx: {
+    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, handleClearChat: handleClearChat, 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: {
             ...divStyle,
             border: "var(--bs-border-width) var(--bs-border-style)",
             borderRadius: "var(--bs-border-radius)",
@@ -555,27 +579,23 @@ 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(), 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 })] }));
+        }, 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()] }) }));
     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 +624,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 +634,23 @@ 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!"] }));
+    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: {
-            display: "flex",
-            flexDirection: "column",
-            flexGrow: 1,
             height: "100%",
             position: "relative",
         }, children: selectedNetwork
-            ? missingApiKeys?.length === 0
+            ? allApiKeysPresent
                 ? 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.") }));
+                : getErrorOverlay(getMissingApiKeysOverlayBody())
+            : getErrorOverlay(getSelectNetworkOverlayBody()) }));
 };

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

@@ -9,7 +9,7 @@ interface ControlButtonsProps {
     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.
 
@@ -17,10 +17,13 @@ limitations under the License.
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import Loop from "@mui/icons-material/Loop";
 import StopCircle from "@mui/icons-material/StopCircle";
+import Box from "@mui/material/Box";
 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 = ({ handleClearChat, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, 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" }) })] })) }));

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

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

@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { MessageRole } from "./ConversationTurn.js";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.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.
  */
@@ -15,17 +16,19 @@ const THINKING_MESSAGE_TYPES = new Set([
     ChatMessageType.AGENT_PROGRESS,
     ChatMessageType.SYSTEM,
 ]);
-const DEFAULT_AGENT_NAME = "Agent";
-const formatTurn = (turn) => {
-    const headerLine = `**${turn.agentName ?? DEFAULT_AGENT_NAME}**: ${turn.text || ""}`;
-    const structureLine = turn.structure != null ? `\n\`${JSON.stringify(turn.structure, null, 2)}\`` : "";
+const DEFAULT_AGENT_NAME = "agent";
+const formatTurn = (turn, useNativeNames) => {
+    const agentName = turn.agentName ?? DEFAULT_AGENT_NAME;
+    const displayName = useNativeNames ? agentName : cleanUpAgentName(removeTrailingUuid(agentName));
+    const headerLine = `**${displayName}**: ${turn.text || ""}`;
+    const structureLine = turn.structure == null ? "" : `\n\`${JSON.stringify(turn.structure, null, 2)}\``;
     return `${headerLine}${structureLine}`;
 };
 /**
  * Component to render the "thinking" section of the chat, which includes all messages from the agent that are
  * of a type included in THINKING_MESSAGE_TYPES.
  */
-export const Thinking = ({ id, turns }) => {
+export const Thinking = ({ id, turns, useNativeNames }) => {
     const thinkingText = useMemo(() => {
         // Find start of latest interaction (most recent user prompt)
         const lastUserTurnIndex = turns.map((t) => t.role).lastIndexOf(MessageRole.User);
@@ -35,9 +38,9 @@ export const Thinking = ({ id, turns }) => {
             .slice(lastUserTurnIndex + 1)
             .filter((turn) => THINKING_MESSAGE_TYPES.has(turn.messageType))
             .filter((turn) => turn.text?.trim().length > 0 || !isEmpty(turn.structure))
-            .map((turn) => formatTurn(turn))
+            .map((turn) => formatTurn(turn, useNativeNames))
             .join("\n\n");
-    }, [turns]);
+    }, [turns, useNativeNames]);
     return (thinkingText.length > 0 && (_jsx(AccordionLite, { id: `${id}-thinking`, items: _jsx(Box, { sx: {
                 marginLeft: "0.5rem",
                 fontSize: "smaller",

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

@@ -1,7 +1,5 @@
 type LLMChatGroupConfigBtnProps = {
     disabled?: boolean;
-    posRight?: number;
-    posBottom?: number;
 };
 export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, keyof import("@mui/material/Button").ButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/Button").ButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "children" | "sx" | "className" | "tabIndex" | "color" | "href" | "type" | "classes" | "variant" | "action" | "size" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
 export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, keyof import("@mui/material/Button").ButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/Button").ButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "children" | "sx" | "className" | "tabIndex" | "color" | "href" | "type" | "classes" | "variant" | "action" | "size" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;

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

@@ -15,17 +15,14 @@ limitations under the License.
 */
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
-// #endregion: Types
-export const LlmChatButton = styled(Button, {
-    shouldForwardProp: (prop) => !["posRight", "posBottom"].includes(String(prop)),
-})(({ theme, disabled, posRight, posBottom }) => ({
-    background: `${theme.palette.primary.main} !important`,
+//#endregion: Types
+// In LlmChatButton.tsx
+export const LlmChatButton = styled(Button)(({ disabled, theme }) => ({
+    backgroundColor: theme.palette.background.paper,
     borderRadius: "var(--bs-border-radius)",
-    bottom: posBottom !== undefined ? posBottom : 0,
-    cursor: disabled ? "default" : "pointer",
+    cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? "50%" : "100%",
-    right: posRight !== undefined ? posRight : 0,
-    position: "absolute",
+    padding: "0.5rem",
 }));
 export const SmallLlmChatButton = styled(LlmChatButton)({
     minWidth: 0,

package/dist/components/AgentChat/VoiceChat/MicrophoneButton.js

@@ -19,7 +19,7 @@ import MicOffIcon from "@mui/icons-material/MicOff";
 import Tooltip from "@mui/material/Tooltip";
 import { checkSpeechSupport, toggleListening } from "./VoiceChat.js";
 import { LlmChatButton } from "../Common/LlmChatButton.js";
-// #endregion: Types
+//#endregion: Types
 /**
  * Microphone button component for voice input functionality.
  * Handles toggling voice recognition on/off and displays appropriate visual feedback.
@@ -42,14 +42,16 @@ export const MicrophoneButton = ({ isMicOn, onMicToggle, speechRecognitionRef, v
         await toggleListening(newMicState, speechRecognitionRef.current);
     };
     const isDisabled = !speechSupported;
-    const tooltipText = !speechSupported
-        ? "Voice input is only supported in Google Chrome on Mac or Windows."
-        : isMicOn
+    const tooltipText = speechSupported
+        ? isMicOn
             ? "Turn microphone off"
-            : "Turn microphone on";
-    return (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { style: { display: "inline-block", height: 50, width: 64 }, children: _jsx(LlmChatButton, { "data-testid": "microphone-button", disabled: isDisabled, id: "microphone-button", onClick: handleClick, sx: {
-                    padding: "0.5rem",
-                    right: 70,
-                    backgroundColor: isMicOn && voiceInputState.isListening ? "var(--bs-success)" : "var(--bs-secondary)",
-                }, tabIndex: 0, children: voiceInputState.isListening ? (_jsx(MicNoneIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicNoneIcon" })) : (_jsx(MicOffIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicOffIcon" })) }) }) }));
+            : "Turn microphone on"
+        : "Voice input is only supported in Google Chrome on Mac or Windows.";
+    const isListeningActive = isMicOn && voiceInputState.isListening;
+    return (_jsx(Tooltip, { placement: "top", title: tooltipText, children: _jsx("span", { style: {
+                display: "inline-block",
+                cursor: isDisabled ? "not-allowed" : "inherit",
+            }, children: _jsx(LlmChatButton, { "data-testid": "microphone-button", disabled: isDisabled, id: "microphone-button", onClick: handleClick, sx: {
+                    backgroundColor: isListeningActive ? "success.main" : "background.paper",
+                }, tabIndex: 0, children: voiceInputState.isListening ? (_jsx(MicNoneIcon, { "data-testid": "MicNoneIcon", fontSize: "small" })) : (_jsx(MicOffIcon, { "data-testid": "MicOffIcon", fontSize: "small" })) }) }) }));
 };