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

package/src/MessageBar/SendButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Send
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -17,13 +17,16 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  /** Whether send button has compact styling */
+  isCompact?: boolean;
 }
 
-export const SendButton: React.FunctionComponent<SendButtonProps> = ({
+export const SendButton: FunctionComponent<SendButtonProps> = ({
   className,
   onClick,
   tooltipProps,
   tooltipContent = 'Send',
+  isCompact,
   ...props
 }: SendButtonProps) => (
   <Tooltip
@@ -40,14 +43,15 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   >
     <Button
       variant="plain"
-      className={`pf-chatbot__button--send ${className ?? ''}`}
-      aria-label={props['aria-label'] || 'Send button'}
+      className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+      aria-label={props['aria-label'] || 'Send'}
       onClick={onClick}
       icon={
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
           <PaperPlaneIcon />
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

package/src/MessageBar/StopButton.scss

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

package/src/MessageBar/StopButton.test.tsx

@@ -1,34 +1,33 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { StopButton } from './StopButton';
 import { TooltipProps } from '@patternfly/react-core';
 
-const renderStop = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProps, 'content'> }) => {
   const spy = jest.fn();
   render(<StopButton onClick={spy} {...props} />);
 };
 describe('Stop button', () => {
   it('should render button correctly', () => {
     renderStop();
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<StopButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<StopButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle className prop', () => {
     renderStop({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
   });
   it('should handle spread props, including aria-label', () => {
     renderStop({ 'aria-label': 'test' });
@@ -36,7 +35,11 @@ describe('Stop button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderStop({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
   });
+  it('should handle isCompact', () => {
+    renderStop({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/StopButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Footer - Message Bar - Stop
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
@@ -15,13 +15,16 @@ export interface StopButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Stop" used in the tooltip */
   tooltipContent?: string;
+  /** Whether stop button has compact styling */
+  isCompact?: boolean;
 }
 
-export const StopButton: React.FunctionComponent<StopButtonProps> = ({
+export const StopButton: FunctionComponent<StopButtonProps> = ({
   className,
   onClick,
   tooltipProps,
   tooltipContent = 'Stop',
+  isCompact,
   ...props
 }: StopButtonProps) => (
   <Tooltip
@@ -37,12 +40,12 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     {...tooltipProps}
   >
     <Button
-      className={`pf-chatbot__button--stop ${className ?? ''}`}
+      className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variant="link"
-      aria-label={props['aria-label'] || 'Stop button'}
+      aria-label={props['aria-label'] || 'Stop'}
       onClick={onClick}
       icon={
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z"
@@ -51,6 +54,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
           </svg>
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

package/src/MessageBox/JumpButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import JumpButton from './JumpButton';
@@ -7,20 +6,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Messages - Jump to Top
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
@@ -18,13 +18,13 @@ export interface JumpButtonProps {
   isHidden?: boolean;
 }
 
-const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
   isHidden ? null : (
     <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position} button`}
+        aria-label={`Jump ${position}`}
         onClick={onClick}
       >
         <Icon iconSize="lg" isInline>

package/src/MessageBox/MessageBox.scss

@@ -45,3 +45,9 @@
     }
   }
 }
+
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__messagebox {
+    padding: var(--pf-t--global--spacer--md);
+  }
+}

package/src/MessageBox/MessageBox.test.tsx

@@ -1,8 +1,20 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { MessageBox } from './MessageBox';
+import { createRef } from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MessageBox, MessageBoxHandle } from './MessageBox';
+import userEvent from '@testing-library/user-event';
 
 describe('MessageBox', () => {
+  beforeEach(() => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0); // Immediately call the callback
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('should render Message box', () => {
     render(
       <MessageBox>
@@ -13,14 +25,292 @@ describe('MessageBox', () => {
   });
 
   it('should assign ref to Message box', () => {
-    const ref = React.createRef<HTMLDivElement>();
+    const ref = createRef<MessageBoxHandle>();
     render(
-      <MessageBox ref={ref}>
+      <MessageBox data-testid="message-box" ref={ref}>
         <div>Test message content</div>
       </MessageBox>
     );
 
+    screen.getByText('Test message content');
+
     expect(ref.current).not.toBeNull();
+    // should contain custom methods exposed by the ref
+    expect(typeof ref.current?.isSmartScrollActive).toBe('function');
+    expect(typeof ref.current?.scrollToTop).toBe('function');
+    expect(typeof ref.current?.scrollToBottom).toBe('function');
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
+  it('should call onScrollToBottomClick when scroll to bottom button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToBottomClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+  it('should call onScrollToTopClick when scroll to top button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToTopClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', {
+      configurable: true,
+      value: 500
+    });
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  it('should call user defined onWheel, onTouchMove and onTouchEnd handlers', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    const onWheel = jest.fn();
+    const onTouchMove = jest.fn();
+    const onTouchEnd = jest.fn();
+
+    render(
+      <MessageBox ref={ref} enableSmartScroll onWheel={onWheel} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    act(() => {
+      fireEvent.wheel(element, { deltaY: 10 });
+      fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+      fireEvent.touchEnd(element);
+    });
+
+    expect(onWheel).toHaveBeenCalled();
+    expect(onTouchMove).toHaveBeenCalled();
+    expect(onTouchEnd).toHaveBeenCalled();
+  });
+
+  it('should scroll to the bottom when the method is called ', async () => {
+    const ref = createRef<MessageBoxHandle>();
+
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+    const element = ref.current!;
+    const scrollSpy = jest.spyOn(element, 'scrollTo');
+
+    act(() => {
+      ref.current?.scrollToBottom();
+      ref.current?.scrollToBottom();
+      ref.current?.scrollToBottom();
+    });
+
+    expect(scrollSpy).toHaveBeenCalledWith({ top: element.scrollHeight, behavior: 'smooth' });
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
+
+  it('should scroll to the top when the method is called ', async () => {
+    const ref = createRef<MessageBoxHandle>();
+
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+    const element = ref.current!;
+    const scrollSpy = jest.spyOn(element, 'scrollTo');
+
+    act(() => {
+      ref.current?.scrollToTop();
+    });
+
+    expect(scrollSpy).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+  });
+
+  it('should pause automatic scrolling when user scrolls up ', async () => {
+    const ref = createRef<MessageBoxHandle>();
+
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+
+    const element = ref.current!;
+
+    // Manually set scrollHeight and clientHeight for calculations
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+
+    // Simulate scroll up by changing scrollTop
+    element.scrollTop = 200;
+    const scrollEvent = new Event('scroll', { bubbles: true });
+
+    act(() => {
+      element.dispatchEvent(scrollEvent);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+  });
+
+  it('should resume automatic scrolling when user scrolls down to the bottom using scroll event', async () => {
+    jest.useFakeTimers();
+
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    // Manually set scrollHeight and clientHeight for calculations
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+
+    // Simulate scroll up by changing scrollTop
+    element.scrollTop = 100;
+    const scrollEvent = new Event('scroll', { bubbles: true });
+
+    act(() => {
+      element.dispatchEvent(scrollEvent);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+
+    act(() => {
+      // Simulate scroll down by changing scrollTop
+      element.scrollTop = 650; // scrollHeight - scrollTop - clientHeight - DELTA_DOWN (50) = 0
+      const scrollEvent = new Event('scroll', { bubbles: true });
+      element.dispatchEvent(scrollEvent);
+      jest.advanceTimersByTime(250);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+    jest.useRealTimers();
+  });
+
+  it('should resume automatic scrolling when scrollToBottom method is used', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    // Manually set scrollHeight and clientHeight for calculations
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+
+    // Simulate scroll up by changing scrollTop
+    element.scrollTop = 100;
+    const scrollEvent = new Event('scroll', { bubbles: true });
+
+    act(() => {
+      element.dispatchEvent(scrollEvent);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+
+    act(() => {
+      ref.current?.scrollToBottom({ resumeSmartScroll: true, behavior: 'auto' }); // resumes auto scroll and scrolls to bottom.
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
+
+  it('should resume automatic scrolling when mouse wheel event is used', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    // Manually set scrollHeight and clientHeight for calculations
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+
+    const scrollEvent = new Event('scroll', { bubbles: true });
+
+    act(() => {
+      element.dispatchEvent(scrollEvent);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+
+    // Simulate mouse wheel event
+    act(() => {
+      Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+      fireEvent.wheel(element, { deltaY: 10 });
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
+
+  it('should resume automatic scrolling when user swipes up in touch screen', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    // Manually set scrollHeight and clientHeight for calculations
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+
+    const scrollEvent = new Event('scroll', { bubbles: true });
+
+    act(() => {
+      element.dispatchEvent(scrollEvent);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(false);
+
+    // Simulate touch event - swipe up
+    act(() => {
+      Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+      fireEvent.touchStart(element, { touches: [{ clientY: 700 }] });
+      fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+      fireEvent.touchMove(element, { touches: [{ clientY: 600 }] });
+      fireEvent.touchEnd(element);
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
 });