@patternfly/chatbot 2.2.0-prerelease.9 → 2.2.0

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

@@ -19,6 +19,8 @@ const Message_1 = __importDefault(require("./Message"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const monitor_sampleapp_quickstart_1 = require("./QuickStarts/monitor-sampleapp-quickstart");
 const monitor_sampleapp_quickstart_with_image_1 = require("./QuickStarts/monitor-sampleapp-quickstart-with-image");
+const rehype_external_links_1 = __importDefault(require("../__mocks__/rehype-external-links"));
+const react_core_1 = require("@patternfly/react-core");
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -77,6 +79,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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.AlertActionLink, { component: "a", href: "#" }, "Start a new chat"),
+        react_1.default.createElement(react_core_1.AlertActionLink, { component: "a", href: "#" }, "Contact support")))
+};
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -86,6 +156,9 @@ const checkListItemsRendered = () => {
     });
 };
 describe('Message', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
     it('should render user messages correctly', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi" }));
         expect(react_2.screen.getByText('User')).toBeTruthy();
@@ -312,12 +385,16 @@ describe('Message', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
         expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        expect(react_2.screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
         expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
         expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
         expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
+        expect(react_2.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
@@ -383,4 +460,163 @@ describe('Message', () => {
             } }));
         expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
+    it('should handle block quote correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+        expect(react_2.screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+        expect(react_2.screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+    });
+    it('should handle heading correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        expect(react_2.screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+    });
+    it('should render table correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+    });
+    it('should render table data labels correctly for mobile breakpoint', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.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', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.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', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+    });
+    it('should render table data labels correctly for mobile breakpoint for childless', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
+        expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for empty', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
+        expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+    });
+    it('should render custom table aria label correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
+        expect(react_2.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_1.default.createElement("div", null, beforeMainContentText);
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
+        expect(react_2.screen.getByText(beforeMainContentText)).toBeTruthy();
+        expect(react_2.screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render afterMainContent with main content', () => {
+        const mainContent = 'Main message content';
+        const afterMainContentText = 'After main content';
+        const afterMainContent = react_1.default.createElement("div", null, afterMainContentText);
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
+        expect(react_2.screen.getByText(afterMainContentText)).toBeTruthy();
+        expect(react_2.screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render endContent with main content', () => {
+        const mainContent = 'Main message content';
+        const endMainContentText = 'End content';
+        const endContent = react_1.default.createElement("div", null, endMainContentText);
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
+        expect(react_2.screen.getByText(endMainContentText)).toBeTruthy();
+        expect(react_2.screen.getByText(mainContent)).toBeTruthy();
+    });
+    it('should render all parts of extraContent with main content', () => {
+        const beforeMainContent = react_1.default.createElement("div", null, "Before main content");
+        const afterMainContent = react_1.default.createElement("div", null, "After main content");
+        const endContent = react_1.default.createElement("div", null, "End content");
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        expect(react_2.screen.getByText('Before main content')).toBeTruthy();
+        expect(react_2.screen.getByText('Main message content')).toBeTruthy();
+        expect(react_2.screen.getByText('After main content')).toBeTruthy();
+        expect(react_2.screen.getByText('End content')).toBeTruthy();
+    });
+    it('should not render extraContent when not provided', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
+        // Ensure no extraContent is rendered
+        expect(react_2.screen.getByText('Main message content')).toBeTruthy();
+        expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
+        expect(react_2.screen.queryByText('After main content')).toBeFalsy();
+        expect(react_2.screen.queryByText('end message content')).toBeFalsy();
+    });
+    it('should handle undefined or null values in extraContent gracefully', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { 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(react_2.screen.getByText('Main message content')).toBeTruthy();
+        expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
+        expect(react_2.screen.queryByText('After main content')).toBeFalsy();
+        expect(react_2.screen.queryByText('end message content')).toBeFalsy();
+    });
+    it('should render JSX in extraContent correctly', () => {
+        const beforeMainContent = (react_1.default.createElement("div", { "data-testid": "before-main-content" },
+            react_1.default.createElement("strong", null, "Bold before content")));
+        const afterMainContent = (react_1.default.createElement("div", { "data-testid": "after-main-content" },
+            react_1.default.createElement("strong", null, "Bold after content")));
+        const endContent = (react_1.default.createElement("div", { "data-testid": "end-main-content" },
+            react_1.default.createElement("strong", null, "Bold end content")));
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
+        // Check that the JSX is correctly rendered
+        expect(react_2.screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+        expect(react_2.screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+        expect(react_2.screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+    });
+    it('should handle image correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
+        expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    });
+    it('should handle external links correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { 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(rehype_external_links_1.default).toHaveBeenCalledTimes(1);
+    });
+    it('should handle external links correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { 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(rehype_external_links_1.default).not.toHaveBeenCalled();
+    });
+    it('should handle error correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR }));
+        expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
+        expect(react_2.screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
+    });
+    it('should handle error correctly when loading', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, isLoading: true }));
+        expect(react_2.screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
+        expect(react_2.screen.getByText('Loading message')).toBeTruthy();
+    });
+    it('should handle error correctly when these is content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR, content: "Test" }));
+        expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+        expect(react_2.screen.queryByText('Test')).toBeFalsy();
+    });
 });

package/dist/cjs/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/cjs/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,34 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickResponse = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+        onSelect && onSelect(id);
+    };
+    return (react_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+    })));
+};
+exports.QuickResponse = QuickResponse;
+exports.default = exports.QuickResponse;

package/dist/cjs/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;

package/dist/cjs/Message/TableMessage/TableMessage.js

@@ -0,0 +1,67 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const TableMessage = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { className } = props, rest = __rest(props, ["className"]);
+    // This allows us to parse the nested data we get back from the 3rd party Markdown parser
+    // Open to feedback here if there is a better way to do this
+    // This looks for ths and spits them all out so we can filter them later, looking for text values
+    const findHeaders = (array) => {
+        const headers = [];
+        if (!array) {
+            return headers;
+        }
+        const traverse = (items) => {
+            for (const item of items) {
+                if (item.tagName === 'th') {
+                    headers.push(item);
+                }
+                if (item.children) {
+                    traverse(item.children);
+                }
+            }
+        };
+        traverse(array);
+        return headers;
+    };
+    const headers = findHeaders((_b = rest.node) === null || _b === void 0 ? void 0 : _b.children);
+    const headerTextValues = headers.map((header) => { var _a, _b; return (_b = (_a = header === null || header === void 0 ? void 0 : header.children) === null || _a === void 0 ? void 0 : _a.filter((c) => (c === null || c === void 0 ? void 0 : c.type) === 'text')[0]) === null || _b === void 0 ? void 0 : _b.value; });
+    // We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
+    // The data structure does not otherwise know this information at that level
+    // This is somewhat opinionated and may break if 3rd party library changes
+    // See Tr and Tbody for other usage
+    const modifyChildren = (children) => react_1.default.Children.map(children, (child) => {
+        if (child && (headerTextValues === null || headerTextValues === void 0 ? void 0 : headerTextValues.length) > 0) {
+            return react_1.default.cloneElement(child, { extraHeaders: headerTextValues });
+        }
+        return child;
+    });
+    if (!props['aria-label']) {
+        // eslint-disable-next-line no-console
+        console.warn('For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop');
+    }
+    return (
+    // gridBreakPoint is so we show mobile-styled-PF table
+    react_1.default.createElement(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${className ? className : ''}` }, rest), modifyChildren(children)));
+};
+exports.default = TableMessage;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TbodyProps } from '@patternfly/react-table';
+declare const TbodyProps: ({ children, ...props }: TbodyProps & ExtraProps & {
+    extraHeaders?: string[];
+}) => React.JSX.Element;
+export default TbodyProps;

package/dist/cjs/Message/TableMessage/TbodyMessage.js

@@ -0,0 +1,33 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const TbodyProps = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    // passthrough so we can place dataLabel on tds
+    const modifyChildren = (children) => {
+        if (children && props.extraHeaders) {
+            return react_1.default.Children.map(children, (child) => react_1.default.cloneElement(child, { extraHeaders: props.extraHeaders }));
+        }
+        return children;
+    };
+    return react_1.default.createElement(react_table_1.Tbody, Object.assign({}, props), modifyChildren(children));
+};
+exports.default = TbodyProps;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TdProps } from '@patternfly/react-table';
+declare const TdMessage: ({ children, ...props }: TdProps & ExtraProps) => React.JSX.Element;
+export default TdMessage;

package/dist/cjs/Message/TableMessage/TdMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const TdMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return react_1.default.createElement(react_table_1.Td, Object.assign({}, props), children);
+};
+exports.default = TdMessage;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { ThProps } from '@patternfly/react-table';
+declare const ThMessage: ({ children, ...props }: ThProps & ExtraProps) => React.JSX.Element;
+export default ThMessage;

package/dist/cjs/Message/TableMessage/ThMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const ThMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return react_1.default.createElement(react_table_1.Th, Object.assign({}, props), children);
+};
+exports.default = ThMessage;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TheadProps } from '@patternfly/react-table';
+declare const TheadMessage: ({ children, ...props }: TheadProps & ExtraProps) => React.JSX.Element;
+export default TheadMessage;

package/dist/cjs/Message/TableMessage/TheadMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const TheadMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return react_1.default.createElement(react_table_1.Thead, Object.assign({}, props), children);
+};
+exports.default = TheadMessage;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TrProps } from '@patternfly/react-table';
+declare const TrMessage: ({ children, ...props }: TrProps & ExtraProps & {
+    extraHeaders?: string[];
+}) => React.JSX.Element;
+export default TrMessage;

package/dist/cjs/Message/TableMessage/TrMessage.js

@@ -0,0 +1,37 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const TrMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    let tdIndex = 0;
+    // passthrough so we can place dataLabel on tds
+    // places column name on correct child
+    const modifyChildren = (children) => react_1.default.Children.map(children, (child) => {
+        if (child.type.name === 'td' && props.extraHeaders) {
+            const clonedChild = react_1.default.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+            tdIndex = tdIndex + 1;
+            return clonedChild;
+        }
+        return child;
+    });
+    return react_1.default.createElement(react_table_1.Tr, Object.assign({}, props), modifyChildren(children));
+};
+exports.default = TrMessage;

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

@@ -1,4 +1,5 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
+import { ContentProps } from '@patternfly/react-core';
+declare const TextMessage: ({ component, children, ...props }: ContentProps & ExtraProps) => React.JSX.Element;
 export default TextMessage;

package/dist/cjs/Message/TextMessage/TextMessage.js

@@ -20,8 +20,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const TextMessage = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { component, children } = _a, props = __rest(_a, ["component", "children"]);
     return (react_1.default.createElement("span", { className: "pf-chatbot__message-text" },
-        react_1.default.createElement(react_core_1.Content, Object.assign({ component: react_core_1.ContentVariants.p }, props), children)));
+        react_1.default.createElement(react_core_1.Content, Object.assign({ component: component }, props), children)));
 };
 exports.default = TextMessage;