[PR #13991] [CLOSED] refac: Revamp Prompts Page Experience #23350

New Issue

Closed

opened 2026-04-20 04:45:51 -05:00 by GiteaMirror · 0 comments

GiteaMirror commented 2026-04-20 04:45:51 -05:00

Owner

Copy Link

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/13991
Author: @silentoplayz
Created: 5/17/2025
Status: ❌ Closed

Base: dev ← Head: Revamp-prompt-page

---

📝 Commits (9)

• 8c23674 Preview Prompt with copy button
• aa639bd Clear Search button and sort by title or command
• e50fcf3 feat: Copy to clipboard, Sort by user, Pagination for Prompts page
• 45855ab items < prompts
• 0036cd2 refac: sticky pagination import/export prompts buttons
• 678fd65 chore: format
• 8e2dc90 feat: Implement dynamic pagination for prompts list
• bd61e10 chore: format
• 68157f9 fix: add back a row

📊 Changes

2 files changed (+719 additions, -222 deletions)

View changed files

📝 src/lib/components/workspace/Prompts.svelte (+620 -222)
➕ src/lib/components/workspace/Prompts/PromptPreviewModal.svelte (+99 -0)

📄 Description

Pull Request Checklist

Before submitting, make sure you've checked the following:

• 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: To clearly categorize this pull request, prefix the pull request title using one of the following:
  • BREAKING CHANGE: Significant changes that may affect compatibility
  • build: Changes that affect the build system or external dependencies
  • ci: Changes to our continuous integration processes or workflows
  • chore: Refactor, cleanup, or other non-functional code changes
  • docs: Documentation update or addition
  • feat: Introduces a new feature or enhancement to the codebase
  • fix: Bug fix or error correction
  • i18n: Internationalization or localization changes
  • perf: Performance improvement
  • refactor: Code restructuring for better maintainability, readability, or scalability
  • style: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
  • test: Adding missing tests or correcting existing tests
  • WIP: Work in progress, a temporary label for incomplete or ongoing work

Changelog Entry

Description

• This pull request introduces a new "Prompt Preview" modal, allowing users to quickly view the details and content of a prompt without navigating to the edit page. It also includes several UI/UX enhancements to the prompts list page, such as:
  • Dynamic pagination that adjusts the number of items per page based on available screen height.
  • Sorting capabilities by title, command, or user.
  • Improved search functionality (now searching title, command, and user details).
  • A refined prompt card design with content preview.
  • Better feedback for import/export operations.
  • Clearer delete confirmations.
• The import process for prompts is now more robust with better error handling and user feedback.

Added

• Prompt Preview Modal: Introduced PromptPreviewModal.svelte to display prompt title, command, and content.
  • Includes a "Copy to Clipboard" button for the prompt content within the modal.
• Prompt Preview Functionality: Added a "Preview" icon button (Eye.svelte) on each prompt card in the Prompts.svelte list to open the new modal.
• Content Preview on Card: Prompt cards now display a snippet of the prompt's content (up to 2 lines).
• Copy Prompt Content from Card: Added a "Copy" icon button (Clipboard.svelte) on each prompt card to directly copy its content.
• Dynamic Pagination: Implemented pagination that automatically adjusts the number of items per page based on available vertical space, using ResizeObserver for responsiveness. Integrated the Pagination.svelte component.
• Sorting Functionality: Added UI controls and logic to sort prompts by "Title", "Command", or "User" in ascending or descending order.
• Clear Search Button: Added an "X" button next to the search input to quickly clear the current search query.
• Improved User Feedback:
  • Toast notifications for successful prompt deletion.
  • More detailed toast notifications for prompt import: success, partial success (with counts), failures (with counts), invalid file/prompt formats, and specific error messages.
  • Toast notification for successful export of all prompts.
• Empty State Messages: Added messages for "No prompts found matching your search criteria" and "No prompts available. Create one to get started!"
• Component Lifecycle Management: Used onDestroy to properly clean up event listeners and ResizeObserver instances.

Changed

• Prompts List UI (Prompts.svelte):
  • Redesigned prompt cards for improved readability, information hierarchy, and to include a preview of the prompt content.
  • Action buttons (Preview, Copy, Edit, More) are now icon-based, smaller, styled consistently, and equipped with tooltips for better discoverability.
  • "Create New Prompt" button now has a tooltip.
  • The main page layout was restructured using flex-grow for the prompt grid container, enabling it to fill available vertical space for dynamic pagination.
  • Improved styling for various elements including buttons, text, and overall layout for consistency and better dark mode support.
  • Prompt count display now correctly handles singular ("1 prompt") and plural ("X prompts") forms.
• Search Functionality:
  • Prompts list search now filters by prompt title, command, user name, and user email (all case-insensitive).
  • Search input automatically resets pagination to the first page.
• Import Prompts Logic:
  • Significantly enhanced error handling for file reading, JSON parsing, and individual prompt validation (checks for presence and basic type of command, title, and content).
  • Provides detailed feedback via toast notifications, reporting the number of successfully imported prompts versus failed ones.
  • Ensures the file input element is correctly reset after an import attempt, regardless of outcome.
• Export Prompts Filename:
  • Single prompt export filename now includes the sanitized prompt command: prompt-export-[command]-[timestamp].json.
  • All prompts export filename: prompts-export-all-[timestamp].json.
• Delete Confirmation Dialog:
  • Improved message content (This will delete [command]. Are you sure?) and styling for clarity.
  • Added a null check for deletePrompt in the confirmation handler before proceeding with deletion.
• Type Safety: Changed importFiles type from string to FileList | null for improved type safety and correctness in handling file inputs.

Fixed

• Import Robustness: Addressed potential issues in prompt import by adding comprehensive validation for the imported file structure and individual prompt objects, alongside more informative error messages.
• Resource Management: Ensured ResizeObserver instances and window.resize event listeners (fallback) are correctly unobserved/removed during component destruction (onDestroy) to prevent memory leaks.
• Pagination State Consistency:
  • Current page is reset to 1 when search query changes or sorting criteria are applied.
  • Pagination logic correctly handles edge cases such as an empty list of filtered items or when the current page might exceed the maximum number of available pages.
• Minor UI/UX Adjustments: Various small tweaks to styling, alignment, and interaction feedback throughout the prompts page to enhance the overall user experience.

---

Additional Information

• This PR significantly enhances the user experience for managing prompts by providing quick preview capabilities, dynamic content display, powerful sorting, and a more polished and robust interface.
• If any changes made aren't desirable here, feel free to let me know so that I can either manually adjust, or the maintainer can decide to cherry pick changes that are desirable from the PR.

Screenshots or Videos

Screenshot of the Prompts list with new card design and preview button.

• Dark Mode
  
• OLED Dark Mode
  
• Light Mode
  
  Screenshot of the PromptPreviewModal showing a prompt's details.
• Dark Mode
  
• OLED Dark Mode
  
• Light Mode
  

Before:

Sorting (by title/command/username/email) and a Clear Search Button with Tooltip:

Import prompts.json file:

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

---

_{🔄 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/13991 **Author:** [@silentoplayz](https://github.com/silentoplayz) **Created:** 5/17/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `Revamp-prompt-page` --- ### 📝 Commits (9) - [`8c23674`](https://github.com/open-webui/open-webui/commit/8c2367448ba6eedc2fe4bd883ea016e8824346bd) Preview Prompt with copy button - [`aa639bd`](https://github.com/open-webui/open-webui/commit/aa639bd36373ed610a44587410039aa4834ebedd) Clear Search button and sort by title or command - [`e50fcf3`](https://github.com/open-webui/open-webui/commit/e50fcf386810ad16fa198286e8463473b7e68158) feat: Copy to clipboard, Sort by user, Pagination for Prompts page - [`45855ab`](https://github.com/open-webui/open-webui/commit/45855abf3ed6b6b1ca397a20180c492711a1ae62) items < prompts - [`0036cd2`](https://github.com/open-webui/open-webui/commit/0036cd27f3b46162038ec855e9da497fe3c35a2a) refac: sticky pagination import/export prompts buttons - [`678fd65`](https://github.com/open-webui/open-webui/commit/678fd65c00b83ea1707d5f86853c98755495640b) chore: format - [`8e2dc90`](https://github.com/open-webui/open-webui/commit/8e2dc902785e8bd9e64a09703f0801bd59773fc4) feat: Implement dynamic pagination for prompts list - [`bd61e10`](https://github.com/open-webui/open-webui/commit/bd61e10c4e952889d0b60687749cbd2a9bb6e3a6) chore: format - [`68157f9`](https://github.com/open-webui/open-webui/commit/68157f9e5b5614425cd54c517fc206af80945ee1) fix: add back a row ### 📊 Changes **2 files changed** (+719 additions, -222 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/workspace/Prompts.svelte` (+620 -222) ➕ `src/lib/components/workspace/Prompts/PromptPreviewModal.svelte` (+99 -0) </details> ### 📄 Description # Pull Request Checklist **Before submitting, make sure you've checked the following:** - [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:** To clearly categorize this pull request, prefix the pull request title using one of the following: - **BREAKING CHANGE**: Significant changes that may affect compatibility - **build**: Changes that affect the build system or external dependencies - **ci**: Changes to our continuous integration processes or workflows - **chore**: Refactor, cleanup, or other non-functional code changes - **docs**: Documentation update or addition - **feat**: Introduces a new feature or enhancement to the codebase - **fix**: Bug fix or error correction - **i18n**: Internationalization or localization changes - **perf**: Performance improvement - **refactor**: Code restructuring for better maintainability, readability, or scalability - **style**: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.) - **test**: Adding missing tests or correcting existing tests - **WIP**: Work in progress, a temporary label for incomplete or ongoing work # Changelog Entry ### Description - This pull request introduces a new "Prompt Preview" modal, allowing users to quickly view the details and content of a prompt without navigating to the edit page. It also includes several UI/UX enhancements to the prompts list page, such as: - Dynamic pagination that adjusts the number of items per page based on available screen height. - Sorting capabilities by title, command, or user. - Improved search functionality (now searching title, command, and user details). - A refined prompt card design with content preview. - Better feedback for import/export operations. - Clearer delete confirmations. - The import process for prompts is now more robust with better error handling and user feedback. ### Added - **Prompt Preview Modal**: Introduced `PromptPreviewModal.svelte` to display prompt title, command, and content. - Includes a "Copy to Clipboard" button for the prompt content within the modal. - **Prompt Preview Functionality**: Added a "Preview" icon button (`Eye.svelte`) on each prompt card in the `Prompts.svelte` list to open the new modal. - **Content Preview on Card**: Prompt cards now display a snippet of the prompt's content (up to 2 lines). - **Copy Prompt Content from Card**: Added a "Copy" icon button (`Clipboard.svelte`) on each prompt card to directly copy its content. - **Dynamic Pagination**: Implemented pagination that automatically adjusts the number of items per page based on available vertical space, using `ResizeObserver` for responsiveness. Integrated the `Pagination.svelte` component. - **Sorting Functionality**: Added UI controls and logic to sort prompts by "Title", "Command", or "User" in ascending or descending order. - **Clear Search Button**: Added an "X" button next to the search input to quickly clear the current search query. - **Improved User Feedback**: - Toast notifications for successful prompt deletion. - More detailed toast notifications for prompt import: success, partial success (with counts), failures (with counts), invalid file/prompt formats, and specific error messages. - Toast notification for successful export of all prompts. - **Empty State Messages**: Added messages for "No prompts found matching your search criteria" and "No prompts available. Create one to get started!" - **Component Lifecycle Management**: Used `onDestroy` to properly clean up event listeners and `ResizeObserver` instances. ### Changed - **Prompts List UI (`Prompts.svelte`)**: - Redesigned prompt cards for improved readability, information hierarchy, and to include a preview of the prompt content. - Action buttons (Preview, Copy, Edit, More) are now icon-based, smaller, styled consistently, and equipped with tooltips for better discoverability. - "Create New Prompt" button now has a tooltip. - The main page layout was restructured using `flex-grow` for the prompt grid container, enabling it to fill available vertical space for dynamic pagination. - Improved styling for various elements including buttons, text, and overall layout for consistency and better dark mode support. - Prompt count display now correctly handles singular ("1 prompt") and plural ("X prompts") forms. - **Search Functionality**: - Prompts list search now filters by prompt title, command, user name, and user email (all case-insensitive). - Search input automatically resets pagination to the first page. - **Import Prompts Logic**: - Significantly enhanced error handling for file reading, JSON parsing, and individual prompt validation (checks for presence and basic type of `command`, `title`, and `content`). - Provides detailed feedback via toast notifications, reporting the number of successfully imported prompts versus failed ones. - Ensures the file input element is correctly reset after an import attempt, regardless of outcome. - **Export Prompts Filename**: - Single prompt export filename now includes the sanitized prompt command: `prompt-export-[command]-[timestamp].json`. - All prompts export filename: `prompts-export-all-[timestamp].json`. - **Delete Confirmation Dialog**: - Improved message content (`This will delete [command]. Are you sure?`) and styling for clarity. - Added a null check for `deletePrompt` in the confirmation handler before proceeding with deletion. - **Type Safety**: Changed `importFiles` type from `string` to `FileList | null` for improved type safety and correctness in handling file inputs. ### Fixed - **Import Robustness**: Addressed potential issues in prompt import by adding comprehensive validation for the imported file structure and individual prompt objects, alongside more informative error messages. - **Resource Management**: Ensured `ResizeObserver` instances and `window.resize` event listeners (fallback) are correctly unobserved/removed during component destruction (`onDestroy`) to prevent memory leaks. - **Pagination State Consistency**: - Current page is reset to 1 when search query changes or sorting criteria are applied. - Pagination logic correctly handles edge cases such as an empty list of filtered items or when the current page might exceed the maximum number of available pages. - **Minor UI/UX Adjustments**: Various small tweaks to styling, alignment, and interaction feedback throughout the prompts page to enhance the overall user experience. --- ### Additional Information - This PR significantly enhances the user experience for managing prompts by providing quick preview capabilities, dynamic content display, powerful sorting, and a more polished and robust interface. - If any changes made aren't desirable here, feel free to let me know so that I can either manually adjust, or the maintainer can decide to cherry pick changes that are desirable from the PR. ### Screenshots or Videos **Screenshot of the Prompts list with new card design and preview button.** - Dark Mode  - OLED Dark Mode  - Light Mode  **Screenshot of the PromptPreviewModal showing a prompt's details.** - Dark Mode  - OLED Dark Mode  - Light Mode  **Before:**  **Sorting (by title/command/username/email) and a `Clear Search` Button with Tooltip:**  **Import prompts.json file:**  ### Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. --- _{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

GiteaMirror added the pull-request label 2026-04-20 04:45:51 -05:00

GiteaMirror closed this issue 2026-04-20 04:45:51 -05:00

GiteaMirror referenced this issue 2026-04-20 06:54:37 -05:00

[PR #23350] [MERGED] upd:i18n es-ES Translation v0.8.12 #27159

GiteaMirror referenced this issue 2026-04-25 14:35:53 -05:00

[PR #23350] [MERGED] upd:i18n es-ES Translation v0.8.12 #42789

GiteaMirror referenced this issue 2026-04-30 02:49:37 -05:00

[PR #23350] [MERGED] upd:i18n es-ES Translation v0.8.12 #50207

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

dev

v0.9.2

v0.9.1

v0.9.0

v0.8.12

v0.8.11

v0.8.10

v0.8.9

v0.8.8

v0.8.7

v0.8.6

v0.8.5

v0.8.4

v0.8.3

v0.8.2

v0.8.1

v0.8.0

v0.7.2

v0.7.1

v0.7.0

v0.6.43

v0.6.42

v0.6.41

v0.6.40

v0.6.39

v0.6.38

v0.6.37

v0.6.36

v0.6.35

v0.6.34

v0.6.33

v0.6.32

v0.6.31

v0.6.30

v0.6.29

v0.6.28

v0.6.27

v0.6.26

v0.6.25

v0.6.24

v0.6.23

v0.6.22

v0.6.21

v0.6.20

v0.6.19

v0.6.18

v0.6.17

v0.6.16

v0.6.15

v0.6.14

v0.6.13

v0.6.12

v0.6.11

v0.6.10

v0.6.9

v0.6.8

v0.6.7

v0.6.6

v0.6.5

v0.6.4

v0.6.3

v0.6.2

v0.6.1

v0.6.0

v0.5.20

v0.5.19

v0.5.18

v0.5.17

v0.5.16

v0.5.15

v0.5.14

v0.5.13

v0.5.12

v0.5.11

v0.5.10

v0.5.9

v0.5.8

v0.5.7

v0.5.6

v0.5.5

v0.5.4

v0.5.3

v0.5.2

v0.5.1

v0.5.0

v0.4.8

v0.4.7

v0.4.6

v0.4.5

v0.4.4

v0.4.3

v0.4.2

v0.4.1

v0.4.0

v0.3.35

v0.3.34

v0.3.33

v0.3.32

v0.3.31

v0.3.30

v0.3.29

v0.3.28

v0.3.27

v0.3.26

v0.3.25

v0.3.24

v0.3.23

v0.3.22

v0.3.21

v0.3.20

v0.3.19

v0.3.18

v0.3.17

v0.3.16

v0.3.15

v0.3.14

v0.3.13

v0.3.12

v0.3.11

v0.3.10

v0.3.9

v0.3.8

v0.3.7

v0.3.6

v0.3.5

v0.3.4

v0.3.3

v0.3.2

v0.3.1

v0.3.0

v0.2.5

v0.2.4

v0.2.3

v0.2.2

v0.2.1

v0.2.0

v0.1.125

v0.1.124

v0.1.123

v0.1.122

v0.1.121

v0.1.120

v0.1.119

v0.1.118

v0.1.117

v0.1.116

v0.1.115

v0.1.114

v0.1.113

v0.1.112

v0.1.111

v0.1.110

v0.1.109

v0.1.108

v0.1.107

v0.1.106

v0.1.105

v0.1.104

v0.1.103

v0.1.102

Labels

Clear labels

bug

confirmed

confirmed issue

core

documentation

enhancement

good first issue

help wanted

non-core

pull-request

Mirrored from GitHub Pull Request

python

question

testing wanted

No Label pull-request

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

GiteaMirror ninjasurge

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#23350