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

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

@@ -28,32 +28,25 @@ 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 { 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 { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { v4 as uuid } from "uuid";
-import { AgentConnectivity } from "./AgentConnectivity.js";
+import { AgentIntro } from "./AgentIntro.js";
+import { AgentMetadata } from "./AgentMetadata.js";
 import { ChatHistory } from "./ChatHistory.js";
+import { AGENT_IMAGE } from "./Const.js";
 import { ControlButtons } from "./ControlButtons.js";
-import { FormattedMarkdown } from "./FormattedMarkdown.js";
-import { AGENT_GREETINGS } from "./Greetings.js";
-import { SampleQueries } from "./SampleQueries.js";
+import { Conversation } from "./Conversation.js";
+import { MessageRole } from "./ConversationTurn.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 { 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 { 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";
@@ -62,8 +55,6 @@ import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "../Voic
 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;
@@ -81,16 +72,15 @@ const MAX_CHAT_OUTPUT_ITEMS = 50;
  * 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, 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 = 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,19 +92,14 @@ 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("");
     // 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);
@@ -151,8 +136,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,96 +143,55 @@ 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(() => {
+        const container = chatOutputRef.current;
+        if (!container)
+            return;
         // Scroll the final answer into view
         if (finalAnswerRef.current && !isAwaitingLlm) {
-            chatOutputRef.current.scrollTop = finalAnswerRef.current.offsetTop - 50;
+            container.scrollTop = finalAnswerRef.current.offsetTop - 50;
             return;
         }
-        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;
+        // Live-streaming auto-scroll
+        if (autoScrollEnabled) {
+            container.scrollTop = container.scrollHeight;
         }
-        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];
+    }, [autoScrollEnabled, isAwaitingLlm, turns]);
+    const addTurn = useCallback((turn) => {
+        setTurns((current) => {
+            const next = [...current, turn];
             return next.length > MAX_CHAT_OUTPUT_ITEMS ? next.slice(-MAX_CHAT_OUTPUT_ITEMS) : next;
         });
     }, []);
+    // We use this to update the same "turn" as chunks come in from legacy agents
+    const legacyTurnIdRef = useRef(null);
     const handleChunk = useCallback((chunk) => {
         // Give container a chance to process the chunk first
         const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
         succeeded.current = succeeded.current || onChunkReceivedResult;
         // For legacy agents, we either get plain text or Markdown. Just output it as-is.
         if (isLegacyAgentType(targetAgent)) {
-            // Display output as-is
-            updateOutput(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,
+                    role: MessageRole.LegacyAgent,
+                    text: currentResponse.current,
+                    alwaysShow: true,
+                });
+            }
+            else {
+                // We already have a turn for this response, so just update the text of that turn.
+                setTurns((prev) => prev.map((t) => (t.id === legacyTurnIdRef.current ? { ...t, text: currentResponse.current } : t)));
+            }
             // Check for Final Answer from legacy agent
             const finalAnswerMatch = extractFinalAnswer(currentResponse.current);
             if (finalAnswerMatch) {
@@ -264,6 +206,10 @@ export const ChatCommon = ({ ref, ...props }) => {
             // But don't want to spam output by logging errors for every bad message.
             return;
         }
+        // Keep track of AI messages. The last one is (by definition) the "final answer" from the agents.
+        if (chatMessage.type === ChatMessageType.AI && chatMessage.text) {
+            lastAIMessage.current = chatMessage.text;
+        }
         // Shallow merge existing slyData with incoming chatMessage.sly_data
         if (chatMessage.sly_data) {
             updateSlyData(targetAgent, chatMessage.sly_data);
@@ -279,7 +225,12 @@ export const ChatCommon = ({ ref, ...props }) => {
             // 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 }));
+                addTurn({
+                    id: uuid(),
+                    role: MessageRole.Warning,
+                    text: errorMessage,
+                    alwaysShow: true,
+                });
                 succeeded.current = false;
             }
         }
@@ -290,20 +241,15 @@ export const ChatCommon = ({ ref, ...props }) => {
             const agentName = chatMessage.origin?.length > 0
                 ? cleanUpAgentName(chatMessage.origin[chatMessage.origin.length - 1].tool)
                 : "Agent message";
-            updateOutput(processLogLine(chatMessage.text, agentName, chatMessage.type));
+            addTurn({
+                id: uuid(),
+                role: MessageRole.Agent,
+                agentName,
+                text: chatMessage.text,
+            });
             currentResponse.current += chatMessage.text;
         }
-    }, [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, addTurn, updateSlyData, updateChatContext]);
     /**
      * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
      */
@@ -313,9 +259,9 @@ export const ChatCommon = ({ ref, ...props }) => {
         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,18 @@ 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}`,
+                        alwaysShow: true,
+                    });
                 }
             }
         } while (attemptNumber < MAX_AGENT_RETRIES && !succeeded.current);
         return wasAborted;
     }, [
+        addTurn,
         agentChatHistory,
         currentUser,
         extraParams,
@@ -367,7 +319,6 @@ export const ChatCommon = ({ ref, ...props }) => {
         legacyAgentEndpoint,
         neuroSanURL,
         targetAgent,
-        updateOutput,
     ]);
     const handleSend = useCallback(async (query) => {
         // Record user query in chat history. Discard anything beyond MAX_CHAT_HISTORY_ITEMS
@@ -377,41 +328,57 @@ 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 }));
+        addTurn({
+            id: uuid(),
+            role: MessageRole.User,
+            text: query,
+            alwaysShow: true,
+        });
         // Add ID block for agent
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }));
+        addTurn({
+            agentDisplayName,
+            agentName: targetAgent,
+            alwaysShow: true,
+            id: uuid(),
+            role: MessageRole.AgentHeader,
+            text: agentDisplayName,
+        });
         // Allow clients to do something when streaming starts
         onStreamingStarted?.();
         // Set up the abort controller
         controller.current = new AbortController();
         setIsAwaitingLlm(true);
-        if (showThinking) {
-            updateOutput(_jsx(MUIAccordion, { id: "initiating-orchestration-accordion", items: [
-                    {
-                        title: `Contacting ${agentDisplayName}...`,
-                        content: `Query: ${queryToSend}`,
-                    },
-                ], sx: { marginBottom: "1rem" } }));
-        }
+        addTurn({
+            agentName: `Contacting ${agentDisplayName}...`,
+            id: uuid(),
+            role: MessageRole.Agent,
+            text: `Query: ${queryToSend}`,
+        });
         try {
             // Invoke the logic to send the request and retry as necessary
             const wasAborted = await doRetryLoop(queryToSend);
             if (!wasAborted && !succeeded.current) {
-                updateOutput(_jsx(MUIAlert, { id: "opp-finder-max-retries-exceeded-alert", severity: "error", children: `Gave up after ${MAX_AGENT_RETRIES} attempts.` }));
+                addTurn({
+                    alwaysShow: true,
+                    id: uuid(),
+                    role: MessageRole.Error,
+                    text: `Gave up after ${MAX_AGENT_RETRIES} attempts.`,
+                });
             }
             // Display prominent "Final Answer" message if we have one
             if (lastAIMessage.current) {
-                // 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");
-                }
-                updateOutput(_jsx("div", { id: "final-answer-div", ref: finalAnswerRef, style: { marginBottom: "1rem" }, children: processLogLine(lastAIMessage.current, "Final Answer", ChatMessageType.AI, true) }));
+                addTurn({
+                    alwaysShow: true,
+                    id: uuid(),
+                    role: MessageRole.FinalAnswer,
+                    text: lastAIMessage.current,
+                });
                 // Record bot answer in history.
                 if (currentResponse?.current?.length > 0) {
                     updateChatHistory(targetAgent, [new AIMessage({ content: lastAIMessage.current, id: uuid() })]);
@@ -422,8 +389,6 @@ export const ChatCommon = ({ ref, ...props }) => {
                 // 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 +396,32 @@ export const ChatCommon = ({ ref, ...props }) => {
             onStreamingComplete?.();
         }
     }, [
+        addTurn,
         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." }));
+            addTurn({
+                alwaysShow: true,
+                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 +429,31 @@ 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;
     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)",
@@ -550,6 +466,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             paddingBottom: "0.25rem",
         }, children: [_jsx(Typography, { id: `llm-chat-title-${id}-text`, sx: { fontSize: "0.9rem" }, children: title }), onClose && (_jsx(IconButton, { "data-testid": `close-button-${id}`, id: `close-button-${id}`, onClick: onClose, children: _jsx(CloseIcon, { id: `close-icon-${id}` }) }))] }));
     const getOptionsButtons = () => (_jsxs(_Fragment, { children: [_jsx(Tooltip, { id: "show-thinking", title: showThinking ? "Displaying agent thinking" : "Hiding agent thinking", children: _jsx("span", { id: "show-thinking-span", children: _jsx(LlmChatOptionsButton, { enabled: showThinking, id: "show-thinking-button", onClick: () => setShowThinking(!showThinking), posRight: 150, disabled: isAwaitingLlm, children: _jsx(AccountTreeIcon, { id: "show-thinking-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) }) }), _jsx(Tooltip, { id: "enable-autoscroll", title: autoScrollEnabled ? "Autoscroll enabled" : "Autoscroll disabled", children: _jsx(LlmChatOptionsButton, { enabled: autoScrollEnabled, id: "autoscroll-button", onClick: () => setAutoScrollEnabled(!autoScrollEnabled), posRight: 80, children: _jsx(VerticalAlignBottomIcon, { id: "autoscroll-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) }), _jsx(Tooltip, { id: "wrap-tooltip", title: shouldWrapOutput ? "Text wrapping enabled" : "Text wrapping disabled", children: _jsx(LlmChatOptionsButton, { enabled: shouldWrapOutput, id: "wrap-button", onClick: () => setShouldWrapOutput(!shouldWrapOutput), posRight: 10, children: _jsx(WrapTextIcon, { id: "wrap-icon", sx: { color: "var(--bs-white)", fontSize: "0.85rem" } }) }) })] }));
+    const agentIntro = (_jsx(AgentIntro, { agentDisplayName: agentDisplayName, customAgentGreetings: customAgentGreetings, targetAgent: targetAgent }, targetAgent));
     const getResponseBox = () => (_jsxs(Box, { id: "llm-response-div", sx: {
             ...divStyle,
             border: "var(--bs-border-width) var(--bs-border-style)",
@@ -572,9 +489,9 @@ export const ChatCommon = ({ ref, ...props }) => {
                     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: {
+                }, tabIndex: -1, children: [agentChatHistory?.chatHistory?.length > 0 && (_jsx(ChatHistory, { agentImage: AGENT_IMAGE, agentDisplayName: agentDisplayName, chatHistoryKey: CHAT_HISTORY_KEY, currentUser: currentUser, id: `${id}-chat-history`, messages: agentChatHistory.chatHistory, targetAgent: targetAgent, userImage: userImage })), !isLegacyAgentType(targetAgent) && agentIntro, !isLegacyAgentType(targetAgent) && (_jsx(AgentMetadata, { disableQueries: isAwaitingLlm, handleSend: handleSend, currentUser: currentUser, id: `${id}-agent-metadata-display`, neuroSanURL: neuroSanURL, targetAgent: targetAgent })), _jsx(Conversation, { id: `${id}-conversation-display`, currentUser: currentUser, finalAnswerRef: finalAnswerRef, showThinking: showThinking, shouldWrapOutput: shouldWrapOutput, turns: turns, userImage: userImage }), isLegacyAgentType(targetAgent) && agentIntro, isAwaitingLlm && (_jsxs(Box, { id: "awaitingOutputContainer", sx: { display: "flex", alignItems: "center", fontSize: "smaller" }, children: [_jsx("span", { id: "working-span", style: { marginRight: "1rem" }, children: "Working..." }), _jsx(CircularProgress, { id: "awaitingOutputSpinner", sx: {
                                     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",

package/dist/components/AgentChat/ChatCommon/Const.d.ts

@@ -0,0 +1 @@
+export declare const AGENT_IMAGE = "/agent.svg";

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

@@ -0,0 +1,2 @@
+// Avatar to use for agents in chat
+export const AGENT_IMAGE = "/agent.svg";

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

@@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import Loop from "@mui/icons-material/Loop";
 import StopCircle from "@mui/icons-material/StopCircle";
 import { SmallLlmChatButton } from "../Common/LlmChatButton.js";
@@ -23,4 +23,4 @@ import { SmallLlmChatButton } from "../Common/LlmChatButton.js";
  * Generate the Control Buttons for a chat window.
  * @returns A fragment containing the Control Buttons.
  */
-export const ControlButtons = ({ handleClearChat, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsxs(_Fragment, { children: [!isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, posBottom: 8, posRight: 65, children: _jsx(DeleteOutline, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), !isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), posBottom: 8, posRight: 23, children: _jsx(Loop, { fontSize: "small", id: "generate-icon", sx: { color: "var(--bs-white)" } }) }))] }));
+export const ControlButtons = ({ handleClearChat, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsxs(_Fragment, { children: [!isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, posBottom: 8, posRight: 65, children: _jsx(DeleteOutlined, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), !isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), posBottom: 8, posRight: 23, children: _jsx(Loop, { fontSize: "small", id: "generate-icon", sx: { color: "var(--bs-white)" } }) }))] }));

package/dist/components/AgentChat/ChatCommon/Conversation.d.ts

@@ -0,0 +1,15 @@
+import { FC, Ref } from "react";
+import { ConversationTurn } from "./ConversationTurn.js";
+interface ConversationProps {
+    readonly id: string;
+    readonly currentUser: string;
+    readonly finalAnswerRef?: Ref<HTMLDivElement>;
+    readonly userImage?: string;
+    readonly showThinking: boolean;
+    readonly shouldWrapOutput: boolean;
+    readonly turns: ConversationTurn[];
+}
+/**
+ */
+export declare const Conversation: FC<ConversationProps>;
+export {};