Enhance Message Component to Support ReactNode in Content via extraContent Prop

[anujsingla]

Currently, the content prop in the Message component only accepts strings, limiting the flexibility for rendering dynamic or custom content. I propose adding an extraContent prop that allows consumers to inject custom React components at specific locations within the message.
Message component - https://github.com/patternfly/chatbot/blob/main/packages/module/src/Message/Message.tsx

Proposed Solution:
Introduce a new extraContent prop with the following structure:

export interface MessageExtraContent {
  /** Content to display before the main content */
  beforeMainContent?: ReactNode;

  /** Content to display after the main content */
  afterMainContent?: ReactNode;

  /** Content to display at the end */
  endContent?: ReactNode;
}

Example Usage:

<Message
  role="user"
  avatar="path/to/avatar.png"
  content="Hello, this is a string content"
  extraContent={{
    beforeMainContent: <div>Custom Component Before</div>,
    afterMainContent: <div>Custom Component After</div>,
    endContent: <div>Footer Component</div>,
  }}
/>

Benefits:

• Enables more flexible and dynamic content rendering within the Message component.
• Content still supports strings for basic use cases.
• This change will enhance the usability of the Message component for developers who need custom layouts or additional content injection without breaking existing functionality.