@patternfly/chatbot 6.4.1 → 6.5.0-prerelease.10

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/ChatbotContent/ChatbotContent.d.ts

@@ -4,6 +4,8 @@ export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
     children: React.ReactNode;
     /** Custom classname for the ChatbotContent component */
     className?: string;
+    /** Sets background color to primary */
+    isPrimary?: boolean;
 }
 export declare const ChatbotContent: FunctionComponent<ChatbotContentProps>;
 export default ChatbotContent;

package/dist/cjs/ChatbotContent/ChatbotContent.js

@@ -14,8 +14,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ChatbotContent = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
+    var { children, className, isPrimary } = _a, props = __rest(_a, ["children", "className", "isPrimary"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot__content ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
 };
 exports.ChatbotContent = ChatbotContent;
 exports.default = exports.ChatbotContent;

package/dist/cjs/ChatbotContent/ChatbotContent.test.js

@@ -15,4 +15,8 @@ describe('ChatbotContent', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotContent_1.default, { className: "custom-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
+    it('should render ChatbotContent with primary class', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotContent_1.default, { isPrimary: true, children: "Chatbot Content" }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

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

@@ -5,8 +5,10 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
     menuItems: React.ReactNode;
     /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation settings dropdown */
+    /** Tooltip content applied to conversation settings dropdown */
     label?: string;
+    /** Aria-label applied to conversation settings dropdown */
+    'aria-label'?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
     /** Id applied to dropdown menu toggle */

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -9,11 +9,11 @@ const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
-const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label, id }) => {
+const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label = 'Conversation options', 'aria-label': ariaLabel, id }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+    const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
+        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
     return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
             setIsOpen((prev) => !prev);

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

@@ -68,4 +68,8 @@ describe('ChatbotConversationHistoryDropdown', () => {
             expect(react_1.screen.queryByText('Actions dropdown')).toBeInTheDocument();
         });
     }));
+    it('should be able to set a custom aria-label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, "aria-label": "Custom conversation options" }));
+        expect(react_1.screen.queryByRole('menuitem', { name: /Custom conversation options/i })).toBeInTheDocument();
+    });
 });

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/CodeModal/CodeModal.js

@@ -41,15 +41,44 @@ exports.CodeModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const path_browserify_1 = __importDefault(require("path-browserify"));
+const monaco = __importStar(require("monaco-editor"));
+const react_2 = require("@monaco-editor/react");
 // Import PatternFly components
 const react_code_editor_1 = require("@patternfly/react-code-editor");
 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"));
+// Configure Monaco loader to use the npm package instead of CDN
+react_2.loader.config({ monaco });
 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"]);
     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 containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
+            return;
+        }
+        const handleResize = () => {
+            if (editorInstance && isEditorReady && isModalOpen) {
+                try {
+                    window.requestAnimationFrame(() => {
+                        editorInstance.layout();
+                    });
+                }
+                catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.error('ChatBot code modal layout error:', error);
+                }
+            }
+        };
+        const observer = (0, react_core_1.getResizeObserver)(containerRef.current, handleResize);
+        return () => {
+            observer();
+        };
+    }, [editorInstance, isEditorReady, isModalOpen]);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         if (!isReadOnly) {
@@ -64,18 +93,25 @@ const CodeModal = (_a) => {
         onSecondaryAction(_event);
     };
     const onEditorDidMount = (editor, monaco) => {
-        editor.layout();
-        editor.focus();
+        setEditorInstance(editor);
         monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+        if (containerRef.current) {
+            setIsEditorReady(true);
+            editor.layout();
+            editor.focus();
+        }
     };
     const onCodeChange = (value) => {
         if (!isReadOnly) {
             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)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-editor", 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: {
+    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
+                                    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")] })] }));
     return modal;
 };

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

@@ -16,6 +16,10 @@ export interface CodeBlockMessageProps {
     expandedText?: string;
     /** Link text applied to expandable toggle when collapsed */
     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, ...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 } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
+    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,10 +61,10 @@ 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.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { 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 })] }) }));
+    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] }));
     return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlock, { actions: actions, children: [(0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isExpandable ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 exports.default = CodeBlockMessage;

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

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import { Options } from 'react-markdown';
-import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -9,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';
@@ -69,24 +71,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     /** Label for the English "Loading message," displayed to screenreaders when loading a message */
     loadingWord?: string;
     /** Props for code blocks */
-    codeBlockProps?: {
-        /** Aria label applied to code blocks */
-        'aria-label'?: string;
-        /** Class name applied to code blocks */
-        className?: string;
-        /** Whether code blocks are expandable */
-        isExpandable?: boolean;
-        /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
-        maxLength?: number;
-        /** Additional props passed to expandable section if isExpandable is applied */
-        expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-        /** Additional props passed to expandable toggle if isExpandable is applied */
-        expandableSectionToggleProps?: ExpandableSectionToggleProps;
-        /** Link text applied to expandable toggle when expanded */
-        expandedText?: string;
-        /** Link text applied to expandable toggle when collapsed */
-        collapsedText?: string;
-    };
+    codeBlockProps?: CodeBlockMessageProps;
     /** Props for quick responses */
     quickResponses?: QuickResponse[];
     /** Props for quick responses container */
@@ -160,6 +145,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, 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", "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) => {
@@ -218,7 +221,7 @@ const MessageBase = (_a) => {
     };
     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) => {
                                     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

@@ -493,6 +493,12 @@ describe('Message', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
         expect(react_2.screen.getByRole('button', { name: 'test' })).toBeTruthy();
     });
+    it('should be able to add custom actions to CodeMessage', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: {
+                customActions: ((0, jsx_runtime_1.jsx)(react_core_1.CodeBlockAction, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { children: "New custom action" }) }))
+            } }));
+        expect(react_2.screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+    });
     it('should handle hasRoundAvatar correctly when it is true', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
         expect(react_2.screen.getByRole('img')).toBeTruthy();
@@ -825,4 +831,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();
+    });
 });