@patternfly/chatbot 1.0.0

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.test.js

@@ -0,0 +1,131 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const CodeBlockMessage_1 = __importDefault(require("./CodeBlockMessage"));
+// Mock clipboard API
+Object.assign(navigator, {
+    clipboard: {
+        writeText: jest.fn()
+    }
+});
+describe('CodeBlockMessage', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render inline code for single-line content', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { className: "language-javascript", children: "const x = 5;" }));
+        const code = react_1.screen.getByText('const x = 5;');
+        expect(code.tagName).toBe('CODE');
+        expect(code).toHaveClass('pf-chatbot__message-inline-code');
+    });
+    it('should render code block for multi-line content', () => {
+        const multilineCode = 'const x = 5;\nconst y = 10;';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { className: "language-javascript", children: multilineCode }));
+        const codeElement = container.querySelector('code');
+        expect(codeElement === null || codeElement === void 0 ? void 0 : codeElement.textContent).toBe(multilineCode);
+    });
+    it('should display language label', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { className: "language-javascript", children: code }));
+        expect(react_1.screen.getByText('javascript')).toBeInTheDocument();
+    });
+    it('should render copy button', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { children: code }));
+        expect(react_1.screen.getByRole('button', { name: 'Copy code' })).toBeInTheDocument();
+    });
+    it('should copy plain string content to clipboard', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { children: code }));
+        const copyButton = react_1.screen.getByRole('button', { name: 'Copy code' });
+        yield user_event_1.default.click(copyButton);
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+    }));
+    it('should extract text content from React elements when copying', () => __awaiter(void 0, void 0, void 0, function* () {
+        // Simulate what happens with syntax highlighting - children become React elements
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(CodeBlockMessage_1.default, { className: "language-javascript", children: [(0, jsx_runtime_1.jsx)("span", { className: "hljs-keyword", children: "const" }), " x = 5;", '\n', (0, jsx_runtime_1.jsx)("span", { className: "hljs-keyword", children: "const" }), " y = 10;"] }));
+        const copyButton = react_1.screen.getByRole('button', { name: 'Copy code' });
+        yield user_event_1.default.click(copyButton);
+        // Should extract actual text content from DOM, not "[object Object]"
+        const codeElement = container.querySelector('code');
+        const expectedText = (codeElement === null || codeElement === void 0 ? void 0 : codeElement.textContent) || '';
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expectedText);
+        expect(expectedText).not.toContain('[object Object]');
+    }));
+    it('should show check icon after copying', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { children: code }));
+        const copyButton = react_1.screen.getByRole('button', { name: 'Copy code' });
+        yield user_event_1.default.click(copyButton);
+        // Check icon should be visible (we can verify by checking if CopyIcon is not present)
+        const svgElement = copyButton.querySelector('svg');
+        expect(svgElement).toBeInTheDocument();
+    }));
+    it('should render expandable section when isExpandable is true', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isExpandable: true, children: code }));
+        expect(react_1.screen.getByRole('button', { name: 'Show more' })).toBeInTheDocument();
+    });
+    it('should toggle expandable section', () => __awaiter(void 0, void 0, void 0, function* () {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isExpandable: true, children: code }));
+        const toggleButton = react_1.screen.getByRole('button', { name: 'Show more' });
+        yield user_event_1.default.click(toggleButton);
+        expect(react_1.screen.getByRole('button', { name: 'Show less' })).toBeInTheDocument();
+    }));
+    it('should use custom expanded/collapsed text', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isExpandable: true, expandedText: "Hide", collapsedText: "Reveal", children: code }));
+        expect(react_1.screen.getByRole('button', { name: 'Reveal' })).toBeInTheDocument();
+    });
+    it('should pass through expandableSectionProps', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isExpandable: true, expandableSectionProps: { className: 'custom-expandable-class' }, children: code }));
+        const expandableSection = container.querySelector('.pf-v6-c-expandable-section.custom-expandable-class');
+        expect(expandableSection).toBeInTheDocument();
+    });
+    it('should render custom actions', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const customAction = (0, jsx_runtime_1.jsx)("button", { "aria-label": "Custom action", children: "Custom" });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { customActions: customAction, children: code }));
+        expect(react_1.screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument();
+    });
+    it('should apply isPrimary class to inline code', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isPrimary: true, children: "const x = 5;" }));
+        const code = react_1.screen.getByText('const x = 5;');
+        expect(code).toHaveClass('pf-m-primary');
+    });
+    it('should apply shouldRetainStyles class to code block', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { shouldRetainStyles: true, children: code }));
+        const codeBlockDiv = container.querySelector('.pf-chatbot__message-code-block');
+        expect(codeBlockDiv).toHaveClass('pf-m-markdown');
+    });
+    it('should use custom aria-label for copy button', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { "aria-label": "Copy this code", children: code }));
+        expect(react_1.screen.getByRole('button', { name: 'Copy this code' })).toBeInTheDocument();
+    });
+    it('should prioritize data-expanded-text over expandedText prop', () => {
+        const code = 'const x = 5;\nconst y = 10;';
+        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, { isExpandable: true, expandedText: "Custom Expanded", "data-expanded-text": "Data Expanded", children: code }));
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Message:', expect.stringContaining('data-expanded-text or data-collapsed-text will override'));
+        consoleErrorSpy.mockRestore();
+    });
+});

package/dist/cjs/Message/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,17 @@
+import { AlertProps } from '@patternfly/react-core';
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+    /** Content to display in the error alert body */
+    children?: React.ReactNode;
+    /** Additional classes for the error alert */
+    className?: string;
+    /** Title of the error alert */
+    title?: React.ReactNode;
+    /** Action links to display in the alert footer */
+    actionLinks?: React.ReactNode;
+}
+export declare const ErrorMessage: ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorMessage;

package/dist/cjs/Message/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
+const react_core_1 = require("@patternfly/react-core");
+const ErrorMessage = (_a) => {
+    var { title, actionLinks, children, className } = _a, props = __rest(_a, ["title", "actionLinks", "children", "className"]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks, className: className }, props, { children: children })));
+};
+exports.ErrorMessage = ErrorMessage;
+exports.default = exports.ErrorMessage;

package/dist/cjs/Message/ErrorMessage/ErrorMessage.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/Message/ErrorMessage/ErrorMessage.test.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+test('Renders with title', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { title: "Error occurred" }));
+    expect(react_1.screen.getByText('Error occurred')).toBeVisible();
+});
+test('Renders with children', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { title: "Error occurred", children: "This is the error message body" }));
+    expect(react_1.screen.getByText('This is the error message body')).toBeVisible();
+});
+test('Renders with action links', () => {
+    const actionLinks = ((0, jsx_runtime_1.jsx)("a", { href: "#retry", "data-testid": "retry-link", children: "Retry action link" }));
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { title: "Error occurred", actionLinks: actionLinks }));
+    expect(react_1.screen.getByText('Retry action link')).toBeVisible();
+});
+test('Renders with custom className', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { title: "Error occurred", className: "custom-error-class" }));
+    expect(react_1.screen.getByText('Error occurred').parentElement).toHaveClass('custom-error-class');
+});
+test('Renders with spread props', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { title: "Error occurred", id: "test-error-id" }));
+    expect(react_1.screen.getByText('Error occurred').parentElement).toHaveAttribute('id', 'test-error-id');
+});

package/dist/cjs/Message/ImageMessage/ImageMessage.d.ts

@@ -0,0 +1,3 @@
+import { ExtraProps } from 'react-markdown';
+declare const ImageMessage: ({ children, ...props }: Omit<JSX.IntrinsicElements["img"], "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageMessage;

package/dist/cjs/Message/ImageMessage/ImageMessage.js

@@ -0,0 +1,19 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ImageMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ className: "pf-chatbot__message-image" }, props, { children: children })));
+};
+exports.default = ImageMessage;

package/dist/cjs/Message/LinkMessage/LinkMessage.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@patternfly/react-core';
+import { ExtraProps } from 'react-markdown';
+export interface LinkMessageProps {
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const LinkMessage: ({ children, target, href, id, shouldRetainStyles, ...props }: LinkMessageProps & ButtonProps & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkMessage;

package/dist/cjs/Message/LinkMessage/LinkMessage.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const react_styles_1 = require("@patternfly/react-styles");
+const LinkMessage = (_a) => {
+    var { children, target, href, id, shouldRetainStyles } = _a, props = __rest(_a, ["children", "target", "href", "id", "shouldRetainStyles"]);
+    if (target === '_blank') {
+        return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: "link", href: href, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target, 
+            // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+            id: id }, props, { className: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
+    }
+    return (
+    // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+    (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { className: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
+};
+exports.default = LinkMessage;

package/dist/cjs/Message/ListMessage/ListItemMessage.d.ts

@@ -0,0 +1,3 @@
+import { ExtraProps } from 'react-markdown';
+declare const ListItemMessage: ({ children, ...props }: JSX.IntrinsicElements["li"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default ListItemMessage;

package/dist/cjs/Message/ListMessage/ListItemMessage.js

@@ -0,0 +1,21 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const ListItemMessage = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.ListItem, Object.assign({}, props, { tabIndex: ((_b = props === null || props === void 0 ? void 0 : props.id) === null || _b === void 0 ? void 0 : _b.includes('fn-')) ? -1 : props === null || props === void 0 ? void 0 : props.tabIndex, children: children })));
+};
+exports.default = ListItemMessage;

package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts

@@ -0,0 +1,11 @@
+import { ExtraProps } from 'react-markdown';
+export interface OrderedListMessageProps {
+    /** The ordered list content */
+    children?: React.ReactNode;
+    /** The number to start the ordered list at. */
+    start?: number;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const OrderedListMessage: ({ children, start, shouldRetainStyles }: OrderedListMessageProps & JSX.IntrinsicElements["ol"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default OrderedListMessage;

package/dist/cjs/Message/ListMessage/OrderedListMessage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
+const OrderedListMessage = ({ children, start, shouldRetainStyles }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown'), children: (0, jsx_runtime_1.jsx)(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start, children: children }) }));
+exports.default = OrderedListMessage;

package/dist/cjs/Message/ListMessage/UnorderedListMessage.d.ts

@@ -0,0 +1,9 @@
+import { ExtraProps } from 'react-markdown';
+export interface UnrderedListMessageProps {
+    /** The ordered list content */
+    children?: React.ReactNode;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const UnorderedListMessage: ({ children, shouldRetainStyles }: UnrderedListMessageProps & JSX.IntrinsicElements["ul"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default UnorderedListMessage;

package/dist/cjs/Message/ListMessage/UnorderedListMessage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
+const UnorderedListMessage = ({ children, shouldRetainStyles }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown'), children: (0, jsx_runtime_1.jsx)(react_core_1.List, { children: children }) }));
+exports.default = UnorderedListMessage;

package/dist/cjs/Message/Message.d.ts

@@ -0,0 +1,182 @@
+import { ReactNode } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
+import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
+import { ActionProps } from '../ResponseActions/ResponseActions';
+import { SourcesCardProps } from '../SourcesCard';
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
+import { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import { TableProps } from '@patternfly/react-table';
+import 'highlight.js/styles/vs2015.css';
+import { PluggableList } from 'unified';
+import { ToolResponseProps } from '../ToolResponse';
+import { DeepThinkingProps } from '../DeepThinking';
+import { ToolCallProps } from '../ToolCall';
+export interface MessageAttachment {
+    /** Name of file attached to the message */
+    name: string;
+    /** Unique identifier of file attached to the message */
+    id?: string | number;
+    /** Callback for when attachment label is clicked */
+    onClick?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+    /** Callback for when attachment label is closed */
+    onClose?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+    /** Whether file is loading */
+    isLoading?: boolean;
+    /** Aria label for attachment close button */
+    closeButtonAriaLabel?: string;
+    /** Custom test id for the language in the attachment component */
+    languageTestId?: string;
+    /** Custom test id for the loading spinner in the attachment component */
+    spinnerTestId?: string;
+}
+export interface MessageExtraContent {
+    /** Content to display before the main content */
+    beforeMainContent?: ReactNode;
+    /** Content to display after the main content */
+    afterMainContent?: ReactNode;
+    /** Content to display at the end */
+    endContent?: ReactNode;
+}
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
+    /** Children to render instead of the default message structure, allowing more fine-tuned message control. When provided, this will override the default rendering of content, toolResponse, deepThinking, toolCall, sources, quickStarts, actions, etc. */
+    children?: ReactNode;
+    /** Unique id for message */
+    id?: string;
+    /** Role of the user sending the message */
+    role: 'user' | 'bot';
+    /** Whether the message is aligned at the horizontal start or end of the message container. */
+    alignment?: 'start' | 'end';
+    /** Flag indicating whether message metadata (user name and timestamp) are visible. */
+    isMetadataVisible?: boolean;
+    /** Message content */
+    content?: string;
+    /** Extra Message content */
+    extraContent?: MessageExtraContent;
+    /** Name of the user */
+    name?: string;
+    /** Avatar for the user. Pass a string for an image src, or a ReactNode for custom content like an svg or icon. Avatars for Messages with role="bot" are pre-defined and not customizable. */
+    avatar?: string | ReactNode;
+    /** Flag indicating whether the avatar is hidden */
+    isAvatarHidden?: boolean;
+    /** Timestamp for the message */
+    timestamp?: string;
+    /** Set this to true if message is being loaded */
+    isLoading?: boolean;
+    /** Array of attachments attached to a message */
+    attachments?: MessageAttachment[];
+    /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen.
+     * Can be a single actions object or an array of action group objects. When passing an array, you can pass an object of actions or
+     * an object that contains an actions property for finer control of selection persistence.
+     */
+    actions?: {
+        [key: string]: ActionProps;
+    } | {
+        [key: string]: ActionProps;
+    }[] | {
+        actions: {
+            [key: string]: ActionProps;
+        };
+        persistActionSelection?: boolean;
+    }[];
+    /** When true, the selected action will persist even when clicking outside the component.
+     * When false (default), clicking outside or clicking another action will deselect the current selection.
+     * For finer control of multiple action groups, use persistActionSelection on each group.
+     */
+    persistActionSelection?: boolean;
+    /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+     * that setting this to true will append tooltips inline instead of the document.body.
+     */
+    showActionsOnInteraction?: boolean;
+    /** Sources for message */
+    sources?: SourcesCardProps;
+    /** Label for the English word "AI," used to tag messages with role "bot" */
+    botWord?: string;
+    /** Label for the English "Loading message," displayed to screenreaders when loading a message */
+    loadingWord?: string;
+    /** Props for code blocks */
+    codeBlockProps?: CodeBlockMessageProps;
+    /** Props for quick responses */
+    quickResponses?: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Props for user feedback card */
+    userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+    /** Props for user feedback response */
+    userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
+    /** Whether avatar is round */
+    hasRoundAvatar?: boolean;
+    /** Any additional props applied to the avatar, for additional customization  */
+    avatarProps?: Omit<AvatarProps, 'alt'>;
+    /** Props for QuickStart card */
+    quickStarts?: {
+        quickStart: QuickStart;
+        onSelectQuickStart: (id?: string) => void;
+        minuteWord?: string;
+        minuteWordPlural?: string;
+        prerequisiteWord?: string;
+        prerequisiteWordPlural?: string;
+        quickStartButtonAriaLabel?: string;
+        className?: string;
+        onClick?: () => void;
+        action?: QuickstartAction;
+    };
+    /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+    isLiveRegion?: boolean;
+    /** Ref applied to message  */
+    innerRef?: Ref<HTMLDivElement>;
+    /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+    tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Optional inline error message that can be displayed in the message */
+    error?: AlertProps;
+    /** Props for links */
+    linkProps?: ButtonProps;
+    /** Whether message is in edit mode */
+    isEditable?: boolean;
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
+    /** Props for edit form */
+    editFormProps?: FormProps;
+    /** Sets message to compact styling. */
+    isCompact?: boolean;
+    /** Disables markdown parsing for message, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
+    /** Props for tool response card */
+    toolResponse?: ToolResponseProps;
+    /** Props for deep thinking card */
+    deepThinking?: DeepThinkingProps;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: Options;
+    /** Props for a tool call message */
+    toolCall?: ToolCallProps;
+    /** Whether user messages default to stripping out images in markdown */
+    hasNoImagesInUserMessages?: boolean;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
+    /** When true, automatically swaps to filled icon variants when predefined actions are clicked. */
+    useFilledIconsOnClick?: boolean;
+}
+export declare const MessageBase: FunctionComponent<MessageProps>;
+declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Message;