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

package/src/MessageBar/MessageBar.scss

@@ -21,17 +21,43 @@
   justify-content: flex-end;
   background-color: var(--pf-t--global--background--color--primary--default);
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
-  transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
+  transition: border-color var(--pf-t--global--motion--timing-function--accelerate)
     var(--pf-t--global--motion--duration--sm);
+  position: relative;
+  border: var(--pf-t--global--border--width--control--default) solid transparent;
 
   overflow: hidden;
 
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--pf-t--global--border--width--control--default) solid transparent;
+    pointer-events: none;
+    transition:
+      border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+      border-width var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
+  }
+
+  &.pf-m-primary {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+    }
+  }
+
   &:hover {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+      border-width: var(--pf-t--global--border--width--control--hover);
+    }
   }
 
   &:focus-within {
-    box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    &::after {
+      border-color: var(--pf-t--global--color--brand--default);
+      border-width: var(--pf-t--global--border--width--control--clicked);
+    }
   }
 
   &-actions {
@@ -40,6 +66,19 @@
     padding-block-start: var(--pf-t--global--spacer--xs);
     padding-block-end: var(--pf-t--global--spacer--xs);
     gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+
+    &.pf-m-grouped {
+      flex-basis: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &-actions-group {
+    display: flex;
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+    align-items: center;
   }
 
   &-input {
@@ -121,9 +160,30 @@
   .pf-chatbot__message-textarea {
     font-size: var(--pf-t--global--font--size--sm) !important;
   }
+}
+
+.pf-m-compact {
+  .pf-chatbot__message-bar-actions,
+  .pf-chatbot__message-bar-actions-group {
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
+  }
+}
 
-  .pf-chatbot__message-bar-actions {
-    padding-block-start: var(--pf-t--global--spacer--md);
-    padding-block-end: var(--pf-t--global--spacer--md);
+// ============================================================================
+// Multiline textarea styles (2+ lines)
+// ============================================================================
+.pf-chatbot__message-bar.pf-m-multiline {
+  border-radius: calc(var(--pf-t--global--border--radius--small) * 2);
+}
+
+// ============================================================================
+// High contrast styles
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  .pf-chatbot__message-bar {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+    }
   }
 }

package/src/MessageBar/MessageBar.test.tsx

@@ -1,5 +1,11 @@
 import '@testing-library/jest-dom';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import {
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuSearchInputProps,
+  MenuSearchProps
+} from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -218,6 +224,71 @@ describe('Message bar', () => {
     await userEvent.click(attachButton);
     expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
   });
+  it('can pass searchInputProps to search input in AttachMenu', () => {
+    render(
+      <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(
+      <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' } as MenuSearchProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search')).toBeTruthy();
+  });
+  it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+    render(
+      <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' } as MenuSearchInputProps
+        }}
+      />
+    );
+    expect(screen.getByTestId('menu-search-input')).toBeTruthy();
+  });
+  it('can remove input from attach menu', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
+  });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
     expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
@@ -268,6 +339,20 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can change attach button icon', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        buttonProps={{
+          attach: {
+            icon: <img alt="" src="" />
+          }
+        }}
+      />
+    );
+    expect(screen.getByRole('img')).toBeVisible();
+  });
 
   // Stop button
   // --------------------------------------------------------------------------
@@ -387,4 +472,47 @@ describe('Message bar', () => {
     ref.current?.focus();
     expect(document.activeElement).toBe(screen.getByRole('textbox'));
   });
+  it('should handle isPrimary', () => {
+    const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+
+  it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAiIndicator />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
+  });
+
+  it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} isThinking />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
+  });
+
+  it('Renders with flex-basis of auto by default', () => {
+    render(<MessageBar onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: auto;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
+    render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
+    render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,12 +1,21 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
-import { ButtonProps, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import {
+  ButtonProps,
+  MenuSearchInputProps,
+  MenuSearchProps,
+  SearchInputProps,
+  TextArea,
+  TextAreaProps,
+  TooltipProps
+} from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
-import { AttachButton } from './AttachButton';
+import { AttachButton, AttachButtonProps } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 import { ChatbotDisplayMode } from '../Chatbot';
@@ -21,7 +30,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 */
@@ -30,6 +39,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'> {
@@ -43,6 +58,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   placeholder?: string;
   /** Flag to disable/enable the Attach button  */
   hasAttachButton?: boolean;
+  /** Whether the attach button is rendered before or after the message input. */
+  attachButtonPosition?: 'start' | 'end';
   /** Flag to enable the Microphone button  */
   hasMicrophoneButton?: boolean;
   /** Placeholder text when listening */
@@ -81,12 +98,7 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: {
-      tooltipContent?: string;
-      props?: ButtonProps;
-      inputTestId?: string;
-      tooltipProps?: Omit<TooltipProps, 'content'>;
-    };
+    attach?: AttachButtonProps & { props?: ButtonProps };
     stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
@@ -104,6 +116,16 @@ 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;
+  /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container.  */
+  additionalActions?: React.ReactNode;
+  /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
+  forceMultilineLayout?: boolean;
+  /** @beta Flag indicating whether the message bar has an AI indicator border. */
+  hasAiIndicator?: boolean;
+  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+  isThinking?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -112,6 +134,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   alwayShowSendButton,
   placeholder = 'Send a message...',
   hasAttachButton = true,
+  attachButtonPosition = 'end',
   hasMicrophoneButton,
   listeningText = 'Listening',
   handleAttach,
@@ -134,6 +157,11 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   validator,
   dropzoneProps,
   innerRef,
+  isPrimary,
+  additionalActions,
+  forceMultilineLayout = false,
+  hasAiIndicator,
+  isThinking,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -142,12 +170,21 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
+
+  const shouldForceMultiline = forceMultilineLayout || additionalActions;
+  const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
 
   const topMargin = '1rem';
 
+  useEffect(() => {
+    if (value !== undefined && value !== message) {
+      setMessage(value);
+    }
+  }, [value, message]);
+
   const setInitialLineHeight = (field: HTMLTextAreaElement) => {
     field.style.setProperty('line-height', '1rem');
     const parent = field.parentElement;
@@ -158,7 +195,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
       const grandparent = parent.parentElement;
       if (grandparent) {
-        grandparent.style.setProperty('flex-basis', 'auto');
+        grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
       }
     }
   };
@@ -190,11 +227,24 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
+  const checkIfMultiline = useCallback(
+    (field: HTMLTextAreaElement) => {
+      const parent = field.parentElement;
+      const grandparent = parent?.parentElement;
+      if (grandparent) {
+        const containerHeight = grandparent.offsetHeight;
+        const threshold = isCompact ? 56 : 70;
+        setIsMultiline(containerHeight > threshold);
+      }
+    },
+    [isCompact]
+  );
+
   const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
       const grandparent = parent.parentElement;
-      if (textIsLongerThan2Lines(field) && grandparent) {
+      if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
         grandparent.style.setProperty('flex-basis', `100%`);
       }
     }
@@ -244,12 +294,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     if (field) {
       if (field.value === '') {
         setInitialLineHeight(field);
+        !shouldForceMultiline && setIsMultiline(false);
       } else {
         setAutoHeight(field);
         setAutoWidth(field);
+        !shouldForceMultiline && checkIfMultiline(field);
       }
     }
-  }, [displayMode, message, setAutoWidth]);
+  }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
 
   useEffect(() => {
     const field = textareaRef.current;
@@ -265,13 +317,15 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
       if (textareaRef.current) {
         if (event.target.value === '') {
           setInitialLineHeight(textareaRef.current);
+          !shouldForceMultiline && setIsMultiline(false);
         } else {
           setAutoHeight(textareaRef.current);
+          !shouldForceMultiline && checkIfMultiline(textareaRef.current);
         }
       }
       setMessage(event.target.value);
     },
-    [onChange]
+    [onChange, checkIfMultiline]
   );
 
   // Handle sending message
@@ -328,6 +382,55 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
   };
 
+  const renderAttachButton = () => {
+    if (!attachMenuProps && hasAttachButton) {
+      return (
+        <AttachButton
+          onAttachAccepted={handleAttach}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          inputTestId={buttonProps?.attach?.inputTestId}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+          {...buttonProps?.attach?.props}
+        />
+      );
+    }
+    if (attachMenuProps) {
+      return (
+        <AttachButton
+          ref={attachButtonRef}
+          onClick={handleAttachMenuToggle}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+        />
+      );
+    }
+  };
+
+  const isAttachButtonAtStart = attachButtonPosition === 'start';
   const renderButtons = () => {
     if (hasStopButton && handleStopButton) {
       return (
@@ -342,46 +445,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     }
     return (
       <>
-        {attachMenuProps && (
-          <AttachButton
-            ref={attachButtonRef}
-            onClick={handleAttachMenuToggle}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach?.props}
-          />
-        )}
-        {!attachMenuProps && hasAttachButton && (
-          <AttachButton
-            onAttachAccepted={handleAttach}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            inputTestId={buttonProps?.attach?.inputTestId}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach?.props}
-          />
-        )}
+        {!isAttachButtonAtStart && renderAttachButton()}
         {hasMicrophoneButton && (
           <MicrophoneButton
             isListening={isListeningMessage}
@@ -409,8 +473,12 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     );
   };
 
+  const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
   const messageBarContents = (
     <>
+      {isAttachButtonAtStart && !isMultiline && (
+        <div className="pf-chatbot__message-bar-actions test">{renderAttachButton()}</div>
+      )}
       <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
@@ -425,7 +493,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           {...props}
         />
       </div>
-      <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
+      <div className={css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped')}>
+        {hasGroupedActions ? (
+          <>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>
+              {isAttachButtonAtStart && renderAttachButton()}
+              {additionalActions}
+            </div>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>{renderButtons()}</div>
+          </>
+        ) : (
+          renderButtons()
+        )}
+      </div>
     </>
   );
 
@@ -433,7 +513,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return (
       <AttachMenu
         toggle={(toggleRef) => (
-          <div ref={toggleRef} className={`pf-chatbot__message-bar ${className ?? ''}`}>
+          <div ref={toggleRef} className={css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className)}>
             {messageBarContents}
           </div>
         )}
@@ -449,11 +529,25 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })}
         popperProps={{ direction: 'up', distance: 8 }}
         searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder}
+        {...attachMenuProps}
       />
     );
   }
 
-  return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
+  return (
+    <div
+      className={css(
+        'pf-chatbot__message-bar',
+        isPrimary && 'pf-m-primary',
+        hasAiIndicator && 'pf-v6-m-ai-indicator',
+        isThinking && 'pf-v6-m-thinking',
+        isMultiline && 'pf-m-multiline',
+        className
+      )}
+    >
+      {messageBarContents}
+    </div>
+  );
 };
 
 const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (

package/src/MessageBar/MicrophoneButton.scss

@@ -53,6 +53,5 @@
 .pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/SendButton.scss

@@ -58,6 +58,5 @@
 .pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/StopButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }