[PR #16075] [CLOSED] refac: Replace inline SVGs with Svelte components #24023

Closed
opened 2026-04-20 05:11:36 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/16075
Author: @silentoplayz
Created: 7/27/2025
Status: Closed

Base: devHead: refactor-inline-svgs


📝 Commits (3)

  • 691455a refac: Replace inline SVGs with Svelte components
  • 41bf89c revert: some changes that didn't make sense
  • 5a742fe .

📊 Changes

18 files changed (+243 additions, -618 deletions)

View changed files

📝 src/lib/components/AddConnectionModal.svelte (+2 -13)
📝 src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte (+11 -106)
📝 src/lib/components/admin/Users/UserList.svelte (+6 -40)
📝 src/lib/components/chat/MessageInput.svelte (+10 -69)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+26 -206)
📝 src/lib/components/chat/Settings/Account.svelte (+8 -48)
📝 src/lib/components/chat/Settings/Chats.svelte (+11 -59)
📝 src/lib/components/common/Tags/TagInput.svelte (+4 -25)
src/lib/components/icons/ArrowDown.svelte (+16 -0)
src/lib/components/icons/ArrowUp.svelte (+16 -0)
src/lib/components/icons/HandThumbDown.svelte (+17 -0)
src/lib/components/icons/HandThumbUp.svelte (+17 -0)
src/lib/components/icons/PlayCircle.svelte (+20 -0)
src/lib/components/icons/SpeakerWave.svelte (+19 -0)
src/lib/components/icons/SpeakerXMark.svelte (+19 -0)
src/lib/components/icons/Stop.svelte (+16 -0)
src/lib/components/icons/Trash.svelte (+18 -0)
📝 src/lib/components/layout/ChatsModal.svelte (+7 -52)

📄 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

  • Refactored modal components by replacing inline SVG declarations for common UI elements with imported Svelte components. This improves code readability, maintainability, and reusability of icons.

Added

  • New Svelte components for various icons under src/lib/components/icons/, which include the following additions:
  + src/lib/components/icons/SpeakerWave.svelte
  + src/lib/components/icons/SpeakerXMark.svelte
  + src/lib/components/icons/HandThumbUp.svelte
  + src/lib/components/icons/HandThumbDown.svelte
  + src/lib/components/icons/PlayCircle.svelte
  + src/lib/components/icons/Stop.svelte
  + src/lib/components/icons/ArrowDown.svelte
  + src/lib/components/icons/ArrowUp.svelte
  + src/lib/components/icons/Trash.svelte

Changed

  • Replaced inline <svg> tags with imported Svelte components (e.g., <ArrowPath />, <Trash />) in the following files:
    src/lib/components/AddConnectionModal.svelte
    src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte
    src/lib/components/admin/Users/UserList.svelte
    src/lib/components/chat/MessageInput.svelte
    src/lib/components/chat/Messages/ResponseMessage.svelte
    src/lib/components/chat/Settings/Account.svelte
    src/lib/components/chat/Settings/Chats.svelte
    src/lib/components/common/Tags/TagInput.svelte
    src/lib/components/layout/ChatsModal.svelte

Removed

  • Removed inline SVG definitions from the refactored components.

Additional Information

  • This change is part of a larger effort to improve the frontend codebase's quality and consistency.

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/16075 **Author:** [@silentoplayz](https://github.com/silentoplayz) **Created:** 7/27/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `refactor-inline-svgs` --- ### 📝 Commits (3) - [`691455a`](https://github.com/open-webui/open-webui/commit/691455adecd6d1a11e1ce913b2729ce81fc79643) refac: Replace inline SVGs with Svelte components - [`41bf89c`](https://github.com/open-webui/open-webui/commit/41bf89ccda1df59e1ec59688c52c6be3b59fb308) revert: some changes that didn't make sense - [`5a742fe`](https://github.com/open-webui/open-webui/commit/5a742fe2eabb977a3bafda401c431ba3011201fb) . ### 📊 Changes **18 files changed** (+243 additions, -618 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/AddConnectionModal.svelte` (+2 -13) 📝 `src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte` (+11 -106) 📝 `src/lib/components/admin/Users/UserList.svelte` (+6 -40) 📝 `src/lib/components/chat/MessageInput.svelte` (+10 -69) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+26 -206) 📝 `src/lib/components/chat/Settings/Account.svelte` (+8 -48) 📝 `src/lib/components/chat/Settings/Chats.svelte` (+11 -59) 📝 `src/lib/components/common/Tags/TagInput.svelte` (+4 -25) ➕ `src/lib/components/icons/ArrowDown.svelte` (+16 -0) ➕ `src/lib/components/icons/ArrowUp.svelte` (+16 -0) ➕ `src/lib/components/icons/HandThumbDown.svelte` (+17 -0) ➕ `src/lib/components/icons/HandThumbUp.svelte` (+17 -0) ➕ `src/lib/components/icons/PlayCircle.svelte` (+20 -0) ➕ `src/lib/components/icons/SpeakerWave.svelte` (+19 -0) ➕ `src/lib/components/icons/SpeakerXMark.svelte` (+19 -0) ➕ `src/lib/components/icons/Stop.svelte` (+16 -0) ➕ `src/lib/components/icons/Trash.svelte` (+18 -0) 📝 `src/lib/components/layout/ChatsModal.svelte` (+7 -52) </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 - Refactored modal components by replacing inline SVG declarations for common UI elements with imported Svelte components. This improves code readability, maintainability, and reusability of icons. ### Added - New Svelte components for various icons under `src/lib/components/icons/`, which include the following additions: ``` + src/lib/components/icons/SpeakerWave.svelte + src/lib/components/icons/SpeakerXMark.svelte + src/lib/components/icons/HandThumbUp.svelte + src/lib/components/icons/HandThumbDown.svelte + src/lib/components/icons/PlayCircle.svelte + src/lib/components/icons/Stop.svelte + src/lib/components/icons/ArrowDown.svelte + src/lib/components/icons/ArrowUp.svelte + src/lib/components/icons/Trash.svelte ``` ### Changed - Replaced inline `<svg>` tags with imported Svelte components (e.g., `<ArrowPath />`, `<Trash />`) in the following files: ``` src/lib/components/AddConnectionModal.svelte src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte src/lib/components/admin/Users/UserList.svelte src/lib/components/chat/MessageInput.svelte src/lib/components/chat/Messages/ResponseMessage.svelte src/lib/components/chat/Settings/Account.svelte src/lib/components/chat/Settings/Chats.svelte src/lib/components/common/Tags/TagInput.svelte src/lib/components/layout/ChatsModal.svelte ``` ### Removed - Removed inline SVG definitions from the refactored components. ### Additional Information - This change is part of a larger effort to improve the frontend codebase's quality and consistency. ### 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 2026-04-20 05:11:37 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#24023