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

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

@@ -0,0 +1,43 @@
+"use strict";
+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_core_1 = require("@patternfly/react-core");
+const react_2 = require("@testing-library/react");
+const ChatbotHeaderOptionsDropdown_1 = require("./ChatbotHeaderOptionsDropdown");
+describe('ChatbotHeaderOptionsDropdown', () => {
+    const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 2"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderOptionsDropdown', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderOptionsDropdown_1.ChatbotHeaderOptionsDropdown, null, dropdownItems));
+        expect(react_2.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 } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderOptionsDropdown_1.ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Chatbot options' }));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+            expect(react_2.screen.getByText('Option 1'));
+            expect(react_2.screen.getByText('Option 2'));
+            expect(react_2.screen.getByText('Option 3'));
+            react_2.fireEvent.click(react_2.screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -21,7 +21,9 @@ 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_1.default.useState(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Chatbot selector');
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
+    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);

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

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

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

@@ -0,0 +1,41 @@
+"use strict";
+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_core_1 = require("@patternfly/react-core");
+const react_2 = require("@testing-library/react");
+const ChatbotHeaderSelectorDropdown_1 = require("./ChatbotHeaderSelectorDropdown");
+describe('ChatbotHeaderSelectorDropdown', () => {
+    const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 2"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderSelectorDropdown', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderSelectorDropdown_1.ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
+        expect(react_2.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 } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderSelectorDropdown_1.ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Chatbot selector' }));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+            expect(react_2.screen.getByText('Option 3'));
+            react_2.fireEvent.click(react_2.screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+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");
+const Chatbot_1 = require("../Chatbot/Chatbot");
+const ChatbotHeaderTitle_1 = __importDefault(require("./ChatbotHeaderTitle"));
+describe('ChatbotHeaderTitle', () => {
+    it('should render ChatbotHeaderTitle with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, null, "Chatbot Header Title"));
+        expect(react_2.screen.getByText('Chatbot Header Title')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderTitle with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { className: "custom-header-class" }, "Chatbot Header Title"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+    it('should render title for default display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for docked display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
+        expect(react_2.screen.getByText('Docked header title')).toBeTruthy();
+    });
+    it('should fallback to default title when docked display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for embedded display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
+        expect(react_2.screen.getByText('Embedded header title')).toBeTruthy();
+    });
+    it('should fallback to default title when embedded display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for fullscreen display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
+        expect(react_2.screen.getByText('Fullscreen header title')).toBeTruthy();
+    });
+    it('should fallback to default title when fullscreen display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+});

package/dist/cjs/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/cjs/ChatbotHeader/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./ChatbotHeaderMenu"), exports);
 __exportStar(require("./ChatbotHeaderTitle"), exports);
 __exportStar(require("./ChatbotHeaderOptionsDropdown"), exports);
 __exportStar(require("./ChatbotHeaderSelectorDropdown"), exports);
+__exportStar(require("./ChatbotHeaderCloseButton"), exports);

package/dist/cjs/ChatbotToggle/ChatbotToggle.js

@@ -28,7 +28,9 @@ const ChatbotToggleBase = (_a) => {
     // Configure icon
     const closedIcon = ClosedToggleIcon ? react_1.default.createElement(ClosedToggleIcon, null) : react_1.default.createElement(ChatIcon, null);
     const icon = isChatbotVisible ? react_1.default.createElement(angle_down_icon_1.default, { "data-testid": openIconTestId }) : closedIcon;
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/CodeModal/CodeModal.js

@@ -75,24 +75,14 @@ const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    /* eslint-disable indent */
-    const getHeight = (displayMode) => {
-        switch (displayMode) {
-            case Chatbot_1.ChatbotDisplayMode.docked:
-                return '100vh';
-            default:
-                return '45vh';
-        }
-    };
-    /* eslint-enable indent */
     const modal = (react_1.default.createElement(ChatbotModal_1.default, { 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_1.default.createElement(react_core_1.ModalHeader, { title: title, labelId: "code-modal-title" }),
         react_1.default.createElement(react_core_1.ModalBody, { id: "code-modal-body" },
             react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__code-modal-body" },
                 react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details" },
                     react_1.default.createElement(FileDetails_1.default, { fileName: fileName })),
-                react_1.default.createElement(react_core_1.StackItem, null,
-                    react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
+                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-body" },
+                    react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
                             glyphMargin: false,
                             folding: false
                         } }, props))))),

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Compare = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
+    const [isSelected, setIsSelected] = react_1.default.useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = react_1.default.useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = react_1.default.useState(false);
+    react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
+            react_1.default.createElement(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel },
+                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
+                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
+        react_1.default.createElement("div", { className: "pf-chatbot__compare" },
+            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
+            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+};
+exports.Compare = Compare;
+exports.default = exports.Compare;

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

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

package/dist/cjs/Compare/Compare.test.js

@@ -0,0 +1,20 @@
+"use strict";
+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 Compare_1 = __importDefault(require("./Compare"));
+const firstChild = (react_1.default.createElement("div", null,
+    react_1.default.createElement("h1", null, "Child 1")));
+const secondChild = (react_1.default.createElement("div", null,
+    react_1.default.createElement("h1", null, "Child 2")));
+describe('Compare', () => {
+    it('should render compare correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Compare_1.default, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(react_2.screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+    });
+});

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

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

package/dist/cjs/Compare/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Compare_1 = require("./Compare");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Compare_1).default; } });
+__exportStar(require("./Compare"), exports);

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

@@ -8,6 +8,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const OrderedListMessage = ({ children }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    react_1.default.createElement(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number }, children)));
+const OrderedListMessage = ({ children, start }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-ordered-list" },
+    react_1.default.createElement(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start }, children)));
 exports.default = OrderedListMessage;

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

@@ -1,12 +1,11 @@
 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';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -60,10 +59,32 @@ 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>;
 }
-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/cjs/Message/Message.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Message = void 0;
+exports.MessageBase = void 0;
 const react_1 = __importDefault(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
@@ -31,8 +31,12 @@ const SourcesCard_1 = __importDefault(require("../SourcesCard"));
 const ListItemMessage_1 = __importDefault(require("./ListMessage/ListItemMessage"));
 const UnorderedListMessage_1 = __importDefault(require("./ListMessage/UnorderedListMessage"));
 const OrderedListMessage_1 = __importDefault(require("./ListMessage/OrderedListMessage"));
-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"]);
+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 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"]);
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -42,7 +46,7 @@ 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_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
+    return (react_1.default.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_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
             react_1.default.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -53,23 +57,34 @@ const Message = (_a) => {
             react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
                 react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
                     isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_markdown_1.default, { components: {
-                            p: TextMessage_1.default,
-                            code: ({ children }) => react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, codeBlockProps), children),
+                            p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
+                            code: (_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: OrderedListMessage_1.default,
-                            li: ListItemMessage_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))
                         }, 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 })),
                     !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
-                    !isLoading && quickResponses && (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
-                        var { id, onClick, content } = _a, props = __rest(_a, ["id", "onClick", "content"]);
-                        return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: "outline", color: "blue", key: id, onClick: onClick }, props), content));
-                    })))),
+                    userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
+                    userFeedbackComplete && react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
+                    !isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
                 attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
                     return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
                         react_1.default.createElement(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
                 })))))));
 };
-exports.Message = Message;
-exports.default = exports.Message;
+exports.MessageBase = MessageBase;
+const Message = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
+exports.default = Message;

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

@@ -17,6 +17,8 @@ const react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const Message_1 = __importDefault(require("./Message"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const monitor_sampleapp_quickstart_1 = require("./QuickStarts/monitor-sampleapp-quickstart");
+const monitor_sampleapp_quickstart_with_image_1 = require("./QuickStarts/monitor-sampleapp-quickstart-with-image");
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -60,6 +62,37 @@ spec:
   url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
 `;
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -280,6 +313,12 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
+    it('should render ordered lists correctly if there is interstitial content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        checkListItemsRendered();
+        const list = react_2.screen.getAllByRole('list')[1];
+        expect(list).toHaveAttribute('start', '3');
+    });
     it('should render inline code', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(react_2.screen.getByText(/() => void/i)).toBeTruthy();
@@ -289,12 +328,16 @@ describe('Message', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
         expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        expect(react_2.screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
         expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
         expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
         expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
     });
     it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
         // need explicit setup since RTL stubs clipboard if you do this
@@ -332,4 +375,47 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('img')).toHaveClass('test');
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
     });
+    it('should handle QuickStart tile correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => alert(id)
+            } }));
+        expect(react_2.screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+    });
+    it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Monitoring your sample application' }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.metadata.name);
+    }));
+    it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_with_image_1.monitorSampleAppQuickStartWithImage,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+    }));
+    it('should handle block quote correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+        expect(react_2.screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+        expect(react_2.screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+    });
+    it('should handle heading correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        expect(react_2.screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+    });
 });