@cognizant-ai-lab/ui-common 1.5.0 → 1.6.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,52 +18,43 @@ 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 { alpha, useTheme } from "@mui/material/styles";
+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 { jsonrepair } from "jsonrepair";
-import { isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import ReactMarkdown from "react-markdown";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import { isEmpty } from "lodash-es";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { v4 as uuid } from "uuid";
-import { AgentConnectivity } from "./AgentConnectivity.js";
 import { ChatHistory } from "./ChatHistory.js";
 import { ControlButtons } from "./ControlButtons.js";
-import { FormattedMarkdown } from "./FormattedMarkdown.js";
-import { AGENT_GREETINGS } from "./Greetings.js";
+import { Conversation } from "./Conversation.js";
+import { MessageRole } from "./ConversationTurn.js";
 import { SampleQueries } from "./SampleQueries.js";
 import { SendButton } from "./SendButton.js";
-import { HLJS_THEMES } from "./SyntaxHighlighterThemes.js";
-import { UserQueryDisplay } from "./UserQueryDisplay.js";
-import { getAgentFunction, getConnectivity, sendChatQuery } from "../../../controller/agent/Agent.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 { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { useAgentChatHistoryStore } from "../../../state/ChatHistory.js";
-import { hashString, hasOnlyWhitespace } from "../../../utils/text.js";
-import { LlmChatOptionsButton } from "../../Common/LlmChatOptionsButton.js";
-import { MUIAccordion } from "../../Common/MUIAccordion.js";
-import { MUIAlert } from "../../Common/MUIAlert.js";
-import { NotificationType, sendNotification } from "../../Common/notification.js";
-import { isLegacyAgentType } from "../Common/Types.js";
+import { hasOnlyWhitespace } from "../../../utils/text.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 = {};
-// Avatar to use for agents in chat
-const AGENT_IMAGE = "/agent.svg";
 // How many times to retry the entire agent interaction process. Some networks have a well-defined success condition.
 // For others, it's just "whenever the stream is done".
 const MAX_AGENT_RETRIES = 3;
@@ -73,24 +64,23 @@ 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 { agentGreetings = 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, networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, setIsAwaitingLlm, setPreviousResponse, targetAgent, title, } = props;
     // MUI theme
     const theme = useTheme();
-    const shadowColor = theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
     // User LLM chat input
     const [chatInput, setChatInput] = useState("");
     // Previous user query (for "regenerate" feature)
-    const previousUserQuery = useRef("");
-    // Chat output window contents
-    const [chatOutput, setChatOutput] = useState([]);
+    const [previousUserQuery, setPreviousUserQuery] = useState("");
+    // Turns within the current conversation
+    const [turns, setTurns] = useState([]);
     // To accumulate current response, which will be different from the contents of the output window if there is a
     // chat session
     const currentResponse = useRef("");
@@ -102,28 +92,22 @@ export const ChatCommon = ({ ref, ...props }) => {
     const controller = useRef(null);
     // For tracking if we're auto-scrolling. A button allows the user to enable or disable auto-scrolling.
     const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
-    // ref for same
-    const autoScrollEnabledRef = useRef(autoScrollEnabled);
     // 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("");
-    // Ref for the final answer key, so we can highlight the accordion
-    const finalAnswerKey = 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 agentChatHistory = useMemo(() => storedChatHistory ?? { chatHistory: [], chatContext: null, slyData: {} }, [storedChatHistory]);
-    const [agentSampleQueries, setAgentSampleQueries] = useState([]);
     // 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
@@ -151,8 +135,6 @@ export const ChatCommon = ({ ref, ...props }) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const darkMode = theme.palette.mode === "dark";
-    const { atelierDuneDark, a11yLight } = HLJS_THEMES;
     const agentDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(targetAgent)), [targetAgent]);
     useEffect(() => {
         // Set up speech recognition
@@ -160,103 +142,51 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Clean up function
         return () => cleanupAndStopSpeechRecognition(speechRecognitionRef, handlers);
     }, []);
-    // Sync ref with state variable for use within timer etc.
-    useEffect(() => {
-        autoScrollEnabledRef.current = autoScrollEnabled;
-    }, [autoScrollEnabled]);
     useEffect(() => {
         // Delay for a second before focusing on the input area; gets around ChatBot stealing focus.
         setTimeout(() => chatInputRef?.current?.focus(), 1000);
     }, []);
     // Auto scroll chat output window when new content is added
     useEffect(() => {
-        // Scroll the final answer into view
-        if (finalAnswerRef.current && !isAwaitingLlm) {
-            chatOutputRef.current.scrollTop = finalAnswerRef.current.offsetTop - 50;
+        const container = chatOutputRef.current;
+        if (!container)
             return;
+        // Live-streaming auto-scroll
+        if (autoScrollEnabled) {
+            container.scrollTop = container.scrollHeight;
         }
-        if (autoScrollEnabledRef.current && chatOutputRef?.current) {
-            chatOutputRef.current.scrollTop = chatOutputRef.current.scrollHeight;
-        }
-    }, [chatOutput, isAwaitingLlm]);
-    /**
-     * Process a log line from the agent and format it nicely using the syntax highlighter and Accordion components.
-     * By the time we get to here, it's assumed things like errors and termination conditions have already been handled.
-     *
-     * @param logLine The log line to process
-     * @param messageType The type of the message (AI, LEGACY_LOGS etc.). Used for displaying certain message types
-     * differently
-     * @param isFinalAnswer If true, the log line is the final answer from the agent. This will be highlighted in some
-     * way to draw the user's attention to it.
-     * @param summary Used as the "title" for the accordion block. Something like an agent name or "Final Answer"
-     * @returns A React component representing the log line (agent message)
-     */
-    const processLogLine = useCallback((logLine, summary, messageType, isFinalAnswer) => {
-        // extract the parts of the line
-        let repairedJson;
-        try {
-            // Attempt to parse as JSON
-            // First, repair it. Also replace "escaped newlines" with actual newlines for better display.
-            repairedJson = jsonrepair(logLine);
-            // Now try to parse it. We don't care about the result, only if it throws on parsing.
-            JSON.parse(repairedJson);
-            repairedJson = repairedJson.replace(/\\n/gu, "\n").replace(/\\"/gu, "'");
-        }
-        catch {
-            // Not valid JSON
-            repairedJson = null;
-        }
-        const hashedSummary = hashString(summary);
-        const isAIMessage = messageType === ChatMessageType.AI;
-        if (isAIMessage && !isFinalAnswer) {
-            lastAIMessage.current = logLine;
-        }
-        if (isFinalAnswer) {
-            // Save key of final answer for highlighting
-            finalAnswerKey.current = hashedSummary;
-        }
-        return (_jsx(MUIAccordion, { id: `${hashedSummary}-panel`, defaultExpandedPanelKey: isFinalAnswer ? 1 : null, items: [
-                {
-                    title: summary,
-                    content: (_jsx("div", { id: `${summary}-details`, children: repairedJson ? (_jsx(SyntaxHighlighter, { id: "syntax-highlighter", language: "json", style: darkMode ? atelierDuneDark : a11yLight, showLineNumbers: false, wrapLongLines: shouldWrapOutput, children: repairedJson })) : (_jsx(ReactMarkdown, { children: logLine }, hashString(logLine))) })),
-                },
-            ], sx: {
-                fontSize: "large",
-                marginBottom: "1rem",
-                boxShadow: isFinalAnswer
-                    ? `0 6px 16px 0 ${alpha(shadowColor, 0.08)}, 0 3px 6px -4px ${alpha(shadowColor, 0.12)}, 
-                                    0 9px 28px 8px ${alpha(shadowColor, 0.05)}`
-                    : "none",
-            } }, hashedSummary));
-    }, [a11yLight, atelierDuneDark, darkMode, shadowColor, shouldWrapOutput]);
-    /**
-     * Handles adding content to the output window. We only store the last MAX_CHAT_OUTPUT_ITEMS items to keep
-     * memory usage down.
-     * @param node A ReactNode to add to the output window -- text, spinner, etc. but could also be  simple string
-     * @returns Nothing, but updates the output window with the new content.
-     */
-    const updateOutput = useCallback((node) => {
-        setChatOutput((current) => {
-            const next = [...current, node];
-            return next.length > MAX_CHAT_OUTPUT_ITEMS ? next.slice(-MAX_CHAT_OUTPUT_ITEMS) : next;
+    }, [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_TURNS ? next.slice(-MAX_TURNS) : next;
         });
     }, []);
-    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)) {
-            // Display output as-is
-            updateOutput(chunk);
-            currentResponse.current += chunk;
-            // Check for Final Answer from legacy agent
-            const finalAnswerMatch = extractFinalAnswer(currentResponse.current);
-            if (finalAnswerMatch) {
-                lastAIMessage.current = finalAnswerMatch;
-            }
-            return;
+    // We use this to update the same "turn" as chunks come in from legacy agents
+    const legacyTurnIdRef = useRef(null);
+    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) {
@@ -275,35 +205,53 @@ export const ChatCommon = ({ ref, ...props }) => {
             updateChatContext(targetAgent, 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) {
-                updateOutput(_jsx(MUIAlert, { id: "retry-message-alert", severity: "warning", children: errorMessage }));
-                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 || 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";
-            updateOutput(processLogLine(chatMessage.text, agentName, chatMessage.type));
-            currentResponse.current += chatMessage.text;
+                : "Agent";
+            addTurn({
+                agentName,
+                id: uuid(),
+                messageType: chatMessage.type,
+                role: MessageRole.Agent,
+                structure: chatMessage.structure,
+                text: chatMessage.text,
+            });
+            if (chatMessage?.text?.trim().length > 0) {
+                // Append to current response if present
+                currentResponse.current += chatMessage.text;
+            }
+        }
+    }, [addTurn, targetAgent, 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(targetAgent)) {
+            // For legacy agents, we either get plain text or Markdown. Just output it as-is.
+            handleLegacyAgentChunk(chunk);
+        }
+        else {
+            handleNeuroSanAgentChunk(chunk);
         }
-    }, [onChunkReceived, processLogLine, updateSlyData, targetAgent, updateChatContext, updateOutput]);
-    const introduceAgent = useCallback(() => {
-        /**
-         * Introduce the agent to the user with a friendly greeting
-         */
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }));
-        // Random greeting
-        const greeting = agentGreetings[targetAgent] ?? AGENT_GREETINGS[Math.floor(Math.random() * AGENT_GREETINGS.length)];
-        updateOutput(greeting);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- updateOutput is stable (empty useCallback deps)
-    }, [agentDisplayName, targetAgent]);
+    }, [onChunkReceived, targetAgent, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
     /**
      * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
      */
@@ -311,11 +259,9 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Reset state, whatever happened during request
         setIsAwaitingLlm(false);
         setChatInput("");
-        lastAIMessage.current = "";
-        finalAnswerRef.current = null;
-        // Get agent name, either from the enum (Neuro-san) or from the targetAgent string directly (legacy)
         setPreviousResponse?.(targetAgent, currentResponse.current);
         currentResponse.current = "";
+        legacyTurnIdRef.current = null;
     }, [setIsAwaitingLlm, setPreviousResponse, targetAgent]);
     /*
      * The main logic for sending a query to the server, with retries on errors.
@@ -353,12 +299,17 @@ export const ChatCommon = ({ ref, ...props }) => {
                     if (error instanceof Error) {
                         console.error(error, error.stack);
                     }
-                    updateOutput(_jsx(MUIAlert, { id: "opp-finder-error-occurred-alert", severity: "error", children: `Error occurred: ${error}` }));
+                    addTurn({
+                        id: uuid(),
+                        role: MessageRole.Error,
+                        text: `Error occurred: ${error}`,
+                    });
                 }
             }
         } while (attemptNumber < MAX_AGENT_RETRIES && !succeeded.current);
         return wasAborted;
     }, [
+        addTurn,
         agentChatHistory,
         currentUser,
         extraParams,
@@ -367,8 +318,85 @@ export const ChatCommon = ({ ref, ...props }) => {
         legacyAgentEndpoint,
         neuroSanURL,
         targetAgent,
-        updateOutput,
     ]);
+    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(targetAgent)) {
+                // 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(targetAgent, [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() })]);
+        // 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;
+        });
+    }, [targetAgent, 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];
+        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]);
     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() });
@@ -377,53 +405,45 @@ export const ChatCommon = ({ ref, ...props }) => {
         const queryToSend = onSend?.(query) ?? query;
         // Save query for "regenerate" use. Again we save the real user input, not the modified query. It will again
         // get intercepted and re-modified (if applicable) on "regenerate".
-        previousUserQuery.current = query;
+        setPreviousUserQuery(query);
         setIsAwaitingLlm(true);
         // Always start output by echoing user query.
         // Note: we display the original user query, not the modified one. The modified one could be a monstrosity
         // that we generated behind their back. Ultimately, we shouldn't need to generate a fake query on behalf
         // of the user, but currently we do for orchestration.
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: query, title: currentUser, userImage: userImage }));
-        // Add ID block for agent
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }));
+        addTurn({
+            id: uuid(),
+            role: MessageRole.User,
+            text: query,
+        });
         // Allow clients to do something when streaming starts
         onStreamingStarted?.();
         // Set up the abort controller
         controller.current = new AbortController();
         setIsAwaitingLlm(true);
-        if (showThinking) {
-            updateOutput(_jsx(MUIAccordion, { id: "initiating-orchestration-accordion", items: [
-                    {
-                        title: `Contacting ${agentDisplayName}...`,
-                        content: `Query: ${queryToSend}`,
-                    },
-                ], sx: { marginBottom: "1rem" } }));
-        }
         try {
             // Invoke the logic to send the request and retry as necessary
             const wasAborted = await doRetryLoop(queryToSend);
-            if (!wasAborted && !succeeded.current) {
-                updateOutput(_jsx(MUIAlert, { id: "opp-finder-max-retries-exceeded-alert", severity: "error", children: `Gave up after ${MAX_AGENT_RETRIES} attempts.` }));
-            }
-            // Display prominent "Final Answer" message if we have one
-            if (lastAIMessage.current) {
-                // Legacy agents text is a bit messy and doesn't add a blank line, so we add it here
-                if (isLegacyAgentType(targetAgent)) {
-                    updateOutput("    \n\n");
+            // Abort condition is handled elsewhere
+            if (!wasAborted) {
+                if (succeeded.current) {
+                    // Success: infer final answer depending on agent type
+                    if (isLegacyAgentType(targetAgent)) {
+                        handleFinalAnswerLegacyAgent();
+                    }
+                    else {
+                        handleFinalAnswerNeuroSanAgent();
+                    }
                 }
-                updateOutput(_jsx("div", { id: "final-answer-div", ref: finalAnswerRef, style: { marginBottom: "1rem" }, children: processLogLine(lastAIMessage.current, "Final Answer", ChatMessageType.AI, true) }));
-                // Record bot answer in history.
-                if (currentResponse?.current?.length > 0) {
-                    updateChatHistory(targetAgent, [new AIMessage({ content: lastAIMessage.current, id: uuid() })]);
+                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() })]);
-            }
-            // Add a blank line after response
-            updateOutput("\n");
         }
         finally {
             resetState();
@@ -431,66 +451,32 @@ export const ChatCommon = ({ ref, ...props }) => {
             onStreamingComplete?.();
         }
     }, [
-        agentDisplayName,
-        currentUser,
+        addTurn,
         doRetryLoop,
+        handleFinalAnswerLegacyAgent,
+        handleFinalAnswerNeuroSanAgent,
         onSend,
         onStreamingComplete,
         onStreamingStarted,
-        processLogLine,
         resetState,
         setIsAwaitingLlm,
-        showThinking,
         targetAgent,
         updateChatHistory,
-        updateOutput,
-        userImage,
     ]);
-    useEffect(() => {
-        if (targetAgent) {
-            introduceAgent();
-        }
-    }, [targetAgent, introduceAgent]);
-    useEffect(() => {
-        const fetchAgentDetails = async () => {
-            let agentFunction;
-            // It is a Neuro-san agent, so get the function and connectivity info
-            try {
-                agentFunction = await getAgentFunction(neuroSanURL, targetAgent, currentUser);
-            }
-            catch {
-                // For now, just return. May be a legacy agent without a functional description in Neuro-san.
-                return;
-            }
-            try {
-                const connectivity = await getConnectivity(neuroSanURL, targetAgent, currentUser);
-                updateOutput(_jsx(AgentConnectivity, { id: id, description: agentFunction?.function?.description, connectivityInfo: connectivity?.connectivity_info, targetAgent: targetAgent }));
-                const sampleQueries = (connectivity?.metadata?.["sample_queries"] || []);
-                setAgentSampleQueries(sampleQueries);
-            }
-            catch (e) {
-                sendNotification(NotificationType.error, `Failed to get connectivity info for ${agentDisplayName}. Error: ${e}`);
-            }
-        };
-        if (targetAgent && !isLegacyAgentType(targetAgent)) {
-            void fetchAgentDetails();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to run this when targetAgent changes
-    }, [targetAgent]);
     const handleStop = useCallback(() => {
         try {
             controller?.current?.abort();
             controller.current = null;
-            updateOutput(_jsx(MUIAlert, { id: "opp-finder-error-occurred-alert", severity: "warning", children: "Request cancelled." }));
+            addTurn({
+                id: uuid(),
+                role: MessageRole.Warning,
+                text: "Request cancelled.",
+            });
         }
         finally {
             resetState();
         }
-    }, [resetState, updateOutput]);
-    // Expose the handleStop method to parent components via ref for external control (e.g., to cancel chat requests)
-    useImperativeHandle(ref, () => ({
-        handleStop,
-    }), [handleStop]);
+    }, [addTurn, resetState]);
     // Regex to check if user has typed anything besides whitespace
     const userInputEmpty = !chatInput || chatInput.length === 0 || hasOnlyWhitespace(chatInput);
     // Enable Send button when there is user input and not awaiting a response
@@ -498,46 +484,30 @@ 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 && chatOutput.length > 0;
+    const enableClearChatButton = !isAwaitingLlm && (turns.length > 0 || agentChatHistory?.chatHistory?.length > 0);
     const getPlaceholder = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
     const handleClearChat = useCallback(() => {
-        setChatOutput([]);
+        setTurns([]);
         resetHistory(targetAgent);
-        previousUserQuery.current = "";
+        setPreviousUserQuery("");
         currentResponse.current = "";
-        lastAIMessage.current = "";
-        introduceAgent();
-    }, [introduceAgent, resetHistory, targetAgent]);
-    /**
-     * Extract the list of React nodes to display in the output window, potentially filtering out "thinking"
-     * nodes if the user has chosen to hide them. Nodes that aren't to be shown are not even added to the DOM.
-     * There are a couple of special nodes that are always shown: chat history (collapsible accordion) and whatever
-     * we detected as the "final answer" (also a collapsible accordion).
-     *
-     * We use the MUIAccordion check as a proxy for "lines received from the agents"; everything that isn't
-     * a MUIAccordion (e.g. alerts, connectivity info, greetings) is not something we would want to hide when
-     * "show thinking" is off, so we always show those regardless of the "show thinking" setting.
-     */
-    const nodesList = useMemo(() => chatOutput
-        .map((item) => {
-        if (isValidElement(item) && item.type === MUIAccordion) {
-            const shouldShow = showThinking || item.key === finalAnswerKey.current || item.key === CHAT_HISTORY_KEY;
-            return shouldShow ? item : null;
-        }
-        return item;
-    })
-        .filter((item) => item !== null), [chatOutput, showThinking]);
-    const getNoAgentOverlay = () => (_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",
-        } }));
+    }, [resetHistory, targetAgent]);
+    // 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: {
+                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",
+            } }) }));
     const getTitle = () => (_jsxs(Box, { id: `llm-chat-title-container-${id}`, sx: {
             alignItems: "center",
             borderTopLeftRadius: "var(--bs-border-radius)",
@@ -549,32 +519,61 @@ 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 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[targetAgent] ?? "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 })), _jsx(FormattedMarkdown, { id: `${id}-formatted-markdown`, nodesList: nodesList, style: darkMode ? atelierDuneDark : a11yLight, wrapLongLines: shouldWrapOutput }), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: agentSampleQueries }), 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: [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, { handleClearChat: handleClearChat, enableClearChatButton: enableClearChatButton, isAwaitingLlm: isAwaitingLlm, handleSend: handleSend, handleStop: handleStop, previousUserQuery: previousUserQuery.current, shouldEnableRegenerateButton: shouldEnableRegenerateButton })] }));
+                                }, 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: {
             ...divStyle,
             display: "flex",
@@ -586,7 +585,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",