@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -7,7 +7,7 @@ import MicrophoneButton from './MicrophoneButton';
 import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
-import DOMPurify from 'dompurify';
+import { ChatbotDisplayMode } from '../Chatbot';
 
 export interface MessageBarWithAttachMenuProps {
   /** Flag to enable whether attach menu is open */
@@ -30,9 +30,9 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
 
-export interface MessageBarProps {
+export interface MessageBarProps extends TextAreaProps {
   /** Callback to get the value of input message by user */
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string | number) => void;
   /** Class Name for the MessageBar component */
   className?: string;
   /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -53,17 +53,25 @@ export interface MessageBarProps {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: { tooltipContent?: string; props?: ButtonProps; inputTestId?: string };
-    stop?: { tooltipContent?: string; props?: ButtonProps };
-    send?: { tooltipContent?: string; props?: ButtonProps };
+    attach?: {
+      tooltipContent?: string;
+      props?: ButtonProps;
+      inputTestId?: string;
+      tooltipProps?: Omit<TooltipProps, 'content'>;
+    };
+    stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
+    send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
       tooltipContent?: { active?: string; inactive?: string };
       language?: string;
       props?: ButtonProps;
+      tooltipProps?: Omit<TooltipProps, 'content'>;
     };
   };
   /** A callback for when the text area value changes. */
-  onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
+  /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
+  displayMode?: ChatbotDisplayMode;
 }
 
 export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
@@ -79,60 +87,169 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   hasStopButton,
   buttonProps,
   onChange,
+  displayMode,
+  value,
   ...props
 }: MessageBarProps) => {
   // Text Input
   // --------------------------------------------------------------------------
-  const [message, setMessage] = React.useState<string>('');
+  const [message, setMessage] = React.useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
-  const [showPlaceholder, setShowPlaceholder] = React.useState(true);
-  const textareaRef = React.useRef<HTMLDivElement>(null);
+  const [hasSentMessage, setHasSentMessage] = React.useState(false);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const attachButtonRef = React.useRef<HTMLButtonElement>(null);
 
-  const handleInput = (event) => {
-    // newMessage === '' doesn't work unless we trim, which causes other problems
-    // textContent seems to work, but doesn't allow for markdown, so we need both
-    const messageText = DOMPurify.sanitize(event.target.textContent);
-    if (messageText === '') {
-      setShowPlaceholder(true);
-      setMessage('');
-      onChange && onChange(event, '');
-    } else {
-      setShowPlaceholder(false);
-      // this is so that tests work; RTL doesn't seem to like event.target.innerText, but browsers don't pick up markdown without it
-      let newMessage = messageText;
-      if (event.target.innerText) {
-        newMessage = DOMPurify.sanitize(event.target.innerText);
+  const setInitialLineHeight = (field: HTMLTextAreaElement) => {
+    field.style.setProperty('line-height', '1rem');
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-bottom', `0rem`);
+      parent.style.setProperty('height', 'inherit');
+
+      const grandparent = parent.parentElement;
+      if (grandparent) {
+        grandparent.style.setProperty('flex-basis', 'auto');
       }
-      setMessage(newMessage);
-      onChange && onChange(event, newMessage);
     }
   };
 
-  // Handle sending message
-  const handleSend = React.useCallback(() => {
-    setMessage((m) => {
-      onSendMessage(m);
-      setMessage('');
+  const setAutoHeight = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('height', 'inherit');
+      const computed = window.getComputedStyle(field);
+      // Calculate the height
+      const height =
+        parseInt(computed.getPropertyValue('border-top-width')) +
+        parseInt(computed.getPropertyValue('padding-top')) +
+        field.scrollHeight +
+        parseInt(computed.getPropertyValue('padding-bottom')) +
+        parseInt(computed.getPropertyValue('border-bottom-width'));
+      parent.style.setProperty('height', `${height}px`);
+
+      if (height > 32 || window.innerWidth <= 507) {
+        parent.style.setProperty('margin-bottom', `1rem`);
+        parent.style.setProperty('margin-top', `1rem`);
+      }
+    }
+  };
+
+  const textIsLongerThan2Lines = (field: HTMLTextAreaElement) => {
+    const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+    const lines = field.scrollHeight / lineHeight;
+    return lines > 2;
+  };
+
+  const setAutoWidth = React.useCallback((field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      const grandparent = parent.parentElement;
+      if (textIsLongerThan2Lines(field) && grandparent) {
+        grandparent.style.setProperty('flex-basis', `100%`);
+      }
+    }
+  }, []);
+
+  const handleNewLine = (field: HTMLTextAreaElement) => {
+    const parent = field.parentElement;
+    if (parent) {
+      parent.style.setProperty('margin-bottom', `1rem`);
+      parent.style.setProperty('margin-top', `1rem`);
+    }
+  };
+
+  React.useEffect(() => {
+    const field = textareaRef.current;
+    if (field) {
+      if (field.value === '') {
+        if (window.innerWidth > 507) {
+          setInitialLineHeight(field);
+        }
+      } else {
+        setAutoHeight(field);
+        setAutoWidth(field);
+      }
+    }
+    const resetHeight = () => {
+      if (field) {
+        if (field.value === '') {
+          if (window.innerWidth > 507) {
+            setInitialLineHeight(field);
+          }
+        } else {
+          setAutoHeight(field);
+          setAutoWidth(field);
+        }
+      }
+    };
+    window.addEventListener('resize', resetHeight);
+
+    return () => {
+      window.removeEventListener('resize', resetHeight);
+    };
+  }, [setAutoWidth]);
+
+  React.useEffect(() => {
+    const field = textareaRef.current;
+    if (field) {
+      if (field.value === '') {
+        setInitialLineHeight(textareaRef.current);
+      } else {
+        setAutoHeight(textareaRef.current);
+        setAutoWidth(field);
+      }
+    }
+  }, [displayMode, message, setAutoWidth]);
+
+  React.useEffect(() => {
+    const field = textareaRef.current;
+    if (field) {
+      setInitialLineHeight(field);
+      setHasSentMessage(false);
+    }
+  }, [hasSentMessage]);
+
+  const handleChange = React.useCallback(
+    (event) => {
+      onChange && onChange(event, event.target.value);
       if (textareaRef.current) {
-        textareaRef.current.innerText = '';
-        setShowPlaceholder(true);
-        textareaRef.current.blur();
+        if (event.target.value === '') {
+          setInitialLineHeight(textareaRef.current);
+        } else {
+          setAutoHeight(textareaRef.current);
+        }
       }
-      return '';
-    });
-  }, [onSendMessage]);
+      setMessage(event.target.value);
+    },
+    [onChange]
+  );
+
+  // Handle sending message
+  const handleSend = React.useCallback(
+    (newMessage: string | number) => {
+      onSendMessage(newMessage);
+      setHasSentMessage(true);
+      setMessage('');
+    },
+    [onSendMessage]
+  );
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
       if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
-          handleSend();
+          handleSend(message);
+        }
+      }
+      if (event.key === 'Enter' && event.shiftKey) {
+        if (textareaRef.current) {
+          handleNewLine(textareaRef.current);
         }
       }
     },
-    [handleSend]
+    [isSendButtonDisabled, hasStopButton, handleSend, message]
   );
 
   const handleAttachMenuToggle = () => {
@@ -142,12 +259,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const handleSpeechRecognition = (message) => {
     setMessage(message);
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.focus();
-      textarea.textContent = DOMPurify.sanitize(message);
-    }
-    onChange && onChange({} as React.ChangeEvent<HTMLDivElement>, message);
+    onChange && onChange({} as React.ChangeEvent<HTMLTextAreaElement>, message);
   };
 
   const renderButtons = () => {
@@ -193,7 +305,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         {(alwayShowSendButton || message) && (
           <SendButton
             value={message}
-            onClick={handleSend}
+            onClick={() => handleSend(message)}
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
             {...buttonProps?.send?.props}
@@ -203,28 +315,15 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
     );
   };
 
-  const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
-
   const messageBarContents = (
     <>
       <div className="pf-chatbot__message-bar-input">
-        {(showPlaceholder || message === '') && (
-          <div className="pf-chatbot__message-bar-placeholder">{placeholder}</div>
-        )}
-        <div
-          contentEditable
-          suppressContentEditableWarning={true}
-          role="textbox"
-          aria-multiline="false"
+        <TextArea
           className="pf-chatbot__message-textarea"
-          onInput={handleInput}
-          onFocus={() => setShowPlaceholder(false)}
-          onBlur={() => {
-            if (message === '') {
-              setShowPlaceholder(!showPlaceholder);
-            }
-          }}
-          aria-label={placeholder}
+          value={message}
+          onChange={handleChange}
+          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
+          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}

package/src/MessageBar/MicrophoneButton.scss

@@ -8,31 +8,31 @@
   height: 3rem;
 
   .pf-v6-c-button__icon {
-    color: var(--pf-t--chatbot--icon--fill);
+    color: var(--pf-t--global--icon--color--subtle);
   }
 
   // Interactive states
   &:hover,
   &:focus {
     .pf-v6-c-button__icon {
-      color: var(--pf-t--chatbot--icon--fill--hover);
+      color: var(--pf-t--global--icon--color--regular);
     }
   }
 
   // Active state (while recording voice)
   &--active {
-    background-color: var(--pf-t--color--blue--50);
-    animation: motionMicButton var(--pf-t--chatbot--timing-function) calc(var(--pf-t--global--motion--duration--md) * 8)
-      infinite;
+    background-color: var(--pf-t--global--color--brand--clicked);
+    animation: motionMicButton var(--pf-t--global--motion--timing-function--accelerate)
+      calc(var(--pf-t--global--motion--duration--md) * 8) infinite;
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--color--white);
+      color: var(--pf-t--global--icon--color--on-brand--default);
     }
 
     &:hover,
     &:focus {
       .pf-v6-c-button__icon {
-        color: var(--pf-t--color--white);
+        color: var(--pf-t--global--icon--color--on-brand--default);
       }
     }
   }
@@ -40,7 +40,7 @@
 
 @keyframes motionMicButton {
   0% {
-    box-shadow: 0 0 0 0 rgba(0, 102, 204, 1);
+    box-shadow: 0 0 0 0 rgba(0, 77, 153, 1);
   }
   100% {
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);

package/src/MessageBar/MicrophoneButton.tsx

@@ -19,7 +19,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   /** Callback to update the message value once speech recognition is complete */
   onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
   /** Props to control the PF Tooltip component */
-  tooltipProps?: TooltipProps;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Use microphone" and "Stop listening" used in the tooltip */
   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. */

package/src/MessageBar/SendButton.tsx

@@ -34,6 +34,8 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     exitDelay={tooltipProps?.exitDelay || 0}
     distance={tooltipProps?.distance || 8}
     animationDuration={tooltipProps?.animationDuration || 0}
+    // prevents VO announcements of both aria label and tooltip
+    aria="none"
     {...tooltipProps}
   >
     <Button

package/src/MessageBar/StopButton.scss

@@ -12,11 +12,25 @@
   align-items: center;
 
   .pf-v6-c-button__icon {
-    color: var(--pf-t--global--icon--color--inverse);
+    color: var(--pf-t--global--icon--color--on-brand--default);
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: var(--pf-t--global--color--brand--hover);
   }
+
+  &:focus {
+    background-color: var(--pf-t--global--color--brand--clicked);
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--icon--color--on-brand--default);
+    }
+
+    &:hover,
+    &:focus {
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--global--icon--color--on-brand--default);
+      }
+    }
+  }
 }

package/src/MessageBar/StopButton.tsx

@@ -32,6 +32,8 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     exitDelay={tooltipProps?.exitDelay || 0}
     distance={tooltipProps?.distance || 8}
     animationDuration={tooltipProps?.animationDuration || 0}
+    // prevents VO announcements of both aria label and tooltip
+    aria="none"
     {...tooltipProps}
   >
     <Button

package/src/MessageBox/JumpButton.scss

@@ -16,13 +16,13 @@
   background-color: var(--pf-t--global--background--color--primary--default) !important;
   border: 1px solid var(--pf-t--chatbot--border) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
-  color: var(--pf-t--chatbot--icon--fill) !important;
+  color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;
   transition:
-    background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
-    box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
-    transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md),
-    opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
+    background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
+    opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
   z-index: var(--pf-t--global--z-index--md) !important;
 
   .pf-v6-c-button__text {
@@ -33,7 +33,7 @@
   &:focus {
     background-color: var(--pf-t--global--background--color--primary--hover) !important;
     box-shadow: var(--pf-t--global--box-shadow--md) !important;
-    color: var(--pf-t--chatbot--icon--fill--hover) !important;
+    color: var(--pf-t--global--icon--color--regular) !important;
   }
 
   &--top {

package/src/MessageBox/MessageBox.scss

@@ -37,6 +37,7 @@
 
 @media screen and (min-width: 64rem) {
   .pf-chatbot--embedded,
+  .pf-chatbot--drawer,
   .pf-chatbot--fullscreen {
     .pf-chatbot__messagebox {
       max-width: 60rem;

package/src/MessageBox/MessageBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+
+describe('MessageBox', () => {
+  it('should render Message box', () => {
+    render(
+      <MessageBox>
+        <>Chatbot Messages</>
+      </MessageBox>
+    );
+    expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+  });
+
+  it('should assign ref to Message box', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <MessageBox ref={ref}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+
+describe('PreviewAttachment', () => {
+  it('should render PreviewAttachment', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByText('Preview attachment')).toBeTruthy();
+    expect(screen.getByText('greetings')).toBeTruthy();
+    expect(screen.getAllByText('TEXT')).toBeTruthy();
+  });
+
+  it('should call onEdit handler when edit button is pressed', () => {
+    const onEdit = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={onEdit}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(onEdit).toHaveBeenCalled();
+  });
+  it('should call onDismiss handler when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={onDismiss}
+      />
+    );
+    fireEvent.click(screen.getByText('Dismiss'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

package/src/ResponseActions/ResponseActionButton.tsx

@@ -22,9 +22,11 @@ export interface ResponseActionButtonProps {
   tooltipProps?: TooltipProps;
   /** Whether button is in clicked state */
   isClicked?: boolean;
+  /** Ref applied to button  */
+  innerRef?: React.Ref<HTMLButtonElement>;
 }
 
-export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps> = ({
+export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps> = ({
   ariaLabel,
   clickedAriaLabel = ariaLabel,
   className,
@@ -34,7 +36,9 @@ export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonP
   tooltipContent,
   clickedTooltipContent = tooltipContent,
   tooltipProps,
-  isClicked = false
+  isClicked = false,
+  innerRef,
+  ...props
 }) => {
   const generateAriaLabel = () => {
     if (ariaLabel) {
@@ -53,6 +57,8 @@ export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonP
       exitDelay={tooltipProps?.exitDelay || 0}
       distance={tooltipProps?.distance || 8}
       animationDuration={tooltipProps?.animationDuration || 0}
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
       {...tooltipProps}
     >
       <Button
@@ -67,9 +73,15 @@ export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonP
         isDisabled={isDisabled}
         onClick={onClick}
         size="sm"
+        ref={innerRef}
+        {...props}
       ></Button>
     </Tooltip>
   );
 };
 
+const ResponseActionButton = React.forwardRef((props: ResponseActionButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+  <ResponseActionButtonBase innerRef={ref} {...props} />
+));
+
 export default ResponseActionButton;

package/src/ResponseActions/ResponseActions.scss

@@ -3,7 +3,7 @@
   gap: var(--pf-t--global--spacer--xs);
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 
-  .pf-v6-c-button {
+  .pf-chatbot__button--response-action.pf-v6-c-button.pf-m-plain.pf-m-small {
     --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
     border-radius: var(--pf-t--global--border--radius--pill);
     width: 2.3125rem;
@@ -22,7 +22,7 @@
   }
 }
 
-.pf-v6-c-button.pf-chatbot__button--response-action-clicked {
+.pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
 }

package/src/ResponseActions/ResponseActions.test.tsx

@@ -90,7 +90,7 @@ describe('ResponseActions', () => {
         name="Bot"
         role="bot"
         avatar=""
-        content="Example with all prebuilt actions"
+        content="I updated your account with those settings. You're ready to set up your first dashboard!"
         actions={{
           positive: {},
           negative: {}
@@ -113,7 +113,9 @@ describe('ResponseActions', () => {
       'pf-chatbot__button--response-action-clicked'
     );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
-    await userEvent.click(screen.getByText('Example with all prebuilt actions'));
+    await userEvent.click(
+      screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!")
+    );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });