@patternfly/chatbot 2.2.0-prerelease.20 → 2.2.0-prerelease.22

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

@@ -6,6 +6,7 @@ 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';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -84,6 +85,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     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;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -35,8 +35,14 @@ const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile")
 const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
 const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
 const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
+const TableMessage_1 = __importDefault(require("./TableMessage/TableMessage"));
+const TrMessage_1 = __importDefault(require("./TableMessage/TrMessage"));
+const TdMessage_1 = __importDefault(require("./TableMessage/TdMessage"));
+const TbodyMessage_1 = __importDefault(require("./TableMessage/TbodyMessage"));
+const TheadMessage_1 = __importDefault(require("./TableMessage/TheadMessage"));
+const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
 const MessageBase = (_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, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef"]);
+    var { role, content, 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 } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -62,16 +68,27 @@ const MessageBase = (_a) => {
                                 var { children } = _a, props = __rest(_a, ["children"]);
                                 return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
                             },
-                            ul: UnorderedListMessage_1.default,
-                            ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
-                            li: ListItemMessage_1.default,
                             h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
                             h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
                             h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
                             h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
                             h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
                             h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
-                            blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props))
+                            blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
+                            ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
+                            ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
+                            li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
+                            table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                            tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
+                            thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
+                            tr: (props) => react_1.default.createElement(TrMessage_1.default, 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_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
+                            },
+                            th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props))
                         }, remarkPlugins: [remark_gfm_1.default] }, content)),
                     !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),

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

@@ -93,6 +93,50 @@ const 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 checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -418,4 +462,54 @@ describe('Message', () => {
         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();
+    });
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
     isAttachMenuOpen: boolean;
@@ -66,7 +67,9 @@ export interface MessageBarProps {
         };
     };
     /** A callback for when the text area value changes. */
-    onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+    /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
+    displayMode?: ChatbotDisplayMode;
 }
 export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
 export default MessageBar;