@patternfly/chatbot 2.2.0-prerelease.1 → 2.2.0-prerelease.11

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerProps } from '@patternfly/react-core';
+import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 export interface Conversation {
     /** Conversation id */
@@ -18,6 +18,8 @@ export interface Conversation {
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+    /** Additional props passed to conversation menu item */
+    additionalProps?: MenuItemProps;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Function called to toggle drawer */
@@ -51,6 +53,22 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     reverseButtonOrder?: boolean;
     /** Custom test id for the drawer actions */
     drawerActionsTestId?: string;
+    /** Additional props applied to menu  */
+    menuProps?: MenuProps;
+    /** Additional props applied to panel */
+    drawerPanelContentProps?: DrawerPanelContentProps;
+    /** Additional props applied to drawer content */
+    drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+    /** Additional props applied to drawer content body */
+    drawerContentBodyProps?: DrawerContentBodyProps;
+    /** Additional props applied to drawer head */
+    drawerHeadProps?: DrawerHeadProps;
+    /** Additional props applied to drawer actions */
+    drawerActionsProps?: DrawerActionsProps;
+    /** Additional props applied to drawer close button */
+    drawerCloseButtonProps?: DrawerCloseButtonProps;
+    /** Additional props appleid to drawer panel body */
+    drawerPanelBodyProps?: DrawerPanelBodyProps;
 }
 export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -25,18 +25,18 @@ const react_icons_1 = require("@patternfly/react-icons");
 const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
 const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps"]);
     const drawerRef = react_1.default.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
     const getNavItem = (conversation) => {
         var _a;
-        return (react_1.default.createElement(react_core_1.MenuItem, Object.assign({ className: "pf-chatbot__menu-item", itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : react_1.default.createElement(react_icons_1.OutlinedCommentAltIcon, null) }), (conversation.menuItems
+        return (react_1.default.createElement(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : react_1.default.createElement(react_icons_1.OutlinedCommentAltIcon, null) }), (conversation.menuItems
             ? {
                 actions: (react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {})), conversation.text));
+            : {}), conversation.additionalProps), conversation.text));
     };
     const buildMenu = () => {
         if (Array.isArray(conversations)) {
@@ -52,16 +52,16 @@ const ChatbotConversationHistoryNav = (_a) => {
     // Menu Content
     // - Consumers should pass an array to <Chatbot> of the list of conversations
     // - Groups could be optional, but items need to be ordered by date
-    const menuContent = (react_1.default.createElement(react_core_1.Menu, { isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId },
+    const menuContent = (react_1.default.createElement(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
         react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
-    const panelContent = (react_1.default.createElement(react_core_1.DrawerPanelContent, { focusTrap: { enabled: true }, minSize: "384px", maxSize: "384px" },
-        react_1.default.createElement(react_core_1.DrawerHead, null,
-            react_1.default.createElement(react_core_1.DrawerActions, { "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' },
-                react_1.default.createElement(react_core_1.DrawerCloseButton, { onClick: onDrawerToggle }),
+    const panelContent = (react_1.default.createElement(react_core_1.DrawerPanelContent, Object.assign({ focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps),
+        react_1.default.createElement(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps),
+            react_1.default.createElement(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
+                react_1.default.createElement(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
                 onNewChat && react_1.default.createElement(react_core_1.Button, { onClick: onNewChat }, newChatButtonText))),
         handleTextInputChange && (react_1.default.createElement("div", { className: "pf-chatbot__input" },
             react_1.default.createElement(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        react_1.default.createElement(react_core_1.DrawerPanelBody, null, menuContent)));
+        react_1.default.createElement(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), menuContent)));
     // An onKeyDown property must be passed to the Drawer component to handle closing
     // the drawer panel and deactivating the focus trap via the Escape key.
     const onEscape = (event) => {
@@ -73,8 +73,8 @@ const ChatbotConversationHistoryNav = (_a) => {
         }
     };
     return (react_1.default.createElement(react_core_1.Drawer, Object.assign({ className: "pf-chatbot__history", isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === Chatbot_1.ChatbotDisplayMode.fullscreen || displayMode === Chatbot_1.ChatbotDisplayMode.embedded }, props),
-        react_1.default.createElement(react_core_1.DrawerContent, { panelContent: panelContent },
-            react_1.default.createElement(react_core_1.DrawerContentBody, null,
+        react_1.default.createElement(react_core_1.DrawerContent, Object.assign({ panelContent: panelContent }, drawerContentProps),
+            react_1.default.createElement(react_core_1.DrawerContentBody, Object.assign({}, drawerContentBodyProps),
                 react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
                     drawerContent)))));

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -22,12 +22,12 @@ describe('ChatbotConversationHistoryNav', () => {
     const initialConversations = [
         {
             id: '1',
-            text: 'Lightspeed documentation'
+            text: 'ChatBot documentation'
         }
     ];
     it('should open the conversation history navigation drawer', () => {
         (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
-        expect(react_2.screen.queryByText('Lightspeed documentation')).toBeInTheDocument();
+        expect(react_2.screen.queryByText('ChatBot documentation')).toBeInTheDocument();
     });
     it('should display the conversations for grouped conversations', () => {
         const groupedConversations = {
@@ -63,7 +63,43 @@ describe('ChatbotConversationHistoryNav', () => {
             charCode: 27
         });
         (0, react_2.waitFor)(() => {
-            expect(react_2.screen.queryByText('Lightspeed documentation')).not.toBeInTheDocument();
+            expect(react_2.screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
         });
     }));
+    it('should be resizable', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelContentProps: { isResizable: true, minSize: '200px' } }));
+        expect(react_2.screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('dialog', { name: /Resize/i })).toHaveAttribute('style', '--pf-v6-c-drawer__panel--md--FlexBasis: 384px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px;');
+    });
+    it('should accept drawerContentProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerContentBodyProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerHeadProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerHeadProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerActionsProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerActionsProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerCloseButtonProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerCloseButtonProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerPanelBodyProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderCloseButtonProps {
+    /** Callback function for when button is clicked */
+    onClick: () => void;
+    /** Custom classname for the header component */
+    className?: string;
+    /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+    tooltipProps?: TooltipProps;
+    /** Aria label for menu */
+    menuAriaLabel?: string;
+    /** Ref applied to menu */
+    innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
+}
+export declare const ChatbotHeaderCloseButton: React.ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatbotHeaderCloseButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const ChatbotHeaderCloseButtonBase = ({ className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
+    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom" }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
+                react_1.default.createElement(react_icons_1.CloseIcon, null)) }))));
+exports.ChatbotHeaderCloseButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts

@@ -11,5 +11,7 @@ export interface ChatbotHeaderMenuProps {
     menuAriaLabel?: string;
     /** Ref applied to menu */
     innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
 }
 export declare const ChatbotHeaderMenu: React.ForwardRefExoticComponent<ChatbotHeaderMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -7,8 +7,8 @@ exports.ChatbotHeaderMenu = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
-const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: "Menu", position: "bottom" }, tooltipProps),
+const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
+    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
                 react_1.default.createElement(bars_icon_1.default, null)) }))));
 exports.ChatbotHeaderMenu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

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/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,9 @@
 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';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -64,6 +61,19 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     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;
+    };
 }
 export declare const Message: React.FunctionComponent<MessageProps>;
 export default Message;

package/dist/cjs/Message/Message.js

@@ -31,8 +31,10 @@ 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 QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile"));
+const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
 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"]);
+    var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts"]);
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -56,15 +58,13 @@ const Message = (_a) => {
                             p: TextMessage_1.default,
                             code: ({ children }) => react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, codeBlockProps), children),
                             ul: UnorderedListMessage_1.default,
-                            ol: OrderedListMessage_1.default,
+                            ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
                             li: ListItemMessage_1.default
                         }, 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));
-                    })))),
+                    !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" },

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,21 @@ 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 checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -280,6 +297,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();
@@ -332,4 +355,32 @@ 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');
+    }));
 });

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+    content: string;
+    id: string;
+    onClick: () => void;
+}
+export interface QuickResponseProps {
+    /** Props for quick responses */
+    quickResponses: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+}
+export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
+export default QuickResponse;

package/dist/cjs/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickResponse = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 } }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+    };
+    return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+        var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+        return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+    })));
+};
+exports.QuickResponse = QuickResponse;
+exports.default = exports.QuickResponse;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface FallbackImgProps {
+    /** Image source */
+    src: string;
+    /** Alt text for image */
+    alt?: string;
+    /** ClassName applied to image */
+    className?: string;
+    /** Fallback */
+    fallback?: React.ReactNode;
+}
+declare const FallbackImg: React.FC<FallbackImgProps>;
+export default FallbackImg;