@patternfly/chatbot 2.1.0-prerelease.17

package/src/MessageBar/MessageBar.test.tsx

@@ -0,0 +1,318 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { MessageBar } from './MessageBar';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+
+const ATTACH_MENU_ITEMS = [
+  <DropdownList key="list-1">
+    <DropdownItem className="pf-chatbot-source-details-dropdown-item" value="auth-operator Pod" id="0">
+      <SourceDetailsMenuItem
+        icon={
+          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
+              fill="currentColor"
+            />
+            <g clipPath="url(#clip0_3280_27488)">
+              <path
+                d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_3280_27488">
+                <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
+              </clipPath>
+            </defs>
+          </svg>
+        }
+        name="auth-operator"
+        type="Pod"
+      />
+    </DropdownItem>
+  </DropdownList>,
+  <DropdownGroup key="group2">
+    <DropdownList>
+      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
+        Alerts
+      </DropdownItem>
+      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
+        Events
+      </DropdownItem>
+      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+    </DropdownList>
+  </DropdownGroup>
+];
+
+const originalSpeechRecognition = window.SpeechRecognition;
+
+const mockSpeechRecognition = () => {
+  const MockSpeechRecognition = jest.fn().mockImplementation(() => ({
+    start: jest.fn(),
+    stop: jest.fn()
+  }));
+  (MockSpeechRecognition as any).prototype = {};
+  window.SpeechRecognition = MockSpeechRecognition as any;
+};
+
+describe('Message bar', () => {
+  afterAll(() => {
+    window.SpeechRecognition = originalSpeechRecognition;
+  });
+  it('should render correctly', () => {
+    render(<MessageBar onSendMessage={jest.fn} />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+  });
+  it('can send via enter key', async () => {
+    const spy = jest.fn();
+    render(<MessageBar onSendMessage={spy} />);
+    const input = screen.getByRole('textbox', { name: /Send a message.../i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+    await userEvent.type(input, '[Enter]');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('calls onChange callback appropriately', async () => {
+    const spy = jest.fn();
+    render(<MessageBar onSendMessage={jest.fn} onChange={spy} />);
+    const input = screen.getByRole('textbox', { name: /Send a message.../i });
+    await userEvent.type(input, 'A');
+    expect(input).toHaveTextContent('A');
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
+  });
+
+  // Send button
+  // --------------------------------------------------------------------------
+  it('shows send button when text is input', async () => {
+    render(<MessageBar onSendMessage={jest.fn} />);
+    const input = screen.getByRole('textbox', { name: /Send a message.../i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+  });
+  it('can disable send button shown when text is input', async () => {
+    render(<MessageBar onSendMessage={jest.fn} isSendButtonDisabled />);
+    const input = screen.getByRole('textbox', { name: /Send a message.../i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+  });
+  it('can click send button', async () => {
+    const spy = jest.fn();
+    render(<MessageBar onSendMessage={spy} />);
+    const input = screen.getByRole('textbox', { name: /Send a message.../i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+    const sendButton = screen.getByRole('button', { name: 'Send button' });
+    expect(sendButton).toBeTruthy();
+    await userEvent.click(sendButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('can always show send button', () => {
+    render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton />);
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
+  });
+  it('can disable send button if always showing', () => {
+    render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton isSendButtonDisabled />);
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+  });
+  it('can handle buttonProps tooltipContent  appropriately for send', async () => {
+    render(
+      <MessageBar onSendMessage={jest.fn} alwayShowSendButton buttonProps={{ send: { tooltipContent: 'Test' } }} />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('can handle buttonProps props appropriately for send', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        alwayShowSendButton
+        buttonProps={{ send: { props: { 'aria-label': 'Test' } } }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
+  });
+
+  // Attach button
+  // --------------------------------------------------------------------------
+  it('can show attach menu', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: true,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: jest.fn(),
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: /YAML - All contents/i })).toBeTruthy();
+  });
+  it('can toggle attach menu', async () => {
+    const attachToggleClickSpy = jest.fn();
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        attachMenuProps={{
+          isAttachMenuOpen: false,
+          setIsAttachMenuOpen: jest.fn(),
+          onAttachMenuToggleClick: attachToggleClickSpy,
+          onAttachMenuInputChange: jest.fn(),
+          attachMenuItems: ATTACH_MENU_ITEMS
+        }}
+      />
+    );
+    expect(screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
+    expect(screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
+    const attachButton = screen.getByRole('button', { name: 'Attach button' });
+    await userEvent.click(attachButton);
+    expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
+  });
+  it('can hide attach button', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
+    expect(screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
+  });
+  // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
+  // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
+  it('can handle handleAttach', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        handleAttach={spy}
+        buttonProps={{ attach: { inputTestId: 'input' } }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    const file = new File(['test'], 'test.json');
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    await userEvent.upload(input, file);
+    expect(input.files).toHaveLength(1);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('can handle buttonProps tooltipContent  appropriately for attach', async () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAttachButton buttonProps={{ attach: { tooltipContent: 'Test' } }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('can handle buttonProps props appropriately for attach', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        buttonProps={{ attach: { props: { 'aria-label': 'Test' } } }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
+  });
+
+  // Stop button
+  // --------------------------------------------------------------------------
+  it('can show stop button', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={jest.fn} />);
+    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+  });
+  it('can call handleStopButton', async () => {
+    const spy = jest.fn();
+    render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('can handle buttonProps tooltipContent appropriately for stop', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasStopButton
+        handleStopButton={jest.fn}
+        buttonProps={{ stop: { tooltipContent: 'Test' } }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('can handle buttonProps props appropriately for stop', async () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasStopButton
+        handleStopButton={jest.fn}
+        buttonProps={{ stop: { props: { 'aria-label': 'Test' } } }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
+  });
+
+  // Microphone button
+  // --------------------------------------------------------------------------
+  it('can hide microphone button when window.SpeechRecognition is not there', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
+    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+  });
+  it('can show microphone button', () => {
+    mockSpeechRecognition();
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
+    expect(screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+  });
+  it('can handle buttonProps appropriately for microphone', async () => {
+    mockSpeechRecognition();
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasMicrophoneButton
+        buttonProps={{
+          microphone: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
+  });
+  it('can handle buttonProps props appropriately for microphone', async () => {
+    mockSpeechRecognition();
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasMicrophoneButton
+        buttonProps={{ microphone: { props: { 'aria-label': 'Test' } } }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Test' }));
+  });
+});

package/src/MessageBar/MessageBar.tsx

@@ -0,0 +1,252 @@
+import React from 'react';
+import { ButtonProps, DropEvent } from '@patternfly/react-core';
+
+// Import Chatbot components
+import SendButton from './SendButton';
+import MicrophoneButton from './MicrophoneButton';
+import { AttachButton } from './AttachButton';
+import AttachMenu from '../AttachMenu';
+import StopButton from './StopButton';
+import DOMPurify from 'dompurify';
+
+export interface MessageBarWithAttachMenuProps {
+  /** Flag to enable whether attach menu is open */
+  isAttachMenuOpen: boolean;
+  /** Callback to close attach menu */
+  setIsAttachMenuOpen: (isOpen: boolean) => void;
+  /** Items in menu */
+  attachMenuItems: React.ReactNode;
+  /** 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;
+  /** Function callback called when user selects item in menu. */
+  onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  /** Placeholder for search input */
+  attachMenuInputPlaceholder?: string;
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onAttachMenuOnOpenChangeKeys?: string[];
+  /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
+  onAttachMenuOpenChange?: (isOpen: boolean) => void;
+}
+
+export interface MessageBarProps {
+  /** Callback to get the value of input message by user */
+  onSendMessage: (message: string) => void;
+  /** Class Name for the MessageBar component */
+  className?: string;
+  /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
+  alwayShowSendButton?: boolean;
+  /** Flag to disable/enable the Attach button  */
+  hasAttachButton?: boolean;
+  /** Flag to enable the Microphone button  */
+  hasMicrophoneButton?: boolean;
+  /** Flag to enable the Stop button, used for streaming content */
+  hasStopButton?: boolean;
+  /** Callback function for when stop button is clicked */
+  handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Callback function for when attach button is used to upload a file */
+  handleAttach?: (data: File[], event: DropEvent) => void;
+  /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
+  attachMenuProps?: MessageBarWithAttachMenuProps;
+  /** Flag to provide manual control over whether send button is disabled */
+  isSendButtonDisabled?: boolean;
+  /** Prop to allow passage of additional props to buttons */
+  buttonProps?: {
+    attach?: { tooltipContent?: string; props?: ButtonProps; inputTestId?: string };
+    stop?: { tooltipContent?: string; props?: ButtonProps };
+    send?: { tooltipContent?: string; props?: ButtonProps };
+    microphone?: {
+      tooltipContent?: { active?: string; inactive?: string };
+      props?: ButtonProps;
+    };
+  };
+  /** A callback for when the text area value changes. */
+  onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+}
+
+export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
+  onSendMessage,
+  className,
+  alwayShowSendButton,
+  hasAttachButton = true,
+  hasMicrophoneButton,
+  handleAttach,
+  attachMenuProps,
+  isSendButtonDisabled,
+  handleStopButton,
+  hasStopButton,
+  buttonProps,
+  onChange,
+  ...props
+}: MessageBarProps) => {
+  // Text Input
+  // --------------------------------------------------------------------------
+  const [message, setMessage] = React.useState<string>('');
+  const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
+  const [showPlaceholder, setShowPlaceholder] = React.useState(true);
+  const textareaRef = React.useRef<HTMLDivElement>(null);
+  const attachButtonRef = React.useRef<HTMLButtonElement>(null);
+
+  const handleInput = (event) => {
+    // newMessage === '' doesn't work unless we trim, which causes other problems
+    // textContent seems to work, but doesn't allow for markdown, so we need both
+    const messageText = DOMPurify.sanitize(event.target.textContent);
+    if (messageText === '') {
+      setShowPlaceholder(true);
+      setMessage('');
+      onChange && onChange(event, '');
+    } else {
+      setShowPlaceholder(false);
+      // this is so that tests work; RTL doesn't seem to like event.target.innerText, but browsers don't pick up markdown without it
+      let newMessage = messageText;
+      if (event.target.innerText) {
+        newMessage = DOMPurify.sanitize(event.target.innerText);
+      }
+      setMessage(newMessage);
+      onChange && onChange(event, newMessage);
+    }
+  };
+
+  // Handle sending message
+  const handleSend = React.useCallback(() => {
+    setMessage((m) => {
+      onSendMessage(m);
+      setMessage('');
+      if (textareaRef.current) {
+        textareaRef.current.innerText = '';
+        setShowPlaceholder(true);
+        textareaRef.current.blur();
+      }
+      return '';
+    });
+  }, [onSendMessage]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        if (!isSendButtonDisabled && !hasStopButton) {
+          handleSend();
+        }
+      }
+    },
+    [handleSend]
+  );
+
+  const handleAttachMenuToggle = () => {
+    attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
+    attachMenuProps?.onAttachMenuToggleClick();
+  };
+
+  const renderButtons = () => {
+    if (hasStopButton && handleStopButton) {
+      return (
+        <StopButton
+          onClick={handleStopButton}
+          tooltipContent={buttonProps?.stop?.tooltipContent}
+          {...buttonProps?.stop?.props}
+        />
+      );
+    }
+    return (
+      <>
+        {attachMenuProps && (
+          <AttachButton
+            ref={attachButtonRef}
+            onClick={handleAttachMenuToggle}
+            isDisabled={isListeningMessage}
+            tooltipContent={buttonProps?.attach?.tooltipContent}
+            {...buttonProps?.attach?.props}
+          />
+        )}
+        {!attachMenuProps && hasAttachButton && (
+          <AttachButton
+            onAttachAccepted={handleAttach}
+            isDisabled={isListeningMessage}
+            tooltipContent={buttonProps?.attach?.tooltipContent}
+            inputTestId={buttonProps?.attach?.inputTestId}
+            {...buttonProps?.attach?.props}
+          />
+        )}
+        {hasMicrophoneButton && (
+          <MicrophoneButton
+            isListening={isListeningMessage}
+            onIsListeningChange={setIsListeningMessage}
+            onSpeechRecognition={setMessage}
+            tooltipContent={buttonProps?.microphone?.tooltipContent}
+            {...buttonProps?.microphone?.props}
+          />
+        )}
+        {(alwayShowSendButton || message) && (
+          <SendButton
+            value={message}
+            onClick={handleSend}
+            isDisabled={isSendButtonDisabled}
+            tooltipContent={buttonProps?.send?.tooltipContent}
+            {...buttonProps?.send?.props}
+          />
+        )}
+      </>
+    );
+  };
+
+  const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
+
+  const messageBarContents = (
+    <>
+      <div className="pf-chatbot__message-bar-input">
+        {(showPlaceholder || message === '') && (
+          <div className="pf-chatbot__message-bar-placeholder">{placeholder}</div>
+        )}
+        <div
+          contentEditable
+          suppressContentEditableWarning={true}
+          role="textbox"
+          aria-multiline="false"
+          className="pf-chatbot__message-textarea"
+          onInput={handleInput}
+          onFocus={() => setShowPlaceholder(false)}
+          onBlur={() => {
+            if (message === '') {
+              setShowPlaceholder(!showPlaceholder);
+            }
+          }}
+          aria-label={placeholder}
+          ref={textareaRef}
+          onKeyDown={handleKeyDown}
+          {...props}
+        ></div>
+      </div>
+      <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
+    </>
+  );
+
+  if (attachMenuProps) {
+    return (
+      <AttachMenu
+        toggle={(toggleRef) => (
+          <div ref={toggleRef} className={`pf-chatbot__message-bar ${className ?? ''}`}>
+            {messageBarContents}
+          </div>
+        )}
+        filteredItems={attachMenuProps?.attachMenuItems}
+        {...(attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen })}
+        onOpenChange={(isAttachMenuOpen) => {
+          attachButtonRef.current?.focus();
+          attachMenuProps?.setIsAttachMenuOpen(isAttachMenuOpen);
+          attachMenuProps?.onAttachMenuOpenChange && attachMenuProps?.onAttachMenuOpenChange(isAttachMenuOpen);
+        }}
+        onOpenChangeKeys={attachMenuProps?.onAttachMenuOnOpenChangeKeys}
+        onSelect={attachMenuProps?.onAttachMenuSelect}
+        {...(attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange })}
+        popperProps={{ direction: 'up', distance: '8' }}
+        searchInputPlaceholder={attachMenuProps?.attachMenuInputPlaceholder}
+      />
+    );
+  }
+
+  return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
+};
+
+export default MessageBar;

package/src/MessageBar/MicrophoneButton.scss

@@ -0,0 +1,48 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Microphone
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--microphone {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  padding: var(--pf-t--global--spacer--md);
+  width: 3rem;
+  height: 3rem;
+
+  .pf-v6-c-button__icon {
+    color: var(--pf-t--chatbot--icon--fill);
+  }
+
+  // Interactive states
+  &:hover,
+  &:focus {
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--chatbot--icon--fill--hover);
+    }
+  }
+
+  // Active state (while recording voice)
+  &--active {
+    background-color: var(--pf-t--color--blue--50);
+    animation: motionMicButton var(--pf-t--chatbot--timing-function) calc(var(--pf-t--global--motion--duration--md) * 8)
+      infinite;
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--color--white);
+    }
+
+    &:hover,
+    &:focus {
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--color--white);
+      }
+    }
+  }
+}
+
+@keyframes motionMicButton {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 102, 204, 1);
+  }
+  100% {
+    box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
+  }
+}