@patternfly/chatbot 6.8.0-prerelease.8 → 6.9.0-prerelease.1

package/src/MarkdownContent/MarkdownContent.tsx

@@ -1,34 +1,76 @@
 // ============================================================================
 // Markdown Content - Shared component for rendering markdown
 // ============================================================================
-import { type FunctionComponent, ReactNode } from 'react';
-import Markdown, { Options } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import {
+  createContext,
+  useContext,
+  useSyncExternalStore,
+  type ComponentType,
+  type FunctionComponent,
+  type ReactNode
+} from 'react';
+import type { Options } from 'react-markdown';
 import { ContentVariants } from '@patternfly/react-core';
-import CodeBlockMessage, { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import type { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import type { TableProps } from '@patternfly/react-table';
+import type { PluggableList } from 'unified';
+import type { ButtonProps } from '@patternfly/react-core';
 import TextMessage from '../Message/TextMessage/TextMessage';
-import ListItemMessage from '../Message/ListMessage/ListItemMessage';
-import UnorderedListMessage from '../Message/ListMessage/UnorderedListMessage';
-import OrderedListMessage from '../Message/ListMessage/OrderedListMessage';
-import TableMessage from '../Message/TableMessage/TableMessage';
-import TrMessage from '../Message/TableMessage/TrMessage';
-import TdMessage from '../Message/TableMessage/TdMessage';
-import TbodyMessage from '../Message/TableMessage/TbodyMessage';
-import TheadMessage from '../Message/TableMessage/TheadMessage';
-import ThMessage from '../Message/TableMessage/ThMessage';
-import { TableProps } from '@patternfly/react-table';
-import ImageMessage from '../Message/ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
-import 'highlight.js/styles/vs2015.css';
-import { PluggableList } from 'unified';
-import LinkMessage from '../Message/LinkMessage/LinkMessage';
-import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
-import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
-import { ButtonProps } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
+
+type MarkdownRendererModule = typeof import('./MarkdownRenderer');
+
+let markdownRendererPromise: Promise<MarkdownRendererModule> | null = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let ResolvedMarkdownRenderer: ComponentType<any> | null = null;
+const markdownRendererListeners = new Set<() => void>();
+
+const importMarkdownRenderer = () => {
+  if (!markdownRendererPromise) {
+    markdownRendererPromise = import('./MarkdownRenderer').then((module) => {
+      ResolvedMarkdownRenderer = module.default;
+      markdownRendererListeners.forEach((listener) => listener());
+      return module;
+    });
+  }
+
+  return markdownRendererPromise;
+};
+
+const subscribeToMarkdownRendererReady = (listener: () => void) => {
+  markdownRendererListeners.add(listener);
+  void importMarkdownRenderer();
+  return () => markdownRendererListeners.delete(listener);
+};
+
+/**
+ * Whether the lazy-loaded markdown renderer chunk has finished loading.
+ */
+export const useIsMarkdownRendererReady = (): boolean =>
+  useSyncExternalStore(
+    subscribeToMarkdownRendererReady,
+    () => ResolvedMarkdownRenderer !== null,
+    () => true
+  );
+
+/**
+ * When provided by `MessageBox`, defers markdown rendering until the shared chunk is ready
+ * so existing messages don't each flash an individual loading state.
+ */
+export const MarkdownRendererReadyContext = createContext<boolean | null>(null);
+
+/**
+ * Eagerly fetches the markdown renderer chunk so the first rendered message
+ * doesn't flash a loading state while the chunk downloads. Safe to call repeatedly
+ * (the dynamic import is cached).
+ */
+export const preloadMarkdownRenderer = (): void => {
+  void importMarkdownRenderer();
+};
+
+/**
+ * Resolves when the markdown renderer chunk has loaded.
+ */
+export const whenMarkdownRendererReady = (): Promise<MarkdownRendererModule> => importMarkdownRenderer();
 
 /**
  * MarkdownContent renders content either as plain text or with content with markdown support.
@@ -69,31 +111,13 @@ export interface MarkdownContentProps {
 export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
   content,
   isMarkdownDisabled,
-  codeBlockProps,
-  tableProps,
-  openLinkInNewTab = true,
-  additionalRehypePlugins = [],
-  additionalRemarkPlugins = [],
-  linkProps,
-  reactMarkdownProps,
-  remarkGfmProps,
-  hasNoImages = false,
   isPrimary,
   textComponent,
-  shouldRetainStyles
+  ...markdownProps
 }: MarkdownContentProps) => {
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-  if (openLinkInNewTab) {
-    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-  }
-  if (additionalRehypePlugins) {
-    rehypePlugins.push(...additionalRehypePlugins);
-  }
-
-  const disallowedElements = hasNoImages ? ['img'] : [];
-  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-    disallowedElements.push(...reactMarkdownProps.disallowedElements);
-  }
+  const contextReady = useContext(MarkdownRendererReadyContext);
+  const storeReady = useIsMarkdownRendererReady();
+  const isMarkdownRendererReady = contextReady ?? storeReady;
 
   if (isMarkdownDisabled) {
     if (textComponent) {
@@ -106,178 +130,11 @@ export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
     );
   }
 
-  return (
-    <Markdown
-      components={{
-        section: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <section
-              {...rest}
-              className={css('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest?.className)}
-            />
-          );
-        },
-        p: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <TextMessage
-              shouldRetainStyles={shouldRetainStyles}
-              component={ContentVariants.p}
-              {...rest}
-              isPrimary={isPrimary}
-            />
-          );
-        },
-        code: ({ children, ...props }) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...codeProps } = props;
-          return (
-            <CodeBlockMessage
-              {...codeProps}
-              {...codeBlockProps}
-              isPrimary={isPrimary}
-              shouldRetainStyles={shouldRetainStyles}
-            >
-              {children}
-            </CodeBlockMessage>
-          );
-        },
-        h1: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h1} {...rest} />;
-        },
-        h2: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h2} {...rest} />;
-        },
-        h3: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h3} {...rest} />;
-        },
-        h4: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h4} {...rest} />;
-        },
-        h5: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h5} {...rest} />;
-        },
-        h6: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h6} {...rest} />;
-        },
-        blockquote: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.blockquote} {...rest} />
-          );
-        },
-        ul: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <UnorderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
-        },
-        ol: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <OrderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
-        },
-        li: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ListItemMessage {...rest} />;
-        },
-        // table requires node attribute for calculating headers for mobile breakpoint
-        table: (props) => (
-          <TableMessage shouldRetainStyles={shouldRetainStyles} {...props} {...tableProps} isPrimary={isPrimary} />
-        ),
-        tbody: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TbodyMessage {...rest} />;
-        },
-        thead: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TheadMessage {...rest} />;
-        },
-        tr: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <TrMessage {...rest} />;
-        },
-        td: (props) => {
-          // Conflicts with Td type
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, width, ...rest } = props;
-          return <TdMessage {...rest} />;
-        },
-        th: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ThMessage {...rest} />;
-        },
-        img: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <ImageMessage {...rest} />;
-        },
-        a: (props) => {
-          // node is just the details of the document structure - not needed
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return (
-            // some a types conflict with ButtonProps, but it's ok because we are using an a tag
-            // there are too many to handle manually
-            <LinkMessage shouldRetainStyles={shouldRetainStyles} {...(rest as any)} {...linkProps}>
-              {props.children}
-            </LinkMessage>
-          );
-        },
-        // used for footnotes
-        sup: (props) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { node, ...rest } = props;
-          return <SuperscriptMessage {...rest} />;
-        }
-      }}
-      remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
-      rehypePlugins={rehypePlugins}
-      {...reactMarkdownProps}
-      remarkRehypeOptions={{
-        // removes sr-only class from footnote labels applied by default
-        footnoteLabelProperties: { className: [''] },
-        // omit default ↩ text; backref icon is rendered in LinkMessage
-        footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
-          if (rereferenceIndex > 1) {
-            return [
-              {
-                type: 'element',
-                tagName: 'sup',
-                properties: {},
-                children: [{ type: 'text', value: String(rereferenceIndex) }]
-              }
-            ];
-          }
-          return [];
-        },
-        ...reactMarkdownProps?.remarkRehypeOptions
-      }}
-      disallowedElements={disallowedElements}
-    >
-      {content}
-    </Markdown>
-  );
+  if (!isMarkdownRendererReady || !ResolvedMarkdownRenderer) {
+    return null;
+  }
+
+  return <ResolvedMarkdownRenderer {...markdownProps} content={content} isPrimary={isPrimary} />;
 };
 
 export default MarkdownContent;

package/src/MarkdownContent/MarkdownRenderer.tsx

@@ -0,0 +1,235 @@
+// ============================================================================
+// Markdown Renderer - Heavy markdown pipeline (dynamically imported)
+// ============================================================================
+import { type FunctionComponent } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ContentVariants } from '@patternfly/react-core';
+import CodeBlockMessage from '../Message/CodeBlockMessage/CodeBlockMessage';
+import TextMessage from '../Message/TextMessage/TextMessage';
+import ListItemMessage from '../Message/ListMessage/ListItemMessage';
+import UnorderedListMessage from '../Message/ListMessage/UnorderedListMessage';
+import OrderedListMessage from '../Message/ListMessage/OrderedListMessage';
+import TableMessage from '../Message/TableMessage/TableMessage';
+import TrMessage from '../Message/TableMessage/TrMessage';
+import TdMessage from '../Message/TableMessage/TdMessage';
+import TbodyMessage from '../Message/TableMessage/TbodyMessage';
+import TheadMessage from '../Message/TableMessage/TheadMessage';
+import ThMessage from '../Message/TableMessage/ThMessage';
+import ImageMessage from '../Message/ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+import 'highlight.js/styles/vs2015.css';
+import type { PluggableList } from 'unified';
+import LinkMessage from '../Message/LinkMessage/LinkMessage';
+import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
+import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
+import { css } from '@patternfly/react-styles';
+import type { MarkdownContentProps } from './MarkdownContent';
+
+export type MarkdownRendererProps = Omit<MarkdownContentProps, 'isMarkdownDisabled' | 'textComponent'>;
+
+const MarkdownRenderer: FunctionComponent<MarkdownRendererProps> = ({
+  content,
+  codeBlockProps,
+  tableProps,
+  openLinkInNewTab = true,
+  additionalRehypePlugins = [],
+  additionalRemarkPlugins = [],
+  linkProps,
+  reactMarkdownProps,
+  remarkGfmProps,
+  hasNoImages = false,
+  isPrimary,
+  shouldRetainStyles
+}) => {
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
+  if (openLinkInNewTab) {
+    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+  }
+  if (additionalRehypePlugins) {
+    rehypePlugins.push(...additionalRehypePlugins);
+  }
+
+  const disallowedElements = hasNoImages ? ['img'] : [];
+  if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+    disallowedElements.push(...reactMarkdownProps.disallowedElements);
+  }
+
+  return (
+    <Markdown
+      components={{
+        section: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <section
+              {...rest}
+              className={css('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest?.className)}
+            />
+          );
+        },
+        p: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <TextMessage
+              shouldRetainStyles={shouldRetainStyles}
+              component={ContentVariants.p}
+              {...rest}
+              isPrimary={isPrimary}
+            />
+          );
+        },
+        code: ({ children, ...props }) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...codeProps } = props;
+          return (
+            <CodeBlockMessage
+              {...codeProps}
+              {...codeBlockProps}
+              isPrimary={isPrimary}
+              shouldRetainStyles={shouldRetainStyles}
+            >
+              {children}
+            </CodeBlockMessage>
+          );
+        },
+        h1: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h1} {...rest} />;
+        },
+        h2: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h2} {...rest} />;
+        },
+        h3: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h3} {...rest} />;
+        },
+        h4: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h4} {...rest} />;
+        },
+        h5: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h5} {...rest} />;
+        },
+        h6: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.h6} {...rest} />;
+        },
+        blockquote: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            <TextMessage shouldRetainStyles={shouldRetainStyles} component={ContentVariants.blockquote} {...rest} />
+          );
+        },
+        ul: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <UnorderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
+        },
+        ol: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <OrderedListMessage shouldRetainStyles={shouldRetainStyles} {...rest} />;
+        },
+        li: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <ListItemMessage {...rest} />;
+        },
+        // table requires node attribute for calculating headers for mobile breakpoint
+        table: (props) => (
+          <TableMessage shouldRetainStyles={shouldRetainStyles} {...props} {...tableProps} isPrimary={isPrimary} />
+        ),
+        tbody: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TbodyMessage {...rest} />;
+        },
+        thead: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TheadMessage {...rest} />;
+        },
+        tr: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <TrMessage {...rest} />;
+        },
+        td: (props) => {
+          // Conflicts with Td type
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, width, ...rest } = props;
+          return <TdMessage {...rest} />;
+        },
+        th: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <ThMessage {...rest} />;
+        },
+        img: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <ImageMessage {...rest} />;
+        },
+        a: (props) => {
+          // node is just the details of the document structure - not needed
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return (
+            // some a types conflict with ButtonProps, but it's ok because we are using an a tag
+            // there are too many to handle manually
+            <LinkMessage shouldRetainStyles={shouldRetainStyles} {...(rest as any)} {...linkProps}>
+              {props.children}
+            </LinkMessage>
+          );
+        },
+        // used for footnotes
+        sup: (props) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { node, ...rest } = props;
+          return <SuperscriptMessage {...rest} />;
+        }
+      }}
+      remarkPlugins={[[remarkGfm, { ...remarkGfmProps }], ...additionalRemarkPlugins]}
+      rehypePlugins={rehypePlugins}
+      {...reactMarkdownProps}
+      remarkRehypeOptions={{
+        // removes sr-only class from footnote labels applied by default
+        footnoteLabelProperties: { className: [''] },
+        // omit default ↩ text; backref icon is rendered in LinkMessage
+        footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
+          if (rereferenceIndex > 1) {
+            return [
+              {
+                type: 'element',
+                tagName: 'sup',
+                properties: {},
+                children: [{ type: 'text', value: String(rereferenceIndex) }]
+              }
+            ];
+          }
+          return [];
+        },
+        ...reactMarkdownProps?.remarkRehypeOptions
+      }}
+      disallowedElements={disallowedElements}
+    >
+      {content}
+    </Markdown>
+  );
+};
+
+export default MarkdownRenderer;

package/src/Message/Message.test.tsx

@@ -8,6 +8,7 @@ import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampl
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
 import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
 import { DeepThinkingProps } from '../DeepThinking';
+import { warmupMarkdownRenderer } from '../test-utils/markdownTestUtils';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons', () => ({
@@ -222,6 +223,10 @@ const checkListItemsRendered = () => {
 };
 
 describe('Message', () => {
+  beforeAll(async () => {
+    await warmupMarkdownRenderer();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import { Options } from 'react-markdown';
+import type { Options } from 'react-markdown';
 import {
   AlertProps,
   Avatar,
@@ -25,10 +25,8 @@ import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
 import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
-import { TableProps } from '@patternfly/react-table';
-// see the full list of styles here: https://highlightjs.org/examples
-import 'highlight.js/styles/vs2015.css';
-import { PluggableList } from 'unified';
+import type { TableProps } from '@patternfly/react-table';
+import type { PluggableList } from 'unified';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import ToolResponse, { ToolResponseProps } from '../ToolResponse';

package/src/MessageBox/MessageBox.tsx

@@ -18,9 +18,17 @@ import {
   WheelEventHandler
 } from 'react';
 import JumpButton from './JumpButton';
+import {
+  MarkdownRendererReadyContext,
+  preloadMarkdownRenderer,
+  useIsMarkdownRendererReady
+} from '../MarkdownContent/MarkdownContent';
 import { ButtonProps, getResizeObserver, TooltipProps } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
+// Start fetching the markdown chunk as soon as MessageBox enters the bundle.
+preloadMarkdownRenderer();
+
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
   announcement?: string;
@@ -123,6 +131,8 @@ export const MessageBox = forwardRef(
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
   ) => {
+    const isMarkdownReady = useIsMarkdownRendererReady();
+
     const [atTop, setAtTop] = useState(true);
     const [atBottom, setAtBottom] = useState(false);
     const [isOverflowing, setIsOverflowing] = useState(false);
@@ -447,7 +457,9 @@ export const MessageBox = forwardRef(
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}
         >
-          {children}
+          <MarkdownRendererReadyContext.Provider value={isMarkdownReady}>
+            {children}
+          </MarkdownRendererReadyContext.Provider>
           <div className="pf-chatbot__messagebox-announcement pf-chatbot-m-hidden" aria-live="polite">
             {announcement}
           </div>