@patternfly/chatbot 6.5.0-prerelease.9 → 6.5.0

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, MenuProps, TitleProps, MenuListProps, SearchInputProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -84,6 +84,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     drawerCloseButtonProps?: DrawerCloseButtonProps;
     /** Additional props appleid to drawer panel body */
     drawerPanelBodyProps?: DrawerPanelBodyProps;
+    /** Flag indicating whether a divider should render between the drawer head and title. */
+    hasDrawerHeadDivider?: boolean;
     /** Whether to show drawer loading state */
     isLoading?: boolean;
     /** Additional props for loading state */
@@ -104,6 +106,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     navTitleProps?: Partial<TitleProps>;
     /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
     searchInputScreenReaderText?: string;
+    /** Custom action rendered before the search input. */
+    searchActionStart?: React.ReactNode;
+    /** Custom action rendered after the search input. */
+    searchActionEnd?: React.ReactNode;
+    /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+    searchToolbar?: React.ReactNode;
     /** Additional props passed to MenuContent */
     menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -12,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, Fragment } from 'react';
 // Import PatternFly components
-import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, 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 } from '@patternfly/react-core';
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 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, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(OutlinedClockIcon, {}), searchInputScreenReaderText, 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", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "menuProps", "menuGroupProps", "menuContentProps"]);
+    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(OutlinedClockIcon, {}), 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();
@@ -64,8 +64,15 @@ export const ChatbotConversationHistoryNav = (_a) => {
         return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: 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 }))] }));
+    const renderSearchAndActions = () => {
+        if (searchToolbar) {
+            return searchToolbar;
+        }
+        return searchActionStart || searchActionEnd ? (_jsx("div", { className: "pf-chatbot__history-search-actions", children: _jsxs(InputGroup, { children: [searchActionStart && _jsx(InputGroupItem, { children: searchActionStart }), searchInputContainer && _jsx(InputGroupItem, { isFill: true, children: searchInputContainer }), searchActionEnd && _jsx(InputGroupItem, { children: searchActionEnd })] }) })) : (searchInputContainer);
+    };
     const renderPanelContent = () => {
-        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && 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 }))] }))] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && _jsx(Divider, { className: "pf-chatbot__heading-divider" }), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
         return (_jsx(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
     };
     // An onKeyDown property must be passed to the Drawer component to handle closing

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -222,6 +222,44 @@ describe('ChatbotConversationHistoryNav', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));
         expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
     });
+    it('Does not render search actions by default', () => {
+        var _a, _b;
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: groupedConversations, handleTextInputChange: handleSearch }));
+        const searchInput = screen.getByPlaceholderText(/Search/i);
+        expect((_a = searchInput.parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling).toBeNull();
+        expect((_b = searchInput.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling).toBeNull();
+    });
+    it('Renders with action at start when searchActionStart is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: groupedConversations, handleTextInputChange: handleSearch, searchActionStart: _jsx("div", { children: "Search action start test" }) }));
+        expect(screen.getByText('Search action start test')).toBeVisible();
+    });
+    it('Renders with action at end when searchActionEnd is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: handleSearch, conversations: groupedConversations, searchActionEnd: _jsx("div", { children: "Search action end test" }) }));
+        expect(screen.getByText('Search action end test')).toBeVisible();
+    });
+    it('Overrides default search input and actions when searchToolbar is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: groupedConversations, handleTextInputChange: handleSearch, searchActionStart: _jsx("div", { children: "Search action start test" }), searchActionEnd: _jsx("div", { children: "Search action end test" }), searchToolbar: _jsx("div", { children: "Custom toolbar" }) }));
+        expect(screen.queryByPlaceholderText(/Search/i)).not.toBeInTheDocument();
+        expect(screen.queryByText('Search action start test')).not.toBeInTheDocument();
+        expect(screen.queryByText('Search action end test')).not.toBeInTheDocument();
+        expect(screen.getByText('Custom toolbar')).toBeInTheDocument();
+    });
     it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, navTitleProps: { headingLevel: 'h1' } }));
         expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js

@@ -10,13 +10,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 const ChatbotHeaderMenuBase = (_a) => {
     var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Chat history menu', innerRef, tooltipContent = 'Chat history menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
-    return (_jsx("div", { className: `pf-chatbot__menu ${className}`, children: _jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+    const [isDrawerAnimating, setIsDrawerAnimating] = useState(false);
+    // I'd like to use a prop here later if this works
+    const drawerState = props['aria-expanded'];
+    const isDrawerOpen = drawerState === true;
+    const prevDrawerStateRef = useRef(isDrawerOpen);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        if (drawerState !== undefined) {
+            const wasDrawerOpen = prevDrawerStateRef.current === true;
+            const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+            setIsDrawerAnimating(true);
+            const timeout = setTimeout(() => {
+                setIsDrawerAnimating(false);
+                if (isDrawerClosing) {
+                    requestAnimationFrame(() => {
+                        var _a;
+                        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    });
+                }
+            }, 350);
+            prevDrawerStateRef.current = isDrawerOpen;
+            return () => clearTimeout(timeout);
+        }
+    }, [drawerState, isDrawerOpen]);
+    const button = useMemo(() => (_jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef !== null && innerRef !== void 0 ? innerRef : buttonRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(BarsIcon, {}) }), size: isCompact ? 'sm' : undefined }, props))), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]);
+    return (_jsx("div", { className: `pf-chatbot__menu ${className}`, children: isDrawerAnimating ? (button) : (_jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(BarsIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: button }))) }));
 };
 export const ChatbotHeaderMenu = forwardRef((props, ref) => (_jsx(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/CodeModal/CodeModal.d.ts

@@ -37,6 +37,8 @@ export interface CodeModalProps {
     modalBodyClassName?: string;
     /** Class applied to modal footer */
     modalFooterClassName?: string;
+    /** Aria label applied to spinner when loading Monaco */
+    spinnerAriaLabel?: string;
 }
 export declare const CodeModal: FunctionComponent<CodeModalProps>;
 export default CodeModal;

package/dist/esm/CodeModal/CodeModal.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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)
@@ -12,22 +21,45 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import * as monaco from 'monaco-editor';
-import { loader } from '@monaco-editor/react';
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
-import { Button, getResizeObserver, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import { Bullseye, Button, getResizeObserver, ModalBody, ModalFooter, ModalHeader, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
-// Configure Monaco loader to use the npm package instead of CDN
-loader.config({ monaco });
+// 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* () {
+    if (!monacoInstance) {
+        const [monaco, { loader }] = yield Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+        monacoInstance = monaco;
+        loader.config({ monaco });
+    }
+    return monacoInstance;
+});
 export const CodeModal = (_a) => {
-    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName"]);
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName, spinnerAriaLabel = 'Loading' } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName", "spinnerAriaLabel"]);
     const [newCode, setNewCode] = useState(code);
     const [editorInstance, setEditorInstance] = useState(null);
     const [isEditorReady, setIsEditorReady] = useState(false);
+    const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+    const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
     const containerRef = useRef(null);
+    useEffect(() => {
+        if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+            setIsMonacoLoading(true);
+            loadMonaco()
+                .then(() => {
+                setIsMonacoLoaded(true);
+                setIsMonacoLoading(false);
+            })
+                .catch((error) => {
+                // eslint-disable-next-line no-console
+                console.error('Failed to load Monaco editor:', error);
+                setIsMonacoLoading(false);
+            });
+        }
+    }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
     useEffect(() => {
         if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
             return;
@@ -77,13 +109,22 @@ export const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    const modal = (_jsxs(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [_jsx(ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), _jsx(ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: _jsxs(Stack, { className: "pf-chatbot__code-modal-body", children: [_jsx(StackItem, { className: "pf-chatbot__code-modal-file-details", children: _jsx(FileDetails, { fileName: fileName }) }), _jsx("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: _jsx(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
-                                    glyphMargin: false,
-                                    folding: false,
-                                    // prevents Monaco from handling resizing itself
-                                    // was causing ResizeObserver issues
-                                    automaticLayout: false
-                                } }, props)) })] }) }), _jsxs(ModalFooter, { className: modalFooterClassName, children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), _jsx(Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
+    const renderMonacoEditor = () => {
+        if (isMonacoLoading) {
+            return (_jsx(Bullseye, { children: _jsx(Spinner, { "aria-label": spinnerAriaLabel }) }));
+        }
+        if (isMonacoLoaded) {
+            return (_jsx(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
+                    glyphMargin: false,
+                    folding: false,
+                    // prevents Monaco from handling resizing itself
+                    // was causing ResizeObserver issues
+                    automaticLayout: false
+                } }, props)));
+        }
+        return null;
+    };
+    const modal = (_jsxs(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [_jsx(ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), _jsx(ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: _jsxs(Stack, { className: "pf-chatbot__code-modal-body", children: [_jsx(StackItem, { className: "pf-chatbot__code-modal-file-details", children: _jsx(FileDetails, { fileName: fileName }) }), _jsx("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: renderMonacoEditor() })] }) }), _jsxs(ModalFooter, { className: modalFooterClassName, children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), _jsx(Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
     return modal;
 };
 export default CodeModal;

package/dist/esm/DeepThinking/DeepThinking.d.ts

@@ -1,8 +1,11 @@
 import { CardBodyProps, CardProps, ExpandableSectionProps } from '@patternfly/react-core';
 import { type FunctionComponent } from 'react';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface DeepThinkingProps {
     /** Toggle content shown for expandable section  */
     toggleContent: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Additional props passed to expandable section */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
     /** Subheading rendered inside expandable section */
@@ -13,6 +16,16 @@ export interface DeepThinkingProps {
     cardProps?: CardProps;
     /** Additional props passed to main card body */
     cardBodyProps?: CardBodyProps;
+    /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+    isToggleContentMarkdown?: boolean;
+    /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+    isSubheadingMarkdown?: boolean;
+    /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+    isBodyMarkdown?: boolean;
+    /** Props passed to MarkdownContent component when markdown is enabled */
+    markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+    /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+    shouldRetainStyles?: boolean;
 }
 export declare const DeepThinking: FunctionComponent<DeepThinkingProps>;
 export default DeepThinking;

package/dist/esm/DeepThinking/DeepThinking.js

@@ -4,11 +4,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 import { Card, CardBody, ExpandableSection } from '@patternfly/react-core';
 import { useState } from 'react';
-export const DeepThinking = ({ body, cardProps, expandableSectionProps, subheading, toggleContent, cardBodyProps }) => {
-    const [isExpanded, setIsExpanded] = useState(true);
+import MarkdownContent from '../MarkdownContent';
+export const DeepThinking = ({ body, cardProps, expandableSectionProps, subheading, toggleContent, isDefaultExpanded = true, cardBodyProps, isToggleContentMarkdown, isSubheadingMarkdown, isBodyMarkdown, markdownContentProps, shouldRetainStyles = false }) => {
+    const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
-    return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__deep-thinking" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__deep-thinking-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__deep-thinking-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__deep-thinking-subheading", children: _jsx("span", { children: subheading }) })), body && _jsx("div", { className: "pf-chatbot__deep-thinking-body", children: body })] }) })) })) })));
+    const renderToggleContent = () => {
+        if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+            return (_jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: toggleContent }, markdownContentProps)));
+        }
+        return toggleContent;
+    };
+    const renderSubheading = () => {
+        if (!subheading) {
+            return null;
+        }
+        if (isSubheadingMarkdown) {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: subheading }, markdownContentProps));
+        }
+        return subheading;
+    };
+    const renderBody = () => {
+        if (!body) {
+            return null;
+        }
+        if (isBodyMarkdown && typeof body === 'string') {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: body }, markdownContentProps));
+        }
+        return body;
+    };
+    return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__deep-thinking" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: renderToggleContent(), onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__deep-thinking-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__deep-thinking-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__deep-thinking-subheading", children: _jsx("span", { children: renderSubheading() }) })), body && _jsx("div", { className: "pf-chatbot__deep-thinking-body", children: renderBody() })] }) })) })) })));
 };
 export default DeepThinking;

package/dist/esm/DeepThinking/DeepThinking.test.js

@@ -1,5 +1,15 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import DeepThinking from './DeepThinking';
 describe('DeepThinking', () => {
@@ -40,4 +50,74 @@ describe('DeepThinking', () => {
         const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
         expect(subheadingContainer).toBeFalsy();
     });
+    it('should pass through cardBodyProps', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: "Thinking content", cardBodyProps: { className: 'custom-card-body-class' } })));
+        const cardBody = screen.getByText('Thinking content').closest('.pf-v6-c-card__body');
+        expect(cardBody).toHaveClass('custom-card-body-class');
+    });
+    it('Renders expanded by default', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: "Thinking content" })));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Thinking content')).toBeVisible();
+    });
+    it('Renders collapsed when isDefaultExpanded is false', () => {
+        render(_jsx(DeepThinking, Object.assign({ isDefaultExpanded: false }, defaultProps, { body: "Thinking content" })));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText('Thinking content')).not.toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { isDefaultExpanded: false, body: "Thinking content", expandableSectionProps: { isExpanded: true } })));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Thinking content')).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const customOnToggle = jest.fn();
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { isDefaultExpanded: false, body: "Thinking content", expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalled();
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText('Thinking content')).not.toBeVisible();
+    }));
+    it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+        const toggleContent = '**Bold thinking**';
+        const { container } = render(_jsx(DeepThinking, { toggleContent: toggleContent, isToggleContentMarkdown: true }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold thinking')).toBeTruthy();
+    });
+    it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+        const toggleContent = '**Bold thinking**';
+        const { container } = render(_jsx(DeepThinking, { toggleContent: toggleContent }));
+        expect(container.querySelector('strong')).toBeFalsy();
+        expect(screen.getByText('**Bold thinking**')).toBeTruthy();
+    });
+    it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+        const subheading = '**Bold subheading**';
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps, { subheading: subheading, isSubheadingMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold subheading')).toBeTruthy();
+    });
+    it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+        const subheading = '**Bold subheading**';
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(screen.getByText('**Bold subheading**')).toBeTruthy();
+    });
+    it('should render body as markdown when isBodyMarkdown is true', () => {
+        const body = '**Bold body**';
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold body')).toBeTruthy();
+    });
+    it('should not render body as markdown when isBodyMarkdown is false', () => {
+        const body = '**Bold body**';
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText('**Bold body**')).toBeTruthy();
+    });
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const body = '**Bold body**';
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/esm/MarkdownContent/MarkdownContent.d.ts

@@ -0,0 +1,44 @@
+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';
+/**
+ * MarkdownContent renders content either as plain text or with content with markdown support.
+ *
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MarkdownContentProps {
+    /** The content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
+    content?: string;
+    /** Disables markdown parsing, allowing only plain text input */
+    isMarkdownDisabled?: boolean;
+    /** Props for code blocks */
+    codeBlockProps?: CodeBlockMessageProps;
+    /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+    tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Props for links */
+    linkProps?: ButtonProps;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: Options;
+    /** Whether to strip out images in markdown */
+    hasNoImages?: boolean;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
+    /** Custom component to render when markdown is disabled */
+    textComponent?: ReactNode;
+    /** Flag indicating whether content should retain various styles of its context (typically font-size and text color). */
+    shouldRetainStyles?: boolean;
+}
+export declare const MarkdownContent: FunctionComponent<MarkdownContentProps>;
+export default MarkdownContent;