@patternfly/chatbot 2.2.0-prerelease.26 → 2.2.0-prerelease.28

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -18,8 +18,10 @@ import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, Dra
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 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 } = _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"]);
+    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();
@@ -46,16 +48,26 @@ export 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.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
-        React.createElement(MenuContent, null, buildMenu())));
-    const panelContent = (React.createElement(DrawerPanelContent, Object.assign({ focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps),
-        React.createElement(DrawerHead, Object.assign({}, drawerHeadProps),
-            React.createElement(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
-                React.createElement(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
-                onNewChat && React.createElement(Button, { onClick: onNewChat }, newChatButtonText))),
+    const renderMenuContent = () => {
+        if (errorState) {
+            return React.createElement(HistoryEmptyState, Object.assign({}, errorState));
+        }
+        return (React.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
+            React.createElement(MenuContent, null, buildMenu())));
+    };
+    const renderDrawerContent = () => (React.createElement(React.Fragment, null,
         handleTextInputChange && (React.createElement("div", { className: "pf-chatbot__input" },
             React.createElement(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        React.createElement(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), menuContent)));
+        React.createElement(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
+    const renderPanelContent = () => {
+        const drawer = (React.createElement(React.Fragment, null,
+            React.createElement(DrawerHead, Object.assign({}, drawerHeadProps),
+                React.createElement(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
+                    React.createElement(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
+                    onNewChat && React.createElement(Button, { onClick: onNewChat }, newChatButtonText))),
+            isLoading ? React.createElement(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()));
+        return (React.createElement(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
+    };
     // 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) => {
@@ -67,7 +79,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
         }
     };
     return (React.createElement(Drawer, Object.assign({ className: "pf-chatbot__history", isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props),
-        React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, drawerContentProps),
+        React.createElement(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
             React.createElement(DrawerContentBody, Object.assign({}, drawerContentBodyProps),
                 React.createElement(React.Fragment, null,
                     React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -12,6 +12,33 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
+import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+const ERROR = {
+    bodyText: (React.createElement(React.Fragment, null,
+        "To try again, check your connection and reload this page. If the issue persists,",
+        ' ',
+        React.createElement("a", { href: "" }, "contact the support team"),
+        ".")),
+    buttonText: 'Reload',
+    buttonIcon: React.createElement(Spinner, { size: "sm" }),
+    hasButton: true,
+    titleText: 'Could not load chat history',
+    status: EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
+const ERROR_WITHOUT_BUTTON = {
+    bodyText: (React.createElement(React.Fragment, null,
+        "To try again, check your connection and reload this page. If the issue persists,",
+        ' ',
+        React.createElement("a", { href: "" }, "contact the support team"),
+        ".")),
+    buttonText: 'Reload',
+    buttonIcon: React.createElement(Spinner, { size: "sm" }),
+    hasButton: false,
+    titleText: 'Could not load chat history',
+    status: EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
 describe('ChatbotConversationHistoryNav', () => {
     const onDrawerToggle = jest.fn();
     const initialConversations = [
@@ -97,4 +124,37 @@ describe('ChatbotConversationHistoryNav', () => {
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
+    it('should show loading state if triggered', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true }));
+        expect(screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+    });
+    it('should pass alternative aria label to loading state', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, loadingState: { screenreaderText: 'I am a test' } }));
+        expect(screen.getByRole('dialog', { name: /I am a test/i })).toBeTruthy();
+    });
+    it('should accept errorState', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR }));
+        expect(screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team . Loading... Reload/i
+        })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+    });
+    it('should accept errorState without button', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR_WITHOUT_BUTTON }));
+        expect(screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team ./i
+        })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
+        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+    });
+    it('should show loading state over error state if both are supplied', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
+        expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
+    });
 });

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

@@ -0,0 +1,11 @@
+import { EmptyStateProps } from '@patternfly/react-core';
+import React from 'react';
+export interface HistoryEmptyStateProps extends EmptyStateProps {
+    onClick?: () => void;
+    bodyText?: string | React.ReactNode;
+    buttonText?: string;
+    buttonIcon?: React.ReactNode;
+    hasButton?: boolean;
+}
+export declare const HistoryEmptyState: React.FunctionComponent<HistoryEmptyStateProps>;
+export default HistoryEmptyState;

package/dist/esm/ChatbotConversationHistoryNav/EmptyState.js

@@ -0,0 +1,22 @@
+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;
+};
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import React from 'react';
+export const HistoryEmptyState = (_a) => {
+    var { bodyText, buttonIcon, buttonText, status, titleText, headingLevel, onClick, hasButton = false } = _a, props = __rest(_a, ["bodyText", "buttonIcon", "buttonText", "status", "titleText", "headingLevel", "onClick", "hasButton"]);
+    return (React.createElement(EmptyState, Object.assign({ status: status, titleText: titleText, headingLevel: headingLevel }, props),
+        React.createElement(EmptyStateBody, null, bodyText),
+        hasButton && (React.createElement(EmptyStateFooter, null,
+            React.createElement(EmptyStateActions, null,
+                React.createElement(Button, { icon: buttonIcon, variant: "secondary", onClick: onClick }, buttonText))))));
+};
+export default HistoryEmptyState;

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

@@ -0,0 +1,4 @@
+import { SkeletonProps } from '@patternfly/react-core';
+import React from 'react';
+export declare const LoadingState: React.FunctionComponent<SkeletonProps>;
+export default LoadingState;

package/dist/esm/ChatbotConversationHistoryNav/LoadingState.js

@@ -0,0 +1,38 @@
+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;
+};
+import { Skeleton } from '@patternfly/react-core';
+import React from 'react';
+export const LoadingState = (_a) => {
+    var { screenreaderText } = _a, rest = __rest(_a, ["screenreaderText"]);
+    return (React.createElement("div", { className: "pf-chatbot__history-loading" },
+        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            React.createElement(Skeleton, Object.assign({ screenreaderText: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : 'Loading chatbot conversation history', fontSize: "3xl" }, rest))),
+        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)))));
+};
+export default LoadingState;

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/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/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-unwrap-images.tsx"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-unwrap-images.tsx"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.26",
+  "version": "2.2.0-prerelease.28",
   "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',

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

@@ -31,7 +31,7 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Welcome back! How can I help?"
+      content="Welcome back, User! How can I help you today?"
       quickResponses={[
         { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
         { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },

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

@@ -11,7 +11,7 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Text-based bot message with a quick start tile."
+      content="Follow this quick guide to install the Pipelines Operator."
       quickStarts={{
         quickStart: explorePipelinesQuickStart as QuickStart,
         onSelectQuickStart: (id) => alert(id)
@@ -21,7 +21,7 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Text-based bot message with a quick start tile that includes prerequisites and a default icon."
+      content="This quick start tile includes prerequisites and a default icon."
       quickStarts={{
         quickStart: monitorSampleAppQuickStart,
         onSelectQuickStart: (id) => alert(id)

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

@@ -8,7 +8,7 @@ export const ResponseActionExample: React.FunctionComponent = () => (
     name="Bot"
     role="bot"
     avatar={patternflyAvatar}
-    content="Example with all prebuilt actions"
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       // eslint-disable-next-line no-console
       positive: { onClick: () => console.log('Good response') },

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

@@ -61,7 +61,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only one source"
+        content="Example with only 1 source"
         sources={{
           sources: [
             {

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

@@ -145,14 +145,14 @@ _Italic text, formatted with single underscores_
       <Message
         name="User"
         role="user"
-        content="Example content with updated timestamp text"
+        content="This is a user message with an updated timestamp."
         timestamp="1 hour ago"
         avatar={userAvatar}
       />
       <Message
         name="User"
         role="user"
-        content="Example user message with `avatarProps` set to add a border"
+        content="This is a user message with `avatarProps` set to add a border."
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx

@@ -5,20 +5,20 @@ export const FootnoteDemo: React.FunctionComponent = () => (
   <ChatbotFootnote
     label="ChatBot uses AI. Check for mistakes."
     popover={{
-      title: 'Verify accuracy',
-      description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+      title: 'Verify information',
+      description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
       bannerImage: {
         src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
         alt: 'Example image for footnote popover'
       },
       cta: {
-        label: 'Got it',
+        label: 'Dismiss',
         onClick: () => {
           alert('Do something!');
         }
       },
       link: {
-        label: 'Learn more',
+        label: 'View AI policy',
         url: 'https://www.redhat.com/'
       }
     }}