@patternfly/chatbot 6.3.0-prerelease.8 → 6.3.0

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>

package/src/MessageBar/SendButton.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';
@@ -12,23 +11,23 @@ const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 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,7 @@ 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', () => {

package/src/MessageBar/SendButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Send
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -17,10 +17,11 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  /** Whether send button has compact styling */
   isCompact?: boolean;
 }
 
-export const SendButton: React.FunctionComponent<SendButtonProps> = ({
+export const SendButton: FunctionComponent<SendButtonProps> = ({
   className,
   onClick,
   tooltipProps,
@@ -43,7 +44,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     <Button
       variant="plain"
       className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-      aria-label={props['aria-label'] || 'Send button'}
+      aria-label={props['aria-label'] || 'Send'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBar/StopButton.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';
@@ -12,23 +11,23 @@ const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 describe('Stop button', () => {
   it('should render button correctly', () => {
     renderStop();
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<StopButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<StopButton onClick={jest.fn} 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('should handle className prop', () => {
     renderStop({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
   });
   it('should handle spread props, including aria-label', () => {
     renderStop({ 'aria-label': 'test' });
@@ -36,7 +35,7 @@ describe('Stop button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderStop({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
   });
   it('should handle isCompact', () => {

package/src/MessageBar/StopButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Stop
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -15,10 +15,11 @@ export interface StopButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Stop" used in the tooltip */
   tooltipContent?: string;
+  /** Whether stop button has compact styling */
   isCompact?: boolean;
 }
 
-export const StopButton: React.FunctionComponent<StopButtonProps> = ({
+export const StopButton: FunctionComponent<StopButtonProps> = ({
   className,
   onClick,
   tooltipProps,
@@ -41,7 +42,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     <Button
       className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variant="link"
-      aria-label={props['aria-label'] || 'Stop button'}
+      aria-label={props['aria-label'] || 'Stop'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBox/JumpButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import JumpButton from './JumpButton';
@@ -7,20 +6,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Jump to Top
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
@@ -18,13 +18,13 @@ export interface JumpButtonProps {
   isHidden?: boolean;
 }
 
-const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
   isHidden ? null : (
     <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position} button`}
+        aria-label={`Jump ${position}`}
         onClick={onClick}
       >
         <Icon iconSize="lg" isInline>