Merge pull request #440 from rebeccaalpert/image-message

feat(Message): Add styles for messages with images

Author: nicolethoen

package-lock.json

@@ -42,6 +42,7 @@
     "@patternfly/documentation-framework": "^6.5.0",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
     "@swc/core": "1.3.96",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
@@ -90,7 +91,6 @@
     "puppeteer-cluster": "^0.24.0"
   },
   "dependencies": {
-    "@patternfly/react-table": "^6.1.0",
     "dompurify": "^3.2.0",
     "react-dropzone": "^14.2.3"
   },

package.json

@@ -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": {

packages/module/package.json

@@ -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

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.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

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

@@ -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;
+}

packages/module/src/Message/ImageMessage/ImageMessage.scss

@@ -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;

packages/module/src/Message/ImageMessage/ImageMessage.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);
@@ -741,4 +743,8 @@ describe('Message', () => {
     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();
+  });
 });

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

@@ -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 */
@@ -234,9 +236,11 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                       const { width, ...rest } = props;
                       return <TdMessage {...rest} />;
                     },
-                    th: (props) => <ThMessage {...props} />
+                    th: (props) => <ThMessage {...props} />,
+                    img: (props) => <ImageMessage {...props} />
                   }}
                   remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeUnwrapImages]}
                 >
                   {content}
                 </Markdown>

packages/module/src/Message/Message.tsx

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