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

package/src/MessageBox/MessageBox.tsx

@@ -1,80 +1,227 @@
 // ============================================================================
 // Chatbot Main - Messages
 // ============================================================================
-import React from 'react';
+
+import {
+  HTMLProps,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  forwardRef,
+  ForwardedRef,
+  useImperativeHandle,
+  ReactNode,
+  TouchEventHandler,
+  TouchEvent,
+  WheelEvent,
+  WheelEventHandler
+} from 'react';
 import JumpButton from './JumpButton';
 
-export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
+export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
   announcement?: string;
   /** Custom aria-label for scrollable portion of message box */
   ariaLabel?: string;
   /** Content to be displayed in the message box */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Custom classname for the MessageBox component */
   className?: string;
-  /** Ref applied to message box */
+  /** @deprecated innerRef has been deprecated. Use ref instead. Ref applied to message box  */
   innerRef?: React.Ref<HTMLDivElement>;
   /** Modifier that controls how content in MessageBox is positioned within the container */
   position?: 'top' | 'bottom';
+  /** Click handler for additional logic for when scroll to top jump button is clicked */
+  onScrollToTopClick?: () => void;
+  /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+  onScrollToBottomClick?: () => void;
+  /** Flag to enable automatic scrolling when new messages are added */
+  enableSmartScroll?: boolean;
 }
 
-const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
-  announcement,
-  ariaLabel = 'Scrollable message log',
-  children,
-  innerRef,
-  className,
-  position = 'top',
-  ...props
-}: MessageBoxProps) => {
-  const [atTop, setAtTop] = React.useState(false);
-  const [atBottom, setAtBottom] = React.useState(true);
-  const [isOverflowing, setIsOverflowing] = React.useState(false);
-  const defaultRef = React.useRef<HTMLDivElement>(null);
-  let messageBoxRef;
-  if (innerRef) {
-    messageBoxRef = innerRef;
-  } else {
-    messageBoxRef = defaultRef;
-  }
+export interface MessageBoxHandle extends HTMLDivElement {
+  /** Scrolls to the top of the message box */
+  scrollToTop: (options?: ScrollOptions) => void;
+  /** Scrolls to the bottom of the message box */
+  scrollToBottom: (options?: { resumeSmartScroll?: boolean } & ScrollOptions) => void;
+  /** Returns whether the smart scroll feature is currently active */
+  isSmartScrollActive: () => boolean;
+}
+
+export const MessageBox = forwardRef(
+  (
+    {
+      announcement,
+      ariaLabel = 'Scrollable message log',
+      children,
+      className,
+      position = 'top',
+      onScrollToTopClick,
+      onScrollToBottomClick,
+      enableSmartScroll = false,
+      ...props
+    }: MessageBoxProps,
+    ref: ForwardedRef<MessageBoxHandle | null>
+  ) => {
+    const [atTop, setAtTop] = useState(false);
+    const [atBottom, setAtBottom] = useState(true);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const lastScrollTop = useRef(0);
+    const animationFrame = useRef<any>(null);
+    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+    const pauseAutoScrollRef = useRef(false);
+    const messageBoxRef = useRef<HTMLDivElement>(null);
+    const scrollQueued = useRef(false);
+    const resetUserScrollIntentTimeout = useRef<NodeJS.Timeout>();
+
+    // Configure handlers
+    const handleScroll = useCallback(() => {
+      const element = messageBoxRef.current;
+      if (!element) {
+        return;
+      }
 
-  // Configure handlers
-  const handleScroll = React.useCallback(() => {
-    const element = messageBoxRef.current;
-    if (element) {
       const { scrollTop, scrollHeight, clientHeight } = element;
-      setAtTop(scrollTop === 0);
-      setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
-    }
-  }, [messageBoxRef]);
-
-  const checkOverflow = React.useCallback(() => {
-    const element = messageBoxRef.current;
-    if (element) {
-      const { scrollHeight, clientHeight } = element;
-      setIsOverflowing(scrollHeight >= clientHeight);
-    }
-  }, [messageBoxRef]);
-
-  const scrollToTop = React.useCallback(() => {
-    const element = messageBoxRef.current;
-    if (element) {
-      element.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  }, [messageBoxRef]);
-
-  const scrollToBottom = React.useCallback(() => {
-    const element = messageBoxRef.current;
-    if (element) {
-      element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
-    }
-  }, [messageBoxRef]);
-
-  // Detect scroll position
-  React.useEffect(() => {
-    const element = messageBoxRef.current;
-    if (element) {
+
+      const roundedScrollTop = Math.round(scrollTop);
+      const roundedClientHeight = Math.round(clientHeight);
+      const roundedScrollHeight = Math.round(scrollHeight);
+
+      const distanceFromBottom = roundedScrollHeight - roundedScrollTop - roundedClientHeight;
+      const isScrollingDown = roundedScrollTop > lastScrollTop.current;
+
+      const DELTA_UP = 10;
+      const DELTA_DOWN = 50;
+      const DEBOUNCE_DELAY = 200;
+
+      const delta = isScrollingDown ? DELTA_DOWN : DELTA_UP;
+      const isAtBottom = distanceFromBottom <= delta;
+
+      setAtTop(roundedScrollTop === 0);
+      setAtBottom(roundedScrollTop + roundedClientHeight >= roundedScrollHeight - 1); // rounding means it could be within a pixel of the bottom
+
+      if (!enableSmartScroll || scrollQueued.current) {
+        return;
+      }
+
+      if (roundedScrollTop === 0) {
+        pauseAutoScrollRef.current = false;
+      }
+
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+      if (!isAtBottom && !pauseAutoScrollRef.current) {
+        setAutoScroll(false);
+      }
+
+      // User is near bottom and scrolling down - debounce re-enabling auto-scroll
+      if (isAtBottom && isScrollingDown && !pauseAutoScrollRef.current) {
+        debounceTimeout.current = setTimeout(() => {
+          setAutoScroll(true);
+        }, DEBOUNCE_DELAY);
+      }
+
+      lastScrollTop.current = roundedScrollTop;
+    }, [messageBoxRef]);
+
+    const checkOverflow = useCallback(() => {
+      const element = messageBoxRef.current;
+      if (element) {
+        const { scrollHeight, clientHeight } = element;
+        setIsOverflowing(scrollHeight >= clientHeight);
+      }
+    }, [messageBoxRef]);
+
+    const resumeAutoScroll = useCallback(() => {
+      if (!enableSmartScroll) {
+        return;
+      }
+      pauseAutoScrollRef.current = false;
+      setAutoScroll(true);
+    }, [enableSmartScroll]);
+
+    const pauseAutoScroll = useCallback(() => {
+      if (!enableSmartScroll) {
+        return;
+      }
+      pauseAutoScrollRef.current = true;
+      setAutoScroll(false);
+    }, [enableSmartScroll]);
+    /**
+     * Scrolls to the top of the message box.
+     *
+     */
+    const scrollToTop = useCallback(
+      (options?: ScrollOptions) => {
+        const { behavior = 'smooth' } = options || {};
+
+        const element = messageBoxRef.current;
+
+        if (!element || scrollQueued.current) {
+          return;
+        }
+
+        scrollQueued.current = true;
+        pauseAutoScroll();
+
+        if (animationFrame.current) {
+          cancelAnimationFrame(animationFrame.current);
+          animationFrame.current = null;
+        }
+
+        animationFrame.current = requestAnimationFrame(() => {
+          element.scrollTo({ top: 0, behavior });
+          scrollQueued.current = false;
+        });
+        onScrollToTopClick && onScrollToTopClick();
+      },
+      [messageBoxRef]
+    );
+
+    /**
+     * Scrolls to the bottom of the message box.
+     *
+     * @param options.resumeSmartScroll - If true, resumes smart scroll behavior;
+     *                                    if false or omitted, scrolls without resuming auto-scroll.
+     * @param options.scrollOptions - Additional scroll options. behavior can be 'smooth' or 'auto'.
+     */
+    const scrollToBottom = useCallback(
+      (options?: { resumeSmartScroll?: boolean } & ScrollOptions) => {
+        const { behavior = 'smooth', resumeSmartScroll = false } = options || {};
+        resumeSmartScroll && resumeAutoScroll();
+
+        const element = messageBoxRef.current;
+        if (!element || pauseAutoScrollRef.current || scrollQueued.current) {
+          return;
+        }
+
+        scrollQueued.current = true;
+
+        if (animationFrame.current) {
+          cancelAnimationFrame(animationFrame.current);
+        }
+
+        animationFrame.current = requestAnimationFrame(() => {
+          element.scrollTo({ top: element.scrollHeight, behavior });
+          resumeAutoScroll();
+          scrollQueued.current = false;
+        });
+        onScrollToBottomClick && onScrollToBottomClick();
+      },
+      [messageBoxRef, enableSmartScroll]
+    );
+
+    // Detect scroll position
+    useEffect(() => {
+      const element = messageBoxRef.current;
+      if (!element) {
+        return;
+      }
+
       // Listen for scroll events
       element.addEventListener('scroll', handleScroll);
 
@@ -85,32 +232,102 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       return () => {
         element.removeEventListener('scroll', handleScroll);
       };
-    }
-  }, [checkOverflow, handleScroll, messageBoxRef]);
-
-  return (
-    <>
-      <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
-      <div
-        role="region"
-        tabIndex={0}
-        aria-label={ariaLabel}
-        className={`pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className ?? ''}`}
-        ref={innerRef ?? messageBoxRef}
-        {...props}
-      >
-        {children}
-        <div className="pf-chatbot__messagebox-announcement" aria-live="polite">
-          {announcement}
+    }, [checkOverflow, handleScroll, messageBoxRef]);
+
+    useImperativeHandle(ref, (): MessageBoxHandle => {
+      const node = messageBoxRef.current! as MessageBoxHandle;
+
+      // Attach custom methods to the element
+      node.scrollToTop = scrollToTop;
+      node.scrollToBottom = scrollToBottom;
+      node.isSmartScrollActive = () => enableSmartScroll && autoScroll;
+
+      return node;
+    });
+
+    let lastTouchY: number | null = null;
+
+    const onTouchEnd: TouchEventHandler<HTMLDivElement> = (event: TouchEvent<HTMLDivElement>) => {
+      lastTouchY = null;
+      props.onTouchEnd && props.onTouchEnd(event);
+    };
+
+    const handleUserScroll = (isScrollingDown: boolean) => {
+      const container = messageBoxRef.current;
+      if (!enableSmartScroll || !container) {
+        return;
+      }
+
+      if (!isScrollingDown) {
+        pauseAutoScrollRef.current = true;
+        clearTimeout(resetUserScrollIntentTimeout.current);
+        return;
+      }
+
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+      if (distanceFromBottom < 100) {
+        pauseAutoScrollRef.current = false;
+        setAutoScroll(true);
+      }
+    };
+
+    const onWheel = (event: WheelEvent<HTMLDivElement>) => {
+      const isScrollingDown = event.deltaY > 0;
+      handleUserScroll(isScrollingDown);
+      props.onWheel && props.onWheel(event);
+    };
+
+    const onTouchMove = (event: TouchEvent<HTMLDivElement>) => {
+      const currentTouchY = event.touches[0].clientY;
+      let isScrollingDown = false;
+
+      if (lastTouchY !== null) {
+        isScrollingDown = currentTouchY < lastTouchY;
+      }
+
+      lastTouchY = currentTouchY;
+
+      handleUserScroll(isScrollingDown);
+      props.onTouchMove && props.onTouchMove(event);
+    };
+
+    const smartScrollHandlers: {
+      onWheel: WheelEventHandler<HTMLDivElement>;
+      onTouchMove: TouchEventHandler<HTMLDivElement>;
+      onTouchEnd: TouchEventHandler<HTMLDivElement>;
+    } = {
+      onWheel,
+      onTouchMove,
+      onTouchEnd
+    };
+
+    return (
+      <>
+        <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
+        <div
+          role="region"
+          tabIndex={0}
+          aria-label={ariaLabel}
+          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`}
+          ref={messageBoxRef}
+          {...props}
+          {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}
+        >
+          {children}
+          <div className="pf-chatbot__messagebox-announcement" aria-live="polite">
+            {announcement}
+          </div>
         </div>
-      </div>
-      <JumpButton position="bottom" isHidden={isOverflowing && atBottom} onClick={scrollToBottom} />
-    </>
-  );
-};
-
-export const MessageBox = React.forwardRef((props: MessageBoxProps, ref: React.Ref<any>) => (
-  <MessageBoxBase innerRef={ref} {...props} />
-));
+        <JumpButton
+          position="bottom"
+          isHidden={isOverflowing && atBottom}
+          onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+        />
+      </>
+    );
+  }
+);
 
 export default MessageBox;

package/src/MessageDivider/MessageDivider.scss

@@ -0,0 +1,45 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+.pf-chatbot__message-divider {
+  display: grid;
+  padding-block-end: var(--pf-t--global--spacer--xl);
+
+  .pf-v6-c-divider,
+  .pf-v6-c-label {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+  }
+
+  .pf-v6-c-label {
+    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--tertiary--default); 
+    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default); 
+    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); 
+    --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+    
+    .pf-v6-c-label__text {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+      text-align: center;
+    }  
+  }
+
+  &.pf-m-divider {    
+    .pf-v6-c-label {
+      --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default); 
+      --pf-v6-c-label--MaxWidth: 75%;
+
+      justify-self: center;
+    }
+    
+    .pf-v6-c-divider {
+      align-self: center;
+    }
+  }
+  
+  &.pf-m-wrap {
+    .pf-v6-c-label,
+    .pf-v6-c-label__text {
+      white-space: normal;
+    }
+  }
+}

package/src/MessageDivider/MessageDivider.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageDivider from './MessageDivider';
+
+describe('MessageDivider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+    render(<MessageDivider data-testid="message-divider" />);
+    expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render inset variant correctly', () => {
+    render(<MessageDivider variant="inset" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render fullWidth variant correctly', () => {
+    render(<MessageDivider variant="fullWidth" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+  });
+});

package/src/MessageDivider/MessageDivider.tsx

@@ -0,0 +1,35 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+import type { FunctionComponent } from 'react';
+import { Divider, Label } from '@patternfly/react-core';
+
+export interface MessageDividerProps {
+  /** Variant of the divider */
+  variant?: 'inset' | 'fullWidth';
+  /** Content of the message divider */
+  content?: string;
+}
+
+const MessageDivider: FunctionComponent<MessageDividerProps> = ({
+  variant = 'inset',
+  content = new Date().toLocaleDateString(),
+  ...props
+}: MessageDividerProps) => {
+  if (variant === 'inset') {
+    return (
+      <div className="pf-chatbot__message-divider pf-m-divider pf-m-wrap" {...props}>
+        <Divider />
+        <Label variant="outline">{content}</Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pf-chatbot__message-divider pf-m-wrap" {...props}>
+      <Label>{content}</Label>
+    </div>
+  );
+};
+
+export default MessageDivider;

package/src/MessageDivider/index.ts

@@ -0,0 +1,3 @@
+export { default } from './MessageDivider';
+
+export * from './MessageDivider';

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { PreviewAttachment } from './PreviewAttachment';
 
 describe('PreviewAttachment', () => {
@@ -48,4 +48,46 @@ describe('PreviewAttachment', () => {
 
     expect(onDismiss).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    screen.getByText('Edit');
+    screen.getByText('Close');
+  });
+
+  it('should render PreviewAttachment with custom classNames', async () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></PreviewAttachment>
+    );
+
+    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/PreviewAttachment/PreviewAttachment.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Preview Attachment - Chatbot Code Snippet Viewer
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
 import CodeModal from '../CodeModal';
 import { ChatbotDisplayMode } from '../Chatbot';
 
@@ -24,9 +24,19 @@ export interface PreviewAttachmentProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps> = ({
+export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
   fileName,
   code,
   handleModalToggle,
@@ -34,15 +44,20 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
+  primaryActionButtonText = 'Edit',
+  secondaryActionButtonText = 'Dismiss',
   displayMode = ChatbotDisplayMode.default,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   isCompact
 }: PreviewAttachmentProps) => {
-  const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleEdit = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onEdit(_event);
   };
 
-  const handleDismiss = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleDismiss = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onDismiss && onDismiss(_event);
   };
@@ -58,12 +73,15 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
       isModalOpen={isModalOpen}
       onPrimaryAction={handleEdit}
       onSecondaryAction={handleDismiss}
-      primaryActionBtn="Edit"
-      secondaryActionBtn="Dismiss"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       isReadOnly
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

package/src/ResponseActions/ResponseActionButton.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';