refactor(webviews): chat history tab with pagination #7020
Conversation
This PR refactors the chat history tab to match prompts tab with several UX improvements: - Add pagination support with configurable items per page - Add export and delete all functionality in the header - Improve search functionality with a cleaner command palette style interface - Remove period-based grouping of chat history items - Add confirmation dialog for delete all action - Make history items more compact and consistent - Add keyboard navigation support - Improve empty state messaging and layout ## Test plan - Verify pagination works correctly with different page sizes - Test search functionality filters correctly - Confirm export and delete all actions work as expected - Check keyboard navigation and accessibility - Verify empty state renders appropriately - Test history item interactions and delete functionality
- Add strict boolean check for human message text filtering - Move filtering logic to avoid duplicate filtering operations - Fix empty state to only show when there are no filtered chats and no search text - Simplify filtered chats logic by combining conditions - Remove unnecessary newline in component
| // Ensure the chat view is ready before we start typing | ||
| await expect(sidebarTabHistoryButton).toBeVisible() | ||
| await expect(sidebarChat.getByRole('button', { name: 'Export' })).toBeVisible() | ||
| await expect(sidebarChat.getByRole('button', { name: 'Delete all' })).toBeVisible() |
There was a problem hiding this comment.
Noice Changes! ^o^
Some suggestions
- Can we add some space between the export button and delete all button?
- Can we make the two buttons align with the search bar?
- The export button didn't work when I tested this locally.
- The text colors are white for light Color themes, which are hard to see.
- Can we make the buttons slightly smaller?
There was a problem hiding this comment.
@julialeex can i get your re-review again?
There was a problem hiding this comment.
@abeatrix The export button still does not work for me
|
while we're here, can we make the chat titles editable by the user? |
@alexromano yea that was on my mind as well and I think this is a good building block for that 😃 I can do that in a follow up since I don't think that's urgent? |
|
Personally I prefer the old UI for the export and delete buttons, it looks cleaner. Curious about other people's thoughts. If we do change the UI back to the old one, I think we can change the
|
personally don't like those buttons at all 😆 But this is to match the design on the current Prompt list |
|
Would be nice to add the time period to the conversation tabs. Talked to @abeatrix and it seems like we will add it in another PR. |
The changes include: - Adding an `extensionAPI` prop to the `HistoryTab` component to allow access to the extension's API. - Passing the `extensionAPI` to the `HistoryTabWithData` component. - Implementing the `downloadChatHistory` function to handle the download of the chat history. - Adding a button to trigger the download. - Adding a test for the download functionality. - Removing the background from the history tab's CSS.
| history.chat[chat.id] = chat | ||
| await localStorage.setChatHistory(authStatus, history) | ||
| this.changeNotifications.next() | ||
| // Don't save empty chats |
There was a problem hiding this comment.
awesome 🚀
I do not see any tests for this class. If that's not a problem, please add something 🙏
This PR refactors the chat history tab to match prompts tab with several UX improvements:
Fixed bugs:
Delete AllandExportbuttons show up when chat history is emptyTest plan
Updated unit test and e2e test.
After
20 chats per page
Before
With 400+ chat in my history the list gets too long for scrolling.