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

package/src/MessageBar/MicrophoneButton.tsx

@@ -24,6 +24,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipContent?: { active?: string; inactive?: string };
   /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
   language?: string;
+  isCompact?: boolean;
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -34,6 +35,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
   language = 'en-US',
+  isCompact,
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -102,14 +104,15 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
     >
       <Button
         variant="plain"
-        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
+        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
         aria-label={props['aria-label'] || 'Microphone button'}
         onClick={isListening ? stopListening : startListening}
         icon={
-          <Icon iconSize="xl" isInline>
+          <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
             <MicrophoneIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
         {...props}
       />
     </Tooltip>

package/src/MessageBar/SendButton.scss

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

package/src/MessageBar/SendButton.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { SendButton } from './SendButton';
 import { TooltipProps } from '@patternfly/react-core';
 
-const renderSend = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProps, 'content'> }) => {
   const spy = jest.fn();
   render(<SendButton onClick={spy} {...props} />);
 };
@@ -40,4 +40,8 @@ describe('Send button', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
   });
+  it('should handle isCompact', () => {
+    renderSend({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/SendButton.tsx

@@ -17,6 +17,7 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const SendButton: React.FunctionComponent<SendButtonProps> = ({
@@ -24,6 +25,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   onClick,
   tooltipProps,
   tooltipContent = 'Send',
+  isCompact,
   ...props
 }: SendButtonProps) => (
   <Tooltip
@@ -40,14 +42,15 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   >
     <Button
       variant="plain"
-      className={`pf-chatbot__button--send ${className ?? ''}`}
+      className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       aria-label={props['aria-label'] || 'Send button'}
       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

@@ -5,7 +5,7 @@ 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} />);
 };
@@ -39,4 +39,8 @@ describe('Stop button', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
     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

@@ -15,6 +15,7 @@ export interface StopButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Stop" used in the tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const StopButton: React.FunctionComponent<StopButtonProps> = ({
@@ -22,6 +23,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
   onClick,
   tooltipProps,
   tooltipContent = 'Stop',
+  isCompact,
   ...props
 }: StopButtonProps) => (
   <Tooltip
@@ -37,12 +39,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'}
       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 +53,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
           </svg>
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

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,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 button/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 button/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">