Merge pull request #805 from thatblindgeye/iss791_rightAlignMsg

feat(Messages): added right-aligned and no metadata variants

Author: nicolethoen

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

@@ -319,6 +319,13 @@ _Italic text, formatted with single underscores_
         hasRoundAvatar={false}
       />
       <Message name="Bot" role="bot" content="This is a message from a bot with no avatar." />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        isMetadataVisible={false}
+        content="This is a message from a bot with metadata not visible."
+      />
       <Select
         id="single-select"
         isOpen={isOpen}

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

@@ -334,6 +334,13 @@ _Italic text, formatted with single underscores_
         avatarProps={{ isBordered: true }}
       />
       <Message name="User" role="user" content="This is a user message with no avatar" />
+      <Message
+        name="User"
+        role="user"
+        content="This is a user message with metadata not visible."
+        avatar={userAvatar}
+        isMetadataVisible={false}
+      />
       <Message
         name="User"
         role="user"
@@ -345,6 +352,13 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         inputRef={messageInputRef}
       />
+      <Message
+        name="User"
+        role="user"
+        avatar={userAvatar}
+        alignment="end"
+        content="This is a user message that is aligned at the end of the message container."
+      />
       <Select
         id="single-select"
         isOpen={isOpen}

packages/module/src/Message/Message.scss

@@ -134,6 +134,15 @@
   .footnotes {
     background-color: var(--pf-t--global--background--color--tertiary--default);
   }
+
+  // Right/End-aligned messages
+  &.pf-m-end {
+    flex-direction: row-reverse;
+
+    .pf-chatbot__message-contents {
+      align-items: flex-end;
+    }
+  }
 }
 
 // Attachments

packages/module/src/Message/Message.test.tsx

@@ -255,6 +255,17 @@ describe('Message', () => {
       })
     ).not.toBeInTheDocument();
   });
+
+  it('Does not render metadata when isMetadataVisible is false', () => {
+    render(
+      <Message isMetadataVisible={false} avatar="./img" role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />
+    );
+
+    expect(screen.queryByText('Bot')).not.toBeInTheDocument();
+    expect(screen.queryByText('AI')).not.toBeInTheDocument();
+    expect(screen.queryByText('2 hours ago')).not.toBeInTheDocument();
+  });
+
   it('should render attachments', () => {
     render(<Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment' }]} />);
     expect(screen.getByText('Hi')).toBeTruthy();
@@ -1330,4 +1341,14 @@ describe('Message', () => {
     );
     expect(container.querySelector('.pf-m-outline')).toBeFalsy();
   });
+
+  it('Renders without pf-m-end class by default', () => {
+    render(<Message avatar="./img" role="user" name="User" content="" />);
+    expect(screen.getByRole('region')).not.toHaveClass('pf-m-end');
+  });
+
+  it('Renders with pf-m-end class when alignment="end"', () => {
+    render(<Message alignment="end" avatar="./img" role="user" name="User" content="" />);
+    expect(screen.getByRole('region')).toHaveClass('pf-m-end');
+  });
 });

packages/module/src/Message/Message.tsx

@@ -35,6 +35,7 @@ import ToolResponse, { ToolResponseProps } from '../ToolResponse';
 import DeepThinking, { DeepThinkingProps } from '../DeepThinking';
 import ToolCall, { ToolCallProps } from '../ToolCall';
 import MarkdownContent from '../MarkdownContent';
+import { css } from '@patternfly/react-styles';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -73,6 +74,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   id?: string;
   /** Role of the user sending the message */
   role: 'user' | 'bot';
+  /** Whether the message is aligned at the horizontal start or end of the message container. */
+  alignment?: 'start' | 'end';
+  /** Flag indicating whether message metadata (user name and timestamp) are visible. */
+  isMetadataVisible?: boolean;
   /** Message content */
   content?: string;
   /** Extra Message content */
@@ -197,6 +202,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
 export const MessageBase: FunctionComponent<MessageProps> = ({
   children,
   role,
+  alignment = 'start',
+  isMetadataVisible = true,
   content,
   extraContent,
   name,
@@ -314,7 +321,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
-      className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      className={css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end')}
       aria-live={isLiveRegion ? 'polite' : undefined}
       aria-atomic={isLiveRegion ? false : undefined}
       ref={innerRef}
@@ -330,19 +337,21 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
         />
       )}
       <div className="pf-chatbot__message-contents">
-        <div className="pf-chatbot__message-meta">
-          {name && (
-            <span className="pf-chatbot__message-name">
-              <Truncate content={name} />
-            </span>
-          )}
-          {role === 'bot' && (
-            <Label variant="outline" isCompact>
-              {botWord}
-            </Label>
-          )}
-          <Timestamp date={date}>{timestamp}</Timestamp>
-        </div>
+        {isMetadataVisible && (
+          <div className="pf-chatbot__message-meta">
+            {name && (
+              <span className="pf-chatbot__message-name">
+                <Truncate content={name} />
+              </span>
+            )}
+            {role === 'bot' && (
+              <Label variant="outline" isCompact>
+                {botWord}
+              </Label>
+            )}
+            <Timestamp date={date}>{timestamp}</Timestamp>
+          </div>
+        )}
         <div className="pf-chatbot__message-response">
           {children ? (
             <>{children}</>