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

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", 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/FilePreview/FilePreview.d.ts

@@ -0,0 +1,26 @@
+import { ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { ChatbotModalProps } from '../ChatbotModal';
+export interface FilePreviewProps extends ChatbotModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** File name */
+    fileName: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+    /** Additional props passed to modal header */
+    modalHeaderProps?: ModalHeaderProps;
+    /** Additional props passed to modal body */
+    modalBodyProps?: ModalBodyProps;
+}
+declare const FilePreview: FunctionComponent<FilePreviewProps>;
+export default FilePreview;

package/dist/esm/FilePreview/FilePreview.js

@@ -0,0 +1,21 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalBody, ModalHeader } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal';
+import { FileIcon } from '@patternfly/react-icons';
+const FilePreview = (_a) => {
+    var { isModalOpen, displayMode = ChatbotDisplayMode.default, children, fileName, isCompact, className, handleModalToggle, title = 'File preview', modalHeaderProps, modalBodyProps } = _a, props = __rest(_a, ["isModalOpen", "displayMode", "children", "fileName", "isCompact", "className", "handleModalToggle", "title", "modalHeaderProps", "modalBodyProps"]);
+    return (_jsxs(ChatbotModal, Object.assign({ isOpen: isModalOpen, className: `pf-chatbot__file-preview-modal pf-chatbot__file-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle, isCompact: isCompact }, props, { children: [_jsx(ModalHeader, Object.assign({ title: title }, modalHeaderProps)), _jsxs(ModalBody, Object.assign({ className: "pf-chatbot__file-preview-body" }, modalBodyProps, { children: [_jsx(FileIcon, { className: "pf-chatbot__file-preview-icon" }), _jsx("h2", { className: "pf-chatbot__file-preview-name", children: fileName }), children && _jsx("div", { className: "pf-chatbot__file-preview-body", children: children })] }))] })));
+};
+export default FilePreview;

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

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

package/dist/esm/FilePreview/FilePreview.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilePreview from './FilePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { Button } from '@patternfly/react-core';
+describe('FilePreview', () => {
+    const defaultProps = {
+        isModalOpen: true,
+        handleModalToggle: jest.fn(),
+        fileName: 'test-file.txt',
+        children: 'File content preview'
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render with basic props', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps)));
+        expect(screen.getByText('File preview')).toBeInTheDocument();
+        expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+    });
+    it('should render with custom title', () => {
+        const customTitle = 'Custom file preview title';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(screen.getByRole('heading', { name: customTitle })).toBeTruthy();
+    });
+    it('should handle modal toggle when closed', () => {
+        const mockToggle = jest.fn();
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isModalOpen: false, handleModalToggle: mockToggle })));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('should apply default display mode class', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps)));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--default');
+    });
+    it('should apply custom display mode class', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { displayMode: ChatbotDisplayMode.fullscreen })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__file-preview-modal--fullscreen');
+    });
+    it('should apply compact styling when isCompact is true', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isCompact: true })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-m-compact');
+    });
+    it('should not apply compact styling when isCompact is false', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { isCompact: false })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).not.toHaveClass('pf-m-compact');
+    });
+    it('should apply custom className', () => {
+        const customClass = 'custom-file-preview';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { className: customClass })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClass);
+    });
+    it('should pass through additional props to ChatbotModal', () => {
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { "data-testid": "file-preview-modal" })));
+        const modal = screen.getByTestId('file-preview-modal');
+        expect(modal).toBeInTheDocument();
+    });
+    it('should pass modalHeaderProps to ModalHeader', () => {
+        const modalHeaderProps = {
+            'data-testid': 'custom-header'
+        };
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { modalHeaderProps: modalHeaderProps })));
+        const header = screen.getByTestId('custom-header');
+        expect(header).toBeInTheDocument();
+    });
+    it('should pass modalBodyProps to ModalBody', () => {
+        const modalBodyProps = {
+            'data-testid': 'custom-body'
+        };
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { modalBodyProps: modalBodyProps })));
+        const body = screen.getByTestId('custom-body');
+        expect(body).toBeInTheDocument();
+    });
+    it('should pass ouiaId to ChatbotModal', () => {
+        const ouiaId = 'file-preview-ouia-id';
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { ouiaId: ouiaId })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveAttribute('data-ouia-component-id', ouiaId);
+    });
+    it('should handle complex children', () => {
+        const complexChildren = (_jsxs("div", { children: [_jsx("h3", { children: "File details" }), _jsx("p", { children: "Size: 1.2 MB" }), _jsx(Button, { children: "Download" })] }));
+        render(_jsx(FilePreview, Object.assign({}, defaultProps, { children: complexChildren })));
+        expect(screen.getByRole('heading', { name: /File details/i })).toBeTruthy();
+        expect(screen.getByText('Size: 1.2 MB')).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Download/i })).toBeTruthy();
+    });
+});

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

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

package/dist/esm/FilePreview/index.js

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

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -26,9 +26,9 @@ const CodeBlockMessage = (_a) => {
     const [copied, setCopied] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
-    const tooltipID = useId();
-    const toggleId = useId();
-    const contentId = useId();
+    const tooltipID = getUniqueId();
+    const toggleId = getUniqueId();
+    const contentId = getUniqueId();
     const codeBlockRef = useRef(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // Get custom toggle text from data attributes if available - for use with rehype plugins

package/dist/esm/Message/LinkMessage/LinkMessage.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '@patternfly/react-core';
-declare const LinkMessage: ({ children, target, href, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+import { ExtraProps } from 'react-markdown';
+declare const LinkMessage: ({ children, target, href, id, ...props }: ButtonProps & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default LinkMessage;

package/dist/esm/Message/LinkMessage/LinkMessage.js

@@ -16,10 +16,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const LinkMessage = (_a) => {
-    var { children, target, href } = _a, props = __rest(_a, ["children", "target", "href"]);
+    var { children, target, href, id } = _a, props = __rest(_a, ["children", "target", "href", "id"]);
     if (target === '_blank') {
-        return (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target }, props, { children: children })));
+        return (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target, 
+            // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+            id: id }, props, { children: children })));
     }
-    return (_jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props, { children: children })));
+    return (
+    // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+    _jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { children: children })));
 };
 export default LinkMessage;

package/dist/esm/Message/ListMessage/ListItemMessage.d.ts

@@ -1,3 +1,3 @@
 import { ExtraProps } from 'react-markdown';
-declare const ListItemMessage: ({ children }: JSX.IntrinsicElements["li"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+declare const ListItemMessage: ({ children, ...props }: JSX.IntrinsicElements["li"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default ListItemMessage;

package/dist/esm/Message/ListMessage/ListItemMessage.js

@@ -1,4 +1,19 @@
+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 { ListItem } from '@patternfly/react-core';
-const ListItemMessage = ({ children }) => _jsx(ListItem, { children: children });
+const ListItemMessage = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListItem, Object.assign({}, props, { tabIndex: ((_b = props === null || props === void 0 ? void 0 : props.id) === null || _b === void 0 ? void 0 : _b.includes('fn-')) ? -1 : props === null || props === void 0 ? void 0 : props.tabIndex, children: children })));
+};
 export default ListItemMessage;