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

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 {

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/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,115 @@ 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();
+  });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} minSize={1000} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxSize={100} onAttachRejected={onAttachRejected} />
+    );
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxFiles={1} onAttachRejected={onAttachRejected} />
+    );
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={onFileDrop} isAttachmentDisabled={true} />);
+
+    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).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={onFileDrop} validator={validator} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });

package/src/FileDropZone/FileDropZone.tsx

@@ -1,7 +1,9 @@
-import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
-import React from 'react';
+import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
+import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -12,19 +14,47 @@ 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;
+  /** 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;
 }
 
-const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
+const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   children,
   className,
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
+  allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
-  const [showDropZone, setShowDropZone] = React.useState(false);
+  const [showDropZone, setShowDropZone] = useState(false);
 
   const renderDropZone = () => (
     <>
@@ -40,7 +70,17 @@ const FileDropZone: React.FunctionComponent<FileDropZoneProps> = ({
   return (
     <MultipleFileUpload
       dropzoneProps={{
-        onDrop: () => setShowDropZone(false),
+        accept: allowedFileTypes,
+        onDrop: (acceptedFiles, fileRejections: FileRejection[], event: DropEvent) => {
+          setShowDropZone(false);
+          onAttach && onAttach(acceptedFiles, fileRejections, event);
+        },
+        minSize,
+        maxSize,
+        maxFiles,
+        disabled: isAttachmentDisabled,
+        onDropRejected: onAttachRejected,
+        validator,
         ...props
       }}
       onDragEnter={() => setShowDropZone(true)}

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);
+  }
+}

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,37 +1,98 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  Button,
+  Tooltip,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
+  ExpandableSectionVariant
+} from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExtraProps } from 'react-markdown';
+
+export interface CodeBlockMessageProps {
+  /** Content rendered in code block */
+  children?: React.ReactNode;
+  /** Aria label applied to code block */
+  'aria-label'?: string;
+  /** Class name applied to code block */
+  className?: string;
+  /** Whether code block is expandable */
+  isExpandable?: boolean;
+  /** Additional props passed to expandable section if isExpandable is applied */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Additional props passed to expandable toggle if isExpandable is applied */
+  expandableSectionToggleProps?: ExpandableSectionToggleProps;
+  /** Link text applied to expandable toggle when expanded */
+  expandedText?: string;
+  /** Link text applied to expandable toggle when collapsed */
+  collapsedText?: string;
+}
+
+const DEFAULT_EXPANDED_TEXT = 'Show less';
+const DEFAULT_COLLAPSED_TEXT = 'Show more';
 
 const CodeBlockMessage = ({
   children,
   className,
   'aria-label': ariaLabel,
+  isExpandable = false,
+  expandableSectionProps,
+  expandableSectionToggleProps,
+  expandedText = DEFAULT_EXPANDED_TEXT,
+  collapsedText = DEFAULT_COLLAPSED_TEXT,
   ...props
-}: JSX.IntrinsicElements['code'] & ExtraProps) => {
-  const [copied, setCopied] = React.useState(false);
+}: CodeBlockMessageProps) => {
+  const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const buttonRef = React.useRef();
-  const tooltipID = React.useId();
+  const buttonRef = useRef();
+  const tooltipID = useId();
+  const toggleId = useId();
+  const contentId = useId();
+  const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
+  // Get custom toggle text from data attributes if available - for use with rehype plugins
+  const customExpandedText = props['data-expanded-text'];
+  const customCollapsedText = props['data-collapsed-text'];
+
+  const finalExpandedText = customExpandedText || expandedText;
+  const finalCollapsedText = customCollapsedText || collapsedText;
+
+  if (
+    (customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
+    (customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Message:',
+      'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.'
+    );
+  }
+
+  const onToggle = (isExpanded) => {
+    setIsExpanded(isExpanded);
+  };
+
   // Handle clicking copy button
-  const handleCopy = React.useCallback((event, text) => {
+  const handleCopy = useCallback((event, text) => {
     navigator.clipboard.writeText(text.toString());
     setCopied(true);
   }, []);
 
   // Reset copied state
-  React.useEffect(() => {
+  useEffect(() => {
     if (copied) {
       const timer = setTimeout(() => {
         setCopied(false);
@@ -56,7 +117,7 @@ const CodeBlockMessage = ({
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
-          aria-label={ariaLabel ?? 'Copy code button'}
+          aria-label={ariaLabel ?? 'Copy code'}
           variant="plain"
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
@@ -69,17 +130,40 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block">
+    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
-          {language ? (
-            <SyntaxHighlighter {...props} language={language} style={obsidian} PreTag="div" CodeTag="div" wrapLongLines>
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <>{children}</>
-          )}
+          <>
+            {isExpandable ? (
+              <ExpandableSection
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                {...expandableSectionProps}
+              >
+                {children}
+              </ExpandableSection>
+            ) : (
+              children
+            )}
+          </>
         </CodeBlockCode>
+        {isExpandable && (
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggle}
+            direction="up"
+            toggleId={toggleId}
+            contentId={contentId}
+            hasTruncatedContent
+            className="pf-chatbot__message-code-toggle"
+            {...expandableSectionToggleProps}
+          >
+            {isExpanded ? finalExpandedText : finalCollapsedText}
+          </ExpandableSectionToggle>
+        )}
       </CodeBlock>
     </div>
   );

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Error
 // ============================================================================
 
-import React from 'react';
 import { Alert, AlertProps } from '@patternfly/react-core';
 
 const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (

package/src/Message/ImageMessage/ImageMessage.tsx

@@ -2,10 +2,9 @@
 // Chatbot Main - Message - Content - Image
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 
-const ImageMessage = ({ children, ...props }: JSX.IntrinsicElements['img'] & ExtraProps) => (
+const ImageMessage = ({ children, ...props }: Omit<JSX.IntrinsicElements['img'], 'ref'> & ExtraProps) => (
   <img className="pf-chatbot__message-image" {...props}>
     {children}
   </img>

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Link
 // ============================================================================
 
-import React from 'react';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { ListItem } from '@patternfly/react-core';
 

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
 

package/src/Message/Message.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
-  padding-bottom: var(--pf-t--global--spacer--2xl);
+  padding-bottom: var(--pf-t--global--spacer--xl);
 
   // Avatar
   // --------------------------------------------------------------------------
@@ -48,20 +48,22 @@
 
     // Author name
     .pf-chatbot__message-name {
-      font-family: var(--pf-t--chatbot--heading--font-family);
+      font-family: var(
+        --pf-v6-c-content--heading--FontFamily,
+        redhatdisplayvf,
+        redhatdisplay,
+        helvetica,
+        arial,
+        sans-serif
+      );
       font-weight: 600;
       font-size: var(--pf-t--global--font--size--sm);
     }
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
       font-weight: var(--pf-t--global--font--weight--body--bold);
-
-      .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
-      }
     }
 
     // Timestamp