Theming expirmentaiton part 2 (revamp)

[arthrod]

User 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:
  • 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

• [Concisely describe the changes made in this pull request, including any relevant motivation and impact (e.g., fixing a bug, adding a feature, or improving performance)]

Added

• [List any new features, functionalities, or additions]

Changed

• [List any changes, updates, refactorings, or optimizations]

Deprecated

• [List any deprecated functionality or features that have been removed]

Removed

• [List any removed features, files, or functionalities]

Fixed

• [List any fixes, corrections, or bug fixes]

Security

• [List any new or updated security-related changes, including vulnerability fixes]

Breaking Changes

• BREAKING CHANGE: [List any breaking changes affecting compatibility or functionality]

---

Additional Information

• [Insert any additional context, notes, or explanations for the changes]
  • [Reference any related issues, commits, or other relevant information]

Screenshots or Videos

• [Attach any relevant screenshots or videos demonstrating the changes]

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.

---

PR Type

Enhancement

---

Description

• Comprehensive theming system overhaul with new Themes.svelte component providing theme import/export, search, sorting, and community theme discovery

• Theme editor integration with warning dialogs for version compatibility and animation script handling

• Extended Tailwind color palette with CSS variables for black, white, and complete blue color palette (100-950)

• Enhanced image generation settings with flat configuration structure, ComfyUI workflow editing, and support for OpenAI/Gemini API parameters

• Redesigned prompts interface with view filtering (created/shared), improved layout, and empty state messaging

• Model valves support in message input with new ValvesModal component and improved clipboard image handling

• Expanded permissions system with import/export operations and default permission enforcement

• Refactored Functions page with grid layout, enhanced filtering, and view selection capabilities

• Improved Ollama model management with update cancellation, better error handling, and enhanced user feedback

• New ProseMirror list drag handle plugin for enhanced rich text editing with drag-and-drop support

• Bug fixes including debounce timer cleanup in AI autocompletion and memory leak prevention

• UI refinements across multiple settings pages with consistent spacing, styling updates, and better visual feedback

• Locale support added for British English date formatting

---

Diagram Walkthrough

flowchart LR
  A["Theme System"] -->|"Import/Export"| B["Themes.svelte"]
  A -->|"Editor Integration"| C["ThemeEditorModal"]
  D["Tailwind Config"] -->|"CSS Variables"| E["Color Palette"]
  F["Settings Pages"] -->|"Flat Structure"| G["Images.svelte"]
  F -->|"Enhanced UI"| H["Prompts.svelte"]
  I["Message Input"] -->|"Model Valves"| J["ValvesModal"]
  K["Permissions"] -->|"Expanded Rules"| L["Permissions.svelte"]
  M["Functions Page"] -->|"Grid Layout"| N["Enhanced Filtering"]
  O["Rich Text Editor"] -->|"Drag Handles"| P["listDragHandlePlugin"]

Loading

File Walkthrough

	Relevant files
Enhancement	9 files listDragHandlePlugin.js Add list drag handle plugin for ProseMirror editor              src/lib/components/common/RichTextInput/listDragHandlePlugin.js New plugin file implementing drag-and-drop functionality for list items in ProseMirror editor Supports multiple list types (bulletList, orderedList, taskList) with configurable item type names Includes decorations for drag handles, drop target indicators, and ghost elements during dragging Handles list item normalization when moving between different list types +513/-0  dayjs.js Add British English locale support to dayjs                            src/lib/dayjs.js Added import for en-gb locale to support British English date formatting +1/-0      Images.svelte Refactor image generation settings with flat config structure src/lib/components/admin/Settings/Images.svelte Refactored configuration structure from nested objects to flat top-level properties (e.g., config.comfyui.COMFYUI_BASE_URL → config.COMFYUI_BASE_URL) Added support for image edit workflows with separate ComfyUI workflow configuration Introduced CodeEditorModal component for editing JSON workflows inline Added validation for required API keys and base URLs before enabling image generation Reorganized UI into "Create Image" and "Edit Image" sections with engine-specific configurations Added support for OpenAI and Gemini API parameters as JSON input fields +1036/-493 Prompts.svelte Redesign prompts interface with view filtering and improved layout src/lib/components/workspace/Prompts.svelte Added ViewSelector component for filtering prompts by "created" vs "shared" views Reorganized UI layout with import/export buttons in header and new prompt button repositioned Improved search and filter logic with reactive setFilteredItems function Changed prompt list from grid layout to compact list layout with better spacing Added empty state message when no prompts match search/filter criteria Fixed import files binding initialization from empty string to null +217/-216 MessageInput.svelte Add model valves support and improve clipboard handling    src/lib/components/chat/MessageInput.svelte Added imports for Knobs icon and ValvesModal component to support model valves functionality Implemented clipboard image handling with FileReader API instead of object URLs for better data handling Refactored conditional rendering from {#if recording}...{:else} to with class binding for cleaner structure Added model valves button and modal integration with state management for tool/function valve selection Updated model profile image URL generation to use API endpoint instead of direct image URLs Improved filter button styling with hover state colors and better visual feedback Removed debug console.log statement from suggestions loading +689/-654 Themes.svelte Add comprehensive theme management UI component                    src/lib/components/chat/Settings/Themes.svelte New comprehensive theme management component with 1200+ lines of functionality Implements theme import/export, search, sorting, and community theme discovery features Includes theme editor integration with warning dialogs for version compatibility and animation scripts Provides rich tooltip content generation showing theme metadata, features, and author information Supports batch theme import with queue processing and error handling Adds theme duplication, update checking, and visual indicators for editing/active states +1228/-0 Permissions.svelte Expanded permissions system with import/export and default enforcement src/lib/components/admin/Users/Groups/Permissions.svelte Renamed defaultPermissions constant to DEFAULT_PERMISSIONS and expanded it with new permission fields for import/export operations and additional sharing/feature options Added defaultPermissions as an exported prop to support default user permissions that cannot be disabled Restructured UI layout with improved spacing and conditional rendering for nested permission controls Added visual feedback showing when permissions are enforced defaults that remain enabled Enhanced permission hierarchy with parent-child relationships (e.g., Models Access enables Import/Export Models) +639/-255 Functions.svelte Refactored Functions page with grid layout and enhanced filtering src/lib/components/admin/Functions.svelte Renamed store import from functions to _functions to avoid naming conflicts with local state Added new imports for getFunctionList, ViewSelector, TagSelector, capitalizeFirstLetter, and Spinner components Implemented local functions state management with loading state and filtering logic supporting view options (created/shared) and type filtering Refactored UI from simple list to grid layout with improved search, filtering, and view selection capabilities Added loading spinner and empty state messaging for better UX +454/-419 ManageOllama.svelte Added model update cancellation and improved error handling src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte Added cancellation support for model updates with updateModelsControllers tracking and updateCancelled flag Improved error handling to distinguish between AbortError and other errors, preventing error toasts on cancellation Renamed modelTransferring to modelLoading for consistency and clarity Added Tooltip components to buttons and improved button disabled states based on input validation Enhanced user feedback with info/success toasts for update operations and cancel functionality +226/-151
Configuration changes	1 files tailwind.config.js Extend Tailwind color palette with CSS variables                  tailwind.config.js Added black and white color variables using CSS custom properties with fallbacks Added complete blue color palette (100-950) with CSS variables for theming support +14/-0
Bug fix	1 files AutoCompletion.js Add cleanup for debounce timer in AI autocompletion            src/lib/components/common/RichTextInput/AutoCompletion.js Added plugin view lifecycle method to properly clean up debounce timer on destroy Prevents memory leaks from lingering timers when the editor view is destroyed +7/-0
Formatting	2 files Evaluations.svelte Refine evaluations settings styling and spacing                    src/lib/components/admin/Settings/Evaluations.svelte Updated margin and border styling for consistency with design system Changed mb-2.5 to mt-0.5 mb-2.5 for section headers Updated border opacity from full to 30% (border-gray-100/30 and border-gray-850/30) +4/-4      CodeExecution.svelte Refine spacing and styling in code execution settings        src/lib/components/admin/Settings/CodeExecution.svelte Updated section header margins from mb-3.5 to mt-0.5 mb-2.5 for consistent spacing Changed horizontal rule border colors from border-gray-100/border-gray-850 to border-gray-100/30/border-gray-850/30 for lighter appearance Removed dark:bg-gray-900 class from multiple select and input elements for cleaner styling +11/-11
Additional files	101 files bug_report.yaml +7/-1      feature_request.yaml +23/-5    pull_request_template.md +12/-6    docker-build.yaml +6/-0      CHANGELOG.md +415/-0  LICENSE_NOTICE +11/-0    README.md +20/-45  config.py +538/-153 constants.py +6/-1      env.py +86/-7    functions.py +7/-1      main.py +424/-87 2f1211949ecc_update_message_and_channel_member_table.py +103/-0  37f288994c47_add_group_member_table.py +146/-0  38d63c18f30f_add_oauth_session_table.py +32/-4    3e0e00844bb0_add_knowledge_file_table.py +169/-0  90ef40d4714e_update_channel_and_channel_members_table.py +81/-0    a5c220713937_add_reply_to_id_column_to_message.py +34/-0    b10670c03dd5_update_user_table.py +251/-0  auths.py +9/-16    channels.py +556/-19 chats.py +193/-56 feedbacks.py +88/-2    files.py +47/-2    folders.py +15/-1    functions.py +28/-2    groups.py +273/-81 knowledge.py +137/-8  memories.py +1/-1      messages.py +199/-22 models.py +142/-8  notes.py +62/-9    oauth_sessions.py +32/-1    tools.py +3/-1      users.py +317/-57 external_document.py +7/-0      main.py +35/-70  mineru.py +522/-0  mistral.py +12/-10  youtube.py +11/-4    external.py +10/-14  utils.py +558/-272 chroma.py +3/-3      elasticsearch.py +3/-3      milvus.py +15/-7    milvus_multitenancy.py +281/-0  opensearch.py +3/-3      oracle23ai.py +1/-1      pgvector.py +105/-25 pinecone.py +2/-2      qdrant_multitenancy.py +7/-0      s3vector.py +10/-9    weaviate.py +340/-0  factory.py +18/-3    type.py +1/-0      utils.py +15/-1    azure.py +128/-0  external.py +20/-5    firecrawl.py +10/-18  google_pse.py +5/-0      main.py +21/-1    ollama.py +51/-0    perplexity_search.py +76/-0    utils.py +119/-58 audio.py +240/-30 auths.py +141/-42 channels.py +865/-149 chats.py +92/-42  configs.py +218/-10 evaluations.py +29/-27  files.py +25/-7    folders.py +72/-39  functions.py +13/-4    groups.py +77/-14  images.py +641/-313 knowledge.py +52/-179 memories.py +22/-12  models.py +168/-18 notes.py +16/-2    ollama.py +109/-153 openai.py +68/-71  prompts.py +9/-2      retrieval.py +473/-393 scim.py +21/-16  tasks.py +8/-0      tools.py +98/-11  users.py +117/-46 utils.py +0/-9      main.py +145/-70 utils.py +9/-0      tasks.py +4/-1      access_control.py +37/-12  audit.py +1/-1      auth.py +103/-50 chat.py +5/-1      files.py +115/-0  headers.py +11/-0    comfyui.py +123/-3  client.py +115/-0  middleware.py +871/-352 Additional files not shown

---