@patternfly/chatbot 2.2.0-prerelease.9 → 2.2.1

package/dist/esm/Message/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
+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;
+};
+import React from 'react';
+import { Alert } from '@patternfly/react-core';
+const ErrorMessage = (_a) => {
+    var { title, actionLinks, children } = _a, props = __rest(_a, ["title", "actionLinks", "children"]);
+    return (React.createElement(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props), children));
+};
+export default ErrorMessage;

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

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

package/dist/esm/Message/ImageMessage/ImageMessage.js

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Image
+// ============================================================================
+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;
+};
+import React from 'react';
+const ImageMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
+};
+export default ImageMessage;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from '@patternfly/react-core';
+declare const LinkMessage: ({ children, target, href, ...props }: ButtonProps) => React.JSX.Element;
+export default LinkMessage;

package/dist/esm/Message/LinkMessage/LinkMessage.js

@@ -0,0 +1,25 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
+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;
+};
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+const LinkMessage = (_a) => {
+    var { children, target, href } = _a, props = __rest(_a, ["children", "target", "href"]);
+    if (target === '_blank') {
+        return (React.createElement(Button, Object.assign({ component: "a", variant: "link", href: href, icon: React.createElement(ExternalLinkSquareAltIcon, null), iconPosition: "end", isInline: true, target: target }, props), children));
+    }
+    return (React.createElement(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props), children));
+};
+export default LinkMessage;

package/dist/esm/Message/Message.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import React, { ReactNode } from 'react';
+import { AlertProps, AvatarProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-    content: string;
-    id: string;
-    onClick: () => void;
-}
+import QuickResponse from './QuickResponse/QuickResponse';
+import { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -26,6 +26,14 @@ export interface MessageAttachment {
     /** 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<React.HTMLProps<HTMLDivElement>, 'role'> {
     /** Unique id for message */
     id?: string;
@@ -33,6 +41,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     role: 'user' | 'bot';
     /** Message content */
     content?: string;
+    /** Extra Message content */
+    extraContent?: MessageExtraContent;
     /** Name of the user */
     name?: string;
     /** Avatar src for the user */
@@ -61,6 +71,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     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  */
@@ -78,6 +92,19 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
         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?: React.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;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Optional inline error message that can be displayed in the message */
+    error?: AlertProps;
 }
-export declare const Message: React.FunctionComponent<MessageProps>;
+export declare const MessageBase: React.FunctionComponent<MessageProps>;
+declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/esm/Message/Message.js

@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, Label, LabelGroup, Timestamp, Truncate } from '@patternfly/react-core';
+import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -26,8 +26,31 @@ import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
 import QuickStartTile from './QuickStarts/QuickStartTile';
-export const Message = (_a) => {
-    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts"]);
+import QuickResponse from './QuickResponse/QuickResponse';
+import UserFeedback from './UserFeedback/UserFeedback';
+import UserFeedbackComplete from './UserFeedback/UserFeedbackComplete';
+import TableMessage from './TableMessage/TableMessage';
+import TrMessage from './TableMessage/TrMessage';
+import TdMessage from './TableMessage/TdMessage';
+import TbodyMessage from './TableMessage/TbodyMessage';
+import TheadMessage from './TableMessage/TheadMessage';
+import ThMessage from './TableMessage/ThMessage';
+import ImageMessage from './ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import LinkMessage from './LinkMessage/LinkMessage';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
+export const MessageBase = (_a) => {
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], error } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "error"]);
+    const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+    let rehypePlugins = [rehypeUnwrapImages];
+    if (openLinkInNewTab) {
+        rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+    }
+    if (additionalRehypePlugins) {
+        rehypePlugins.push(...additionalRehypePlugins);
+    }
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -37,7 +60,7 @@ export const Message = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-    return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
+    return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
             React.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -47,24 +70,51 @@ export const Message = (_a) => {
                 React.createElement(Timestamp, { date: date }, timestamp)),
             React.createElement("div", { className: "pf-chatbot__message-response" },
                 React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
-                            p: TextMessage,
-                            code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
-                            ul: UnorderedListMessage,
-                            ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
-                            li: ListItemMessage
-                        }, remarkPlugins: [remarkGfm] }, content)),
+                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
+                        beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+                        error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
+                                p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                                code: (_a) => {
+                                    var { children } = _a, props = __rest(_a, ["children"]);
+                                    return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
+                                },
+                                h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                                h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                                h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                                h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                                h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                                h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                                blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                                ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
+                                ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
+                                li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
+                                table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
+                                tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
+                                thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
+                                tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
+                                td: (props) => {
+                                    // Conflicts with Td type
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    const { width } = props, rest = __rest(props, ["width"]);
+                                    return React.createElement(TdMessage, Object.assign({}, rest));
+                                },
+                                th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
+                                img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
+                                a: (props) => (React.createElement(LinkMessage, { href: props.href, rel: props.rel, target: props.target }, props.children))
+                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content)),
+                        afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
                     !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
-                    !isLoading && quickResponses && (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
-                        var { id, onClick, content } = _a, props = __rest(_a, ["id", "onClick", "content"]);
-                        return (React.createElement(Label, Object.assign({ variant: "outline", color: "blue", key: id, onClick: onClick }, props), content));
-                    })))),
+                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
+                    userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
+                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
                 attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
                     return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
                         React.createElement(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
-                })))))));
+                }))),
+                !isLoading && endContent && React.createElement(React.Fragment, null, endContent)))));
 };
+const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
 export default Message;

package/dist/esm/Message/Message.test.js

@@ -14,6 +14,8 @@ import Message from './Message';
 import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { AlertActionLink } from '@patternfly/react-core';
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -72,6 +74,74 @@ const ORDERED_LIST_WITH_CODE = `
 
 3. Item 3
 `;
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+const TABLE = `
+
+ | Column 1 | Column 2 |
+ |-|-|
+ | Cell 1 | Cell 2 |
+ | Cell 3 | Cell 4 |
+
+ `;
+const ONE_COLUMN_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+ | Cell 2 |
+
+ `;
+const ONE_CELL_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+
+ `;
+const HEADERLESS_TABLE = `
+
+ | |
+ |-|
+ | Cell 1 | 
+
+ `;
+const CHILDLESS_TABLE = `
+
+ | Column 1 |
+ |-|
+ | | 
+
+ `;
+const EMPTY_TABLE = `
+
+ | |
+ |-|
+ | | 
+
+ `;
+const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const ERROR = {
+    title: 'Could not load chat',
+    children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+    actionLinks: (React.createElement(React.Fragment, null,
+        React.createElement(AlertActionLink, { component: "a", href: "#" }, "Start a new chat"),
+        React.createElement(AlertActionLink, { component: "a", href: "#" }, "Contact support")))
+};
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -81,6 +151,9 @@ const checkListItemsRendered = () => {
     });
 };
 describe('Message', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
     it('should render user messages correctly', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
         expect(screen.getByText('User')).toBeTruthy();
@@ -307,12 +380,16 @@ describe('Message', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
         expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(screen.getByText(/yaml/)).toBeTruthy();
+        expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
         expect(screen.getByText(/metadata:/i)).toBeTruthy();
-        expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(screen.getByText(/name:/i)).toBeTruthy();
+        expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
         expect(screen.getByText(/spec/i)).toBeTruthy();
         expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
-        expect(screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+        expect(screen.getByText(/url:/i)).toBeTruthy();
+        expect(screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
     });
     it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
         // need explicit setup since RTL stubs clipboard if you do this
@@ -378,4 +455,163 @@ describe('Message', () => {
             } }));
         expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
+    it('should handle block quote correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+        expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+        expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+    });
+    it('should handle heading correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+    });
+    it('should render table correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+        expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+        expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+        expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+        expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+        expect(screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+    });
+    it('should render table data labels correctly for mobile breakpoint', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+        expect(screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
+    });
+    it('should render table data labels correctly for mobile breakpoint for one column table', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
+        expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
+        expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
+        expect(screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+        expect(screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+    });
+    it('should render table data labels correctly for mobile breakpoint for childless', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
+        expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for empty', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
+        expect(screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+    });
+    it('should render custom table aria label correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
+        expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
+    });
+    it('should render beforeMainContent with main content', () => {
+        const mainContent = 'Main message content';
+        const beforeMainContentText = 'Before main content';
+        const beforeMainContent = React.createElement("div", null, beforeMainContentText);
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
+        expect(screen.getByText(beforeMainContentText)).toBeTruthy();
+        expect(screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render afterMainContent with main content', () => {
+        const mainContent = 'Main message content';
+        const afterMainContentText = 'After main content';
+        const afterMainContent = React.createElement("div", null, afterMainContentText);
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
+        expect(screen.getByText(afterMainContentText)).toBeTruthy();
+        expect(screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render endContent with main content', () => {
+        const mainContent = 'Main message content';
+        const endMainContentText = 'End content';
+        const endContent = React.createElement("div", null, endMainContentText);
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
+        expect(screen.getByText(endMainContentText)).toBeTruthy();
+        expect(screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render all parts of extraContent with main content', () => {
+        const beforeMainContent = React.createElement("div", null, "Before main content");
+        const afterMainContent = React.createElement("div", null, "After main content");
+        const endContent = React.createElement("div", null, "End content");
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        expect(screen.getByText('Before main content')).toBeTruthy();
+        expect(screen.getByText('Main message content')).toBeTruthy();
+        expect(screen.getByText('After main content')).toBeTruthy();
+        expect(screen.getByText('End content')).toBeTruthy();
+    });
+    it('should not render extraContent when not provided', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
+        // Ensure no extraContent is rendered
+        expect(screen.getByText('Main message content')).toBeTruthy();
+        expect(screen.queryByText('Before main content')).toBeFalsy();
+        expect(screen.queryByText('After main content')).toBeFalsy();
+        expect(screen.queryByText('end message content')).toBeFalsy();
+    });
+    it('should handle undefined or null values in extraContent gracefully', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent: null, afterMainContent: undefined, endContent: null } }));
+        // Ensure that no extraContent is rendered if they are null or undefined
+        expect(screen.getByText('Main message content')).toBeTruthy();
+        expect(screen.queryByText('Before main content')).toBeFalsy();
+        expect(screen.queryByText('After main content')).toBeFalsy();
+        expect(screen.queryByText('end message content')).toBeFalsy();
+    });
+    it('should render JSX in extraContent correctly', () => {
+        const beforeMainContent = (React.createElement("div", { "data-testid": "before-main-content" },
+            React.createElement("strong", null, "Bold before content")));
+        const afterMainContent = (React.createElement("div", { "data-testid": "after-main-content" },
+            React.createElement("strong", null, "Bold after content")));
+        const endContent = (React.createElement("div", { "data-testid": "end-main-content" },
+            React.createElement("strong", null, "Bold end content")));
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        // Check that the JSX is correctly rendered
+        expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+        expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+        expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+    });
+    it('should handle image correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
+        expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    });
+    it('should handle external links correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)` }));
+        // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+        expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+    });
+    it('should handle external links correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, openLinkInNewTab: false }));
+        // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
+        expect(rehypeExternalLinks).not.toHaveBeenCalled();
+    });
+    it('should handle error correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", error: ERROR }));
+        expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+        expect(screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
+        expect(screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
+        expect(screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
+    });
+    it('should handle error correctly when loading', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", error: ERROR, isLoading: true }));
+        expect(screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
+        expect(screen.getByText('Loading message')).toBeTruthy();
+    });
+    it('should handle error correctly when these is content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", error: ERROR, content: "Test" }));
+        expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+        expect(screen.queryByText('Test')).toBeFalsy();
+    });
 });

package/dist/esm/Message/QuickResponse/QuickResponse.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+    content: string;
+    id: string;
+    onClick?: () => void;
+}
+export interface QuickResponseProps {
+    /** Props for quick responses */
+    quickResponses: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Callback when a response is clicked; used in feedback cards */
+    onSelect?: (id: string) => void;
+}
+export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
+export default QuickResponse;

package/dist/esm/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,27 @@
+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;
+};
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+        onSelect && onSelect(id);
+    };
+    return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+        var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+        return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+    })));
+};
+export default QuickResponse;

package/dist/esm/Message/TableMessage/TableMessage.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TableProps } from '@patternfly/react-table';
+interface Properties {
+    line: number;
+    column: number;
+    offset: number;
+}
+export interface TableNode {
+    children?: TableNode[];
+    value?: string;
+    position: {
+        start: Properties;
+        end: Properties;
+    };
+    tagName: string;
+    type: string;
+}
+declare const TableMessage: ({ children, ...props }: TableProps & ExtraProps) => React.JSX.Element;
+export default TableMessage;