@patternfly/chatbot 6.5.0-prerelease.1 → 6.5.0-prerelease.10

package/dist/esm/ChatbotContent/ChatbotContent.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ChatbotContent = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (_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 (_jsx("div", Object.assign({ className: `pf-chatbot__content ${isPrimary ? 'pf-m-primary' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
 };
 export default ChatbotContent;

package/dist/esm/ChatbotContent/ChatbotContent.test.js

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

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

@@ -3,11 +3,11 @@ import { useState } from 'react';
 // Import PatternFly components
 import { Tooltip, MenuToggle, Dropdown } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label, id }) => {
+export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label = 'Conversation options', 'aria-label': ariaLabel, id }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const toggle = (toggleRef) => (_jsx(Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+    const toggle = (toggleRef) => (_jsx(Tooltip, { className: "pf-chatbot__tooltip", content: label, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none", children: _jsx(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: _jsx(EllipsisIcon, {}) }) }));
+        aria: "none", children: _jsx(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: _jsx(EllipsisIcon, {}) }) }));
     return (_jsx(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/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js

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

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

@@ -10,17 +10,46 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
-import { Button, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import { Button, getResizeObserver, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
 import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
+// Configure Monaco loader to use the npm package instead of CDN
+loader.config({ monaco });
 export const CodeModal = (_a) => {
     var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = 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] = useState(code);
+    const [editorInstance, setEditorInstance] = useState(null);
+    const [isEditorReady, setIsEditorReady] = useState(false);
+    const containerRef = useRef(null);
+    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 = getResizeObserver(containerRef.current, handleResize);
+        return () => {
+            observer();
+        };
+    }, [editorInstance, isEditorReady, isModalOpen]);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
         if (!isReadOnly) {
@@ -35,18 +64,25 @@ export 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 = (_jsxs(ChatbotModal, { 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: [_jsx(ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), _jsx(ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: _jsxs(Stack, { className: "pf-chatbot__code-modal-body", children: [_jsx(StackItem, { className: "pf-chatbot__code-modal-file-details", children: _jsx(FileDetails, { fileName: fileName }) }), _jsx(StackItem, { className: "pf-chatbot__code-modal-editor", children: _jsx(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
+    const modal = (_jsxs(ChatbotModal, { 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: [_jsx(ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), _jsx(ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: _jsxs(Stack, { className: "pf-chatbot__code-modal-body", children: [_jsx(StackItem, { className: "pf-chatbot__code-modal-file-details", children: _jsx(FileDetails, { fileName: fileName }) }), _jsx("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: _jsx(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.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)) })] }) }), _jsxs(ModalFooter, { className: modalFooterClassName, children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), _jsx(Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
     return modal;
 };

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

@@ -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/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 } = _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] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
@@ -59,10 +59,10 @@ 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 = (_jsx(_Fragment, { children: _jsxs(CodeBlockAction, { 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 })] }) }));
+    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] }));
     return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(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 })))] }) }));
 };
 export default CodeBlockMessage;

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

@@ -40,6 +40,9 @@ import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+// see the full list of styles here: https://highlightjs.org/examples
+import 'highlight.js/styles/vs2015.css';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
@@ -49,13 +52,13 @@ 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);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
+    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
     }
@@ -88,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
@@ -147,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"]);
@@ -200,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) => {
@@ -212,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

@@ -16,7 +16,7 @@ import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
-import { AlertActionLink } from '@patternfly/react-core';
+import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -488,6 +488,12 @@ describe('Message', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { 'aria-label': 'test' } }));
         expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
     });
+    it('should be able to add custom actions to CodeMessage', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: {
+                customActions: (_jsx(CodeBlockAction, { children: _jsx(Button, { children: "New custom action" }) }))
+            } }));
+        expect(screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+    });
     it('should handle hasRoundAvatar correctly when it is true', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", hasRoundAvatar: true }));
         expect(screen.getByRole('img')).toBeTruthy();
@@ -820,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/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/esm/MessageBar/AttachButton.js

@@ -16,12 +16,12 @@ import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import { useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@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 = _jsx(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 } = useDropzone(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
         maxSize,
         maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
     return (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), _jsx(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: _jsx(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: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PaperclipIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
+                aria: "none" }, tooltipProps, { children: _jsx(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: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: icon }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
 };
 export const AttachButton = forwardRef((props, ref) => (_jsx(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

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

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

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