@patternfly/chatbot 6.3.0 → 6.4.0-prerelease.2

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -32,10 +32,13 @@ import {
   DrawerActionsProps,
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
-  SkeletonProps
+  SkeletonProps,
+  Title,
+  Icon,
+  ButtonProps
 } from '@patternfly/react-core';
 
-import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { OutlinedClockIcon, OutlinedCommentAltIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
@@ -74,6 +77,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
   /** Items shown in conversation history */
   conversations: Conversation[] | { [key: string]: Conversation[] };
+  /** Additional button props for new chat button. */
+  newChatButtonProps?: ButtonProps;
   /** Text shown in blue button */
   newChatButtonText?: string;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -120,6 +125,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   noResultsState?: HistoryEmptyStateProps;
   /** Sets drawer to compact styling. */
   isCompact?: boolean;
+  /** Display title  */
+  title?: string;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -132,6 +139,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
+  newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
   handleTextInputChange,
@@ -152,6 +160,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   emptyState,
   noResultsState,
   isCompact,
+  title = 'Chat history',
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -238,15 +247,6 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
 
   const renderDrawerContent = () => (
     <>
-      {handleTextInputChange && (
-        <div className="pf-chatbot__input">
-          <SearchInput
-            aria-label={searchInputAriaLabel}
-            onChange={(_event, value) => handleTextInputChange(value)}
-            placeholder={searchInputPlaceholder}
-          />
-        </div>
-      )}
       <DrawerPanelBody {...drawerPanelBodyProps}>{renderMenuContent()}</DrawerPanelBody>
     </>
   );
@@ -262,12 +262,29 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
             {onNewChat && (
-              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat}>
+              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat} {...newChatButtonProps}>
                 {newChatButtonText}
               </Button>
             )}
           </DrawerActions>
         </DrawerHead>
+        <div className="pf-chatbot__title-container">
+          <Title headingLevel="h3">
+            <Icon size="lg" className="pf-chatbot__title-icon">
+              <OutlinedClockIcon />
+            </Icon>
+            {title}
+          </Title>
+          {!isLoading && handleTextInputChange && (
+            <div className="pf-chatbot__input">
+              <SearchInput
+                aria-label={searchInputAriaLabel}
+                onChange={(_event, value) => handleTextInputChange(value)}
+                placeholder={searchInputPlaceholder}
+              />
+            </div>
+          )}
+        </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>
     );

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -6,7 +6,7 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   display: flex;
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,7 +9,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--pf-t--global--spacer--sm);
   position: relative; // this is so focus ring on parent chatbot doesn't include header
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -76,7 +76,7 @@
 .pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
-    background-color: var(--pf-t--chatbot--background);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 }
 
@@ -144,7 +144,7 @@
 .pf-chatbot.pf-m-compact {
   .pf-chatbot__header {
     gap: var(--pf-t--global--spacer--sm);
-    padding: var(--pf-t--global--spacer--sm);
+    padding: var(--pf-t--global--spacer--md);
   }
 
   .pf-chatbot__header .pf-chatbot__title img {

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -6,12 +6,12 @@
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
   padding: var(--pf-t--global--spacer--md);
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot-toggle--background--hover);
+    background-color: var(--pf-t--color--gray--70);
   }
 
   .pf-v6-c-button__icon {

package/src/FileDropZone/FileDropZone.tsx

@@ -1,9 +1,9 @@
-import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
+import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
-import { Accept, FileError, FileRejection } from 'react-dropzone/.';
+import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -2,8 +2,6 @@
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
 import { useState, useRef, useId, useCallback, useEffect } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
 import {
   CodeBlock,
@@ -20,7 +18,6 @@ import {
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -137,30 +134,7 @@ const CodeBlockMessage = ({
       <CodeBlock actions={actions}>
         <CodeBlockCode>
           <>
-            {language ? (
-              // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
-              // Forked for now and adjusted to match what we need
-              <ExpandableSectionForSyntaxHighlighter
-                variant={ExpandableSectionVariant.truncate}
-                isExpanded={isExpanded}
-                isDetached
-                toggleId={toggleId}
-                contentId={contentId}
-                language={language}
-                {...expandableSectionProps}
-              >
-                <SyntaxHighlighter
-                  {...props}
-                  language={language}
-                  style={obsidian}
-                  PreTag="div"
-                  CodeTag="div"
-                  wrapLongLines
-                >
-                  {String(children).replace(/\n$/, '')}
-                </SyntaxHighlighter>
-              </ExpandableSectionForSyntaxHighlighter>
-            ) : (
+            {isExpandable ? (
               <ExpandableSection
                 variant={ExpandableSectionVariant.truncate}
                 isExpanded={isExpanded}
@@ -171,6 +145,8 @@ const CodeBlockMessage = ({
               >
                 {children}
               </ExpandableSection>
+            ) : (
+              children
             )}
           </>
         </CodeBlockCode>

package/src/Message/Message.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
-  padding-bottom: var(--pf-t--global--spacer--2xl);
+  padding-bottom: var(--pf-t--global--spacer--xl);
 
   // Avatar
   // --------------------------------------------------------------------------
@@ -48,20 +48,22 @@
 
     // Author name
     .pf-chatbot__message-name {
-      font-family: var(--pf-t--chatbot--heading--font-family);
+      font-family: var(
+        --pf-v6-c-content--heading--FontFamily,
+        redhatdisplayvf,
+        redhatdisplay,
+        helvetica,
+        arial,
+        sans-serif
+      );
       font-weight: 600;
       font-size: var(--pf-t--global--font--size--sm);
     }
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
       font-weight: var(--pf-t--global--font--weight--body--bold);
-
-      .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
-      }
     }
 
     // Timestamp

package/src/Message/Message.test.tsx

@@ -12,6 +12,7 @@ const ALL_ACTIONS = [
   { label: /Good response/i },
   { label: /Bad response/i },
   { label: /Copy/i },
+  { label: /Edit/i },
   { label: /Share/i },
   { label: /Listen/i }
 ];
@@ -426,6 +427,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
           download: { onClick: () => console.log('Download') },
@@ -454,6 +457,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
           download: { onClick: () => console.log('Download') },
@@ -467,6 +472,36 @@ describe('Message', () => {
       expect(screen.queryByRole('button', { name: label })).toBeFalsy();
     });
   });
+  it('should not show actions if isEditable is true', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isEditable
+        actions={{
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+    });
+  });
   it('should render unordered lists correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
     expect(screen.getByText('Here is an unordered list:')).toBeTruthy();

package/src/Message/Message.tsx

@@ -44,7 +44,7 @@ import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
-import { PluggableList } from 'react-markdown/lib';
+import { PluggableList } from 'unified';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
@@ -99,7 +99,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   isLoading?: boolean;
   /** Array of attachments attached to a message */
   attachments?: MessageAttachment[];
-  /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+  /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
   actions?: {
     [key: string]: ActionProps;
   };
@@ -179,6 +179,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Callback functionf or when edit cancel update button is clicked */
   onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
   /** Props for edit form */
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
@@ -219,6 +221,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   cancelWord = 'Cancel',
   onEditUpdate,
   onEditCancel,
+  inputRef,
   editFormProps,
   isCompact,
   ...props
@@ -256,7 +259,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
         <>
           {beforeMainContent && <>{beforeMainContent}</>}
           <MessageInput
-            content={content}
+            content={messageText}
             editPlaceholder={editPlaceholder}
             updateWord={updateWord}
             cancelWord={cancelWord}
@@ -265,6 +268,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
               setMessageText(value);
             }}
             onEditCancel={onEditCancel}
+            inputRef={inputRef}
             {...editFormProps}
           />
         </>
@@ -369,7 +373,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 isCompact={isCompact}
               />
             )}
-            {!isLoading && actions && <ResponseActions actions={actions} />}
+            {!isLoading && !isEditable && actions && <ResponseActions actions={actions} />}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (
               <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />

package/src/Message/MessageInput.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message Input
 // ============================================================================
-import type { FormEvent, FunctionComponent } from 'react';
+import type { FormEvent, FunctionComponent, Ref } from 'react';
 import { useState } from 'react';
 import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
 
@@ -16,6 +16,8 @@ export interface MessageInputProps extends FormProps {
   onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
   /** Callback functionf or when edit cancel update button is clicked */
   onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
   /** Message text */
   content?: string;
 }
@@ -26,6 +28,7 @@ const MessageInput: FunctionComponent<MessageInputProps> = ({
   cancelWord = 'Cancel',
   onEditUpdate,
   onEditCancel,
+  inputRef,
   content,
   ...props
 }: MessageInputProps) => {
@@ -43,6 +46,7 @@ const MessageInput: FunctionComponent<MessageInputProps> = ({
         onChange={onChange}
         aria-label={editPlaceholder}
         autoResize
+        ref={inputRef}
       />
       <ActionGroup className="pf-chatbot__message-edit-buttons">
         <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>

package/src/MessageBar/AttachButton.tsx

@@ -6,8 +6,8 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef } from 'react';
 
 // Import PatternFly components
-import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { Accept, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {

package/src/MessageBar/MessageBar.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
-import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';

package/src/MessageBar/SendButton.scss

@@ -13,11 +13,11 @@
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
     color: var(--pf-t--global--color--brand--hover);
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--chatbot--blue-icon--fill--hover);
+      color: var(--pf-t--global--color--brand--hover);
     }
   }
 }
@@ -37,7 +37,7 @@
 
   .pf-v6-c-button.pf-chatbot__button--send:hover,
   .pf-v6-c-button.pf-chatbot__button--send:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
   }
 }
 

package/src/MessageBox/JumpButton.scss

@@ -14,7 +14,7 @@
   border-radius: var(--pf-t--global--border--radius--pill) !important;
   --pf-v6-c-button--MinWidth: 2rem !important;
   background-color: var(--pf-t--global--background--color--primary--default) !important;
-  border: 1px solid var(--pf-t--chatbot--border) !important;
+  border: 1px solid var(--pf-t--global--border--color--default) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
   color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;

package/src/MessageBox/MessageBox.tsx

@@ -310,7 +310,7 @@ export const MessageBox = forwardRef(
           role="region"
           tabIndex={0}
           aria-label={ariaLabel}
-          className={`pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className ?? ''}`}
+          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`}
           ref={messageBoxRef}
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}

package/src/MessageDivider/MessageDivider.scss

@@ -0,0 +1,45 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+.pf-chatbot__message-divider {
+  display: grid;
+  padding-block-end: var(--pf-t--global--spacer--xl);
+
+  .pf-v6-c-divider,
+  .pf-v6-c-label {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+  }
+
+  .pf-v6-c-label {
+    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--tertiary--default); 
+    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default); 
+    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); 
+    --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+    
+    .pf-v6-c-label__text {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+      text-align: center;
+    }  
+  }
+
+  &.pf-m-divider {    
+    .pf-v6-c-label {
+      --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default); 
+      --pf-v6-c-label--MaxWidth: 75%;
+
+      justify-self: center;
+    }
+    
+    .pf-v6-c-divider {
+      align-self: center;
+    }
+  }
+  
+  &.pf-m-wrap {
+    .pf-v6-c-label,
+    .pf-v6-c-label__text {
+      white-space: normal;
+    }
+  }
+}

package/src/MessageDivider/MessageDivider.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageDivider from './MessageDivider';
+
+describe('MessageDivider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+    render(<MessageDivider data-testid="message-divider" />);
+    expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render inset variant correctly', () => {
+    render(<MessageDivider variant="inset" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render fullWidth variant correctly', () => {
+    render(<MessageDivider variant="fullWidth" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+  });
+});

package/src/MessageDivider/MessageDivider.tsx

@@ -0,0 +1,35 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+import type { FunctionComponent } from 'react';
+import { Divider, Label } from '@patternfly/react-core';
+
+export interface MessageDividerProps {
+  /** Variant of the divider */
+  variant?: 'inset' | 'fullWidth';
+  /** Content of the message divider */
+  content?: string;
+}
+
+const MessageDivider: FunctionComponent<MessageDividerProps> = ({
+  variant = 'inset',
+  content = new Date().toLocaleDateString(),
+  ...props
+}: MessageDividerProps) => {
+  if (variant === 'inset') {
+    return (
+      <div className="pf-chatbot__message-divider pf-m-divider pf-m-wrap" {...props}>
+        <Divider />
+        <Label variant="outline">{content}</Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pf-chatbot__message-divider pf-m-wrap" {...props}>
+      <Label>{content}</Label>
+    </div>
+  );
+};
+
+export default MessageDivider;

package/src/MessageDivider/index.ts

@@ -0,0 +1,3 @@
+export { default } from './MessageDivider';
+
+export * from './MessageDivider';

package/src/ResponseActions/ResponseActions.test.tsx

@@ -9,6 +9,7 @@ const ALL_ACTIONS = [
   { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
   { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+  { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
   { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
@@ -44,6 +45,7 @@ const ALL_ACTIONS_DATA_TEST = [
   { type: 'positive', label: 'Good response', dataTestId: 'positive' },
   { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
   { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'edit', label: 'Edit', dataTestId: 'edit' },
   { type: 'share', label: 'Share', dataTestId: 'share' },
   { type: 'download', label: 'Download', dataTestId: 'download' },
   { type: 'listen', label: 'Listen', dataTestId: 'listen' }
@@ -60,6 +62,7 @@ describe('ResponseActions', () => {
           positive: { onClick: jest.fn() },
           negative: { onClick: jest.fn() },
           copy: { onClick: jest.fn() },
+          edit: { onClick: jest.fn() },
           share: { onClick: jest.fn() },
           download: { onClick: jest.fn() },
           listen: { onClick: jest.fn() }
@@ -69,10 +72,11 @@ describe('ResponseActions', () => {
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
     const copyBtn = screen.getByRole('button', { name: 'Copy' });
+    const editBtn = screen.getByRole('button', { name: 'Edit' });
     const shareBtn = screen.getByRole('button', { name: 'Share' });
     const downloadBtn = screen.getByRole('button', { name: 'Download' });
     const listenBtn = screen.getByRole('button', { name: 'Listen' });
-    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, downloadBtn, listenBtn];
+    const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
     buttons.forEach((button) => {
       expect(button).toBeTruthy();
     });
@@ -265,6 +269,7 @@ describe('ResponseActions', () => {
       { type: 'positive', ariaLabel: 'Thumbs up' },
       { type: 'negative', ariaLabel: 'Thumbs down' },
       { type: 'copy', ariaLabel: 'Copy the message' },
+      { type: 'edit', ariaLabel: 'Edit this message' },
       { type: 'share', ariaLabel: 'Share it with friends' },
       { type: 'download', ariaLabel: 'Download your cool message' },
       { type: 'listen', ariaLabel: 'Listen up' }