@patternfly/chatbot 6.4.0-prerelease.14 → 6.4.0-prerelease.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +1 -1
  2. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js +6 -6
  3. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +13 -12
  4. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +17 -5
  5. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +24 -20
  6. package/dist/css/main.css +26 -30
  7. package/dist/css/main.css.map +1 -1
  8. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +1 -1
  9. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js +6 -6
  10. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +13 -12
  11. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +18 -6
  12. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +24 -20
  13. package/package.json +1 -1
  14. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx +6 -6
  15. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +1 -0
  16. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +28 -36
  17. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +32 -18
  18. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +74 -60
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js CHANGED
@@ -13,7 +13,7 @@ const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect
13
13
  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
14
14
  const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom",
15
15
  // prevents VO announcements of both aria label and tooltip
16
- aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
16
+ aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
17
17
  return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
18
18
  onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
19
19
  setIsOpen((prev) => !prev);
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js CHANGED
@@ -22,11 +22,11 @@ describe('ChatbotConversationHistoryDropdown', () => {
22
22
  const menuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Rename" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Delete" })] }));
23
23
  it('should render the dropdown', () => {
24
24
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, menuClassName: "custom-class" }));
25
- expect(react_1.screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
25
+ expect(react_1.screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
26
26
  });
27
27
  it('should display the dropdown menuItems', () => {
28
28
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems }));
29
- const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
29
+ const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
30
30
  expect(toggle).toBeInTheDocument();
31
31
  react_1.fireEvent.click(toggle);
32
32
  (0, react_1.waitFor)(() => {
@@ -36,14 +36,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
36
36
  });
37
37
  it('should invoke onSelect callback when menuitem is clicked', () => {
38
38
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
39
- const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
39
+ const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
40
40
  react_1.fireEvent.click(toggle);
41
41
  react_1.fireEvent.click(react_1.screen.getByText('Rename'));
42
42
  expect(onSelect).toHaveBeenCalled();
43
43
  });
44
44
  it('should toggle the dropdown when menuitem is clicked', () => {
45
45
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
46
- const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
46
+ const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
47
47
  react_1.fireEvent.click(toggle);
48
48
  react_1.fireEvent.click(react_1.screen.getByText('Delete'));
49
49
  expect(onSelect).toHaveBeenCalled();
@@ -51,7 +51,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
51
51
  });
52
52
  it('should close the dropdown when user clicks outside', () => {
53
53
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
54
- const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
54
+ const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
55
55
  react_1.fireEvent.click(toggle);
56
56
  expect(react_1.screen.queryByText('Delete')).toBeInTheDocument();
57
57
  react_1.fireEvent.click(toggle.parentElement);
@@ -59,7 +59,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
59
59
  });
60
60
  it('should show the tooltip when the user hovers over the toggle button', () => __awaiter(void 0, void 0, void 0, function* () {
61
61
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, label: "Actions dropdown" }));
62
- const toggle = react_1.screen.queryByRole('button', { name: /Actions dropdown/i });
62
+ const toggle = react_1.screen.queryByRole('menuitem', { name: /Actions dropdown/i });
63
63
  (0, react_1.fireEvent)(toggle, new MouseEvent('mouseenter', {
64
64
  bubbles: false,
65
65
  cancelable: false
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import type { FunctionComponent } from 'react';
2
- import { ButtonProps, DrawerProps, ListItemProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, // Remove in next breaking change
3
- TitleProps, ListProps, SearchInputProps } from '@patternfly/react-core';
2
+ import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, TitleProps, MenuListProps, SearchInputProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
4
3
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
5
4
  import { HistoryEmptyStateProps } from './EmptyState';
6
5
  export interface Conversation {
@@ -20,10 +19,8 @@ export interface Conversation {
20
19
  label?: string;
21
20
  /** Callback for when user selects item. */
22
21
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
23
- /** Additional props passed to conversation button item */
24
- additionalProps?: ButtonProps;
25
- /** Additional props passed to conversation list item */
26
- listItemProps?: Omit<ListItemProps, 'children'>;
22
+ /** Additional props passed to menu item */
23
+ additionalProps?: MenuItemProps;
27
24
  /** Custom dropdown ID to ensure uniqueness across demo instances */
28
25
  dropdownId?: string;
29
26
  }
@@ -43,11 +40,13 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
43
40
  };
44
41
  /** Additional button props for new chat button. */
45
42
  newChatButtonProps?: ButtonProps;
46
- /** Additional props applied to all conversation list headers */
47
- listTitleProps?: Partial<TitleProps>;
48
- /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
49
- listProps?: ListProps | {
50
- [key: string]: ListProps;
43
+ /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
44
+ menuGroupProps?: MenuGroupProps | {
45
+ [key: string]: MenuGroupProps;
46
+ };
47
+ /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
48
+ menuListProps?: Omit<MenuListProps, 'children'> | {
49
+ [key: string]: Omit<MenuListProps, 'children'>;
51
50
  };
52
51
  /** Text shown in blue button */
53
52
  newChatButtonText?: string;
@@ -69,7 +68,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
69
68
  reverseButtonOrder?: boolean;
70
69
  /** Custom test id for the drawer actions */
71
70
  drawerActionsTestId?: string;
72
- /** @deprecated Additional props applied to list container */
71
+ /** Additional props applied to menu */
73
72
  menuProps?: MenuProps;
74
73
  /** Additional props applied to panel */
75
74
  drawerPanelContentProps?: DrawerPanelContentProps;
@@ -105,6 +104,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
105
104
  navTitleProps?: Partial<TitleProps>;
106
105
  /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
107
106
  searchInputScreenReaderText?: string;
107
+ /** Additional props passed to MenuContent */
108
+ menuContentProps?: Omit<MenuContentProps, 'ref'>;
108
109
  }
109
110
  export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
110
111
  export default ChatbotConversationHistoryNav;
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js CHANGED
@@ -25,21 +25,33 @@ const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotC
25
25
  const LoadingState_1 = __importDefault(require("./LoadingState"));
26
26
  const EmptyState_1 = __importDefault(require("./EmptyState"));
27
27
  const ChatbotConversationHistoryNav = (_a) => {
28
- var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, 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 = (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedClockIcon, {}), searchInputScreenReaderText } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "listTitleProps", "listProps", "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"]);
28
+ 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 = (0, jsx_runtime_1.jsx)(react_icons_1.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"]);
29
29
  const drawerRef = (0, react_1.useRef)(null);
30
30
  const onExpand = () => {
31
31
  drawerRef.current && drawerRef.current.focus();
32
32
  };
33
+ const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
33
34
  const getNavItem = (conversation) => {
34
35
  var _a;
35
- return ((0, jsx_runtime_1.jsx)(react_core_1.ListItem, Object.assign({ className: `pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}` }, conversation.listItemProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: "pf-chatbot__conversation-history-item", variant: "link" }, conversation.additionalProps, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCommentAltIcon, {}) }), { onClick: (event) => onSelectActiveItem === null || onSelectActiveItem === void 0 ? void 0 : onSelectActiveItem(event, conversation.id), children: conversation.text })), conversation.menuItems && ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label, id: conversation.dropdownId }))] }) }), conversation.id));
36
+ return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCommentAltIcon, {}) }), (conversation.menuItems
37
+ ? {
38
+ actions: ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
39
+ }
40
+ : {}), conversation.additionalProps, { children: conversation.text })));
36
41
  };
37
42
  const buildConversations = () => {
38
43
  if (Array.isArray(conversations)) {
39
- return ((0, jsx_runtime_1.jsx)(react_core_1.List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps, { children: conversations.map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })));
44
+ return ((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
45
+ if (isConversation(conversation)) {
46
+ return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id);
47
+ }
48
+ else {
49
+ return conversation;
50
+ }
51
+ }) })));
40
52
  }
41
53
  else {
42
- return ((0, jsx_runtime_1.jsx)("div", { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ headingLevel: "h4", className: "pf-chatbot__conversation-list-header" }, listTitleProps, { children: navGroup })), (0, jsx_runtime_1.jsx)(react_core_1.List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps === null || listProps === void 0 ? void 0 : listProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) }))] }, navGroup))) }));
54
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
43
55
  }
44
56
  };
45
57
  // Menu Content
@@ -55,7 +67,7 @@ const ChatbotConversationHistoryNav = (_a) => {
55
67
  if (noResultsState) {
56
68
  return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, noResultsState));
57
69
  }
58
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversations() });
70
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
59
71
  };
60
72
  const renderDrawerContent = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
61
73
  const renderPanelContent = () => {
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js CHANGED
@@ -198,26 +198,30 @@ describe('ChatbotConversationHistoryNav', () => {
198
198
  const iconElement = container.querySelector('.pf-chatbot__title-icon');
199
199
  expect(iconElement).toBeInTheDocument();
200
200
  });
201
- it('Passes listTitleProps to Title', () => {
202
- (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
203
- expect(react_1.screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
204
- });
205
- it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
206
- (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
207
- expect(react_1.screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
208
- expect(react_1.screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
209
- });
210
- it('Passes listProps to List when conversations is an array', () => {
211
- (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
212
- expect(react_1.screen.getByRole('list')).toHaveClass('test');
213
- });
214
- it('Passes listProps to List when conversations is an object', () => {
215
- (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
216
- expect(react_1.screen.getByRole('list')).toHaveClass('test');
217
- });
218
- it('Passes listItemProps to ListItem', () => {
219
- (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
220
- expect(react_1.screen.getByRole('listitem')).toHaveClass('test');
201
+ it('Passes menuProps to Menu', () => {
202
+ var _a;
203
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuProps: { className: 'test' } }));
204
+ expect((_a = react_1.screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
205
+ });
206
+ it('Passes menuContentProps to MenuContent', () => {
207
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuContentProps: { className: 'test' } }));
208
+ expect(react_1.screen.getByRole('menu').parentElement).toHaveClass('test');
209
+ });
210
+ it('Passes menuListProps to MenuList when conversations is an array', () => {
211
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuListProps: { className: 'test' } }));
212
+ expect(react_1.screen.getByRole('menu')).toHaveClass('test');
213
+ });
214
+ it('Passes menuListProps to MenuList when conversations is an object', () => {
215
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuListProps: { Today: { className: 'test' } } }));
216
+ expect(react_1.screen.getByRole('menu')).toHaveClass('test');
217
+ });
218
+ it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
219
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuGroupProps: { Today: { className: 'test' } } }));
220
+ expect(react_1.screen.getByRole('menu').parentElement).toHaveClass('test');
221
+ });
222
+ it('Passes additionalProps to MenuItem', () => {
223
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }] }));
224
+ expect(react_1.screen.getByRole('menuitem')).toHaveClass('test');
221
225
  });
222
226
  it('should be able to spread search input props when searchInputProps is passed', () => {
223
227
  (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));
package/dist/css/main.css CHANGED
@@ -230,51 +230,47 @@
230
230
  justify-content: flex-start;
231
231
  gap: var(--pf-t--global--spacer--gap--text-to-element--default);
232
232
  }
233
- .pf-chatbot__history .pf-chatbot__conversation-list {
234
- --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
235
- margin-block-start: var(--pf-t--global--spacer--md);
236
- margin-block-end: var(--pf-t--global--spacer--md);
233
+ .pf-chatbot__history .pf-v6-c-menu {
234
+ --pf-v6-c-menu--PaddingBlockStart: 0;
235
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
236
+ overflow: initial;
237
+ position: relative;
238
+ }
239
+ .pf-chatbot__history .pf-v6-c-menu__item-main {
240
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
237
241
  }
238
- .pf-chatbot__history .pf-chatbot__conversation-list-header {
242
+ .pf-chatbot__history .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
239
243
  color: var(--pf-t--global--text--color--subtle);
240
244
  font-weight: var(--pf-t--global--font--weight--body--bold);
241
245
  font-size: var(--pf-t--global--icon--size--font--sm);
242
- padding-inline-start: var(--pf-t--global--spacer--sm);
243
- padding-inline-end: var(--pf-t--global--spacer--sm);
246
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
247
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
244
248
  position: -webkit-sticky;
245
249
  position: sticky;
246
250
  top: 0;
247
251
  background-color: var(--pf-t--global--background--color--floating--default);
248
252
  z-index: var(--pf-t--global--z-index--md);
249
253
  }
250
- .pf-chatbot__history .pf-chatbot__conversation-list-item > span {
251
- display: flex;
252
- column-gap: var(--pf-t--global--spacer--sm);
253
- }
254
- .pf-chatbot__history .pf-chatbot__conversation-list-item .pf-chatbot__conversation-history-item {
255
- --pf-v6-c-button--JustifyContent: flex-start;
256
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
257
- --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
258
- --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
259
- --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
260
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
261
- --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
262
- --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
263
- column-gap: var(--pf-t--global--spacer--md);
264
- flex-basis: 100%;
265
- }
266
- .pf-chatbot__history .pf-chatbot__conversation-list-item .pf-chatbot__conversation-history-item .pf-v6-c-button__text {
254
+ .pf-chatbot__history .pf-chatbot__menu-item {
255
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
256
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
257
+ padding-block-start: var(--pf-t--global--spacer--xs);
258
+ padding-block-end: var(--pf-t--global--spacer--xs);
259
+ color: var(--pf-t--global--text--color--regular);
260
+ font-size: var(--pf-t--global--font--size--body--lg);
261
+ font-weight: var(--pf-t--global--font--weight--body--default);
262
+ border-radius: var(--pf-t--global--border--radius--small);
263
+ }
264
+ .pf-chatbot__history .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
267
265
  overflow: hidden;
268
- text-overflow: ellipsis;
269
- white-space: nowrap;
270
266
  }
271
267
  .pf-chatbot__history .pf-chatbot__history-actions {
272
268
  transform: rotate(90deg);
273
269
  }
274
- .pf-chatbot__history .pf-chatbot__conversation-list-item--active {
270
+ .pf-chatbot__history .pf-chatbot__menu-item--active {
275
271
  background-color: var(--pf-t--global--background--color--action--plain--clicked);
276
272
  }
277
- .pf-chatbot__history button.pf-chatbot__conversation-list-item--active {
273
+ .pf-chatbot__history button.pf-chatbot__menu-item--active {
278
274
  background-color: initial;
279
275
  }
280
276
 
@@ -391,8 +387,8 @@
391
387
  --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
392
388
  --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
393
389
  }
394
- .pf-chatbot__history.pf-m-compact .pf-chatbot__conversation-history-item {
395
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
390
+ .pf-chatbot__history.pf-m-compact .pf-chatbot__menu-item {
391
+ font-size: var(--pf-t--global--font--size--body--md);
396
392
  }
397
393
  .pf-chatbot__history.pf-m-compact .pf-v6-c-drawer__head {
398
394
  --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
package/dist/css/main.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EAEA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAKN;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AChRN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AC3DF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;AChFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AC/CJ;EACE;EACA","file":"main.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxQN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AC3DF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;AChFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AC/CJ;EACE;EACA","file":"main.css"}
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js CHANGED
@@ -7,7 +7,7 @@ export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, o
7
7
  const [isOpen, setIsOpen] = useState(false);
8
8
  const toggle = (toggleRef) => (_jsx(Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom",
9
9
  // prevents VO announcements of both aria label and tooltip
10
- aria: "none", children: _jsx(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, children: _jsx(EllipsisIcon, {}) }) }));
10
+ aria: "none", children: _jsx(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: _jsx(EllipsisIcon, {}) }) }));
11
11
  return (_jsx(Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
12
12
  onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
13
13
  setIsOpen((prev) => !prev);
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js CHANGED
@@ -17,11 +17,11 @@ describe('ChatbotConversationHistoryDropdown', () => {
17
17
  const menuItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "Rename" }), _jsx(DropdownItem, { children: "Delete" })] }));
18
18
  it('should render the dropdown', () => {
19
19
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
20
- expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
20
+ expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
21
21
  });
22
22
  it('should display the dropdown menuItems', () => {
23
23
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
24
- const toggle = screen.queryByRole('button', { name: /Conversation options/i });
24
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
25
25
  expect(toggle).toBeInTheDocument();
26
26
  fireEvent.click(toggle);
27
27
  waitFor(() => {
@@ -31,14 +31,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
31
31
  });
32
32
  it('should invoke onSelect callback when menuitem is clicked', () => {
33
33
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
34
- const toggle = screen.queryByRole('button', { name: /Conversation options/i });
34
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
35
35
  fireEvent.click(toggle);
36
36
  fireEvent.click(screen.getByText('Rename'));
37
37
  expect(onSelect).toHaveBeenCalled();
38
38
  });
39
39
  it('should toggle the dropdown when menuitem is clicked', () => {
40
40
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
41
- const toggle = screen.queryByRole('button', { name: /Conversation options/i });
41
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
42
42
  fireEvent.click(toggle);
43
43
  fireEvent.click(screen.getByText('Delete'));
44
44
  expect(onSelect).toHaveBeenCalled();
@@ -46,7 +46,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
46
46
  });
47
47
  it('should close the dropdown when user clicks outside', () => {
48
48
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
49
- const toggle = screen.queryByRole('button', { name: /Conversation options/i });
49
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
50
50
  fireEvent.click(toggle);
51
51
  expect(screen.queryByText('Delete')).toBeInTheDocument();
52
52
  fireEvent.click(toggle.parentElement);
@@ -54,7 +54,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
54
54
  });
55
55
  it('should show the tooltip when the user hovers over the toggle button', () => __awaiter(void 0, void 0, void 0, function* () {
56
56
  render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
57
- const toggle = screen.queryByRole('button', { name: /Actions dropdown/i });
57
+ const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i });
58
58
  fireEvent(toggle, new MouseEvent('mouseenter', {
59
59
  bubbles: false,
60
60
  cancelable: false
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import type { FunctionComponent } from 'react';
2
- import { ButtonProps, DrawerProps, ListItemProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, // Remove in next breaking change
3
- TitleProps, ListProps, SearchInputProps } from '@patternfly/react-core';
2
+ import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, TitleProps, MenuListProps, SearchInputProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
4
3
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
5
4
  import { HistoryEmptyStateProps } from './EmptyState';
6
5
  export interface Conversation {
@@ -20,10 +19,8 @@ export interface Conversation {
20
19
  label?: string;
21
20
  /** Callback for when user selects item. */
22
21
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
23
- /** Additional props passed to conversation button item */
24
- additionalProps?: ButtonProps;
25
- /** Additional props passed to conversation list item */
26
- listItemProps?: Omit<ListItemProps, 'children'>;
22
+ /** Additional props passed to menu item */
23
+ additionalProps?: MenuItemProps;
27
24
  /** Custom dropdown ID to ensure uniqueness across demo instances */
28
25
  dropdownId?: string;
29
26
  }
@@ -43,11 +40,13 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
43
40
  };
44
41
  /** Additional button props for new chat button. */
45
42
  newChatButtonProps?: ButtonProps;
46
- /** Additional props applied to all conversation list headers */
47
- listTitleProps?: Partial<TitleProps>;
48
- /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
49
- listProps?: ListProps | {
50
- [key: string]: ListProps;
43
+ /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
44
+ menuGroupProps?: MenuGroupProps | {
45
+ [key: string]: MenuGroupProps;
46
+ };
47
+ /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
48
+ menuListProps?: Omit<MenuListProps, 'children'> | {
49
+ [key: string]: Omit<MenuListProps, 'children'>;
51
50
  };
52
51
  /** Text shown in blue button */
53
52
  newChatButtonText?: string;
@@ -69,7 +68,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
69
68
  reverseButtonOrder?: boolean;
70
69
  /** Custom test id for the drawer actions */
71
70
  drawerActionsTestId?: string;
72
- /** @deprecated Additional props applied to list container */
71
+ /** Additional props applied to menu */
73
72
  menuProps?: MenuProps;
74
73
  /** Additional props applied to panel */
75
74
  drawerPanelContentProps?: DrawerPanelContentProps;
@@ -105,6 +104,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
105
104
  navTitleProps?: Partial<TitleProps>;
106
105
  /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
107
106
  searchInputScreenReaderText?: string;
107
+ /** Additional props passed to MenuContent */
108
+ menuContentProps?: Omit<MenuContentProps, 'ref'>;
108
109
  }
109
110
  export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
110
111
  export default ChatbotConversationHistoryNav;
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js CHANGED
@@ -12,28 +12,40 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import { useRef, Fragment } from 'react';
14
14
  // Import PatternFly components
15
- import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, List, ListItem, Title, Icon } from '@patternfly/react-core';
15
+ import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent } from '@patternfly/react-core';
16
16
  import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
17
17
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
18
18
  import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
19
19
  import LoadingState from './LoadingState';
20
20
  import HistoryEmptyState from './EmptyState';
21
21
  export const ChatbotConversationHistoryNav = (_a) => {
22
- var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, 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 } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "listTitleProps", "listProps", "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"]);
22
+ 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"]);
23
23
  const drawerRef = useRef(null);
24
24
  const onExpand = () => {
25
25
  drawerRef.current && drawerRef.current.focus();
26
26
  };
27
+ const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
27
28
  const getNavItem = (conversation) => {
28
29
  var _a;
29
- return (_jsx(ListItem, Object.assign({ className: `pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}` }, conversation.listItemProps, { children: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: "pf-chatbot__conversation-history-item", variant: "link" }, conversation.additionalProps, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(OutlinedCommentAltIcon, {}) }), { onClick: (event) => onSelectActiveItem === null || onSelectActiveItem === void 0 ? void 0 : onSelectActiveItem(event, conversation.id), children: conversation.text })), conversation.menuItems && (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label, id: conversation.dropdownId }))] }) }), conversation.id));
30
+ 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
31
+ ? {
32
+ actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
33
+ }
34
+ : {}), conversation.additionalProps, { children: conversation.text })));
30
35
  };
31
36
  const buildConversations = () => {
32
37
  if (Array.isArray(conversations)) {
33
- return (_jsx(List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps, { children: conversations.map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) })));
38
+ return (_jsx(MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
39
+ if (isConversation(conversation)) {
40
+ return _jsx(Fragment, { children: getNavItem(conversation) }, conversation.id);
41
+ }
42
+ else {
43
+ return conversation;
44
+ }
45
+ }) })));
34
46
  }
35
47
  else {
36
- return (_jsx("div", { children: Object.keys(conversations).map((navGroup) => (_jsxs("section", { children: [_jsx(Title, Object.assign({ headingLevel: "h4", className: "pf-chatbot__conversation-list-header" }, listTitleProps, { children: navGroup })), _jsx(List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps === null || listProps === void 0 ? void 0 : listProps[navGroup], { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }))] }, navGroup))) }));
48
+ 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))) }));
37
49
  }
38
50
  };
39
51
  // Menu Content
@@ -49,7 +61,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
49
61
  if (noResultsState) {
50
62
  return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
51
63
  }
52
- return _jsx(_Fragment, { children: buildConversations() });
64
+ return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
53
65
  };
54
66
  const renderDrawerContent = () => (_jsx(_Fragment, { children: _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
55
67
  const renderPanelContent = () => {
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js CHANGED
@@ -193,26 +193,30 @@ describe('ChatbotConversationHistoryNav', () => {
193
193
  const iconElement = container.querySelector('.pf-chatbot__title-icon');
194
194
  expect(iconElement).toBeInTheDocument();
195
195
  });
196
- it('Passes listTitleProps to Title', () => {
197
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
198
- expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
199
- });
200
- it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
201
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
202
- expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
203
- expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
204
- });
205
- it('Passes listProps to List when conversations is an array', () => {
206
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
207
- expect(screen.getByRole('list')).toHaveClass('test');
208
- });
209
- it('Passes listProps to List when conversations is an object', () => {
210
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
211
- expect(screen.getByRole('list')).toHaveClass('test');
212
- });
213
- it('Passes listItemProps to ListItem', () => {
214
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
215
- expect(screen.getByRole('listitem')).toHaveClass('test');
196
+ it('Passes menuProps to Menu', () => {
197
+ var _a;
198
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuProps: { className: 'test' } }));
199
+ expect((_a = screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
200
+ });
201
+ it('Passes menuContentProps to MenuContent', () => {
202
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuContentProps: { className: 'test' } }));
203
+ expect(screen.getByRole('menu').parentElement).toHaveClass('test');
204
+ });
205
+ it('Passes menuListProps to MenuList when conversations is an array', () => {
206
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuListProps: { className: 'test' } }));
207
+ expect(screen.getByRole('menu')).toHaveClass('test');
208
+ });
209
+ it('Passes menuListProps to MenuList when conversations is an object', () => {
210
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuListProps: { Today: { className: 'test' } } }));
211
+ expect(screen.getByRole('menu')).toHaveClass('test');
212
+ });
213
+ it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
214
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuGroupProps: { Today: { className: 'test' } } }));
215
+ expect(screen.getByRole('menu').parentElement).toHaveClass('test');
216
+ });
217
+ it('Passes additionalProps to MenuItem', () => {
218
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }] }));
219
+ expect(screen.getByRole('menuitem')).toHaveClass('test');
216
220
  });
217
221
  it('should be able to spread search input props when searchInputProps is passed', () => {
218
222
  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' } }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.4.0-prerelease.14",
3
+ "version": "6.4.0-prerelease.15",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx CHANGED
@@ -14,13 +14,13 @@ describe('ChatbotConversationHistoryDropdown', () => {
14
14
 
15
15
  it('should render the dropdown', () => {
16
16
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} menuClassName="custom-class" />);
17
- expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
17
+ expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
18
18
  });
19
19
 
20
20
  it('should display the dropdown menuItems', () => {
21
21
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} />);
22
22
 
23
- const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
23
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
24
24
 
25
25
  expect(toggle).toBeInTheDocument();
26
26
  fireEvent.click(toggle);
@@ -33,7 +33,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
33
33
 
34
34
  it('should invoke onSelect callback when menuitem is clicked', () => {
35
35
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
36
- const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
36
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
37
37
  fireEvent.click(toggle);
38
38
  fireEvent.click(screen.getByText('Rename'));
39
39
 
@@ -42,7 +42,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
42
42
 
43
43
  it('should toggle the dropdown when menuitem is clicked', () => {
44
44
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
45
- const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
45
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
46
46
  fireEvent.click(toggle);
47
47
  fireEvent.click(screen.getByText('Delete'));
48
48
 
@@ -53,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
53
53
 
54
54
  it('should close the dropdown when user clicks outside', () => {
55
55
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
56
- const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
56
+ const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
57
57
  fireEvent.click(toggle);
58
58
 
59
59
  expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -64,7 +64,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
64
64
 
65
65
  it('should show the tooltip when the user hovers over the toggle button', async () => {
66
66
  render(<ChatbotConversationHistoryDropdown menuItems={menuItems} label="Actions dropdown" />);
67
- const toggle = screen.queryByRole('button', { name: /Actions dropdown/i })!;
67
+ const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i })!;
68
68
 
69
69
  fireEvent(
70
70
  toggle,
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx CHANGED
@@ -48,6 +48,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
48
48
  isExpanded={isOpen}
49
49
  onClick={() => setIsOpen(!isOpen)}
50
50
  id={id}
51
+ role="menuitem"
51
52
  >
52
53
  <EllipsisIcon />
53
54
  </MenuToggle>
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss CHANGED
@@ -42,61 +42,53 @@
42
42
  }
43
43
  // Drawer menu
44
44
  // ----------------------------------------------------------------------------
45
- .pf-chatbot__conversation-list {
46
- --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
47
-
48
- margin-block-start: var(--pf-t--global--spacer--md);
49
- margin-block-end: var(--pf-t--global--spacer--md);
45
+ .pf-v6-c-menu {
46
+ --pf-v6-c-menu--PaddingBlockStart: 0;
47
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
48
+ overflow: initial;
49
+ position: relative;
50
+ }
51
+ .pf-v6-c-menu__item-main {
52
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
50
53
  }
51
54
 
52
- .pf-chatbot__conversation-list-header {
55
+ .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
53
56
  color: var(--pf-t--global--text--color--subtle);
54
57
  font-weight: var(--pf-t--global--font--weight--body--bold);
55
58
  font-size: var(--pf-t--global--icon--size--font--sm);
56
- padding-inline-start: var(--pf-t--global--spacer--sm);
57
- padding-inline-end: var(--pf-t--global--spacer--sm);
59
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
60
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
58
61
  position: -webkit-sticky;
59
62
  position: sticky;
60
63
  top: 0;
61
64
  background-color: var(--pf-t--global--background--color--floating--default);
62
65
  z-index: var(--pf-t--global--z-index--md);
63
66
  }
64
- .pf-chatbot__conversation-list-item {
65
- & > span {
66
- display: flex;
67
- column-gap: var(--pf-t--global--spacer--sm);
68
- }
69
-
70
- & .pf-chatbot__conversation-history-item {
71
- --pf-v6-c-button--JustifyContent: flex-start;
72
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
73
- --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
74
- --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
75
- --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
76
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
77
- --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
78
- --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
79
67
 
80
- column-gap: var(--pf-t--global--spacer--md);
81
- flex-basis: 100%;
82
-
83
- & .pf-v6-c-button__text {
84
- overflow: hidden;
85
- text-overflow: ellipsis;
86
- white-space: nowrap;
87
- }
88
- }
68
+ .pf-chatbot__menu-item {
69
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
70
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
71
+ padding-block-start: var(--pf-t--global--spacer--xs);
72
+ padding-block-end: var(--pf-t--global--spacer--xs);
73
+ color: var(--pf-t--global--text--color--regular);
74
+ font-size: var(--pf-t--global--font--size--body--lg);
75
+ font-weight: var(--pf-t--global--font--weight--body--default);
76
+ border-radius: var(--pf-t--global--border--radius--small);
77
+ }
78
+ // allows focus state to have border radius
79
+ .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
80
+ overflow: hidden;
89
81
  }
90
82
 
91
83
  .pf-chatbot__history-actions {
92
84
  transform: rotate(90deg);
93
85
  }
94
86
 
95
- .pf-chatbot__conversation-list-item--active {
87
+ .pf-chatbot__menu-item--active {
96
88
  background-color: var(--pf-t--global--background--color--action--plain--clicked);
97
89
  }
98
90
 
99
- button.pf-chatbot__conversation-list-item--active {
91
+ button.pf-chatbot__menu-item--active {
100
92
  background-color: initial;
101
93
  }
102
94
  }
@@ -259,8 +251,8 @@
259
251
  }
260
252
  }
261
253
 
262
- .pf-chatbot__conversation-history-item {
263
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
254
+ .pf-chatbot__menu-item {
255
+ font-size: var(--pf-t--global--font--size--body--md);
264
256
  }
265
257
 
266
258
  .pf-v6-c-drawer__head {
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx CHANGED
@@ -492,36 +492,36 @@ describe('ChatbotConversationHistoryNav', () => {
492
492
  expect(iconElement).toBeInTheDocument();
493
493
  });
494
494
 
495
- it('Passes listTitleProps to Title', () => {
495
+ it('Passes menuProps to Menu', () => {
496
496
  render(
497
497
  <ChatbotConversationHistoryNav
498
498
  onDrawerToggle={onDrawerToggle}
499
499
  isDrawerOpen={true}
500
500
  displayMode={ChatbotDisplayMode.fullscreen}
501
501
  setIsDrawerOpen={jest.fn()}
502
- conversations={{ Today: initialConversations }}
503
- listTitleProps={{ className: 'test' }}
502
+ conversations={initialConversations}
503
+ menuProps={{ className: 'test' }}
504
504
  />
505
505
  );
506
- expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
506
+
507
+ expect(screen.getByRole('menu').parentElement?.parentElement).toHaveClass('test');
507
508
  });
508
509
 
509
- it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
510
+ it('Passes menuContentProps to MenuContent', () => {
510
511
  render(
511
512
  <ChatbotConversationHistoryNav
512
513
  onDrawerToggle={onDrawerToggle}
513
514
  isDrawerOpen={true}
514
515
  displayMode={ChatbotDisplayMode.fullscreen}
515
516
  setIsDrawerOpen={jest.fn()}
516
- conversations={{ Today: initialConversations }}
517
- listTitleProps={{ headingLevel: 'h2' }}
517
+ conversations={initialConversations}
518
+ menuContentProps={{ className: 'test' }}
518
519
  />
519
520
  );
520
- expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
521
- expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
521
+ expect(screen.getByRole('menu').parentElement).toHaveClass('test');
522
522
  });
523
523
 
524
- it('Passes listProps to List when conversations is an array', () => {
524
+ it('Passes menuListProps to MenuList when conversations is an array', () => {
525
525
  render(
526
526
  <ChatbotConversationHistoryNav
527
527
  onDrawerToggle={onDrawerToggle}
@@ -529,13 +529,27 @@ describe('ChatbotConversationHistoryNav', () => {
529
529
  displayMode={ChatbotDisplayMode.fullscreen}
530
530
  setIsDrawerOpen={jest.fn()}
531
531
  conversations={initialConversations}
532
- listProps={{ className: 'test' }}
532
+ menuListProps={{ className: 'test' }}
533
+ />
534
+ );
535
+ expect(screen.getByRole('menu')).toHaveClass('test');
536
+ });
537
+
538
+ it('Passes menuListProps to MenuList when conversations is an object', () => {
539
+ render(
540
+ <ChatbotConversationHistoryNav
541
+ onDrawerToggle={onDrawerToggle}
542
+ isDrawerOpen={true}
543
+ displayMode={ChatbotDisplayMode.fullscreen}
544
+ setIsDrawerOpen={jest.fn()}
545
+ conversations={{ Today: initialConversations }}
546
+ menuListProps={{ Today: { className: 'test' } }}
533
547
  />
534
548
  );
535
- expect(screen.getByRole('list')).toHaveClass('test');
549
+ expect(screen.getByRole('menu')).toHaveClass('test');
536
550
  });
537
551
 
538
- it('Passes listProps to List when conversations is an object', () => {
552
+ it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
539
553
  render(
540
554
  <ChatbotConversationHistoryNav
541
555
  onDrawerToggle={onDrawerToggle}
@@ -543,23 +557,23 @@ describe('ChatbotConversationHistoryNav', () => {
543
557
  displayMode={ChatbotDisplayMode.fullscreen}
544
558
  setIsDrawerOpen={jest.fn()}
545
559
  conversations={{ Today: initialConversations }}
546
- listProps={{ Today: { className: 'test' } }}
560
+ menuGroupProps={{ Today: { className: 'test' } }}
547
561
  />
548
562
  );
549
- expect(screen.getByRole('list')).toHaveClass('test');
563
+ expect(screen.getByRole('menu').parentElement).toHaveClass('test');
550
564
  });
551
565
 
552
- it('Passes listItemProps to ListItem', () => {
566
+ it('Passes additionalProps to MenuItem', () => {
553
567
  render(
554
568
  <ChatbotConversationHistoryNav
555
569
  onDrawerToggle={onDrawerToggle}
556
570
  isDrawerOpen={true}
557
571
  displayMode={ChatbotDisplayMode.fullscreen}
558
572
  setIsDrawerOpen={jest.fn()}
559
- conversations={[{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }]}
573
+ conversations={[{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }]}
560
574
  />
561
575
  );
562
- expect(screen.getByRole('listitem')).toHaveClass('test');
576
+ expect(screen.getByRole('menuitem')).toHaveClass('test');
563
577
  });
564
578
 
565
579
  it('should be able to spread search input props when searchInputProps is passed', () => {
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx CHANGED
@@ -2,7 +2,6 @@
2
2
  // Chatbot Header - Chatbot Conversation History Nav
3
3
  // ============================================================================
4
4
  import type { KeyboardEvent, FunctionComponent } from 'react';
5
-
6
5
  import { useRef, Fragment } from 'react';
7
6
 
8
7
  // Import PatternFly components
@@ -19,9 +18,6 @@ import {
19
18
  DrawerCloseButton,
20
19
  DrawerContentBody,
21
20
  SearchInput,
22
- List,
23
- ListItem,
24
- ListItemProps,
25
21
  Title,
26
22
  DrawerPanelContentProps,
27
23
  DrawerContentProps,
@@ -32,10 +28,18 @@ import {
32
28
  DrawerPanelBodyProps,
33
29
  SkeletonProps,
34
30
  Icon,
35
- MenuProps, // Remove in next breaking change
31
+ MenuProps,
36
32
  TitleProps,
37
- ListProps,
38
- SearchInputProps
33
+ MenuListProps,
34
+ SearchInputProps,
35
+ MenuList,
36
+ MenuGroup,
37
+ MenuItem,
38
+ Menu,
39
+ MenuContent,
40
+ MenuItemProps,
41
+ MenuGroupProps,
42
+ MenuContentProps
39
43
  } from '@patternfly/react-core';
40
44
 
41
45
  import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
@@ -61,10 +65,8 @@ export interface Conversation {
61
65
  label?: string;
62
66
  /** Callback for when user selects item. */
63
67
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
64
- /** Additional props passed to conversation button item */
65
- additionalProps?: ButtonProps;
66
- /** Additional props passed to conversation list item */
67
- listItemProps?: Omit<ListItemProps, 'children'>;
68
+ /** Additional props passed to menu item */
69
+ additionalProps?: MenuItemProps;
68
70
  /** Custom dropdown ID to ensure uniqueness across demo instances */
69
71
  dropdownId?: string;
70
72
  }
@@ -83,10 +85,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
83
85
  conversations: Conversation[] | { [key: string]: Conversation[] };
84
86
  /** Additional button props for new chat button. */
85
87
  newChatButtonProps?: ButtonProps;
86
- /** Additional props applied to all conversation list headers */
87
- listTitleProps?: Partial<TitleProps>;
88
- /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
89
- listProps?: ListProps | { [key: string]: ListProps };
88
+ /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
89
+ menuGroupProps?: MenuGroupProps | { [key: string]: MenuGroupProps };
90
+ /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
91
+ menuListProps?: Omit<MenuListProps, 'children'> | { [key: string]: Omit<MenuListProps, 'children'> };
90
92
  /** Text shown in blue button */
91
93
  newChatButtonText?: string;
92
94
  /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -107,7 +109,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
107
109
  reverseButtonOrder?: boolean;
108
110
  /** Custom test id for the drawer actions */
109
111
  drawerActionsTestId?: string;
110
- /** @deprecated Additional props applied to list container */
112
+ /** Additional props applied to menu */
111
113
  menuProps?: MenuProps;
112
114
  /** Additional props applied to panel */
113
115
  drawerPanelContentProps?: DrawerPanelContentProps;
@@ -143,6 +145,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
143
145
  navTitleProps?: Partial<TitleProps>;
144
146
  /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
145
147
  searchInputScreenReaderText?: string;
148
+ /** Additional props passed to MenuContent */
149
+ menuContentProps?: Omit<MenuContentProps, 'ref'>;
146
150
  }
147
151
 
148
152
  export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -152,8 +156,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
152
156
  activeItemId,
153
157
  onSelectActiveItem,
154
158
  conversations,
155
- listTitleProps,
156
- listProps,
159
+ menuListProps,
157
160
  newChatButtonText = 'New chat',
158
161
  drawerContent,
159
162
  onNewChat,
@@ -182,6 +185,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
182
185
  navTitleProps,
183
186
  navTitleIcon = <OutlinedClockIcon />,
184
187
  searchInputScreenReaderText,
188
+ menuProps,
189
+ menuGroupProps,
190
+ menuContentProps,
185
191
  ...props
186
192
  }: ChatbotConversationHistoryNavProps) => {
187
193
  const drawerRef = useRef<HTMLDivElement>(null);
@@ -190,61 +196,65 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
190
196
  drawerRef.current && drawerRef.current.focus();
191
197
  };
192
198
 
199
+ const isConversation = (item: any): item is Conversation =>
200
+ item && typeof item === 'object' && 'id' in item && 'text' in item;
201
+
193
202
  const getNavItem = (conversation: Conversation) => (
194
- <ListItem
195
- className={`pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}`}
196
- key={conversation.id}
197
- {...conversation.listItemProps}
198
- /* eslint-enable indent */
203
+ <MenuItem
204
+ className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
205
+ itemId={conversation.id}
206
+ {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
207
+ /* eslint-disable indent */
208
+ {...(conversation.menuItems
209
+ ? {
210
+ actions: (
211
+ <ConversationHistoryDropdown
212
+ menuClassName={conversation.menuClassName}
213
+ onSelect={conversation.onSelect}
214
+ menuItems={conversation.menuItems}
215
+ label={conversation.label}
216
+ />
217
+ )
218
+ }
219
+ : {})}
220
+ {...conversation.additionalProps}
199
221
  >
200
- <>
201
- <Button
202
- className="pf-chatbot__conversation-history-item"
203
- variant="link"
204
- {...conversation.additionalProps}
205
- {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
206
- onClick={(event) => onSelectActiveItem?.(event, conversation.id)}
207
- >
208
- {conversation.text}
209
- </Button>
210
- {conversation.menuItems && (
211
- <ConversationHistoryDropdown
212
- menuClassName={conversation.menuClassName}
213
- onSelect={conversation.onSelect}
214
- menuItems={conversation.menuItems}
215
- label={conversation.label}
216
- id={conversation.dropdownId}
217
- />
218
- )}
219
- </>
220
- </ListItem>
222
+ {conversation.text}
223
+ </MenuItem>
221
224
  );
222
225
 
223
226
  const buildConversations = () => {
224
227
  if (Array.isArray(conversations)) {
225
228
  return (
226
- <List className="pf-chatbot__conversation-list" isPlain {...listProps}>
227
- {conversations.map((conversation) => (
228
- <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
229
- ))}
230
- </List>
229
+ <MenuList {...menuListProps}>
230
+ {conversations.map((conversation) => {
231
+ if (isConversation(conversation)) {
232
+ return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
233
+ } else {
234
+ return conversation;
235
+ }
236
+ })}
237
+ </MenuList>
231
238
  );
232
239
  } else {
233
240
  return (
234
- <div>
241
+ <>
235
242
  {Object.keys(conversations).map((navGroup) => (
236
- <section key={navGroup}>
237
- <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
238
- {navGroup}
239
- </Title>
240
- <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
241
- {conversations[navGroup].map((conversation) => (
243
+ <MenuGroup
244
+ className="pf-chatbot__menu-item-header"
245
+ label={navGroup}
246
+ key={navGroup}
247
+ labelHeadingLevel="h3"
248
+ {...menuGroupProps?.[navGroup]}
249
+ >
250
+ <MenuList {...menuListProps?.[navGroup]}>
251
+ {conversations[navGroup].map((conversation: Conversation) => (
242
252
  <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
243
253
  ))}
244
- </List>
245
- </section>
254
+ </MenuList>
255
+ </MenuGroup>
246
256
  ))}
247
- </div>
257
+ </>
248
258
  );
249
259
  }
250
260
  };
@@ -264,7 +274,11 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
264
274
  if (noResultsState) {
265
275
  return <HistoryEmptyState {...noResultsState} />;
266
276
  }
267
- return <>{buildConversations()}</>;
277
+ return (
278
+ <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
279
+ <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
280
+ </Menu>
281
+ );
268
282
  };
269
283
 
270
284
  const renderDrawerContent = () => (