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

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';
@@ -233,4 +232,17 @@ describe('UserFeedback', () => {
     );
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

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?',
@@ -71,13 +73,14 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   id,
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
+  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();
     }
@@ -86,7 +89,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
   return (
     /* card does not have ref forwarding; hence wrapper div */
     <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
         <CardHeader
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
@@ -95,12 +98,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
           <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
         </CardHeader>
         <CardBody>
-          <Form className="pf-chatbot__feedback-card-form">
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
                 quickResponseContainerProps={quickResponseContainerProps}
                 onSelect={(id) => setSelectedResponse(id)}
+                isCompact={isCompact}
               />
             )}
             {hasTextArea && (

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';
@@ -252,4 +251,8 @@ describe('UserFeedbackComplete', () => {
     render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
     expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
   });
+  it('should handle isCompact', () => {
+    render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
 });

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!",
@@ -63,23 +65,24 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
   isLiveRegion,
   id,
   focusOnLoad = true,
+  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);
@@ -87,7 +90,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
     }
   }, [timeout]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
         if (divRef.current.contains(document.activeElement)) {
@@ -102,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]);
 
@@ -117,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);
   };
@@ -143,8 +146,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
       aria-label={title}
       {...ouiaProps}
     >
-      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+      <Card
+        isCompact={isCompact}
+        className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
+        {...props}
+      >
         <CardHeader
+          className={
+            onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
+          }
           actions={
             /* eslint-disable indent */
             onClose
@@ -200,7 +210,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
           </div>
           <div className="pf-chatbot__feedback-complete-text">
             <CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
-            <CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
+            <CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
           </div>
         </div>
       </Card>

package/src/MessageBar/AttachButton.scss

@@ -34,3 +34,13 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}

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,11 +42,60 @@ 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);
     expect(input.files).toHaveLength(1);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+  it('should handle isCompact', () => {
+    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();
+  });
 });

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, 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,9 +33,10 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  isCompact?: boolean;
 }
 
-const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
+const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachAccepted,
   onClick,
   isDisabled,
@@ -36,11 +45,14 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   innerRef,
   tooltipContent = 'Attach',
   inputTestId,
+  isCompact,
+  allowedFileTypes,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
-    onDropAccepted: onAttachAccepted
+    onDropAccepted: onAttachAccepted,
+    accept: allowedFileTypes
   });
 
   return (
@@ -62,15 +74,16 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
         <Button
           variant="plain"
           ref={innerRef}
-          className={`pf-chatbot__button--attach ${className ?? ''}`}
-          aria-label={props['aria-label'] || 'Attach button'}
+          className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+          aria-label={props['aria-label'] || 'Attach'}
           isDisabled={isDisabled}
           onClick={onClick ?? open}
           icon={
-            <Icon iconSize="xl" isInline>
+            <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
               <PaperclipIcon />
             </Icon>
           }
+          size={isCompact ? 'sm' : undefined}
           {...props}
         />
       </Tooltip>
@@ -78,6 +91,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.scss

@@ -110,3 +110,20 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot__message-bar-input.pf-m-compact {
+  padding-block-start: 0;
+  padding-block-end: 0;
+
+  .pf-chatbot__message-textarea {
+    font-size: var(--pf-t--global--font--size--sm) !important;
+  }
+
+  .pf-chatbot__message-bar-actions {
+    padding-block-start: var(--pf-t--global--spacer--md);
+    padding-block-end: var(--pf-t--global--spacer--md);
+  }
+}