@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/AgentChat/ChatCommon.js

@@ -0,0 +1,581 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+/**
+ * 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 { Box, Input, useColorScheme } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { jsonrepair } from "jsonrepair";
+import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import ReactMarkdown from "react-markdown";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { ControlButtons } from "./ControlButtons.js";
+import { FormattedMarkdown } from "./FormattedMarkdown.js";
+import { AGENT_GREETINGS } from "./Greetings.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 } 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 } from "../../controller/llm/LlmChat.js";
+import { ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.js";
+import { hashString, hasOnlyWhitespace } from "../../utils/text.js";
+import { isDarkMode } from "../../utils/Theme.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";
+// 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;
+/**
+ * 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 = forwardRef((props, ref) => {
+    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,
+    }));
+    // User LLM chat input
+    const [chatInput, setChatInput] = useState("");
+    // Previous user query (for "regenerate" feature)
+    const [previousUserQuery, setPreviousUserQuery] = useState("");
+    // 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
+    // chat session
+    const currentResponse = useRef("");
+    // Ref for output text area, so we can auto scroll it
+    const chatOutputRef = useRef(null);
+    // Ref for user input text area, so we can handle shift-enter
+    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.
+    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("");
+    // 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);
+    const finalAnswerRef = useRef(null);
+    const [showThinking, setShowThinking] = useState(false);
+    // Microphone state for voice input
+    const [isMicOn, setIsMicOn] = useState(false);
+    // Ref for speech recognition
+    const speechRecognitionRef = useRef(null);
+    // Voice state for speech recognition
+    const [voiceInputState, setVoiceInputState] = useState({
+        currentTranscript: "",
+        finalTranscript: "",
+        isListening: false,
+        isProcessingSpeech: false,
+    });
+    // Define styles based on user options (wrap setting)
+    const divStyle = shouldWrapOutput
+        ? {
+            whiteSpace: "normal",
+            overflow: "visible",
+            textOverflow: "clip",
+            overflowX: "visible",
+        }
+        : {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            overflowX: "auto",
+        };
+    // Keeps track of whether the agent completed its task
+    const succeeded = useRef(false);
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    const { atelierDuneDark, a11yLight } = HLJS_THEMES;
+    useEffect(() => {
+        // Set up speech recognition
+        const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
+        // Clean up function
+        return () => cleanupAndStopSpeechRecognition(speechRecognitionRef, handlers);
+    }, []);
+    // Hide/show existing accordions based on showThinking state
+    useEffect(() => {
+        setChatOutput((currentOutput) => currentOutput.map((item) => {
+            if (isValidElement(item) && item.type === MUIAccordion) {
+                const itemAsAccordion = item;
+                return cloneElement(itemAsAccordion, {
+                    sx: {
+                        ...item.props.sx,
+                        display: showThinking || item.key === finalAnswerKey?.current ? "block" : "none",
+                    },
+                });
+            }
+            return item;
+        }));
+    }, [showThinking, darkMode]);
+    // 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) {
+            const offset = 50;
+            chatOutputRef.current.scrollTop = finalAnswerRef.current.offsetTop - offset;
+            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]);
+    /**
+     * 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 = (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 || "No further details" }, hashString(logLine))) })),
+                },
+            ], sx: {
+                fontSize: "large",
+                marginBottom: "1rem",
+                display: showThinking || isFinalAnswer ? "block" : "none",
+                boxShadow: isFinalAnswer
+                    ? `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
+                                    0 9px 28px 8px rgba(0, 0, 0, 0.05)`
+                    : "none",
+            } }, hashedSummary));
+    };
+    /**
+     * Introduce the agent to the user with a friendly greeting
+     */
+    const introduceAgent = () => {
+        updateOutput(_jsx(UserQueryDisplay, { userQuery: cleanUpAgentName(targetAgent), 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))) }));
+    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",
+                        borderColor: darkMode ? "var(--bs-white)" : "var(--bs-border-color)",
+                    }, items: [
+                        {
+                            title: "Agent 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"),
+                            ],
+                        },
+                    ] }));
+            }
+            catch (e) {
+                sendNotification(NotificationType.error, `Failed to get connectivity info for ${cleanUpAgentName(targetAgent)}. Error: ${e}`);
+            }
+        };
+        if (targetAgent) {
+            void newAgent();
+        }
+    }, [targetAgent]);
+    /**
+     * Handles adding content to the output window.
+     * @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.
+     */
+    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) => {
+        // 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);
+            // Check for Final Answer from legacy agent
+            const finalAnswerMatch = extractFinalAnswer(currentResponse.current);
+            if (finalAnswerMatch) {
+                lastAIMessage.current = finalAnswerMatch;
+            }
+            return;
+        }
+        // For Neuro-san agents, we expect a ChatMessage structure in the chunk.
+        const chatMessage = chatMessageFromChunk(chunk);
+        if (!chatMessage) {
+            // This is an error since Neuro-san agents should send us ChatMessage structures.
+            // But don't want to spam output by logging errors for every bad message.
+            return;
+        }
+        // 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 };
+        }
+        // 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;
+            }
+        }
+        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.
+            const agentName = chatMessage.origin?.length > 0
+                ? cleanUpAgentName(chatMessage.origin[chatMessage.origin.length - 1].tool)
+                : "Agent message";
+            updateOutput(processLogLine(chatMessage.text, agentName, chatMessage.type));
+        }
+    };
+    async function doQueryLoop(query) {
+        succeeded.current = false;
+        let attemptNumber = 0;
+        let wasAborted = false;
+        do {
+            try {
+                // Increment the attempt number and set the state to indicate we're awaiting a response
+                attemptNumber += 1;
+                // Check which agent type we are dealing with
+                if (isLegacyAgentType(targetAgent)) {
+                    // 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);
+                }
+                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);
+                }
+            }
+            catch (error) {
+                // Was it due to user aborting the request?
+                wasAborted = error instanceof Error && error.name === "AbortError";
+                if (wasAborted) {
+                    // AbortErrors are handled elsewhere. We also want to stop retries here.
+                    break;
+                }
+                if (!wasAborted) {
+                    if (error instanceof Error) {
+                        console.error(error, error.stack);
+                    }
+                    updateOutput(_jsx(MUIAlert, { id: "opp-finder-error-occurred-alert", severity: "error", children: `Error occurred: ${error}` }));
+                }
+            }
+        } 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)];
+        // 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);
+        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: cleanUpAgentName(targetAgent), title: targetAgent, userImage: AGENT_IMAGE }));
+        // 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 ${cleanUpAgentName(targetAgent)}...`,
+                        content: `Query: ${queryToSend}`,
+                    },
+                ], sx: { marginBottom: "1rem" } }));
+        }
+        try {
+            const { wasAborted } = await doQueryLoop(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");
+                }
+                updateOutput(_jsx("div", { id: "final-answer-div", ref: finalAnswerRef, style: { marginBottom: "1rem" }, children: processLogLine(lastAIMessage.current, "Final Answer", ChatMessageType.AI, true) }));
+            }
+            // 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?.();
+        }
+    };
+    return (_jsxs(Box, { id: `llm-chat-${id}`, sx: {
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            height: "100%",
+        }, 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 || "var(--bs-secondary-blue)",
+                            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, 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: agentPlaceholders[targetAgent] || `Chat with ${cleanUpAgentName(targetAgent)}`, 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) })] })] }));
+});
+// Set a useful display name for the component for debugging purposes. We have to do it here because we're using
+// forwardRef in the main definition.
+ChatCommon.displayName = "ChatCommon";

package/dist/components/AgentChat/ControlButtons.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+interface ControlButtonsProps {
+    clearChatOnClickCallback: () => void;
+    enableClearChatButton: boolean;
+    isAwaitingLlm: boolean;
+    handleSend: (query: string) => void;
+    handleStop: () => void;
+    previousUserQuery: string;
+    shouldEnableRegenerateButton: boolean;
+}
+/**
+ * Generate the Control Buttons for a chat window.
+ * @returns A fragment containing the Control Buttons.
+ */
+export declare const ControlButtons: FC<ControlButtonsProps>;
+export {};

package/dist/components/AgentChat/ControlButtons.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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, Loop, StopCircle } from "@mui/icons-material";
+import { SmallLlmChatButton } from "./LlmChatButton.js";
+// #endregion: Types
+/**
+ * Generate the Control Buttons for a chat window.
+ * @returns A fragment containing the Control Buttons.
+ */
+export const ControlButtons = ({ clearChatOnClickCallback, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsxs(_Fragment, { children: [!isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: clearChatOnClickCallback, 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)" } }) }))] }));

package/dist/components/AgentChat/FormattedMarkdown.d.ts

@@ -0,0 +1,32 @@
+import { JSX as ReactJSX, ReactNode } from "react";
+import { SyntaxHighlighterProps } from "react-syntax-highlighter";
+/**
+ * The props for the FormattedMarkdown component.
+ */
+interface FormattedMarkdownProps {
+    /**
+     * The id for the div that will contain the formatted markdown.
+     */
+    readonly id: string;
+    /**
+     * The list of nodes to format. Each node can be a string or a React node.
+     */
+    readonly nodesList: ReactNode[];
+    /**
+     * The style to use for the syntax highlighter. @see SyntaxHighlighterThemes
+     */
+    readonly style: SyntaxHighlighterProps["style"];
+    /**
+     * Whether to wrap long lines in the markdown.
+     */
+    readonly wrapLongLines: boolean;
+}
+/**
+ * Format the output to ensure that text nodes are formatted as markdown but other nodes are passed along as-is.
+ *
+ * @param props The props for the component. @see FormattedMarkdownProps
+ * @returns The formatted output. Consecutive string nodes will be aggregated and wrapped in a markdown component,
+ * while other nodes will be passed along as-is.
+ */
+export declare const FormattedMarkdown: ({ id, nodesList, style, wrapLongLines, }: FormattedMarkdownProps) => ReactJSX.Element;
+export {};