Skip to content

feat(ConversationHistoryNav): Allow support for favorites, tooltips, etc. #653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 2 commits into from
Aug 25, 2025
Merged

feat(ConversationHistoryNav): Allow support for favorites, tooltips, etc. #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
398a4af
fix(ConversationHistoryNav): Allow support for favorites, tooltips, etc.
rebeccaalpert Aug 12, 2025
77704d7
Address feedback
rebeccaalpert Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions ...ages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@

it('should render the dropdown', () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} menuClassName="custom-class" />);
expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
});

it('should display the dropdown menuItems', () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} />);

const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;

Check warning on line 23 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion

expect(toggle).toBeInTheDocument();
fireEvent.click(toggle);
Expand All @@ -33,7 +33,7 @@

it('should invoke onSelect callback when menuitem is clicked', () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;

Check warning on line 36 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion
fireEvent.click(toggle);
fireEvent.click(screen.getByText('Rename'));

Expand All @@ -42,7 +42,7 @@

it('should toggle the dropdown when menuitem is clicked', () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;

Check warning on line 45 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion
fireEvent.click(toggle);
fireEvent.click(screen.getByText('Delete'));

Expand All @@ -53,18 +53,18 @@

it('should close the dropdown when user clicks outside', () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;

Check warning on line 56 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion
fireEvent.click(toggle);

expect(screen.queryByText('Delete')).toBeInTheDocument();
fireEvent.click(toggle.parentElement!);

Check warning on line 60 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion

expect(screen.queryByText('Delete')).not.toBeInTheDocument();
});

it('should show the tooltip when the user hovers over the toggle button', async () => {
render(<ChatbotConversationHistoryDropdown menuItems={menuItems} label="Actions dropdown" />);
const toggle = screen.queryByRole('button', { name: /Actions dropdown/i })!;
const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i })!;

Check warning on line 67 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Forbidden non-null assertion

fireEvent(
toggle,
Expand Down
1 change: 1 addition & 0 deletions packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
isExpanded={isOpen}
onClick={() => setIsOpen(!isOpen)}
id={id}
role="menuitem"
>
<EllipsisIcon />
</MenuToggle>
Expand Down
64 changes: 28 additions & 36 deletions packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,61 +42,53 @@
}
// Drawer menu
// ----------------------------------------------------------------------------
.pf-chatbot__conversation-list {
--pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);

margin-block-start: var(--pf-t--global--spacer--md);
margin-block-end: var(--pf-t--global--spacer--md);
.pf-v6-c-menu {
--pf-v6-c-menu--PaddingBlockStart: 0;
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
overflow: initial;
position: relative;
}
.pf-v6-c-menu__item-main {
--pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
}

.pf-chatbot__conversation-list-header {
.pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
color: var(--pf-t--global--text--color--subtle);
font-weight: var(--pf-t--global--font--weight--body--bold);
font-size: var(--pf-t--global--icon--size--font--sm);
padding-inline-start: var(--pf-t--global--spacer--sm);
padding-inline-end: var(--pf-t--global--spacer--sm);
--pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: var(--pf-t--global--background--color--floating--default);
z-index: var(--pf-t--global--z-index--md);
}
.pf-chatbot__conversation-list-item {
& > span {
display: flex;
column-gap: var(--pf-t--global--spacer--sm);
}

& .pf-chatbot__conversation-history-item {
--pf-v6-c-button--JustifyContent: flex-start;
--pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
--pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
--pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
--pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
--pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
--pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);

column-gap: var(--pf-t--global--spacer--md);
flex-basis: 100%;

& .pf-v6-c-button__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.pf-chatbot__menu-item {
--pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
padding-block-start: var(--pf-t--global--spacer--xs);
padding-block-end: var(--pf-t--global--spacer--xs);
color: var(--pf-t--global--text--color--regular);
font-size: var(--pf-t--global--font--size--body--lg);
font-weight: var(--pf-t--global--font--weight--body--default);
border-radius: var(--pf-t--global--border--radius--small);
}
// allows focus state to have border radius
.pf-v6-c-menu__list-item.pf-chatbot__menu-item {
overflow: hidden;
}

.pf-chatbot__history-actions {
transform: rotate(90deg);
}

.pf-chatbot__conversation-list-item--active {
.pf-chatbot__menu-item--active {
background-color: var(--pf-t--global--background--color--action--plain--clicked);
}

button.pf-chatbot__conversation-list-item--active {
button.pf-chatbot__menu-item--active {
background-color: initial;
}
}
Expand Down Expand Up @@ -259,8 +251,8 @@
}
}

.pf-chatbot__conversation-history-item {
--pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
.pf-chatbot__menu-item {
font-size: var(--pf-t--global--font--size--body--md);
}

.pf-v6-c-drawer__head {
Expand Down
50 changes: 32 additions & 18 deletions packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
const NO_RESULTS = {
bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
titleText: 'No results found',
icon: SearchIcon as ComponentType<any>

Check warning on line 28 in packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Unexpected any. Specify a different type
};

const EMPTY_STATE = {
Expand Down Expand Up @@ -492,74 +492,88 @@
expect(iconElement).toBeInTheDocument();
});

it('Passes listTitleProps to Title', () => {
it('Passes menuProps to Menu', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={{ Today: initialConversations }}
listTitleProps={{ className: 'test' }}
conversations={initialConversations}
menuProps={{ className: 'test' }}
/>
);
expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');

expect(screen.getByRole('menu').parentElement?.parentElement).toHaveClass('test');
});

it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
it('Passes menuContentProps to MenuContent', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={{ Today: initialConversations }}
listTitleProps={{ headingLevel: 'h2' }}
conversations={initialConversations}
menuContentProps={{ className: 'test' }}
/>
);
expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
expect(screen.getByRole('menu').parentElement).toHaveClass('test');
});

it('Passes listProps to List when conversations is an array', () => {
it('Passes menuListProps to MenuList when conversations is an array', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={initialConversations}
listProps={{ className: 'test' }}
menuListProps={{ className: 'test' }}
/>
);
expect(screen.getByRole('menu')).toHaveClass('test');
});

it('Passes menuListProps to MenuList when conversations is an object', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={{ Today: initialConversations }}
menuListProps={{ Today: { className: 'test' } }}
/>
);
expect(screen.getByRole('list')).toHaveClass('test');
expect(screen.getByRole('menu')).toHaveClass('test');
});

it('Passes listProps to List when conversations is an object', () => {
it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={{ Today: initialConversations }}
listProps={{ Today: { className: 'test' } }}
menuGroupProps={{ Today: { className: 'test' } }}
/>
);
expect(screen.getByRole('list')).toHaveClass('test');
expect(screen.getByRole('menu').parentElement).toHaveClass('test');
});

it('Passes listItemProps to ListItem', () => {
it('Passes additionalProps to MenuItem', () => {
render(
<ChatbotConversationHistoryNav
onDrawerToggle={onDrawerToggle}
isDrawerOpen={true}
displayMode={ChatbotDisplayMode.fullscreen}
setIsDrawerOpen={jest.fn()}
conversations={[{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }]}
conversations={[{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }]}
/>
);
expect(screen.getByRole('listitem')).toHaveClass('test');
expect(screen.getByRole('menuitem')).toHaveClass('test');
});

it('should be able to spread search input props when searchInputProps is passed', () => {
Expand Down
Loading
Loading