@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js

@@ -0,0 +1,38 @@
+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());
+    });
+};
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+describe('ChatbotHeaderOptionsDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderOptionsDropdown', () => {
+        render(React.createElement(ChatbotHeaderOptionsDropdown, null, dropdownItems));
+        expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = render(React.createElement(ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 1'));
+            expect(screen.getByText('Option 2'));
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -15,7 +15,9 @@ export const ChatbotHeaderSelectorDropdown = (_a) => {
     var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
-    const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
+    const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
     return (React.createElement(Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js

@@ -0,0 +1,36 @@
+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());
+    });
+};
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+describe('ChatbotHeaderSelectorDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderSelectorDropdown', () => {
+        render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
+        expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+describe('ChatbotHeaderTitle', () => {
+    it('should render ChatbotHeaderTitle with children', () => {
+        render(React.createElement(ChatbotHeaderTitle, null, "Chatbot Header Title"));
+        expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderTitle with custom classname', () => {
+        const { container } = render(React.createElement(ChatbotHeaderTitle, { className: "custom-header-class" }, "Chatbot Header Title"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+    it('should render title for default display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for docked display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
+        expect(screen.getByText('Docked header title')).toBeTruthy();
+    });
+    it('should fallback to default title when docked display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for embedded display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
+        expect(screen.getByText('Embedded header title')).toBeTruthy();
+    });
+    it('should fallback to default title when embedded display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for fullscreen display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
+        expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+    });
+    it('should fallback to default title when fullscreen display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+});

package/dist/esm/ChatbotHeader/index.d.ts

@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/dist/esm/ChatbotHeader/index.js

@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/dist/esm/ChatbotToggle/ChatbotToggle.js

@@ -23,7 +23,9 @@ const ChatbotToggleBase = (_a) => {
     // Configure icon
     const closedIcon = ClosedToggleIcon ? React.createElement(ClosedToggleIcon, null) : React.createElement(ChatIcon, null);
     const icon = isChatbotVisible ? React.createElement(AngleDownIcon, { "data-testid": openIconTestId }) : closedIcon;
-    return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+    return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: React.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = React.forwardRef((props, ref) => (React.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/CodeModal/CodeModal.js

@@ -46,24 +46,14 @@ export const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    /* eslint-disable indent */
-    const getHeight = (displayMode) => {
-        switch (displayMode) {
-            case ChatbotDisplayMode.docked:
-                return '100vh';
-            default:
-                return '45vh';
-        }
-    };
-    /* eslint-enable indent */
     const modal = (React.createElement(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
         React.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
         React.createElement(ModalBody, { id: "code-modal-body" },
             React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
                 React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
                     React.createElement(FileDetails, { fileName: fileName })),
-                React.createElement(StackItem, null,
-                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
+                React.createElement(StackItem, { className: "pf-chatbot__code-modal-body" },
+                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
                             glyphMargin: false,
                             folding: false
                         } }, props))))),

package/dist/esm/Compare/Compare.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+interface CompareProps {
+    /** First of two children to render */
+    firstChild: React.ReactNode;
+    /** Second of two children to render */
+    secondChild: React.ReactNode;
+    /** Display name for first child, used in mobile toggle */
+    firstChildDisplayName: string;
+    /** Display name for second child, used in mobile toggle */
+    secondChildDisplayName: string;
+    /** Aria label for mobile toggle group */
+    toggleGroupAriaLabel?: string;
+    /** Callback for when mobile toggle is used */
+    onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
+}
+export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => React.JSX.Element;
+export default Compare;

package/dist/esm/Compare/Compare.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
+    const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+    React.useEffect(() => {
+        // we want to show the first if we switch to the mobile toggle view
+        // and reset/switch back to normal otherwise
+        const updateChatbotVisibility = () => {
+            if (window.innerWidth >= 901) {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(true);
+            }
+            else {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(false);
+                setIsSelected('toggle-group-chatbot-1');
+            }
+        };
+        window.addEventListener('resize', updateChatbotVisibility);
+        return () => {
+            window.removeEventListener('resize', updateChatbotVisibility);
+        };
+    }, []);
+    // this only happens on mobile
+    const handleChildToggleClick = (event) => {
+        const id = event.currentTarget.id;
+        setIsSelected(id);
+        setShowSecondChatbot(!showSecondChatbot);
+        setShowFirstChatbot(!showFirstChatbot);
+        onToggleClick && onToggleClick(event);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
+            React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
+        React.createElement("div", { className: "pf-chatbot__compare" },
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+};
+export default Compare;

package/dist/esm/Compare/Compare.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/Compare/Compare.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+const firstChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 1")));
+const secondChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 2")));
+describe('Compare', () => {
+    it('should render compare correctly', () => {
+        render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+    });
+});

package/dist/esm/Compare/index.d.ts

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

package/dist/esm/Compare/index.js

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

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

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

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

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

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-    content: string;
-    id: string;
-    onClick: () => void;
-}
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
+import { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import { TableProps } from '@patternfly/react-table';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -60,10 +60,34 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Props for user feedback card */
+    userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+    /** Props for user feedback response */
+    userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
     /** Whether avatar is round */
     hasRoundAvatar?: boolean;
     /** Any additional props applied to the avatar, for additional customization  */
     avatarProps?: Omit<AvatarProps, 'alt'>;
+    /** Props for QuickStart card */
+    quickStarts?: {
+        quickStart: QuickStart;
+        onSelectQuickStart: (id?: string) => void;
+        minuteWord?: string;
+        minuteWordPlural?: string;
+        prerequisiteWord?: string;
+        prerequisiteWordPlural?: string;
+        quickStartButtonAriaLabel?: string;
+        className?: string;
+        onClick?: () => void;
+        action?: QuickstartAction;
+    };
+    /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+    isLiveRegion?: boolean;
+    /** Ref applied to message  */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+    tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
 }
-export declare const Message: React.FunctionComponent<MessageProps>;
+export declare const MessageBase: React.FunctionComponent<MessageProps>;
+declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/esm/Message/Message.js

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