Target branch: Please verify that the pull request targets the dev branch.
Description: Provide a concise description of the changes made in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests to validate the changes?
Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
Prefix: The prefix "refac" was used to categorize this pull request.
Changelog Entry
Description
This pull request refactors and enhances the Archived Chats modal component, introducing sorting, improved UI/UX, better error handling, and accessibility enhancements.
Added
Sorting functionality for the archived chats table by "Name" and "Created At" columns.
Visual sorting indicators (up/down chevrons) to the table headers.
Display of the total count of archived chats in the modal header.
A specific message indicating when no chats match the current search filter.
Detailed error handling within the unarchiveAllHandler function, including per-chat error catching and toasts.
Success and warning toasts upon completion of the "Unarchive All" operation to indicate the outcome.
aria-label attributes to individual chat action buttons (Unarchive, Delete) for improved accessibility, including the chat title in the label.
Added dispatch('change') to deleteChatHandler to notify parent components of changes.
Imported ChevronUp and ChevronDown icon components for sorting indicators.
Changed
Refactoring: Chat filtering and sorting logic moved from the #each block into a derived reactive variable (sortedChats) for improved performance and code clarity.
UI/UX:
Table header (thead) is now sticky (position: sticky) for better usability with scrolling lists.
Updated styling across the component for a more consistent and modern look:
Table rows and cells (background, hover effects, padding, text styles).
Increased maximum height of the chat list container (max-h-[50vh]).
Updated the "Unarchive All" confirmation dialog:
Added a title prop.
Included the count of chats in the confirmation message using a slot.
Shortened button text for "Unarchive All" and "Export All" actions.
Changed md:flex to md:table-cell for the "Created At" column for better semantic table structure.
Robustness: The unarchiveAllHandler now iterates over a copy of the chats array to prevent issues if the list is modified during asynchronous operations.
Reactivity: Added explicit key (chat.id) to the #each chat loop for potentially better Svelte reactivity performance.
Code Style: Renamed internal variable in exportChatsHandler from chats to chatsToExport to avoid shadowing the component-level state variable.
Fixed
Potential UI inconsistency after deleting a chat, by ensuring dispatch('change') is called in deleteChatHandler.
Improved feedback mechanism for the "Unarchive All" operation, especially in case of partial failures.
Additional Information
This update significantly improves the user experience when managing a potentially large list of archived chats by adding sorting and refining the interface.
Error handling for bulk operations is now more granular.
Accessibility is improved through the use of aria-label on interactive elements.
Code maintainability is enhanced by separating sorting/filtering logic.
Screenshots
Before:
After:
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/12422
**Author:** [@silentoplayz](https://github.com/silentoplayz)
**Created:** 4/3/2025
**Status:** ❌ Closed
**Base:** `dev` ← **Head:** `revamp-archived-chats-modal`
---
### 📝 Commits (2)
- [`a49bb7f`](https://github.com/open-webui/open-webui/commit/a49bb7f61c65269a72eb6a8a8b8a7f8394b16431) refac: revamp archived chats modal
- [`fcdd1d0`](https://github.com/open-webui/open-webui/commit/fcdd1d07390b4a7ba4cb99012dcd01aff6df6ddf) fix: {sortedChats.length}
### 📊 Changes
**1 file changed** (+231 additions, -132 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte` (+231 -132)
</details>
### 📄 Description
# Pull Request Checklist
- [x] **Target branch:** Please verify that the pull request targets the `dev` branch.
- [x] **Description:** Provide a concise description of the changes made in this pull request.
- [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description.
- [x] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources?
- [x] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation?
- [x] **Testing:** Have you written and run sufficient tests to validate the changes?
- [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
- [x] **Prefix:** The prefix "refac" was used to categorize this pull request.
# Changelog Entry
### Description
This pull request refactors and enhances the Archived Chats modal component, introducing sorting, improved UI/UX, better error handling, and accessibility enhancements.
### Added
- Sorting functionality for the archived chats table by "Name" and "Created At" columns.
- Visual sorting indicators (up/down chevrons) to the table headers.
- Display of the total count of archived chats in the modal header.
- A specific message indicating when no chats match the current search filter.
- Detailed error handling within the `unarchiveAllHandler` function, including per-chat error catching and toasts.
- Success and warning toasts upon completion of the "Unarchive All" operation to indicate the outcome.
- `aria-label` attributes to individual chat action buttons (Unarchive, Delete) for improved accessibility, including the chat title in the label.
- Added `dispatch('change')` to `deleteChatHandler` to notify parent components of changes.
- Imported `ChevronUp` and `ChevronDown` icon components for sorting indicators.
### Changed
- **Refactoring:** Chat filtering and sorting logic moved from the `#each` block into a derived reactive variable (`sortedChats`) for improved performance and code clarity.
- **UI/UX:**
- Table header (`thead`) is now sticky (`position: sticky`) for better usability with scrolling lists.
- Updated styling across the component for a more consistent and modern look:
- Table rows and cells (background, hover effects, padding, text styles).
- Action buttons (padding, hover effects, colors, rounded corners).
- Search input field (added border, refined icon placement).
- Main action buttons ("Unarchive All", "Export All") styling updated (borders, hover effects, padding, corner rounding).
- Increased maximum height of the chat list container (`max-h-[50vh]`).
- Updated the "Unarchive All" confirmation dialog:
- Added a `title` prop.
- Included the count of chats in the confirmation message using a slot.
- Shortened button text for "Unarchive All" and "Export All" actions.
- Changed `md:flex` to `md:table-cell` for the "Created At" column for better semantic table structure.
- **Robustness:** The `unarchiveAllHandler` now iterates over a copy of the `chats` array to prevent issues if the list is modified during asynchronous operations.
- **Reactivity:** Added explicit key `(chat.id)` to the `#each chat` loop for potentially better Svelte reactivity performance.
- **Code Style:** Renamed internal variable in `exportChatsHandler` from `chats` to `chatsToExport` to avoid shadowing the component-level state variable.
### Fixed
- Potential UI inconsistency after deleting a chat, by ensuring `dispatch('change')` is called in `deleteChatHandler`.
- Improved feedback mechanism for the "Unarchive All" operation, especially in case of partial failures.
---
### Additional Information
- This update significantly improves the user experience when managing a potentially large list of archived chats by adding sorting and refining the interface.
- Error handling for bulk operations is now more granular.
- Accessibility is improved through the use of `aria-label` on interactive elements.
- Code maintainability is enhanced by separating sorting/filtering logic.
### Screenshots
# `Before:`
# `After:`
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/12422
Author: @silentoplayz
Created: 4/3/2025
Status: ❌ Closed
Base:
dev← Head:revamp-archived-chats-modal📝 Commits (2)
a49bb7frefac: revamp archived chats modalfcdd1d0fix: {sortedChats.length}📊 Changes
1 file changed (+231 additions, -132 deletions)
View changed files
📝
src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte(+231 -132)📄 Description
Pull Request Checklist
devbranch.Changelog Entry
Description
This pull request refactors and enhances the Archived Chats modal component, introducing sorting, improved UI/UX, better error handling, and accessibility enhancements.
Added
unarchiveAllHandlerfunction, including per-chat error catching and toasts.aria-labelattributes to individual chat action buttons (Unarchive, Delete) for improved accessibility, including the chat title in the label.dispatch('change')todeleteChatHandlerto notify parent components of changes.ChevronUpandChevronDownicon components for sorting indicators.Changed
#eachblock into a derived reactive variable (sortedChats) for improved performance and code clarity.thead) is now sticky (position: sticky) for better usability with scrolling lists.max-h-[50vh]).titleprop.md:flextomd:table-cellfor the "Created At" column for better semantic table structure.unarchiveAllHandlernow iterates over a copy of thechatsarray to prevent issues if the list is modified during asynchronous operations.(chat.id)to the#each chatloop for potentially better Svelte reactivity performance.exportChatsHandlerfromchatstochatsToExportto avoid shadowing the component-level state variable.Fixed
dispatch('change')is called indeleteChatHandler.Additional Information
aria-labelon interactive elements.Screenshots
Before:After:🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.