[PR #12422] [CLOSED] refac: Revamp "Archived Chats" modal #61765

New Issue

GiteaMirror · 2026-05-06T05:25:28-05:00

GiteaMirror commented

2026-05-06 05:25:28 -05:00

📋 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)

a49bb7f refac: revamp archived chats modal
fcdd1d0 fix: {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

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).
  - 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:`

_{🔄 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:` ![image](https://github.com/user-attachments/assets/7661ccdb-c9f2-4e2a-aa09-513f6e380944) ![image](https://github.com/user-attachments/assets/c63e3a0a-e6b5-44c5-93ee-6b642d0c5b4a) ![image](https://github.com/user-attachments/assets/31e70db4-179a-4923-9a28-416d23ee5db8) ![image](https://github.com/user-attachments/assets/e164fbf4-49fe-4d2f-b8cb-196a8d0e26dd) # `After:` ![image](https://github.com/user-attachments/assets/1974320a-eb10-438f-a184-77d2fff857b3) ![image](https://github.com/user-attachments/assets/e1282672-d0d4-400e-ace8-bdfc476c6ee9) ![image](https://github.com/user-attachments/assets/cf3b683f-aec0-4967-9734-cbd72995d3ad) ![image](https://github.com/user-attachments/assets/f4470f8d-1cb1-4328-bb2a-666ab8d511e5) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-06 05:25:28 -05:00

GiteaMirror closed this issue

2026-05-06 05:25:31 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#61765