@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const monitor_sampleapp_quickstart_1 = require("./monitor-sampleapp-quickstart");
+const QuickStartTileDescription_1 = __importStar(require("./QuickStartTileDescription"));
+describe('pluralizeWord function', () => {
+    it('should render no plural correctly', () => {
+        expect((0, QuickStartTileDescription_1.pluralizeWord)(2, 'pizza')).toBe('pizzas');
+    });
+});
+describe('QuickStart tile description', () => {
+    it('should render no prereqs correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description }));
+        expect(react_2.screen.queryByRole('heading')).toBeFalsy();
+    });
+    it('should render singular prereq correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        expect(react_2.screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy();
+    });
+    it('should render plural prereq correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [
+                `You completed the "Getting started with a sample" quick start.`,
+                `You completed the app quick start`
+            ] }));
+        expect(react_2.screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy();
+    });
+    it('should be able to click prereqs link', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        const button = react_2.screen.getByRole('button', { name: /Show prerequisites/i });
+        expect(react_2.screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy();
+        yield user_event_1.default.click(button);
+        expect(react_2.screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Close/i })).toBeTruthy();
+        expect(react_2.screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy();
+    }));
+});

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface QuickStartTileHeaderProps {
+    /** Name for the header */
+    name: string;
+    /** Id for the QuickStart */
+    quickStartId?: string;
+    /** Callback for when the name of the QuickStart is clicked */
+    onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
+}
+declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
+export default QuickStartTileHeader;

package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const QuickStartTileHeader = ({ name, quickStartId, onSelect }) => (React.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
+    React.createElement(react_core_1.Button, { "data-test": "title", id: quickStartId, variant: "link", isInline: true, onClick: onSelect }, name)));
+exports.default = QuickStartTileHeader;

package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStartWithImage: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        icon: string;
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.monitorSampleAppQuickStartWithImage = void 0;
+exports.monitorSampleAppQuickStartWithImage = {
+    apiVersion: 'console.openshift.io/v1',
+    kind: 'QuickStarts',
+    metadata: {
+        name: 'monitor-sampleapp'
+    },
+    spec: {
+        icon: 'test.png', // this is only difference
+        version: 4.7,
+        displayName: 'Monitoring your sample application',
+        durationMinutes: 10,
+        description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+        prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+        introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+        tasks: [
+            {
+                title: `Viewing the monitoring details of your sample application`,
+                description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **</> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+                review: {
+                    instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how you can monitor your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing your project monitoring dashboard`,
+                description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+                review: {
+                    instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to view the dashboard in the context of your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing custom metrics`,
+                description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+                review: {
+                    instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to run a query!`,
+                    failed: `Try the steps again.`
+                }
+            }
+        ],
+        conclusion: `You have learned how to access workload monitoring and metrics!`,
+        nextQuickStart: [``]
+    }
+};

package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStart: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        icon: string;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.monitorSampleAppQuickStart = void 0;
+exports.monitorSampleAppQuickStart = {
+    apiVersion: 'console.openshift.io/v1',
+    kind: 'QuickStarts',
+    metadata: {
+        name: 'monitor-sampleapp'
+    },
+    spec: {
+        version: 4.7,
+        displayName: 'Monitoring your sample application',
+        durationMinutes: 10,
+        icon: '',
+        description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+        prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+        introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+        tasks: [
+            {
+                title: `Viewing the monitoring details of your sample application`,
+                description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **</> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+                review: {
+                    instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how you can monitor your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing your project monitoring dashboard`,
+                description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+                review: {
+                    instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to view the dashboard in the context of your sample app!`,
+                    failed: `Try the steps again.`
+                }
+            },
+            {
+                title: `Viewing custom metrics`,
+                description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+                review: {
+                    instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+                    failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+                },
+                summary: {
+                    success: `You have learned how to run a query!`,
+                    failed: `Try the steps again.`
+                }
+            }
+        ],
+        conclusion: `You have learned how to access workload monitoring and metrics!`,
+        nextQuickStart: [``]
+    }
+};

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

@@ -0,0 +1,132 @@
+import { ButtonProps } from '@patternfly/react-core';
+export interface AccessReviewResourceAttributes {
+    group?: string;
+    resource?: string;
+    subresource?: string;
+    verb?: K8sVerb;
+    name?: string;
+    namespace?: string;
+}
+export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch';
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface ObjectMetadata {
+    name: string;
+    annotations?: {
+        [key: string]: string;
+    };
+    clusterName?: string;
+    creationTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    deletionTimestamp?: string;
+    finalizers?: string[];
+    generateName?: string;
+    generation?: number;
+    labels?: {
+        [key: string]: string;
+    };
+    managedFields?: any[];
+    namespace?: string;
+    ownerReferences?: OwnerReference[];
+    resourceVersion?: string;
+    uid?: string;
+    language?: string;
+    country?: string;
+    locale?: string;
+    [key: string]: any;
+}
+export interface OwnerReference {
+    name: string;
+    kind: string;
+    uid: string;
+    apiVersion: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export interface QuickstartAction {
+    /** Screen reader aria label. */
+    'aria-label': string;
+    /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+    icon?: React.ComponentType<unknown>;
+    /** Callback with synthetic event parameter. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Additional button props to be rendered as extra props. */
+    buttonProps?: ButtonProps;
+}
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface QuickStartSpec {
+    version?: number;
+    displayName: string;
+    durationMinutes?: number;
+    icon: React.ReactNode;
+    description: string;
+    prerequisites?: string[];
+    introduction?: string;
+    tasks?: QuickStartTask[];
+    conclusion?: string;
+    nextQuickStart?: string[];
+    accessReviewResources?: AccessReviewResourceAttributes[];
+    link?: QuickStartExternal;
+    type?: QuickStartType;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export type AllQuickStartStates = Record<string, QuickStartState>;
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+export declare enum QuickStartStatus {
+    COMPLETE = "Complete",
+    IN_PROGRESS = "In Progress",
+    NOT_STARTED = "Not started"
+}
+export declare enum QuickStartTaskStatus {
+    INIT = "Initial",
+    VISITED = "Visited",
+    REVIEW = "Review",
+    SUCCESS = "Success",
+    FAILED = "Failed"
+}
+export interface QuickStartExternal {
+    href: string;
+    text?: string;
+}
+export interface QuickStartType {
+    text: string;
+    color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
+}

package/dist/cjs/Message/QuickStarts/types.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickStartTaskStatus = exports.QuickStartStatus = void 0;
+var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (exports.QuickStartStatus = QuickStartStatus = {}));
+var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
+})(QuickStartTaskStatus || (exports.QuickStartTaskStatus = QuickStartTaskStatus = {}));

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;