@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.21

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, ButtonProps } from '@patternfly/react-core';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, TitleProps, MenuListProps, SearchInputProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -19,8 +19,10 @@ export interface Conversation {
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-    /** Additional props passed to conversation menu item */
+    /** Additional props passed to menu item */
     additionalProps?: MenuItemProps;
+    /** Custom dropdown ID to ensure uniqueness across demo instances */
+    dropdownId?: string;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Function called to toggle drawer */
@@ -38,6 +40,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     };
     /** 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. */
+    menuGroupProps?: MenuGroupProps | {
+        [key: string]: MenuGroupProps;
+    };
+    /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
+    menuListProps?: Omit<MenuListProps, 'children'> | {
+        [key: string]: Omit<MenuListProps, 'children'>;
+    };
     /** Text shown in blue button */
     newChatButtonText?: string;
     /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -48,6 +58,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     searchInputPlaceholder?: string;
     /** Aria label for search input */
     searchInputAriaLabel?: string;
+    /** Additional props passed to search input */
+    searchInputProps?: SearchInputProps;
     /** A callback for when the input value changes. Omit to hide input field */
     handleTextInputChange?: (value: string) => void;
     /** Display mode of chatbot */
@@ -86,6 +98,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     isCompact?: boolean;
     /** Display title  */
     title?: string;
+    /** Icon displayed in title */
+    navTitleIcon?: React.ReactNode;
+    /** Title header level */
+    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;
+    /** Additional props passed to MenuContent */
+    menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
 export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -12,34 +12,40 @@ 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, Menu, MenuList, MenuGroup, MenuItem, MenuContent, Title, Icon } from '@patternfly/react-core';
-import { OutlinedClockIcon, OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, 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, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title"]);
+    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"]);
     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) => {
         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(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
             ? {
                 actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {}), conversation.additionalProps, { children: conversation.text }), conversation.id));
+            : {}), conversation.additionalProps, { children: conversation.text })));
     };
-    const buildMenu = () => {
+    const buildConversations = () => {
         if (Array.isArray(conversations)) {
-            // Render for array of MenuItemObject
-            return (_jsx(MenuList, { children: conversations.map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }));
+            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 {
-            // Render for object with NavItemObject arrays as values
-            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, children: _jsx(MenuList, { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }) }, navGroup))) }));
+            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))) }));
         }
     };
     // Menu Content
@@ -55,11 +61,11 @@ export const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
         }
-        return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, { children: buildMenu() }) })));
+        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 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 }, newChatButtonProps, { children: newChatButtonText })))] })) })), _jsxs("div", { className: "pf-chatbot__title-container", children: [_jsxs(Title, { headingLevel: "h3", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: _jsx(OutlinedClockIcon, {}) }), title] }), !isLoading && handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) }))] }), 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 })))] })) })), _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()] }));
         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

@@ -13,7 +13,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
-import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 const ERROR = {
     bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
@@ -147,7 +147,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
-        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should accept errorState without button', () => {
@@ -157,7 +157,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
-        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should show loading state over error state if both are supplied', () => {
@@ -193,4 +193,42 @@ describe('ChatbotConversationHistoryNav', () => {
         const iconElement = container.querySelector('.pf-chatbot__title-icon');
         expect(iconElement).toBeInTheDocument();
     });
+    it('Passes menuProps to Menu', () => {
+        var _a;
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuProps: { className: 'test' } }));
+        expect((_a = screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
+    });
+    it('Passes menuContentProps to MenuContent', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuContentProps: { className: 'test' } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an array', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuListProps: { className: 'test' } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuListProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuGroupProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes additionalProps to MenuItem', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }] }));
+        expect(screen.getByRole('menuitem')).toHaveClass('test');
+    });
+    it('should be able to spread search input props when searchInputProps is passed', () => {
+        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('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();
+        expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
+    });
+    it('overrides nav title icon when navTitleIcon is passed in', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: _jsx(BellIcon, { "data-testid": "bell" }) }));
+        expect(screen.getByTestId('bell')).toBeInTheDocument();
+    });
 });

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js

@@ -14,7 +14,7 @@ import { forwardRef } 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 = 'Toggle menu', innerRef, tooltipContent = 'Menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    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", 
             // 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)) })) }));

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js

@@ -10,7 +10,7 @@ describe('ChatbotHeaderMenu', () => {
     it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
         const onMenuToggle = jest.fn();
         render(_jsx(ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
-        fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
         expect(onMenuToggle).toHaveBeenCalled();
     });
     it('should handle isCompact', () => {

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
+    /** Callback function for when button is clicked */
+    onClick: () => void;
+    /** Custom classname for the header component */
+    className?: string;
+    /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+    tooltipProps?: TooltipProps;
+    /** Aria label for menu */
+    menuAriaLabel?: string;
+    /** Ref applied to menu */
+    innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
+    /** Sets button to compact styling. */
+    isCompact?: boolean;
+}
+export declare const ChatbotHeaderNewChatButton: import("react").ForwardRefExoticComponent<ChatbotHeaderNewChatButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
+const ChatbotHeaderNewChatButtonBase = (_a) => {
+    var { className, onClick, tooltipProps, menuAriaLabel = 'New chat', innerRef, tooltipContent = 'New chat', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return (_jsx("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: _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: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PenToSquareIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+};
+export const ChatbotHeaderNewChatButton = forwardRef((props, ref) => (_jsx(ChatbotHeaderNewChatButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderNewChatButton } from './ChatbotHeaderNewChatButton';
+import '@testing-library/jest-dom';
+describe('ChatbotHeaderNewChatButton', () => {
+    it('should render ChatbotHeaderNewChatButton', () => {
+        const { container } = render(_jsx(ChatbotHeaderNewChatButton, { className: "custom-header-new-chat-button", onClick: jest.fn() }));
+        expect(container.querySelector('.custom-header-new-chat-button')).toBeTruthy();
+    });
+    it('should call onClick handler when new chat button is pressed', () => {
+        const onClick = jest.fn();
+        render(_jsx(ChatbotHeaderNewChatButton, { className: "custom-header-new-chat-button", onClick: onClick }));
+        fireEvent.click(screen.getByRole('button', { name: 'New chat' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('should render button with isCompact', () => {
+        render(_jsx(ChatbotHeaderNewChatButton, { "data-testid": "new-chat-button", onClick: jest.fn(), isCompact: true }));
+        expect(screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+    });
+});

package/dist/esm/ChatbotHeader/index.d.ts

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

package/dist/esm/ChatbotHeader/index.js

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

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

@@ -0,0 +1,18 @@
+import { CardBodyProps, CardProps, ExpandableSectionProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+export interface DeepThinkingProps {
+    /** Toggle content shown for expandable section  */
+    toggleContent: React.ReactNode;
+    /** Additional props passed to expandable section */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Subheading rendered inside expandable section */
+    subheading?: string;
+    /** Body text rendered inside expandable section */
+    body?: React.ReactNode | string;
+    /** Additional props passed to main card */
+    cardProps?: CardProps;
+    /** Additional props passed to main card body */
+    cardBodyProps?: CardBodyProps;
+}
+export declare const DeepThinking: FunctionComponent<DeepThinkingProps>;
+export default DeepThinking;

package/dist/esm/DeepThinking/DeepThinking.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Deep Thinking
+// ============================================================================
+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);
+    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 })] }) })) })) })));
+};
+export default DeepThinking;

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DeepThinking from './DeepThinking';
+describe('DeepThinking', () => {
+    const defaultProps = {
+        toggleContent: 'Show thinking'
+    };
+    it('should render with required props only', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps)));
+        expect(screen.getByText('Show thinking')).toBeTruthy();
+    });
+    it('should render subheading when provided', () => {
+        const subheading = 'Thought for 3 seconds';
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(screen.getByText(subheading)).toBeTruthy();
+    });
+    it('should render body content when provided', () => {
+        const body = "Here's why I think that";
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText(body)).toBeTruthy();
+    });
+    it('should render with complex content including React elements', () => {
+        const body = (_jsxs("div", { children: [_jsx("p", { children: "Complex body content" }), _jsxs("ul", { children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" })] })] }));
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText('Complex body content')).toBeTruthy();
+        expect(screen.getByText('Item 1')).toBeTruthy();
+        expect(screen.getByText('Item 2')).toBeTruthy();
+    });
+    it('should apply custom className from cardProps', () => {
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps, { cardProps: { className: 'custom-tool-response-class' } })));
+        expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+    });
+    it('should pass through expandableSectionProps', () => {
+        render(_jsx(DeepThinking, Object.assign({}, defaultProps, { expandableSectionProps: { className: 'custom-expandable-class' } })));
+        expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+    });
+    it('should not render subheading span when subheading is not provided', () => {
+        const { container } = render(_jsx(DeepThinking, Object.assign({}, defaultProps)));
+        const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+        expect(subheadingContainer).toBeFalsy();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './DeepThinking';
+export * from './DeepThinking';

package/dist/esm/DeepThinking/index.js

@@ -0,0 +1,2 @@
+export { default } from './DeepThinking';
+export * from './DeepThinking';

package/dist/esm/FileDetails/FileDetails.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-interface FileDetailsProps {
+export interface FileDetailsProps {
     /** Class name applied to container */
     className?: string;
     /** Name of file, including extension */
@@ -8,8 +8,28 @@ interface FileDetailsProps {
     languageTestId?: string;
     /** Class name applied to file name */
     fileNameClassName?: string;
+    /** File size */
+    fileSize?: string;
+    /** Whether to truncate file name */
+    hasTruncation?: boolean;
 }
+export declare const IMAGE_FORMATS: {
+    png: string;
+    apng: string;
+    avif: string;
+    gif: string;
+    jpg: string;
+    svg: string;
+    webp: string;
+};
 export declare const extensionToLanguage: {
+    png: string;
+    apng: string;
+    avif: string;
+    gif: string;
+    jpg: string;
+    svg: string;
+    webp: string;
     '1': string;
     '2': string;
     '3': string;
@@ -666,7 +686,6 @@ export declare const extensionToLanguage: {
     viw: string;
     db2: string;
     ston: string;
-    svg: string;
     sage: string;
     sagews: string;
     sls: string;
@@ -918,5 +937,5 @@ export declare const extensionToLanguage: {
     odp: string;
     pdf: string;
 };
-export declare const FileDetails: ({ className, fileName, fileNameClassName, languageTestId }: PropsWithChildren<FileDetailsProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FileDetails: ({ className, fileName, fileNameClassName, languageTestId, fileSize, hasTruncation }: PropsWithChildren<FileDetailsProps>) => import("react/jsx-runtime").JSX.Element;
 export default FileDetails;