[PR #15751] [CLOSED] feat/style: Improve workspace prompts UI and enhance prompt variable documentation #10733

New Issue

GiteaMirror · 2025-11-11T19:12:21-06:00

GiteaMirror commented

2025-11-11 19:12:21 -06:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/15751
Author: @Classic298
Created: 7/15/2025
Status: ❌ Closed

Base: dev ← Head: workspace-design-changes

📝 Commits (1)

0bb4e03 Workspace design improvements (#15)

📊 Changes

5 files changed (+37 additions, -26 deletions)

View changed files

📝 src/lib/components/workspace/Knowledge.svelte (+1 -1)
📝 src/lib/components/workspace/Models.svelte (+1 -1)
📝 src/lib/components/workspace/Prompts.svelte (+1 -1)
📝 src/lib/components/workspace/Prompts/PromptEditor.svelte (+32 -21)
📝 src/lib/components/workspace/Tools.svelte (+2 -2)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions and describe your changes before submitting a pull request.

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:
- feat/style: Introduces UI improvements and enhanced user experience

THIS PR IS MOSTLY SUGGESTIVE, PLEASE REFACTOR IF DIFFERENT DESIGN IS DESIRED

Description

This PR enhances the workspace prompts interface with improved visual design and better user experience. The changes focus on form layout improvements, better visual hierarchy, and comprehensive documentation of prompt variable capabilities.

Changelog Entry

Description

Redesigned the prompt editor form with improved spacing, alignment, and visual hierarchy
Enhanced prompt variable documentation with detailed information about system variables and custom input types
Improved the visual prominence of the "create new prompt" button with permanent circular background
Added link to official documentation for comprehensive prompt variable reference

Added

Comprehensive prompt variable documentation including system variables (CURRENT_DATE, USER_NAME, etc.)
Information about custom input variable types (text, select, textarea, etc.) and their interactive form capabilities
Direct link to Open WebUI documentation for prompt variables
Permanent circular background for the "create new prompt" plus icon

Changed

Improved form layout in PromptEditor.svelte with better spacing and alignment
Enhanced visual hierarchy with subtle background elevation for all input fields
Repositioned "Prompt Content" label to align properly with form content
Upgraded plus icon styling for better visual prominence and accessibility
Reorganized help text into properly spaced, readable sections

Fixed

Alignment issues between title, command, and prompt content input fields
Inconsistent visual treatment of form inputs
Poor visibility of command input field
Misaligned form labels and content areas

Additional Information

These changes significantly improve the user experience for creating and editing prompts without affecting any functionality
The enhanced documentation helps users understand the powerful prompt variable system
All styling changes maintain compatibility with both light and dark themes
Changes are purely cosmetic and do not affect existing prompt functionality or data structure

Screenshots or Videos

Highlighted all the plus buttons, to match the overall design in the Notes area - before, the plus icon was not highlighted by a round circle, which made it hard to find and not very obvious to click it!

Current plus icon in Notes section for comparison (much clearer to see:)

Redesigned the prompt-creation form, made input fields larger, added some subtle spacing to make it nicer to look at. Before, the input field for the command was VERY VERY small, now it is a good size. Prompt Text input field looks much nicer now. Titles and input fields are all left aligned for a nice visual experience and finally, the info text about prompt variables underneath the input field was slightly expanded to accomondate for the prompt variable changes in 0.6.16.

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/15751 **Author:** [@Classic298](https://github.com/Classic298) **Created:** 7/15/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `workspace-design-changes` --- ### 📝 Commits (1) - [`0bb4e03`](https://github.com/open-webui/open-webui/commit/0bb4e03bda5b840683fbc3c2c8ba5db0197e4090) Workspace design improvements (#15) ### 📊 Changes **5 files changed** (+37 additions, -26 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/workspace/Knowledge.svelte` (+1 -1) 📝 `src/lib/components/workspace/Models.svelte` (+1 -1) 📝 `src/lib/components/workspace/Prompts.svelte` (+1 -1) 📝 `src/lib/components/workspace/Prompts/PromptEditor.svelte` (+32 -21) 📝 `src/lib/components/workspace/Tools.svelte` (+2 -2) </details> ### 📄 Description # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) and describe your changes before submitting a pull request. **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: - **feat/style**: Introduces UI improvements and enhanced user experience # THIS PR IS MOSTLY SUGGESTIVE, PLEASE REFACTOR IF DIFFERENT DESIGN IS DESIRED ## Description This PR enhances the workspace prompts interface with improved visual design and better user experience. The changes focus on form layout improvements, better visual hierarchy, and comprehensive documentation of prompt variable capabilities. ## Changelog Entry ### Description - Redesigned the prompt editor form with improved spacing, alignment, and visual hierarchy - Enhanced prompt variable documentation with detailed information about system variables and custom input types - Improved the visual prominence of the "create new prompt" button with permanent circular background - Added link to official documentation for comprehensive prompt variable reference ### Added - Comprehensive prompt variable documentation including system variables (CURRENT_DATE, USER_NAME, etc.) - Information about custom input variable types (text, select, textarea, etc.) and their interactive form capabilities - Direct link to Open WebUI documentation for prompt variables - Permanent circular background for the "create new prompt" plus icon ### Changed - Improved form layout in PromptEditor.svelte with better spacing and alignment - Enhanced visual hierarchy with subtle background elevation for all input fields - Repositioned "Prompt Content" label to align properly with form content - Upgraded plus icon styling for better visual prominence and accessibility - Reorganized help text into properly spaced, readable sections ### Fixed - Alignment issues between title, command, and prompt content input fields - Inconsistent visual treatment of form inputs - Poor visibility of command input field - Misaligned form labels and content areas --- ### Additional Information - These changes significantly improve the user experience for creating and editing prompts without affecting any functionality - The enhanced documentation helps users understand the powerful prompt variable system - All styling changes maintain compatibility with both light and dark themes - Changes are purely cosmetic and do not affect existing prompt functionality or data structure ### Screenshots or Videos <img width="2290" height="505" alt="image" src="https://github.com/user-attachments/assets/466fefb2-04ba-4564-8677-da301d168237" /> Highlighted all the plus buttons, **to match the overall design in the Notes area** - before, the plus icon was not highlighted by a round circle, which made it hard to find and not very obvious to click it! Current plus icon in Notes section for comparison (much clearer to see:) <img width="95" height="83" alt="image" src="https://github.com/user-attachments/assets/d1a85cba-919f-4088-a69d-2ab178f50170" /> <img width="2292" height="574" alt="image" src="https://github.com/user-attachments/assets/78a59095-1b51-4b8d-b19d-2811ea68fe2e" /> Redesigned the prompt-creation form, made input fields larger, added some subtle spacing to make it nicer to look at. Before, the input field for the command was VERY VERY small, now it is a good size. Prompt Text input field looks much nicer now. Titles and input fields are all left aligned for a nice visual experience and finally, the info text about prompt variables underneath the input field was slightly expanded to accomondate for the prompt variable changes in 0.6.16. ### 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>

GiteaMirror added the pull-request label 2025-11-11 19:12:21 -06:00

GiteaMirror closed this issue

2025-11-11 19:12:21 -06: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#10733