@patternfly/chatbot 6.3.0-prerelease.16 → 6.3.0-prerelease.17

package/dist/cjs/Message/Message.js

@@ -49,6 +49,7 @@ const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
 const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
+const rehypeMoveImagesOutOfParagraphs_1 = require("./Plugins/rehypeMoveImagesOutOfParagraphs");
 const MessageBase = (_a) => {
     var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
@@ -56,7 +57,7 @@ const MessageBase = (_a) => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehype_unwrap_images_1.default];
+    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
     }

package/dist/cjs/Message/Message.test.js

@@ -141,6 +141,7 @@ const EMPTY_TABLE = `
 
  `;
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 const ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -600,6 +601,11 @@ describe('Message', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
         expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
     });
+    it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_IMAGE }));
+        expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement).toHaveClass('pf-chatbot__message-and-actions');
+    });
     it('should handle external links correctly', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)` }));
         // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL

package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeMoveImagesOutOfParagraphs: () => (tree: Node) => void;

package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeMoveImagesOutOfParagraphs = void 0;
+const unist_util_visit_1 = require("unist-util-visit");
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+const rehypeMoveImagesOutOfParagraphs = () => (tree) => {
+    const nodesToRemove = [];
+    (0, unist_util_visit_1.visit)(tree, 'element', (node, index, parent) => {
+        if (node.tagName === 'p' && node.children) {
+            const imagesInParagraph = [];
+            node.children.forEach((child, childIndex) => {
+                if (child.type === 'element' && child.tagName === 'img') {
+                    imagesInParagraph.push({ node: child, index: childIndex });
+                }
+            });
+            if (imagesInParagraph.length > 0 && parent && index !== null) {
+                imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+                    nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+                });
+                // To avoid issues with index shifting during removal, we process in reverse
+                for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+                    const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+                    if (pTag.children) {
+                        pTag.children.splice(imgIndexToRemove, 1);
+                    }
+                }
+                // Insert the removed images after the paragraph
+                const paragraphIndexInParent = parent.children.indexOf(node);
+                if (paragraphIndexInParent !== -1) {
+                    imagesInParagraph.forEach(({ node: imgNode }) => {
+                        parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+                    });
+                }
+                // Remove paragraph if it's now empty after image removal
+                if (node.children.length === 0) {
+                    const paragraphIndexInParent = parent.children.indexOf(node);
+                    if (paragraphIndexInParent !== -1) {
+                        parent.children.splice(paragraphIndexInParent, 1);
+                    }
+                }
+                nodesToRemove.length = 0;
+            }
+        }
+    });
+};
+exports.rehypeMoveImagesOutOfParagraphs = rehypeMoveImagesOutOfParagraphs;

package/dist/esm/Message/Message.js

@@ -43,6 +43,7 @@ import rehypeSanitize from 'rehype-sanitize';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 export const MessageBase = (_a) => {
     var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
     const [messageText, setMessageText] = useState(content);
@@ -50,7 +51,7 @@ export const MessageBase = (_a) => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehypeUnwrapImages];
+    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
     }

package/dist/esm/Message/Message.test.js

@@ -136,6 +136,7 @@ const EMPTY_TABLE = `
 
  `;
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 const ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -595,6 +596,11 @@ describe('Message', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
         expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
     });
+    it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_IMAGE }));
+        expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+        expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement).toHaveClass('pf-chatbot__message-and-actions');
+    });
     it('should handle external links correctly', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)` }));
         // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL

package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'unist';
+export declare const rehypeMoveImagesOutOfParagraphs: () => (tree: Node) => void;

package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js

@@ -0,0 +1,43 @@
+import { visit } from 'unist-util-visit';
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree) => {
+    const nodesToRemove = [];
+    visit(tree, 'element', (node, index, parent) => {
+        if (node.tagName === 'p' && node.children) {
+            const imagesInParagraph = [];
+            node.children.forEach((child, childIndex) => {
+                if (child.type === 'element' && child.tagName === 'img') {
+                    imagesInParagraph.push({ node: child, index: childIndex });
+                }
+            });
+            if (imagesInParagraph.length > 0 && parent && index !== null) {
+                imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+                    nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+                });
+                // To avoid issues with index shifting during removal, we process in reverse
+                for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+                    const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+                    if (pTag.children) {
+                        pTag.children.splice(imgIndexToRemove, 1);
+                    }
+                }
+                // Insert the removed images after the paragraph
+                const paragraphIndexInParent = parent.children.indexOf(node);
+                if (paragraphIndexInParent !== -1) {
+                    imagesInParagraph.forEach(({ node: imgNode }) => {
+                        parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+                    });
+                }
+                // Remove paragraph if it's now empty after image removal
+                if (node.children.length === 0) {
+                    const paragraphIndexInParent = parent.children.indexOf(node);
+                    if (paragraphIndexInParent !== -1) {
+                        parent.children.splice(paragraphIndexInParent, 1);
+                    }
+                }
+                nodesToRemove.length = 0;
+            }
+        }
+    });
+};

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/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.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.test.tsx","../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.test.tsx","../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/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.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-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.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/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.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.test.tsx","../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.test.tsx","../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/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../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-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.16",
+  "version": "6.3.0-prerelease.17",
   "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",
@@ -45,7 +45,8 @@
     "rehype-unwrap-images": "^1.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-sanitize": "^6.0.0",
-    "path-browserify": "^1.0.1"
+    "path-browserify": "^1.0.1",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",

package/src/Message/Message.test.tsx

@@ -142,6 +142,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 INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
 const ERROR = {
   title: 'Could not load chat',
   children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -787,6 +789,13 @@ describe('Message', () => {
     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();
   });
+  it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+    render(<Message avatar="./img" role="user" name="User" content={INLINE_IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    expect(
+      screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement
+    ).toHaveClass('pf-chatbot__message-and-actions');
+  });
   it('should handle external links correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
     // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL

package/src/Message/Message.tsx

@@ -46,6 +46,7 @@ import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -212,7 +213,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
   if (openLinkInNewTab) {
     rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
   }

package/src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts

@@ -0,0 +1,53 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree: Node) => {
+  const nodesToRemove: { parent: Element; index: number; node: Element }[] = [];
+
+  visit(tree, 'element', (node: Element, index: number | null, parent: Element | null) => {
+    if (node.tagName === 'p' && node.children) {
+      const imagesInParagraph: { node: Element; index: number }[] = [];
+
+      node.children.forEach((child: Node, childIndex: number) => {
+        if (child.type === 'element' && (child as Element).tagName === 'img') {
+          imagesInParagraph.push({ node: child as Element, index: childIndex });
+        }
+      });
+
+      if (imagesInParagraph.length > 0 && parent && index !== null) {
+        imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+          nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+        });
+
+        // To avoid issues with index shifting during removal, we process in reverse
+        for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+          const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+          if (pTag.children) {
+            pTag.children.splice(imgIndexToRemove, 1);
+          }
+        }
+
+        // Insert the removed images after the paragraph
+        const paragraphIndexInParent = parent.children.indexOf(node);
+        if (paragraphIndexInParent !== -1) {
+          imagesInParagraph.forEach(({ node: imgNode }) => {
+            parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+          });
+        }
+
+        // Remove paragraph if it's now empty after image removal
+        if (node.children.length === 0) {
+          const paragraphIndexInParent = parent.children.indexOf(node);
+          if (paragraphIndexInParent !== -1) {
+            parent.children.splice(paragraphIndexInParent, 1);
+          }
+        }
+
+        nodesToRemove.length = 0;
+      }
+    }
+  });
+};