@cognizant-ai-lab/ui-common 1.5.0 → 1.6.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/ControlButtons.js

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

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { ConversationTurn } from "./ConversationTurn.js";
+interface ConversationProps {
+    readonly id: string;
+    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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { styled, useTheme } from "@mui/material/styles";
+import { useMemo } from "react";
+import { MessageRole } from "./ConversationTurn.js";
+import { FormattedMarkdown } from "./FormattedMarkdown.js";
+import { HLJS_THEMES } from "./SyntaxHighlighterThemes.js";
+import { MUIAlert } from "../../Common/MUIAlert.js";
+const { atelierDuneDark, a11yLight } = HLJS_THEMES;
+/**
+ * Styled component for a user turn bubble.
+ */
+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;
+    }
+    if (turn.structure != null) {
+        return `\`\`\`json\n${JSON.stringify(turn.structure, null, 2)}\n\`\`\``;
+    }
+    else {
+        return "";
+    }
+};
+/**
+ * Component to render a conversation between the user and the agent.
+ */
+export const Conversation = ({ id, includeAgentMessages = false, shouldWrapOutput, turns }) => {
+    // MUI theme
+    const theme = useTheme();
+    const darkMode = theme.palette.mode === "dark";
+    /**
+     * Render the list of conversation turns.
+     */
+    const nodesList = useMemo(() => turns.flatMap((turn) => {
+        switch (turn.role) {
+            case MessageRole.User:
+                return [
+                    _jsx(UserTurnBubble, { id: turn.id, children: turn.text }, turn.id),
+                ];
+            case MessageRole.Agent:
+                return includeAgentMessages ? [formatTurnContent(turn)] : [];
+            case MessageRole.FinalAnswer:
+                return [formatTurnContent(turn)];
+            case MessageRole.Warning:
+                return [
+                    _jsx(MUIAlert, { id: `warning-${turn.id}-alert`, severity: "warning", children: turn.text }, turn.id),
+                ];
+            case MessageRole.Error:
+                return [
+                    _jsx(MUIAlert, { id: `error-${turn.id}-alert`, severity: "error", children: turn.text }, turn.id),
+                ];
+            /* istanbul ignore next -- impossible to trigger this without subverting tsc */
+            default: {
+                // Exhaustiveness check. This way tsc will complain if a new MessageRole is added but
+                // not handled here.
+                const _exhaustive = turn.role;
+                throw new Error(`Unhandled message role: ${_exhaustive}`);
+            }
+        }
+    }), [includeAgentMessages, turns]);
+    return (_jsx(FormattedMarkdown, { id: `${id}-conversation`, nodesList: nodesList, style: darkMode ? atelierDuneDark : a11yLight, wrapLongLines: shouldWrapOutput }));
+};

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

@@ -0,0 +1,23 @@
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+/**
+ * The various messages roles in a conversation turn.
+ */
+export declare enum MessageRole {
+    "Agent" = "Agent",
+    "Error" = "Error",
+    "FinalAnswer" = "FinalAnswer",
+    "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 agentDisplayName?: string;
+    readonly agentName?: string;
+    readonly id: string;
+    readonly messageType?: ChatMessageType;
+    readonly role: MessageRole;
+    readonly structure?: Record<string, unknown>;
+    readonly text?: string;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * The various messages roles in a conversation turn.
+ */
+export var MessageRole;
+(function (MessageRole) {
+    MessageRole["Agent"] = "Agent";
+    MessageRole["Error"] = "Error";
+    MessageRole["FinalAnswer"] = "FinalAnswer";
+    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, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "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, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "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,7 +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 capitalize from "lodash-es/capitalize.js";
+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
@@ -44,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, "");
@@ -64,5 +69,5 @@ export const removeTrailingUuid = (agentName) => {
  * @returns User-friendly agent name.
  */
 export const cleanUpAgentName = (agentName) => {
-    return startCase(capitalize(agentName));
+    return startCase(agentName);
 };

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,4 +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" | "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/ConfirmationModal.js

@@ -20,7 +20,7 @@ import { styled } from "@mui/material/styles";
 import { useState } from "react";
 import { MUIDialog } from "./MUIDialog.js";
 // #region: Styled Components
-const StyledButton = styled(Button)({
+export const StyledButton = styled(Button)({
     fontSize: "0.8em",
     padding: "0px 7px",
 });

package/dist/components/Common/CustomerLogo.js

@@ -22,7 +22,7 @@ export const CustomerLogo = ({ fallbackElement, logoServiceToken }) => {
     const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
     // null: render Cognizant logo (default)
     if (logoSource === null) {
-        return getCognizantLogoImage();
+        return customer?.trim().length ? null : getCognizantLogoImage();
     }
     // "none": explicitly render no logo
     if (logoSource === "none") {

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;
 }

package/dist/components/Common/MUIAlert.js

@@ -30,14 +30,13 @@ const StyledAlert = styled(Alert)({
     },
 });
 // #endregion: Types
-export const MUIAlert = ({ children, closeable = false, id, severity, sx }) => {
+export const MUIAlert = ({ children, closeable = false, id, onClose, severity, sx }) => {
     const [alertOpen, setAlertOpen] = useState(true);
     const handleClose = () => {
         setAlertOpen(false);
+        onClose?.();
     };
-    return (_jsx(Collapse, { id: `${id}-collapse`, in: alertOpen, children: _jsx(StyledAlert, { action: closeable && (_jsx(IconButton, { "aria-label": "close", color: "inherit", id: `${id}-icon-button`, onClick: () => {
-                    setAlertOpen(false);
-                }, size: "small", sx: {
+    return (_jsx(Collapse, { id: `${id}-collapse`, in: alertOpen, children: _jsx(StyledAlert, { action: closeable && (_jsx(IconButton, { "aria-label": "close", color: "inherit", id: `${id}-icon-button`, onClick: handleClose, size: "small", sx: {
                     bottom: "2px",
                     position: "relative",
                 }, children: _jsx(CloseIcon, { fontSize: "inherit", id: `${id}-close-icon` }) })), id: id, onClose: closeable ? handleClose : undefined, severity: severity, sx: sx, children: children }) }));

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

@@ -13,5 +13,6 @@ export interface NavbarProps {
     readonly supportEmailAddress: string;
     readonly logoServiceToken?: string;
     readonly showSettingsButton?: boolean;
+    readonly onStartTour?: () => void;
 }
-export declare const Navbar: ({ authenticationType, id, logo, logoServiceToken, pathname, query, showSettingsButton, signOut, supportEmailAddress, userInfo, }: NavbarProps) => ReactJSX.Element;
+export declare const Navbar: ({ authenticationType, id, logo, logoServiceToken, onStartTour, pathname, query, showSettingsButton, signOut, supportEmailAddress, userInfo, }: NavbarProps) => ReactJSX.Element;