Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 1 commit into from
Sep 19, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,7 @@ _Italic text, formatted with single underscores_
clobberPrefix: 'user-message-'
}
}}
hasNoImagesInUserMessages={false}
/>
</>
);
Expand Down
27 changes: 25 additions & 2 deletions packages/module/src/Message/Message.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down
9 changes: 9 additions & 0 deletions packages/module/src/Message/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment on lines +206 to +207
Copy link
Copy Markdown
Collaborator

@thatblindgeye thatblindgeye Sep 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a nit, but wdyt about having this prop be the inverse and be something like "areImagesAllowed" or "hasImages"? Not totally sure if we'd need to note this is for user messages in the prop name, but just to try and make the prop name a tad more concise.

}

export const MessageBase: FunctionComponent<MessageProps> = ({
Expand Down Expand Up @@ -249,6 +251,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
deepThinking,
remarkGfmProps,
toolCall,
hasNoImagesInUserMessages = true,
...props
}: MessageProps) => {
const [messageText, setMessageText] = useState(content);
Expand All @@ -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 (
Expand Down Expand Up @@ -415,6 +423,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
footnoteLabelProperties: { className: [''] },
...reactMarkdownProps?.remarkRehypeOptions
}}
disallowedElements={disallowedElements}
>
{messageText}
</Markdown>
Expand Down
Loading