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

package/src/ChatbotPopover/ChatbotPopover.tsx

@@ -1,12 +1,12 @@
 // ============================================================================
 // Chatbot Popover
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Popover, PopoverProps } from '@patternfly/react-core';
 
-export const ChatbotPopover: React.FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
+export const ChatbotPopover: FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
   <Popover className={`pf-chatbot__popover ${className ?? ''}`} showClose={false} {...props}>
     {children}
   </Popover>

package/src/ChatbotToggle/ChatbotToggle.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/ChatbotToggle/ChatbotToggle.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Toggle
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 
@@ -47,7 +49,7 @@ const ChatIcon = () => (
   </svg>
 );
 
-const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
+const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
   tooltipLabel,
   isChatbotVisible,
   onToggleChatbot,
@@ -87,7 +89,7 @@ const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
   );
 };
 
-const ChatbotToggle = React.forwardRef((props: ChatbotToggleProps, ref: React.Ref<any>) => (
+const ChatbotToggle = forwardRef((props: ChatbotToggleProps, ref: Ref<any>) => (
   <ChatbotToggleBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss

@@ -8,7 +8,6 @@
   gap: var(--pf-t--global--spacer--lg);
 
   .pf-v6-c-content--h1 {
-    --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--3xl); // larger than any of our semantic tokens
     --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--400);
     --pf-v6-c-content--h1--MarginBlockEnd: 0;
   }
@@ -34,6 +33,15 @@
   }
 }
 
+.pf-chatbot--layout--welcome.pf-m-compact {
+  gap: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+
+  .pf-chatbot__prompt-suggestions {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
@@ -69,4 +68,17 @@ describe('ChatbotWelcomePrompt', () => {
     const element = screen.getByTestId('welcome-prompt');
     expect(element).toHaveClass('test');
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        className="test"
+        testId="welcome-prompt"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Layout - Chat - Welcome
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { Content, ContentVariants, Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 
@@ -16,6 +16,7 @@ export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
   /** Custom test id for the WelcomePrompt component */
   testId?: string;
+  isCompact?: boolean;
 }
 
 export interface WelcomePrompt {
@@ -27,15 +28,20 @@ export interface WelcomePrompt {
   onClick?: () => void;
 }
 
-export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptProps> = ({
+export const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps> = ({
   title,
   description,
   prompts,
   className,
   testId,
+  isCompact = false,
   ...props
 }: ChatbotWelcomePromptProps) => (
-  <div data-testid={testId} className={`pf-chatbot--layout--welcome ${className ?? ''}`} {...props}>
+  <div
+    data-testid={testId}
+    className={`pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+    {...props}
+  >
     <Content component={ContentVariants.h1}>
       <span className="pf-chatbot__hello">{title}</span>
       <br />
@@ -45,7 +51,12 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
     {prompts && (
       <div className="pf-chatbot__prompt-suggestions">
         {prompts?.map((prompt, index) => (
-          <Card key={`welcome-prompt-${index}`} className="pf-chatbot__prompt-suggestion" isClickable>
+          <Card
+            key={`welcome-prompt-${index}`}
+            className="pf-chatbot__prompt-suggestion"
+            isClickable
+            isCompact={isCompact}
+          >
             <CardHeader
               selectableActions={{
                 onClickAction: prompt.onClick,

package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
 <div>
   <div
-    class="pf-chatbot--layout--welcome "
+    class="pf-chatbot--layout--welcome  "
   >
     <h1
       class="pf-v6-c-content--h1"

package/src/CodeModal/CodeModal.scss

@@ -61,8 +61,10 @@
   .pf-v6-c-code-editor__header-main {
     display: none;
   }
-  .pf-chatbot__code-modal-file-details {
-    padding-inline-start: var(--pf-t--global--spacer--md);
+  .pf-v6-c-modal-box__close {
+    .pf-v6-c-button.pf-m-plain {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
+    }
   }
 }
 
@@ -78,10 +80,16 @@
   }
 }
 
-.pf-chatbot__code-modal-body {
+.pf-chatbot__code-modal-editor {
   flex: 1;
 }
 
 .pf-chatbot__code-modal--fullscreen {
   height: inherit !important; // override shared modal so code editor works in full screen
 }
+
+.pf-chatbot__code-modal.pf-m-compact {
+  .pf-chatbot__code-modal-body {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/CodeModal/CodeModal.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CodeModal from './CodeModal';
+
+describe('ChatbotModal', () => {
+  it('should render compact modal', () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+      ></CodeModal>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+  });
+
+  it('should render CodeModal with custom classNames', async () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></CodeModal>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
+});

package/src/CodeModal/CodeModal.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useState } from 'react';
 import path from 'path-browserify';
 
 // Import PatternFly components
@@ -40,9 +41,17 @@ export interface CodeModalProps {
   title: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
+export const CodeModal: FunctionComponent<CodeModalProps> = ({
   fileName,
   code,
   codeEditorControlClassName: codeEditorClassName,
@@ -57,11 +66,15 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
   secondaryActionBtn,
   title,
   displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   ...props
 }: CodeModalProps) => {
-  const [newCode, setNewCode] = React.useState(code);
+  const [newCode, setNewCode] = useState(code);
 
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     if (!isReadOnly) {
       onPrimaryAction(_event, newCode);
@@ -70,7 +83,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onSecondaryAction(_event);
   };
@@ -94,16 +107,17 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
       ouiaId="CodeModal"
       aria-labelledby="code-modal-title"
       aria-describedby="code-modal"
-      className={`pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`}
+      className={`pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`}
       displayMode={displayMode}
+      isCompact={isCompact}
     >
-      <ModalHeader title={title} labelId="code-modal-title" />
-      <ModalBody id="code-modal-body">
+      <ModalHeader className={modalHeaderClassName} title={title} labelId="code-modal-title" />
+      <ModalBody className={modalBodyClassName} id="code-modal-body">
         <Stack className="pf-chatbot__code-modal-body">
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem className="pf-chatbot__code-modal-body">
+          <StackItem className="pf-chatbot__code-modal-editor">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}
@@ -125,7 +139,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           </StackItem>
         </Stack>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter className={modalFooterClassName}>
         <Button isBlock key="code-modal-primary" variant="primary" onClick={handlePrimaryAction} form="code-modal-form">
           {primaryActionBtn}
         </Button>

package/src/Compare/Compare.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Compare from './Compare';

package/src/Compare/Compare.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 interface CompareProps {
@@ -24,11 +25,11 @@ export const Compare = ({
   onToggleClick,
   toggleGroupAriaLabel = 'Select which chatbot to display'
 }: PropsWithChildren<CompareProps>) => {
-  const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
-  const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
-  const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+  const [isSelected, setIsSelected] = useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // we want to show the first if we switch to the mobile toggle view
     // and reset/switch back to normal otherwise
     const updateChatbotVisibility = () => {
@@ -50,7 +51,7 @@ export const Compare = ({
 
   // this only happens on mobile
   const handleChildToggleClick = (
-    event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>
+    event: MouseEvent | ReactMouseEvent<any, MouseEvent> | ReactKeyboardEvent<Element>
   ) => {
     const id = event.currentTarget.id;
     setIsSelected(id);

package/src/FileDetails/FileDetails.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetails from './FileDetails';

package/src/FileDetails/FileDetails.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Flex, Stack, StackItem, Truncate } from '@patternfly/react-core';
 import path from 'path-browserify';
 interface FileDetailsProps {
@@ -946,7 +946,7 @@ export const FileDetails = ({
 }: PropsWithChildren<FileDetailsProps>) => {
   const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
   return (
-    <Flex className={`pf-chatbot__file-details ${className}`} gap={{ default: 'gapSm' }}>
+    <Flex className={`pf-chatbot__file-details ${className ? className : ''}`} gap={{ default: 'gapSm' }}>
       <Flex
         className="pf-chatbot__code-icon"
         justifyContent={{ default: 'justifyContentCenter' }}

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FileDetails should render file details 1`] = `
 <div>
   <div
-    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
   >
     <div
       class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetailsLabel from './FileDetailsLabel';

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Button, Label } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
           class="pf-chatbot__file-label-contents"
         >
           <div
-            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
           >
             <div
               class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/FileDropZone/FileDropZone.test.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDropZone from './FileDropZone';
+import userEvent from '@testing-library/user-event';
 
 describe('FileDropZone', () => {
   it('should render file drop zone', () => {
@@ -12,4 +12,32 @@ describe('FileDropZone', () => {
     render(<FileDropZone onFileDrop={jest.fn()}>Hi</FileDropZone>);
     expect(screen.getByText('Hi')).toBeTruthy();
   });
+
+  it('should call onFileDrop when file type is accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).toHaveBeenCalled();
+  });
+
+  it('should not call onFileDrop when file type is not accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
 });

package/src/FileDropZone/FileDropZone.tsx

@@ -1,7 +1,9 @@
 import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
+import { Accept } from 'react-dropzone/.';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -12,19 +14,26 @@ export interface FileDropZoneProps {
   infoText?: string;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
   onFileDrop: (event: DropEvent, data: File[]) => 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;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
 }
 
-const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
+const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   children,
   className,
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
+  allowedFileTypes,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
-  const [showDropZone, setShowDropZone] = React.useState(false);
+  const [showDropZone, setShowDropZone] = useState(false);
 
   const renderDropZone = () => (
     <>
@@ -40,6 +49,7 @@ const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
   return (
     <MultipleFileUpload
       dropzoneProps={{
+        accept: allowedFileTypes,
         onDrop: () => setShowDropZone(false),
         ...props
       }}

package/src/LoadingMessage/LoadingMessage.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import LoadingMessage from './LoadingMessage';

package/src/LoadingMessage/LoadingMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Icon, Split, SplitItem } from '@patternfly/react-core';
 
 import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
@@ -7,7 +7,7 @@ export interface LoadingMessageProps {
   icon?: React.ComponentType;
 }
 
-export const LoadingMessage: React.FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
+export const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
   <Split>
     <SplitItem>
       <Icon size="lg" className="pf-v6-u-mr-sm pf-v6-u-pt-md">

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -80,3 +80,10 @@
   background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
+
+.pf-chatbot__message-code-toggle {
+  .pf-v6-c-button.pf-m-link {
+    --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
+    --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
+  }
+}