@patternfly/chatbot 6.5.0-prerelease.9 → 6.6.0-prerelease.1

package/dist/cjs/Message/UserFeedback/UserFeedback.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserFeedback = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 // Import PatternFly components
@@ -21,7 +22,7 @@ const react_core_1 = require("@patternfly/react-core");
 const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
 const CloseButton_1 = __importDefault(require("./CloseButton"));
 const UserFeedback = (_a) => {
-    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps"]);
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps, privacyStatement } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps", "privacyStatement"]);
     const [selectedResponse, setSelectedResponse] = (0, react_1.useState)();
     const [value, setValue] = (0, react_1.useState)('');
     const divRef = (0, react_1.useRef)(null);
@@ -35,9 +36,10 @@ const UserFeedback = (_a) => {
     /* card does not have ref forwarding; hence wrapper div */
     (0, jsx_runtime_1.jsx)("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, Object.assign({ actions: {
                         actions: (0, jsx_runtime_1.jsx)(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    } }, cardHeaderProps, { children: (0, jsx_runtime_1.jsx)(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && ((0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ value: value, onChange: (_event, value) => {
-                                    setValue(value);
-                                    onTextAreaChange && onTextAreaChange(_event, value);
-                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps))), children, (0, jsx_runtime_1.jsx)(react_core_1.ActionGroup, Object.assign({}, actionGroupProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value) }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
+                    } }, cardHeaderProps, { children: (0, jsx_runtime_1.jsx)(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ value: value, onChange: (_event, value) => {
+                                        setValue(value);
+                                        onTextAreaChange && onTextAreaChange(_event, value);
+                                    }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps)) })), privacyStatement && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__feedback-card-privacy", children: privacyStatement }), children, (0, jsx_runtime_1.jsx)(react_core_1.ActionGroup, Object.assign({}, actionGroupProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value), size: isCompact ? 'sm' : undefined }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
-exports.default = UserFeedback;
+exports.UserFeedback = UserFeedback;
+exports.default = exports.UserFeedback;

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

@@ -38,5 +38,5 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
 }
-declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
+export declare const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps>;
 export default UserFeedbackComplete;

package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js

@@ -14,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserFeedbackComplete = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-// Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const CloseButton_1 = __importDefault(require("./CloseButton"));
 const UserFeedbackComplete = (_a) => {
@@ -90,4 +90,5 @@ const UserFeedbackComplete = (_a) => {
                         }
                         : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__feedback-complete-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__feedback-complete-image", children: (0, jsx_runtime_1.jsxs)("svg", { width: "60", height: "64", viewBox: "0 0 60 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M53.0555 21.5975H6.94323C3.57013 21.5975 0.835693 24.3319 0.835693 27.705V57.8925C0.835693 61.2656 3.57013 64 6.94323 64H53.0555C56.4286 64 59.1631 61.2656 59.1631 57.8925V27.705C59.1631 24.3319 56.4286 21.5975 53.0555 21.5975Z", fill: "#F8AE54" }), (0, jsx_runtime_1.jsx)("path", { d: "M55.8973 19.8247C52.5894 15.7926 29.9992 0 29.9992 0C29.9992 0 7.40996 15.7926 4.10102 19.8247C0.79312 23.8568 0.835476 25.7184 0.835476 27.8899H59.1629C59.1629 25.7184 59.2052 23.8578 55.8973 19.8257V19.8247Z", fill: "#FFCC17" }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M53.0567 8.48981H6.94336V61.8388H53.0567V8.48981Z", fill: "#F2F2F2" }) }), (0, jsx_runtime_1.jsx)("path", { d: "M51.6589 7.49908H8.34204V60.8481H51.6589V7.49908Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.835693 29.1296V57.8925C0.835693 59.2375 1.27165 60.4803 2.00823 61.4896L23.0303 43.5462L0.835693 29.1296Z", fill: "#FFCC17" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.9695 43.5472L57.9905 61.4907C58.7271 60.4813 59.1631 59.2386 59.1631 57.8935V29.1306L36.9685 43.5472H36.9695Z", fill: "#FFF4CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.835693 57.8925V57.8067L22.4146 42.7992L29.9994 37.5244L37.5842 42.7992L59.1641 57.8067V57.8925C59.1641 61.2665 56.4296 64 53.0566 64H6.94323C3.57024 64 0.835693 61.2665 0.835693 57.8925Z", fill: "#FFE072" }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M22.1563 42.978L0.835693 57.8067V56.6993L22.1563 42.978Z", fill: "#FEF07C" }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M37.8425 42.978L59.1631 57.8067V56.6993L37.8425 42.978Z", fill: "#FEF07C" }) }), (0, jsx_runtime_1.jsx)("path", { d: "M37.8037 32.2373C42.1136 27.9273 42.1136 20.9395 37.8037 16.6295C33.4937 12.3196 26.5059 12.3196 22.196 16.6295C17.886 20.9395 17.886 27.9273 22.196 32.2373C26.5059 36.5472 33.4937 36.5472 37.8037 32.2373Z", fill: "#0066CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__feedback-complete-text", children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__feedback-complete-title", children: title }), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-card-body`, children: body })] })] })] })) })));
 };
-exports.default = UserFeedbackComplete;
+exports.UserFeedbackComplete = UserFeedbackComplete;
+exports.default = exports.UserFeedbackComplete;

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

@@ -0,0 +1,2 @@
+export * from './UserFeedback';
+export * from './UserFeedbackComplete';

package/dist/cjs/Message/UserFeedback/index.js

@@ -0,0 +1,18 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UserFeedback"), exports);
+__exportStar(require("./UserFeedbackComplete"), exports);

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

@@ -1,3 +1,11 @@
 export { default } from './Message';
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
+export * from './ErrorMessage/ErrorMessage';
+export * from './MessageAndActions';
+export * from './MessageAttachments';
 export * from './Message';
+export * from './MessageLoading';
+export * from './MessageInput';
+export * from './QuickResponse';
+export * from './QuickStarts';
+export * from './UserFeedback';

package/dist/cjs/Message/index.js

@@ -22,4 +22,12 @@ var Message_1 = require("./Message");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
 var rehypeCodeBlockToggle_1 = require("./Plugins/rehypeCodeBlockToggle");
 Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });
+__exportStar(require("./ErrorMessage/ErrorMessage"), exports);
+__exportStar(require("./MessageAndActions"), exports);
+__exportStar(require("./MessageAttachments"), exports);
 __exportStar(require("./Message"), exports);
+__exportStar(require("./MessageLoading"), exports);
+__exportStar(require("./MessageInput"), exports);
+__exportStar(require("./QuickResponse"), exports);
+__exportStar(require("./QuickStarts"), exports);
+__exportStar(require("./UserFeedback"), exports);

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

@@ -40,6 +40,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     placeholder?: string;
     /** Flag to disable/enable the Attach button  */
     hasAttachButton?: boolean;
+    /** Whether the attach button is rendered before or after the message input. */
+    attachButtonPosition?: 'start' | 'end';
     /** Flag to enable the Microphone button  */
     hasMicrophoneButton?: boolean;
     /** Placeholder text when listening */
@@ -111,6 +113,14 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     innerRef?: React.Ref<HTMLTextAreaElement>;
     /** Sets background color to primary */
     isPrimary?: boolean;
+    /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container.  */
+    additionalActions?: React.ReactNode;
+    /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
+    forceMultilineLayout?: 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,17 +27,24 @@ 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, isPrimary } = _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"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, attachButtonPosition = 'end', 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, additionalActions, forceMultilineLayout = false, hasAiIndicator, isThinking } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "attachButtonPosition", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "additionalActions", "forceMultilineLayout", "hasAiIndicator", "isThinking"]);
     // Text Input
     // --------------------------------------------------------------------------
     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 shouldForceMultiline = forceMultilineLayout || additionalActions;
+    const [isMultiline, setIsMultiline] = (0, react_1.useState)(shouldForceMultiline);
     const inputRef = (0, react_1.useRef)(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = (0, react_1.useRef)(null);
     const topMargin = '1rem';
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined && value !== message) {
+            setMessage(value);
+        }
+    }, [value, message]);
     const setInitialLineHeight = (field) => {
         field.style.setProperty('line-height', '1rem');
         const parent = field.parentElement;
@@ -46,7 +54,7 @@ const MessageBarBase = (_a) => {
             parent.style.setProperty('height', 'inherit');
             const grandparent = parent.parentElement;
             if (grandparent) {
-                grandparent.style.setProperty('flex-basis', 'auto');
+                grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
             }
         }
     };
@@ -73,11 +81,20 @@ const MessageBarBase = (_a) => {
         const lines = field.scrollHeight / lineHeight;
         return lines > 2;
     };
+    const checkIfMultiline = (0, react_1.useCallback)((field) => {
+        const parent = field.parentElement;
+        const grandparent = parent === null || parent === void 0 ? void 0 : parent.parentElement;
+        if (grandparent) {
+            const containerHeight = grandparent.offsetHeight;
+            const threshold = isCompact ? 56 : 70;
+            setIsMultiline(containerHeight > threshold);
+        }
+    }, [isCompact]);
     const setAutoWidth = (0, react_1.useCallback)((field) => {
         const parent = field.parentElement;
         if (parent) {
             const grandparent = parent.parentElement;
-            if (textIsLongerThan2Lines(field) && grandparent) {
+            if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
                 grandparent.style.setProperty('flex-basis', `100%`);
             }
         }
@@ -125,13 +142,15 @@ const MessageBarBase = (_a) => {
         if (field) {
             if (field.value === '') {
                 setInitialLineHeight(field);
+                !shouldForceMultiline && setIsMultiline(false);
             }
             else {
                 setAutoHeight(field);
                 setAutoWidth(field);
+                !shouldForceMultiline && checkIfMultiline(field);
             }
         }
-    }, [displayMode, message, setAutoWidth]);
+    }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
     (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
@@ -144,13 +163,15 @@ const MessageBarBase = (_a) => {
         if (textareaRef.current) {
             if (event.target.value === '') {
                 setInitialLineHeight(textareaRef.current);
+                !shouldForceMultiline && setIsMultiline(false);
             }
             else {
                 setAutoHeight(textareaRef.current);
+                !shouldForceMultiline && checkIfMultiline(textareaRef.current);
             }
         }
         setMessage(event.target.value);
-    }, [onChange]);
+    }, [onChange, checkIfMultiline]);
     // Handle sending message
     const handleSend = (0, react_1.useCallback)((newMessage) => {
         onSendMessage(newMessage);
@@ -192,23 +213,34 @@ const MessageBarBase = (_a) => {
         setMessage(message);
         onChange && onChange({}, message);
     };
+    const renderAttachButton = () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!attachMenuProps && hasAttachButton) {
+            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _a === void 0 ? void 0 : _a.tooltipContent, inputTestId: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _b === void 0 ? void 0 : _b.inputTestId, isCompact: isCompact, tooltipProps: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.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, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props)));
+        }
+        if (attachMenuProps) {
+            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.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)));
+        }
+    };
+    const isAttachButtonAtStart = attachButtonPosition === 'start';
     const renderButtons = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         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 }, 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)))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAttachButtonAtStart && renderAttachButton(), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _d === void 0 ? void 0 : _d.tooltipContent, language: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _e === void 0 ? void 0 : _e.language, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _f === void 0 ? void 0 : _f.tooltipProps }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _g === void 0 ? void 0 : _g.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _h === void 0 ? void 0 : _h.tooltipContent, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.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() })] }));
+    const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isAttachButtonAtStart && !isMultiline && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions test", children: renderAttachButton() })), (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: (0, react_styles_1.css)('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped'), children: hasGroupedActions ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: [isAttachButtonAtStart && renderAttachButton(), additionalActions] }), (0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: renderButtons() })] })) : (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) => {
+        return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: (0, react_styles_1.css)('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _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 }, attachMenuProps)));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${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', isMultiline && 'pf-m-multiline', 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

@@ -323,4 +323,24 @@ describe('Message bar', () => {
         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');
+    });
+    it('Renders with flex-basis of auto by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: auto;');
+    });
+    it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { forceMultilineLayout: true, onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
+    });
+    it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { additionalActions: "actions", onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
+    });
 });

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

@@ -29,6 +29,10 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
 type ExtendedActionProps = ActionProps & {
     [key: string]: any;
 };
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
     actions: Record<string, ExtendedActionProps | undefined> & {
@@ -40,6 +44,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;