@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.11

package/src/MessageBox/MessageBox.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { MessageBox } from './MessageBox';
+import userEvent from '@testing-library/user-event';
 
 describe('MessageBox', () => {
   it('should render Message box', () => {
@@ -23,4 +24,47 @@ describe('MessageBox', () => {
     expect(ref.current).not.toBeNull();
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
+  it('should call onScrollToBottomClick when scroll to top 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 });
+    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
+    });
+    region.dispatchEvent(new Event('scroll'));
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
 });

package/src/MessageBox/MessageBox.tsx

@@ -17,6 +17,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
   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;
 }
 
 const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
@@ -25,7 +29,10 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   children,
   innerRef,
   className,
-  position = 'top'
+  position = 'top',
+  onScrollToTopClick,
+  onScrollToBottomClick,
+  ...props
 }: MessageBoxProps) => {
   const [atTop, setAtTop] = React.useState(false);
   const [atBottom, setAtBottom] = React.useState(true);
@@ -61,6 +68,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
+    onScrollToTopClick && onScrollToTopClick();
   }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
@@ -68,6 +76,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
+    onScrollToBottomClick && onScrollToBottomClick();
   }, [messageBoxRef]);
 
   // Detect scroll position
@@ -96,6 +105,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         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">

package/src/PreviewAttachment/PreviewAttachment.tsx

@@ -22,6 +22,8 @@ export interface PreviewAttachmentProps {
   title?: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps> = ({
@@ -32,7 +34,8 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
-  displayMode = ChatbotDisplayMode.default
+  displayMode = ChatbotDisplayMode.default,
+  isCompact
 }: PreviewAttachmentProps) => {
   const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
@@ -60,6 +63,7 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
       title={title}
       isReadOnly
       displayMode={displayMode}
+      isCompact={isCompact}
     />
   );
 };

package/src/Settings/Settings.scss

@@ -32,3 +32,14 @@
   font-weight: var(--pf-t--global--font--weight--body--bold);
   text-align: center;
 }
+
+.pf-chatbot__settings-form-container.pf-m-compact {
+  .pf-chatbot__settings-form-row {
+    padding: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}

package/src/Settings/SettingsForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 
 describe('SettingsForm', () => {
   it('should render settingsForm with custom classname', () => {
@@ -25,4 +26,20 @@ describe('SettingsForm', () => {
 
     expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
   });
+
+  it('should render settingsForm with isCompact', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm data-testid="settings-form" fields={fields} isCompact />);
+    expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Settings/SettingsForm.tsx

@@ -5,10 +5,20 @@ export interface SettingsFormProps {
   className?: string;
   /** Array of fields to display in the settings layout */
   fields?: { id: string; label: string; field: React.ReactElement }[];
+  /** Sets form to compact styling. */
+  isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
-  <div className={`pf-chatbot__settings-form-container ${className}`} {...props}>
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
+  className,
+  fields = [],
+  isCompact,
+  ...props
+}) => (
+  <div
+    className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
+    {...props}
+  >
     <form className="pf-chatbot__settings-form">
       {fields.map((field) => (
         <div className="pf-chatbot__settings-form-row" key={field.label}>

package/src/SourcesCard/SourcesCard.scss

@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
+  .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+    border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
+      var(--pf-t--global--spacer--xs) !important;
+  }
+}

package/src/SourcesCard/SourcesCard.tsx

@@ -71,6 +71,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onSetPage,
   showMoreWords = 'show more',
   showLessWords = 'show less',
+  isCompact,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
@@ -95,7 +96,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   return (
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card className="pf-chatbot__sources-card" {...props}>
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
           <Button
             component="a"

package/src/TermsOfUse/TermsOfUse.scss

@@ -64,3 +64,23 @@
     font-size: var(--pf-t--global--font--size--heading--2xl);
   }
 }
+
+.pf-chatbot__terms-of-use-modal.pf-m-compact {
+  .pf-chatbot__terms-of-use--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__terms-of-use--modal-header {
+    --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__terms-of-use--modal-body {
+    --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+}

package/src/TermsOfUse/TermsOfUse.tsx

@@ -33,6 +33,8 @@ export interface TermsOfUseProps extends ModalProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** OuiaID applied to modal */
   ouiaId?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
@@ -50,6 +52,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   children,
   innerRef,
   ouiaId = 'TermsOfUse',
+  isCompact,
   ...props
 }: TermsOfUseProps) => {
   const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
@@ -67,19 +70,21 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
       ouiaId={ouiaId}
       aria-labelledby="terms-of-use-title"
       aria-describedby="terms-of-use-modal"
-      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
+      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
       displayMode={displayMode}
       {...props}
     >
       {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
       <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
-        <ModalHeader>
+        <ModalHeader className="pf-chatbot__terms-of-use--modal-header">
           <div className="pf-chatbot__terms-of-use--header">
-            {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
+            {!isCompact && image && altText && (
+              <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />
+            )}
             <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
           </div>
         </ModalHeader>
-        <ModalBody>
+        <ModalBody className="pf-chatbot__terms-of-use--modal-body">
           <Content>{children}</Content>
         </ModalBody>
         <ModalFooter className="pf-chatbot__terms-of-use--footer">