feat(MessageDivider): add MessageDivider, example, tests (#598)

Author: kmcfaul

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithDividers.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+
+export const MessageWithDividersExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content={`This is a text-based message from a bot named "Bot."`}
+    />
+    <MessageDivider variant="inset" content="1 hour ago" />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content={`This is a text-based message from "Bot," with an updated timestamp.`}
+      timestamp="1 hour ago"
+    />
+    <MessageDivider variant="fullWidth" content="Agent joined the chat" />
+  </>
+);

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -31,6 +31,7 @@ sortValue: 3
 ---
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
@@ -66,6 +67,16 @@ You can further customize the avatar by applying an additional class or passing
 
 ```
 
+### Message dividers
+
+To provide users with important contextual updates, you can add dividers between messages.
+
+For example, you can use the default divider to display a "timestamp" for more significant gaps in the conversation, or you can pass `variant="fullWidth"` to a divider to announce that an agent has joined the chat.
+
+```js file="./MessageWithDividers.tsx"
+
+```
+
 ### Message actions
 
 You can add actions to a message, to allow users to interact with the message content. These actions can include:

packages/module/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
   // --------------------------------------------------------------------------

packages/module/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;
+    }
+  }
+}

packages/module/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');
+  });
+});

packages/module/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;

packages/module/src/MessageDivider/index.ts

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

packages/module/src/index.ts

@@ -63,6 +63,9 @@ export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
 
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

packages/module/src/main.scss

@@ -26,6 +26,7 @@
 @import './Message/UserFeedback/UserFeedback';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
+@import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';