@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.30

package/dist/esm/Compare/index.js

@@ -0,0 +1,2 @@
+export { default } from './Compare';
+export * from './Compare';

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/ListMessage/OrderedListMessage.d.ts

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

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

@@ -3,6 +3,6 @@
 // ============================================================================
 import React from 'react';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-const OrderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    React.createElement(List, { component: ListComponent.ol, type: OrderType.number }, children)));
+const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
+    React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
 export default OrderedListMessage;

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

@@ -1,12 +1,13 @@
-import React from 'react';
-import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import React, { ReactNode } from 'react';
+import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-    content: string;
-    id: string;
-    onClick: () => void;
-}
+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 { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -25,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;
@@ -32,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 */
@@ -60,10 +71,38 @@ 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  */
     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?: 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;
 }
-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';
@@ -25,8 +25,31 @@ import SourcesCard from '../SourcesCard';
 import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
-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 } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps"]);
+import QuickStartTile from './QuickStarts/QuickStartTile';
+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';
+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 = [] } = _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"]);
+    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"]);
@@ -36,7 +59,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" },
@@ -46,23 +69,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: OrderedListMessage,
-                            li: ListItemMessage
-                        }, remarkPlugins: [remarkGfm] }, content)),
+                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
+                        beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+                        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

@@ -12,6 +12,9 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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';
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -55,6 +58,82 @@ spec:
   url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
 `;
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+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 checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -64,6 +143,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();
@@ -275,6 +357,12 @@ describe('Message', () => {
         expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
+    it('should render ordered lists correctly if there is interstitial content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        checkListItemsRendered();
+        const list = screen.getAllByRole('list')[1];
+        expect(list).toHaveAttribute('start', '3');
+    });
     it('should render inline code', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -284,12 +372,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
@@ -327,4 +419,174 @@ describe('Message', () => {
         expect(screen.getByRole('img')).toHaveClass('test');
         expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
     });
+    it('should handle QuickStart tile correctly', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => alert(id)
+            } }));
+        expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+    });
+    it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+    }));
+    it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitorSampleAppQuickStartWithImage,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        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();
+    });
 });

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;