@cognizant-ai-lab/ui-common 1.4.1 → 1.5.0

package/dist/components/AgentChat/{ChatCommon.js → ChatCommon/ChatCommon.js}

@@ -24,7 +24,6 @@ import CloseIcon from "@mui/icons-material/Close";
 import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
 import WrapTextIcon from "@mui/icons-material/WrapText";
 import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import Input from "@mui/material/Input";
@@ -33,27 +32,34 @@ import { alpha, useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { jsonrepair } from "jsonrepair";
-import { isValidElement, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import ReactMarkdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
+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 { SampleQueries } from "./SampleQueries.js";
 import { SendButton } from "./SendButton.js";
 import { HLJS_THEMES } from "./SyntaxHighlighterThemes.js";
-import { isLegacyAgentType } from "./Types.js";
 import { UserQueryDisplay } from "./UserQueryDisplay.js";
-import { chatMessageFromChunk, checkError, cleanUpAgentName, removeTrailingUuid } from "./Utils.js";
-import { MicrophoneButton } from "./VoiceChat/MicrophoneButton.js";
-import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "./VoiceChat/VoiceChat.js";
-import { getAgentFunction, getConnectivity, sendChatQuery } from "../../controller/agent/Agent.js";
-import { sendLlmRequest, StreamingUnit } from "../../controller/llm/LlmChat.js";
-import { ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.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 { getAgentFunction, getConnectivity, 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 { 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 { 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
@@ -61,29 +67,28 @@ 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;
-// Maximum number of sample queries to show
-const MAX_SAMPLE_QUERIES = 5;
-// Maximum length of query to show in sample query chips
-const QUERY_TRUNCATE_LENGTH = 80;
+/**
+ * Extract the final answer from the response from a legacy agent
+ * @param response The response from the legacy agent
+ * @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;
 /**
  * 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 slyData = useRef({});
-    const { id, currentUser, userImage, setIsAwaitingLlm, isAwaitingLlm, onChunkReceived, onStreamingStarted, onStreamingComplete, onSend, setPreviousResponse, targetAgent, legacyAgentEndpoint, agentPlaceholders = EMPTY, clearChatOnNewAgent = false, extraParams, backgroundColor, title, onClose, neuroSanURL, } = props;
-    // Expose the handleStop method to parent components via ref for external control (e.g., to cancel chat requests)
-    useImperativeHandle(ref, () => ({
-        handleStop,
-    }));
+    const { agentGreetings = EMPTY, agentPlaceholders = EMPTY, backgroundColor, currentUser, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, setIsAwaitingLlm, setPreviousResponse, targetAgent, title, userImage, } = 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, setPreviousUserQuery] = useState("");
+    const previousUserQuery = useRef("");
     // Chat output window contents
     const [chatOutput, setChatOutput] = useState([]);
     // To accumulate current response, which will be different from the contents of the output window if there is a
@@ -95,7 +100,7 @@ export const ChatCommon = ({ ref, ...props }) => {
     const chatInputRef = useRef(null);
     // Controller for cancelling fetch request
     const controller = useRef(null);
-    // For tracking if we're autoscrolling. A button allows the user to enable or disable autoscrolling.
+    // 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);
@@ -105,18 +110,19 @@ export const ChatCommon = ({ ref, ...props }) => {
     const lastAIMessage = useRef("");
     // Ref for the final answer key, so we can highlight the accordion
     const finalAnswerKey = useRef("");
-    // Use useRef here since we don't want changes in the chat history to trigger a re-render
-    const chatHistory = useRef([]);
-    /* Use useRef here since we don't want changes in the chat context to trigger a re-render
-    Note on ChatContext vs ChatHistory:
-    "Legacy" (not Neuro-san) agents use ChatHistory, which is a collection of messages of various types, Human, AI,
-    System etc. It mimics the langchain field of the same name.
-    Neuro-san agents deal in ChatContext, which is a more complex collection of chat histories, since more agents
-    are involved.
-    Both fields fulfill the same purpose: to maintain conversation state across multiple messages.
-    */
-    const chatContext = useRef(null);
+    // 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);
     // Microphone state for voice input
     const [isMicOn, setIsMicOn] = useState(false);
@@ -147,6 +153,7 @@ export const ChatCommon = ({ ref, ...props }) => {
     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
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -165,21 +172,13 @@ export const ChatCommon = ({ ref, ...props }) => {
     useEffect(() => {
         // Scroll the final answer into view
         if (finalAnswerRef.current && !isAwaitingLlm) {
-            const offset = 50;
-            chatOutputRef.current.scrollTop = finalAnswerRef.current.offsetTop - offset;
+            chatOutputRef.current.scrollTop = finalAnswerRef.current.offsetTop - 50;
             return;
         }
         if (autoScrollEnabledRef.current && chatOutputRef?.current) {
             chatOutputRef.current.scrollTop = chatOutputRef.current.scrollHeight;
         }
-    }, [chatOutput]);
-    useEffect(() => {
-        // Clear chat output on change of neuro-san URL
-        // TODO: We want to revise this in the future to not need a useEffect
-        setChatOutput([]);
-        currentResponse.current = "";
-        setShowThinking(false);
-    }, [neuroSanURL]);
+    }, [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.
@@ -192,7 +191,7 @@ export const ChatCommon = ({ ref, ...props }) => {
      * @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 = (logLine, summary, messageType, isFinalAnswer) => {
+    const processLogLine = useCallback((logLine, summary, messageType, isFinalAnswer) => {
         // extract the parts of the line
         let repairedJson;
         try {
@@ -229,146 +228,20 @@ export const ChatCommon = ({ ref, ...props }) => {
                                     0 9px 28px 8px ${alpha(shadowColor, 0.05)}`
                     : "none",
             } }, hashedSummary));
-    };
-    const agentDisplayName = cleanUpAgentName(removeTrailingUuid(targetAgent));
-    const introduceAgent = () => {
-        /**
-         * Introduce the agent to the user with a friendly greeting
-         */
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }));
-        // Random greeting
-        const greeting = AGENT_GREETINGS[Math.floor(Math.random() * AGENT_GREETINGS.length)];
-        updateOutput(greeting);
-    };
-    /**
-     * Render the connectivity info as a list of origins and their tools
-     * @param connectivityInfo The connectivity info to render
-     * @returns A ReactNode representing the connectivity info with agents and their tools
-     */
-    const renderConnectivityInfo = (connectivityInfo) => (_jsx(_Fragment, { children: connectivityInfo
-            // Don't show connection to self
-            .filter((info) => info.origin.toLowerCase() !== targetAgent.toLowerCase())
-            // Sort by origin name
-            .sort((a, b) => a.origin.localeCompare(b.origin))
-            // Render each origin and its tools
-            .map((info) => (_jsxs("li", { id: info.origin, children: [_jsx("b", { id: info.origin, children: info.origin }), _jsx("ul", { id: `${info.origin}-tools`, style: { marginLeft: "8px" }, children: info?.tools?.map((tool) => (_jsx("li", { id: tool, children: tool }, tool))) })] }, info.origin))) }));
-    /**
-     * Render sample queries as clickable chips. Agents may or may not have sample queries defined.
-     * @param sampleQueries The sample queries to render (from "connectivity" API)
-     * @returns A ReactNode representing the sample queries as clickable chips. If a user clicks a chip, it will
-     * send the query to the agent.
-     */
-    const renderSampleQueries = (sampleQueries) => {
-        return sampleQueries?.length > 0 ? (_jsx(Box, { id: "sample-queries-box", sx: { marginTop: "2rem", marginBottom: "1rem" }, children: sampleQueries.slice(0, MAX_SAMPLE_QUERIES).map((query) => (_jsx(Tooltip, { id: `tooltip-${query}`, title: `Click to send query: "${query}"`, children: _jsx(Chip, { id: `sample-query-${query}`, label: query.length > QUERY_TRUNCATE_LENGTH
-                        ? `${query.slice(0, QUERY_TRUNCATE_LENGTH)}...`
-                        : query, onClick: async () => {
-                        await handleSend(query);
-                    }, sx: {
-                        color: "var(--bs-white)",
-                        marginRight: "1rem",
-                        marginBottom: "1rem",
-                        backgroundColor: "var(--bs-accent1-medium)",
-                        "&:hover": {
-                            backgroundColor: "var(--bs-accent1-dark)",
-                        },
-                    } }, query) }, `tooltip-${query}`))) })) : null;
-    };
-    useEffect(() => {
-        const newAgent = async () => {
-            if (clearChatOnNewAgent) {
-                // New agent, so clear chat context if desired
-                chatContext.current = null;
-                currentResponse.current = "";
-                slyData.current = null;
-                setChatOutput([]);
-            }
-            // Introduce the agent to the user
-            introduceAgent();
-            // if not neuro san agent return since we won't get connectivity info
-            if (isLegacyAgentType(targetAgent)) {
-                return;
-            }
-            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(MUIAccordion, { id: `${id}-agent-details`, sx: {
-                        marginTop: "1rem",
-                        marginBottom: "1rem",
-                    }, items: [
-                        {
-                            title: "Network Details",
-                            content: [
-                                `My description is: "${agentFunction?.function?.description}"`,
-                                _jsx("h6", { id: "connectivity-header", style: { marginTop: "1rem" }, children: "I can connect you to the following agents" }, "item-1"),
-                                _jsx("ul", { id: "connectivity-list", "aria-labelledby": "connectivity-header", style: { marginTop: "1rem" }, children: renderConnectivityInfo(connectivity?.connectivity_info.concat()) }, "item-2"),
-                            ],
-                        },
-                    ] }));
-                updateOutput(renderSampleQueries(connectivity?.metadata?.["sample_queries"] ?? []));
-            }
-            catch (e) {
-                sendNotification(NotificationType.error, `Failed to get connectivity info for ${cleanUpAgentName(targetAgent)}. Error: ${e}`);
-            }
-        };
-        if (targetAgent) {
-            void newAgent();
-        }
-    }, [targetAgent]);
+    }, [a11yLight, atelierDuneDark, darkMode, shadowColor, shouldWrapOutput]);
     /**
-     * Handles adding content to the output window.
+     * 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. Updates currentResponse as a side effect.
+     * @returns Nothing, but updates the output window with the new content.
      */
-    const updateOutput = (node) => {
-        currentResponse.current += node;
-        setChatOutput((currentOutput) => [...currentOutput, node]);
-    };
-    /**
-     * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
-     */
-    const resetState = () => {
-        // 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 = "";
-    };
-    const handleStop = () => {
-        try {
-            controller?.current?.abort();
-            controller.current = null;
-            updateOutput(_jsx(MUIAlert, { id: "opp-finder-error-occurred-alert", severity: "warning", children: "Request cancelled." }));
-        }
-        finally {
-            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
-    const shouldEnableSendButton = !userInputEmpty && !isAwaitingLlm;
-    // 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;
-    /**
-     * Extract the final answer from the response from a legacy agent
-     * @param response The response from the legacy agent
-     * @returns The final answer from the agent, if it exists or null if it doesn't
-     */
-    const extractFinalAnswer = (response) => /Final Answer: (?<finalAnswerText>.*)/su.exec(response)?.groups?.["finalAnswerText"];
-    const handleChunk = (chunk) => {
+    const updateOutput = useCallback((node) => {
+        setChatOutput((current) => {
+            const next = [...current, node];
+            return next.length > MAX_CHAT_OUTPUT_ITEMS ? next.slice(-MAX_CHAT_OUTPUT_ITEMS) : next;
+        });
+    }, []);
+    const handleChunk = useCallback((chunk) => {
         // Give container a chance to process the chunk first
         const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
         succeeded.current = succeeded.current || onChunkReceivedResult;
@@ -376,6 +249,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         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) {
@@ -390,17 +264,15 @@ export const ChatCommon = ({ ref, ...props }) => {
             // But don't want to spam output by logging errors for every bad message.
             return;
         }
+        // Shallow merge existing slyData with incoming chatMessage.sly_data
+        if (chatMessage.sly_data) {
+            updateSlyData(targetAgent, 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.
-            chatContext.current = chatMessage.chat_context;
-            // Nothing more to do with this message. It's just a message to give us the chat context, so return
-            return;
-        }
-        // Merge slyData.current with incoming chatMessage.sly_data
-        if (chatMessage.sly_data) {
-            slyData.current = { ...slyData.current, ...chatMessage.sly_data };
+            updateChatContext(targetAgent, chatMessage.chat_context);
         }
         // Check if there is an error block in the "structure" field of the chat message.
         if (chatMessage.structure) {
@@ -419,9 +291,36 @@ export const ChatCommon = ({ ref, ...props }) => {
                 ? cleanUpAgentName(chatMessage.origin[chatMessage.origin.length - 1].tool)
                 : "Agent message";
             updateOutput(processLogLine(chatMessage.text, agentName, chatMessage.type));
+            currentResponse.current += chatMessage.text;
         }
-    };
-    const doQueryLoop = async (query) => {
+    }, [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]);
+    /**
+     * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
+     */
+    const resetState = useCallback(() => {
+        // 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 = "";
+    }, [setIsAwaitingLlm, setPreviousResponse, targetAgent]);
+    /*
+     * The main logic for sending a query to the server, with retries on errors.
+     */
+    const doRetryLoop = useCallback(async (query) => {
         succeeded.current = false;
         let attemptNumber = 0;
         let wasAborted = false;
@@ -431,15 +330,16 @@ export const ChatCommon = ({ ref, ...props }) => {
                 attemptNumber += 1;
                 // Check which agent type we are dealing with
                 if (isLegacyAgentType(targetAgent)) {
-                    // It's a legacy agent (these go directly to the LLM and are different from the Neuro-san agents).
+                    // 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
-                    await sendLlmRequest(handleChunk, controller?.current.signal, legacyAgentEndpoint, extraParams, query, chatHistory.current, null, StreamingUnit.Chunk);
+                    await sendLlmRequest(handleChunk, controller?.current.signal, legacyAgentEndpoint, extraParams, query, agentChatHistory.chatHistory, null, StreamingUnit.Chunk);
                 }
                 else {
                     // It's a Neuro-san agent.
                     // Some coded tools (data generator...) expect the username provided in slyData.
-                    const slyDataWithUserName = { ...slyData.current, login: currentUser };
-                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, targetAgent, handleChunk, chatContext.current, slyDataWithUserName, currentUser, StreamingUnit.Line);
+                    const slyDataWithUserName = { ...agentChatHistory?.slyData, ...extraSlyData, login: currentUser };
+                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, targetAgent, handleChunk, agentChatHistory.chatContext, slyDataWithUserName, currentUser, StreamingUnit.Line);
                 }
             }
             catch (error) {
@@ -457,24 +357,35 @@ export const ChatCommon = ({ ref, ...props }) => {
                 }
             }
         } while (attemptNumber < MAX_AGENT_RETRIES && !succeeded.current);
-        return { wasAborted };
-    };
-    const handleSend = async (query) => {
-        // Record user query in chat history
-        chatHistory.current = [...chatHistory.current, new HumanMessage(previousUserQuery)];
+        return wasAborted;
+    }, [
+        agentChatHistory,
+        currentUser,
+        extraParams,
+        extraSlyData,
+        handleChunk,
+        legacyAgentEndpoint,
+        neuroSanURL,
+        targetAgent,
+        updateOutput,
+    ]);
+    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]);
         // 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
         // get intercepted and re-modified (if applicable) on "regenerate".
-        setPreviousUserQuery(query);
+        previousUserQuery.current = 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.
+        // 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: cleanUpAgentName(removeTrailingUuid(targetAgent)), title: targetAgent, userImage: AGENT_IMAGE }));
+        updateOutput(_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }));
         // Allow clients to do something when streaming starts
         onStreamingStarted?.();
         // Set up the abort controller
@@ -483,13 +394,14 @@ export const ChatCommon = ({ ref, ...props }) => {
         if (showThinking) {
             updateOutput(_jsx(MUIAccordion, { id: "initiating-orchestration-accordion", items: [
                     {
-                        title: `Contacting ${cleanUpAgentName(targetAgent)}...`,
+                        title: `Contacting ${agentDisplayName}...`,
                         content: `Query: ${queryToSend}`,
                     },
                 ], sx: { marginBottom: "1rem" } }));
         }
         try {
-            const { wasAborted } = await doQueryLoop(queryToSend);
+            // 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.` }));
             }
@@ -500,118 +412,217 @@ export const ChatCommon = ({ ref, ...props }) => {
                     updateOutput("    \n\n");
                 }
                 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 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");
-            // Record bot answer in history.
-            if (currentResponse?.current?.length > 0) {
-                chatHistory.current = [...chatHistory.current, new AIMessage(currentResponse.current)];
-            }
         }
         finally {
             resetState();
             // Allow parent components to do something when streaming is complete
             onStreamingComplete?.();
         }
-    };
+    }, [
+        agentDisplayName,
+        currentUser,
+        doRetryLoop,
+        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." }));
+        }
+        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]);
+    // 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
+    const shouldEnableSendButton = !userInputEmpty && !isAwaitingLlm;
+    // 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 getPlaceholder = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
-    return (_jsxs(Box, { id: `llm-chat-${id}`, sx: {
+    const handleClearChat = useCallback(() => {
+        setChatOutput([]);
+        resetHistory(targetAgent);
+        previousUserQuery.current = "";
+        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",
+        } }));
+    const getTitle = () => (_jsxs(Box, { id: `llm-chat-title-container-${id}`, sx: {
+            alignItems: "center",
+            borderTopLeftRadius: "var(--bs-border-radius)",
+            borderTopRightRadius: "var(--bs-border-radius)",
+            display: "flex",
+            justifyContent: "space-between",
+            paddingLeft: "1rem",
+            paddingRight: "0.5rem",
+            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 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",
-            flexDirection: "column",
             flexGrow: 1,
             height: "100%",
+            margin: "10px",
             position: "relative",
-        }, children: [!targetAgent && (_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",
-                } })), _jsxs(Box, { id: "chat-content", sx: {
+            overflowY: "auto",
+        }, children: [getOptionsButtons(), _jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
+                    backgroundColor: backgroundColor || undefined,
+                    borderWidth: "1px",
+                    borderRadius: "0.5rem",
+                    fontSize: "smaller",
+                    resize: "none",
+                    overflowY: "auto", // Enable vertical scrollbar
+                    paddingBottom: "60px",
+                    paddingTop: "7.5px",
+                    paddingLeft: "15px",
+                    paddingRight: "15px",
+                    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: {
+                                    color: "var(--bs-primary)",
+                                }, size: "1rem" })] }))] }), _jsx(ControlButtons, { handleClearChat: handleClearChat, enableClearChatButton: enableClearChatButton, isAwaitingLlm: isAwaitingLlm, handleSend: handleSend, handleStop: handleStop, previousUserQuery: previousUserQuery.current, shouldEnableRegenerateButton: shouldEnableRegenerateButton })] }));
+    const getUserInputBox = () => (_jsxs(Box, { id: "user-input-div", sx: {
+            ...divStyle,
+            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)",
+                    borderRadius: "var(--bs-border-radius)",
                     display: "flex",
-                    flexDirection: "column",
                     flexGrow: 1,
-                    height: "100%",
-                    opacity: targetAgent ? 1 : 0.4,
-                    pointerEvents: targetAgent ? "auto" : "none",
-                }, children: [title && (_jsxs(Box, { id: `llm-chat-title-container-${id}`, sx: {
-                            alignItems: "center",
-                            borderTopLeftRadius: "var(--bs-border-radius)",
-                            borderTopRightRadius: "var(--bs-border-radius)",
-                            display: "flex",
-                            justifyContent: "space-between",
-                            paddingLeft: "1rem",
-                            paddingRight: "0.5rem",
-                            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}` }) }))] })), _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",
-                            position: "relative",
-                            overflowY: "auto",
-                        }, 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" } }) }) }), _jsxs(Box, { id: "llm-responses", ref: chatOutputRef, sx: {
-                                    backgroundColor: backgroundColor || undefined,
-                                    borderWidth: "1px",
-                                    borderRadius: "0.5rem",
-                                    fontSize: "smaller",
-                                    resize: "none",
-                                    overflowY: "auto", // Enable vertical scrollbar
-                                    paddingBottom: "60px",
-                                    paddingTop: "7.5px",
-                                    paddingLeft: "15px",
-                                    paddingRight: "15px",
-                                    width: "100%",
-                                }, tabIndex: -1, children: [_jsx(FormattedMarkdown, { id: `${id}-formatted-markdown`, nodesList: chatOutput.map((item) => {
-                                            if (isValidElement(item) && item.type === MUIAccordion) {
-                                                const shouldShow = showThinking || item.key === finalAnswerKey.current;
-                                                return (_jsx(Box, { sx: { display: shouldShow ? "block" : "none" }, children: item }, item.key));
-                                            }
-                                            return item;
-                                        }), style: darkMode ? atelierDuneDark : a11yLight, wrapLongLines: shouldWrapOutput }), 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, { clearChatOnClickCallback: () => {
-                                    setChatOutput([]);
-                                    chatHistory.current = [];
-                                    chatContext.current = null;
-                                    setPreviousUserQuery("");
-                                    currentResponse.current = "";
-                                    lastAIMessage.current = "";
-                                    introduceAgent();
-                                }, enableClearChatButton: enableClearChatButton, isAwaitingLlm: isAwaitingLlm, handleSend: handleSend, handleStop: handleStop, previousUserQuery: previousUserQuery, shouldEnableRegenerateButton: shouldEnableRegenerateButton })] }), _jsxs(Box, { id: "user-input-div", style: { ...divStyle, 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)",
-                                    borderRadius: "var(--bs-border-radius)",
-                                    display: "flex",
-                                    flexGrow: 1,
-                                    fontSize: "smaller",
-                                    marginRight: "0.75rem",
-                                    paddingBottom: "0.5rem",
-                                    paddingTop: "0.5rem",
-                                    paddingLeft: "1rem",
-                                    paddingRight: "1rem",
-                                    transition: "margin-right 0.2s",
-                                }, onChange: (event) => {
-                                    setChatInput(event.target.value);
-                                }, onKeyDown: async (event) => {
-                                    if (event.key === "Enter" && !event.shiftKey) {
-                                        event.preventDefault();
-                                        await handleSend(chatInput);
-                                    }
-                                }, value: chatInput, endAdornment: _jsxs(InputAdornment, { id: "input-adornments", position: "end", disableTypography: true, children: [voiceInputState.isProcessingSpeech && (_jsx(CircularProgress, { size: 16, sx: {
-                                                color: "var(--bs-primary)",
-                                                marginRight: "0.5rem",
-                                            } })), _jsx(IconButton, { id: "clear-input-button", onClick: () => {
-                                                setChatInput("");
-                                            }, 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) })] })] })] }));
+                    fontSize: "smaller",
+                    marginRight: "0.75rem",
+                    paddingBottom: "0.5rem",
+                    paddingTop: "0.5rem",
+                    paddingLeft: "1rem",
+                    paddingRight: "1rem",
+                    transition: "margin-right 0.2s",
+                }, onChange: (event) => {
+                    setChatInput(event.target.value);
+                }, onKeyDown: async (event) => {
+                    if (event.key === "Enter" && !event.shiftKey) {
+                        event.preventDefault();
+                        await handleSend(chatInput);
+                    }
+                }, value: chatInput, endAdornment: _jsxs(InputAdornment, { id: "input-adornments", position: "end", disableTypography: true, children: [voiceInputState.isProcessingSpeech && (_jsx(CircularProgress, { size: 16, sx: {
+                                color: "var(--bs-primary)",
+                                marginRight: "0.5rem",
+                            } })), _jsx(IconButton, { id: "clear-input-button", onClick: () => {
+                                setChatInput("");
+                            }, 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) })] }));
+    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",
+            position: "relative",
+        }, children: [title && getTitle(), getResponseBox(), getUserInputBox()] }));
+    return (_jsx(Box, { id: `llm-chat-${id}`, sx: {
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            height: "100%",
+            position: "relative",
+        }, children: targetAgent ? getChatBox() : getNoAgentOverlay() }));
 };