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

package/dist/esm/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/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -9,44 +9,153 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, Fragment } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, Fragment, isValidElement } from 'react';
 // Import PatternFly components
-import { Button, Divider, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, InputGroup, InputGroupItem, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent } from '@patternfly/react-core';
+import { Button, Divider, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, InputGroup, InputGroupItem, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent, ExpandableSection, ExpandableSectionToggle } from '@patternfly/react-core';
 import { RhUiClockIcon, RhUiCommentIcon, RhUiEditFillIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './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 = useRef(isExpanded);
+    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 = useRef(null);
+    const toggleLabel = label !== null && label !== void 0 ? label : (isExpanded ? 'Show less' : 'Show all');
+    useShowAllFocusManagement(isExpanded, toggleId, firstOverflowItemRef, hasOverflowItems);
+    return (_jsxs(_Fragment, { children: [_jsxs(MenuList, Object.assign({}, getMenuListProps(group), { children: [alwaysVisibleItems.map((chat) => (_jsx(Fragment, { children: getNavItem(chat) }, chat.id))), isExpanded &&
+                        overflowItems.map((chat, index) => (_jsx(Fragment, { children: getNavItem(chat, undefined, index === 0 ? firstOverflowItemRef : undefined) }, chat.id))), hasOverflowItems && (_jsx(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 (_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: [_jsx(ExpandableSectionToggle, Object.assign({ toggleId: toggleId, contentId: contentId, isExpanded: isExpanded, onToggle: onToggle, toggleWrapper: "h3", className: "pf-chatbot__menu-group-toggle" }, expandableSectionToggleProps, { children: group.label })), _jsx(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] }];
+}, []);
 export 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 = _jsx(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 = 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 (_jsx(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 : _jsx(RhUiCommentIcon, {}) }), (conversation.menuItems
+        return (_jsx(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 : _jsx(RhUiCommentIcon, {}) }), (conversation.menuItems
             ? {
                 actions: (_jsx(ConversationHistoryDropdown, { 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 _jsx(Fragment, { children: getNavItem(item) }, item.id);
+        }
+        const key = isValidElement(item) && item.key != null ? String(item.key) : `${keyPrefix}-${index}`;
+        return _jsx(Fragment, { children: item }, key);
+    });
+    const renderGroupBody = (group) => {
+        if (group.showAll) {
+            return _jsx(ShowAllGroupBody, { group: group, getNavItem: getNavItem });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(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 (_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 (_jsx(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) => (_jsx(Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: content })) }), key));
+    const renderConversationMenuSegment = (segment) => {
+        if (segment.type === 'static') {
+            return renderConversationMenu(_jsx(_Fragment, { children: segment.groups.map(renderConversationGroup) }), segment.groups.map((group) => group.id).join('-'));
+        }
+        return (_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 (_jsx(MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
-                    if (isConversation(conversation)) {
-                        return _jsx(Fragment, { children: getNavItem(conversation) }, conversation.id);
-                    }
-                    else {
-                        return conversation;
-                    }
-                }) })));
-        }
-        else {
-            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: _jsx(MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
+            if (isConversationGroupArray(conversations)) {
+                return _jsx(_Fragment, { children: buildConversationMenuSegments(conversations).map(renderConversationMenuSegment) });
+            }
+            return renderConversationMenu(_jsx(MenuList, Object.assign({}, menuListProps, { children: renderConversationItems(conversations) })));
         }
+        return (_jsx(_Fragment, { children: buildConversationMenuSegments(normalizeObjectGroups(conversations)).map(renderConversationMenuSegment) }));
     };
     // Menu Content
     // - Consumers should pass an array to <Chatbot> of the list of conversations
@@ -61,7 +170,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
         }
-        return (_jsx(Menu, Object.assign({ className: "pf-chatbot__history-menu", isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
+        return buildConversations();
     };
     const renderDrawerContent = () => (_jsx(_Fragment, { children: _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
     const searchInputContainer = handleTextInputChange && (_jsxs("div", { className: "pf-chatbot__input", children: [_jsx(SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)), searchInputScreenReaderText && (_jsx("div", { className: "pf-chatbot__filter-announcement pf-chatbot-m-hidden", children: searchInputScreenReaderText }))] }));

package/dist/esm/CodeModal/CodeModal.js

@@ -30,7 +30,12 @@ import ChatbotModal from '../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([import('monaco-editor'), import('@monaco-editor/react')]);
         monacoInstance = monaco;
         loader.config({ monaco });

package/dist/esm/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/esm/MarkdownContent/MarkdownContent.js

@@ -10,179 +10,66 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+// ============================================================================
+// Markdown Content - Shared component for rendering markdown
+// ============================================================================
+import { createContext, useContext, useSyncExternalStore } from 'react';
 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 LinkMessage from '../Message/LinkMessage/LinkMessage';
-import { rehypeMoveImagesOutOfParagraphs } from '../Message/Plugins/rehypeMoveImagesOutOfParagraphs';
-import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage';
-import { css } from '@patternfly/react-styles';
-export const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, reactMarkdownProps, remarkGfmProps, hasNoImages = false, isPrimary, textComponent, shouldRetainStyles }) => {
-    let rehypePlugins = [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);
+let markdownRendererPromise = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let ResolvedMarkdownRenderer = null;
+const markdownRendererListeners = new Set();
+const importMarkdownRenderer = () => {
+    if (!markdownRendererPromise) {
+        markdownRendererPromise = import('./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.
+ */
+export const useIsMarkdownRendererReady = () => 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(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 importMarkdownRenderer();
+};
+/**
+ * Resolves when the markdown renderer chunk has loaded.
+ */
+export const whenMarkdownRendererReady = () => importMarkdownRenderer();
+export const MarkdownContent = (_a) => {
+    var { content, isMarkdownDisabled, isPrimary, textComponent } = _a, markdownProps = __rest(_a, ["content", "isMarkdownDisabled", "isPrimary", "textComponent"]);
+    const contextReady = useContext(MarkdownRendererReadyContext);
+    const storeReady = useIsMarkdownRendererReady();
+    const isMarkdownRendererReady = contextReady !== null && contextReady !== void 0 ? contextReady : storeReady;
     if (isMarkdownDisabled) {
         if (textComponent) {
             return _jsx(_Fragment, { children: textComponent });
         }
         return (_jsx(TextMessage, { component: ContentVariants.p, isPrimary: isPrimary, children: content }));
     }
-    return (_jsx(Markdown, Object.assign({ components: {
-            section: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (_jsx("section", Object.assign({}, rest, { className: 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 (_jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: 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 (_jsx(CodeBlockMessage, 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 _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h1 }, rest));
-            },
-            h2: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h2 }, rest));
-            },
-            h3: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h3 }, rest));
-            },
-            h4: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h4 }, rest));
-            },
-            h5: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h5 }, rest));
-            },
-            h6: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.h6 }, rest));
-            },
-            blockquote: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return (_jsx(TextMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles, component: ContentVariants.blockquote }, rest)));
-            },
-            ul: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(UnorderedListMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
-            },
-            ol: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(OrderedListMessage, Object.assign({ shouldRetainStyles: shouldRetainStyles }, rest));
-            },
-            li: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(ListItemMessage, Object.assign({}, rest));
-            },
-            // table requires node attribute for calculating headers for mobile breakpoint
-            table: (props) => (_jsx(TableMessage, 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 _jsx(TbodyMessage, Object.assign({}, rest));
-            },
-            thead: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TheadMessage, Object.assign({}, rest));
-            },
-            tr: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(TrMessage, 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 _jsx(TdMessage, Object.assign({}, rest));
-            },
-            th: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(ThMessage, Object.assign({}, rest));
-            },
-            img: (props) => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { node } = props, rest = __rest(props, ["node"]);
-                return _jsx(ImageMessage, 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
-                _jsx(LinkMessage, 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 _jsx(SuperscriptMessage, Object.assign({}, rest));
-            }
-        }, remarkPlugins: [[remarkGfm, 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 _jsx(ResolvedMarkdownRenderer, Object.assign({}, markdownProps, { content: content, isPrimary: isPrimary }));
 };
 export default MarkdownContent;

package/dist/esm/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;