@patternfly/chatbot 2.2.0-prerelease.9 → 2.2.1

package/src/MessageBar/MessageBar.scss

@@ -21,7 +21,8 @@
   justify-content: flex-end;
   background-color: var(--pf-t--global--background--color--primary--default);
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
-  transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm);
+  transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
+    var(--pf-t--global--motion--duration--sm);
 
   overflow: hidden;
 
@@ -38,41 +39,74 @@
     justify-content: end;
     padding-block-start: var(--pf-t--global--spacer--xs);
     padding-block-end: var(--pf-t--global--spacer--xs);
-    gap: var(--pf-t--global--spacer--xs);
+    gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   }
 
   &-input {
     flex: 1 1 auto;
-    padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
-    padding-block-end: var(--pf-chatbot__message-bar-child--PaddingBlockEnd);
-    overflow: hidden;
-    position: relative;
-  }
-
-  &-placeholder {
-    position: absolute;
-    top: 20px;
-    left: 16px;
-    color: var(--pf-t--global--text--color--placeholder);
-    pointer-events: none;
-    font-size: var(--pf-t--chatbot--font-size);
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 
 .pf-chatbot__message-textarea {
-  padding-block-start: var(--pf-t--global--spacer--md);
-  padding-block-end: var(--pf-t--global--spacer--md);
-  padding-inline-start: var(--pf-t--global--spacer--md);
-  padding-inline-end: var(--pf-t--global--spacer--md);
-  font-size: var(--pf-t--global--font--size--md);
-  line-height: 1.5rem;
+  --pf-v6-c-form-control--before--BorderStyle: none !important;
+  --pf-v6-c-form-control--after--BorderStyle: none !important;
+  resize: none !important;
+  background-color: transparent !important;
+  font-size: var(--pf-t--global--font--size--md) !important;
+  line-height: 1.5rem !important;
   max-height: 12rem;
-  overflow-y: auto;
+  overflow-y: auto !important;
   outline: none;
-  overflow-wrap: break-word;
+  overflow-wrap: break-word !important;
   word-wrap: break-word;
   height: 100%;
   width: 100%;
   display: block !important;
-  position: relative;
+
+  .pf-v6-c-form-control__textarea:focus-visible {
+    outline: none;
+  }
+  textarea {
+    outline-offset: 0px !important;
+    --pf-v6-c-form-control--PaddingBlockStart: 0;
+    --pf-v6-c-form-control--PaddingBlockEnd: 0;
+    --pf-v6-c-form-control--BorderRadius: 0;
+    font-family: var(--pf-t--global--font--family--body);
+  }
+  textarea:focus-visible {
+    outline: none;
+  }
+}
+
+.pf-chatbot__message-textarea.pf-v6-c-form-control.pf-m-textarea:has(textarea) {
+  --pf-v6-c-form-control--PaddingBlockStart: 0;
+  --pf-v6-c-form-control--PaddingBlockEnd: 0;
+  --pf-v6-c-form-control--PaddingInlineStart: 1rem;
+  --pf-v6-c-form-control--PaddingInlineEnd: 1rem;
+  --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
+}
+
+.pf-chatbot__message-textarea.pf-v6-c-form-control.pf-m-textarea {
+  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: 0;
+  --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: 0;
+  --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: 0;
+  --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: 0;
+}
+
+@media screen and (max-width: 359px) {
+  .pf-chatbot__message-textarea {
+    margin-top: var(--pf-t--global--spacer--md) !important;
+    margin-bottom: var(--pf-t--global--spacer--md) !important;
+  }
+}
+
+.pf-chatbot--embedded {
+  @media screen and (max-width: 415px) {
+    .pf-chatbot__message-textarea {
+      margin-top: var(--pf-t--global--spacer--md) !important;
+      margin-bottom: var(--pf-t--global--spacer--md) !important;
+    }
+  }
 }

package/src/MessageBar/MessageBar.test.tsx

@@ -1,11 +1,11 @@
+import '@testing-library/jest-dom';
 import React from 'react';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { MessageBar } from './MessageBar';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { MessageBar } from './MessageBar';
 
 const ATTACH_MENU_ITEMS = [
   <DropdownList key="list-1">
@@ -315,4 +315,12 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can be controlled', () => {
+    render(<MessageBar onSendMessage={jest.fn} value="test" />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+  });
 });

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();
+  });
+});