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.
---
<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/13991
Author: @silentoplayz
Created: 5/17/2025
Status: ❌ Closed
Base:
dev← Head:Revamp-prompt-page📝 Commits (9)
8c23674Preview Prompt with copy buttonaa639bdClear Search button and sort by title or commande50fcf3feat: Copy to clipboard, Sort by user, Pagination for Prompts page45855abitems < prompts0036cd2refac: sticky pagination import/export prompts buttons678fd65chore: format8e2dc90feat: Implement dynamic pagination for prompts listbd61e10chore: format68157f9fix: 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:
devbranch.Changelog Entry
Description
Added
PromptPreviewModal.svelteto display prompt title, command, and content.Eye.svelte) on each prompt card in thePrompts.sveltelist to open the new modal.Clipboard.svelte) on each prompt card to directly copy its content.ResizeObserverfor responsiveness. Integrated thePagination.sveltecomponent.onDestroyto properly clean up event listeners andResizeObserverinstances.Changed
Prompts.svelte):flex-growfor the prompt grid container, enabling it to fill available vertical space for dynamic pagination.command,title, andcontent).prompt-export-[command]-[timestamp].json.prompts-export-all-[timestamp].json.This will delete [command]. Are you sure?) and styling for clarity.deletePromptin the confirmation handler before proceeding with deletion.importFilestype fromstringtoFileList | nullfor improved type safety and correctness in handling file inputs.Fixed
ResizeObserverinstances andwindow.resizeevent listeners (fallback) are correctly unobserved/removed during component destruction (onDestroy) to prevent memory leaks.Additional Information
Screenshots or Videos
Screenshot of the Prompts list with new card design and preview button.
Screenshot of the PromptPreviewModal showing a prompt's details.
Before:
Sorting (by title/command/username/email) and a
Clear SearchButton 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.