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

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.d.ts +2 -0
  2. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +2 -2
  3. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +7 -1
  4. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +4 -4
  5. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +13 -4
  6. package/dist/css/main.css +12 -4
  7. package/dist/css/main.css.map +1 -1
  8. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts +2 -0
  9. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +2 -2
  10. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +7 -1
  11. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +4 -4
  12. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +14 -5
  13. package/package.json +4 -2
  14. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx +12 -2
  15. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +5 -1
  16. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +12 -6
  17. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +34 -5
  18. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +19 -8
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
9
9
  label?: string;
10
10
  /** Callback for when user selects item. */
11
11
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
12
+ /** Id applied to dropdown menu toggle */
13
+ id?: string;
12
14
  }
13
15
  export declare const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps>;
14
16
  export default ChatbotConversationHistoryDropdown;
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js CHANGED
@@ -9,11 +9,11 @@ const react_1 = require("react");
9
9
  // Import PatternFly components
10
10
  const react_core_1 = require("@patternfly/react-core");
11
11
  const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
12
- const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
12
+ const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label, id }) => {
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), 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, 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/ChatbotConversationHistoryNav.d.ts CHANGED
@@ -24,6 +24,8 @@ export interface Conversation {
24
24
  additionalProps?: ButtonProps;
25
25
  /** Additional props passed to conversation list item */
26
26
  listItemProps?: Omit<ListItemProps, 'children'>;
27
+ /** Custom dropdown ID to ensure uniqueness across demo instances */
28
+ dropdownId?: string;
27
29
  }
28
30
  export interface ChatbotConversationHistoryNavProps extends DrawerProps {
29
31
  /** Function called to toggle drawer */
@@ -42,7 +44,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
42
44
  /** Additional button props for new chat button. */
43
45
  newChatButtonProps?: ButtonProps;
44
46
  /** Additional props applied to all conversation list headers */
45
- titleProps?: Partial<TitleProps>;
47
+ listTitleProps?: Partial<TitleProps>;
46
48
  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
47
49
  listProps?: ListProps | {
48
50
  [key: string]: ListProps;
@@ -97,6 +99,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
97
99
  isCompact?: boolean;
98
100
  /** Display title */
99
101
  title?: string;
102
+ /** Icon displayed in title */
103
+ navTitleIcon?: React.ReactNode;
104
+ /** Title header level */
105
+ navTitleProps?: Partial<TitleProps>;
100
106
  }
101
107
  export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
102
108
  export default ChatbotConversationHistoryNav;
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js CHANGED
@@ -25,21 +25,21 @@ 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, titleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', 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' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "titleProps", "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"]);
28
+ var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', 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, {}) } = _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"]);
29
29
  const drawerRef = (0, react_1.useRef)(null);
30
30
  const onExpand = () => {
31
31
  drawerRef.current && drawerRef.current.focus();
32
32
  };
33
33
  const getNavItem = (conversation) => {
34
34
  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 }))] }) }), conversation.id));
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
36
  };
37
37
  const buildConversations = () => {
38
38
  if (Array.isArray(conversations)) {
39
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))) })));
40
40
  }
41
41
  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" }, titleProps, { 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))) }));
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))) }));
43
43
  }
44
44
  };
45
45
  // Menu Content
@@ -59,7 +59,7 @@ const ChatbotConversationHistoryNav = (_a) => {
59
59
  };
60
60
  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
61
  const renderPanelContent = () => {
62
- const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsxs)(react_core_1.Title, { headingLevel: "h3", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedClockIcon, {}) }), title] }), !isLoading && handleTextInputChange && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__input", children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)) }))] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
62
+ const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__heading-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && handleTextInputChange && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__input", children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)) }))] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
63
63
  return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
64
64
  };
65
65
  // An onKeyDown property must be passed to the Drawer component to handle closing
package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js CHANGED
@@ -198,12 +198,12 @@ describe('ChatbotConversationHistoryNav', () => {
198
198
  const iconElement = container.querySelector('.pf-chatbot__title-icon');
199
199
  expect(iconElement).toBeInTheDocument();
200
200
  });
201
- it('Passes titleProps 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 }, titleProps: { className: 'test' } }));
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
203
  expect(react_1.screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
204
204
  });
205
- it('Overrides 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 }, titleProps: { headingLevel: 'h2' } }));
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
207
  expect(react_1.screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
208
208
  expect(react_1.screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
209
209
  });
@@ -223,4 +223,13 @@ describe('ChatbotConversationHistoryNav', () => {
223
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: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));
224
224
  expect(react_1.screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
225
225
  });
226
+ it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
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: { Today: initialConversations }, navTitleProps: { headingLevel: 'h1' } }));
228
+ expect(react_1.screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
229
+ expect(react_1.screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
230
+ });
231
+ it('overrides nav title icon when navTitleIcon is passed in', () => {
232
+ (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, navTitleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, { "data-testid": "bell" }) }));
233
+ expect(react_1.screen.getByTestId('bell')).toBeInTheDocument();
234
+ });
226
235
  });
package/dist/css/main.css CHANGED
@@ -195,16 +195,24 @@
195
195
  position: absolute;
196
196
  border-radius: var(--pf-t--global--border--radius--medium);
197
197
  }
198
- .pf-chatbot__history .pf-chatbot__title-container {
198
+ .pf-chatbot__history .pf-chatbot__heading-container {
199
199
  padding-inline-start: var(--pf-t--global--spacer--lg);
200
200
  padding-inline-end: var(--pf-t--global--spacer--lg);
201
201
  display: flex;
202
202
  flex-direction: column;
203
203
  row-gap: var(--pf-t--global--spacer--sm);
204
204
  }
205
- .pf-chatbot__history .pf-chatbot__title-icon {
206
- padding-inline-end: var(--pf-t--global--spacer--md);
207
- padding-inline-start: var(--pf-t--global--spacer--sm);
205
+ .pf-chatbot__history .pf-chatbot__title {
206
+ font-size: var(--pf-v6-c-title--m-h3--FontSize);
207
+ font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
208
+ line-height: var(--pf-v6-c-title--m-h3--LineHeight);
209
+ }
210
+ .pf-chatbot__history .pf-chatbot__title-container {
211
+ display: flex;
212
+ flex-direction: row;
213
+ align-items: baseline;
214
+ justify-content: flex-start;
215
+ gap: var(--pf-t--global--spacer--gap--text-to-element--default);
208
216
  }
209
217
  .pf-chatbot__history .pf-chatbot__conversation-list {
210
218
  --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
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;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;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;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;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;;;AC9PN;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;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;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;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;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;;;ACpQN;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.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
9
9
  label?: string;
10
10
  /** Callback for when user selects item. */
11
11
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
12
+ /** Id applied to dropdown menu toggle */
13
+ id?: string;
12
14
  }
13
15
  export declare const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps>;
14
16
  export default ChatbotConversationHistoryDropdown;
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js CHANGED
@@ -3,11 +3,11 @@ import { useState } from 'react';
3
3
  // Import PatternFly components
4
4
  import { Tooltip, MenuToggle, Dropdown } from '@patternfly/react-core';
5
5
  import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
6
- export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
6
+ export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label, id }) => {
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), 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, 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/ChatbotConversationHistoryNav.d.ts CHANGED
@@ -24,6 +24,8 @@ export interface Conversation {
24
24
  additionalProps?: ButtonProps;
25
25
  /** Additional props passed to conversation list item */
26
26
  listItemProps?: Omit<ListItemProps, 'children'>;
27
+ /** Custom dropdown ID to ensure uniqueness across demo instances */
28
+ dropdownId?: string;
27
29
  }
28
30
  export interface ChatbotConversationHistoryNavProps extends DrawerProps {
29
31
  /** Function called to toggle drawer */
@@ -42,7 +44,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
42
44
  /** Additional button props for new chat button. */
43
45
  newChatButtonProps?: ButtonProps;
44
46
  /** Additional props applied to all conversation list headers */
45
- titleProps?: Partial<TitleProps>;
47
+ listTitleProps?: Partial<TitleProps>;
46
48
  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
47
49
  listProps?: ListProps | {
48
50
  [key: string]: ListProps;
@@ -97,6 +99,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
97
99
  isCompact?: boolean;
98
100
  /** Display title */
99
101
  title?: string;
102
+ /** Icon displayed in title */
103
+ navTitleIcon?: React.ReactNode;
104
+ /** Title header level */
105
+ navTitleProps?: Partial<TitleProps>;
100
106
  }
101
107
  export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
102
108
  export default ChatbotConversationHistoryNav;
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js CHANGED
@@ -19,21 +19,21 @@ 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, titleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', 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' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "titleProps", "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"]);
22
+ var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', 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, {}) } = _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"]);
23
23
  const drawerRef = useRef(null);
24
24
  const onExpand = () => {
25
25
  drawerRef.current && drawerRef.current.focus();
26
26
  };
27
27
  const getNavItem = (conversation) => {
28
28
  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 }))] }) }), conversation.id));
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
30
  };
31
31
  const buildConversations = () => {
32
32
  if (Array.isArray(conversations)) {
33
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))) })));
34
34
  }
35
35
  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" }, titleProps, { 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))) }));
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))) }));
37
37
  }
38
38
  };
39
39
  // Menu Content
@@ -53,7 +53,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
53
53
  };
54
54
  const renderDrawerContent = () => (_jsx(_Fragment, { children: _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
55
55
  const renderPanelContent = () => {
56
- const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), _jsxs("div", { className: "pf-chatbot__title-container", children: [_jsxs(Title, { headingLevel: "h3", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: _jsx(OutlinedClockIcon, {}) }), title] }), !isLoading && handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)) }))] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
56
+ const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)) }))] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
57
57
  return (_jsx(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
58
58
  };
59
59
  // An onKeyDown property must be passed to the Drawer component to handle closing
package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js CHANGED
@@ -13,7 +13,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
13
13
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
14
14
  import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
15
15
  import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
16
- import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
16
+ import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
17
17
  const ERROR = {
18
18
  bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
19
19
  buttonText: 'Reload',
@@ -193,12 +193,12 @@ describe('ChatbotConversationHistoryNav', () => {
193
193
  const iconElement = container.querySelector('.pf-chatbot__title-icon');
194
194
  expect(iconElement).toBeInTheDocument();
195
195
  });
196
- it('Passes titleProps to Title', () => {
197
- render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, titleProps: { className: 'test' } }));
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
198
  expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
199
199
  });
200
- it('Overrides 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 }, titleProps: { headingLevel: 'h2' } }));
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
202
  expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
203
203
  expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
204
204
  });
@@ -218,4 +218,13 @@ describe('ChatbotConversationHistoryNav', () => {
218
218
  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' } }));
219
219
  expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
220
220
  });
221
+ it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
222
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, navTitleProps: { headingLevel: 'h1' } }));
223
+ expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
224
+ expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
225
+ });
226
+ it('overrides nav title icon when navTitleIcon is passed in', () => {
227
+ render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: _jsx(BellIcon, { "data-testid": "bell" }) }));
228
+ expect(screen.getByTestId('bell')).toBeInTheDocument();
229
+ });
221
230
  });
package/package.json CHANGED
@@ -1,16 +1,18 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.4.0-prerelease.7",
3
+ "version": "6.4.0-prerelease.9",
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",
7
7
  "scripts": {
8
- "build": "sass src/main.scss dist/css/main.css && npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
8
+ "build": "npm run build:css && npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
9
9
  "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch",
10
10
  "build:esm": "tsc --build --verbose ./tsconfig.json",
11
11
  "build:fed:packages": "node generate-fed-package-json.js",
12
12
  "build:js": "tsc -p tsconfig.cjs.json",
13
13
  "build:index": "node generate-index.js",
14
+ "build:css": "sass src/main.scss dist/css/main.css",
15
+ "build:css:watch": "sass src/main.scss dist/css/main.css --watch",
14
16
  "clean": "rimraf dist",
15
17
  "docs:develop": "pf-docs-framework start",
16
18
  "docs:build": "pf-docs-framework build all --output public",
package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx CHANGED
@@ -97,6 +97,14 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
97
97
  }
98
98
  return newPinned;
99
99
  });
100
+
101
+ // Focus the conversation input after pin/unpin action
102
+ setTimeout(() => {
103
+ const dropdown = document.getElementById(`pin-demo-${conversationId}-dropdown`);
104
+ if (dropdown) {
105
+ dropdown.focus();
106
+ }
107
+ }, 100);
100
108
  };
101
109
 
102
110
  const createMenuItems = (conversationId: string) => {
@@ -136,7 +144,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
136
144
  pinnedItems.push({
137
145
  ...conv,
138
146
  menuItems: createMenuItems(conv.id),
139
- icon: <ThumbtackIcon />
147
+ icon: <ThumbtackIcon />,
148
+ dropdownId: `pin-demo-${conv.id}-dropdown`
140
149
  });
141
150
  }
142
151
  });
@@ -153,7 +162,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
153
162
  .filter((conv) => !pinnedConversations.has(conv.id))
154
163
  .map((conv) => ({
155
164
  ...conv,
156
- menuItems: createMenuItems(conv.id)
165
+ menuItems: createMenuItems(conv.id),
166
+ dropdownId: `pin-demo-${conv.id}-dropdown`
157
167
  }));
158
168
 
159
169
  if (unpinnedConversations.length > 0) {
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx CHANGED
@@ -19,13 +19,16 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
19
19
  label?: string;
20
20
  /** Callback for when user selects item. */
21
21
  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
22
+ /** Id applied to dropdown menu toggle */
23
+ id?: string;
22
24
  }
23
25
 
24
26
  export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
25
27
  menuItems,
26
28
  menuClassName,
27
29
  onSelect,
28
- label
30
+ label,
31
+ id
29
32
  }: ChatbotConversationHistoryDropdownProps) => {
30
33
  const [isOpen, setIsOpen] = useState(false);
31
34
 
@@ -44,6 +47,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
44
47
  ref={toggleRef}
45
48
  isExpanded={isOpen}
46
49
  onClick={() => setIsOpen(!isOpen)}
50
+ id={id}
47
51
  >
48
52
  <EllipsisIcon />
49
53
  </MenuToggle>
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss CHANGED
@@ -9,18 +9,24 @@
9
9
 
10
10
  // Drawer title
11
11
  // ----------------------------------------------------------------------------
12
- .pf-chatbot__title-container {
12
+ .pf-chatbot__heading-container {
13
13
  padding-inline-start: var(--pf-t--global--spacer--lg);
14
14
  padding-inline-end: var(--pf-t--global--spacer--lg);
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  row-gap: var(--pf-t--global--spacer--sm);
18
18
  }
19
- // Drawer title icon
20
- // ----------------------------------------------------------------------------
21
- .pf-chatbot__title-icon {
22
- padding-inline-end: var(--pf-t--global--spacer--md);
23
- padding-inline-start: var(--pf-t--global--spacer--sm);
19
+ .pf-chatbot__title {
20
+ font-size: var(--pf-v6-c-title--m-h3--FontSize);
21
+ font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
22
+ line-height: var(--pf-v6-c-title--m-h3--LineHeight);
23
+ }
24
+ .pf-chatbot__title-container {
25
+ display: flex;
26
+ flex-direction: row;
27
+ align-items: baseline;
28
+ justify-content: flex-start;
29
+ gap: var(--pf-t--global--spacer--gap--text-to-element--default);
24
30
  }
25
31
  // Drawer menu
26
32
  // ----------------------------------------------------------------------------
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx CHANGED
@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
4
4
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
5
5
  import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
6
6
  import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
7
- import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
7
+ import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
8
8
  import { ComponentType } from 'react';
9
9
 
10
10
  const ERROR = {
@@ -492,7 +492,7 @@ describe('ChatbotConversationHistoryNav', () => {
492
492
  expect(iconElement).toBeInTheDocument();
493
493
  });
494
494
 
495
- it('Passes titleProps to Title', () => {
495
+ it('Passes listTitleProps to Title', () => {
496
496
  render(
497
497
  <ChatbotConversationHistoryNav
498
498
  onDrawerToggle={onDrawerToggle}
@@ -500,13 +500,13 @@ describe('ChatbotConversationHistoryNav', () => {
500
500
  displayMode={ChatbotDisplayMode.fullscreen}
501
501
  setIsDrawerOpen={jest.fn()}
502
502
  conversations={{ Today: initialConversations }}
503
- titleProps={{ className: 'test' }}
503
+ listTitleProps={{ className: 'test' }}
504
504
  />
505
505
  );
506
506
  expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
507
507
  });
508
508
 
509
- it('Overrides Title heading level when titleProps.headingLevel is passed', () => {
509
+ it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
510
510
  render(
511
511
  <ChatbotConversationHistoryNav
512
512
  onDrawerToggle={onDrawerToggle}
@@ -514,7 +514,7 @@ describe('ChatbotConversationHistoryNav', () => {
514
514
  displayMode={ChatbotDisplayMode.fullscreen}
515
515
  setIsDrawerOpen={jest.fn()}
516
516
  conversations={{ Today: initialConversations }}
517
- titleProps={{ headingLevel: 'h2' }}
517
+ listTitleProps={{ headingLevel: 'h2' }}
518
518
  />
519
519
  );
520
520
  expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
@@ -577,4 +577,33 @@ describe('ChatbotConversationHistoryNav', () => {
577
577
 
578
578
  expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
579
579
  });
580
+
581
+ it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
582
+ render(
583
+ <ChatbotConversationHistoryNav
584
+ onDrawerToggle={onDrawerToggle}
585
+ isDrawerOpen={true}
586
+ displayMode={ChatbotDisplayMode.fullscreen}
587
+ setIsDrawerOpen={jest.fn()}
588
+ conversations={{ Today: initialConversations }}
589
+ navTitleProps={{ headingLevel: 'h1' }}
590
+ />
591
+ );
592
+ expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
593
+ expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
594
+ });
595
+
596
+ it('overrides nav title icon when navTitleIcon is passed in', () => {
597
+ render(
598
+ <ChatbotConversationHistoryNav
599
+ onDrawerToggle={onDrawerToggle}
600
+ isDrawerOpen={true}
601
+ displayMode={ChatbotDisplayMode.fullscreen}
602
+ setIsDrawerOpen={jest.fn()}
603
+ conversations={initialConversations}
604
+ navTitleIcon={<BellIcon data-testid="bell" />}
605
+ />
606
+ );
607
+ expect(screen.getByTestId('bell')).toBeInTheDocument();
608
+ });
580
609
  });
package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx CHANGED
@@ -65,6 +65,8 @@ export interface Conversation {
65
65
  additionalProps?: ButtonProps;
66
66
  /** Additional props passed to conversation list item */
67
67
  listItemProps?: Omit<ListItemProps, 'children'>;
68
+ /** Custom dropdown ID to ensure uniqueness across demo instances */
69
+ dropdownId?: string;
68
70
  }
69
71
  export interface ChatbotConversationHistoryNavProps extends DrawerProps {
70
72
  /** Function called to toggle drawer */
@@ -82,7 +84,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
82
84
  /** Additional button props for new chat button. */
83
85
  newChatButtonProps?: ButtonProps;
84
86
  /** Additional props applied to all conversation list headers */
85
- titleProps?: Partial<TitleProps>;
87
+ listTitleProps?: Partial<TitleProps>;
86
88
  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
87
89
  listProps?: ListProps | { [key: string]: ListProps };
88
90
  /** Text shown in blue button */
@@ -135,6 +137,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
135
137
  isCompact?: boolean;
136
138
  /** Display title */
137
139
  title?: string;
140
+ /** Icon displayed in title */
141
+ navTitleIcon?: React.ReactNode;
142
+ /** Title header level */
143
+ navTitleProps?: Partial<TitleProps>;
138
144
  }
139
145
 
140
146
  export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -144,7 +150,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
144
150
  activeItemId,
145
151
  onSelectActiveItem,
146
152
  conversations,
147
- titleProps,
153
+ listTitleProps,
148
154
  listProps,
149
155
  newChatButtonText = 'New chat',
150
156
  drawerContent,
@@ -171,6 +177,8 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
171
177
  noResultsState,
172
178
  isCompact,
173
179
  title = 'Chat history',
180
+ navTitleProps,
181
+ navTitleIcon = <OutlinedClockIcon />,
174
182
  ...props
175
183
  }: ChatbotConversationHistoryNavProps) => {
176
184
  const drawerRef = useRef<HTMLDivElement>(null);
@@ -202,6 +210,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
202
210
  onSelect={conversation.onSelect}
203
211
  menuItems={conversation.menuItems}
204
212
  label={conversation.label}
213
+ id={conversation.dropdownId}
205
214
  />
206
215
  )}
207
216
  </>
@@ -222,7 +231,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
222
231
  <div>
223
232
  {Object.keys(conversations).map((navGroup) => (
224
233
  <section key={navGroup}>
225
- <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...titleProps}>
234
+ <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
226
235
  {navGroup}
227
236
  </Title>
228
237
  <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
@@ -283,13 +292,15 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
283
292
  )}
284
293
  </DrawerActions>
285
294
  </DrawerHead>
286
- <div className="pf-chatbot__title-container">
287
- <Title headingLevel="h3">
295
+ <div className="pf-chatbot__heading-container">
296
+ <div className="pf-chatbot__title-container">
288
297
  <Icon size="lg" className="pf-chatbot__title-icon">
289
- <OutlinedClockIcon />
298
+ {navTitleIcon}
290
299
  </Icon>
291
- {title}
292
- </Title>
300
+ <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
301
+ {title}
302
+ </Title>
303
+ </div>
293
304
  {!isLoading && handleTextInputChange && (
294
305
  <div className="pf-chatbot__input">
295
306
  <SearchInput