This pull request resolves issue #3023 by implementing a persistent, floating player for Text-to-Speech (TTS) playback, significantly improving the user experience.
Description
Previously, TTS audio would continue to play even after a user navigated away from the chat or performed another action, which could be confusing. This PR introduces a floating player that provides users with full manual control over the audio playback from anywhere in the application.
Key Changes
Centralized State Management: Introduced a new Svelte store (src/lib/stores/ttsStore.js) to globally manage the active Audio object.
Floating Player Component: Created a new component, src/lib/components/FloatingPlayer.svelte, which displays and controls the TTS playback. The player is persistent across all routes.
Component Integration:
Modified Message.svelte to use the new store, putting the audio object into the store when TTS is activated.
Modified the main +layout.svelte to include the <FloatingPlayer />, making it globally available.
This approach provides a robust and user-friendly solution to the problem outlined in the original issue.
I have read and agree to the Contributor License Agreement.
🔄 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/18193
**Author:** [@amithadityacp](https://github.com/amithadityacp)
**Created:** 10/9/2025
**Status:** ❌ Closed
**Base:** `main` ← **Head:** `feat/tts-floating-player`
---
### 📝 Commits (1)
- [`9768d0c`](https://github.com/open-webui/open-webui/commit/9768d0c7ee07e6ed91040bb6e4735fd952cc5eff) Fix: The sidebar no longer re-opens automatically
### 📊 Changes
**4 files changed** (+137 additions, -454 deletions)
<details>
<summary>View changed files</summary>
➕ `src/lib/components/chat/FloatingPlayer.svelte` (+60 -0)
📝 `src/lib/components/chat/Messages.svelte` (+68 -453)
➕ `src/lib/stores/ttsstore.js` (+5 -0)
📝 `src/routes/+layout.svelte` (+4 -1)
</details>
### 📄 Description
This pull request resolves issue #3023 by implementing a persistent, floating player for Text-to-Speech (TTS) playback, significantly improving the user experience.
### Description
Previously, TTS audio would continue to play even after a user navigated away from the chat or performed another action, which could be confusing. This PR introduces a floating player that provides users with full manual control over the audio playback from anywhere in the application.
### Key Changes
* **Centralized State Management:** Introduced a new Svelte store (`src/lib/stores/ttsStore.js`) to globally manage the active `Audio` object.
* **Floating Player Component:** Created a new component, `src/lib/components/FloatingPlayer.svelte`, which displays and controls the TTS playback. The player is persistent across all routes.
* **Component Integration:**
* Modified `Message.svelte` to use the new store, putting the audio object into the store when TTS is activated.
* Modified the main `+layout.svelte` to include the `<FloatingPlayer />`, making it globally available.
This approach provides a robust and user-friendly solution to the problem outlined in the original issue.
---
I have read and agree to the Contributor License Agreement.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/18193
Author: @amithadityacp
Created: 10/9/2025
Status: ❌ Closed
Base:
main← Head:feat/tts-floating-player📝 Commits (1)
9768d0cFix: The sidebar no longer re-opens automatically📊 Changes
4 files changed (+137 additions, -454 deletions)
View changed files
➕
src/lib/components/chat/FloatingPlayer.svelte(+60 -0)📝
src/lib/components/chat/Messages.svelte(+68 -453)➕
src/lib/stores/ttsstore.js(+5 -0)📝
src/routes/+layout.svelte(+4 -1)📄 Description
This pull request resolves issue #3023 by implementing a persistent, floating player for Text-to-Speech (TTS) playback, significantly improving the user experience.
Description
Previously, TTS audio would continue to play even after a user navigated away from the chat or performed another action, which could be confusing. This PR introduces a floating player that provides users with full manual control over the audio playback from anywhere in the application.
Key Changes
src/lib/stores/ttsStore.js) to globally manage the activeAudioobject.src/lib/components/FloatingPlayer.svelte, which displays and controls the TTS playback. The player is persistent across all routes.Message.svelteto use the new store, putting the audio object into the store when TTS is activated.+layout.svelteto include the<FloatingPlayer />, making it globally available.This approach provides a robust and user-friendly solution to the problem outlined in the original issue.
I have read and agree to the Contributor License Agreement.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.