@patternfly/chatbot 2.2.0-prerelease.24 → 2.2.0-prerelease.26

package/dist/esm/MessageBar/MessageBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent, TextAreaProps } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
@@ -48,14 +48,17 @@ export interface MessageBarProps extends TextAreaProps {
             tooltipContent?: string;
             props?: ButtonProps;
             inputTestId?: string;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         stop?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         send?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         microphone?: {
             tooltipContent?: {
@@ -64,6 +67,7 @@ export interface MessageBarProps extends TextAreaProps {
             };
             language?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
     };
     /** A callback for when the text area value changes. */

package/dist/esm/MessageBar/MicrophoneButton.d.ts

@@ -10,7 +10,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     /** Callback to update the message value once speech recognition is complete */
     onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
     /** Props to control the PF Tooltip component */
-    tooltipProps?: TooltipProps;
+    tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Use microphone" and "Stop listening" used in the tooltip */
     tooltipContent?: {
         active?: string;

package/dist/esm/__mocks__/rehype-unwrap-images.d.ts

@@ -0,0 +1,2 @@
+declare const RehypeUnwrapImages: () => null;
+export default RehypeUnwrapImages;

package/dist/esm/__mocks__/rehype-unwrap-images.js

@@ -0,0 +1,2 @@
+const RehypeUnwrapImages = () => null;
+export default RehypeUnwrapImages;

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-unwrap-images.tsx"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.24",
+  "version": "2.2.0-prerelease.26",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -39,6 +39,7 @@
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
+    "rehype-unwrap-images": "^1.0.0",
     "path-browserify": "^1.0.1"
   },
   "peerDependencies": {

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

@@ -30,6 +30,8 @@ export const BotMessageExample: React.FunctionComponent = () => {
         return link;
       case 'table':
         return table;
+      case 'image':
+        return image;
       default:
         return;
     }
@@ -136,6 +138,8 @@ _Italic text, formatted with single underscores_
  | 3.0 | April 1, 2025 | Administrator
  `;
 
+  const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
   return (
     <>
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
@@ -234,6 +238,13 @@ _Italic text, formatted with single underscores_
             label="Table"
             id="table"
           />
+          <Radio
+            isChecked={variant === 'image'}
+            onChange={() => setVariant('image')}
+            name="bot-message-type"
+            label="Image"
+            id="image"
+          />
         </FormGroup>
       </Form>
       <Message

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -19,6 +19,7 @@ propComponents:
     'FileDropZone',
     'PreviewAttachment',
     'Message',
+    'MessageExtraContent',
     'PreviewAttachment',
     'ActionProps',
     'SourcesCardProps',
@@ -165,6 +166,16 @@ Messages from users have a different background color to differentiate them from
 
 ```
 
+### Custom message content
+
+**Caution:** Take care when using this feature. It can cause you to stray from accessibility and design best practice standards. If you frequently need add the same component via custom message content, reach out to the PatternFly team. If there's a consistent need for a certain component, we can look into adding native support for additional features.
+
+You can add custom content to specific parts of a `<Message>` via the `extraContent` prop, including additional components (like timestamps, badges, or custom elements). This prop allows you to create dynamic and reusable elements for various use cases, without changing the default message layout.
+
+```js file="./UserMessageWithExtraContent.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments

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

@@ -30,6 +30,8 @@ export const UserMessageExample: React.FunctionComponent = () => {
         return link;
       case 'table':
         return table;
+      case 'image':
+        return image;
       default:
         return;
     }
@@ -136,6 +138,8 @@ _Italic text, formatted with single underscores_
  | 3.0 | April 1, 2025 | Administrator
  `;
 
+  const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
   return (
     <>
       <Message
@@ -224,6 +228,13 @@ _Italic text, formatted with single underscores_
             label="Table"
             id="user-table"
           />
+          <Radio
+            isChecked={variant === 'image'}
+            onChange={() => setVariant('image')}
+            name="user-message-type"
+            label="Image"
+            id="user-image"
+          />
         </FormGroup>
       </Form>
       <Message

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import userAvatar from './user_avatar.svg';
+import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+
+const UserActionEndContent = () => {
+  // eslint-disable-next-line no-console
+  const onClick = () => console.log('custom button click');
+  return (
+    <React.Fragment>
+      <Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
+        End content button
+      </Button>
+      <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
+    </React.Fragment>
+  );
+};
+
+const CardInformationAfterMainContent = () => (
+  <Card ouiaId="BasicCard">
+    <CardTitle>This is content card after main content</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);
+
+const BeforeMainContent = () => (
+  <div>
+    <Badge key={1} isRead>
+      7
+    </Badge>
+    <Badge key={2} isRead>
+      24
+    </Badge>
+  </div>
+);
+
+export const UserMessageWithExtraContent: React.FunctionComponent = () => (
+  <>
+    <Message
+      avatar={userAvatar}
+      name="User"
+      role="user"
+      content="This is a main message."
+      timestamp="1 hour ago"
+      extraContent={{
+        beforeMainContent: <BeforeMainContent />,
+        afterMainContent: <CardInformationAfterMainContent />,
+        endContent: <UserActionEndContent />
+      }}
+    />
+  </>
+);

package/src/Message/ImageMessage/ImageMessage.scss

@@ -0,0 +1,9 @@
+.pf-chatbot__message-image {
+  border-radius: var(--pf-t--global--border--radius--small);
+  max-width: 37.5rem; // 600px
+  max-height: 25rem; // 400px
+  min-height: 6.25rem; // 100px
+  // with rehypePlugins={[rehypeUnwrapImages]}, image is not wrapped in p if it is by itself
+  // however, if in a paragraph tag as part of other content, it should be a block element
+  display: block;
+}

package/src/Message/ImageMessage/ImageMessage.tsx

@@ -0,0 +1,14 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Image
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+
+const ImageMessage = ({ children, ...props }: JSX.IntrinsicElements['img'] & ExtraProps) => (
+  <img className="pf-chatbot__message-image" {...props}>
+    {children}
+  </img>
+);
+
+export default ImageMessage;

package/src/Message/Message.test.tsx

@@ -138,6 +138,8 @@ const EMPTY_TABLE = `
 
  `;
 
+const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -627,4 +629,122 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should render beforeMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const beforeMainContentText = 'Before main content';
+    const beforeMainContent = <div>{beforeMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ beforeMainContent }} />
+    );
+
+    expect(screen.getByText(beforeMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render afterMainContent with main content', () => {
+    const mainContent = 'Main message content';
+    const afterMainContentText = 'After main content';
+    const afterMainContent = <div>{afterMainContentText}</div>;
+
+    render(
+      <Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ afterMainContent }} />
+    );
+
+    expect(screen.getByText(afterMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+
+  it('should render endContent with main content', () => {
+    const mainContent = 'Main message content';
+    const endMainContentText = 'End content';
+    const endContent = <div>{endMainContentText}</div>;
+
+    render(<Message avatar="./img" role="user" name="User" content={mainContent} extraContent={{ endContent }} />);
+
+    expect(screen.getByText(endMainContentText)).toBeTruthy();
+    expect(screen.getByText(mainContent)).toBeTruthy();
+  });
+  it('should render all parts of extraContent with main content', () => {
+    const beforeMainContent = <div>Before main content</div>;
+    const afterMainContent = <div>After main content</div>;
+    const endContent = <div>End content</div>;
+
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    expect(screen.getByText('Before main content')).toBeTruthy();
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.getByText('After main content')).toBeTruthy();
+    expect(screen.getByText('End content')).toBeTruthy();
+  });
+
+  it('should not render extraContent when not provided', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Main message content" />);
+
+    // Ensure no extraContent is rendered
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+
+  it('should handle undefined or null values in extraContent gracefully', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent: null, afterMainContent: undefined, endContent: null }}
+      />
+    );
+
+    // Ensure that no extraContent is rendered if they are null or undefined
+    expect(screen.getByText('Main message content')).toBeTruthy();
+    expect(screen.queryByText('Before main content')).toBeFalsy();
+    expect(screen.queryByText('After main content')).toBeFalsy();
+    expect(screen.queryByText('end message content')).toBeFalsy();
+  });
+  it('should render JSX in extraContent correctly', () => {
+    const beforeMainContent = (
+      <div data-testid="before-main-content">
+        <strong>Bold before content</strong>
+      </div>
+    );
+    const afterMainContent = (
+      <div data-testid="after-main-content">
+        <strong>Bold after content</strong>
+      </div>
+    );
+    const endContent = (
+      <div data-testid="end-main-content">
+        <strong>Bold end content</strong>
+      </div>
+    );
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Main message content"
+        extraContent={{ beforeMainContent, afterMainContent, endContent }}
+      />
+    );
+
+    // Check that the JSX is correctly rendered
+    expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
+    expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
+    expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
+  });
+  it('should handle image correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
 });

package/src/Message/Message.tsx

@@ -2,7 +2,7 @@
 // Chatbot Main - Message
 // ============================================================================
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -36,6 +36,8 @@ import TbodyMessage from './TableMessage/TbodyMessage';
 import TheadMessage from './TableMessage/TheadMessage';
 import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
+import ImageMessage from './ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -56,6 +58,17 @@ export interface MessageAttachment {
   spinnerTestId?: string;
 }
 
+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;
+}
+
 export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
@@ -63,6 +76,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   role: 'user' | 'bot';
   /** Message content */
   content?: string;
+  /** Extra Message content */
+  extraContent?: MessageExtraContent;
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
@@ -123,6 +138,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
+  extraContent,
   name,
   avatar,
   timestamp,
@@ -145,6 +161,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   ...props
 }: MessageProps) => {
+  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
   let avatarClassName;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
@@ -189,40 +206,46 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading loadingWord={loadingWord} />
             ) : (
-              <Markdown
-                components={{
-                  p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-                  code: ({ children, ...props }) => (
-                    <CodeBlockMessage {...props} {...codeBlockProps}>
-                      {children}
-                    </CodeBlockMessage>
-                  ),
-                  h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-                  h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-                  h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-                  h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-                  h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-                  h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-                  ul: (props) => <UnorderedListMessage {...props} />,
-                  ol: (props) => <OrderedListMessage {...props} />,
-                  li: (props) => <ListItemMessage {...props} />,
-                  table: (props) => <TableMessage {...props} {...tableProps} />,
-                  tbody: (props) => <TbodyMessage {...props} />,
-                  thead: (props) => <TheadMessage {...props} />,
-                  tr: (props) => <TrMessage {...props} />,
-                  td: (props) => {
-                    // Conflicts with Td type
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { width, ...rest } = props;
-                    return <TdMessage {...rest} />;
-                  },
-                  th: (props) => <ThMessage {...props} />
-                }}
-                remarkPlugins={[remarkGfm]}
-              >
-                {content}
-              </Markdown>
+              <>
+                {beforeMainContent && <>{beforeMainContent}</>}
+                <Markdown
+                  components={{
+                    p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                    code: ({ children, ...props }) => (
+                      <CodeBlockMessage {...props} {...codeBlockProps}>
+                        {children}
+                      </CodeBlockMessage>
+                    ),
+                    h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                    h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                    h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                    h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                    h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                    h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                    blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                    ul: (props) => <UnorderedListMessage {...props} />,
+                    ol: (props) => <OrderedListMessage {...props} />,
+                    li: (props) => <ListItemMessage {...props} />,
+                    table: (props) => <TableMessage {...props} {...tableProps} />,
+                    tbody: (props) => <TbodyMessage {...props} />,
+                    thead: (props) => <TheadMessage {...props} />,
+                    tr: (props) => <TrMessage {...props} />,
+                    td: (props) => {
+                      // Conflicts with Td type
+                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                      const { width, ...rest } = props;
+                      return <TdMessage {...rest} />;
+                    },
+                    th: (props) => <ThMessage {...props} />,
+                    img: (props) => <ImageMessage {...props} />
+                  }}
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeUnwrapImages]}
+                >
+                  {content}
+                </Markdown>
+                {afterMainContent && <>{afterMainContent}</>}
+              </>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
             {quickStarts && quickStarts.quickStart && (
@@ -264,6 +287,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
               ))}
             </div>
           )}
+          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>

package/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent, TextArea, TextAreaProps } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -53,13 +53,19 @@ export interface MessageBarProps extends TextAreaProps {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: { tooltipContent?: string; props?: ButtonProps; inputTestId?: string };
-    stop?: { tooltipContent?: string; props?: ButtonProps };
-    send?: { tooltipContent?: string; props?: ButtonProps };
+    attach?: {
+      tooltipContent?: string;
+      props?: ButtonProps;
+      inputTestId?: string;
+      tooltipProps?: Omit<TooltipProps, 'content'>;
+    };
+    stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
+    send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
       tooltipContent?: { active?: string; inactive?: string };
       language?: string;
       props?: ButtonProps;
+      tooltipProps?: Omit<TooltipProps, 'content'>;
     };
   };
   /** A callback for when the text area value changes. */

package/src/MessageBar/MicrophoneButton.tsx

@@ -19,7 +19,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   /** Callback to update the message value once speech recognition is complete */
   onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
   /** Props to control the PF Tooltip component */
-  tooltipProps?: TooltipProps;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Use microphone" and "Stop listening" used in the tooltip */
   tooltipContent?: { active?: string; inactive?: string };
   /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */

package/src/__mocks__/rehype-unwrap-images.tsx

@@ -0,0 +1,3 @@
+const RehypeUnwrapImages = () => null;
+
+export default RehypeUnwrapImages;

package/src/main.scss

@@ -16,6 +16,7 @@
 @import './FileDropZone/FileDropZone';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
+@import './Message/ImageMessage/ImageMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
 @import './Message/TableMessage/TableMessage';