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

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from 'react';
-import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
+import type { FunctionComponent, ReactNode } from 'react';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps, ExpandableSectionProps, ExpandableSectionToggleProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -24,6 +24,49 @@ 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;
@@ -35,9 +78,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. */

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -24,35 +24,144 @@ const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
+const isConversation = (item) => Boolean(item && typeof item === 'object' && 'id' in item && 'text' in item && !('items' in item));
+const isConversationGroup = (item) => Boolean(item && typeof item === 'object' && 'id' in item && 'label' in item && 'items' in item);
+const isConversationGroupArray = (items) => items.length > 0 && isConversationGroup(items[0]);
+const getExpandableGroupContentId = (groupId) => `chatbot-nav-group-${groupId}-content`;
+const getGroupLabelId = (groupId) => `chatbot-nav-group-${groupId}-label`;
+const getExpandableGroupToggleId = (groupId) => `chatbot-nav-group-${groupId}-toggle`;
+const getShowAllToggleId = (groupId) => `chatbot-nav-group-${groupId}-show-all-toggle`;
+const getStaticMenuLabelId = (group) => { var _a, _b; return (_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.titleId) !== null && _b !== void 0 ? _b : getGroupLabelId(group.id); };
+const getMenuListLabelledBy = (group) => {
+    var _a, _b, _c, _d;
+    if (group.expandable) {
+        return (_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a['aria-labelledby']) !== null && _b !== void 0 ? _b : getExpandableGroupToggleId(group.id);
+    }
+    return (_d = (_c = group.menuGroupProps) === null || _c === void 0 ? void 0 : _c['aria-labelledby']) !== null && _d !== void 0 ? _d : getStaticMenuLabelId(group);
+};
+const getMenuListProps = (group) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, group.menuListProps), { 'aria-labelledby': (_b = (_a = group.menuListProps) === null || _a === void 0 ? void 0 : _a['aria-labelledby']) !== null && _b !== void 0 ? _b : getMenuListLabelledBy(group) }));
+};
+const focusElementById = (id) => {
+    var _a;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.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, toggleId, firstOverflowItemRef, hasOverflowItems) => {
+    const wasExpandedRef = (0, react_1.useRef)(isExpanded);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (hasOverflowItems && isExpanded !== wasExpandedRef.current) {
+            if (isExpanded) {
+                (_a = firstOverflowItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                focusElementById(toggleId);
+            }
+        }
+        wasExpandedRef.current = isExpanded;
+    }, [isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems]);
+};
+// 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 = ({ 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 = (0, react_1.useRef)(null);
+    const toggleLabel = label !== null && label !== void 0 ? label : (isExpanded ? 'Show less' : 'Show all');
+    useShowAllFocusManagement(isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.MenuList, Object.assign({}, getMenuListProps(group), { children: [alwaysVisibleItems.map((chat) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(chat) }, chat.id))), isExpanded &&
+                        overflowItems.map((chat, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(chat, undefined, index === 0 ? firstOverflowItemRef : undefined) }, chat.id))), hasOverflowItems && ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { id: toggleId, itemId: toggleId, className: "pf-chatbot__menu-show-all-toggle", onClick: () => onToggle(!isExpanded), children: toggleLabel }, "show-all-toggle"))] })), group.footer] }));
+};
+const ExpandableConversationGroup = ({ group, children }) => {
+    var _a, _b;
+    const toggleId = getExpandableGroupToggleId(group.id);
+    const contentId = getExpandableGroupContentId(group.id);
+    const { isExpanded, onToggle, expandableSectionProps, expandableSectionToggleProps } = group.expandable;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `pf-chatbot__menu-item-header pf-chatbot__menu-item-header--expandable ${(_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ''}`, children: [(0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ toggleId: toggleId, contentId: contentId, isExpanded: isExpanded, onToggle: onToggle, toggleWrapper: "h3", className: "pf-chatbot__menu-group-toggle" }, expandableSectionToggleProps, { children: group.label })), (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ isDetached: true, isExpanded: isExpanded, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: isExpanded && children }))] }));
+};
+const buildConversationMenuSegments = (groups) => groups.reduce((segments, group) => {
+    if (group.expandable) {
+        return [...segments, { type: 'expandable', group }];
+    }
+    const last = segments[segments.length - 1];
+    if ((last === null || last === void 0 ? void 0 : last.type) === 'static') {
+        last.groups.push(group);
+        return segments;
+    }
+    return [...segments, { type: 'static', groups: [group] }];
+}, []);
 const ChatbotConversationHistoryNav = (_a) => {
     var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = (0, jsx_runtime_1.jsx)(react_icons_1.RhUiClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
     const drawerRef = (0, react_1.useRef)(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
-    const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
-    const getNavItem = (conversation) => {
+    const getNavItem = (conversation, itemOverrides, itemRef) => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCommentIcon, {}) }), (conversation.menuItems
+        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, ref: itemRef }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCommentIcon, {}) }), (conversation.menuItems
             ? {
                 actions: ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {}), conversation.additionalProps, { children: conversation.text })));
+            : {}), conversation.additionalProps, itemOverrides, { children: conversation.text })));
     };
+    const renderConversationItems = (items, keyPrefix = '') => items.map((item, index) => {
+        if (isConversation(item)) {
+            return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(item) }, item.id);
+        }
+        const key = (0, react_1.isValidElement)(item) && item.key != null ? String(item.key) : `${keyPrefix}-${index}`;
+        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: item }, key);
+    });
+    const renderGroupBody = (group) => {
+        if (group.showAll) {
+            return (0, jsx_runtime_1.jsx)(ShowAllGroupBody, { group: group, getNavItem: getNavItem });
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, getMenuListProps(group), { children: renderConversationItems(group.items, group.id) })), group.footer] }));
+    };
+    const renderConversationGroup = (group) => {
+        var _a, _b, _c, _d;
+        if (group.header) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: `pf-chatbot__menu-item-header ${(_b = (_a = group.menuGroupProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ''}`, children: [group.header, renderGroupBody(group)] }, group.id));
+        }
+        const labelId = getStaticMenuLabelId(group);
+        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: group.label, labelHeadingLevel: "h3" }, group.menuGroupProps, { titleId: labelId, "aria-labelledby": (_d = (_c = group.menuGroupProps) === null || _c === void 0 ? void 0 : _c['aria-labelledby']) !== null && _d !== void 0 ? _d : labelId, children: renderGroupBody(group) }), group.id));
+    };
+    const renderConversationMenu = (content, key) => ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, Object.assign({}, menuContentProps, { children: content })) }), key));
+    const renderConversationMenuSegment = (segment) => {
+        if (segment.type === 'static') {
+            return renderConversationMenu((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: segment.groups.map(renderConversationGroup) }), segment.groups.map((group) => group.id).join('-'));
+        }
+        return ((0, jsx_runtime_1.jsx)(ExpandableConversationGroup, { group: segment.group, children: renderConversationMenu(renderGroupBody(segment.group)) }, segment.group.id));
+    };
+    const normalizeObjectGroups = (groupedConversations) => Object.keys(groupedConversations).map((groupKey) => ({
+        id: groupKey,
+        label: groupKey,
+        items: groupedConversations[groupKey],
+        menuGroupProps: menuGroupProps && typeof menuGroupProps === 'object' && groupKey in menuGroupProps
+            ? menuGroupProps[groupKey]
+            : undefined,
+        menuListProps: menuListProps && typeof menuListProps === 'object' && groupKey in menuListProps
+            ? menuListProps[groupKey]
+            : undefined
+    }));
     const buildConversations = () => {
         if (Array.isArray(conversations)) {
-            return ((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
-                    if (isConversation(conversation)) {
-                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id);
-                    }
-                    else {
-                        return conversation;
-                    }
-                }) })));
-        }
-        else {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
+            if (isConversationGroupArray(conversations)) {
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversationMenuSegments(conversations).map(renderConversationMenuSegment) });
+            }
+            return renderConversationMenu((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: renderConversationItems(conversations) })));
         }
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversationMenuSegments(normalizeObjectGroups(conversations)).map(renderConversationMenuSegment) }));
     };
     // Menu Content
     // - Consumers should pass an array to <Chatbot> of the list of conversations
@@ -67,7 +176,7 @@ const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, noResultsState));
         }
-        return ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
+        return buildConversations();
     };
     const renderDrawerContent = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
     const searchInputContainer = handleTextInputChange && ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__input", children: [(0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)), searchInputScreenReaderText && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__filter-announcement pf-chatbot-m-hidden", children: searchInputScreenReaderText }))] }));

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;