feat(Calls/Response/Thinking): added support for Markdown #759

thatblindgeye · 2025-11-12T14:15:51Z

Closes #668

patternfly-build · 2025-11-12T14:17:54Z

Preview: https://chatbot-pr-chatbot-759.surge.sh

A11y report: https://chatbot-pr-chatbot-759-a11y.surge.sh

rebeccaalpert

Went through Message examples looking for visual regressions manually - looked ok (found unrelated issue #760).

We are experiencing some style bleed from the other components when Markdown is turned on - we likely want to unset or conditionally apply certain classes in the Markdown component mapping when used outside of Messages:

Before	After

Before	After

Before	After

rebeccaalpert · 2025-11-12T15:19:38Z

packages/module/src/MarkdownContent/MarkdownContent.tsx

+    disallowedElements.push(...reactMarkdownProps.disallowedElements);
+  }
+
+  if (isMarkdownDisabled) {


Would you want to pull this out into Message specifically? I don't see us using it in the cards, but it's also not hurting anything. Matter of taste imho.

thatblindgeye · 2025-11-18T19:31:16Z

I think ultimately it may depend how much control the consumer(s) want with this. Right now we're keeping the structures of the 3 components, but allowing Markdown to be passed into various pieces of them. An alternative (or addition) would be to allow consumers to pass completely new Markdown that replaces everything within the CardBody in these components (so no ExpandableSection etc, just the Card and CardBody wrappers with everything else dependent on what the consumers passes as Markdown).

rebeccaalpert

Has @kaylachumley reviewed mobile view at all for the cards? Wondering if we need any other adjustments to that or demos for that. I typically test that by placing components in one of the main ChatBot demos - those containers all have breakpoints and styles set up for mobile. I'm concerned about images, etc. in particular.

I'm assuming Kayla has signed off on text styles, so not leaving comments about that. Just a few comments; otherwise looking good so far to me! Thanks for all your hard work on this.

rebeccaalpert · 2025-11-19T22:05:20Z

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

 ```

+### Messages with Markdown in tool response
+


@edonehoo will probably have feelings here - do we want to put all the tool/thinking stuff with Markdown together? Likely we want to introduce these examples.

Hmm, as in - do we want the markdown example to include all of the options in that single block? or pulling together the markdown/non-markdown thinking examples?

My general opinion and first thought is that the current markdown example I think is kind of disruptive to the docs experience since it's so long. Do we need to display every formatting option there? Could we not just state that any message type can be in markdown, show a couple of examples, and let consumers to fill in the gaps for the rest?

I agree with @edonehoo here! It does feel lengthy and if possible, it could be nice to show a shorter md examples and just note that any format can be used

packages/module/src/MarkdownContent/MarkdownContent.test.tsx

rebeccaalpert · 2025-11-19T22:10:27Z

packages/module/src/MarkdownContent/MarkdownContent.tsx

+  /** Whether to strip out images in markdown */
+  hasNoImages?: boolean;
+  /** Sets background colors to be appropriate on primary chatbot background */
+  isPrimary?: boolean;


Have we tested what this does in the context of the tool calls, etc.? Messages was fine when I looked.

Passed it into markdownContentProps and it did apply pf-m-primary in places and at least on inline code the bakcground color value changed

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

packages/module/src/Message/TextMessage/TextMessage.scss

packages/module/src/ToolResponse/ToolResponse.scss

kaylachumley · 2025-11-20T16:03:15Z

Has @kaylachumley reviewed mobile view at all for the cards? Wondering if we need any other adjustments to that or demos for that. I typically test that by placing components in one of the main ChatBot demos - those containers all have breakpoints and styles set up for mobile. I'm concerned about images, etc. in particular.

I'm assuming Kayla has signed off on text styles, so not leaving comments about that. Just a few comments; otherwise looking good so far to me! Thanks for all your hard work on this.

Good call out! @thatblindgeye Is it possible to see these in a chatbot overlay demo to test how it looks/reacts?

thatblindgeye · 2025-11-20T20:11:01Z

@kaylachumley @rebeccaalpert added a quick demo to show ToolResponse in the overlay chatbot. I added a style to prevent images from causing overflow when in a tool resposne context. ChatBot with markdown tool response

kaylachumley

I think this looks good - I dont see any issues right now switching from desktop to overlay

rebeccaalpert

Thank you - think we just need to iron out the examples with Kayla and Erin (if we want to show examples). Code stuff looks good to me. Peeked at mobile example (thanks for that) and it looked good to me also.

nicolethoen

maybe for a follow up - should we really have a yarn.lock and a package-lock.json file in this project?

nicolethoen · 2025-11-21T18:16:51Z

packages/module/src/MarkdownContent/MarkdownContent.tsx

+}: MarkdownContentProps) => {
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
+  if (openLinkInNewTab) {
+    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);


If this is only appiled when you have 'openLinkInNewTab', does that mean that there are times when we are not sanitizing, when we should?

Doing this because of this callout: https://github.com/rehypejs/rehype-external-links?tab=readme-ov-file#security. I believe the default for the markdown processor we use doesn't need this, but some plugins/components do: https://github.com/remarkjs/react-markdown?tab=readme-ov-file#security

packages/module/src/MarkdownContent/MarkdownContent.tsx

edonehoo

a little bit of feedback/a few changes, but in general I think what you wrote already looks great and pretty comprehensive!

edonehoo · 2025-11-25T21:10:16Z

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

+
+To enable Markdown rendering, use the appropriate Markdown flag prop (such as `isBodyMarkdown`, `isSubheadingMarkdown`, or `isExpandableContentMarkdown`) depending on the component and content you're formatting.
+
+**Important:** When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and appear inconsistent with the rest of the ChatBot interface.


Suggested change

**Important:** When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and appear inconsistent with the rest of the ChatBot interface.

**Important:** When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and create inconsistencies with the rest of the ChatBot interface.

edonehoo · 2025-11-25T21:11:31Z

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

+
+### Tool responses with Markdown
+
+Tool response cards support Markdown in multiple areas including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing:


Suggested change

Tool response cards support Markdown in multiple areas including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing:

Tool response cards support Markdown in multiple areas, including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing.

edonehoo · 2025-11-25T21:13:42Z

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

+
+## Examples with Markdown
+
+The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text.


Suggested change

The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text.

The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text. The following examples demonstrate different ways you can use Markdown in a few of the ChatBot components, but this is not an exhaustive list of all Markdown customizations you can make.

does this sound accurate? if you think your examples cover the majority of styles, we can just leave this off

can consumers theoretically apply any md formatting to any ChatBot components, or are there any limitations we want to address in advance?

I think the addition is good, especially if we tinker more in the future we don't have to wworry about this verbiage being terribly out of date.

I don't think any chatbot components. These ones and Messages are the big ones probably. @rebeccaalpert might have a little more insight

It's limited to just these three + messages right now. I think we want to enable more composition in Messages following this work (so people can have Markdown blocks followed by tool calls followed by Markdown blocks, for example), but I'd suggest only enabling Markdown in other components case-by-case as people ask.

okay cool, I think this is okay then. But if we want to be more heavy handed in stating that Messages in general can including Markdown, we could always adjust the first sentence to something like "The ChatBot supports Markdown formatting in <Message> components, "

nicolethoen · 2025-12-03T21:39:48Z

packages/module/src/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,265 @@
+// ============================================================================
+// Markdown Content - Shared component for rendering markdown
+// This was aided by Claude code


I don't think this line in necessary - it could be in the commit message body rather than in the shipped production code i think.

github-actions · 2025-12-03T22:22:15Z

🎉 This PR is included in version 6.5.0-prerelease.23 🎉

The release is available on:

Your semantic-release bot 📦🚀

Lucifergene · 2025-12-04T08:36:31Z

@thatblindgeye @nicolethoen I'm from the RHOAI team.
We just installed the latest pre-release (6.5.0-prerelease.23) that includes this fix.

But the thing is the copy button for the code-block is broken.
When clicked and pasted, gives me this:

[object Object], ,[object Object],
,[object Object], ,[object Object],
,[object Object],
  ,[object Object], ,[object Object],
  ,[object Object],
    ,[object Object], ,[object Object],
,[object Object],
  ,[object Object], ,[object Object],
  ,[object Object],
    ,[object Object],
      ,[object Object], ,[object Object],
  ,[object Object],
    ,[object Object],
      ,[object Object],
        ,[object Object], ,[object Object],
    ,[object Object],
      ,[object Object],
      ,[object Object], ,[object Object], ,[object Object],
        ,[object Object], ,[object Object],
        ,[object Object],
        ,[object Object], ,[object Object], ,[object Object],
,[object Object],
,[object Object], ,[object Object],
,[object Object], ,[object Object],
,[object Object],
  ,[object Object], ,[object Object],
,[object Object],
  ,[object Object],
    ,[object Object], ,[object Object],
  ,[object Object],
    ,[object Object], ,[object Object], ,[object Object],
      ,[object Object], ,[object Object],
      ,[object Object], ,[object Object],
  ,[object Object], ,[object Object],

It was not an requirement from us, therefore we are totally fine with moving with the previous pre-release that has our requirement.
But wanted to inform this, before anyone finds out!

thatblindgeye · 2025-12-04T14:17:05Z

@Lucifergene just opened #783 to (hopefully) resolve this!

rebeccaalpert reviewed Nov 12, 2025

View reviewed changes

thatblindgeye requested a review from kaylachumley November 14, 2025 14:22

kaylachumley approved these changes Nov 18, 2025

View reviewed changes

thatblindgeye force-pushed the iss668 branch from e0e245b to c3cd357 Compare November 18, 2025 19:29

thatblindgeye requested a review from nicolethoen November 18, 2025 19:29

thatblindgeye marked this pull request as ready for review November 18, 2025 19:31

rebeccaalpert requested a review from edonehoo November 19, 2025 22:03

rebeccaalpert reviewed Nov 19, 2025

View reviewed changes

kaylachumley self-requested a review November 20, 2025 16:02

thatblindgeye force-pushed the iss668 branch from a6c44c1 to 11e5e7b Compare November 20, 2025 20:03

kaylachumley approved these changes Nov 20, 2025

View reviewed changes

rebeccaalpert approved these changes Nov 21, 2025

View reviewed changes

nicolethoen approved these changes Nov 21, 2025

View reviewed changes

nicolethoen reviewed Nov 21, 2025

View reviewed changes

nicolethoen self-requested a review November 21, 2025 18:19

thatblindgeye force-pushed the iss668 branch from 3914c9d to b4b2db3 Compare November 25, 2025 20:38

edonehoo reviewed Nov 25, 2025

View reviewed changes

thatblindgeye requested a review from edonehoo November 25, 2025 21:34

edonehoo approved these changes Nov 25, 2025

View reviewed changes

thatblindgeye mentioned this pull request Dec 1, 2025

Choose yarn or npm #775

Open

thatblindgeye force-pushed the iss668 branch from a59f22f to 29bc399 Compare December 2, 2025 19:22

nicolethoen reviewed Dec 3, 2025

View reviewed changes

thatblindgeye added 4 commits December 3, 2025 17:02

feat(Calls/Response/Thinking): added support for Markdown

c063ba6

Added logic to retain styles

91da7e4

Fixed lint errors

ff663cc

Added example and updated styling

b63aa36

thatblindgeye added 10 commits December 3, 2025 17:02

Fixed lint error

e794111

Retained styling for ToolCall and DeepThinking

7d1eca0

Added tests

3236a9e

Removed comments, added prop for retain styles

4346363

Updated tests

45e8430

Added demo for overlay chatbot with toolresponse MD

99fdced

Fixed lint errors

d25d27c

Added new examples section for Markdown

402c765

Erin feedback

358e0cf

Removed full screen demo

2aa781b

thatblindgeye force-pushed the iss668 branch from 29bc399 to 2aa781b Compare December 3, 2025 22:10

Removed comment about claude code

bc6af47

nicolethoen merged commit 1663e56 into patternfly:main Dec 3, 2025
7 checks passed

github-actions bot added the released on @prerelease label Dec 3, 2025

thatblindgeye mentioned this pull request Dec 4, 2025

Codeblock message copy broken after markdown update #782

Closed

thatblindgeye mentioned this pull request Dec 10, 2025

Create Q4 release versions #786

Open


		To enable Markdown rendering, use the appropriate Markdown flag prop (such as `isBodyMarkdown`, `isSubheadingMarkdown`, or `isExpandableContentMarkdown`) depending on the component and content you're formatting.

		Important: When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and appear inconsistent with the rest of the ChatBot interface.


		### Tool responses with Markdown

		Tool response cards support Markdown in multiple areas including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing:


		## Examples with Markdown

		The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text.

feat(Calls/Response/Thinking): added support for Markdown #759

feat(Calls/Response/Thinking): added support for Markdown #759

Uh oh!

Conversation

thatblindgeye commented Nov 12, 2025

Uh oh!

patternfly-build commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rebeccaalpert left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thatblindgeye commented Nov 18, 2025

Uh oh!

rebeccaalpert left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kaylachumley commented Nov 20, 2025

Uh oh!

thatblindgeye commented Nov 20, 2025

Uh oh!

kaylachumley left a comment

Choose a reason for hiding this comment

Uh oh!

rebeccaalpert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rebeccaalpert Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rebeccaalpert Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

Lucifergene commented Dec 4, 2025

Uh oh!

thatblindgeye commented Dec 4, 2025

patternfly-build commented Nov 12, 2025 •

edited

Loading

rebeccaalpert left a comment •

edited

Loading

rebeccaalpert Nov 21, 2025 •

edited

Loading

rebeccaalpert Nov 25, 2025 •

edited

Loading