@patternfly/chatbot 6.5.0-prerelease.9 → 6.6.0-prerelease.1

package/src/MessageBar/MessageBar.tsx

@@ -10,6 +10,7 @@ import {
   TextAreaProps,
   TooltipProps
 } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -57,6 +58,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   placeholder?: string;
   /** Flag to disable/enable the Attach button  */
   hasAttachButton?: boolean;
+  /** Whether the attach button is rendered before or after the message input. */
+  attachButtonPosition?: 'start' | 'end';
   /** Flag to enable the Microphone button  */
   hasMicrophoneButton?: boolean;
   /** Placeholder text when listening */
@@ -115,6 +118,14 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   innerRef?: React.Ref<HTMLTextAreaElement>;
   /** Sets background color to primary */
   isPrimary?: boolean;
+  /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container.  */
+  additionalActions?: React.ReactNode;
+  /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
+  forceMultilineLayout?: boolean;
+  /** @beta Flag indicating whether the message bar has an AI indicator border. */
+  hasAiIndicator?: boolean;
+  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+  isThinking?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -123,6 +134,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   alwayShowSendButton,
   placeholder = 'Send a message...',
   hasAttachButton = true,
+  attachButtonPosition = 'end',
   hasMicrophoneButton,
   listeningText = 'Listening',
   handleAttach,
@@ -146,6 +158,10 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   dropzoneProps,
   innerRef,
   isPrimary,
+  additionalActions,
+  forceMultilineLayout = false,
+  hasAiIndicator,
+  isThinking,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -154,12 +170,21 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
+
+  const shouldForceMultiline = forceMultilineLayout || additionalActions;
+  const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
 
   const topMargin = '1rem';
 
+  useEffect(() => {
+    if (value !== undefined && value !== message) {
+      setMessage(value);
+    }
+  }, [value, message]);
+
   const setInitialLineHeight = (field: HTMLTextAreaElement) => {
     field.style.setProperty('line-height', '1rem');
     const parent = field.parentElement;
@@ -170,7 +195,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
       const grandparent = parent.parentElement;
       if (grandparent) {
-        grandparent.style.setProperty('flex-basis', 'auto');
+        grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
       }
     }
   };
@@ -202,11 +227,24 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
+  const checkIfMultiline = useCallback(
+    (field: HTMLTextAreaElement) => {
+      const parent = field.parentElement;
+      const grandparent = parent?.parentElement;
+      if (grandparent) {
+        const containerHeight = grandparent.offsetHeight;
+        const threshold = isCompact ? 56 : 70;
+        setIsMultiline(containerHeight > threshold);
+      }
+    },
+    [isCompact]
+  );
+
   const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
       const grandparent = parent.parentElement;
-      if (textIsLongerThan2Lines(field) && grandparent) {
+      if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
         grandparent.style.setProperty('flex-basis', `100%`);
       }
     }
@@ -256,12 +294,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     if (field) {
       if (field.value === '') {
         setInitialLineHeight(field);
+        !shouldForceMultiline && setIsMultiline(false);
       } else {
         setAutoHeight(field);
         setAutoWidth(field);
+        !shouldForceMultiline && checkIfMultiline(field);
       }
     }
-  }, [displayMode, message, setAutoWidth]);
+  }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
 
   useEffect(() => {
     const field = textareaRef.current;
@@ -277,13 +317,15 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
       if (textareaRef.current) {
         if (event.target.value === '') {
           setInitialLineHeight(textareaRef.current);
+          !shouldForceMultiline && setIsMultiline(false);
         } else {
           setAutoHeight(textareaRef.current);
+          !shouldForceMultiline && checkIfMultiline(textareaRef.current);
         }
       }
       setMessage(event.target.value);
     },
-    [onChange]
+    [onChange, checkIfMultiline]
   );
 
   // Handle sending message
@@ -340,6 +382,55 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
   };
 
+  const renderAttachButton = () => {
+    if (!attachMenuProps && hasAttachButton) {
+      return (
+        <AttachButton
+          onAttachAccepted={handleAttach}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          inputTestId={buttonProps?.attach?.inputTestId}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+          {...buttonProps?.attach?.props}
+        />
+      );
+    }
+    if (attachMenuProps) {
+      return (
+        <AttachButton
+          ref={attachButtonRef}
+          onClick={handleAttachMenuToggle}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+        />
+      );
+    }
+  };
+
+  const isAttachButtonAtStart = attachButtonPosition === 'start';
   const renderButtons = () => {
     if (hasStopButton && handleStopButton) {
       return (
@@ -354,47 +445,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     }
     return (
       <>
-        {attachMenuProps && (
-          <AttachButton
-            ref={attachButtonRef}
-            onClick={handleAttachMenuToggle}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach}
-          />
-        )}
-        {!attachMenuProps && hasAttachButton && (
-          <AttachButton
-            onAttachAccepted={handleAttach}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            inputTestId={buttonProps?.attach?.inputTestId}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach}
-            {...buttonProps?.attach?.props}
-          />
-        )}
+        {!isAttachButtonAtStart && renderAttachButton()}
         {hasMicrophoneButton && (
           <MicrophoneButton
             isListening={isListeningMessage}
@@ -422,8 +473,12 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     );
   };
 
+  const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
   const messageBarContents = (
     <>
+      {isAttachButtonAtStart && !isMultiline && (
+        <div className="pf-chatbot__message-bar-actions test">{renderAttachButton()}</div>
+      )}
       <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
@@ -438,7 +493,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           {...props}
         />
       </div>
-      <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
+      <div className={css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped')}>
+        {hasGroupedActions ? (
+          <>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>
+              {isAttachButtonAtStart && renderAttachButton()}
+              {additionalActions}
+            </div>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>{renderButtons()}</div>
+          </>
+        ) : (
+          renderButtons()
+        )}
+      </div>
     </>
   );
 
@@ -446,7 +513,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return (
       <AttachMenu
         toggle={(toggleRef) => (
-          <div ref={toggleRef} className={`pf-chatbot__message-bar ${className ?? ''}`}>
+          <div ref={toggleRef} className={css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className)}>
             {messageBarContents}
           </div>
         )}
@@ -468,7 +535,16 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   }
 
   return (
-    <div className={`pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}>
+    <div
+      className={css(
+        'pf-chatbot__message-bar',
+        isPrimary && 'pf-m-primary',
+        hasAiIndicator && 'pf-v6-m-ai-indicator',
+        isThinking && 'pf-v6-m-thinking',
+        isMultiline && 'pf-m-multiline',
+        className
+      )}
+    >
       {messageBarContents}
     </div>
   );

package/src/MessageBar/MicrophoneButton.scss

@@ -53,6 +53,5 @@
 .pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/SendButton.scss

@@ -58,6 +58,5 @@
 .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/StopButton.scss

@@ -41,6 +41,5 @@
 .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/Onboarding/Onboarding.scss

@@ -0,0 +1,101 @@
+.pf-chatbot__onboarding-modal {
+  overflow-x: hidden;
+
+  .pf-chatbot__onboarding--title {
+    margin-block-end: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pf-chatbot__onboarding--modal-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--body--lg);
+  }
+
+  .pf-chatbot__onboarding--header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    max-height: 65%;
+
+    img {
+      max-width: unset;
+      height: 100%;
+    }
+  }
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--h1);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--bold);
+  }
+
+  .pf-chatbot__onboarding--footer {
+    margin-block-start: var(--pf-t--global--spacer--md);
+  }
+
+  // for handling zoom conditions; zoom to 125% or higher to see this
+  @media screen and (max-height: 620px) {
+    .pf-v6-c-modal-box__body {
+      --pf-v6-c-modal-box__body--MinHeight: auto;
+      overflow: visible;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--docked.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--docked,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  .pf-chatbot__onboarding--header {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  // override parent modal style
+  height: inherit !important;
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--2xl);
+  }
+}
+
+.pf-chatbot__onboarding-modal.pf-m-compact {
+  .pf-chatbot__onboarding--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__onboarding--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__onboarding--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/Onboarding/Onboarding.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import Onboarding from './Onboarding';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body =
+  'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.';
+
+describe('Onboarding', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+    expect(screen.getByText(body)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <Onboarding isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Skip/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+  it('should handle isCompact prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        isCompact={true}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    expect(screen.queryByRole('img')).toBeFalsy();
+  });
+});