@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.5

package/dist/esm/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/esm/ChatbotFooter/ChatbotFooter.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@patternfly/react-core';
 export const ChatbotFooter = (_a) => {
-    var { children, className, isCompact } = _a, props = __rest(_a, ["children", "className", "isCompact"]);
-    return (_jsxs("div", Object.assign({ className: `pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [_jsx(Divider, {}), _jsx("div", { className: "pf-chatbot__footer-container", children: children })] })));
+    var { children, className, isCompact, isPrimary } = _a, props = __rest(_a, ["children", "className", "isCompact", "isPrimary"]);
+    return (_jsxs("div", Object.assign({ className: `pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [_jsx(Divider, {}), _jsx("div", { className: "pf-chatbot__footer-container", children: children })] })));
 };
 export default ChatbotFooter;

package/dist/esm/ChatbotFooter/ChatbotFooter.test.js

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

package/dist/esm/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/esm/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/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -22,7 +22,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] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
@@ -59,7 +59,7 @@ const CodeBlockMessage = (_a) => {
         }
     });
     if (!String(children).includes('\n')) {
-        return (_jsx("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code", children: children })));
+        return (_jsx("code", Object.assign({}, props, { className: `pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`, children: children })));
     }
     // Setup code block header
     const actions = (_jsxs(_Fragment, { children: [_jsxs(CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(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 ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));

package/dist/esm/Message/Message.d.ts

@@ -145,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/esm/Message/Message.js

@@ -52,7 +52,7 @@ import DeepThinking from '../DeepThinking';
 import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 import ToolCall from '../ToolCall';
 export 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] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -91,13 +91,13 @@ export const MessageBase = (_a) => {
                 p: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, rest));
+                    return _jsx(TextMessage, Object.assign({ component: 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 (_jsx(CodeBlockMessage, Object.assign({}, codeProps, codeBlockProps, { children: children })));
+                    return (_jsx(CodeBlockMessage, Object.assign({}, codeProps, codeBlockProps, { isPrimary: isPrimary, children: children })));
                 },
                 h1: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -150,7 +150,7 @@ export const MessageBase = (_a) => {
                     return _jsx(ListItemMessage, Object.assign({}, rest));
                 },
                 // table requires node attribute for calculating headers for mobile breakpoint
-                table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
+                table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps, { isPrimary: isPrimary })),
                 tbody: (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     const { node } = props, rest = __rest(props, ["node"]);
@@ -203,7 +203,7 @@ export const MessageBase = (_a) => {
     };
     const renderMessage = () => {
         if (isLoading) {
-            return _jsx(MessageLoading, { loadingWord: loadingWord });
+            return _jsx(MessageLoading, { loadingWord: loadingWord, isPrimary: isPrimary });
         }
         if (isEditable) {
             return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), _jsx(MessageInput, Object.assign({ content: messageText, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
@@ -215,7 +215,7 @@ export const MessageBase = (_a) => {
     };
     return (_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: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { 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 && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;
-                                    return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { 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 (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { 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 && _jsx(_Fragment, { children: endContent })] })] })] })));
 };
 const Message = forwardRef((props, ref) => (_jsx(MessageBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/Message/Message.test.js

@@ -826,4 +826,36 @@ describe('Message', () => {
         expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
         expect(screen.getByText("Here's why I said this.")).toBeTruthy();
     });
+    it('should handle isPrimary correctly for inline code when it is true', () => {
+        const { container } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { 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 } = render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", attachments: [{ name: 'testAttachment' }] }));
+        expect(container.querySelector('.pf-m-outline')).toBeFalsy();
+    });
 });

package/dist/esm/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/esm/Message/MessageLoading.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // ============================================================================
 // Chatbot Main - Message - Processing
 // ============================================================================
-const MessageLoading = ({ loadingWord }) => (_jsx("div", { className: "pf-chatbot__message-loading", children: _jsx("span", { className: "pf-chatbot__message-loading-dots", children: _jsx("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
+const MessageLoading = ({ loadingWord, isPrimary }) => (_jsx("div", { className: `pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`, children: _jsx("span", { className: "pf-chatbot__message-loading-dots", children: _jsx("span", { className: "pf-v6-screen-reader", children: loadingWord }) }) }));
 export default MessageLoading;

package/dist/esm/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/esm/Message/TableMessage/TableMessage.js

@@ -17,7 +17,7 @@ import { Children, cloneElement } from 'react';
 import { Table } from '@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
@@ -58,6 +58,6 @@ const TableMessage = (_a) => {
     }
     return (
     // gridBreakPoint is so we show mobile-styled-PF table
-    _jsx(Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${className ? className : ''}` }, rest, { children: modifyChildren(children) })));
+    _jsx(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) })));
 };
 export default TableMessage;

package/dist/esm/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/esm/Message/TextMessage/TextMessage.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Content } from '@patternfly/react-core';
 const TextMessage = (_a) => {
-    var { component, children } = _a, props = __rest(_a, ["component", "children"]);
-    return (_jsx("span", { className: "pf-chatbot__message-text", children: _jsx(Content, Object.assign({ component: component }, props, { children: children })) }));
+    var { component, children, isPrimary } = _a, props = __rest(_a, ["component", "children", "isPrimary"]);
+    return (_jsx("span", { className: `pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`, children: _jsx(Content, Object.assign({ component: component }, props, { children: children })) }));
 };
 export default TextMessage;

package/dist/esm/MessageBar/MessageBar.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
-import { ButtonProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { ButtonProps, MenuSearchInputProps, MenuSearchProps, SearchInputProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
@@ -21,6 +21,12 @@ export interface MessageBarWithAttachMenuProps {
     onAttachMenuOnOpenChangeKeys?: string[];
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
+    /** Additional props passed to MenuSearch component in attach menu */
+    menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+    /** Additional props passed to MenuSearchInput component in attach menu */
+    menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+    /** Additional props passed to SearchInput component in attach menu */
+    searchInputProps?: SearchInputProps;
 }
 export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     /** Callback to get the value of input message by user */
@@ -105,6 +111,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     isCompact?: boolean;
     /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
     innerRef?: React.Ref<HTMLTextAreaElement>;
+    /** Sets background color to primary */
+    isPrimary?: boolean;
 }
 export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
 declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/MessageBar/MessageBar.js

@@ -20,7 +20,7 @@ import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export const MessageBarBase = (_a) => {
     var _b;
-    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
@@ -200,9 +200,9 @@ export const MessageBarBase = (_a) => {
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
-            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
+            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder }, attachMenuProps)));
     }
-    return _jsx("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
+    return (_jsx("div", { className: `pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents }));
 };
 const MessageBar = forwardRef((props, ref) => (_jsx(MessageBarBase, Object.assign({ innerRef: ref }, props))));
 export { MessageBar };

package/dist/esm/MessageBar/MessageBar.test.js

@@ -154,6 +154,39 @@ describe('Message bar', () => {
         yield userEvent.click(attachButton);
         expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
     }));
+    it('can pass searchInputProps to search input in AttachMenu', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                searchInputProps: { isDisabled: true }
+            } }));
+        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
+    });
+    it('can pass menuSearchProps to search input in AttachMenu', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchProps: { 'data-testid': 'menu-search' }
+            } }));
+        expect(screen.getByTestId('menu-search')).toBeTruthy();
+    });
+    it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchInputProps: { 'data-testid': 'menu-search-input' }
+            } }));
+        expect(screen.getByTestId('menu-search-input')).toBeTruthy();
+    });
     it('can hide attach button', () => {
         render(_jsx(MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
         expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -264,4 +297,8 @@ describe('Message bar', () => {
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         expect(document.activeElement).toBe(screen.getByRole('textbox'));
     });
+    it('should handle isPrimary', () => {
+        const { container } = render(_jsx(MessageBar, { isPrimary: true, onSendMessage: jest.fn }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.5.0-prerelease.3",
+  "version": "6.5.0-prerelease.5",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -131,15 +131,23 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 ```
 
+### Primary color background
+
+This demo displays an embedded ChatBot with a [primary background color](/design-foundations/colors#background-colors). This example includes the same features as the [Embedded ChatBot demo](/patternfly-ai/chatbot/overview/demo/#embedded-chatbot)—the only differences are that the background color is adjusted via the `isPrimary` prop and some of the sample Messages have changed. You can use the same logic to adjust the background color in any ChatBot layout.
+
+```js file="./WhiteEmbeddedChatbot.tsx" isFullscreen
+
+```
+
 ### Display mode switcher
 
 This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
 
 1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
 2. A conditional page layout that renders the ChatBot for each display mode option:
-    - **Overlay:** As a floating window on top of the page content.
-    - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
-    - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
+   - **Overlay:** As a floating window on top of the page content.
+   - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
+   - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
 3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
 4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
 
@@ -170,7 +178,7 @@ Your code structure should look like this:
 
 ### Chat transcripts
 
-This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others. 
+This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others.
 
 A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.