@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.1

package/src/MessageBar/AttachButton.tsx

@@ -1,11 +1,13 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Attach
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { useDropzone } from 'react-dropzone';
+import { Accept, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {
@@ -13,6 +15,12 @@ export interface AttachButtonProps extends ButtonProps {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Callback function for AttachButton when an attachment is made */
   onAttachAccepted?: (data: File[], event: DropEvent) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *  allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
   /** Class name for AttachButton */
   className?: string;
   /** Props to control if the AttachButton should be disabled */
@@ -25,10 +33,27 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  /** Whether button is compact */
   isCompact?: boolean;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+  /** Additional props passed to react-dropzone */
+  dropzoneProps?: DropzoneOptions;
 }
 
-const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
+const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachAccepted,
   onClick,
   isDisabled,
@@ -38,11 +63,29 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   tooltipContent = 'Attach',
   inputTestId,
   isCompact,
+  allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
-    onDropAccepted: onAttachAccepted
+    onDropAccepted: onAttachAccepted,
+    accept: allowedFileTypes,
+    minSize,
+    maxSize,
+    maxFiles,
+    disabled: isAttachmentDisabled,
+    onDrop: onAttach,
+    onDropRejected: onAttachRejected,
+    validator,
+    ...dropzoneProps
   });
 
   return (
@@ -65,7 +108,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
           variant="plain"
           ref={innerRef}
           className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-          aria-label={props['aria-label'] || 'Attach button'}
+          aria-label={props['aria-label'] || 'Attach'}
           isDisabled={isDisabled}
           onClick={onClick ?? open}
           icon={
@@ -81,6 +124,6 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   );
 };
 
-export const AttachButton = React.forwardRef((props: AttachButtonProps, ref: React.Ref<any>) => (
+export const AttachButton = forwardRef((props: AttachButtonProps, ref: Ref<any>) => (
   <AttachButtonBase innerRef={ref} {...props} />
 ));

package/src/MessageBar/MessageBar.test.tsx

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
-import React from 'react';
 import { DropdownGroup, DropdownItem, DropdownList } 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';
+import { createRef } from 'react';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
 import { MessageBar } from './MessageBar';
 
@@ -73,9 +73,9 @@ describe('Message bar', () => {
   });
   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('button', { name: 'Attach' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
   });
   it('can send via enter key', async () => {
@@ -110,15 +110,15 @@ describe('Message bar', () => {
     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' })).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();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
   });
   it('can click send button', async () => {
     const spy = jest.fn();
@@ -126,28 +126,39 @@ describe('Message bar', () => {
     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' });
+    const sendButton = screen.getByRole('button', { name: 'Send' });
     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();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).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();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).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' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for send', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        alwayShowSendButton
+        buttonProps={{ send: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for send', async () => {
     render(
       <MessageBar
@@ -203,13 +214,13 @@ describe('Message bar', () => {
     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' });
+    const attachButton = screen.getByRole('button', { name: 'Attach' });
     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();
+    expect(screen.queryByRole('button', { name: 'Attach' })).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
@@ -223,19 +234,30 @@ describe('Message bar', () => {
         buttonProps={{ attach: { inputTestId: 'input' } }}
       />
     );
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     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 () => {
+  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' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for attach', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        alwayShowSendButton
+        buttonProps={{ attach: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for attach', async () => {
     render(
       <MessageBar
@@ -251,12 +273,12 @@ describe('Message bar', () => {
   // --------------------------------------------------------------------------
   it('can show stop button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={jest.fn} />);
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).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' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('can handle buttonProps tooltipContent appropriately for stop', async () => {
@@ -268,9 +290,21 @@ describe('Message bar', () => {
         buttonProps={{ stop: { tooltipContent: 'Test' } }}
       />
     );
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for stop', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasStopButton
+        handleStopButton={jest.fn}
+        buttonProps={{ stop: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for stop', async () => {
     render(
       <MessageBar
@@ -287,12 +321,12 @@ describe('Message bar', () => {
   // --------------------------------------------------------------------------
   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();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
   });
   it('can show microphone button', () => {
     mockSpeechRecognition();
     render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
-    expect(screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
   });
   it('can handle buttonProps appropriately for microphone', async () => {
     mockSpeechRecognition();
@@ -305,18 +339,29 @@ describe('Message bar', () => {
         }}
       />
     );
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
     expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop listening' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
   it('can customize the listening placeholder', async () => {
     mockSpeechRecognition();
     render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
     const input = screen.getByRole('textbox', { name: /I am listening/i });
     expect(input).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasMicrophoneButton
+        buttonProps={{ microphone: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for microphone', async () => {
     mockSpeechRecognition();
     render(
@@ -330,10 +375,16 @@ describe('Message bar', () => {
   });
   it('can be controlled', () => {
     render(<MessageBar onSendMessage={jest.fn} value="test" />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
   });
+  it('should focus textarea when using a custom ref', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<MessageBar onSendMessage={jest.fn} innerRef={ref} />);
+    ref.current?.focus();
+    expect(document.activeElement).toBe(screen.getByRole('textbox'));
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
@@ -30,7 +32,7 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
 
-export interface MessageBarProps extends TextAreaProps {
+export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   /** Callback to get the value of input message by user */
   onSendMessage: (message: string | number) => void;
   /** Class Name for the MessageBar component */
@@ -51,6 +53,28 @@ export interface MessageBarProps extends TextAreaProps {
   handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Callback function for when attach button is used to upload a file */
   handleAttach?: (data: File[], event: DropEvent) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+  /** Additional props passed to react-dropzone */
+  dropzoneProps?: DropzoneOptions;
   /** 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 */
@@ -76,10 +100,13 @@ export interface MessageBarProps extends TextAreaProps {
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
   /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
   displayMode?: ChatbotDisplayMode;
+  /** Whether message bar is compact */
   isCompact?: boolean;
+  /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+  innerRef?: React.Ref<HTMLTextAreaElement>;
 }
 
-export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
+export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
@@ -97,15 +124,26 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   displayMode,
   value,
   isCompact = false,
+  allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
+  innerRef,
   ...props
 }: MessageBarProps) => {
   // Text Input
   // --------------------------------------------------------------------------
-  const [message, setMessage] = React.useState<string | number>(value ?? '');
-  const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
-  const [hasSentMessage, setHasSentMessage] = React.useState(false);
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  const attachButtonRef = React.useRef<HTMLButtonElement>(null);
+  const [message, setMessage] = useState<string | number>(value ?? '');
+  const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
+  const [hasSentMessage, setHasSentMessage] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
+  const attachButtonRef = useRef<HTMLButtonElement>(null);
 
   const topMargin = '1rem';
 
@@ -151,7 +189,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
-  const setAutoWidth = React.useCallback((field: HTMLTextAreaElement) => {
+  const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
       const grandparent = parent.parentElement;
@@ -169,7 +207,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       if (field.value === '') {
@@ -200,19 +238,19 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     };
   }, [setAutoWidth]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       if (field.value === '') {
-        setInitialLineHeight(textareaRef.current);
+        setInitialLineHeight(field);
       } else {
-        setAutoHeight(textareaRef.current);
+        setAutoHeight(field);
         setAutoWidth(field);
       }
     }
   }, [displayMode, message, setAutoWidth]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       setInitialLineHeight(field);
@@ -220,7 +258,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     }
   }, [hasSentMessage]);
 
-  const handleChange = React.useCallback(
+  const handleChange = useCallback(
     (event) => {
       onChange && onChange(event, event.target.value);
       if (textareaRef.current) {
@@ -236,7 +274,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   );
 
   // Handle sending message
-  const handleSend = React.useCallback(
+  const handleSend = useCallback(
     (newMessage: string | number) => {
       onSendMessage(newMessage);
       setHasSentMessage(true);
@@ -245,8 +283,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     [onSendMessage]
   );
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
+  const handleKeyDown = useCallback(
+    (event: ReactKeyboardEvent) => {
       if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
@@ -269,7 +307,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const handleSpeechRecognition = (message) => {
     setMessage(message);
-    onChange && onChange({} as React.ChangeEvent<HTMLTextAreaElement>, message);
+    onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
   };
 
   const renderButtons = () => {
@@ -279,6 +317,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
           isCompact={isCompact}
+          tooltipProps={buttonProps?.stop?.tooltipProps}
           {...buttonProps?.stop?.props}
         />
       );
@@ -292,6 +331,16 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             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}
           />
         )}
@@ -302,6 +351,16 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             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}
           />
         )}
@@ -313,6 +372,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.microphone?.tooltipProps}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -323,6 +383,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.send?.tooltipProps}
             {...buttonProps?.send?.props}
           />
         )}
@@ -375,4 +436,9 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   return <div className={`pf-chatbot__message-bar ${className ?? ''}`}>{messageBarContents}</div>;
 };
 
+const MessageBar = forwardRef((props: MessageBarProps, ref: Ref<HTMLTextAreaElement>) => (
+  <MessageBarBase innerRef={ref} {...props} />
+));
+
+export { MessageBar };
 export default MessageBar;

package/src/MessageBar/MicrophoneButton.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Microphone
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { useState, useCallback, useEffect } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -27,7 +29,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   isCompact?: boolean;
 }
 
-export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
+export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
   isListening,
   onIsListeningChange,
   onSpeechRecognition,
@@ -40,10 +42,10 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 }: MicrophoneButtonProps) => {
   // Microphone
   // --------------------------------------------------------------------------
-  const [speechRecognition, setSpeechRecognition] = React.useState<SpeechRecognition>();
+  const [speechRecognition, setSpeechRecognition] = useState<SpeechRecognition>();
 
   // Listen for speech
-  const startListening = React.useCallback(() => {
+  const startListening = useCallback(() => {
     if (speechRecognition) {
       speechRecognition.start();
       onIsListeningChange(true);
@@ -51,7 +53,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   }, [onIsListeningChange, speechRecognition]);
 
   // Stop listening for speech
-  const stopListening = React.useCallback(() => {
+  const stopListening = useCallback(() => {
     if (speechRecognition && isListening) {
       speechRecognition.stop();
       onIsListeningChange(false);
@@ -59,7 +61,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   }, [isListening, onIsListeningChange, speechRecognition]);
 
   // Detect speech recognition browser support
-  React.useEffect(() => {
+  useEffect(() => {
     if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
       // Initialize SpeechRecognition
       const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
@@ -105,7 +107,8 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       <Button
         variant="plain"
         className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-        aria-label={props['aria-label'] || 'Microphone button'}
+        aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
+        aria-pressed={isListening}
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>