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

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

@@ -1,14 +1,8 @@
 import { BaseMessage } from "@langchain/core/messages";
 import { FC } from "react";
 interface ChatHistoryProps {
-    readonly agentDisplayName: string;
-    readonly agentImage: string;
-    readonly chatHistoryKey: string;
-    readonly currentUser: string;
-    readonly id: string;
     readonly messages: BaseMessage[];
-    readonly targetAgent: string;
-    readonly userImage: string;
+    readonly id: string;
 }
 /**
  * Component for displaying chat history from previous interactions with the agent.

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

@@ -1,27 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { UserQueryDisplay } from "./UserQueryDisplay.js";
-import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
-import { hashString } from "../../../utils/text.js";
-import { MUIAccordion } from "../../Common/MUIAccordion.js";
+import { useTheme } from "@mui/material/styles";
+import { Conversation } from "./Conversation.js";
+import { MessageRole } from "./ConversationTurn.js";
+import { adjustBrightness } from "../../../Theme/Theme.js";
+import { AccordionLite } from "../../Common/AccordionLite.js";
 // #endregion: Types
+/**
+ * Helper function to convert from BaseMessage format used in persisted chat history to ConversationTurn format used for
+ * rendering the conversation.
+ * @param chatHistory
+ */
+const toTurns = (chatHistory) => chatHistory
+    .filter((message) => message.type === "human" || message.type === "ai")
+    .map((message) => {
+    const role = message.type === "human" ? MessageRole.User : MessageRole.Agent;
+    return {
+        id: message.id,
+        text: message.content.toString(),
+        role,
+    };
+});
 /**
  * Component for displaying chat history from previous interactions with the agent.
  */
-export const ChatHistory = ({ agentDisplayName, agentImage, chatHistoryKey, currentUser, id, messages, targetAgent, userImage, }) => (_jsx(MUIAccordion, { id: id, sx: { marginBottom: "2rem", marginTop: "1rem" }, items: [
-        {
-            title: "Chat History",
-            content: messages.map((message) => {
-                const itemKey = hashString(message.text + message.type + message.id);
-                if (message.type.toUpperCase() === ChatMessageType.HUMAN) {
-                    return (_jsx(UserQueryDisplay, { sx: { opacity: 0.5 }, title: currentUser, userImage: userImage, userQuery: message.text }, itemKey));
-                }
-                else if (message.type.toUpperCase() === ChatMessageType.AI) {
-                    return (_jsx(UserQueryDisplay, { sx: { opacity: 0.5 }, title: targetAgent, userImage: agentImage, userQuery: `${agentDisplayName}: ${message.text}` }, itemKey));
-                }
-                else {
-                    console.warn(`Unrecognized message type in chat history: ${message.type}`);
-                    return null;
-                }
-            }),
-        },
-    ] }, chatHistoryKey));
+export const ChatHistory = ({ id, messages }) => {
+    const theme = useTheme();
+    const turns = toTurns(messages);
+    const conversation = (_jsx(Conversation, { id: `${id}-conversation`, 
+        // Pass "true" here to include final answers, which get persisted as agent
+        // messages in chat history.
+        includeAgentMessages: true, shouldWrapOutput: true, turns: turns }, `${id}-conversation`));
+    return (_jsx(AccordionLite, { id: `${id}-history-items`, items: conversation, contentSx: {
+            // Slightly darker background to differentiate from main chat
+            backgroundColor: adjustBrightness(theme.palette.background.paper, -5),
+            opacity: 0.5,
+        }, title: "Chat History" }));
+};

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

@@ -1,15 +1,13 @@
-import { FC, Ref } from "react";
+import { FC } 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 includeAgentMessages?: boolean;
     readonly shouldWrapOutput: boolean;
     readonly turns: ConversationTurn[];
 }
 /**
+ * Component to render a conversation between the user and the agent.
  */
 export declare const Conversation: FC<ConversationProps>;
 export {};

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

@@ -1,63 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { alpha, useTheme } from "@mui/material/styles";
-import { jsonrepair } from "jsonrepair";
+import Box from "@mui/material/Box";
+import { styled, useTheme } from "@mui/material/styles";
 import { useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { AGENT_IMAGE } from "./Const.js";
 import { MessageRole } from "./ConversationTurn.js";
 import { FormattedMarkdown } from "./FormattedMarkdown.js";
 import { HLJS_THEMES } from "./SyntaxHighlighterThemes.js";
-import { UserQueryDisplay } from "./UserQueryDisplay.js";
-import { MUIAccordion } from "../../Common/MUIAccordion.js";
 import { MUIAlert } from "../../Common/MUIAlert.js";
 const { atelierDuneDark, a11yLight } = HLJS_THEMES;
 /**
- * Renders a "turn" from the conversation
- * @param darkMode Whether the current theme is in dark mode. Used to determine syntax highlighter theme.
- * @param shadowColor The color to use for shadows on the final answer accordion.
- * @param shouldWrapOutput Whether to wrap long lines in the output. Passed down to the syntax highlighter component.
- * @param turn The turn to render. @see ConversationTurn type for more info
- * @returns A React component representing the "turn"
+ * Styled component for a user turn bubble.
  */
-const renderTurn = (darkMode, shadowColor, shouldWrapOutput, turn) => {
-    // 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(turn.text);
-        // Now try to parse it. We don't care about the result, only if it throws on parsing.
-        JSON.parse(repairedJson);
-        repairedJson = repairedJson.replaceAll(String.raw `\n`, "\n").replaceAll(String.raw `\"`, "'");
+const UserTurnBubble = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: "1rem",
+    marginBottom: "1rem",
+    marginLeft: "auto",
+    overflowWrap: "anywhere",
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+    paddingTop: "0.5rem",
+    paddingBottom: "0.5rem",
+    whiteSpace: "pre-wrap",
+    width: "60%",
+}));
+/**
+ * Format the content of a conversation turn for display. Pretty-print JSON.
+ * @param turn The conversation turn to format.
+ * @returns The formatted content of the turn with JSON fences as appropriate.
+ */
+const formatTurnContent = (turn) => {
+    if (turn.text) {
+        return turn.text;
     }
-    catch {
-        // Not valid JSON
-        repairedJson = null;
+    if (turn.structure != null) {
+        return `\`\`\`json\n${JSON.stringify(turn.structure, null, 2)}\n\`\`\``;
+    }
+    else {
+        return "";
     }
-    const isFinalAnswer = turn.role === MessageRole.FinalAnswer;
-    const summary = isFinalAnswer ? "Final Answer" : (turn.agentName ?? "Agent");
-    return (_jsx(MUIAccordion, { id: `${turn.id}-panel`, defaultExpandedPanelKey: isFinalAnswer ? 1 : null, items: [
-            {
-                title: summary,
-                content: (_jsx("div", { id: turn.id, children: repairedJson ? (_jsx(SyntaxHighlighter, { id: "syntax-highlighter", language: "json", style: darkMode ? atelierDuneDark : a11yLight, showLineNumbers: false, wrapLongLines: shouldWrapOutput, children: repairedJson })) : (_jsx(ReactMarkdown, { children: turn.text })) })),
-            },
-        ], 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",
-        } }, turn.id));
 };
 /**
+ * Component to render a conversation between the user and the agent.
  */
-export const Conversation = ({ currentUser, finalAnswerRef, id, shouldWrapOutput, showThinking, turns, userImage, }) => {
+export const Conversation = ({ id, includeAgentMessages = false, shouldWrapOutput, turns }) => {
     // MUI theme
     const theme = useTheme();
     const darkMode = theme.palette.mode === "dark";
-    const shadowColor = darkMode ? theme.palette.common.white : theme.palette.common.black;
     /**
      * Render the list of conversation turns.
      */
@@ -65,22 +53,12 @@ export const Conversation = ({ currentUser, finalAnswerRef, id, shouldWrapOutput
         switch (turn.role) {
             case MessageRole.User:
                 return [
-                    _jsx(UserQueryDisplay, { userQuery: turn.text, title: currentUser, userImage: userImage }, turn.id),
+                    _jsx(UserTurnBubble, { id: turn.id, children: turn.text }, turn.id),
                 ];
             case MessageRole.Agent:
-                return showThinking || turn.alwaysShow
-                    ? [renderTurn(darkMode, shadowColor, shouldWrapOutput, turn)]
-                    : [];
-            case MessageRole.AgentHeader:
-                return [
-                    _jsx(UserQueryDisplay, { title: turn.agentName ?? "Agent", userImage: AGENT_IMAGE, userQuery: turn.agentDisplayName }, turn.id),
-                ];
-            case MessageRole.LegacyAgent:
-                return [turn.text];
+                return includeAgentMessages ? [formatTurnContent(turn)] : [];
             case MessageRole.FinalAnswer:
-                return [
-                    _jsx("div", { id: "final-answer-div", ref: finalAnswerRef, style: { marginBottom: "1rem" }, children: renderTurn(darkMode, shadowColor, shouldWrapOutput, turn) }, turn.id),
-                ];
+                return [formatTurnContent(turn)];
             case MessageRole.Warning:
                 return [
                     _jsx(MUIAlert, { id: `warning-${turn.id}-alert`, severity: "warning", children: turn.text }, turn.id),
@@ -97,6 +75,6 @@ export const Conversation = ({ currentUser, finalAnswerRef, id, shouldWrapOutput
                 throw new Error(`Unhandled message role: ${_exhaustive}`);
             }
         }
-    }), [currentUser, darkMode, finalAnswerRef, shadowColor, shouldWrapOutput, showThinking, turns, userImage]);
+    }), [includeAgentMessages, turns]);
     return (_jsx(FormattedMarkdown, { id: `${id}-conversation`, nodesList: nodesList, style: darkMode ? atelierDuneDark : a11yLight, wrapLongLines: shouldWrapOutput }));
 };

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

@@ -1,19 +1,23 @@
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+/**
+ * The various messages roles in a conversation turn.
+ */
 export declare enum MessageRole {
-    "AgentHeader" = "AgentHeader",
     "Agent" = "Agent",
     "Error" = "Error",
     "FinalAnswer" = "FinalAnswer",
-    "LegacyAgent" = "LegacyAgent",
     "User" = "User",
     "Warning" = "Warning"
 }
+/**
+ * Represents a single turn in a conversation, which may include a message from the user or agent, or an error
+ */
 export interface ConversationTurn {
-    readonly agentName?: string;
     readonly agentDisplayName?: string;
-    readonly alwaysShow?: boolean;
+    readonly agentName?: string;
     readonly id: string;
     readonly messageType?: ChatMessageType;
     readonly role: MessageRole;
-    readonly text: string;
+    readonly structure?: Record<string, unknown>;
+    readonly text?: string;
 }

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

@@ -1,10 +1,11 @@
+/**
+ * The various messages roles in a conversation turn.
+ */
 export var MessageRole;
 (function (MessageRole) {
-    MessageRole["AgentHeader"] = "AgentHeader";
     MessageRole["Agent"] = "Agent";
     MessageRole["Error"] = "Error";
     MessageRole["FinalAnswer"] = "FinalAnswer";
-    MessageRole["LegacyAgent"] = "LegacyAgent";
     MessageRole["User"] = "User";
     MessageRole["Warning"] = "Warning";
 })(MessageRole || (MessageRole = {}));

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

@@ -14,11 +14,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 Box from "@mui/material/Box";
 import { Fragment } from "react";
 import ReactMarkdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
 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.
@@ -34,11 +36,11 @@ export const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false,
      * @param index The index of the string in the nodes list. Used as "salt" to generate a unique key.
      * @returns The formatted Markdown.
      */
-    const getFormattedMarkdown = (stringToFormat, index) => (_jsx(ReactMarkdown, { rehypePlugins: [rehypeRaw, rehypeSlug], components: {
+    const getFormattedMarkdown = (stringToFormat, index) => (_jsx(ReactMarkdown, { rehypePlugins: [rehypeRaw, rehypeSlug], remarkPlugins: [remarkGfm], components: {
             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 }));
+                return match ? (_jsx(SyntaxHighlighter, { PreTag: "div", id: `syntax-highlighter-${match.groups["language"]}`, language: match.groups["language"], style: style, wrapLongLines: wrapLongLines, 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 }) => (_jsx("a", { ...codeProps, id: "reference-link", target: "_blank", rel: "noopener noreferrer", children: codeProps.children })),
@@ -76,5 +78,5 @@ export const FormattedMarkdown = ({ id, nodesList, style, wrapLongLines = false,
         const concatenatedText = getFormattedMarkdown(currentTextNodes.join(""), nodesList.length);
         formattedOutput.push(concatenatedText);
     }
-    return _jsx("div", { id: id, children: formattedOutput });
+    return _jsx(Box, { id: id, children: formattedOutput });
 };

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

@@ -8,6 +8,9 @@ interface SampleQueriesProps {
 }
 /**
  * Render sample queries as clickable chips. Agents may or may not have sample queries defined.
+ * @param disabled Whether the chips should be disabled or not. Chips should be disabled when the agent is
+ * thinking/responding to prevent multiple simultaneous queries being sent to the agent.
+ * @param handleSend Function to handle sending a query to the agent when a chip is clicked.
  * @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.

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

@@ -9,11 +9,14 @@ export const MAX_SAMPLE_QUERIES = 5;
 export const QUERY_TRUNCATE_LENGTH = 80;
 /**
  * Render sample queries as clickable chips. Agents may or may not have sample queries defined.
+ * @param disabled Whether the chips should be disabled or not. Chips should be disabled when the agent is
+ * thinking/responding to prevent multiple simultaneous queries being sent to the agent.
+ * @param handleSend Function to handle sending a query to the agent when a chip is clicked.
  * @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.
  */
-export const SampleQueries = ({ disabled, handleSend, sampleQueries }) => sampleQueries?.length > 0 ? (_jsx(Box, { id: "sample-queries-box", sx: { marginTop: "2rem", marginBottom: "1rem" }, children: sampleQueries.slice(0, MAX_SAMPLE_QUERIES).map((query) => {
+export const SampleQueries = ({ disabled, handleSend, sampleQueries }) => sampleQueries?.length > 0 ? (_jsx(Box, { id: "sample-queries-box", sx: { marginTop: "1rem" }, children: sampleQueries.slice(0, MAX_SAMPLE_QUERIES).map((query) => {
         const hashedQuery = hashString(query);
         return (_jsx(Tooltip, { title: `Click to send query: "${query}"`, children: _jsx(Chip, { disabled: disabled, label: query.length > QUERY_TRUNCATE_LENGTH
                     ? `${query.slice(0, QUERY_TRUNCATE_LENGTH)}...`
@@ -23,7 +26,7 @@ export const SampleQueries = ({ disabled, handleSend, sampleQueries }) => sample
                     color: "var(--bs-white)",
                     marginRight: "1rem",
                     marginBottom: "1rem",
-                    backgroundColor: "var(--bs-accent1-medium)",
-                    "&:hover": { backgroundColor: "var(--bs-accent1-dark)" },
+                    backgroundColor: "var(--bs-accent2-medium)",
+                    "&:hover": { backgroundColor: "var(--bs-accent2-dark)" },
                 } }) }, `tooltip-${hashedQuery}`));
     }) })) : null;

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { ConversationTurn } from "./ConversationTurn.js";
+interface ThinkingProps {
+    readonly id: string;
+    readonly turns: ConversationTurn[];
+}
+/**
+ * Component to render the "thinking" section of the chat, which includes all messages from the agent that are
+ * of a type included in THINKING_MESSAGE_TYPES.
+ */
+export declare const Thinking: FC<ThinkingProps>;
+export {};

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { isEmpty } from "lodash-es";
+import { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import { MessageRole } from "./ConversationTurn.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { AccordionLite } from "../../Common/AccordionLite.js";
+/**
+ * Set of message types that should be included in the "thinking" section.
+ */
+const THINKING_MESSAGE_TYPES = new Set([
+    ChatMessageType.AI,
+    ChatMessageType.AGENT,
+    ChatMessageType.AGENT_PROGRESS,
+    ChatMessageType.SYSTEM,
+]);
+const DEFAULT_AGENT_NAME = "Agent";
+const formatTurn = (turn) => {
+    const headerLine = `**${turn.agentName ?? DEFAULT_AGENT_NAME}**: ${turn.text || ""}`;
+    const structureLine = turn.structure != null ? `\n\`${JSON.stringify(turn.structure, null, 2)}\`` : "";
+    return `${headerLine}${structureLine}`;
+};
+/**
+ * Component to render the "thinking" section of the chat, which includes all messages from the agent that are
+ * of a type included in THINKING_MESSAGE_TYPES.
+ */
+export const Thinking = ({ id, turns }) => {
+    const thinkingText = useMemo(() => {
+        // Find start of latest interaction (most recent user prompt)
+        const lastUserTurnIndex = turns.map((t) => t.role).lastIndexOf(MessageRole.User);
+        // Only include thinking emitted after latest user prompt
+        // Deliberately allow -1 result to fall through and include all thinking messages if there are no user turns
+        return turns
+            .slice(lastUserTurnIndex + 1)
+            .filter((turn) => THINKING_MESSAGE_TYPES.has(turn.messageType))
+            .filter((turn) => turn.text?.trim().length > 0 || !isEmpty(turn.structure))
+            .map((turn) => formatTurn(turn))
+            .join("\n\n");
+    }, [turns]);
+    return (thinkingText.length > 0 && (_jsx(AccordionLite, { id: `${id}-thinking`, items: _jsx(Box, { sx: {
+                marginLeft: "0.5rem",
+                fontSize: "smaller",
+                fontStyle: "italic",
+            }, children: _jsx(ReactMarkdown, { children: thinkingText }) }), contentSx: {
+            color: "text.secondary",
+            minWidth: 0,
+            padding: 0,
+            textTransform: "none",
+        }, title: "Show Thinking" })));
+};

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

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

package/dist/components/AgentChat/Common/Types.d.ts

@@ -6,12 +6,13 @@ export declare enum LegacyAgentType {
     ChatBot = "ChatBot"
 }
 export declare const isLegacyAgentType: (agent: string) => boolean;
+export declare const givesFinalAnswer: (agent: CombinedAgentType) => boolean;
 export type CombinedAgentType = LegacyAgentType | string;
 /**
  * Models the error we receive from neuro-san agents.
  */
-export interface AgentErrorProps {
-    error: string;
-    traceback?: string;
-    tool?: string;
-}
+export type AgentErrorProps = {
+    readonly error: string;
+    readonly traceback?: string;
+    readonly tool?: string;
+};

package/dist/components/AgentChat/Common/Types.js

@@ -24,3 +24,8 @@ export var LegacyAgentType;
 export const isLegacyAgentType = (agent) => {
     return Object.keys(LegacyAgentType).includes(agent);
 };
+// Agents which are known to provide a predictable "Final Answer" response
+export const givesFinalAnswer = (agent) => {
+    return (!isLegacyAgentType(agent) ||
+        [LegacyAgentType.ChatBot, LegacyAgentType.DMSChat].includes(agent));
+};

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

@@ -2,7 +2,7 @@ import { ChatMessage, ChatMessageType } from "../../../generated/neuro-san/Neuro
 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 checkError: (chatMessageJson: Record<string, unknown>) => string | null;
 export declare const removeTrailingUuid: (agentName: string) => string;
 /**
  * Convert FOO_BAR to more human "Foo Bar".

package/dist/components/AgentChat/Common/Utils.js

@@ -13,6 +13,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 { isEmpty } from "lodash-es";
 import startCase from "lodash-es/startCase.js";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // We ignore any messages that are not of these types
@@ -43,16 +44,21 @@ export const chatMessageFromChunk = (chunk) => {
     }
     return chatResponse.response;
 };
+/**
+ * Type guard to check if a value has the shape of an AgentErrorProps, which indicates it's an error message from
+ * an agent. Note: not all Neuro-san agents follow this convention.
+ * @param value The value to check.
+ * @returns True if the value is an AgentErrorProps, false otherwise.
+ */
+const isAgentErrorLike = (value) => {
+    return typeof value?.error === "string";
+};
 export const checkError = (chatMessageJson) => {
-    if (chatMessageJson && "error" in chatMessageJson) {
-        const agentError = chatMessageJson;
-        return (`Error occurred. Error: "${agentError.error}", ` +
-            `traceback: "${agentError?.traceback}", ` +
-            `tool: "${agentError?.tool}"`);
-    }
-    else {
+    if (isEmpty(chatMessageJson) || !isAgentErrorLike(chatMessageJson)) {
         return null;
     }
+    const { error, traceback, tool } = chatMessageJson;
+    return `Error occurred. Error: "${error}", traceback: "${traceback}", tool: "${tool}"`;
 };
 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, "");

package/dist/components/ChatBot/ChatBot.d.ts

@@ -4,10 +4,6 @@ interface ChatBotProps {
      * id HTML id to use for the outer component
      */
     readonly id: string;
-    /**
-     * Path to image for user avatar
-     */
-    readonly userAvatar: string;
     /**
      * Text about current page to help the LLM respond intelligently
      */

package/dist/components/ChatBot/ChatBot.js

@@ -29,7 +29,7 @@ import { LegacyAgentType } from "../AgentChat/Common/Types.js";
  * Site-wide Chatbot component.
  */
 // Temporarily disabled but will be used once we migrated the backend to use Neuro-san RAG.
-export const ChatBot = ({ id, userAvatar, pageContext }) => {
+export const ChatBot = ({ id, pageContext }) => {
     const [chatOpen, setChatOpen] = useState(false);
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const { user: { name: currentUser }, } = useAuthentication().data;
@@ -51,7 +51,7 @@ export const ChatBot = ({ id, userAvatar, pageContext }) => {
                         borderWidth: 1,
                         borderColor: darkMode ? "var(--bs-white)" : "var(--bs-gray-light)",
                         zIndex: getZIndex(2, theme),
-                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: LegacyAgentType.ChatBot, userImage: userAvatar, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
+                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, selectedNetwork: LegacyAgentType.ChatBot, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
                     display: "flex",
                     alignItems: "center",
                     backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",

package/dist/components/Common/AccordionLite.d.ts

@@ -0,0 +1,14 @@
+import { SxProps } from "@mui/material/styles";
+import { FC, ReactNode } from "react";
+interface AccordionLiteProps {
+    readonly id: string;
+    readonly items: ReactNode;
+    readonly contentSx?: SxProps;
+    readonly title: ReactNode;
+}
+/**
+ * A lightweight accordion component that can be used to show/hide content.
+ * @see {MUIAccordion} for a more heavyweight accordion.
+ */
+export declare const AccordionLite: FC<AccordionLiteProps>;
+export {};

package/dist/components/Common/AccordionLite.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import { useState } from "react";
+/**
+ * A lightweight accordion component that can be used to show/hide content.
+ * @see {MUIAccordion} for a more heavyweight accordion.
+ */
+export const AccordionLite = ({ id, items, contentSx, title }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    return (_jsxs(Box, { id: id, children: [_jsx(Button, { onClick: () => setIsExpanded((prev) => !prev), startIcon: _jsx(ExpandMoreIcon, { sx: {
+                        fontSize: "1rem",
+                        transform: isExpanded ? "rotate(0deg)" : "rotate(270deg)",
+                        transition: "transform 150ms ease",
+                    } }), sx: {
+                    "&:hover": { backgroundColor: "transparent", textDecoration: "underline" },
+                    color: "text.secondary",
+                    fontSize: "smaller",
+                    minWidth: 0,
+                    padding: 0,
+                    textTransform: "none",
+                }, children: title }), _jsx(Collapse, { id: `${id}-items`, in: isExpanded, timeout: "auto", unmountOnExit: false, children: _jsx(Box, { sx: [...(Array.isArray(contentSx) ? contentSx : [contentSx])], children: items }) })] }));
+};

package/dist/components/Common/ConfirmationModal.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, keyof import("@mui/material/Button").ButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/Button").ButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "sx" | "children" | "className" | "tabIndex" | "type" | "classes" | "variant" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "size" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, keyof import("@mui/material/Button").ButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/Button").ButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "children" | "sx" | "className" | "tabIndex" | "color" | "href" | "type" | "classes" | "variant" | "action" | "size" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 interface ConfirmationModalProps {
     cancelBtnLabel?: string;
     closeable?: boolean;

package/dist/components/Common/CustomerLogo.js

@@ -43,7 +43,5 @@ export const CustomerLogo = ({ fallbackElement, logoServiceToken }) => {
     const logoUrl = logoServiceToken && customer?.trim().length > 0
         ? `https://img.logo.dev/name/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=dark&format=png&size=75`
         : null;
-    return logoUrl ? (
-    // eslint-disable-next-line @next/next/no-img-element
-    _jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
+    return logoUrl ? (_jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
 };

package/dist/components/Common/MUIAlert.d.ts

@@ -5,6 +5,7 @@ interface MUIAlertProps {
     children: ReactNode;
     closeable?: boolean;
     id: string;
+    onClose?: () => void;
     severity: AlertColor;
     sx?: SxProps;
 }