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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
 Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
 
@@ -18,41 +18,40 @@ limitations under the License.
  * See main function description.
  */
 import { AIMessage, HumanMessage } from "@langchain/core/messages";
-import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import ClearIcon from "@mui/icons-material/Clear";
 import CloseIcon from "@mui/icons-material/Close";
-import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
-import WrapTextIcon from "@mui/icons-material/WrapText";
+import TuneIcon from "@mui/icons-material/Tune";
 import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import Input from "@mui/material/Input";
 import InputAdornment from "@mui/material/InputAdornment";
+import ListItemIcon from "@mui/material/ListItemIcon";
+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 { AgentIntro } from "./AgentIntro.js";
-import { AgentMetadata } from "./AgentMetadata.js";
 import { ChatHistory } from "./ChatHistory.js";
-import { AGENT_IMAGE } from "./Const.js";
 import { ControlButtons } from "./ControlButtons.js";
 import { Conversation } from "./Conversation.js";
 import { MessageRole } from "./ConversationTurn.js";
+import { SampleQueries } from "./SampleQueries.js";
 import { SendButton } from "./SendButton.js";
+import { Thinking } from "./Thinking.js";
 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 { hasOnlyWhitespace } from "../../../utils/text.js";
-import { LlmChatOptionsButton } from "../../Common/LlmChatOptionsButton.js";
-import { isLegacyAgentType } from "../Common/Types.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";
-// Key for the chat history, which gets special treatment; always visible even if "show thinking" is off.
-const CHAT_HISTORY_KEY = "chat-history-accordion";
 // 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 +63,15 @@ 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 items to keep in the chat output window
-const MAX_CHAT_OUTPUT_ITEMS = 50;
+// Maximum number of turns to save
+export 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
  * 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, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, setIsAwaitingLlm, setPreviousResponse, targetAgent, title, userImage, } = 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;
     // MUI theme
     const theme = useTheme();
     // User LLM chat input
@@ -94,21 +93,20 @@ export const ChatCommon = ({ ref, ...props }) => {
     const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
     // Whether to wrap output text
     const [shouldWrapOutput, setShouldWrapOutput] = useState(true);
-    // Keeps a copy of the last AI message so we can highlight it as "final answer"
-    const lastAIMessage = useRef("");
+    // Options menu control
+    const [optionsMenuAnchorEl, setOptionsMenuAnchorEl] = useState(null);
+    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]);
     // Access store for context items
     const updateChatContext = useAgentChatHistoryStore((state) => state.updateChatContext);
     const updateChatHistory = useAgentChatHistoryStore((state) => state.updateChatHistory);
     const updateSlyData = useAgentChatHistoryStore((state) => state.updateSlyData);
     const resetHistory = useAgentChatHistoryStore((state) => state.resetHistory);
-    // Ref to the item we think is the Final Answer from the agent
-    const finalAnswerRef = useRef(null);
-    // Track state of "show thinking" toggle
-    const [showThinking, setShowThinking] = useState(false);
+    // Ref copy of current turns, so we can safely use it in callbacks without worrying about stale closures
+    const turnsRef = useRef([]);
     // Microphone state for voice input
     const [isMicOn, setIsMicOn] = useState(false);
     // Ref for speech recognition
@@ -136,7 +134,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 agentDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -152,53 +150,42 @@ export const ChatCommon = ({ ref, ...props }) => {
         const container = chatOutputRef.current;
         if (!container)
             return;
-        // Scroll the final answer into view
-        if (finalAnswerRef.current && !isAwaitingLlm) {
-            container.scrollTop = finalAnswerRef.current.offsetTop - 50;
-            return;
-        }
         // Live-streaming auto-scroll
         if (autoScrollEnabled) {
             container.scrollTop = container.scrollHeight;
         }
     }, [autoScrollEnabled, isAwaitingLlm, turns]);
+    // Keep a ref copy of the turns array
+    useEffect(() => {
+        turnsRef.current = turns;
+    }, [turns]);
     const addTurn = useCallback((turn) => {
         setTurns((current) => {
             const next = [...current, turn];
-            return next.length > MAX_CHAT_OUTPUT_ITEMS ? next.slice(-MAX_CHAT_OUTPUT_ITEMS) : next;
+            return next.length > MAX_TURNS ? next.slice(-MAX_TURNS) : next;
         });
     }, []);
     // We use this to update the same "turn" as chunks come in from legacy agents
     const legacyTurnIdRef = useRef(null);
-    const handleChunk = useCallback((chunk) => {
-        // Give container a chance to process the chunk first
-        const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
-        succeeded.current = succeeded.current || onChunkReceivedResult;
-        // For legacy agents, we either get plain text or Markdown. Just output it as-is.
-        if (isLegacyAgentType(targetAgent)) {
-            currentResponse.current += chunk;
-            if (!legacyTurnIdRef.current) {
-                // 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();
-                addTurn({
-                    id: legacyTurnIdRef.current,
-                    role: MessageRole.LegacyAgent,
-                    text: currentResponse.current,
-                    alwaysShow: true,
-                });
-            }
-            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)));
-            }
-            // Check for Final Answer from legacy agent
-            const finalAnswerMatch = extractFinalAnswer(currentResponse.current);
-            if (finalAnswerMatch) {
-                lastAIMessage.current = finalAnswerMatch;
-            }
-            return;
+    const handleLegacyAgentChunk = useCallback((chunk) => {
+        currentResponse.current += chunk;
+        if (!legacyTurnIdRef.current) {
+            // 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();
+            addTurn({
+                id: legacyTurnIdRef.current,
+                messageType: ChatMessageType.AGENT,
+                role: MessageRole.Agent,
+                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.
         const chatMessage = chatMessageFromChunk(chunk);
         if (!chatMessage) {
@@ -206,50 +193,64 @@ export const ChatCommon = ({ ref, ...props }) => {
             // But don't want to spam output by logging errors for every bad message.
             return;
         }
-        // Keep track of AI messages. The last one is (by definition) the "final answer" from the agents.
-        if (chatMessage.type === ChatMessageType.AI && chatMessage.text) {
-            lastAIMessage.current = chatMessage.text;
-        }
         // 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.
-        if (chatMessage.structure) {
-            // If there is an error block, we should display it as an alert.
-            const errorMessage = checkError(chatMessage.structure);
-            if (errorMessage) {
-                addTurn({
-                    id: uuid(),
-                    role: MessageRole.Warning,
-                    text: errorMessage,
-                    alwaysShow: true,
-                });
-                succeeded.current = false;
-            }
+        const errorMessage = checkError(chatMessage.structure);
+        if (errorMessage) {
+            // If there is an error block, display it.
+            addTurn({
+                id: uuid(),
+                role: MessageRole.Warning,
+                text: errorMessage,
+            });
+            succeeded.current = false;
         }
-        else if (chatMessage?.text?.trim() !== "") {
-            // Not an error, so output it if it has text. 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.
+        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 message";
+                : "Agent";
             addTurn({
+                agentName,
                 id: uuid(),
+                messageType: chatMessage.type,
                 role: MessageRole.Agent,
-                agentName,
+                structure: chatMessage.structure,
                 text: chatMessage.text,
             });
-            currentResponse.current += chatMessage.text;
+            if (chatMessage?.text?.trim().length > 0) {
+                // Append to current response if present
+                currentResponse.current += chatMessage.text;
+            }
+        }
+    }, [addTurn, selectedNetwork, updateChatContext, updateSlyData]);
+    /**
+     * Handle a chunk of response from the server. Called each time the server streams a chunk.
+     */
+    const handleChunk = useCallback((chunk) => {
+        // Give container a chance to process the chunk first
+        const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
+        succeeded.current = succeeded.current || onChunkReceivedResult;
+        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, addTurn, updateSlyData, updateChatContext]);
+    }, [onChunkReceived, selectedNetwork, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
     /**
      * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
      */
@@ -257,12 +258,10 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Reset state, whatever happened during request
         setIsAwaitingLlm(false);
         setChatInput("");
-        lastAIMessage.current = "";
-        finalAnswerRef.current = null;
-        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 +274,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
@@ -285,7 +284,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                     // 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);
+                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, selectedNetwork, handleChunk, agentChatHistory.chatContext, slyDataWithUserName, currentUser, StreamingUnit.Line);
                 }
             }
             catch (error) {
@@ -303,7 +302,6 @@ export const ChatCommon = ({ ref, ...props }) => {
                         id: uuid(),
                         role: MessageRole.Error,
                         text: `Error occurred: ${error}`,
-                        alwaysShow: true,
                     });
                 }
             }
@@ -318,12 +316,83 @@ export const ChatCommon = ({ ref, ...props }) => {
         handleChunk,
         legacyAgentEndpoint,
         neuroSanURL,
-        targetAgent,
+        selectedNetwork,
     ]);
+    const getFinalAnswerErrorTurn = () => ({
+        id: uuid(),
+        role: MessageRole.Error,
+        text: "The agent did not provide a final answer in the expected format. This is an internal error.",
+    });
+    const handleFinalAnswerLegacyAgent = useCallback(() => {
+        const currentTurns = turnsRef.current;
+        // 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(selectedNetwork)) {
+                // This agent is supposed to give final answers, but didn't this time. An error.
+                setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
+                return;
+            }
+            else {
+                // Use the last received turn as the final answer
+                const lastTurn = currentTurns.slice(-1)[0];
+                if (!lastTurn)
+                    return;
+                // 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(selectedNetwork, [new AIMessage({ content: lastTurn.text, id: uuid() })]);
+                return;
+            }
+        }
+        const sourceTurn = currentTurns[idx];
+        // Save item to chat history (same as original behavior)
+        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.
+        setTurns((prev) => {
+            const sourceTurnIndex = prev.findIndex(({ id: itemId }) => itemId === sourceTurn.id);
+            const updated = sourceTurnIndex === -1
+                ? [...prev]
+                : prev.map((turn, index) => (index === sourceTurnIndex ? { ...turn, text: sourceTurn.text } : turn));
+            // Add explicit final answer as a new terminal turn
+            updated.push({
+                id: uuid(),
+                role: MessageRole.FinalAnswer,
+                text: finalAnswer,
+            });
+            return updated;
+        });
+    }, [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.
+     */
+    const handleFinalAnswerNeuroSanAgent = useCallback(() => {
+        // Get current turns snapshot
+        const currentTurns = turnsRef.current;
+        // Find the most recent turn that is from the agent framework, which should be the one that contains the
+        // final answer.
+        const idx = currentTurns.reduceRight((found, turn, i) => (found !== -1 || turn.messageType !== ChatMessageType.AGENT_FRAMEWORK ? found : i), -1);
+        // Check for final answer
+        if (idx === -1) {
+            // No final answer found in the turns. Should never happen for a Neuro-san agent.
+            setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
+            return;
+        }
+        // Extract final answer from that turn
+        const finalAnswerTurn = currentTurns[idx];
+        // 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
@@ -338,56 +407,34 @@ export const ChatCommon = ({ ref, ...props }) => {
             id: uuid(),
             role: MessageRole.User,
             text: query,
-            alwaysShow: true,
-        });
-        // Add ID block for agent
-        addTurn({
-            agentDisplayName,
-            agentName: targetAgent,
-            alwaysShow: true,
-            id: uuid(),
-            role: MessageRole.AgentHeader,
-            text: agentDisplayName,
         });
         // Allow clients to do something when streaming starts
         onStreamingStarted?.();
         // Set up the abort controller
         controller.current = new AbortController();
         setIsAwaitingLlm(true);
-        addTurn({
-            agentName: `Contacting ${agentDisplayName}...`,
-            id: uuid(),
-            role: MessageRole.Agent,
-            text: `Query: ${queryToSend}`,
-        });
         try {
             // Invoke the logic to send the request and retry as necessary
             const wasAborted = await doRetryLoop(queryToSend);
-            if (!wasAborted && !succeeded.current) {
-                addTurn({
-                    alwaysShow: true,
-                    id: uuid(),
-                    role: MessageRole.Error,
-                    text: `Gave up after ${MAX_AGENT_RETRIES} attempts.`,
-                });
-            }
-            // Display prominent "Final Answer" message if we have one
-            if (lastAIMessage.current) {
-                addTurn({
-                    alwaysShow: true,
-                    id: uuid(),
-                    role: MessageRole.FinalAnswer,
-                    text: lastAIMessage.current,
-                });
-                // Record bot answer in history.
-                if (currentResponse?.current?.length > 0) {
-                    updateChatHistory(targetAgent, [new AIMessage({ content: lastAIMessage.current, id: uuid() })]);
+            // Abort condition is handled elsewhere
+            if (!wasAborted) {
+                if (succeeded.current) {
+                    // Success: infer final answer depending on agent type
+                    if (isLegacyAgentType(selectedNetwork)) {
+                        handleFinalAnswerLegacyAgent();
+                    }
+                    else {
+                        handleFinalAnswerNeuroSanAgent();
+                    }
+                }
+                else {
+                    // Exhausted retries without success. Display error to user.
+                    addTurn({
+                        id: uuid(),
+                        role: MessageRole.Error,
+                        text: `Gave up after ${MAX_AGENT_RETRIES} attempts.`,
+                    });
                 }
-            }
-            else if (isLegacyAgentType(targetAgent) && currentResponse.current.length > 0) {
-                // It's a legacy agent that didn't provide a "Final Answer", so just record the whole response
-                // as the bot answer in that case.
-                updateChatHistory(targetAgent, [new AIMessage({ content: currentResponse.current, id: uuid() })]);
             }
         }
         finally {
@@ -397,14 +444,15 @@ export const ChatCommon = ({ ref, ...props }) => {
         }
     }, [
         addTurn,
-        agentDisplayName,
         doRetryLoop,
+        handleFinalAnswerLegacyAgent,
+        handleFinalAnswerNeuroSanAgent,
         onSend,
         onStreamingComplete,
         onStreamingStarted,
         resetState,
         setIsAwaitingLlm,
-        targetAgent,
+        selectedNetwork,
         updateChatHistory,
     ]);
     const handleStop = useCallback(() => {
@@ -412,7 +460,6 @@ export const ChatCommon = ({ ref, ...props }) => {
             controller?.current?.abort();
             controller.current = null;
             addTurn({
-                alwaysShow: true,
                 id: uuid(),
                 role: MessageRole.Warning,
                 text: "Request cancelled.",
@@ -429,31 +476,35 @@ export const ChatCommon = ({ ref, ...props }) => {
     // Enable regenerate button when there is a previous query to resent, and we're not awaiting a response
     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;
-    const getPlaceholder = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
+    const enableClearChatButton = !isAwaitingLlm && (turns.length > 0 || agentChatHistory?.chatHistory?.length > 0);
+    const getPlaceholder = () => selectedNetwork ? agentPlaceholders[selectedNetwork] || `Chat with ${agentDisplayName}` : null;
     const handleClearChat = useCallback(() => {
         setTurns([]);
-        resetHistory(targetAgent);
+        resetHistory(selectedNetwork);
         setPreviousUserQuery("");
         currentResponse.current = "";
-        lastAIMessage.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: theme.zIndex.modal - 1,
+            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)",
@@ -465,31 +516,59 @@ 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 getOptionsButtons = () => (_jsxs(_Fragment, { children: [_jsx(Tooltip, { id: "show-thinking", title: showThinking ? "Displaying agent thinking" : "Hiding agent thinking", children: _jsx("span", { id: "show-thinking-span", children: _jsx(LlmChatOptionsButton, { enabled: showThinking, id: "show-thinking-button", onClick: () => setShowThinking(!showThinking), posRight: 150, disabled: isAwaitingLlm, children: _jsx(AccountTreeIcon, { id: "show-thinking-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) }) }), _jsx(Tooltip, { id: "enable-autoscroll", title: autoScrollEnabled ? "Autoscroll enabled" : "Autoscroll disabled", children: _jsx(LlmChatOptionsButton, { enabled: autoScrollEnabled, id: "autoscroll-button", onClick: () => setAutoScrollEnabled(!autoScrollEnabled), posRight: 80, children: _jsx(VerticalAlignBottomIcon, { id: "autoscroll-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) }), _jsx(Tooltip, { id: "wrap-tooltip", title: shouldWrapOutput ? "Text wrapping enabled" : "Text wrapping disabled", children: _jsx(LlmChatOptionsButton, { enabled: shouldWrapOutput, id: "wrap-button", onClick: () => setShouldWrapOutput(!shouldWrapOutput), posRight: 10, children: _jsx(WrapTextIcon, { id: "wrap-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) })] }));
-    const agentIntro = (_jsx(AgentIntro, { agentDisplayName: agentDisplayName, customAgentGreetings: customAgentGreetings, targetAgent: targetAgent }, targetAgent));
+    const getOptionsMenuButton = () => (_jsx(Box, { sx: {
+            position: "absolute",
+            top: "0.25rem",
+            right: "0.0rem",
+        }, children: _jsx(IconButton, { onClick: (e) => {
+                setOptionsMenuAnchorEl(e.currentTarget);
+                setOptionsMenuOpen(true);
+            }, children: _jsx(TuneIcon, { sx: { fontSize: "1.2rem" } }) }) }));
+    const agentGreeting = customAgentGreetings[selectedNetwork] ?? "Hi, how can I help?";
+    const handleOptionsMenuClose = () => {
+        setOptionsMenuAnchorEl(null);
+        setOptionsMenuOpen(false);
+    };
+    const handleToggleAutoScroll = () => {
+        setAutoScrollEnabled((prev) => !prev);
+    };
+    const handleToggleWrapOutput = () => {
+        setShouldWrapOutput((prev) => !prev);
+    };
+    const getOptionsMenu = () => (_jsxs(Menu, { id: `${id}-options-menu`, anchorEl: optionsMenuAnchorEl, open: optionsMenuOpen, onClose: handleOptionsMenuClose, slotProps: {
+            list: {
+                dense: true,
+                sx: {
+                    py: 0,
+                    "& .MuiMenuItem-root": { minHeight: 30, py: 0.5, px: 1 },
+                    "& .MuiCheckbox-root": { p: 0.5 },
+                    "& .MuiListItemText-primary": { fontSize: "smaller" },
+                },
+            },
+        }, 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: {
             ...divStyle,
             border: "var(--bs-border-width) var(--bs-border-style)",
             borderRadius: "var(--bs-border-radius)",
             display: "flex",
             flexGrow: 1,
-            height: "100%",
-            margin: "10px",
+            marginLeft: "10px",
             position: "relative",
             overflowY: "auto",
-        }, children: [getOptionsButtons(), _jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
-                    backgroundColor: backgroundColor || undefined,
-                    borderWidth: "1px",
+        }, children: [_jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
+                    backgroundColor,
                     borderRadius: "0.5rem",
-                    fontSize: "smaller",
-                    resize: "none",
-                    overflowY: "auto", // Enable vertical scrollbar
+                    fontSize: "16px",
+                    overflowY: "auto",
                     paddingBottom: "60px",
-                    paddingTop: "7.5px",
                     paddingLeft: "15px",
                     paddingRight: "15px",
+                    paddingTop: "7.5px",
+                    scrollbarGutter: "stable",
                     width: "100%",
-                }, tabIndex: -1, children: [agentChatHistory?.chatHistory?.length > 0 && (_jsx(ChatHistory, { agentImage: AGENT_IMAGE, agentDisplayName: agentDisplayName, chatHistoryKey: CHAT_HISTORY_KEY, currentUser: currentUser, id: `${id}-chat-history`, messages: agentChatHistory.chatHistory, targetAgent: targetAgent, userImage: userImage })), !isLegacyAgentType(targetAgent) && agentIntro, !isLegacyAgentType(targetAgent) && (_jsx(AgentMetadata, { disableQueries: isAwaitingLlm, handleSend: handleSend, currentUser: currentUser, id: `${id}-agent-metadata-display`, neuroSanURL: neuroSanURL, targetAgent: targetAgent })), _jsx(Conversation, { id: `${id}-conversation-display`, currentUser: currentUser, finalAnswerRef: finalAnswerRef, showThinking: showThinking, shouldWrapOutput: shouldWrapOutput, turns: turns, userImage: userImage }), isLegacyAgentType(targetAgent) && agentIntro, 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: {
+                }, 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 })] }));
     const getUserInputBox = () => (_jsxs(Box, { id: "user-input-div", sx: {
@@ -503,7 +582,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                     borderRadius: "var(--bs-border-radius)",
                     display: "flex",
                     flexGrow: 1,
-                    fontSize: "smaller",
+                    fontSize: "17px",
                     marginRight: "0.75rem",
                     paddingBottom: "0.5rem",
                     paddingTop: "0.5rem",
@@ -531,8 +610,8 @@ export const ChatCommon = ({ ref, ...props }) => {
             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()] }));
     return (_jsx(Box, { id: `llm-chat-${id}`, sx: {
@@ -541,5 +620,10 @@ export const ChatCommon = ({ ref, ...props }) => {
             flexGrow: 1,
             height: "100%",
             position: "relative",
-        }, children: targetAgent ? getChatBox() : getNoAgentOverlay() }));
+        }, 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.") }));
 };