@cognizant-ai-lab/ui-common 1.6.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

@@ -1,4 +1,5 @@
 import { Dispatch, Ref, SetStateAction } from "react";
+import { LLMProvider } from "../../../state/Settings.js";
 import { CombinedAgentType } from "../Common/Types.js";
 export interface ChatCommonProps {
     /**
@@ -9,10 +10,6 @@ export interface ChatCommonProps {
      * The current username of the logged-in user. Used for fetching things from APIs mainly
      */
     readonly currentUser: string;
-    /**
-     * Path to image for user avatar
-     */
-    readonly userImage: string;
     /**
      * Function to set the state of the component to indicate whether we are awaiting a response from the LLM
      */
@@ -22,9 +19,13 @@ export interface ChatCommonProps {
      */
     readonly isAwaitingLlm: boolean;
     /**
-     * The agent to send the request to.
+     * The network to send the request to.
+     */
+    readonly selectedNetwork: string | null;
+    /**
+     * Setter for changing the selected network.
      */
-    readonly targetAgent: string;
+    readonly setSelectedNetwork?: (network: string | null) => void;
     /**
      * Special endpoint for legacy agents since they do not have a single unified endpoint like Neuro-san agents.
      */
@@ -94,12 +95,15 @@ export interface ChatCommonProps {
      * Sample queries for the current network that the user can "click to send"
      */
     readonly sampleQueries?: string[];
+    /**
+     * Array of LLM providers for which API keys are required but missing. Only applies to BYOK networks.
+     */
+    readonly missingApiKeys?: LLMProvider[];
 }
 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";
@@ -32,12 +33,12 @@ import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
-import Tooltip from "@mui/material/Tooltip";
 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 { MAX_TURNS } from "./Const.js";
 import { ControlButtons } from "./ControlButtons.js";
 import { Conversation } from "./Conversation.js";
 import { MessageRole } from "./ConversationTurn.js";
@@ -48,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.
@@ -64,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, networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, setIsAwaitingLlm, setPreviousResponse, targetAgent, 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
@@ -99,8 +104,10 @@ export const ChatCommon = ({ ref, ...props }) => {
     const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
     // Persistent agent chat history store, which is where we store both kinds of chat histories
     // (see store implementation for details)
-    const storedChatHistory = useAgentChatHistoryStore((state) => state?.history?.[targetAgent]);
+    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);
@@ -135,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(targetAgent)), [targetAgent]);
+    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -170,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();
@@ -181,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.
@@ -196,13 +203,13 @@ export const ChatCommon = ({ ref, ...props }) => {
         }
         // Shallow merge existing slyData with incoming chatMessage.sly_data
         if (chatMessage.sly_data) {
-            updateSlyData(targetAgent, chatMessage.sly_data);
+            updateSlyData(selectedNetwork, chatMessage.sly_data);
         }
         // It's a ChatMessage. Does it have chat context? Only AGENT_FRAMEWORK messages can have chat context.
         if (chatMessage.type === ChatMessageType.AGENT_FRAMEWORK && chatMessage.chat_context) {
             // Save the chat context, potentially overwriting any previous ones we received during this session.
             // We only care about the last one received.
-            updateChatContext(targetAgent, chatMessage.chat_context);
+            updateChatContext(selectedNetwork, chatMessage.chat_context);
         }
         // Check if there is an error block in the "structure" field of the chat message.
         const errorMessage = checkError(chatMessage.structure);
@@ -215,14 +222,12 @@ export const ChatCommon = ({ ref, ...props }) => {
             });
             succeeded.current = false;
         }
-        else if (chatMessage?.text?.trim().length > 0 || chatMessage.structure) {
+        else if (chatMessage?.text?.trim().length > 0 || !isEmpty(chatMessage.structure)) {
             // Not an error, so output it if it has text or a structure.
             // 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(),
@@ -236,7 +241,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                 currentResponse.current += chatMessage.text;
             }
         }
-    }, [addTurn, targetAgent, updateChatContext, updateSlyData]);
+    }, [addTurn, selectedNetwork, updateChatContext, updateSlyData]);
     /**
      * Handle a chunk of response from the server. Called each time the server streams a chunk.
      */
@@ -244,14 +249,14 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Give container a chance to process the chunk first
         const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
         succeeded.current = succeeded.current || onChunkReceivedResult;
-        if (isLegacyAgentType(targetAgent)) {
+        if (isLegacyAgentType(selectedNetwork)) {
             // For legacy agents, we either get plain text or Markdown. Just output it as-is.
             handleLegacyAgentChunk(chunk);
         }
         else {
             handleNeuroSanAgentChunk(chunk);
         }
-    }, [onChunkReceived, targetAgent, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
+    }, [onChunkReceived, selectedNetwork, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
     /**
      * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
      */
@@ -259,10 +264,10 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Reset state, whatever happened during request
         setIsAwaitingLlm(false);
         setChatInput("");
-        setPreviousResponse?.(targetAgent, currentResponse.current);
+        setPreviousResponse?.(selectedNetwork, currentResponse.current);
         currentResponse.current = "";
         legacyTurnIdRef.current = null;
-    }, [setIsAwaitingLlm, setPreviousResponse, targetAgent]);
+    }, [setIsAwaitingLlm, setPreviousResponse, selectedNetwork]);
     /*
      * The main logic for sending a query to the server, with retries on errors.
      */
@@ -275,7 +280,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                 // Increment the attempt number and set the state to indicate we're awaiting a response
                 attemptNumber += 1;
                 // Check which agent type we are dealing with
-                if (isLegacyAgentType(targetAgent)) {
+                if (isLegacyAgentType(selectedNetwork)) {
                     // It's a legacy agent (these go directly to the LLM and are different from
                     // the Neuro-san agents).
                     // Send the chat query to the server. This will block until the stream ends from the server
@@ -284,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, targetAgent, 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) {
@@ -317,7 +322,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         handleChunk,
         legacyAgentEndpoint,
         neuroSanURL,
-        targetAgent,
+        selectedNetwork,
     ]);
     const getFinalAnswerErrorTurn = () => ({
         id: uuid(),
@@ -329,7 +334,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Prefer the most recent matching turn
         const idx = currentTurns.reduceRight((foundIndex, turn, i) => foundIndex !== -1 || extractFinalAnswer(turn.text) === undefined ? foundIndex : i, -1);
         if (idx === -1) {
-            if (givesFinalAnswer(targetAgent)) {
+            if (givesFinalAnswer(selectedNetwork)) {
                 // This agent is supposed to give final answers, but didn't this time. An error.
                 setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
                 return;
@@ -342,13 +347,13 @@ export const ChatCommon = ({ ref, ...props }) => {
                 // Just set the last turn as the final answer
                 setTurns((prev) => prev.map((turn) => (turn.id === lastTurn.id ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
                 // Save it to chat history
-                updateChatHistory(targetAgent, [new AIMessage({ content: lastTurn.text, id: uuid() })]);
+                updateChatHistory(selectedNetwork, [new AIMessage({ content: lastTurn.text, id: uuid() })]);
                 return;
             }
         }
         const sourceTurn = currentTurns[idx];
         // Save item to chat history (same as original behavior)
-        updateChatHistory(targetAgent, [new AIMessage({ content: sourceTurn.text, id: uuid() })]);
+        updateChatHistory(selectedNetwork, [new AIMessage({ content: sourceTurn.text, id: uuid() })]);
         // Extract the final answer from the turn.
         const finalAnswer = extractFinalAnswer(sourceTurn.text)?.trim();
         // Update the turn to be a final answer turn, and add a new final answer turn with just the final answer text.
@@ -365,7 +370,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             });
             return updated;
         });
-    }, [targetAgent, updateChatHistory]);
+    }, [selectedNetwork, updateChatHistory]);
     /**
      * Extract the final answer from the turns for a Neuro-san agent. For Neuro-san agents, we expect the final answer
      * to be the most recent turn messageType === ChatMessageType.AGENT_FRAMEWORK.
@@ -384,23 +389,16 @@ export const ChatCommon = ({ ref, ...props }) => {
         }
         // Extract final answer from that turn
         const finalAnswerTurn = currentTurns[idx];
-        const hasFinalAnswer = finalAnswerTurn.text?.trim().length > 0 || !isEmpty(finalAnswerTurn.structure);
-        if (hasFinalAnswer) {
-            // Update relevant turn to be the final answer
-            setTurns((prev) => prev.map((turn, i) => (i === idx ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
-            // Save final answer to chat history
-            const finalAnswerContent = finalAnswerTurn.text || JSON.stringify(finalAnswerTurn.structure, null, 2);
-            updateChatHistory(targetAgent, [new AIMessage({ content: finalAnswerContent, id: uuid() })]);
-        }
-        else {
-            // No final answer found, display error
-            setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
-        }
-    }, [targetAgent, updateChatHistory]);
+        // Update relevant turn to be the final answer
+        setTurns((prev) => prev.map((turn, i) => (i === idx ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
+        // Save final answer to chat history
+        const finalAnswerContent = finalAnswerTurn.text || JSON.stringify(finalAnswerTurn.structure, null, 2);
+        updateChatHistory(selectedNetwork, [new AIMessage({ content: finalAnswerContent, id: uuid() })]);
+    }, [selectedNetwork, updateChatHistory]);
     const handleSend = useCallback(async (query) => {
         // Record user query in chat history. Discard anything beyond MAX_CHAT_HISTORY_ITEMS
         const userQueryMessage = new HumanMessage({ content: query, id: uuid() });
-        updateChatHistory(targetAgent, [userQueryMessage]);
+        updateChatHistory(selectedNetwork, [userQueryMessage]);
         // Allow parent to intercept and modify the query before sending if needed
         const queryToSend = onSend?.(query) ?? query;
         // Save query for "regenerate" use. Again we save the real user input, not the modified query. It will again
@@ -428,7 +426,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             if (!wasAborted) {
                 if (succeeded.current) {
                     // Success: infer final answer depending on agent type
-                    if (isLegacyAgentType(targetAgent)) {
+                    if (isLegacyAgentType(selectedNetwork)) {
                         handleFinalAnswerLegacyAgent();
                     }
                     else {
@@ -460,7 +458,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         onStreamingStarted,
         resetState,
         setIsAwaitingLlm,
-        targetAgent,
+        selectedNetwork,
         updateChatHistory,
     ]);
     const handleStop = useCallback(() => {
@@ -485,29 +483,34 @@ 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 = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
+    const getPlaceholder = () => selectedNetwork ? agentPlaceholders[selectedNetwork] || `Chat with ${networkDisplayName}` : null;
     const handleClearChat = useCallback(() => {
         setTurns([]);
-        resetHistory(targetAgent);
+        resetHistory(selectedNetwork);
         setPreviousUserQuery("");
         currentResponse.current = "";
-    }, [resetHistory, targetAgent]);
+    }, [resetHistory, selectedNetwork]);
     // Expose the handleStop and handleClearChat methods to parent components via ref for external control
     useImperativeHandle(ref, () => ({
         handleStop,
         handleClearChat,
     }), [handleStop, handleClearChat]);
-    const getNoAgentOverlay = () => (_jsx(Tooltip, { title: "Please select a Network from the list to start the chat.", placement: "auto", children: _jsx(Box, { id: "chat-disabled-overlay", sx: {
+    const getErrorOverlay = (errorText) => (_jsx(Box, { id: "chat-disabled-overlay", sx: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: getZIndex(2, theme),
+            cursor: "not-allowed",
+            // Capture all pointer events to prevent interaction with the chat when no agent is selected
+            pointerEvents: "all",
+        }, children: _jsx(Typography, { sx: {
                 position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: theme.zIndex.modal - 1,
-                cursor: "not-allowed",
-                // Capture all pointer events to prevent interaction with the chat when no agent is selected
-                pointerEvents: "all",
-            } }) }));
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+            }, children: errorText }) }));
     const getTitle = () => (_jsxs(Box, { id: `llm-chat-title-container-${id}`, sx: {
             alignItems: "center",
             borderTopLeftRadius: "var(--bs-border-radius)",
@@ -519,15 +522,18 @@ 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" } }) }) }));
-    const agentGreeting = customAgentGreetings[targetAgent] ?? "Hi, how can I help?";
+            }, children: _jsx(TuneIcon, { fontSize: "small" }) }) }));
+    const agentGreeting = customAgentGreetings[selectedNetwork] ?? "Hi, how can I help?";
     const handleOptionsMenuClose = () => {
         setOptionsMenuAnchorEl(null);
         setOptionsMenuOpen(false);
@@ -549,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)",
@@ -558,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: [targetAgent, 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(targetAgent), 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)",
@@ -607,21 +624,33 @@ 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",
             flexGrow: 1,
             height: "100%",
-            opacity: targetAgent ? 1 : 0.4,
-            pointerEvents: targetAgent ? "auto" : "none",
+            opacity: selectedNetwork ? 1 : 0.4,
+            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: targetAgent ? getChatBox() : getNoAgentOverlay() }));
+        }, children: selectedNetwork
+            ? allApiKeysPresent
+                ? getChatBox()
+                : 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 = [];