@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.0

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Complete Card
 // ============================================================================
-import React from 'react';
+import type { MouseEvent as ReactMouseEvent, FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import { Card, CardBody, CardHeader, CardProps, CardTitle, OUIAProps, useOUIAProps } from '@patternfly/react-core';
@@ -46,7 +48,7 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
   timestamp?: string;
 }
 
-const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> = ({
+const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps> = ({
   className,
   title = 'Feedback submitted',
   body = "We've received your response. Thank you for sharing your feedback!",
@@ -66,21 +68,21 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isCompact,
   ...props
 }: UserFeedbackCompleteProps) => {
-  const [timedOut, setTimedOut] = React.useState(false);
-  const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
-  const [isMouseOver, setIsMouseOver] = React.useState<boolean | undefined>();
-  const [containsFocus, setContainsFocus] = React.useState<boolean | undefined>();
+  const [timedOut, setTimedOut] = useState(false);
+  const [timedOutAnimation, setTimedOutAnimation] = useState(true);
+  const [isMouseOver, setIsMouseOver] = useState<boolean | undefined>();
+  const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = useRef<HTMLDivElement>(null);
   const ouiaProps = useOUIAProps('User Feedback Complete', ouiaId, ouiaSafe);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
     if (calculatedTimeout > 0) {
       const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
@@ -88,7 +90,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     }
   }, [timeout]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
         if (divRef.current.contains(document.activeElement)) {
@@ -103,14 +105,14 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return () => document.removeEventListener('focus', onDocumentFocus, true);
   }, [containsFocus]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (containsFocus === false || isMouseOver === false) {
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
   }, [containsFocus, isMouseOver, timeoutAnimation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dismissed && onTimeout && onTimeout();
   }, [dismissed, onTimeout]);
 
@@ -118,13 +120,13 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     return null;
   }
 
-  const myOnMouseEnter = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseEnter = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(true);
     setTimedOutAnimation(false);
     onMouseEnter && onMouseEnter(ev);
   };
 
-  const myOnMouseLeave = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const myOnMouseLeave = (ev: ReactMouseEvent<HTMLDivElement>) => {
     setIsMouseOver(false);
     onMouseLeave && onMouseLeave(ev);
   };

package/src/Message/index.ts

@@ -1,3 +1,4 @@
 export { default } from './Message';
+export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 
 export * from './Message';

package/src/MessageBar/AttachButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -7,11 +6,11 @@ import { AttachButton } from './AttachButton';
 describe('Attach button', () => {
   it('should render button correctly', () => {
     render(<AttachButton />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
   });
   it('should handle isDisabled prop', () => {
     render(<AttachButton isDisabled />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
   });
   it('should handle spread props, including aria-label', () => {
     render(<AttachButton aria-label="test" />);
@@ -20,22 +19,22 @@ describe('Attach button', () => {
   it('should handle onClick', async () => {
     const spy = jest.fn();
     render(<AttachButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle className prop', () => {
     render(<AttachButton className="test" />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
   });
   it('should handle custom tooltip correctly', async () => {
     render(<AttachButton onClick={jest.fn} 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('should handle tooltipProps prop', async () => {
     render(<AttachButton tooltipProps={{ id: 'test' }} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
   });
   // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
@@ -43,7 +42,7 @@ describe('Attach button', () => {
   it('should handle onAttachAccepted prop', async () => {
     const spy = jest.fn();
     render(<AttachButton onAttachAccepted={spy} inputTestId="input" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    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);
@@ -54,4 +53,124 @@ describe('Attach button', () => {
     render(<AttachButton isCompact data-testid="button" />);
     expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
   });
+
+  it('should set correct accept attribute on file input', async () => {
+    render(<AttachButton inputTestId="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+  });
+
+  it('should call onAttachAccepted when file type is accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).toHaveBeenCalled();
+    const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+    expect(attachedFile).toEqual(file);
+  });
+
+  it('should not call onAttachAccepted when file type is not accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).not.toHaveBeenCalled();
+  });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" minSize={1000} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxSize={100} onAttachRejected={onAttachRejected} />);
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxFiles={1} onAttachRejected={onAttachRejected} />);
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    render(<AttachButton inputTestId="input" isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    render(<AttachButton inputTestId="input" onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" validator={validator} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });

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'));
+  });
 });