@patternfly/chatbot 6.5.0-prerelease.2 → 6.5.0-prerelease.21

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

@@ -1,4 +1,5 @@
-declare const MessageLoading: ({ loadingWord }: {
+declare const MessageLoading: ({ loadingWord, isPrimary }: {
     loadingWord: any;
+    isPrimary: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MessageLoading;

package/dist/cjs/Message/MessageLoading.js

@@ -4,5 +4,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 // Chatbot Main - Message - Processing
 // ============================================================================
-const MessageLoading = ({ loadingWord }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-loading", children: (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-loading-dots", children: (0, jsx_runtime_1.jsx)("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
+const MessageLoading = ({ loadingWord, isPrimary }) => ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`, children: (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-loading-dots", children: (0, jsx_runtime_1.jsx)("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
 exports.default = MessageLoading;

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

@@ -15,5 +15,8 @@ export interface TableNode {
     tagName: string;
     type: string;
 }
-declare const TableMessage: ({ children, ...props }: Omit<TableProps, "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export interface TableMessageProps {
+    isPrimary?: boolean;
+}
+declare const TableMessage: ({ children, isPrimary, ...props }: Omit<TableProps, "ref"> & ExtraProps & TableMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableMessage;

package/dist/cjs/Message/TableMessage/TableMessage.js

@@ -19,7 +19,7 @@ const react_1 = require("react");
 const react_table_1 = require("@patternfly/react-table");
 const TableMessage = (_a) => {
     var _b;
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children, isPrimary } = _a, props = __rest(_a, ["children", "isPrimary"]);
     const { className } = props, rest = __rest(props, ["className"]);
     // This allows us to parse the nested data we get back from the 3rd party Markdown parser
     // Open to feedback here if there is a better way to do this
@@ -60,6 +60,6 @@ const TableMessage = (_a) => {
     }
     return (
     // gridBreakPoint is so we show mobile-styled-PF table
-    (0, jsx_runtime_1.jsx)(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${className ? className : ''}` }, rest, { children: modifyChildren(children) })));
+    (0, jsx_runtime_1.jsx)(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}` }, rest, { children: modifyChildren(children) })));
 };
 exports.default = TableMessage;

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

@@ -1,4 +1,7 @@
 import { ExtraProps } from 'react-markdown';
 import { ContentProps } from '@patternfly/react-core';
-declare const TextMessage: ({ component, children, ...props }: Omit<ContentProps, "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export interface TextMessageProps {
+    isPrimary?: boolean;
+}
+declare const TextMessage: ({ component, children, isPrimary, ...props }: Omit<ContentProps, "ref"> & ExtraProps & TextMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TextMessage;

package/dist/cjs/Message/TextMessage/TextMessage.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const TextMessage = (_a) => {
-    var { component, children } = _a, props = __rest(_a, ["component", "children"]);
-    return ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-text", children: (0, jsx_runtime_1.jsx)(react_core_1.Content, Object.assign({ component: component }, props, { children: children })) }));
+    var { component, children, isPrimary } = _a, props = __rest(_a, ["component", "children", "isPrimary"]);
+    return ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Content, Object.assign({ component: component }, props, { children: children })) }));
 };
 exports.default = TextMessage;

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

@@ -41,5 +41,7 @@ export interface AttachButtonProps extends ButtonProps {
     validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
     /** Additional props passed to react-dropzone */
     dropzoneProps?: DropzoneOptions;
+    /** Icon displayed in attach button */
+    icon?: React.ReactNode;
 }
 export declare const AttachButton: import("react").ForwardRefExoticComponent<AttachButtonProps & import("react").RefAttributes<any>>;

package/dist/cjs/MessageBar/AttachButton.js

@@ -19,12 +19,12 @@ const react_core_1 = require("@patternfly/react-core");
 const react_dropzone_1 = require("react-dropzone");
 const paperclip_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paperclip-icon");
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps"]);
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, icon = (0, jsx_runtime_1.jsx)(paperclip_icon_1.PaperclipIcon, {}) } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "icon"]);
     const { open, getInputProps } = (0, react_dropzone_1.useDropzone)(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
         maxSize,
         maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
                 // prevents VO announcements of both aria label and tooltip
-                aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(paperclip_icon_1.PaperclipIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
+                aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: icon }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
 };
 exports.AttachButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

@@ -145,4 +145,8 @@ describe('Attach button', () => {
         expect(validator).toHaveBeenCalledWith(file);
         expect(onAttachRejected).toHaveBeenCalled();
     }));
+    it('should handle icon prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { icon: (0, jsx_runtime_1.jsx)("img", { alt: "", src: "" }) }));
+        expect(react_1.screen.getByRole('img')).toBeVisible();
+    });
 });

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

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
-import { ButtonProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { ButtonProps, MenuSearchInputProps, MenuSearchProps, SearchInputProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { AttachButtonProps } from './AttachButton';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
@@ -12,7 +13,7 @@ export interface MessageBarWithAttachMenuProps {
     /** A callback for when the attachment menu toggle is clicked */
     onAttachMenuToggleClick: () => void;
     /** A callback for when the input value in the menu changes. */
-    onAttachMenuInputChange: (value: string) => void;
+    onAttachMenuInputChange?: (value: string) => void;
     /** Function callback called when user selects item in menu. */
     onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
     /** Placeholder for search input */
@@ -21,6 +22,12 @@ export interface MessageBarWithAttachMenuProps {
     onAttachMenuOnOpenChangeKeys?: string[];
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
+    /** Additional props passed to MenuSearch component in attach menu */
+    menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+    /** Additional props passed to MenuSearchInput component in attach menu */
+    menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+    /** Additional props passed to SearchInput component in attach menu */
+    searchInputProps?: SearchInputProps;
 }
 export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     /** Callback to get the value of input message by user */
@@ -71,11 +78,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     isSendButtonDisabled?: boolean;
     /** Prop to allow passage of additional props to buttons */
     buttonProps?: {
-        attach?: {
-            tooltipContent?: string;
+        attach?: AttachButtonProps & {
             props?: ButtonProps;
-            inputTestId?: string;
-            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         stop?: {
             tooltipContent?: string;
@@ -105,6 +109,12 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     isCompact?: boolean;
     /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
     innerRef?: React.Ref<HTMLTextAreaElement>;
+    /** Sets background color to primary */
+    isPrimary?: boolean;
+    /** @beta Flag indicating whether the message bar has an AI indicator border. */
+    hasAiIndicator?: boolean;
+    /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+    isThinking?: boolean;
 }
 export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
 declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/MessageBar/MessageBar.js

@@ -18,6 +18,7 @@ exports.MessageBar = exports.MessageBarBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
 // Import Chatbot components
 const SendButton_1 = __importDefault(require("./SendButton"));
 const MicrophoneButton_1 = __importDefault(require("./MicrophoneButton"));
@@ -26,7 +27,7 @@ const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 const MessageBarBase = (_a) => {
     var _b;
-    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "hasAiIndicator", "isThinking"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
@@ -193,11 +194,11 @@ const MessageBarBase = (_a) => {
         onChange && onChange({}, message);
     };
     const renderButtons = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         if (hasStopButton && handleStopButton) {
             return ((0, jsx_runtime_1.jsx)(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
         }
-        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)))] }));
+        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 }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipContent, inputTestId: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.inputTestId, isCompact: isCompact, tooltipProps: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.tooltipContent, language: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.language, isCompact: isCompact, tooltipProps: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.tooltipProps }, (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _p === void 0 ? void 0 : _p.tooltipContent, isCompact: isCompact, tooltipProps: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipProps }, (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.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, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
@@ -206,9 +207,9 @@ const MessageBarBase = (_a) => {
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
-            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
+            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder }, attachMenuProps)));
     }
-    return (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', hasAiIndicator && 'pf-v6-m-ai-indicator', isThinking && 'pf-v6-m-thinking', className), children: messageBarContents }));
 };
 exports.MessageBarBase = MessageBarBase;
 const MessageBar = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBarBase, Object.assign({ innerRef: ref }, props))));

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

@@ -159,6 +159,48 @@ describe('Message bar', () => {
         yield user_event_1.default.click(attachButton);
         expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
     }));
+    it('can pass searchInputProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                searchInputProps: { isDisabled: true }
+            } }));
+        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
+    });
+    it('can pass menuSearchProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchProps: { 'data-testid': 'menu-search' }
+            } }));
+        expect(react_1.screen.getByTestId('menu-search')).toBeTruthy();
+    });
+    it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchInputProps: { 'data-testid': 'menu-search-input' }
+            } }));
+        expect(react_1.screen.getByTestId('menu-search-input')).toBeTruthy();
+    });
+    it('can remove input from attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_1.screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
+    }));
     it('can hide attach button', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
         expect(react_1.screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -190,6 +232,14 @@ describe('Message bar', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
         yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
     }));
+    it('can change attach button icon', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: {
+                attach: {
+                    icon: (0, jsx_runtime_1.jsx)("img", { alt: "", src: "" })
+                }
+            } }));
+        expect(react_1.screen.getByRole('img')).toBeVisible();
+    });
     // Stop button
     // --------------------------------------------------------------------------
     it('can show stop button', () => {
@@ -269,4 +319,16 @@ describe('Message bar', () => {
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         expect(document.activeElement).toBe(react_1.screen.getByRole('textbox'));
     });
+    it('should handle isPrimary', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { isPrimary: true, onSendMessage: jest.fn }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAiIndicator: true }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
+    });
+    it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isThinking: true }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
+    });
 });

package/dist/cjs/Onboarding/Onboarding.d.ts

@@ -0,0 +1,36 @@
+import type { FunctionComponent } from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface OnboardingProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn?: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Optional image displayed in header */
+    headerImage?: string;
+    /** Alt text for optional image displayed in header */
+    headerImageAltText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+}
+export declare const OnboardingBase: FunctionComponent<OnboardingProps>;
+declare const Onboarding: import("react").ForwardRefExoticComponent<Omit<OnboardingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Onboarding;

package/dist/cjs/Onboarding/Onboarding.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_core_1 = require("@patternfly/react-core");
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
+const OnboardingBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Continue', secondaryActionBtn = 'Skip', title = 'Onboarding', headerImage, headerImageAltText = '', displayMode = Chatbot_1.ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'Onboarding', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "headerImage", "headerImageAltText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = ((0, jsx_runtime_1.jsx)(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "onboarding-title", "aria-describedby": "onboarding-modal", className: `pf-chatbot__onboarding-modal pf-chatbot__onboarding-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle }, props, { children: (0, jsx_runtime_1.jsx)("section", { className: `pf-chatbot__onboarding--section`, "aria-label": title, tabIndex: -1, ref: innerRef, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.ModalBody, { className: "pf-chatbot__onboarding--modal-body", children: [!isCompact && headerImage && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__onboarding--header", children: (0, jsx_runtime_1.jsx)("img", { src: headerImage, className: "pf-chatbot__onboarding--image", alt: headerImageAltText }) })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__onboarding--modal-text", children: [(0, jsx_runtime_1.jsx)("h1", { className: "pf-chatbot__onboarding--title", children: title }), (0, jsx_runtime_1.jsx)(react_core_1.Content, { children: children })] })] }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: "pf-chatbot__onboarding--footer", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "onboarding-form", size: "lg", children: primaryActionBtn }, "onboarding-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "secondary", onClick: handleSecondaryAction, size: "lg", children: secondaryActionBtn }, "onboarding-modal-secondary")] })] }) }) })));
+    return modal;
+};
+exports.OnboardingBase = OnboardingBase;
+const Onboarding = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.OnboardingBase, Object.assign({ innerRef: ref }, props))));
+exports.default = Onboarding;

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

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

package/dist/cjs/Onboarding/Onboarding.test.js

@@ -0,0 +1,80 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 user_event_1 = __importDefault(require("@testing-library/user-event"));
+const Onboarding_1 = __importDefault(require("./Onboarding"));
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+const body = 'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.';
+describe('Onboarding', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render modal correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+        expect(react_1.screen.getByText(body)).toBeTruthy();
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(react_1.screen.getByRole('img')).toBeTruthy();
+        expect(react_1.screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Continue/i }));
+        expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Skip/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+    it('should handle isCompact prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, isCompact: true, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+        expect(react_1.screen.queryByRole('img')).toBeFalsy();
+    });
+});

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

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

package/dist/cjs/Onboarding/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 Onboarding_1 = require("./Onboarding");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Onboarding_1).default; } });
+__exportStar(require("./Onboarding"), exports);

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

@@ -40,6 +40,9 @@ export interface ResponseActionProps {
         listen?: ActionProps;
         edit?: ActionProps;
     };
+    /** When true, the selected action will persist even when clicking outside the component.
+     * When false (default), clicking outside or clicking another action will deselect the current selection. */
+    persistActionSelection?: boolean;
 }
 export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
 export default ResponseActions;

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -20,10 +20,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
 const react_icons_1 = require("@patternfly/react-icons");
 const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
-const ResponseActions = ({ actions }) => {
+const ResponseActions = ({ actions, persistActionSelection = false }) => {
     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);
+    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
     (0, react_2.useEffect)(() => {
         // Define the order of precedence for checking initial `isClicked`
         const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
@@ -45,11 +46,18 @@ const ResponseActions = ({ actions }) => {
             // Click state is explicitly controlled by consumer.
             setClickStatePersisted(true);
         }
+        // If persistActionSelection is true, all selections are persisted
+        if (persistActionSelection) {
+            setClickStatePersisted(true);
+        }
         setActiveButton(initialActive);
-    }, [actions]);
-    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
+    }, [actions, persistActionSelection]);
     const responseActions = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
+        // Only add click outside listener if not persisting selection
+        if (persistActionSelection) {
+            return;
+        }
         const handleClickOutside = (e) => {
             if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
                 setActiveButton(undefined);
@@ -59,13 +67,26 @@ const ResponseActions = ({ actions }) => {
         return () => {
             window.removeEventListener('click', handleClickOutside);
         };
-    }, [clickStatePersisted]);
+    }, [clickStatePersisted, persistActionSelection]);
     const handleClick = (e, id, onClick) => {
-        setClickStatePersisted(false);
-        setActiveButton(id);
+        if (persistActionSelection) {
+            if (activeButton === id) {
+                // Toggle off if clicking the same button
+                setActiveButton(undefined);
+            }
+            else {
+                // Set new active button
+                setActiveButton(id);
+            }
+            setClickStatePersisted(true);
+        }
+        else {
+            setClickStatePersisted(false);
+            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'] }))), 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) => {
+    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 : 'Good 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 : 'Good 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 : 'Bad 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 : 'Bad 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'] })));
             })] }));