Added new examples section for Markdown

Author: thatblindgeye

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

@@ -0,0 +1,26 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithMarkdownDeepThinkingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="This example shows how to use Markdown formatting in deep thinking content. Note the use of shouldRetainStyles to maintain proper formatting:"
+    deepThinking={{
+      shouldRetainStyles: true,
+      toggleContent: 'Show thinking',
+      subheading: '> Thought for 3 seconds',
+      isSubheadingMarkdown: true,
+      body: `I considered **multiple approaches** to answer your question:
+
+1. *Direct response* - Quick but less comprehensive
+2. *Research-based* - Thorough but time-consuming
+3. **Balanced approach** - Combines speed and accuracy
+
+I chose option 3 because it provides the best user experience.`,
+      isBodyMarkdown: true
+    }}
+  />
+);

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

@@ -0,0 +1,29 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const MessageWithMarkdownToolCallExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="This example shows how to use Markdown formatting in tool call content. Note the use of shouldRetainStyles to maintain proper formatting:"
+    toolCall={{
+      shouldRetainStyles: true,
+      titleText: "Calling 'data_processor'",
+      expandableContent: `**Processing data** from the following sources:
+
+- Database query results
+- API responses
+- *Local cache*
+
+\`\`\`json
+{
+  "status": "processing",
+  "items": 42
+}
+\`\`\``,
+      isExpandableContentMarkdown: true
+    }}
+  />
+);

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

@@ -19,142 +19,31 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
   const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
-  const comprehensiveMarkdownBody = `Here's a comprehensive markdown example with various formatting options:
-
-# h1 Heading
-
-## h2 Heading
-
-### h3 Heading
-
-#### h4 Heading
-
-##### h5 Heading
-
-###### h6 Heading
-
-## Text Emphasis
-
-**Bold text, formatted with double asterisks**
-
-__Bold text, formatted with double underscores__
-
-*Italic text, formatted with single asterisks*
-
-_Italic text, formatted with single underscores_
-
-~~Strikethrough~~
-
-## Inline Code
-
-Here is an inline code example - \`() => void\`
-
-## Code Blocks
-
-Here is some YAML code:
-
-~~~yaml
-apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-  name: azure-sample-repo0oooo00ooo
-spec:
-  connectionConfig:
-  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
-~~~
-
-Here is some JavaScript code:
-
-~~~js
-const MessageLoading = () => (
-  <div className="pf-chatbot__message-loading">
-    <span className="pf-chatbot__message-loading-dots">
-      <span className="pf-v6-screen-reader">Loading message</span>
-    </span>
-  </div>
-);
-
-export default MessageLoading;
-~~~
-
-## Block Quotes
-
-> Blockquotes can also be nested...
->> ...by using additional greater-than signs (>) right next to each other...
-> > > ...or with spaces between each sign.
-
-## Lists
-
-### Ordered List
-
-1. Item 1
-2. Item 2
-3. Item 3
-
-### Unordered List
-
-* Item 1
-* Item 2
-* Item 3
-
-### More Complex List
-
-You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to spread butter on toast.
-
-1. **Using a \`toaster\`:**
-
-  - Place \`bread\` in a \`toaster\`
-  - Once \`bread\` is lightly browned, remove from \`toaster\`
-
-2. **Using a \`knife\`:**
-
-  - Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
-
-## Links
-
-A paragraph with a URL: https://reactjs.org.
-
-## Tables
-
-To customize your table, you can use [PatternFly TableProps](/components/table#table)
-
-| Version | GA date | User role 
-|-|-|-|
-| 2.5 | September 30, 2024 | Administrator |
-| 2.5 | June 27, 2023 | Editor |
-| 3.0 | April 1, 2025 | Administrator
-
-## Images
-
-![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)
-
-## Footnotes
-
-This is some text that has a short footnote[^1] and this is text with a longer footnote.[^bignote]
-
-[^1]: This is a short footnote. To return the highlight to the original message, click the arrow. 
-
-[^bignote]: This is a long footnote with multiple paragraphs and formatting.
-
-    To break long footnotes into paragraphs, indent the text. 
-
-    Add as many paragraphs as you like. You can include *italic text*, **bold text**, and \`code\`.
-
-    > You can even include blockquotes in footnotes!
-`;
+  const toolResponseBody = `The tool processed **3 database queries** and returned the following results:
+
+1. User data - *42 records*
+2. Transaction history - *128 records*
+3. Analytics metrics - *15 data points*
+
+\`\`\`json
+{
+  "status": "success",
+  "execution_time": "0.12s"
+}
+\`\`\``;
   return (
     <Message
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="This example demonstrates a tool response with a comprehensive markdown body showing all formatting options:"
+      content="This example shows how to use Markdown formatting in tool response content. Note the use of shouldRetainStyles to maintain proper formatting:"
       toolResponse={{
         shouldRetainStyles: true,
         isToggleContentMarkdown: true,
-        toggleContent: '# Tool response: toolName',
+        toggleContent: '**Tool response:** data_query_tool',
         isSubheadingMarkdown: true,
-        subheading: '> Thought for 3 seconds',
-        body: comprehensiveMarkdownBody,
+        subheading: '> Completed in 0.12 seconds',
+        body: toolResponseBody,
         isBodyMarkdown: true,
         cardTitle: (
           <Flex

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

@@ -221,12 +221,6 @@ If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/m
 
 ```
 
-### Messages with Markdown in tool response
-
-```ts file="./MessageWithMarkdownToolResponse.tsx"
-
-```
-
 ### Messages with deep thinking
 
 You can share details about the "thought process" behind an LLM's response, also known as deep thinking. To display a customizable, expandable card with these details, pass `deepThinking` to `<Message>` and provide a subheading (optional) and content body.
@@ -355,3 +349,35 @@ An attachment dropzone allows users to upload files via drag and drop.
 ```js file="./FileDropZone.tsx"
 
 ```
+
+## 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.
+
+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 calls with Markdown
+
+When displaying tool call information, you can use Markdown in the expandable content to provide formatted details about what the tool is processing. This is useful for showing structured data, code snippets, or formatted lists.
+
+```ts file="./MessageWithMarkdownToolCall.tsx"
+
+```
+
+### Deep thinking with Markdown
+
+Deep thinking content can include Markdown formatting in both the subheading and body to better communicate the LLM's reasoning process. This allows you to emphasize key points, structure thought processes with lists, or include other formatting.
+
+```ts file="./MessageWithMarkdownDeepThinking.tsx"
+
+```
+
+### 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:
+
+```ts file="./MessageWithMarkdownToolResponse.tsx"
+
+```

packages/module/src/MarkdownContent/MarkdownContent.tsx

@@ -1,6 +1,6 @@
 // ============================================================================
 // Markdown Content - Shared component for rendering markdown
-// With aid from Jean-Claude Van Code
+// This was aided by Claude code
 // ============================================================================
 import { type FunctionComponent, ReactNode } from 'react';
 import Markdown, { Options } from 'react-markdown';