@patternfly/chatbot 6.3.0-prerelease.22 → 6.3.0-prerelease.24

package/src/MessageBar/AttachButton.tsx

@@ -7,7 +7,7 @@ import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { Accept, 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 {
@@ -33,7 +33,24 @@ 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: FunctionComponent<AttachButtonProps> = ({
@@ -47,12 +64,28 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   inputTestId,
   isCompact,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
     onDropAccepted: onAttachAccepted,
-    accept: allowedFileTypes
+    accept: allowedFileTypes,
+    minSize,
+    maxSize,
+    maxFiles,
+    disabled: isAttachmentDisabled,
+    onDrop: onAttach,
+    onDropRejected: onAttachRejected,
+    validator,
+    ...dropzoneProps
   });
 
   return (

package/src/MessageBar/MessageBar.tsx

@@ -1,6 +1,6 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Accept } from 'react-dropzone/.';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
@@ -53,6 +53,28 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   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 */
@@ -80,12 +102,6 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   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>;
 }
@@ -109,6 +125,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   value,
   isCompact = false,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   innerRef,
   ...props
 }: MessageBarProps) => {
@@ -309,6 +333,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             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}
           />
         )}
@@ -321,6 +353,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             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}
           />
         )}

package/src/ResponseActions/ResponseActions.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ResponseActions from './ResponseActions';
+import ResponseActions, { ActionProps } from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
@@ -129,6 +129,103 @@ describe('ResponseActions', () => {
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
+
+  it('should handle isClicked prop within group of buttons correctly', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set "listen" button as active if its `isClicked` is true', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+            listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    expect(screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    expect(screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should prioritize "positive" when both "positive" and "negative" are set to clicked', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    // Positive button should take precendence
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set an additional action button as active if it is initially clicked and no predefined are clicked', async () => {
+    const [additionalActions] = CUSTOM_ACTIONS;
+    const customActions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false },
+      ...Object.keys(additionalActions).reduce((acc, actionKey) => {
+        acc[actionKey] = {
+          ...additionalActions[actionKey],
+          'data-testid': actionKey,
+          isClicked: actionKey === 'regenerate'
+        };
+        return acc;
+      }, {})
+    };
+    render(<ResponseActions actions={customActions} />);
+
+    Object.keys(customActions).forEach((actionKey) => {
+      if (actionKey === 'regenerate') {
+        expect(screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+      } else {
+        // Other actions should not have clicked class
+        expect(screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+      }
+    });
+  });
+
+  it('should activate the clicked button and deactivate any previously active button', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+    };
+    render(<ResponseActions actions={actions} />);
+
+    const negativeBtn = screen.getByTestId('negative');
+    const positiveBtn = screen.getByTestId('positive');
+    // negative button is initially clicked
+    expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(positiveBtn);
+
+    // positive button should now have the clicked class
+    expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);

package/src/ResponseActions/ResponseActions.tsx

@@ -55,12 +55,40 @@ export interface ResponseActionProps {
 
 export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
   const [activeButton, setActiveButton] = useState<string>();
+  const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+  useEffect(() => {
+    // Define the order of precedence for checking initial `isClicked`
+    const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+    let initialActive: string | undefined;
+
+    // Check predefined actions first based on precedence
+    for (const actionName of actionPrecedence) {
+      const actionProp = actions[actionName as keyof typeof actions];
+      if (actionProp?.isClicked) {
+        initialActive = actionName;
+        break;
+      }
+    }
+    // If no predefined action was initially clicked, check additionalActions
+    if (!initialActive) {
+      const clickedActionName = Object.keys(additionalActions).find(
+        (actionName) => !actionPrecedence.includes(actionName) && additionalActions[actionName]?.isClicked
+      );
+      initialActive = clickedActionName;
+    }
+    if (initialActive) {
+      // Click state is explicitly controlled by consumer.
+      setClickStatePersisted(true);
+    }
+    setActiveButton(initialActive);
+  }, [actions]);
+
   const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (e) => {
-      if (responseActions.current && !responseActions.current.contains(e.target)) {
+      if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
       }
     };
@@ -69,13 +97,14 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [clickStatePersisted]);
 
   const handleClick = (
     e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
+    setClickStatePersisted(false);
     setActiveButton(id);
     onClick && onClick(e);
   };