feat(Message): Strip images from user messages by default (#673)

Author: rebeccaalpert

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

@@ -392,6 +392,7 @@ _Italic text, formatted with single underscores_
             clobberPrefix: 'user-message-'
           }
         }}
+        hasNoImagesInUserMessages={false}
       />
     </>
   );

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

@@ -919,12 +919,16 @@ 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', () => {
+  it('should handle image correctly for user', () => {
     render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('should handle image correctly for bot', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" 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} />);
+    render(<Message avatar="./img" role="bot" name="Bot" 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
@@ -1046,6 +1050,25 @@ describe('Message', () => {
     // code block isn't rendering
     expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
   });
+  it('should disable images and additional tags for user messages', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`${IMAGE} ${CODE_MESSAGE}`}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    expect(screen.queryByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeFalsy();
+  });
+  it('can override image tag removal default for user messages', () => {
+    render(<Message avatar="./img" role="user" name="User" content={IMAGE} hasNoImagesInUserMessages={false} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+  });
   it('should render deep thinking section correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content="" deepThinking={DEEP_THINKING} />);
     expect(screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -203,6 +203,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   remarkGfmProps?: Options;
   /** Props for a tool call message */
   toolCall?: ToolCallProps;
+  /** Whether user messages default to stripping out images in markdown */
+  hasNoImagesInUserMessages?: boolean;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -249,6 +251,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   deepThinking,
   remarkGfmProps,
   toolCall,
+  hasNoImagesInUserMessages = true,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -275,6 +278,11 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
+  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+    disallowedElements.push(...reactMarkdownProps.disallowedElements);
+  }
+
   const handleMarkdown = () => {
     if (isMarkdownDisabled) {
       return (
@@ -415,6 +423,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           footnoteLabelProperties: { className: [''] },
           ...reactMarkdownProps?.remarkRehypeOptions
         }}
+        disallowedElements={disallowedElements}
       >
         {messageText}
       </Markdown>