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

package/dist/cjs/AttachMenu/AttachMenu.d.ts

@@ -1,10 +1,10 @@
 import type { FunctionComponent } from 'react';
-import { DropdownProps, DropdownToggleProps, PopperOptions } from '@patternfly/react-core';
+import { DropdownProps, DropdownToggleProps, PopperOptions, MenuSearchInputProps, SearchInputProps, MenuSearchProps } from '@patternfly/react-core';
 export interface AttachMenuProps extends DropdownProps {
     /** Items in menu */
     filteredItems: React.ReactNode;
     /** A callback for when the input value changes. */
-    handleTextInputChange: (value: string) => void;
+    handleTextInputChange?: (value: string) => void;
     /** Flag to indicate if menu is opened. */
     isOpen: boolean;
     /** Additional properties to pass to the Popper */
@@ -21,6 +21,12 @@ export interface AttachMenuProps extends DropdownProps {
     searchInputAriaLabel?: string;
     /** Toggle to be rendered */
     toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
+    /** Additional props passed to MenuSearch component */
+    menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+    /** Additional props passed to MenuSearchInput component */
+    menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+    /** Additional props passed to SearchInput component */
+    searchInputProps?: SearchInputProps;
 }
 export declare const AttachMenu: FunctionComponent<AttachMenuProps>;
 export default AttachMenu;

package/dist/cjs/AttachMenu/AttachMenu.js

@@ -16,8 +16,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const AttachMenu = (_a) => {
-    var { className, filteredItems, handleTextInputChange, isOpen, popperProps = undefined, onOpenChange, onOpenChangeKeys, onSelect, searchInputPlaceholder, searchInputAriaLabel = 'Filter menu items', toggle } = _a, props = __rest(_a, ["className", "filteredItems", "handleTextInputChange", "isOpen", "popperProps", "onOpenChange", "onOpenChangeKeys", "onSelect", "searchInputPlaceholder", "searchInputAriaLabel", "toggle"]);
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__menu ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOpen, onOpenChange: (isOpen) => onOpenChange(isOpen), onOpenChangeKeys: onOpenChangeKeys !== null && onOpenChangeKeys !== void 0 ? onOpenChangeKeys : ['Esc'], toggle: toggle, popperProps: popperProps, onSelect: onSelect }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.MenuSearch, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuSearchInput, { children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) }) }), filteredItems] })));
+    var { className, filteredItems, handleTextInputChange, isOpen, popperProps = undefined, onOpenChange, onOpenChangeKeys, onSelect, searchInputPlaceholder, searchInputAriaLabel = 'Filter menu items', toggle, menuSearchProps, menuSearchInputProps, searchInputProps } = _a, props = __rest(_a, ["className", "filteredItems", "handleTextInputChange", "isOpen", "popperProps", "onOpenChange", "onOpenChangeKeys", "onSelect", "searchInputPlaceholder", "searchInputAriaLabel", "toggle", "menuSearchProps", "menuSearchInputProps", "searchInputProps"]);
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__menu ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOpen, onOpenChange: (isOpen) => onOpenChange(isOpen), onOpenChangeKeys: onOpenChangeKeys !== null && onOpenChangeKeys !== void 0 ? onOpenChangeKeys : ['Esc'], toggle: toggle, popperProps: popperProps, onSelect: onSelect }, props, { children: [handleTextInputChange && ((0, jsx_runtime_1.jsx)(react_core_1.MenuSearch, Object.assign({}, menuSearchProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuSearchInput, Object.assign({}, menuSearchInputProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)) })) }))), filteredItems] })));
 };
 exports.AttachMenu = AttachMenu;
 exports.default = exports.AttachMenu;

package/dist/cjs/ChatbotFooter/ChatbotFooter.d.ts

@@ -1,10 +1,13 @@
 import type { HTMLProps, FunctionComponent } from 'react';
 export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
-    /** Children for the Footer that supports MessageBar and FootNote components*/
+    /** Children for the footer - supports MessageBar and FootNote components*/
     children?: React.ReactNode;
-    /** Custom classname for the Footer component */
+    /** Custom classname for the footer component */
     className?: string;
+    /** Sets footer to compact styling. */
     isCompact?: boolean;
+    /** Sets background color to primary */
+    isPrimary?: boolean;
 }
 export declare const ChatbotFooter: FunctionComponent<ChatbotFooterProps>;
 export default ChatbotFooter;

package/dist/cjs/ChatbotFooter/ChatbotFooter.js

@@ -15,8 +15,8 @@ exports.ChatbotFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotFooter = (_a) => {
-    var { children, className, isCompact } = _a, props = __rest(_a, ["children", "className", "isCompact"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__footer-container", children: children })] })));
+    var { children, className, isCompact, isPrimary } = _a, props = __rest(_a, ["children", "className", "isCompact", "isPrimary"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__footer-container", children: children })] })));
 };
 exports.ChatbotFooter = ChatbotFooter;
 exports.default = exports.ChatbotFooter;

package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js

@@ -17,7 +17,11 @@ describe('ChatbotFooter', () => {
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
     it('should handle isCompact', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFooter_1.default, { className: "custom-class", isCompact: true, "data-testid": "footer", children: "Chatbot Content" }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFooter_1.default, { isCompact: true, "data-testid": "footer", children: "Chatbot Content" }));
         expect(react_1.screen.getByTestId('footer')).toHaveClass('pf-m-compact');
     });
+    it('should handle isPrimary', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotFooter_1.default, { isPrimary: true, "data-testid": "footer", children: "Chatbot Content" }));
+        expect(react_1.screen.getByTestId('footer')).toHaveClass('pf-m-primary');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -21,8 +21,35 @@ const react_core_1 = require("@patternfly/react-core");
 const bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
 const ChatbotHeaderMenuBase = (_a) => {
     var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Chat history menu', innerRef, tooltipContent = 'Chat history menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu ${className}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+    const [isDrawerAnimating, setIsDrawerAnimating] = (0, react_1.useState)(false);
+    // I'd like to use a prop here later if this works
+    const drawerState = props['aria-expanded'];
+    const isDrawerOpen = drawerState === true;
+    const prevDrawerStateRef = (0, react_1.useRef)(isDrawerOpen);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (drawerState !== undefined) {
+            const wasDrawerOpen = prevDrawerStateRef.current === true;
+            const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+            setIsDrawerAnimating(true);
+            const timeout = setTimeout(() => {
+                setIsDrawerAnimating(false);
+                if (isDrawerClosing) {
+                    requestAnimationFrame(() => {
+                        var _a;
+                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    });
+                }
+            }, 350);
+            prevDrawerStateRef.current = isDrawerOpen;
+            return () => clearTimeout(timeout);
+        }
+    }, [drawerState, isDrawerOpen]);
+    const button = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef !== null && innerRef !== void 0 ? innerRef : buttonRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(bars_icon_1.default, {}) }), size: isCompact ? 'sm' : undefined }, props))), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu ${className}`, children: isDrawerAnimating ? (button) : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(bars_icon_1.default, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: button }))) }));
 };
 exports.ChatbotHeaderMenu = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/CodeModal/CodeModal.d.ts

@@ -37,6 +37,8 @@ export interface CodeModalProps {
     modalBodyClassName?: string;
     /** Class applied to modal footer */
     modalFooterClassName?: string;
+    /** Aria label applied to spinner when loading Monaco */
+    spinnerAriaLabel?: string;
 }
 export declare const CodeModal: FunctionComponent<CodeModalProps>;
 export default CodeModal;

package/dist/cjs/CodeModal/CodeModal.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 __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)
@@ -47,12 +56,39 @@ const react_core_1 = require("@patternfly/react-core");
 const FileDetails_1 = __importStar(require("../FileDetails"));
 const Chatbot_1 = require("../Chatbot");
 const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance = null;
+const loadMonaco = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!monacoInstance) {
+        const [monaco, { loader }] = yield Promise.all([Promise.resolve().then(() => __importStar(require('monaco-editor'))), Promise.resolve().then(() => __importStar(require('@monaco-editor/react')))]);
+        monacoInstance = monaco;
+        loader.config({ monaco });
+    }
+    return monacoInstance;
+});
 const CodeModal = (_a) => {
-    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName"]);
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName, spinnerAriaLabel = 'Loading' } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName", "spinnerAriaLabel"]);
     const [newCode, setNewCode] = (0, react_1.useState)(code);
     const [editorInstance, setEditorInstance] = (0, react_1.useState)(null);
     const [isEditorReady, setIsEditorReady] = (0, react_1.useState)(false);
+    const [isMonacoLoading, setIsMonacoLoading] = (0, react_1.useState)(false);
+    const [isMonacoLoaded, setIsMonacoLoaded] = (0, react_1.useState)(false);
     const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+            setIsMonacoLoading(true);
+            loadMonaco()
+                .then(() => {
+                setIsMonacoLoaded(true);
+                setIsMonacoLoading(false);
+            })
+                .catch((error) => {
+                // eslint-disable-next-line no-console
+                console.error('Failed to load Monaco editor:', error);
+                setIsMonacoLoading(false);
+            });
+        }
+    }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
     (0, react_1.useEffect)(() => {
         if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
             return;
@@ -102,13 +138,22 @@ const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    const modal = ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { className: "pf-chatbot__code-modal-body", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details", children: (0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: fileName }) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: (0, jsx_runtime_1.jsx)(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
-                                    glyphMargin: false,
-                                    folding: false,
-                                    // prevents Monaco from handling resizing itself
-                                    // was causing ResizeObserver issues
-                                    automaticLayout: false
-                                } }, props)) })] }) }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: modalFooterClassName, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
+    const renderMonacoEditor = () => {
+        if (isMonacoLoading) {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, { "aria-label": spinnerAriaLabel }) }));
+        }
+        if (isMonacoLoaded) {
+            return ((0, jsx_runtime_1.jsx)(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
+                    glyphMargin: false,
+                    folding: false,
+                    // prevents Monaco from handling resizing itself
+                    // was causing ResizeObserver issues
+                    automaticLayout: false
+                } }, props)));
+        }
+        return null;
+    };
+    const modal = ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { className: "pf-chatbot__code-modal-body", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details", children: (0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: fileName }) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: renderMonacoEditor() })] }) }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: modalFooterClassName, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
     return modal;
 };
 exports.CodeModal = CodeModal;

package/dist/cjs/FileDetailsLabel/FileDetailsLabel.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
-export interface FileDetailsLabelProps {
+import { LabelProps } from '@patternfly/react-core';
+export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
     /** Name of file, including extension */
     fileName: string;
     /** Unique id of file */

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

@@ -18,6 +18,8 @@ export interface CodeBlockMessageProps {
     collapsedText?: string;
     /** Custom actions added to header of code block, after any default actions such as the "copy" action.  */
     customActions?: React.ReactNode;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
 }
-declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, isPrimary, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockMessage;

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -24,7 +24,7 @@ const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
     var _b;
-    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions"]);
+    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions, isPrimary } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions", "isPrimary"]);
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)();
@@ -61,7 +61,7 @@ const CodeBlockMessage = (_a) => {
         }
     });
     if (!String(children).includes('\n')) {
-        return ((0, jsx_runtime_1.jsx)("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code", children: children })));
+        return ((0, jsx_runtime_1.jsx)("code", Object.assign({}, props, { className: `pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`, children: children })));
     }
     // Setup code block header
     const actions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block-language", children: language }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? (0, jsx_runtime_1.jsx)(check_icon_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(copy_icon_1.CopyIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));

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

@@ -10,6 +10,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
+import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
 import { ToolResponseProps } from '../ToolResponse';
 import { DeepThinkingProps } from '../DeepThinking';
@@ -52,7 +53,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     /** Name of the user */
     name?: string;
     /** Avatar src for the user */
-    avatar: string;
+    avatar?: string;
     /** Timestamp for the message */
     timestamp?: string;
     /** Set this to true if message is being loaded */
@@ -63,6 +64,9 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     actions?: {
         [key: string]: 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;
     /** Sources for message */
     sources?: SourcesCardProps;
     /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -144,6 +148,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     toolCall?: ToolCallProps;
     /** Whether user messages default to stripping out images in markdown */
     hasNoImagesInUserMessages?: boolean;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -46,6 +46,9 @@ const ImageMessage_1 = __importDefault(require("./ImageMessage/ImageMessage"));
 const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
 const rehype_external_links_1 = __importDefault(require("rehype-external-links"));
 const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
+const rehype_highlight_1 = __importDefault(require("rehype-highlight"));
+// see the full list of styles here: https://highlightjs.org/examples
+require("highlight.js/styles/vs2015.css");
 const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
@@ -55,13 +58,13 @@ const DeepThinking_1 = __importDefault(require("../DeepThinking"));
 const SuperscriptMessage_1 = __importDefault(require("./SuperscriptMessage/SuperscriptMessage"));
 const ToolCall_1 = __importDefault(require("../ToolCall"));
 const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
     (0, react_1.useEffect)(() => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs];
+    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs, rehype_highlight_1.default];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
     }
@@ -94,13 +97,13 @@ const MessageBase = (_a) => {
                 p: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     const { node } = props, rest = __rest(props, ["node"]);
-                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, rest));
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, rest, { isPrimary: isPrimary }));
                 },
                 code: (_a) => {
                     var { children } = _a, props = __rest(_a, ["children"]);
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     const { node } = props, codeProps = __rest(props, ["node"]);
-                    return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, codeProps, codeBlockProps, { children: children })));
+                    return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, codeProps, codeBlockProps, { isPrimary: isPrimary, children: children })));
                 },
                 h1: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -153,7 +156,7 @@ const MessageBase = (_a) => {
                     return (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, rest));
                 },
                 // table requires node attribute for calculating headers for mobile breakpoint
-                table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps, { isPrimary: isPrimary })),
                 tbody: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     const { node } = props, rest = __rest(props, ["node"]);
@@ -206,7 +209,7 @@ const MessageBase = (_a) => {
     };
     const renderMessage = () => {
         if (isLoading) {
-            return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord });
+            return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord, isPrimary: isPrimary });
         }
         if (isEditable) {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), (0, jsx_runtime_1.jsx)(MessageInput_1.default, Object.assign({ content: messageText, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
@@ -216,9 +219,9 @@ const MessageBase = (_a) => {
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), toolResponse && (0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, toolResponse)), deepThinking && (0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, deepThinking)), toolCall && (0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, toolCall)), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+    return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && ((0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), toolResponse && (0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, toolResponse)), deepThinking && (0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, deepThinking)), toolCall && (0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, toolCall)), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && ((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions, persistActionSelection: persistActionSelection })), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;
-                                    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachment", children: (0, jsx_runtime_1.jsx)(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
+                                    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachment", children: (0, jsx_runtime_1.jsx)(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                 }) })), !isLoading && endContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: endContent })] })] })] })));
 };
 exports.MessageBase = MessageBase;

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

@@ -209,6 +209,10 @@ describe('Message', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./testImg", role: "bot", name: "Bot", content: "Hi" }));
         expect(react_2.screen.getByRole('img')).toHaveAttribute('src', './testImg');
     });
+    it('should not render avatar if no avatar prop is passed', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { role: "bot", name: "Bot", content: "Hi" }));
+        expect(react_2.screen.queryByRole('img')).not.toBeInTheDocument();
+    });
     it('should render botWord correctly', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", botWord: "\u4EBA\u5DE5\u77E5\u80FD" }));
         expect(react_2.screen.getByText('Bot')).toBeTruthy();
@@ -831,4 +835,36 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Thought for 3 seconds')).toBeTruthy();
         expect(react_2.screen.getByText("Here's why I said this.")).toBeTruthy();
     });
+    it('should handle isPrimary correctly for inline code when it is true', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for inline code when it is false', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
+        expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+    });
+    it('should handle isPrimary correctly for table when it is true', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for table when it is false', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+    });
+    it('should handle isPrimary correctly for loading when it is true', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", isPrimary: true, isLoading: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for loading when it is false', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", isLoading: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeFalsy();
+    });
+    it('should handle isPrimary correctly for attachments when it is true', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", isPrimary: true, attachments: [{ name: 'testAttachment' }] }));
+        expect(container.querySelector('.pf-m-outline')).toBeTruthy();
+    });
+    it('should handle isPrimary correctly for attachments when it is false', () => {
+        const { container } = (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "", attachments: [{ name: 'testAttachment' }] }));
+        expect(container.querySelector('.pf-m-outline')).toBeFalsy();
+    });
 });

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();
+    });
 });