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

package/dist/cjs/CodeModal/CodeModal.js

@@ -59,7 +59,12 @@ const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
 // 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 = null;
 const loadMonaco = () => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
     if (!monacoInstance) {
+        if (!((_a = globalThis.MonacoEnvironment) === null || _a === void 0 ? void 0 : _a.getWorker) && !((_b = globalThis.MonacoEnvironment) === null || _b === void 0 ? void 0 : _b.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 }] = yield Promise.all([Promise.resolve().then(() => __importStar(require('monaco-editor'))), Promise.resolve().then(() => __importStar(require('@monaco-editor/react')))]);
         monacoInstance = monaco;
         loader.config({ monaco });

package/dist/cjs/MarkdownContent/MarkdownContent.d.ts

@@ -1,10 +1,29 @@
-import { type FunctionComponent, ReactNode } from 'react';
-import { Options } from 'react-markdown';
-import { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
-import { TableProps } from '@patternfly/react-table';
-import 'highlight.js/styles/vs2015.css';
-import { PluggableList } from 'unified';
-import { ButtonProps } from '@patternfly/react-core';
+import { type FunctionComponent, type ReactNode } from 'react';
+import type { Options } from 'react-markdown';
+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';
+type MarkdownRendererModule = typeof import('./MarkdownRenderer');
+/**
+ * Whether the lazy-loaded markdown renderer chunk has finished loading.
+ */
+export declare const useIsMarkdownRendererReady: () => boolean;
+/**
+ * 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 declare const MarkdownRendererReadyContext: import("react").Context<boolean | 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 declare const preloadMarkdownRenderer: () => void;
+/**
+ * Resolves when the markdown renderer chunk has loaded.
+ */
+export declare const whenMarkdownRendererReady: () => Promise<MarkdownRendererModule>;
 /**
  * MarkdownContent renders content either as plain text or with content with markdown support.
  *

package/dist/cjs/MarkdownContent/MarkdownContent.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,182 +37,72 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownContent = void 0;
+exports.MarkdownContent = exports.whenMarkdownRendererReady = exports.preloadMarkdownRenderer = exports.MarkdownRendererReadyContext = exports.useIsMarkdownRendererReady = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_markdown_1 = __importDefault(require("react-markdown"));
-const remark_gfm_1 = __importDefault(require("remark-gfm"));
+// ============================================================================
+// Markdown Content - Shared component for rendering markdown
+// ============================================================================
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const CodeBlockMessage_1 = __importDefault(require("../Message/CodeBlockMessage/CodeBlockMessage"));
 const TextMessage_1 = __importDefault(require("../Message/TextMessage/TextMessage"));
-const ListItemMessage_1 = __importDefault(require("../Message/ListMessage/ListItemMessage"));
-const UnorderedListMessage_1 = __importDefault(require("../Message/ListMessage/UnorderedListMessage"));
-const OrderedListMessage_1 = __importDefault(require("../Message/ListMessage/OrderedListMessage"));
-const TableMessage_1 = __importDefault(require("../Message/TableMessage/TableMessage"));
-const TrMessage_1 = __importDefault(require("../Message/TableMessage/TrMessage"));
-const TdMessage_1 = __importDefault(require("../Message/TableMessage/TdMessage"));
-const TbodyMessage_1 = __importDefault(require("../Message/TableMessage/TbodyMessage"));
-const TheadMessage_1 = __importDefault(require("../Message/TableMessage/TheadMessage"));
-const ThMessage_1 = __importDefault(require("../Message/TableMessage/ThMessage"));
-const ImageMessage_1 = __importDefault(require("../Message/ImageMessage/ImageMessage"));
-const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
-const rehype_external_links_1 = __importDefault(require("rehype-external-links"));
-const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
-const rehype_highlight_1 = __importDefault(require("rehype-highlight"));
-require("highlight.js/styles/vs2015.css");
-const LinkMessage_1 = __importDefault(require("../Message/LinkMessage/LinkMessage"));
-const rehypeMoveImagesOutOfParagraphs_1 = require("../Message/Plugins/rehypeMoveImagesOutOfParagraphs");
-const SuperscriptMessage_1 = __importDefault(require("../Message/SuperscriptMessage/SuperscriptMessage"));
-const react_styles_1 = require("@patternfly/react-styles");
-const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, reactMarkdownProps, remarkGfmProps, hasNoImages = false, isPrimary, textComponent, shouldRetainStyles }) => {
-    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs, rehype_highlight_1.default];
-    if (openLinkInNewTab) {
-        rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
-    }
-    if (additionalRehypePlugins) {
-        rehypePlugins.push(...additionalRehypePlugins);
-    }
-    const disallowedElements = hasNoImages ? ['img'] : [];
-    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-        disallowedElements.push(...reactMarkdownProps.disallowedElements);
+let markdownRendererPromise = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let ResolvedMarkdownRenderer = null;
+const markdownRendererListeners = new Set();
+const importMarkdownRenderer = () => {
+    if (!markdownRendererPromise) {
+        markdownRendererPromise = Promise.resolve().then(() => __importStar(require('./MarkdownRenderer'))).then((module) => {
+            ResolvedMarkdownRenderer = module.default;
+            markdownRendererListeners.forEach((listener) => listener());
+            return module;
+        });
     }
+    return markdownRendererPromise;
+};
+const subscribeToMarkdownRendererReady = (listener) => {
+    markdownRendererListeners.add(listener);
+    void importMarkdownRenderer();
+    return () => markdownRendererListeners.delete(listener);
+};
+/**
+ * Whether the lazy-loaded markdown renderer chunk has finished loading.
+ */
+const useIsMarkdownRendererReady = () => (0, react_1.useSyncExternalStore)(subscribeToMarkdownRendererReady, () => ResolvedMarkdownRenderer !== null, () => true);
+exports.useIsMarkdownRendererReady = useIsMarkdownRendererReady;
+/**
+ * When provided by `MessageBox`, defers markdown rendering until the shared chunk is ready
+ * so existing messages don't each flash an individual loading state.
+ */
+exports.MarkdownRendererReadyContext = (0, react_1.createContext)(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).
+ */
+const preloadMarkdownRenderer = () => {
+    void importMarkdownRenderer();
+};
+exports.preloadMarkdownRenderer = preloadMarkdownRenderer;
+/**
+ * Resolves when the markdown renderer chunk has loaded.
+ */
+const whenMarkdownRendererReady = () => importMarkdownRenderer();
+exports.whenMarkdownRendererReady = whenMarkdownRendererReady;
+const MarkdownContent = (_a) => {
+    var { content, isMarkdownDisabled, isPrimary, textComponent } = _a, markdownProps = __rest(_a, ["content", "isMarkdownDisabled", "isPrimary", "textComponent"]);
+    const contextReady = (0, react_1.useContext)(exports.MarkdownRendererReadyContext);
+    const storeReady = (0, exports.useIsMarkdownRendererReady)();
+    const isMarkdownRendererReady = contextReady !== null && contextReady !== void 0 ? contextReady : storeReady;
     if (isMarkdownDisabled) {
         if (textComponent) {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textComponent });
         }
         return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, { component: react_core_1.ContentVariants.p, isPrimary: isPrimary, children: content }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({ components: {
-            section: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return ((0, jsx_runtime_1.jsx)("section", Object.assign({}, rest, { className: (0, react_styles_1.css)('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest === null || rest === void 0 ? void 0 : rest.className) })));
-            },
-            p: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.p }, rest, { isPrimary: isPrimary })));
-            },
-            code: (_a) => {
-                var { children } = _a, props = __rest(_a, ["children"]);
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, codeProps = __rest(props, ["node"]);
-                return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, codeProps, codeBlockProps, { isPrimary: isPrimary, shouldRetainStyles: shouldRetainStyles, children: children })));
-            },
-            h1: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h1 }, rest));
-            },
-            h2: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h2 }, rest));
-            },
-            h3: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h3 }, rest));
-            },
-            h4: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h4 }, rest));
-            },
-            h5: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h5 }, rest));
-            },
-            h6: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h6 }, rest));
-            },
-            blockquote: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.blockquote }, rest)));
-            },
-            ul: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
-            },
-            ol: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
-            },
-            li: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, rest));
-            },
-            // table requires node attribute for calculating headers for mobile breakpoint
-            table: (props) => ((0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, props, tableProps, { isPrimary: isPrimary }))),
-            tbody: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, rest));
-            },
-            thead: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, rest));
-            },
-            tr: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(TrMessage_1.default, Object.assign({}, rest));
-            },
-            td: (props) => {
-                // Conflicts with Td type
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node, width } = props, rest = __rest(props, ["node", "width"]);
-                return (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
-            },
-            th: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, rest));
-            },
-            img: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, 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 } = props, rest = __rest(props, ["node"]);
-                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
-                (0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest, linkProps, { children: props.children })));
-            },
-            // used for footnotes
-            sup: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (0, jsx_runtime_1.jsx)(SuperscriptMessage_1.default, Object.assign({}, rest));
-            }
-        }, remarkPlugins: [[remark_gfm_1.default, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
-            // 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 === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: content })));
+    if (!isMarkdownRendererReady || !ResolvedMarkdownRenderer) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(ResolvedMarkdownRenderer, Object.assign({}, markdownProps, { content: content, isPrimary: isPrimary }));
 };
 exports.MarkdownContent = MarkdownContent;
 exports.default = exports.MarkdownContent;

package/dist/cjs/MarkdownContent/MarkdownRenderer.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from 'react';
+import 'highlight.js/styles/vs2015.css';
+import type { MarkdownContentProps } from './MarkdownContent';
+export type MarkdownRendererProps = Omit<MarkdownContentProps, 'isMarkdownDisabled' | 'textComponent'>;
+declare const MarkdownRenderer: FunctionComponent<MarkdownRendererProps>;
+export default MarkdownRenderer;

package/dist/cjs/MarkdownContent/MarkdownRenderer.js

@@ -0,0 +1,187 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const react_core_1 = require("@patternfly/react-core");
+const CodeBlockMessage_1 = __importDefault(require("../Message/CodeBlockMessage/CodeBlockMessage"));
+const TextMessage_1 = __importDefault(require("../Message/TextMessage/TextMessage"));
+const ListItemMessage_1 = __importDefault(require("../Message/ListMessage/ListItemMessage"));
+const UnorderedListMessage_1 = __importDefault(require("../Message/ListMessage/UnorderedListMessage"));
+const OrderedListMessage_1 = __importDefault(require("../Message/ListMessage/OrderedListMessage"));
+const TableMessage_1 = __importDefault(require("../Message/TableMessage/TableMessage"));
+const TrMessage_1 = __importDefault(require("../Message/TableMessage/TrMessage"));
+const TdMessage_1 = __importDefault(require("../Message/TableMessage/TdMessage"));
+const TbodyMessage_1 = __importDefault(require("../Message/TableMessage/TbodyMessage"));
+const TheadMessage_1 = __importDefault(require("../Message/TableMessage/TheadMessage"));
+const ThMessage_1 = __importDefault(require("../Message/TableMessage/ThMessage"));
+const ImageMessage_1 = __importDefault(require("../Message/ImageMessage/ImageMessage"));
+const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
+const rehype_external_links_1 = __importDefault(require("rehype-external-links"));
+const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
+const rehype_highlight_1 = __importDefault(require("rehype-highlight"));
+require("highlight.js/styles/vs2015.css");
+const LinkMessage_1 = __importDefault(require("../Message/LinkMessage/LinkMessage"));
+const rehypeMoveImagesOutOfParagraphs_1 = require("../Message/Plugins/rehypeMoveImagesOutOfParagraphs");
+const SuperscriptMessage_1 = __importDefault(require("../Message/SuperscriptMessage/SuperscriptMessage"));
+const react_styles_1 = require("@patternfly/react-styles");
+const MarkdownRenderer = ({ content, codeBlockProps, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, reactMarkdownProps, remarkGfmProps, hasNoImages = false, isPrimary, shouldRetainStyles }) => {
+    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs, rehype_highlight_1.default];
+    if (openLinkInNewTab) {
+        rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
+    }
+    if (additionalRehypePlugins) {
+        rehypePlugins.push(...additionalRehypePlugins);
+    }
+    const disallowedElements = hasNoImages ? ['img'] : [];
+    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+        disallowedElements.push(...reactMarkdownProps.disallowedElements);
+    }
+    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({ components: {
+            section: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return ((0, jsx_runtime_1.jsx)("section", Object.assign({}, rest, { className: (0, react_styles_1.css)('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', rest === null || rest === void 0 ? void 0 : rest.className) })));
+            },
+            p: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.p }, rest, { isPrimary: isPrimary })));
+            },
+            code: (_a) => {
+                var { children } = _a, props = __rest(_a, ["children"]);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, codeProps = __rest(props, ["node"]);
+                return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, codeProps, codeBlockProps, { isPrimary: isPrimary, shouldRetainStyles: shouldRetainStyles, children: children })));
+            },
+            h1: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h1 }, rest));
+            },
+            h2: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h2 }, rest));
+            },
+            h3: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h3 }, rest));
+            },
+            h4: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h4 }, rest));
+            },
+            h5: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h5 }, rest));
+            },
+            h6: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.h6 }, rest));
+            },
+            blockquote: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.blockquote }, rest)));
+            },
+            ul: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
+            },
+            ol: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
+            },
+            li: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, rest));
+            },
+            // table requires node attribute for calculating headers for mobile breakpoint
+            table: (props) => ((0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, props, tableProps, { isPrimary: isPrimary }))),
+            tbody: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, rest));
+            },
+            thead: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, rest));
+            },
+            tr: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(TrMessage_1.default, Object.assign({}, rest));
+            },
+            td: (props) => {
+                // Conflicts with Td type
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node, width } = props, rest = __rest(props, ["node", "width"]);
+                return (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
+            },
+            th: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, rest));
+            },
+            img: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, 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 } = props, rest = __rest(props, ["node"]);
+                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
+                (0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest, linkProps, { children: props.children })));
+            },
+            // used for footnotes
+            sup: (props) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { node } = props, rest = __rest(props, ["node"]);
+                return (0, jsx_runtime_1.jsx)(SuperscriptMessage_1.default, Object.assign({}, rest));
+            }
+        }, remarkPlugins: [[remark_gfm_1.default, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
+            // 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 === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: content })));
+};
+exports.default = MarkdownRenderer;

package/dist/cjs/Message/Message.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } 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, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import { ActionProps } from '../ResponseActions/ResponseActions';
@@ -9,9 +9,8 @@ import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
-import { TableProps } from '@patternfly/react-table';
-import 'highlight.js/styles/vs2015.css';
-import { PluggableList } from 'unified';
+import type { TableProps } from '@patternfly/react-table';
+import type { PluggableList } from 'unified';
 import { ToolResponseProps } from '../ToolResponse';
 import { DeepThinkingProps } from '../DeepThinking';
 import { ToolCallProps } from '../ToolCall';

package/dist/cjs/Message/Message.js

@@ -29,8 +29,6 @@ const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile")
 const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
 const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
 const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
-// see the full list of styles here: https://highlightjs.org/examples
-require("highlight.js/styles/vs2015.css");
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
 const ToolResponse_1 = __importDefault(require("../ToolResponse"));

package/dist/cjs/MessageBox/MessageBox.js

@@ -21,8 +21,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
+const MarkdownContent_1 = require("../MarkdownContent/MarkdownContent");
 const react_core_1 = require("@patternfly/react-core");
 const react_styles_1 = require("@patternfly/react-styles");
+// Start fetching the markdown chunk as soon as MessageBox enters the bundle.
+(0, MarkdownContent_1.preloadMarkdownRenderer)();
 const SCROLL_EDGE_DELTA = 100;
 const getScrollMetrics = (element) => {
     const { scrollTop, scrollHeight, clientHeight } = element;
@@ -48,6 +51,7 @@ const shouldFollowContentGrowth = (metrics, enableSmartScroll, autoScroll, pause
     (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
 exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
     var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps, hasOuterScrollbar = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps", "hasOuterScrollbar"]);
+    const isMarkdownReady = (0, MarkdownContent_1.useIsMarkdownRendererReady)();
     const [atTop, setAtTop] = (0, react_1.useState)(true);
     const [atBottom, setAtBottom] = (0, react_1.useState)(false);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
@@ -258,6 +262,6 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: (0, react_styles_1.css)('pf-chatbot__messagebox', position === 'bottom' && 'pf-chatbot__messagebox--bottom', hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll', className), ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: (0, react_styles_1.css)('pf-chatbot__messagebox', position === 'bottom' && 'pf-chatbot__messagebox--bottom', hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll', className), ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [(0, jsx_runtime_1.jsx)(MarkdownContent_1.MarkdownRendererReadyContext.Provider, { value: isMarkdownReady, children: children }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
 });
 exports.default = exports.MessageBox;

package/dist/cjs/index.d.ts

@@ -1,5 +1,3 @@
-export { default as AttachmentEdit } from './AttachmentEdit';
-export * from './AttachmentEdit';
 export { default as AttachMenu } from './AttachMenu';
 export * from './AttachMenu';
 export { default as Chatbot } from './Chatbot';
@@ -22,8 +20,6 @@ export { default as ChatbotToggle } from './ChatbotToggle';
 export * from './ChatbotToggle';
 export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
-export { default as CodeModal } from './CodeModal';
-export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
 export { default as DeepThinking } from './DeepThinking';
@@ -50,8 +46,6 @@ export { default as MessageDivider } from './MessageDivider';
 export * from './MessageDivider';
 export { default as Onboarding } from './Onboarding';
 export * from './Onboarding';
-export { default as PreviewAttachment } from './PreviewAttachment';
-export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
 export { default as Settings } from './Settings';
@@ -68,5 +62,3 @@ export { default as ToolCall } from './ToolCall';
 export * from './ToolCall';
 export { default as ToolResponse } from './ToolResponse';
 export * from './ToolResponse';
-export { default as tracking } from './tracking';
-export * from './tracking';