@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.2

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

@@ -76,6 +76,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     loadingState?: SkeletonProps;
     /** Content to show in error state. Error state will appear once content is passed in. */
     errorState?: HistoryEmptyStateProps;
+    /** Content to show in empty state. Empty state will appear once content is passed in. */
+    emptyState?: HistoryEmptyStateProps;
+    /** Content to show in no results state. No results state will appear once content is passed in. */
+    noResultsState?: HistoryEmptyStateProps;
 }
 export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

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 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"]);
+    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, emptyState, noResultsState } = _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", "emptyState", "noResultsState"]);
     const drawerRef = react_1.default.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -58,6 +58,12 @@ const ChatbotConversationHistoryNav = (_a) => {
         if (errorState) {
             return react_1.default.createElement(EmptyState_1.default, Object.assign({}, errorState));
         }
+        if (emptyState) {
+            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, emptyState));
+        }
+        if (noResultsState) {
+            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, noResultsState));
+        }
         return (react_1.default.createElement(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
             react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
     };

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

@@ -18,6 +18,7 @@ const react_2 = require("@testing-library/react");
 const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryNav_1 = __importDefault(require("./ChatbotConversationHistoryNav"));
 const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const ERROR = {
     bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -31,6 +32,16 @@ const ERROR = {
     status: react_core_1.EmptyStateStatus.danger,
     onClick: () => alert('Clicked Reload')
 };
+const NO_RESULTS = {
+    bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
+    titleText: 'No results found',
+    icon: react_icons_1.SearchIcon
+};
+const EMPTY_STATE = {
+    bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+    titleText: 'Start a new chat',
+    icon: react_icons_1.OutlinedCommentsIcon
+};
 const ERROR_WITHOUT_BUTTON = {
     bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -162,4 +173,16 @@ describe('ChatbotConversationHistoryNav', () => {
         (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
         expect(react_2.screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
     });
+    it('should accept emptyState', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, emptyState: EMPTY_STATE }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+        })).toBeTruthy();
+    });
+    it('should accept no results state', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+        })).toBeTruthy();
+    });
 });

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { AlertProps, AvatarProps, LabelGroupProps } from '@patternfly/react-core';
+import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -104,6 +104,22 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     openLinkInNewTab?: boolean;
     /** Optional inline error message that can be displayed in the message */
     error?: AlertProps;
+    /** Props for links */
+    linkProps?: ButtonProps;
+    /** Whether message is in edit mode */
+    isEditable?: boolean;
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Props for edit form */
+    editFormProps?: FormProps;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -47,8 +47,13 @@ const rehype_external_links_1 = __importDefault(require("rehype-external-links")
 const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
 const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
+const MessageInput_1 = __importDefault(require("./MessageInput"));
 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, openLinkInNewTab = true, additionalRehypePlugins = [], error } = _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", "openLinkInNewTab", "additionalRehypePlugins", "error"]);
+    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, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps } = _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", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps"]);
+    const [messageText, setMessageText] = react_1.default.useState(content);
+    react_1.default.useEffect(() => {
+        setMessageText(content);
+    }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let rehypePlugins = [rehype_unwrap_images_1.default];
     if (openLinkInNewTab) {
@@ -66,6 +71,51 @@ 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 renderMessage = () => {
+        if (isLoading) {
+            return react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord });
+        }
+        if (isEditable) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
+                react_1.default.createElement(MessageInput_1.default, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
+                        onEditUpdate && onEditUpdate(event);
+                        setMessageText(text);
+                    }, onEditCancel: onEditCancel }, editFormProps))));
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
+            error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
+                    p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
+                    code: (_a) => {
+                        var { children } = _a, props = __rest(_a, ["children"]);
+                        return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
+                    },
+                    h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
+                    h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
+                    h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
+                    h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
+                    h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
+                    h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
+                    blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
+                    ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
+                    ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
+                    li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
+                    table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                    tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
+                    thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
+                    tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
+                    td: (props) => {
+                        // Conflicts with Td type
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { width } = props, rest = __rest(props, ["width"]);
+                        return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
+                    },
+                    th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
+                    img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
+                    a: (props) => (react_1.default.createElement(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
+                }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, messageText))));
+    };
     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" },
@@ -76,39 +126,8 @@ const MessageBase = (_a) => {
                 react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
             react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
                 react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
-                        error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
-                                p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
-                                code: (_a) => {
-                                    var { children } = _a, props = __rest(_a, ["children"]);
-                                    return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
-                                },
-                                h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
-                                h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
-                                h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
-                                h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
-                                h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
-                                h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
-                                blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
-                                ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
-                                ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
-                                li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
-                                table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
-                                tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
-                                thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
-                                tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
-                                td: (props) => {
-                                    // Conflicts with Td type
-                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                    const { width } = props, rest = __rest(props, ["width"]);
-                                    return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
-                                },
-                                th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
-                                img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
-                                a: (props) => (react_1.default.createElement(LinkMessage_1.default, { href: props.href, rel: props.rel, target: props.target }, props.children))
-                            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, content)),
-                        afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
+                    renderMessage(),
+                    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 })),
                     !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),

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

@@ -602,6 +602,12 @@ describe('Message', () => {
         // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
         expect(rehype_external_links_1.default).not.toHaveBeenCalled();
     });
+    it('should handle extra link props correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('link', { name: /PatternFly/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
     it('should handle error correctly', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR }));
         expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
@@ -619,4 +625,50 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
         expect(react_2.screen.queryByText('Test')).toBeFalsy();
     });
+    it('should handle isEditable when there is message content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
+        expect(react_2.screen.getByRole('textbox')).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('Test');
+        expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should handle isEditable when there is no message content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true }));
+        expect(react_2.screen.getByRole('textbox')).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('');
+        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
+        expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should be able to change edit placeholder', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
+        expect(react_2.screen.getByRole('textbox')).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('');
+        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
+    });
+    it('should be able to change updateWord', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
+        expect(react_2.screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    });
+    it('should be able to change cancelWord', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
+        expect(react_2.screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+    });
+    it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Update/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Cancel/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add  editFormProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
+        const form = container.querySelector('form');
+        expect(form).toHaveClass('test');
+    });
 });

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormProps } from '@patternfly/react-core';
+export interface MessageInputProps extends FormProps {
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Message text */
+    content?: string;
+}
+declare const MessageInput: React.FunctionComponent<MessageInputProps>;
+export default MessageInput;

package/dist/cjs/Message/MessageInput.js

@@ -0,0 +1,34 @@
+"use strict";
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const MessageInput = (_a) => {
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
+    const [messageText, setMessageText] = react_1.default.useState(content !== null && content !== void 0 ? content : '');
+    const onChange = (event, value) => {
+        setMessageText(value);
+    };
+    return (react_1.default.createElement(react_core_1.Form, Object.assign({}, props),
+        react_1.default.createElement(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
+        react_1.default.createElement(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
+            react_1.default.createElement(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
+            react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
+};
+exports.default = MessageInput;

package/dist/cjs/MessageBar/MessageBar.d.ts

@@ -28,10 +28,14 @@ export interface MessageBarProps extends TextAreaProps {
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
     alwayShowSendButton?: boolean;
+    /** Placeholder for message input */
+    placeholder?: string;
     /** Flag to disable/enable the Attach button  */
     hasAttachButton?: boolean;
     /** Flag to enable the Microphone button  */
     hasMicrophoneButton?: boolean;
+    /** Placeholder text when listening */
+    listeningText?: string;
     /** Flag to enable the Stop button, used for streaming content */
     hasStopButton?: boolean;
     /** Callback function for when stop button is clicked */

package/dist/cjs/MessageBar/MessageBar.js

@@ -24,7 +24,7 @@ const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
@@ -186,7 +186,7 @@ const MessageBar = (_a) => {
     };
     const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

package/dist/cjs/MessageBar/MessageBar.test.js

@@ -76,6 +76,12 @@ describe('Message bar', () => {
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
+    it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_2.screen.getByRole('textbox', { name: /test placeholder/i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -229,6 +235,13 @@ describe('Message bar', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        const input = react_2.screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).toBeTruthy();
+    }));
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -64,7 +64,7 @@ const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }

package/dist/cjs/MessageBox/MessageBox.js

@@ -29,26 +29,26 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
         const element = messageBoxRef.current;
@@ -62,7 +62,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
         react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -5,7 +5,7 @@ export interface SourcesCardProps extends CardProps {
     className?: string;
     /** Flag indicating if the pagination is disabled. */
     isDisabled?: boolean;
-    /** Label for the English word "of". */
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
     ofWord?: string;
     /** Accessible label for the pagination component. */
     paginationAriaLabel?: string;
@@ -14,6 +14,8 @@ export interface SourcesCardProps extends CardProps {
         title?: string;
         link: string;
         body?: React.ReactNode | string;
+        isExternal?: boolean;
+        hasShowMore?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -29,6 +31,10 @@ export interface SourcesCardProps extends CardProps {
     onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
     /** Function called when page is changed. */
     onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Label for English words "show more" */
+    showMoreWords?: string;
+    /** Label for English words "show less" */
+    showLessWords?: string;
 }
 declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -20,9 +20,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const SourcesCard = (_a) => {
-    var { className, isDisabled, ofWord = 'of', paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage } = _a, props = __rest(_a, ["className", "isDisabled", "ofWord", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
     const [page, setPage] = react_1.default.useState(1);
+    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     const handleNewPage = (_evt, newPage) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
@@ -37,8 +42,11 @@ const SourcesCard = (_a) => {
         react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
         react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
             react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
-                react_1.default.createElement("a", { href: sources[page - 1].link }, renderTitle(sources[page - 1].title))),
-            sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}` }, sources[page - 1].body)),
+                react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
+            sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
+            // prevents extra VO announcements of button text - parent Message has aria-live
+            react_1.default.createElement("div", { "aria-live": "off" },
+                react_1.default.createElement(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (react_1.default.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
             sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
                 react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },
                     react_1.default.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
@@ -50,6 +58,10 @@ const SourcesCard = (_a) => {
                             react_1.default.createElement(react_core_1.Icon, { iconSize: "lg" },
                                 react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
                                     react_1.default.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
+                        react_1.default.createElement("span", { "aria-hidden": "true" },
+                            page,
+                            "/",
+                            sources.length),
                         react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
                                 const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                 onNextClick && onNextClick(event, newPage);
@@ -57,12 +69,6 @@ const SourcesCard = (_a) => {
                             } },
                             react_1.default.createElement(react_core_1.Icon, { isInline: true, iconSize: "lg" },
                                 react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
-                                    react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }))))),
-                    react_1.default.createElement("span", { "aria-hidden": "true" },
-                        page,
-                        " ",
-                        ofWord,
-                        " ",
-                        sources.length)))))));
+                                    react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))))))));
 };
 exports.default = SourcesCard;