@cognizant-ai-lab/ui-common 1.3.3 → 1.4.0

package/dist/components/AgentChat/ChatCommon.js

@@ -23,14 +23,17 @@ 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 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";
 import InputAdornment from "@mui/material/InputAdornment";
+import { alpha, useTheme } from "@mui/material/styles";
 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 { isValidElement, useEffect, useImperativeHandle, useRef, useState, } from "react";
 import ReactMarkdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { ControlButtons } from "./ControlButtons.js";
@@ -40,14 +43,13 @@ 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 { 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 } 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";
@@ -59,18 +61,25 @@ 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;
 /**
  * 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) => {
+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,
     }));
+    // 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)
@@ -136,8 +145,7 @@ export const ChatCommon = forwardRef((props, ref) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const { mode, systemMode } = useColorScheme();
-    const darkMode = isDarkMode(mode, systemMode);
+    const darkMode = theme.palette.mode === "dark";
     const { atelierDuneDark, a11yLight } = HLJS_THEMES;
     useEffect(() => {
         // Set up speech recognition
@@ -145,21 +153,6 @@ export const ChatCommon = forwardRef((props, ref) => {
         // 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;
@@ -226,23 +219,23 @@ export const ChatCommon = forwardRef((props, ref) => {
         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))) })),
+                    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",
-                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)`
+                    ? `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));
     };
-    /**
-     * Introduce the agent to the user with a friendly greeting
-     */
+    const agentDisplayName = cleanUpAgentName(removeTrailingUuid(targetAgent));
     const introduceAgent = () => {
-        updateOutput(_jsx(UserQueryDisplay, { userQuery: cleanUpAgentName(targetAgent), title: targetAgent, userImage: AGENT_IMAGE }));
+        /**
+         * 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);
@@ -259,6 +252,27 @@ export const ChatCommon = forwardRef((props, ref) => {
             .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) {
@@ -288,10 +302,9 @@ export const ChatCommon = forwardRef((props, ref) => {
                 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",
+                            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"),
@@ -299,6 +312,7 @@ export const ChatCommon = forwardRef((props, ref) => {
                             ],
                         },
                     ] }));
+                updateOutput(renderSampleQueries(connectivity?.metadata?.["sample_queries"] ?? []));
             }
             catch (e) {
                 sendNotification(NotificationType.error, `Failed to get connectivity info for ${cleanUpAgentName(targetAgent)}. Error: ${e}`);
@@ -358,7 +372,7 @@ export const ChatCommon = forwardRef((props, ref) => {
         // 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.
+        // For legacy agents, we either get plain text or Markdown. Just output it as-is.
         if (isLegacyAgentType(targetAgent)) {
             // Display output as-is
             updateOutput(chunk);
@@ -407,7 +421,7 @@ export const ChatCommon = forwardRef((props, ref) => {
             updateOutput(processLogLine(chatMessage.text, agentName, chatMessage.type));
         }
     };
-    async function doQueryLoop(query) {
+    const doQueryLoop = async (query) => {
         succeeded.current = false;
         let attemptNumber = 0;
         let wasAborted = false;
@@ -435,7 +449,7 @@ export const ChatCommon = forwardRef((props, ref) => {
                     // AbortErrors are handled elsewhere. We also want to stop retries here.
                     break;
                 }
-                if (!wasAborted) {
+                else {
                     if (error instanceof Error) {
                         console.error(error, error.stack);
                     }
@@ -444,7 +458,7 @@ export const ChatCommon = forwardRef((props, ref) => {
             }
         } 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)];
@@ -460,7 +474,7 @@ export const ChatCommon = forwardRef((props, ref) => {
         // 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 }));
+        updateOutput(_jsx(UserQueryDisplay, { userQuery: cleanUpAgentName(removeTrailingUuid(targetAgent)), title: targetAgent, userImage: AGENT_IMAGE }));
         // Allow clients to do something when streaming starts
         onStreamingStarted?.();
         // Set up the abort controller
@@ -500,82 +514,104 @@ export const ChatCommon = forwardRef((props, ref) => {
             onStreamingComplete?.();
         }
     };
+    const getPlaceholder = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
     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)",
+            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: {
                     display: "flex",
+                    flexDirection: "column",
                     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)",
+                    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,
-                            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";
+                            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) })] })] })] }));
+};

package/dist/components/AgentChat/ControlButtons.js

@@ -14,7 +14,9 @@ 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 DeleteOutline from "@mui/icons-material/DeleteOutline";
+import Loop from "@mui/icons-material/Loop";
+import StopCircle from "@mui/icons-material/StopCircle";
 import { SmallLlmChatButton } from "./LlmChatButton.js";
 // #endregion: Types
 /**

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

@@ -5,7 +5,7 @@ import { SyntaxHighlighterProps } from "react-syntax-highlighter";
  */
 interface FormattedMarkdownProps {
     /**
-     * The id for the div that will contain the formatted markdown.
+     * The id for the div that will contain the formatted Markdown.
      */
     readonly id: string;
     /**
@@ -17,15 +17,15 @@ interface FormattedMarkdownProps {
      */
     readonly style: SyntaxHighlighterProps["style"];
     /**
-     * Whether to wrap long lines in the markdown.
+     * 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.
+ * 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,
+ * @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;

package/dist/components/AgentChat/FormattedMarkdown.js

@@ -21,10 +21,10 @@ import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import { hashString } from "../../utils/text.js";
 /**
- * Format the output to ensure that text nodes are formatted as markdown but other nodes are passed along as-is.
+ * 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,
+ * @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 const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false, }) => {
@@ -32,18 +32,16 @@ export const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false,
      * Get the formatted output for a given string. The string is assumed to be in Markdown format.
      * @param stringToFormat The string to format.
      * @param index The index of the string in the nodes list. Used as "salt" to generate a unique key.
-     * @returns The formatted markdown.
+     * @returns The formatted Markdown.
      */
     const getFormattedMarkdown = (stringToFormat, index) => (_jsx(ReactMarkdown, { rehypePlugins: [rehypeRaw, rehypeSlug], components: {
-            code(codeProps) {
+            code: (codeProps) => {
                 const { children, className, ...rest } = codeProps;
                 const match = /language-(?<language>\w+)/u.exec(className || "");
                 return match ? (_jsx(SyntaxHighlighter, { id: `syntax-highlighter-${match.groups["language"]}`, PreTag: "div", language: match.groups["language"], style: style, children: String(children).replace(/\n$/u, "") })) : (_jsx("code", { id: `code-${className}`, ...rest, className: className, style: wrapLongLines ? { whiteSpace: "pre-wrap", wordBreak: "break-word" } : {}, children: children }));
             },
             // Handle links specially since we want them to open in a new tab
-            a({ ...codeProps }) {
-                return (_jsx("a", { ...codeProps, id: "reference-link", target: "_blank", rel: "noopener noreferrer", children: codeProps.children }));
-            },
+            a: ({ ...codeProps }) => (_jsx("a", { ...codeProps, id: "reference-link", target: "_blank", rel: "noopener noreferrer", children: codeProps.children })),
         }, children: stringToFormat }, `${hashString(stringToFormat)}-${index}`));
     const getNodeKey = (node, index) => {
         // If it has a key, use that

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

@@ -3,10 +3,6 @@ type LLMChatGroupConfigBtnProps = {
     posRight?: number;
     posBottom?: number;
 };
-export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLButtonElement>;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
-export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLButtonElement>;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
 export {};

package/dist/components/AgentChat/LlmChatButton.js

@@ -13,13 +13,13 @@ 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 { styled } from "@mui/material";
 import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
 // #endregion: Types
 export const LlmChatButton = styled(Button, {
     shouldForwardProp: (prop) => !["posRight", "posBottom"].includes(String(prop)),
-})(({ disabled, posRight, posBottom }) => ({
-    background: "var(--bs-primary) !important",
+})(({ theme, disabled, posRight, posBottom }) => ({
+    background: `${theme.palette.primary.main} !important`,
     borderRadius: "var(--bs-border-radius)",
     bottom: posBottom !== undefined ? posBottom : 0,
     cursor: disabled ? "default" : "pointer",

package/dist/components/AgentChat/UserQueryDisplay.js

@@ -14,16 +14,14 @@ 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 { styled } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { DEFAULT_USER_IMAGE } from "../../const.js";
 // #region: Styled Components
 const UserQueryContainer = styled("div")(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     border: "var(--bs-border-width) var(--bs-border-style)",
-    borderColor: theme.palette.mode === "dark" ? "var(--bs-white)" : "var(--bs-border-color)",
     borderRadius: "var(--bs-border-radius)",
     boxShadow: `0 0px 6px 0 ${theme.palette.mode === "dark" ? "var(--bs-accent2-light)" : "rgba(var(--bs-primary-rgb), 0.15)"}`,
-    color: theme.palette.mode === "dark" ? "var(--bs-white)" : "var(--bs-primary)",
     display: "inline-flex",
     padding: "10px",
 }));

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

@@ -3,8 +3,9 @@ export declare const KNOWN_MESSAGE_TYPES: ChatMessageType[];
 export declare const KNOWN_MESSAGE_TYPES_FOR_PLASMA: ChatMessageType[];
 export declare const chatMessageFromChunk: (chunk: string) => ChatMessage | null;
 export declare const checkError: (chatMessageJson: object) => string | null;
+export declare const removeTrailingUuid: (agentName: string) => string;
 /**
- * Convert FOO_BAR to more human "Foo Bar"
+ * Convert FOO_BAR to more human "Foo Bar".
  * @param agentName Agent name in SNAKE_CASE format.
  * @returns User-friendly agent name.
  */

package/dist/components/AgentChat/Utils.js

@@ -54,8 +54,11 @@ export const checkError = (chatMessageJson) => {
         return null;
     }
 };
+export const removeTrailingUuid = (agentName) => {
+    return agentName?.replace(/-[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/u, "");
+};
 /**
- * Convert FOO_BAR to more human "Foo Bar"
+ * Convert FOO_BAR to more human "Foo Bar".
  * @param agentName Agent name in SNAKE_CASE format.
  * @returns User-friendly agent name.
  */

package/dist/components/AgentChat/VoiceChat/MicrophoneButton.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, FC, MutableRefObject, SetStateAction } from "react";
+import { Dispatch, FC, RefObject, SetStateAction } from "react";
 import { SpeechRecognitionState } from "./VoiceChat.js";
 export interface MicrophoneButtonProps {
     /**
@@ -12,7 +12,7 @@ export interface MicrophoneButtonProps {
     /**
      * Reference to the SpeechRecognition instance
      */
-    speechRecognitionRef: MutableRefObject<SpeechRecognition | null>;
+    speechRecognitionRef: RefObject<SpeechRecognition | null>;
     /**
      * Current voice input state
      */

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

@@ -1,4 +1,4 @@
-import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { Dispatch, RefObject, SetStateAction } from "react";
 export interface SpeechRecognitionHandlers {
     end: () => void;
     error: (event: SpeechRecognitionErrorEvent) => void;
@@ -28,6 +28,6 @@ export interface SpeechRecognitionState {
     isProcessingSpeech: boolean;
 }
 export declare const checkSpeechSupport: () => boolean;
-export declare function cleanupAndStopSpeechRecognition(speechRecognitionRef: MutableRefObject<SpeechRecognition | null>, handlers: SpeechRecognitionHandlers | null): void;
-export declare function setupSpeechRecognition(setChatInput: Dispatch<SetStateAction<string>>, setVoiceInputState: Dispatch<SetStateAction<SpeechRecognitionState>>, speechRecognitionRef: MutableRefObject<SpeechRecognition | null>): SpeechRecognitionHandlers | null;
+export declare const cleanupAndStopSpeechRecognition: (speechRecognitionRef: RefObject<SpeechRecognition | null>, handlers: SpeechRecognitionHandlers | null) => void;
+export declare const setupSpeechRecognition: (setChatInput: Dispatch<SetStateAction<string>>, setVoiceInputState: Dispatch<SetStateAction<SpeechRecognitionState>>, speechRecognitionRef: RefObject<SpeechRecognition | null>) => SpeechRecognitionHandlers | null;
 export declare const toggleListening: (isMicOn: boolean, recognition: SpeechRecognition | null) => Promise<void>;