@patternfly/chatbot 2.2.0-prerelease.27 → 2.2.0-prerelease.29

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { DropdownProps } from '@patternfly/react-core';
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

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

@@ -11,11 +11,11 @@ export interface Conversation {
     noIcon?: boolean;
     /** Conversation */
     text: string;
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems?: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -27,7 +27,7 @@ const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotC
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
 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', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState } = _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", "isLoading", "loadingState", "errorState"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState } = _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", "isLoading", "loadingState", "errorState"]);
     const drawerRef = react_1.default.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();

package/dist/cjs/ChatbotFooter/ChatbotFootnote.d.ts

@@ -17,7 +17,7 @@ export interface ChatbotFootnotePopover {
     bannerImage?: ChatbotFootnotePopoverBannerImage;
     /** Optional CTA button that can be used to trigger an action and close the popover */
     cta?: ChatbotFootnotePopoverCTA;
-    /** Optional link that can be used to show and external link like **Learn More** */
+    /** Optional link that can be used to show an external link like **View AI policy** */
     link?: ChatbotFootnotePopoverLink;
     /** Props for PF Popover */
     popoverProps?: PopoverProps;

package/dist/cjs/ChatbotFooter/ChatbotFootnote.js

@@ -42,7 +42,7 @@ const ChatbotFootnote = (_a) => {
                 var _a;
                 setIsVisible(false);
                 (_a = popover.cta) === null || _a === void 0 ? void 0 : _a.onClick();
-            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Got it')),
+            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Dismiss')),
         (popover === null || popover === void 0 ? void 0 : popover.link) && (react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null), iconPosition: "end" }, popover.link.label))));
     return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props),
         popover && (react_1.default.createElement(ChatbotPopover_1.default, Object.assign({ className: "pf-chatbot__popover--footnote", "aria-label": ((_c = popover.popoverProps) === null || _c === void 0 ? void 0 : _c['aria-label']) || 'More information', isVisible: isVisible, shouldOpen: (_event, _fn) => setIsVisible(true), shouldClose: (_event, _fn) => setIsVisible(false), bodyContent: popoverBodyContent, footerContent: popoverFooterContent, minWidth: ((_d = popover.popoverProps) === null || _d === void 0 ? void 0 : _d.minWidth) || '432', maxWidth: ((_e = popover.popoverProps) === null || _e === void 0 ? void 0 : _e.maxWidth) || '432', distance: ((_f = popover.popoverProps) === null || _f === void 0 ? void 0 : _f.distance) || 16, showClose: false }, popover.popoverProps),

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -18,16 +18,16 @@ exports.ChatbotHeaderSelectorDropdown = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotHeaderSelectorDropdown = (_a) => {
-    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', 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 [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Select model');
     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);
-            setDefaultAriaLabel(`Chatbot selector: ${value}`);
+            setDefaultAriaLabel(`Select model: ${value}`);
             setIsOptionsMenuOpen(false);
         }, onOpenChange: (isOpen) => setIsOptionsMenuOpen(isOpen), popperProps: { position: 'right', appendTo: 'inline' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, props), children));
 };

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

@@ -23,13 +23,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
         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();
+        expect(react_2.screen.getByRole('button', { name: /Select model/i })).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' }));
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: /Select model/i }));
         });
         yield (0, react_2.waitFor)(() => {
             expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -19,30 +19,38 @@ const ChatbotWelcomePrompt_1 = __importDefault(require("./ChatbotWelcomePrompt")
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
-        expect(react_2.screen.getByText('Hello, Chatbot User')).toBeTruthy();
-        expect(react_2.screen.getByText('How may I help you today?')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(react_2.screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(react_2.screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1' }] }));
-        expect(react_2.screen.getByText('Topic 1')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(react_2.screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }] }));
-        expect(react_2.screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
+            ] }));
+        expect(react_2.screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
     });
     it('should render prompts with onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }] }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Topic 1/i }));
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                {
+                    title: 'Set up account',
+                    message: 'Choose the necessary settings and preferences for your account.',
+                    onClick: spy
+                }
+            ] }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Set up account/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", className: "test", testId: "welcome-prompt" }));
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
         const element = react_2.screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });

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

@@ -7,6 +7,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -97,6 +98,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     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;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -44,7 +44,7 @@ const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
 const ImageMessage_1 = __importDefault(require("./ImageMessage/ImageMessage"));
 const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
 const MessageBase = (_a) => {
-    var { role, content, extraContent, 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", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
+    var { role, content, extraContent, 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, additionalRehypePlugins = [] } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "additionalRehypePlugins"]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
@@ -55,6 +55,7 @@ const MessageBase = (_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()}`;
+    const rehypePlugins = [rehype_unwrap_images_1.default, ...(additionalRehypePlugins !== null && additionalRehypePlugins !== void 0 ? additionalRehypePlugins : [])];
     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" },
@@ -95,7 +96,7 @@ const MessageBase = (_a) => {
                                 },
                                 th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
                                 img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props))
-                            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: [rehype_unwrap_images_1.default] }, content),
+                            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, content),
                         afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
                     !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),

package/dist/cjs/ResponseActions/ResponseActions.test.js

@@ -88,7 +88,7 @@ describe('ResponseActions', () => {
     }));
     it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         // using message just so we have something outside the group that's rendered
-        (0, react_2.render)(react_1.default.createElement(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
                 positive: {},
                 negative: {}
             } }));
@@ -102,7 +102,7 @@ describe('ResponseActions', () => {
         yield user_event_1.default.click(badBtn);
         expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-        yield user_event_1.default.click(react_2.screen.getByText('Example with all prebuilt actions'));
+        yield user_event_1.default.click(react_2.screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));

package/dist/css/main.css

@@ -1616,13 +1616,13 @@
 .pf-chatbot__message-textarea .pf-v6-c-form-control__textarea:focus-visible {
   outline: none;
 }
-.pf-chatbot__message-textarea .pf-v6-c-form-control > textarea {
-  outline-offset: 0px;
+.pf-chatbot__message-textarea textarea {
+  outline-offset: 0px !important;
   --pf-v6-c-form-control--PaddingBlockStart: 0;
   --pf-v6-c-form-control--PaddingBlockEnd: 0;
   --pf-v6-c-form-control--BorderRadius: 0;
 }
-.pf-chatbot__message-textarea .pf-v6-c-form-control > textarea:focus-visible {
+.pf-chatbot__message-textarea textarea:focus-visible {
   outline: none;
 }
 

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { DropdownProps } from '@patternfly/react-core';
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -11,11 +11,11 @@ export interface Conversation {
     noIcon?: boolean;
     /** Conversation */
     text: string;
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems?: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -21,7 +21,7 @@ import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export 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', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState } = _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", "isLoading", "loadingState", "errorState"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState } = _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", "isLoading", "loadingState", "errorState"]);
     const drawerRef = React.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();

package/dist/esm/ChatbotFooter/ChatbotFootnote.d.ts

@@ -17,7 +17,7 @@ export interface ChatbotFootnotePopover {
     bannerImage?: ChatbotFootnotePopoverBannerImage;
     /** Optional CTA button that can be used to trigger an action and close the popover */
     cta?: ChatbotFootnotePopoverCTA;
-    /** Optional link that can be used to show and external link like **Learn More** */
+    /** Optional link that can be used to show an external link like **View AI policy** */
     link?: ChatbotFootnotePopoverLink;
     /** Props for PF Popover */
     popoverProps?: PopoverProps;

package/dist/esm/ChatbotFooter/ChatbotFootnote.js

@@ -36,7 +36,7 @@ export const ChatbotFootnote = (_a) => {
                 var _a;
                 setIsVisible(false);
                 (_a = popover.cta) === null || _a === void 0 ? void 0 : _a.onClick();
-            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Got it')),
+            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Dismiss')),
         (popover === null || popover === void 0 ? void 0 : popover.link) && (React.createElement(Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "end" }, popover.link.label))));
     return (React.createElement("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props),
         popover && (React.createElement(ChatbotPopover, Object.assign({ className: "pf-chatbot__popover--footnote", "aria-label": ((_c = popover.popoverProps) === null || _c === void 0 ? void 0 : _c['aria-label']) || 'More information', isVisible: isVisible, shouldOpen: (_event, _fn) => setIsVisible(true), shouldClose: (_event, _fn) => setIsVisible(false), bodyContent: popoverBodyContent, footerContent: popoverFooterContent, minWidth: ((_d = popover.popoverProps) === null || _d === void 0 ? void 0 : _d.minWidth) || '432', maxWidth: ((_e = popover.popoverProps) === null || _e === void 0 ? void 0 : _e.maxWidth) || '432', distance: ((_f = popover.popoverProps) === null || _f === void 0 ? void 0 : _f.distance) || 16, showClose: false }, popover.popoverProps),

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -12,16 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Tooltip, Dropdown, MenuToggle } from '@patternfly/react-core';
 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"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', 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 [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
     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);
-            setDefaultAriaLabel(`Chatbot selector: ${value}`);
+            setDefaultAriaLabel(`Select model: ${value}`);
             setIsOptionsMenuOpen(false);
         }, onOpenChange: (isOpen) => setIsOptionsMenuOpen(isOpen), popperProps: { position: 'right', appendTo: 'inline' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, props), children));
 };

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

@@ -18,13 +18,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
         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();
+        expect(screen.getByRole('button', { name: /Select model/i })).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' }));
+            fireEvent.click(screen.getByRole('button', { name: /Select model/i }));
         });
         yield waitFor(() => {
             expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();

package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -14,30 +14,38 @@ import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
 import userEvent from '@testing-library/user-event';
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
+        const { container } = render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
-        expect(screen.getByText('Hello, Chatbot User')).toBeTruthy();
-        expect(screen.getByText('How may I help you today?')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1' }] }));
-        expect(screen.getByText('Topic 1')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }] }));
-        expect(screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
+            ] }));
+        expect(screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
     });
     it('should render prompts with onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }] }));
-        yield userEvent.click(screen.getByRole('button', { name: /Topic 1/i }));
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                {
+                    title: 'Set up account',
+                    message: 'Choose the necessary settings and preferences for your account.',
+                    onClick: spy
+                }
+            ] }));
+        yield userEvent.click(screen.getByRole('button', { name: /Set up account/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", className: "test", testId: "welcome-prompt" }));
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
         const element = screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });

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

@@ -7,6 +7,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -97,6 +98,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     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;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/Message/Message.js

@@ -38,7 +38,7 @@ import ThMessage from './TableMessage/ThMessage';
 import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, 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", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
+    var { role, content, extraContent, 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, additionalRehypePlugins = [] } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "additionalRehypePlugins"]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
@@ -49,6 +49,7 @@ export const MessageBase = (_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()}`;
+    const rehypePlugins = [rehypeUnwrapImages, ...(additionalRehypePlugins !== null && additionalRehypePlugins !== void 0 ? additionalRehypePlugins : [])];
     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" },
@@ -89,7 +90,7 @@ export const MessageBase = (_a) => {
                                 },
                                 th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
                                 img: (props) => React.createElement(ImageMessage, Object.assign({}, props))
-                            }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeUnwrapImages] }, content),
+                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content),
                         afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
                     !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 })),

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -83,7 +83,7 @@ describe('ResponseActions', () => {
     }));
     it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         // using message just so we have something outside the group that's rendered
-        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
                 positive: {},
                 negative: {}
             } }));
@@ -97,7 +97,7 @@ describe('ResponseActions', () => {
         yield userEvent.click(badBtn);
         expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-        yield userEvent.click(screen.getByText('Example with all prebuilt actions'));
+        yield userEvent.click(screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.27",
+  "version": "2.2.0-prerelease.29",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentError.tsx

@@ -6,8 +6,8 @@ export const AttachmentErrorExample: React.FunctionComponent = () => (
     variant="danger"
     // eslint-disable-next-line no-console
     onClose={() => console.log('Clicked the close button')}
-    title="File upload failed"
+    title="Could not upload file"
   >
-    Your file size is too large. Please ensure that your file is less than 25 MB.
+    Your file size must be less than 25 MB.
   </ChatbotAlert>
 );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -117,8 +117,8 @@ _Italic text, formatted with single underscores_
 
 1. **Using a \`toaster\`:**
 
-   - Place \`bread\` in a \`toaster\`
-   - Once \`bread\` is lightly browned, remove from \`toaster\`
+   - Place \`bread\` in a \`toaster\`.
+   - Once \`bread\` is lightly browned, remove from \`toaster\`.
 
 2. **Using a \`knife\`:**
 
@@ -142,19 +142,32 @@ _Italic text, formatted with single underscores_
 
   return (
     <>
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
-      <Message role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={`This is a text-based message from a bot named "Bot."`}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={`This is a text-based message from "Bot," with an updated timestamp.`}
+        timestamp="1 hour ago"
+      />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
+      <Message role="bot" avatar={patternflyAvatar} content="This message is from a nameless bot." />
       <Message
         name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
         role="bot"
         avatar={patternflyAvatar}
-        content="Text-based message, where the bot's name is truncated"
+        content="This is a message from a bot with really long name: it's truncated!"
       />
       <Message
         name="Bot"
         role="bot"
         avatar={squareImg}
-        content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
+        content="This bot has a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
       <Message

package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDropZone.tsx

@@ -53,7 +53,8 @@ export const DropzoneExample: React.FunctionComponent = () => {
   return (
     <FileDropZone onFileDrop={handleFileDrop} displayMode="fullscreen">
       <div className="pf-chatbot__file-drop-zone-example">
-        Content that shows when no dragging is happening (drag an item here to see the drop zone)
+        This is example content that would be shown when no dragging is happening. To see the drop zone, start to drag
+        an item into this section. The static content will be replaced by an active drop zone message.
       </div>
     </FileDropZone>
   );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithAttachment.tsx

@@ -32,14 +32,14 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
         name="User"
         role="user"
         avatar={userAvatar}
-        content="Here is an uploaded file"
+        content="Here is an uploaded file:"
         attachments={[{ name: 'auth-operator.yml', id: '1', onClick, onClose }]}
       />
       <Message
         name="User"
         role="user"
         avatar={userAvatar}
-        content="Here are two uploaded files"
+        content="Here are 2 uploaded files:"
         attachments={[
           { name: 'auth-operator.yml', id: '1' },
           { name: 'patternfly.svg', id: '2' }

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx

@@ -11,7 +11,7 @@ export const CustomActionExample: React.FunctionComponent = () => (
     name="Bot"
     role="bot"
     avatar={patternflyAvatar}
-    content="Example with custom actions"
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       regenerate: {
         ariaLabel: 'Regenerate',