@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/src/Message/TableMessage/TdMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
 
-const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
 
 export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
 
-const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
 
 export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -2,10 +2,11 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Thead, TheadProps } from '@patternfly/react-table';
 
-const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+const TheadMessage = ({ children, ...props }: Omit<TheadProps, 'ref'> & ExtraProps) => (
+  <Thead {...props}>{children}</Thead>
+);
 
 export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -2,19 +2,19 @@
 // Chatbot Main - Message - Content - Table
 // ============================================================================
 
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Tr, TrProps } from '@patternfly/react-table';
 
-const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+const TrMessage = ({ children, ...props }: Omit<TrProps, 'ref'> & ExtraProps & { extraHeaders?: string[] }) => {
   let tdIndex = 0;
 
   // passthrough so we can place dataLabel on tds
   // places column name on correct child
   const modifyChildren = (children) =>
-    React.Children.map(children, (child) => {
+    Children.map(children, (child) => {
       if (child.type.name === 'td' && props.extraHeaders) {
-        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        const clonedChild = cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
         tdIndex = tdIndex + 1;
         return clonedChild;
       }

package/src/Message/TextMessage/TextMessage.scss

@@ -3,6 +3,8 @@
 // ============================================================================
 
 .pf-chatbot__message-and-actions {
+  width: 100%;
+
   blockquote {
     .pf-chatbot__message-text {
       display: inline-block;
@@ -10,11 +12,6 @@
   }
 }
 
-// make it full width when there's a table, so the table can grow as needed
-.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
-  width: 100%;
-}
-
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;

package/src/Message/TextMessage/TextMessage.tsx

@@ -2,11 +2,10 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: Omit<ContentProps, 'ref'> & ExtraProps) => (
   <span className="pf-chatbot__message-text">
     <Content component={component} {...props}>
       {children}

package/src/Message/UserFeedback/CloseButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Close Button
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export interface CloseButtonProps extends ButtonProps {
   ariaLabel?: string;
 }
 
-const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+const CloseButton: FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
   <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
 );
 

package/src/Message/UserFeedback/UserFeedback.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';

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Main - Messages - Feedback Card
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
 
 // Import PatternFly components
 import {
@@ -54,7 +56,7 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   timestamp?: string;
 }
 
-const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   className,
   timestamp,
   title = 'Why did you choose this rating?',
@@ -74,11 +76,11 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   isCompact,
   ...props
 }: UserFeedbackProps) => {
-  const [selectedResponse, setSelectedResponse] = React.useState<string>();
-  const [value, setValue] = React.useState('');
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const [selectedResponse, setSelectedResponse] = useState<string>();
+  const [value, setValue] = useState('');
+  const divRef = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (focusOnLoad) {
       divRef.current?.focus();
     }

package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { act, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

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 { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, 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} />
 ));