diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx index ba27a65f..58a74018 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx @@ -319,6 +319,13 @@ _Italic text, formatted with single underscores_ hasRoundAvatar={false} /> + + + { }) ).not.toBeInTheDocument(); }); + + it('Does not render metadata when isMetadataVisible is false', () => { + render( + + ); + + 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(); 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(); + expect(screen.getByRole('region')).not.toHaveClass('pf-m-end'); + }); + + it('Renders with pf-m-end class when alignment="end"', () => { + render(); + expect(screen.getByRole('region')).toHaveClass('pf-m-end'); + }); }); diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx index 90777d81..47bc6953 100644 --- a/packages/module/src/Message/Message.tsx +++ b/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, '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, 'role'> { export const MessageBase: FunctionComponent = ({ children, role, + alignment = 'start', + isMetadataVisible = true, content, extraContent, name, @@ -314,7 +321,7 @@ export const MessageBase: FunctionComponent = ({ return ( = ({ /> )} - - {name && ( - - - - )} - {role === 'bot' && ( - - {botWord} - - )} - {timestamp} - + {isMetadataVisible && ( + + {name && ( + + + + )} + {role === 'bot' && ( + + {botWord} + + )} + {timestamp} + + )} {children ? ( <>{children}>