@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.20

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 } 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 */
@@ -76,9 +78,19 @@ 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;
+  /** 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;
+  /** 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,
@@ -95,21 +107,27 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onChange,
   displayMode,
   value,
+  isCompact = false,
+  allowedFileTypes,
+  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';
 
   const setInitialLineHeight = (field: HTMLTextAreaElement) => {
     field.style.setProperty('line-height', '1rem');
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-top', topMargin);
       parent.style.setProperty('margin-bottom', `0rem`);
       parent.style.setProperty('height', 'inherit');
 
@@ -135,8 +153,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       parent.style.setProperty('height', `${height}px`);
 
       if (height > 32 || window.innerWidth <= 507) {
-        parent.style.setProperty('margin-bottom', `1rem`);
-        parent.style.setProperty('margin-top', `1rem`);
+        parent.style.setProperty('margin-bottom', topMargin);
+        parent.style.setProperty('margin-top', topMargin);
       }
     }
   };
@@ -147,7 +165,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;
@@ -160,12 +178,12 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const handleNewLine = (field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-bottom', `1rem`);
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-bottom', topMargin);
+      parent.style.setProperty('margin-top', topMargin);
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const field = textareaRef.current;
     if (field) {
       if (field.value === '') {
@@ -196,19 +214,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);
@@ -216,7 +234,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) {
@@ -232,7 +250,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   );
 
   // Handle sending message
-  const handleSend = React.useCallback(
+  const handleSend = useCallback(
     (newMessage: string | number) => {
       onSendMessage(newMessage);
       setHasSentMessage(true);
@@ -241,8 +259,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) {
@@ -265,7 +283,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 = () => {
@@ -274,6 +292,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         <StopButton
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.stop?.tooltipProps}
           {...buttonProps?.stop?.props}
         />
       );
@@ -286,6 +306,9 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={handleAttachMenuToggle}
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
+            isCompact={isCompact}
+            tooltipProps={buttonProps?.attach?.tooltipProps}
+            allowedFileTypes={allowedFileTypes}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -295,6 +318,9 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
             inputTestId={buttonProps?.attach?.inputTestId}
+            isCompact={isCompact}
+            tooltipProps={buttonProps?.attach?.tooltipProps}
+            allowedFileTypes={allowedFileTypes}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -305,6 +331,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
+            isCompact={isCompact}
+            tooltipProps={buttonProps?.microphone?.tooltipProps}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -314,6 +342,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={() => handleSend(message)}
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
+            isCompact={isCompact}
+            tooltipProps={buttonProps?.send?.tooltipProps}
             {...buttonProps?.send?.props}
           />
         )}
@@ -323,7 +353,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const messageBarContents = (
     <>
-      <div className="pf-chatbot__message-bar-input">
+      <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
           value={message}
@@ -366,4 +396,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.scss

@@ -46,3 +46,13 @@
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.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/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';
@@ -24,9 +26,10 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipContent?: { active?: string; inactive?: string };
   /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
   language?: string;
+  isCompact?: boolean;
 }
 
-export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
+export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
   isListening,
   onIsListeningChange,
   onSpeechRecognition,
@@ -34,14 +37,15 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
   language = 'en-US',
+  isCompact,
   ...props
 }: 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);
@@ -49,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);
@@ -57,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)();
@@ -102,14 +106,16 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
     >
       <Button
         variant="plain"
-        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
-        aria-label={props['aria-label'] || 'Microphone button'}
+        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+        aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
+        aria-pressed={isListening}
         onClick={isListening ? stopListening : startListening}
         icon={
-          <Icon iconSize="xl" isInline>
+          <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
             <MicrophoneIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
         {...props}
       />
     </Tooltip>

package/src/MessageBar/SendButton.scss

@@ -51,3 +51,13 @@
     transform: translate3d(0, 0, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.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/SendButton.test.tsx

@@ -1,34 +1,33 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { SendButton } from './SendButton';
 import { TooltipProps } from '@patternfly/react-core';
 
-const renderSend = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProps, 'content'> }) => {
   const spy = jest.fn();
   render(<SendButton onClick={spy} {...props} />);
 };
 describe('Send button', () => {
   it('should render button correctly', () => {
     renderSend();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<SendButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<SendButton onClick={jest.fn} 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('should handle className prop', () => {
     renderSend({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
   });
 
   it('should handle spread props, including aria-label', () => {
@@ -37,7 +36,11 @@ describe('Send button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderSend({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
   });
+  it('should handle isCompact', () => {
+    renderSend({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });