@patternfly/chatbot 6.3.1 → 6.4.0-prerelease.10

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

@@ -26,6 +26,7 @@ const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
     { label: /Copy/i },
+    { label: /Edit/i },
     { label: /Share/i },
     { label: /Listen/i }
 ];
@@ -346,6 +347,8 @@ describe('Message', () => {
                 // eslint-disable-next-line no-console
                 copy: { onClick: () => console.log('Copy') },
                 // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
                 share: { onClick: () => console.log('Share') },
                 // eslint-disable-next-line no-console
                 download: { onClick: () => console.log('Download') },
@@ -365,6 +368,8 @@ describe('Message', () => {
                 // eslint-disable-next-line no-console
                 copy: { onClick: () => console.log('Copy') },
                 // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
                 share: { onClick: () => console.log('Share') },
                 // eslint-disable-next-line no-console
                 download: { onClick: () => console.log('Download') },
@@ -376,6 +381,27 @@ describe('Message', () => {
             expect(react_2.screen.queryByRole('button', { name: label })).toBeFalsy();
         });
     }));
+    it('should not show actions if isEditable is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isEditable: true, actions: {
+                // eslint-disable-next-line no-console
+                positive: { onClick: () => console.log('Good response') },
+                // eslint-disable-next-line no-console
+                negative: { onClick: () => console.log('Bad response') },
+                // eslint-disable-next-line no-console
+                copy: { onClick: () => console.log('Copy') },
+                // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
+                share: { onClick: () => console.log('Share') },
+                // eslint-disable-next-line no-console
+                download: { onClick: () => console.log('Download') },
+                // eslint-disable-next-line no-console
+                listen: { onClick: () => console.log('Listen') }
+            } }));
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(react_2.screen.queryByRole('button', { name: label })).toBeFalsy();
+        });
+    }));
     it('should render unordered lists correctly', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
         expect(react_2.screen.getByText('Here is an unordered list:')).toBeTruthy();
@@ -713,4 +739,15 @@ describe('Message', () => {
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });
+    it('should be able to disable markdown parsing', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // this is looking for markdown syntax that is ordinarily stripped
+        expect(react_2.screen.getByText(/~~~yaml/i)).toBeTruthy();
+    });
+    it('should be able to pass props to react-markdown, such as disabling tags', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(react_2.screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    });
 });

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

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent, Ref } from 'react';
 import { FormProps } from '@patternfly/react-core';
 export interface MessageInputProps extends FormProps {
     /** Placeholder for edit input */
@@ -11,6 +11,8 @@ export interface MessageInputProps extends FormProps {
     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;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
     /** Message text */
     content?: string;
 }

package/dist/cjs/Message/MessageInput.js

@@ -15,11 +15,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = 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"]);
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "content"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content !== null && content !== void 0 ? content : '');
     const onChange = (_event, value) => {
         setMessageText(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }), (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true, ref: inputRef }), (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
 };
 exports.default = MessageInput;

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

@@ -1,5 +1,5 @@
-import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from 'react';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
-import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */

package/dist/cjs/MessageBar/MessageBar.js

@@ -32,6 +32,7 @@ const MessageBarBase = (_a) => {
     const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
     const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const [isComposing, setIsComposing] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = (0, react_1.useRef)(null);
@@ -157,18 +158,32 @@ const MessageBarBase = (_a) => {
         setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
                 handleSend(message);
             }
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
             if (textareaRef.current) {
                 handleNewLine(textareaRef.current);
             }
         }
-    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = (0, react_1.useCallback)(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = (0, react_1.useCallback)(() => {
+        setIsComposing(false);
+    }, []);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -184,7 +199,7 @@ const MessageBarBase = (_a) => {
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachMenuProps && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(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)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(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, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
         return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;

package/dist/cjs/MessageBox/JumpButton.d.ts

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'react';
+import { TooltipProps, ButtonProps } from '@patternfly/react-core';
 export interface JumpButtonProps {
     /** Position of the Jump Button(top/bottom) */
     position: 'top' | 'bottom';
@@ -6,6 +7,10 @@ export interface JumpButtonProps {
     onClick: () => void;
     /** Flag to change the visibilty of the button */
     isHidden?: boolean;
+    /** Additional props passed to jump buttons */
+    jumpButtonProps?: ButtonProps;
+    /** Additional props passed to tooltip */
+    jumpButtonTooltipProps?: TooltipProps;
 }
 declare const JumpButton: FunctionComponent<JumpButtonProps>;
 export default JumpButton;

package/dist/cjs/MessageBox/JumpButton.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const arrow_up_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-up-icon");
 const arrow_down_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-down-icon");
-const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position}`, onClick: onClick, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? (0, jsx_runtime_1.jsx)(arrow_up_icon_1.ArrowUpIcon, {}) : (0, jsx_runtime_1.jsx)(arrow_down_icon_1.ArrowDownIcon, {}) }) }) }));
+const JumpButton = ({ position, isHidden, onClick, jumpButtonProps, jumpButtonTooltipProps }) => isHidden ? null : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top" }, jumpButtonTooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Back to ${position}`, onClick: onClick }, jumpButtonProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? (0, jsx_runtime_1.jsx)(arrow_up_icon_1.ArrowUpIcon, {}) : (0, jsx_runtime_1.jsx)(arrow_down_icon_1.ArrowDownIcon, {}) }) })) })));
 exports.default = JumpButton;

package/dist/cjs/MessageBox/JumpButton.test.js

@@ -20,20 +20,20 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('JumpButton', () => {
     it('should render top button correctly', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", onClick: jest.fn() }));
-        expect(react_1.screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
     });
     it('should render bottom button correctly', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn() }));
-        expect(react_1.screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
     });
     it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: spy }));
-        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Jump bottom/i }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Back to bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn(), isHidden: true }));
-        expect(react_1.screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
     }));
 });

package/dist/cjs/MessageBox/MessageBox.d.ts

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     /** Content that can be announced, such as a new message, for screen readers */
     announcement?: string;
@@ -18,6 +19,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     onScrollToBottomClick?: () => void;
     /** Flag to enable automatic scrolling when new messages are added */
     enableSmartScroll?: boolean;
+    /** Props passed to top jump button */
+    jumpButtonTopProps?: ButtonProps;
+    /** Props passed to bottom jump button */
+    jumpButtonBottomProps?: ButtonProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonTopTooltipProps?: TooltipProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonBottomTooltipProps?: TooltipProps;
 }
 export interface MessageBoxHandle extends HTMLDivElement {
     /** Scrolls to the top of the message box */

package/dist/cjs/MessageBox/MessageBox.js

@@ -22,7 +22,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
 exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll"]);
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
     const [atTop, setAtTop] = (0, react_1.useState)(false);
     const [atBottom, setAtBottom] = (0, react_1.useState)(true);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
@@ -206,6 +206,6 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
 });
 exports.default = exports.MessageBox;

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -56,7 +56,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield (0, react_2.waitFor)(() => {
-            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom/i }));
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Back to bottom/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));
@@ -75,7 +75,7 @@ describe('MessageBox', () => {
             region.dispatchEvent(new Event('scroll'));
         });
         yield (0, react_2.waitFor)(() => {
-            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump top/i }));
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Back to top/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));

package/dist/cjs/MessageDivider/MessageDivider.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+export interface MessageDividerProps {
+    /** Variant of the divider */
+    variant?: 'inset' | 'fullWidth';
+    /** Content of the message divider */
+    content?: string;
+}
+declare const MessageDivider: FunctionComponent<MessageDividerProps>;
+export default MessageDivider;

package/dist/cjs/MessageDivider/MessageDivider.js

@@ -0,0 +1,23 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const MessageDivider = (_a) => {
+    var { variant = 'inset', content = new Date().toLocaleDateString() } = _a, props = __rest(_a, ["variant", "content"]);
+    if (variant === 'inset') {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-divider pf-m-wrap" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", children: content })] })));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-wrap" }, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, { children: content }) })));
+};
+exports.default = MessageDivider;

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

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

package/dist/cjs/MessageDivider/MessageDivider.test.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const MessageDivider_1 = __importDefault(require("./MessageDivider"));
+describe('MessageDivider', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageDivider_1.default, { "data-testid": "message-divider" }));
+        expect(react_1.screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+    });
+    it('should render inset variant correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageDivider_1.default, { variant: "inset", content: "test", "data-testid": "message-divider" }));
+        expect(react_1.screen.getByText('test')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+    });
+    it('should render fullWidth variant correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageDivider_1.default, { variant: "fullWidth", content: "test", "data-testid": "message-divider" }));
+        expect(react_1.screen.getByText('test')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+    });
+});

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

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

package/dist/cjs/MessageDivider/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var MessageDivider_1 = require("./MessageDivider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MessageDivider_1).default; } });
+__exportStar(require("./MessageDivider"), exports);

package/dist/cjs/ResponseActions/ResponseActions.d.ts

@@ -38,6 +38,7 @@ export interface ResponseActionProps {
         share?: ActionProps;
         download?: ActionProps;
         listen?: ActionProps;
+        edit?: ActionProps;
     };
 }
 export declare const ResponseActions: FunctionComponent<ResponseActionProps>;

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -21,12 +21,12 @@ const react_2 = require("react");
 const react_icons_1 = require("@patternfly/react-icons");
 const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
 const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
     const [activeButton, setActiveButton] = (0, react_2.useState)();
     const [clickStatePersisted, setClickStatePersisted] = (0, react_2.useState)(false);
     (0, react_2.useEffect)(() => {
         // Define the order of precedence for checking initial `isClicked`
-        const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+        const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
         let initialActive;
         // Check predefined actions first based on precedence
         for (const actionName of actionPrecedence) {
@@ -47,7 +47,7 @@ const ResponseActions = ({ actions }) => {
         }
         setActiveButton(initialActive);
     }, [actions]);
-    const { positive, negative, copy, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "download", "listen"]);
+    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
     const responseActions = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
         const handleClickOutside = (e) => {
@@ -65,7 +65,7 @@ const ResponseActions = ({ actions }) => {
         setActiveButton(id);
         onClick && onClick(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, positive, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsUpIcon, {}), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, negative, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsDownIcon, {}), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, copy, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, download, { ariaLabel: (_s = download.ariaLabel) !== null && _s !== void 0 ? _s : 'Download', clickedAriaLabel: (_t = download.ariaLabel) !== null && _t !== void 0 ? _t : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_u = download.tooltipContent) !== null && _u !== void 0 ? _u : 'Download', clickedTooltipContent: (_v = download.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Downloaded', tooltipProps: download.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, listen, { ariaLabel: (_w = listen.ariaLabel) !== null && _w !== void 0 ? _w : 'Listen', clickedAriaLabel: (_x = listen.ariaLabel) !== null && _x !== void 0 ? _x : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_y = listen.tooltipContent) !== null && _y !== void 0 ? _y : 'Listen', clickedTooltipContent: (_z = listen.clickedTooltipContent) !== null && _z !== void 0 ? _z : 'Listening', tooltipProps: listen.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, positive, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsUpIcon, {}), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, negative, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsDownIcon, {}), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, copy, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, edit, { ariaLabel: (_o = edit.ariaLabel) !== null && _o !== void 0 ? _o : 'Edit', clickedAriaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_q = edit.tooltipContent) !== null && _q !== void 0 ? _q : 'Edit ', clickedTooltipContent: (_r = edit.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Editing', tooltipProps: edit.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_s = share.ariaLabel) !== null && _s !== void 0 ? _s : 'Share', clickedAriaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_u = share.tooltipContent) !== null && _u !== void 0 ? _u : 'Share', clickedTooltipContent: (_v = share.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Shared', tooltipProps: share.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, download, { ariaLabel: (_w = download.ariaLabel) !== null && _w !== void 0 ? _w : 'Download', clickedAriaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_y = download.tooltipContent) !== null && _y !== void 0 ? _y : 'Download', clickedTooltipContent: (_z = download.clickedTooltipContent) !== null && _z !== void 0 ? _z : 'Downloaded', tooltipProps: download.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, listen, { ariaLabel: (_0 = listen.ariaLabel) !== null && _0 !== void 0 ? _0 : 'Listen', clickedAriaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_2 = listen.tooltipContent) !== null && _2 !== void 0 ? _2 : 'Listen', clickedTooltipContent: (_3 = listen.clickedTooltipContent) !== null && _3 !== void 0 ? _3 : 'Listening', tooltipProps: listen.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                 return ((0, react_1.createElement)(ResponseActionButton_1.default, Object.assign({}, additionalActions[action], { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] })));
             })] }));

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

@@ -23,6 +23,7 @@ const ALL_ACTIONS = [
     { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
     { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
     { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
     { type: 'share', label: 'Share', clickedLabel: 'Shared' },
     { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
@@ -56,6 +57,7 @@ const ALL_ACTIONS_DATA_TEST = [
     { type: 'positive', label: 'Good response', dataTestId: 'positive' },
     { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
     { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+    { type: 'edit', label: 'Edit', dataTestId: 'edit' },
     { type: 'share', label: 'Share', dataTestId: 'share' },
     { type: 'download', label: 'Download', dataTestId: 'download' },
     { type: 'listen', label: 'Listen', dataTestId: 'listen' }
@@ -69,6 +71,7 @@ describe('ResponseActions', () => {
                 positive: { onClick: jest.fn() },
                 negative: { onClick: jest.fn() },
                 copy: { onClick: jest.fn() },
+                edit: { onClick: jest.fn() },
                 share: { onClick: jest.fn() },
                 download: { onClick: jest.fn() },
                 listen: { onClick: jest.fn() }
@@ -76,10 +79,11 @@ describe('ResponseActions', () => {
         const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
         const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
         const copyBtn = react_1.screen.getByRole('button', { name: 'Copy' });
+        const editBtn = react_1.screen.getByRole('button', { name: 'Edit' });
         const shareBtn = react_1.screen.getByRole('button', { name: 'Share' });
         const downloadBtn = react_1.screen.getByRole('button', { name: 'Download' });
         const listenBtn = react_1.screen.getByRole('button', { name: 'Listen' });
-        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, downloadBtn, listenBtn];
+        const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
         buttons.forEach((button) => {
             expect(button).toBeTruthy();
         });
@@ -211,6 +215,7 @@ describe('ResponseActions', () => {
             { type: 'positive', ariaLabel: 'Thumbs up' },
             { type: 'negative', ariaLabel: 'Thumbs down' },
             { type: 'copy', ariaLabel: 'Copy the message' },
+            { type: 'edit', ariaLabel: 'Edit this message' },
             { type: 'share', ariaLabel: 'Share it with friends' },
             { type: 'download', ariaLabel: 'Download your cool message' },
             { type: 'listen', ariaLabel: 'Listen up' }

package/dist/cjs/index.d.ts

@@ -40,6 +40,8 @@ export { default as MessageBar } from './MessageBar';
 export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tracking = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
+exports.tracking = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
 var AttachmentEdit_1 = require("./AttachmentEdit");
 Object.defineProperty(exports, "AttachmentEdit", { enumerable: true, get: function () { return __importDefault(AttachmentEdit_1).default; } });
 __exportStar(require("./AttachmentEdit"), exports);
@@ -82,6 +82,9 @@ __exportStar(require("./MessageBar"), exports);
 var MessageBox_1 = require("./MessageBox");
 Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return __importDefault(MessageBox_1).default; } });
 __exportStar(require("./MessageBox"), exports);
+var MessageDivider_1 = require("./MessageDivider");
+Object.defineProperty(exports, "MessageDivider", { enumerable: true, get: function () { return __importDefault(MessageDivider_1).default; } });
+__exportStar(require("./MessageDivider"), exports);
 var PreviewAttachment_1 = require("./PreviewAttachment");
 Object.defineProperty(exports, "PreviewAttachment", { enumerable: true, get: function () { return __importDefault(PreviewAttachment_1).default; } });
 __exportStar(require("./PreviewAttachment"), exports);