[GH-ISSUE #23527] feat: [Feature Request] Display Active Chat Title in the Top Header (UX improvement like ChatGPT/Claude) #74610

New Issue

GiteaMirror · 2026-05-13T07:24:48-05:00

GiteaMirror commented

2026-05-13 07:24:48 -05:00

Originally created by @tyepez on GitHub (Apr 9, 2026).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/23527

Check Existing Issues

I have searched for all existing open AND closed issues and discussions for similar requests. I have found none that is comparable to my request.

Verify Feature Scope

I have read through and understood the scope definition for feature requests in the Issues section. I believe my feature request meets the definition and belongs in the Issues section instead of the Discussions.

Problem Description

Currently, the active chat title is only visible in the left sidebar. When navigating through multiple chats or when the sidebar is collapsed (especially on mobile devices, smaller screens, or when focusing on writing), users lose context of the current conversation. Major AI platforms (like ChatGPT and Claude) display the active chat title prominently at the top of the chat window to maintain context.

Desired Solution you'd like

It would be a great UX improvement to display the active chat title in the top header (nav.sticky), just below or next to the Model Selector.
It could be styled in a subtle way (e.g., smaller font size, lower opacity, muted text) so it doesn't compete visually with the Model Selector, but remains visible enough to provide context. Since this is a minor UI addition, it should be trivial and quick to implement natively in Svelte, as the chat context is already available in the state.

Alternatives Considered

Currently, the only way to achieve this is by using a third-party browser extension (like Tampermonkey) to inject a custom JS script that fetches the title via the API and appends it to the DOM. While this works, it's not a scalable solution for self-hosted instances with multiple users. Custom CSS injection via the Admin Panel is also insufficient since the title text doesn't natively exist in the header's HTML structure.

Additional Context

As a proof of concept, here is a lightweight vanilla JS workaround currently being used to achieve this via the API, proving that the data is readily available:

Click to see Proof of Concept JS workaround

// This fetches the title using the existing API and injects it below the model selector
async function injectHeaderTitle() {
    const path = window.location.pathname;
    const chatId = path.includes('/c/') ? path.split('/c/')[1] : null;
    if (!chatId) return;

    try {
        const res = await fetch(`/api/v1/chats/${chatId}`, { credentials: 'include' });
        const data = await res.json();
        if (!data?.title) return;

        const modelContainer = document.querySelector('.flex.flex-col.w-full.items-start');
        if (modelContainer) {
            let titleEl = document.createElement('div');
            titleEl.style.cssText = 'font-size: 0.72rem; opacity: 0.55; text-overflow: ellipsis; max-width: 400px; overflow: hidden; white-space: nowrap; margin-top: 1px; padding-left: 2px;';
            titleEl.textContent = data.title;
            modelContainer.appendChild(titleEl);
        }
    } catch (e) {
        console.error("Failed to fetch chat title");
    }
}

Originally created by @tyepez on GitHub (Apr 9, 2026). Original GitHub issue: https://github.com/open-webui/open-webui/issues/23527 ### Check Existing Issues - [x] I have searched for all existing **open AND closed** issues and discussions for similar requests. I have found none that is comparable to my request. ### Verify Feature Scope - [x] I have read through and understood the scope definition for feature requests in the Issues section. I believe my feature request meets the definition and belongs in the Issues section instead of the Discussions. ### Problem Description Currently, the active chat title is only visible in the left sidebar. When navigating through multiple chats or when the sidebar is collapsed (especially on mobile devices, smaller screens, or when focusing on writing), users lose context of the current conversation. Major AI platforms (like ChatGPT and Claude) display the active chat title prominently at the top of the chat window to maintain context. ### Desired Solution you'd like It would be a great UX improvement to display the active chat title in the top header (`nav.sticky`), just below or next to the Model Selector. It could be styled in a subtle way (e.g., smaller font size, lower opacity, muted text) so it doesn't compete visually with the Model Selector, but remains visible enough to provide context. Since this is a minor UI addition, it should be trivial and quick to implement natively in Svelte, as the chat context is already available in the state. ### Alternatives Considered Currently, the only way to achieve this is by using a third-party browser extension (like Tampermonkey) to inject a custom JS script that fetches the title via the API and appends it to the DOM. While this works, it's not a scalable solution for self-hosted instances with multiple users. Custom CSS injection via the Admin Panel is also insufficient since the title text doesn't natively exist in the header's HTML structure. <img width="711" height="422" alt="Image" src="https://github.com/user-attachments/assets/94d3c654-5b2b-418b-9f6c-c11df4693a5c" /> ### Additional Context As a proof of concept, here is a lightweight vanilla JS workaround currently being used to achieve this via the API, proving that the data is readily available: <details> <summary>Click to see Proof of Concept JS workaround</summary> ```javascript // This fetches the title using the existing API and injects it below the model selector async function injectHeaderTitle() { const path = window.location.pathname; const chatId = path.includes('/c/') ? path.split('/c/')[1] : null; if (!chatId) return; try { const res = await fetch(`/api/v1/chats/${chatId}`, { credentials: 'include' }); const data = await res.json(); if (!data?.title) return; const modelContainer = document.querySelector('.flex.flex-col.w-full.items-start'); if (modelContainer) { let titleEl = document.createElement('div'); titleEl.style.cssText = 'font-size: 0.72rem; opacity: 0.55; text-overflow: ellipsis; max-width: 400px; overflow: hidden; white-space: nowrap; margin-top: 1px; padding-left: 2px;'; titleEl.textContent = data.title; modelContainer.appendChild(titleEl); } } catch (e) { console.error("Failed to fetch chat title"); } }

GiteaMirror commented

2026-05-13 07:24:50 -05:00

@nightt5879 commented on GitHub (Apr 13, 2026):

Hi, I’m interested in working on this feature. I’ll inspect the current header/chat state flow first and see how the active chat title can be surfaced cleanly in the UI. Happy to open a PR if this is still available.

@nightt5879 commented on GitHub (Apr 13, 2026): Hi, I’m interested in working on this feature. I’ll inspect the current header/chat state flow first and see how the active chat title can be surfaced cleanly in the UI. Happy to open a PR if this is still available.

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#74610