@patternfly/chatbot 6.8.0-prerelease.7 → 6.8.0-prerelease.9

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -1,8 +1,8 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import type { KeyboardEvent, FunctionComponent } from 'react';
-import { useRef, Fragment } from 'react';
+import type { KeyboardEvent, FunctionComponent, ReactNode, Ref, RefObject } from 'react';
+import { useEffect, useRef, Fragment, isValidElement } from 'react';
 
 // Import PatternFly components
 import {
@@ -42,7 +42,11 @@ import {
   MenuContent,
   MenuItemProps,
   MenuGroupProps,
-  MenuContentProps
+  MenuContentProps,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps
 } from '@patternfly/react-core';
 
 import { RhUiClockIcon, RhUiCommentIcon, RhUiEditFillIcon } from '@patternfly/react-icons';
@@ -51,6 +55,189 @@ import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState, { HistoryEmptyStateProps } from './EmptyState';
 
+const isConversation = (item: unknown): item is Conversation =>
+  Boolean(item && typeof item === 'object' && 'id' in item && 'text' in item && !('items' in item));
+
+const isConversationGroup = (item: unknown): item is ConversationGroup =>
+  Boolean(item && typeof item === 'object' && 'id' in item && 'label' in item && 'items' in item);
+
+const isConversationGroupArray = (items: unknown[]): items is ConversationGroup[] =>
+  items.length > 0 && isConversationGroup(items[0]);
+
+const getExpandableGroupContentId = (groupId: string) => `chatbot-nav-group-${groupId}-content`;
+
+const getGroupLabelId = (groupId: string) => `chatbot-nav-group-${groupId}-label`;
+
+const getExpandableGroupToggleId = (groupId: string) => `chatbot-nav-group-${groupId}-toggle`;
+
+const getShowAllToggleId = (groupId: string) => `chatbot-nav-group-${groupId}-show-all-toggle`;
+
+const getStaticMenuLabelId = (group: { id: string; menuGroupProps?: MenuGroupProps }) =>
+  group.menuGroupProps?.titleId ?? getGroupLabelId(group.id);
+
+const getMenuListLabelledBy = (group: {
+  id: string;
+  expandable?: { isExpanded: boolean; onToggle: (isExpanded: boolean) => void };
+  menuGroupProps?: MenuGroupProps;
+}) => {
+  if (group.expandable) {
+    return group.menuGroupProps?.['aria-labelledby'] ?? getExpandableGroupToggleId(group.id);
+  }
+
+  return group.menuGroupProps?.['aria-labelledby'] ?? getStaticMenuLabelId(group);
+};
+
+const getMenuListProps = (group: {
+  id: string;
+  label: ReactNode;
+  expandable?: { isExpanded: boolean; onToggle: (isExpanded: boolean) => void };
+  menuGroupProps?: MenuGroupProps;
+  menuListProps?: Omit<MenuListProps, 'children'>;
+}): Omit<MenuListProps, 'children'> => ({
+  ...group.menuListProps,
+  'aria-labelledby': group.menuListProps?.['aria-labelledby'] ?? getMenuListLabelledBy(group)
+});
+
+const focusElementById = (id: string) => {
+  document.getElementById(id)?.focus();
+};
+
+// Matches PatternFly's Menu "view more" example: expanding moves focus to the first
+// newly revealed item; collapsing keeps focus on the toggle as it updates to "Show all".
+const useShowAllFocusManagement = (
+  isExpanded: boolean,
+  toggleId: string,
+  firstOverflowItemRef: Ref<HTMLButtonElement | HTMLAnchorElement | null>,
+  hasOverflowItems: boolean
+) => {
+  const wasExpandedRef = useRef(isExpanded);
+
+  useEffect(() => {
+    if (hasOverflowItems && isExpanded !== wasExpandedRef.current) {
+      if (isExpanded) {
+        (firstOverflowItemRef as RefObject<HTMLElement | null>).current?.focus();
+      } else {
+        focusElementById(toggleId);
+      }
+    }
+
+    wasExpandedRef.current = isExpanded;
+  }, [isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems]);
+};
+
+interface ShowAllGroupBodyProps {
+  group: ConversationGroup;
+  getNavItem: (
+    conversation: Conversation,
+    itemOverrides?: Partial<MenuItemProps>,
+    itemRef?: Ref<HTMLButtonElement | HTMLAnchorElement>
+  ) => ReactNode;
+}
+
+// The toggle is rendered as a real MenuItem (rather than a standalone button) so it
+// participates in the Menu's built-in roving tabindex and arrow-key navigation just
+// like any other conversation item, instead of being skipped over or interrupting
+// arrow-key handling. Since it keeps a stable key and DOM position regardless of how
+// many overflow items are shown, it also keeps focus across clicks without being
+// unmounted or recreated.
+const ShowAllGroupBody: FunctionComponent<ShowAllGroupBodyProps> = ({ group, getNavItem }) => {
+  const { visibleCount, isExpanded, onToggle, label } = group.showAll!;
+  const conversationItems = group.items.filter(isConversation);
+  const alwaysVisibleItems = conversationItems.slice(0, visibleCount);
+  const overflowItems = conversationItems.slice(visibleCount);
+  const hasOverflowItems = overflowItems.length > 0;
+  const toggleId = getShowAllToggleId(group.id);
+  const firstOverflowItemRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
+  const toggleLabel = label ?? (isExpanded ? 'Show less' : 'Show all');
+
+  useShowAllFocusManagement(isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems);
+
+  return (
+    <>
+      <MenuList {...getMenuListProps(group)}>
+        {alwaysVisibleItems.map((chat) => (
+          <Fragment key={chat.id}>{getNavItem(chat)}</Fragment>
+        ))}
+        {isExpanded &&
+          overflowItems.map((chat, index) => (
+            <Fragment key={chat.id}>
+              {getNavItem(chat, undefined, index === 0 ? firstOverflowItemRef : undefined)}
+            </Fragment>
+          ))}
+        {hasOverflowItems && (
+          <MenuItem
+            key="show-all-toggle"
+            id={toggleId}
+            itemId={toggleId}
+            className="pf-chatbot__menu-show-all-toggle"
+            onClick={() => onToggle(!isExpanded)}
+          >
+            {toggleLabel}
+          </MenuItem>
+        )}
+      </MenuList>
+      {group.footer}
+    </>
+  );
+};
+
+interface ExpandableConversationGroupProps {
+  group: ConversationGroup;
+  children: ReactNode;
+}
+
+const ExpandableConversationGroup: FunctionComponent<ExpandableConversationGroupProps> = ({ group, children }) => {
+  const toggleId = getExpandableGroupToggleId(group.id);
+  const contentId = getExpandableGroupContentId(group.id);
+  const { isExpanded, onToggle, expandableSectionProps, expandableSectionToggleProps } = group.expandable!;
+
+  return (
+    <div
+      className={`pf-chatbot__menu-item-header pf-chatbot__menu-item-header--expandable ${group.menuGroupProps?.className ?? ''}`}
+    >
+      <ExpandableSectionToggle
+        toggleId={toggleId}
+        contentId={contentId}
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        toggleWrapper="h3"
+        className="pf-chatbot__menu-group-toggle"
+        {...expandableSectionToggleProps}
+      >
+        {group.label}
+      </ExpandableSectionToggle>
+      <ExpandableSection
+        isDetached
+        isExpanded={isExpanded}
+        toggleId={toggleId}
+        contentId={contentId}
+        {...expandableSectionProps}
+      >
+        {isExpanded && children}
+      </ExpandableSection>
+    </div>
+  );
+};
+
+type ConversationMenuSegment =
+  | { type: 'static'; groups: ConversationGroup[] }
+  | { type: 'expandable'; group: ConversationGroup };
+
+const buildConversationMenuSegments = (groups: ConversationGroup[]): ConversationMenuSegment[] =>
+  groups.reduce<ConversationMenuSegment[]>((segments, group) => {
+    if (group.expandable) {
+      return [...segments, { type: 'expandable', group }];
+    }
+
+    const last = segments[segments.length - 1];
+    if (last?.type === 'static') {
+      last.groups.push(group);
+      return segments;
+    }
+
+    return [...segments, { type: 'static', groups: [group] }];
+  }, []);
+
 export interface Conversation {
   /** Conversation id */
   id: string;
@@ -73,6 +260,55 @@ export interface Conversation {
   /** Custom dropdown ID to ensure uniqueness across demo instances */
   dropdownId?: string;
 }
+
+export interface ConversationGroupShowAll {
+  /** Number of items visible when collapsed */
+  visibleCount: number;
+  /** Whether all items are shown */
+  isExpanded: boolean;
+  /** Callback when show all / show less is toggled */
+  onToggle: (isExpanded: boolean) => void;
+  /** Custom content rendered in the show all / show less toggle. Defaults to "Show all" when collapsed and "Show less" when expanded. */
+  label?: ReactNode;
+}
+
+export interface ConversationGroupExpandable {
+  /** Whether the group content is expanded */
+  isExpanded: boolean;
+  /** Callback when the group is toggled */
+  onToggle: (isExpanded: boolean) => void;
+  /** Additional props applied to ExpandableSection */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Additional props applied to ExpandableSectionToggle */
+  expandableSectionToggleProps?: ExpandableSectionToggleProps;
+}
+
+export interface ConversationGroup {
+  /** Unique group id */
+  id: string;
+  /** Group label rendered as a MenuGroup heading or expandable toggle label */
+  label: ReactNode;
+  /** Conversation items or custom menu content such as a "Show all" action */
+  items: (Conversation | ReactNode)[];
+  /** Content rendered after the group's menu list */
+  footer?: ReactNode;
+  /** Custom group header that replaces the default label or expandable toggle */
+  header?: ReactNode;
+  /** When set, the group renders as an expandable section */
+  expandable?: ConversationGroupExpandable;
+  /** When set, truncates the list with an expandable show all / show less section */
+  showAll?: ConversationGroupShowAll;
+  /** Additional props applied to the conversation menu group */
+  menuGroupProps?: MenuGroupProps;
+  /** Additional props applied to the conversation list */
+  menuListProps?: Omit<MenuListProps, 'children'>;
+}
+
+export type Conversations =
+  | (Conversation | ReactNode)[]
+  | ConversationGroup[]
+  | { [key: string]: (Conversation | ReactNode)[] };
+
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
   onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
@@ -85,7 +321,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Callback function for when an item is selected */
   onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
   /** Items shown in chat history */
-  conversations: Conversation[] | { [key: string]: Conversation[] };
+  conversations: Conversations;
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;
   /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
@@ -211,13 +447,15 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     drawerRef.current && drawerRef.current.focus();
   };
 
-  const isConversation = (item: any): item is Conversation =>
-    item && typeof item === 'object' && 'id' in item && 'text' in item;
-
-  const getNavItem = (conversation: Conversation) => (
+  const getNavItem = (
+    conversation: Conversation,
+    itemOverrides?: Partial<MenuItemProps>,
+    itemRef?: Ref<HTMLButtonElement | HTMLAnchorElement>
+  ) => (
     <MenuItem
       className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
+      ref={itemRef}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <RhUiCommentIcon /> })}
       /* eslint-disable indent */
       {...(conversation.menuItems
@@ -233,45 +471,118 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
           }
         : {})}
       {...conversation.additionalProps}
+      {...itemOverrides}
     >
       {conversation.text}
     </MenuItem>
   );
 
-  const buildConversations = () => {
-    if (Array.isArray(conversations)) {
+  const renderConversationItems = (items: (Conversation | ReactNode)[], keyPrefix = '') =>
+    items.map((item, index) => {
+      if (isConversation(item)) {
+        return <Fragment key={item.id}>{getNavItem(item)}</Fragment>;
+      }
+
+      const key = isValidElement(item) && item.key != null ? String(item.key) : `${keyPrefix}-${index}`;
+
+      return <Fragment key={key}>{item}</Fragment>;
+    });
+
+  const renderGroupBody = (group: ConversationGroup) => {
+    if (group.showAll) {
+      return <ShowAllGroupBody group={group} getNavItem={getNavItem} />;
+    }
+
+    return (
+      <>
+        <MenuList {...getMenuListProps(group)}>{renderConversationItems(group.items, group.id)}</MenuList>
+        {group.footer}
+      </>
+    );
+  };
+
+  const renderConversationGroup = (group: ConversationGroup) => {
+    if (group.header) {
       return (
-        <MenuList {...menuListProps}>
-          {conversations.map((conversation) => {
-            if (isConversation(conversation)) {
-              return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
-            } else {
-              return conversation;
-            }
-          })}
-        </MenuList>
+        <div className={`pf-chatbot__menu-item-header ${group.menuGroupProps?.className ?? ''}`} key={group.id}>
+          {group.header}
+          {renderGroupBody(group)}
+        </div>
       );
-    } else {
-      return (
-        <>
-          {Object.keys(conversations).map((navGroup) => (
-            <MenuGroup
-              className="pf-chatbot__menu-item-header"
-              label={navGroup}
-              key={navGroup}
-              labelHeadingLevel="h3"
-              {...menuGroupProps?.[navGroup]}
-            >
-              <MenuList {...menuListProps?.[navGroup]}>
-                {conversations[navGroup].map((conversation: Conversation) => (
-                  <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
-                ))}
-              </MenuList>
-            </MenuGroup>
-          ))}
-        </>
+    }
+
+    const labelId = getStaticMenuLabelId(group);
+
+    return (
+      <MenuGroup
+        className="pf-chatbot__menu-item-header"
+        label={group.label}
+        key={group.id}
+        labelHeadingLevel="h3"
+        {...group.menuGroupProps}
+        titleId={labelId}
+        aria-labelledby={group.menuGroupProps?.['aria-labelledby'] ?? labelId}
+      >
+        {renderGroupBody(group)}
+      </MenuGroup>
+    );
+  };
+
+  const renderConversationMenu = (content: ReactNode, key?: string) => (
+    <Menu
+      key={key}
+      className="pf-chatbot__history-menu"
+      isPlain
+      onSelect={onSelectActiveItem}
+      activeItemId={activeItemId}
+      {...menuProps}
+    >
+      <MenuContent {...menuContentProps}>{content}</MenuContent>
+    </Menu>
+  );
+
+  const renderConversationMenuSegment = (segment: ConversationMenuSegment) => {
+    if (segment.type === 'static') {
+      return renderConversationMenu(
+        <>{segment.groups.map(renderConversationGroup)}</>,
+        segment.groups.map((group) => group.id).join('-')
       );
     }
+
+    return (
+      <ExpandableConversationGroup group={segment.group} key={segment.group.id}>
+        {renderConversationMenu(renderGroupBody(segment.group))}
+      </ExpandableConversationGroup>
+    );
+  };
+
+  const normalizeObjectGroups = (groupedConversations: { [key: string]: (Conversation | ReactNode)[] }) =>
+    Object.keys(groupedConversations).map((groupKey) => ({
+      id: groupKey,
+      label: groupKey,
+      items: groupedConversations[groupKey],
+      menuGroupProps:
+        menuGroupProps && typeof menuGroupProps === 'object' && groupKey in menuGroupProps
+          ? (menuGroupProps as { [key: string]: MenuGroupProps })[groupKey]
+          : undefined,
+      menuListProps:
+        menuListProps && typeof menuListProps === 'object' && groupKey in menuListProps
+          ? (menuListProps as { [key: string]: Omit<MenuListProps, 'children'> })[groupKey]
+          : undefined
+    }));
+
+  const buildConversations = () => {
+    if (Array.isArray(conversations)) {
+      if (isConversationGroupArray(conversations)) {
+        return <>{buildConversationMenuSegments(conversations).map(renderConversationMenuSegment)}</>;
+      }
+
+      return renderConversationMenu(<MenuList {...menuListProps}>{renderConversationItems(conversations)}</MenuList>);
+    }
+
+    return (
+      <>{buildConversationMenuSegments(normalizeObjectGroups(conversations)).map(renderConversationMenuSegment)}</>
+    );
   };
 
   // Menu Content
@@ -289,17 +600,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     if (noResultsState) {
       return <HistoryEmptyState {...noResultsState} />;
     }
-    return (
-      <Menu
-        className="pf-chatbot__history-menu"
-        isPlain
-        onSelect={onSelectActiveItem}
-        activeItemId={activeItemId}
-        {...menuProps}
-      >
-        <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
-      </Menu>
-    );
+    return buildConversations();
   };
 
   const renderDrawerContent = () => (

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -17,8 +17,8 @@
   }
 }
 
-.pf-chatbot:not(.pf-chatnot--default) {
-  .pf-chatbot__footer {
+.pf-chatbot:not(.pf-chatbot--default) {
+  .pf-chatbot__footer:not(.pf-m-primary) {
     background-color: var(--pf-t--global--background--color--secondary--default);
 
     @at-root :where(.pf-v6-theme-glass) & {

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -64,6 +64,10 @@
       background-color: var(--pf-t--global--background--color--glass--primary--default);
     }
   }
+
+  &:has(.pf-chatbot__content.pf-m-primary) .pf-chatbot__header {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 
 // ============================================================================

package/src/ChatbotModal/ChatbotModal.scss

@@ -4,6 +4,7 @@
 
 .pf-chatbot__chatbot-modal {
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important;
+  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   position: fixed !important;
   inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
   inset-inline-end: var(--pf-t--global--spacer--lg);
@@ -26,6 +27,15 @@
   }
 }
 
+:root:where(.pf-v6-theme-glass) {
+  .pf-chatbot__chatbot-modal {
+    --pf-v6-c-modal-box--BackgroundColor: var(
+      --pf-t--global--background--color--glass--primary--default,
+      var(--pf-t--global--background--color--secondary--default)
+    );
+  }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -21,6 +21,12 @@
     display: contents;
   }
 
+  &.pf-chatbot__button--active {
+    svg {
+      --pf-v6-c-icon__content--svg--VerticalAlign: -1.125em;
+    }
+  }
+
   // Icon
   svg {
     width: var(--pf-t--global--spacer--lg);

package/src/CodeModal/CodeModal.tsx

@@ -27,6 +27,12 @@ import ChatbotModal from '../ChatbotModal/ChatbotModal';
 let monacoInstance: typeof import('monaco-editor') | null = null;
 const loadMonaco = async () => {
   if (!monacoInstance) {
+    if (!globalThis.MonacoEnvironment?.getWorker && !globalThis.MonacoEnvironment?.getWorkerUrl) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Monaco web workers are not configured. Import @patternfly/chatbot/monaco-environment before using CodeModal.'
+      );
+    }
     const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
     monacoInstance = monaco;
     loader.config({ monaco });

package/src/DeepThinking/DeepThinking.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import DeepThinking from './DeepThinking';
+import { expectBoldMarkdownText } from '../test-utils/markdownTestUtils';
 
 describe('DeepThinking', () => {
   const defaultProps = {
@@ -120,11 +121,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('Thinking content')).not.toBeVisible();
   });
 
-  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', async () => {
     const toggleContent = '**Bold thinking**';
-    const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold thinking')).toBeTruthy();
+    render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
+    await expectBoldMarkdownText('Bold thinking');
   });
 
   it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
@@ -134,11 +134,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold thinking**')).toBeTruthy();
   });
 
-  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+  it('should render subheading as markdown when isSubheadingMarkdown is true', async () => {
     const subheading = '**Bold subheading**';
-    const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold subheading')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    await expectBoldMarkdownText('Bold subheading');
   });
 
   it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
@@ -147,11 +146,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold subheading**')).toBeTruthy();
   });
 
-  it('should render body as markdown when isBodyMarkdown is true', () => {
+  it('should render body as markdown when isBodyMarkdown is true', async () => {
     const body = '**Bold body**';
-    const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold body')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
+    await expectBoldMarkdownText('Bold body');
   });
 
   it('should not render body as markdown when isBodyMarkdown is false', () => {

package/src/MarkdownContent/MarkdownContent.test.tsx

@@ -1,7 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import MarkdownContent from './MarkdownContent';
+import MarkdownContent, {
+  MarkdownRendererReadyContext,
+  preloadMarkdownRenderer,
+  whenMarkdownRendererReady
+} from './MarkdownContent';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { expectBoldMarkdownText, warmupMarkdownRenderer } from '../test-utils/markdownTestUtils';
 
 const BOLD_TEXT = '**Bold text**';
 const ITALIC_TEXT = '*Italic text*';
@@ -33,14 +38,17 @@ const BLOCKQUOTE = '> This is a blockquote';
 const IMAGE = '![Alt text](https://example.com/image.png)';
 
 describe('MarkdownContent', () => {
+  beforeAll(async () => {
+    await warmupMarkdownRenderer();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should render bold text correctly', () => {
-    const { container } = render(<MarkdownContent content={BOLD_TEXT} />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold text')).toBeTruthy();
+  it('should render bold text correctly', async () => {
+    render(<MarkdownContent content={BOLD_TEXT} />);
+    await expectBoldMarkdownText('Bold text');
   });
 
   it('should render italic text correctly', () => {
@@ -205,3 +213,42 @@ const x = 5;
     expect(screen.getByRole('link', { name: /Link/i })).toBeTruthy();
   });
 });
+
+describe('preloadMarkdownRenderer', () => {
+  it('starts loading the markdown renderer', async () => {
+    preloadMarkdownRenderer();
+    const module = await whenMarkdownRendererReady();
+    expect(module.default).toBeDefined();
+  });
+});
+
+describe('whenMarkdownRendererReady', () => {
+  it('should resolve to the MarkdownRenderer module', async () => {
+    const module = await whenMarkdownRendererReady();
+    expect(module.default).toBeDefined();
+  });
+});
+
+describe('MarkdownContent with MarkdownRendererReadyContext', () => {
+  it('renders nothing while markdown is not ready inside MessageBox', () => {
+    const { container } = render(
+      <MarkdownRendererReadyContext.Provider value={false}>
+        <MarkdownContent content={BOLD_TEXT} />
+      </MarkdownRendererReadyContext.Provider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('MarkdownContent lazy loading', () => {
+  it('renders nothing while markdown renderer is not ready', () => {
+    const { container } = render(
+      <MarkdownRendererReadyContext.Provider value={false}>
+        <MarkdownContent content={BOLD_TEXT} />
+      </MarkdownRendererReadyContext.Provider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});