@patternfly/chatbot 6.5.0-prerelease.21 → 6.5.0-prerelease.23

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx

@@ -23,113 +23,230 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
   };
 
   return (
-    <Message
-      name="Bot"
-      role="bot"
-      avatar={patternflyAvatar}
-      content="This example has a body description that's within the recommended limit of 2 lines:"
-      toolResponse={{
-        toggleContent: 'Tool response: toolName',
-        subheading: 'Thought for 3 seconds',
-        body: "Here's the summary for your toolName response:",
-        cardTitle: (
-          <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-            <FlexItem>
-              <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
-                <FlexItem grow={{ default: 'grow' }}>
-                  <Flex gap={{ default: 'gapXs' }}>
-                    <FlexItem>
-                      <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
-                    </FlexItem>
-                    <FlexItem>toolName</FlexItem>
-                  </Flex>
-                </FlexItem>
-                <FlexItem>
-                  <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
-                    <FlexItem>Execution time:</FlexItem>
-                    <FlexItem>0.12 seconds</FlexItem>
-                  </Flex>
-                </FlexItem>
-              </Flex>
-            </FlexItem>
-            <FlexItem>
-              <Button
-                variant="plain"
-                aria-label="Copy tool response to clipboard"
-                icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
-              ></Button>
-            </FlexItem>
-          </Flex>
-        ),
-        cardBody: (
-          <>
-            <DescriptionList
-              style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
-              aria-label="Tool response"
+    <>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This message has a body description that's within the recommended limit of 2 lines:"
+        toolResponse={{
+          toggleContent: 'Tool response: toolName',
+          subheading: 'Thought for 3 seconds',
+          body: "Here's the summary for your toolName response:",
+          cardTitle: (
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
             >
-              <DescriptionListGroup
-                style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+              <FlexItem>
+                <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
+                  <FlexItem grow={{ default: 'grow' }}>
+                    <Flex gap={{ default: 'gapXs' }}>
+                      <FlexItem>
+                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                      </FlexItem>
+                      <FlexItem>toolName</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>
+                    <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
+                      <FlexItem>Execution time:</FlexItem>
+                      <FlexItem>0.12 seconds</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Copy tool response to clipboard"
+                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                ></Button>
+              </FlexItem>
+            </Flex>
+          ),
+          cardBody: (
+            <>
+              <DescriptionList
+                style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
+                aria-label="Tool response"
               >
-                <DescriptionListTerm>Parameters</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <Flex direction={{ default: 'column' }}>
-                    <FlexItem>Optional description text for parameters.</FlexItem>
-                    <FlexItem>
-                      <Flex gap={{ default: 'gapSm' }}>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            type
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            properties
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            label
-                          </Label>
-                        </FlexItem>
-                        <FlexItem>
-                          <Label variant="outline" color="blue">
-                            label
-                          </Label>
-                        </FlexItem>
-                      </Flex>
-                    </FlexItem>
-                  </Flex>
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-              <DescriptionListGroup
-                style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Parameters</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Flex direction={{ default: 'column' }}>
+                      <FlexItem>Optional description text for parameters.</FlexItem>
+                      <FlexItem>
+                        <Flex gap={{ default: 'gapSm' }}>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              type
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              properties
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Flex>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Response</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ExpandableSection
+                      variant={ExpandableSectionVariant.truncate}
+                      toggleTextExpanded="show less of response"
+                      toggleTextCollapsed="show more of response"
+                      onToggle={onToggle}
+                      isExpanded={isExpanded}
+                      style={
+                        {
+                          '--pf-v6-c-expandable-section__content--Opacity': '1',
+                          '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
+                          '--pf-v6-c-expandable-section__content--TranslateY': 0,
+                          '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
+                        } as any
+                      }
+                    >
+                      Descriptive text about the tool response, including completion status, details on the data that
+                      was processed, or anything else relevant to the use case.
+                    </ExpandableSection>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </>
+          )
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This message has a tool response that is collapsed by default:"
+        toolResponse={{
+          isDefaultExpanded: false,
+          toggleContent: 'Tool response: toolName',
+          subheading: 'Thought for 3 seconds',
+          body: "Here's the summary for your toolName response:",
+          cardTitle: (
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            >
+              <FlexItem>
+                <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
+                  <FlexItem grow={{ default: 'grow' }}>
+                    <Flex gap={{ default: 'gapXs' }}>
+                      <FlexItem>
+                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                      </FlexItem>
+                      <FlexItem>toolName</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>
+                    <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
+                      <FlexItem>Execution time:</FlexItem>
+                      <FlexItem>0.12 seconds</FlexItem>
+                    </Flex>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Copy tool response to clipboard"
+                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                ></Button>
+              </FlexItem>
+            </Flex>
+          ),
+          cardBody: (
+            <>
+              <DescriptionList
+                style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
+                aria-label="Tool response"
               >
-                <DescriptionListTerm>Response</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <ExpandableSection
-                    variant={ExpandableSectionVariant.truncate}
-                    toggleTextExpanded="show less of response"
-                    toggleTextCollapsed="show more of response"
-                    onToggle={onToggle}
-                    isExpanded={isExpanded}
-                    style={
-                      {
-                        '--pf-v6-c-expandable-section__content--Opacity': '1',
-                        '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
-                        '--pf-v6-c-expandable-section__content--TranslateY': 0,
-                        '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
-                      } as any
-                    }
-                  >
-                    Descriptive text about the tool response, including completion status, details on the data that was
-                    processed, or anything else relevant to the use case.
-                  </ExpandableSection>
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-            </DescriptionList>
-          </>
-        )
-      }}
-    />
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Parameters</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Flex direction={{ default: 'column' }}>
+                      <FlexItem>Optional description text for parameters.</FlexItem>
+                      <FlexItem>
+                        <Flex gap={{ default: 'gapSm' }}>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              type
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              properties
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                          <FlexItem>
+                            <Label variant="outline" color="blue">
+                              label
+                            </Label>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Flex>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup
+                  style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
+                >
+                  <DescriptionListTerm>Response</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ExpandableSection
+                      variant={ExpandableSectionVariant.truncate}
+                      toggleTextExpanded="show less of response"
+                      toggleTextCollapsed="show more of response"
+                      onToggle={onToggle}
+                      isExpanded={isExpanded}
+                      style={
+                        {
+                          '--pf-v6-c-expandable-section__content--Opacity': '1',
+                          '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
+                          '--pf-v6-c-expandable-section__content--TranslateY': 0,
+                          '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
+                        } as any
+                      }
+                    >
+                      Descriptive text about the tool response, including completion status, details on the data that
+                      was processed, or anything else relevant to the use case.
+                    </ExpandableSection>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </>
+          )
+        }}
+      />
+    </>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -349,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. 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.
+
+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 create inconsistencies 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"
+
+```

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -52,6 +52,20 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
+import {
+Button,
+DescriptionList,
+DescriptionListDescription,
+DescriptionListGroup,
+DescriptionListTerm,
+ExpandableSection,
+ExpandableSectionVariant,
+Flex,
+FlexItem,
+Label
+} from '@patternfly/react-core';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
@@ -59,7 +73,7 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
-import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent } from 'react';
+import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent } from 'react';
 import saveAs from 'file-saver';
 
 ### Basic ChatBot

package/src/DeepThinking/DeepThinking.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import DeepThinking from './DeepThinking';
 
@@ -58,4 +59,112 @@ describe('DeepThinking', () => {
     const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
     expect(subheadingContainer).toBeFalsy();
   });
+
+  it('should pass through cardBodyProps', () => {
+    render(
+      <DeepThinking {...defaultProps} body="Thinking content" cardBodyProps={{ className: 'custom-card-body-class' }} />
+    );
+
+    const cardBody = screen.getByText('Thinking content').closest('.pf-v6-c-card__body');
+    expect(cardBody).toHaveClass('custom-card-body-class');
+  });
+
+  it('Renders expanded by default', () => {
+    render(<DeepThinking {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<DeepThinking isDefaultExpanded={false} {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalled();
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
+
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold thinking**';
+    const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold thinking')).toBeTruthy();
+  });
+
+  it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+    const toggleContent = '**Bold thinking**';
+    const { container } = render(<DeepThinking toggleContent={toggleContent} />);
+    expect(container.querySelector('strong')).toBeFalsy();
+    expect(screen.getByText('**Bold thinking**')).toBeTruthy();
+  });
+
+  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+    const subheading = '**Bold subheading**';
+    const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold subheading')).toBeTruthy();
+  });
+
+  it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+    const subheading = '**Bold subheading**';
+    render(<DeepThinking {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText('**Bold subheading**')).toBeTruthy();
+  });
+
+  it('should render body as markdown when isBodyMarkdown is true', () => {
+    const body = '**Bold body**';
+    const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold body')).toBeTruthy();
+  });
+
+  it('should not render body as markdown when isBodyMarkdown is false', () => {
+    const body = '**Bold body**';
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText('**Bold body**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const body = '**Bold body**';
+    const { container } = render(
+      <DeepThinking {...defaultProps} body={body} isBodyMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/DeepThinking/DeepThinking.tsx

@@ -10,10 +10,14 @@ import {
   ExpandableSectionProps
 } from '@patternfly/react-core';
 import { useState, type FunctionComponent } from 'react';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
 
 export interface DeepThinkingProps {
   /** Toggle content shown for expandable section  */
   toggleContent: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Additional props passed to expandable section */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
   /** Subheading rendered inside expandable section */
@@ -24,6 +28,16 @@ export interface DeepThinkingProps {
   cardProps?: CardProps;
   /** Additional props passed to main card body */
   cardBodyProps?: CardBodyProps;
+  /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+  isToggleContentMarkdown?: boolean;
+  /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+  isSubheadingMarkdown?: boolean;
+  /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+  isBodyMarkdown?: boolean;
+  /** Props passed to MarkdownContent component when markdown is enabled */
+  markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+  /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+  shouldRetainStyles?: boolean;
 }
 
 export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
@@ -32,19 +46,54 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
   expandableSectionProps,
   subheading,
   toggleContent,
-  cardBodyProps
+  isDefaultExpanded = true,
+  cardBodyProps,
+  isToggleContentMarkdown,
+  isSubheadingMarkdown,
+  isBodyMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: DeepThinkingProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
+  const renderToggleContent = () => {
+    if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+      return (
+        <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={toggleContent} {...markdownContentProps} />
+      );
+    }
+    return toggleContent;
+  };
+
+  const renderSubheading = () => {
+    if (!subheading) {
+      return null;
+    }
+    if (isSubheadingMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={subheading} {...markdownContentProps} />;
+    }
+    return subheading;
+  };
+
+  const renderBody = () => {
+    if (!body) {
+      return null;
+    }
+    if (isBodyMarkdown && typeof body === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={body} {...markdownContentProps} />;
+    }
+    return body;
+  };
+
   return (
     <Card isCompact className="pf-chatbot__deep-thinking" {...cardProps}>
       <CardBody {...cardBodyProps}>
         <ExpandableSection
-          toggleContent={toggleContent}
+          toggleContent={renderToggleContent()}
           onToggle={onToggle}
           isExpanded={isExpanded}
           isIndented
@@ -54,10 +103,10 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
           <div className="pf-chatbot__deep-thinking-section">
             {subheading && (
               <div className="pf-chatbot__deep-thinking-subheading">
-                <span>{subheading}</span>
+                <span>{renderSubheading()}</span>
               </div>
             )}
-            {body && <div className="pf-chatbot__deep-thinking-body">{body}</div>}
+            {body && <div className="pf-chatbot__deep-thinking-body">{renderBody()}</div>}
           </div>
         </ExpandableSection>
       </CardBody>