@patternfly/chatbot 6.5.0-prerelease.8 → 6.5.0

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -8,6 +8,7 @@ import { useRef, Fragment } from 'react';
 import {
   Button,
   ButtonProps,
+  Divider,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -17,6 +18,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerContentBody,
+  InputGroup,
+  InputGroupItem,
   SearchInput,
   Title,
   DrawerPanelContentProps,
@@ -28,10 +31,10 @@ import {
   DrawerPanelBodyProps,
   SkeletonProps,
   Icon,
-  MenuProps,
   TitleProps,
-  MenuListProps,
   SearchInputProps,
+  MenuProps,
+  MenuListProps,
   MenuList,
   MenuGroup,
   MenuItem,
@@ -125,6 +128,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   drawerCloseButtonProps?: DrawerCloseButtonProps;
   /** Additional props appleid to drawer panel body */
   drawerPanelBodyProps?: DrawerPanelBodyProps;
+  /** Flag indicating whether a divider should render between the drawer head and title. */
+  hasDrawerHeadDivider?: boolean;
   /** Whether to show drawer loading state */
   isLoading?: boolean;
   /** Additional props for loading state */
@@ -145,6 +150,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   navTitleProps?: Partial<TitleProps>;
   /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
   searchInputScreenReaderText?: string;
+  /** Custom action rendered before the search input. */
+  searchActionStart?: React.ReactNode;
+  /** Custom action rendered after the search input. */
+  searchActionEnd?: React.ReactNode;
+  /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+  searchToolbar?: React.ReactNode;
   /** Additional props passed to MenuContent */
   menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
@@ -175,6 +186,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   drawerActionsProps,
   drawerCloseButtonProps,
   drawerPanelBodyProps,
+  hasDrawerHeadDivider,
   isLoading,
   loadingState,
   errorState,
@@ -185,6 +197,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
   searchInputScreenReaderText,
+  searchActionStart,
+  searchActionEnd,
+  searchToolbar,
   menuProps,
   menuGroupProps,
   menuContentProps,
@@ -287,6 +302,38 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     </>
   );
 
+  const searchInputContainer = handleTextInputChange && (
+    <div className="pf-chatbot__input">
+      <SearchInput
+        aria-label={searchInputAriaLabel}
+        onChange={(_event, value) => handleTextInputChange(value)}
+        placeholder={searchInputPlaceholder}
+        {...searchInputProps}
+      />
+      {searchInputScreenReaderText && (
+        <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
+      )}
+    </div>
+  );
+
+  const renderSearchAndActions = () => {
+    if (searchToolbar) {
+      return searchToolbar;
+    }
+
+    return searchActionStart || searchActionEnd ? (
+      <div className="pf-chatbot__history-search-actions">
+        <InputGroup>
+          {searchActionStart && <InputGroupItem>{searchActionStart}</InputGroupItem>}
+          {searchInputContainer && <InputGroupItem isFill>{searchInputContainer}</InputGroupItem>}
+          {searchActionEnd && <InputGroupItem>{searchActionEnd}</InputGroupItem>}
+        </InputGroup>
+      </div>
+    ) : (
+      searchInputContainer
+    );
+  };
+
   const renderPanelContent = () => {
     const drawer = (
       <>
@@ -309,6 +356,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             )}
           </DrawerActions>
         </DrawerHead>
+        {hasDrawerHeadDivider && <Divider className="pf-chatbot__heading-divider" />}
         <div className="pf-chatbot__heading-container">
           <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
@@ -318,19 +366,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
               {title}
             </Title>
           </div>
-          {!isLoading && handleTextInputChange && (
-            <div className="pf-chatbot__input">
-              <SearchInput
-                aria-label={searchInputAriaLabel}
-                onChange={(_event, value) => handleTextInputChange(value)}
-                placeholder={searchInputPlaceholder}
-                {...searchInputProps}
-              />
-              {searchInputScreenReaderText && (
-                <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
-              )}
-            </div>
-          )}
+          {!isLoading && renderSearchAndActions()}
         </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -91,6 +91,10 @@
   align-items: center;
   justify-content: center;
 
+  &::before {
+    border-radius: inherit;
+  }
+
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon,
   .pf-v6-c-icon__content {

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,5 +1,5 @@
 import type { Ref, FunctionComponent } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -30,21 +30,43 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   tooltipContent = 'Chat history menu',
   isCompact,
   ...props
-}: ChatbotHeaderMenuProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip
-      content={tooltipContent}
-      position="bottom"
-      // prevents VO announcements of both aria label and tooltip
-      aria="none"
-      {...tooltipProps}
-    >
+}: ChatbotHeaderMenuProps) => {
+  const [isDrawerAnimating, setIsDrawerAnimating] = useState(false);
+  // I'd like to use a prop here later if this works
+  const drawerState = props['aria-expanded'];
+  const isDrawerOpen = drawerState === true;
+  const prevDrawerStateRef = useRef<boolean | undefined>(isDrawerOpen);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (drawerState !== undefined) {
+      const wasDrawerOpen = prevDrawerStateRef.current === true;
+      const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+
+      setIsDrawerAnimating(true);
+      const timeout = setTimeout(() => {
+        setIsDrawerAnimating(false);
+
+        if (isDrawerClosing) {
+          requestAnimationFrame(() => {
+            buttonRef.current?.focus();
+          });
+        }
+      }, 350);
+
+      prevDrawerStateRef.current = isDrawerOpen;
+      return () => clearTimeout(timeout);
+    }
+  }, [drawerState, isDrawerOpen]);
+
+  const button = useMemo(
+    () => (
       <Button
         className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onMenuToggle}
         aria-label={menuAriaLabel}
-        ref={innerRef}
+        ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <BarsIcon />
@@ -53,9 +75,29 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         size={isCompact ? 'sm' : undefined}
         {...props}
       />
-    </Tooltip>
-  </div>
-);
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]
+  );
+
+  return (
+    <div className={`pf-chatbot__menu ${className}`}>
+      {isDrawerAnimating ? (
+        button
+      ) : (
+        <Tooltip
+          content={tooltipContent}
+          position="bottom"
+          // prevents VO announcements of both aria label and tooltip
+          aria="none"
+          {...tooltipProps}
+        >
+          {button}
+        </Tooltip>
+      )}
+    </div>
+  );
+};
 
 export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
   <ChatbotHeaderMenuBase innerRef={ref} {...props} />

package/src/ChatbotModal/ChatbotModal.scss

@@ -18,7 +18,10 @@
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);
     padding-block-end: var(--pf-t--global--spacer--xl);
+    border-top: var(--pf-t--global--border--width--high-contrast--regular) solid
+      var(--pf-t--global--border--color--high-contrast);
   }
+
   .pf-v6-c-modal-box__header {
     padding-block-end: var(--pf-t--global--spacer--sm);
   }

package/src/CodeModal/CodeModal.tsx

@@ -5,17 +5,17 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import * as monaco from 'monaco-editor';
-import { loader } from '@monaco-editor/react';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
 import {
+  Bullseye,
   Button,
   getResizeObserver,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Spinner,
   Stack,
   StackItem
 } from '@patternfly/react-core';
@@ -23,8 +23,16 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
-// Configure Monaco loader to use the npm package instead of CDN
-loader.config({ monaco });
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
 
 export interface CodeModalProps {
   /** Class applied to code editor */
@@ -63,6 +71,8 @@ export interface CodeModalProps {
   modalBodyClassName?: string;
   /** Class applied to modal footer */
   modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -84,13 +94,32 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   modalHeaderClassName,
   modalBodyClassName,
   modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
-  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
   useEffect(() => {
     if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
       return;
@@ -148,6 +177,42 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
     }
   };
 
+  const renderMonacoEditor = () => {
+    if (isMonacoLoading) {
+      return (
+        <Bullseye>
+          <Spinner aria-label={spinnerAriaLabel} />
+        </Bullseye>
+      );
+    }
+    if (isMonacoLoaded) {
+      return (
+        <CodeEditor
+          isDarkTheme
+          isLineNumbersVisible={isLineNumbersVisible}
+          isLanguageLabelVisible
+          isCopyEnabled={isCopyEnabled}
+          isReadOnly={isReadOnly}
+          code={newCode}
+          language={extensionToLanguage[path.extname(fileName).slice(1)]}
+          onEditorDidMount={onEditorDidMount}
+          onCodeChange={onCodeChange}
+          className={codeEditorClassName}
+          isFullHeight
+          options={{
+            glyphMargin: false,
+            folding: false,
+            // prevents Monaco from handling resizing itself
+            // was causing ResizeObserver issues
+            automaticLayout: false
+          }}
+          {...props}
+        />
+      );
+    }
+    return null;
+  };
+
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -166,27 +231,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
             <FileDetails fileName={fileName} />
           </StackItem>
           <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
-            <CodeEditor
-              isDarkTheme
-              isLineNumbersVisible={isLineNumbersVisible}
-              isLanguageLabelVisible
-              isCopyEnabled={isCopyEnabled}
-              isReadOnly={isReadOnly}
-              code={newCode}
-              language={extensionToLanguage[path.extname(fileName).slice(1)]}
-              onEditorDidMount={onEditorDidMount}
-              onCodeChange={onCodeChange}
-              className={codeEditorClassName}
-              isFullHeight
-              options={{
-                glyphMargin: false,
-                folding: false,
-                // prevents Monaco from handling resizing itself
-                // was causing ResizeObserver issues
-                automaticLayout: false
-              }}
-              {...props}
-            />
+            {renderMonacoEditor()}
           </div>
         </Stack>
       </ModalBody>

package/src/DeepThinking/DeepThinking.scss

@@ -1,5 +1,5 @@
 .pf-chatbot__deep-thinking {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   overflow: unset;
 }
 

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>