[PR #23918] [MERGED] feat(ui): add citation source overflow badge #131104

Closed
opened 2026-05-21 16:08:45 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/23918
Author: @RomualdYT
Created: 4/21/2026
Status: Merged
Merged: 4/24/2026
Merged by: @tjbck

Base: devHead: codex/ui-citation-source-pill


📝 Commits (1)

  • e895785 feat(ui): add citation source overflow badge

📊 Changes

1 file changed (+8 additions, -0 deletions)

View changed files

📝 src/lib/components/chat/Messages/Citations.svelte (+8 -0)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request.

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

  • Target branch: Verify that the pull request targets the dev branch.
  • Description: Provide a concise description of the changes made in this pull request down below.
  • Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
  • Documentation: (Not required – UI micro-improvement)
  • Dependencies: No new dependencies introduced.
  • Testing: Manual testing performed (see below).
  • Agentic AI Code: Code reviewed and tested manually.
  • Code review: Self-review completed.
  • Design & Architecture: Minimal, non-invasive UI improvement.
  • Git Hygiene: Atomic change (1 file, minimal diff).
  • Title Prefix: fix

Description

This PR introduces a small UI improvement to the Sources button in Citations.svelte.

When more than 3 sources are available, the UI previously displayed only a limited stack of favicons, without indicating that additional sources existed.

This change adds a +N badge to the Sources button when there are more sources than can be visually represented.

As we discussed the first time (https://github.com/open-webui/open-webui/pull/23157) : First, The implementation was assisted by Claude Opus 4.6, then manually reviewed and has been tested on my side. I made this PR with Codex.

This improves:

  • User awareness of hidden sources
  • UX clarity without adding complexity
  • Visual consistency with common UI patterns

The implementation is intentionally minimal and follows the feedback from prior discussions (see related PR).


Testing

Before

  • Only up to 3 favicons displayed
  • No indication of additional hidden sources

After

  • Up to 3 favicons displayed
  • If more sources exist → a +N badge is shown

Steps to reproduce

  1. Generate a response with more than 3 sources
  2. Observe the Sources button
  3. Confirm that:
    • Favicons are still stacked (max 3)
    • A +N badge appears for remaining sources

Edge cases tested

  • Exactly 3 sources → no badge
  • Less than 3 sources → no badge
  • More than 3 sources → badge correctly reflects remaining count

Changelog Entry

Description

  • Add visual indicator for additional hidden sources in Citations.svelte via a +N badge on the Sources button.

Added

  • +N badge when more than 3 sources are present

Changed

  • Improved UX of the Sources button to better reflect the actual number of sources

Deprecated

  • N/A

Removed

  • N/A

Fixed

  • UI ambiguity where users could not tell if more than 3 sources were available

Security

  • N/A

Breaking Changes

  • None

Additional Information


Screenshots or Videos

Before
image

After
image


Contributor License Agreement

Note

Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.


🔄 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/23918 **Author:** [@RomualdYT](https://github.com/RomualdYT) **Created:** 4/21/2026 **Status:** ✅ Merged **Merged:** 4/24/2026 **Merged by:** [@tjbck](https://github.com/tjbck) **Base:** `dev` ← **Head:** `codex/ui-citation-source-pill` --- ### 📝 Commits (1) - [`e895785`](https://github.com/open-webui/open-webui/commit/e895785c5240ff698613857dec2fa3abaf3ac57b) feat(ui): add citation source overflow badge ### 📊 Changes **1 file changed** (+8 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/Citations.svelte` (+8 -0) </details> ### 📄 Description <!-- ⚠️ CRITICAL CHECKS FOR CONTRIBUTORS (READ, DON'T DELETE) ⚠️ 1. Target the `dev` branch. PRs targeting `main` will be automatically closed. 2. Do NOT delete the CLA section at the bottom. It is required for the bot to accept your PR. --> # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request. **Before submitting, make sure you've checked the following:** - [x] **Target branch:** Verify that the pull request targets the `dev` branch. - [x] **Description:** Provide a concise description of the changes made in this pull request down below. - [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. - [ ] **Documentation:** (Not required – UI micro-improvement) - [ ] **Dependencies:** No new dependencies introduced. - [x] **Testing:** Manual testing performed (see below). - [x] **Agentic AI Code:** Code reviewed and tested manually. - [x] **Code review:** Self-review completed. - [x] **Design & Architecture:** Minimal, non-invasive UI improvement. - [x] **Git Hygiene:** Atomic change (1 file, minimal diff). - [x] **Title Prefix:** fix --- ## Description This PR introduces a small UI improvement to the **Sources button in `Citations.svelte`**. When more than 3 sources are available, the UI previously displayed only a limited stack of favicons, without indicating that additional sources existed. This change adds a **`+N` badge** to the Sources button when there are more sources than can be visually represented. As we discussed the first time (https://github.com/open-webui/open-webui/pull/23157) : First, The implementation was assisted by Claude Opus 4.6, then manually reviewed and has been tested on my side. I made this PR with Codex. This improves: - **User awareness** of hidden sources - **UX clarity** without adding complexity - **Visual consistency** with common UI patterns The implementation is intentionally minimal and follows the feedback from prior discussions (see related PR). --- ## Testing ### Before - Only up to 3 favicons displayed - No indication of additional hidden sources ### After - Up to 3 favicons displayed - If more sources exist → a `+N` badge is shown ### Steps to reproduce 1. Generate a response with more than 3 sources 2. Observe the Sources button 3. Confirm that: - Favicons are still stacked (max 3) - A `+N` badge appears for remaining sources ### Edge cases tested - Exactly 3 sources → no badge - Less than 3 sources → no badge - More than 3 sources → badge correctly reflects remaining count --- # Changelog Entry ### Description - Add visual indicator for additional hidden sources in `Citations.svelte` via a `+N` badge on the Sources button. ### Added - `+N` badge when more than 3 sources are present ### Changed - Improved UX of the Sources button to better reflect the actual number of sources ### Deprecated - N/A ### Removed - N/A ### Fixed - UI ambiguity where users could not tell if more than 3 sources were available ### Security - N/A ### Breaking Changes - None --- ### Additional Information - Inspired by feedback from: https://github.com/open-webui/open-webui/pull/23157 - Scope intentionally kept minimal: - 1 file changed - ~8 insertions - No impact on backend or data structures --- ### Screenshots or Videos Before <img width="216" height="57" alt="image" src="https://github.com/user-attachments/assets/2b09bb62-295d-4d40-b788-4d314aeb6579" /> After <img width="206" height="54" alt="image" src="https://github.com/user-attachments/assets/85d0ae9d-e402-4f05-a4ce-c0ecf1d194bf" /> --- ### Contributor License Agreement - [x] By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. > [!NOTE] > Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in. --- <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-05-21 16:08:45 -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#131104