diff --git a/application/single_app/config.py b/application/single_app/config.py index 86e9a5c32..4b6fef4b6 100644 --- a/application/single_app/config.py +++ b/application/single_app/config.py @@ -95,7 +95,7 @@ EXECUTOR_TYPE = 'thread' EXECUTOR_MAX_WORKERS = 30 SESSION_TYPE = 'filesystem' -VERSION = "0.250.101" +VERSION = "0.250.102" IS_DEVELOPMENT = is_development_env_enabled() SESSION_COOKIE_SAMESITE = os.getenv('SESSION_COOKIE_SAMESITE', 'Lax') diff --git a/application/single_app/static/js/chat/chat-message-export.js b/application/single_app/static/js/chat/chat-message-export.js index c9f722679..27481725b 100644 --- a/application/single_app/static/js/chat/chat-message-export.js +++ b/application/single_app/static/js/chat/chat-message-export.js @@ -30,6 +30,14 @@ function getMessageMarkdown(messageDiv, role) { return ''; } +function getMessagePlainText(messageDiv) { + const messageText = messageDiv.querySelector('.message-text'); + if (!messageText) { + return ''; + } + return String(messageText.innerText || messageText.textContent || '').trim(); +} + /** * Get the sender label from a message div. */ @@ -187,6 +195,33 @@ export function exportMessageAsMarkdown(messageDiv, messageId, role) { showToast('Message exported as Markdown.', 'success'); } +/** + * Export a single message as an MP3 using the active TTS voice and speed. + */ +export async function exportMessageAsAudio(messageDiv, messageId, role) { + if (!window.appSettings?.enable_text_to_speech) { + showToast('Text-to-speech is not enabled.', 'warning'); + return; + } + + const content = getMessagePlainText(messageDiv); + if (!content) { + showToast('No message content to export.', 'warning'); + return; + } + + try { + const { synthesizeSpeechBlob } = await import('./chat-tts.js'); + const audioBlob = await synthesizeSpeechBlob(content); + const filename = `message_audio_${filenameTimestamp()}.mp3`; + downloadBlob(audioBlob, filename); + showToast('Message exported as audio.', 'success'); + } catch (err) { + console.error('Error exporting message to audio:', err); + showToast(err.message || 'Failed to export message as audio.', 'danger'); + } +} + /** * Export a single message as a Word (.docx) file by calling the backend * endpoint which uses python-docx to generate the document. diff --git a/application/single_app/static/js/chat/chat-messages.js b/application/single_app/static/js/chat/chat-messages.js index 1e6822c71..5138acf16 100644 --- a/application/single_app/static/js/chat/chat-messages.js +++ b/application/single_app/static/js/chat/chat-messages.js @@ -589,6 +589,14 @@ function isWorkspaceDocumentSearchEnabled() { } const INLINE_ASSISTANT_EXPORT_ACTIONS = Object.freeze({ + audio: { + actionName: 'exportMessageAsAudio', + buttonClass: 'inline-export-audio-btn', + iconClass: 'bi bi-file-earmark-music', + label: 'Create Audio File', + pendingLabel: 'Creating Audio File...', + title: 'Create Audio File', + }, powerpoint: { actionName: 'exportMessageAsPowerPoint', buttonClass: 'inline-export-ppt-btn', @@ -4769,6 +4777,10 @@ function renderReplyQuoteHtml(fullMessageObject = null) { function attachMessageExportActionListeners(messageDiv, role) { const actionMappings = [ + { + selectors: ['.dropdown-export-audio-btn', '.inline-export-audio-btn'], + actionName: 'exportMessageAsAudio', + }, { selectors: ['.dropdown-export-md-btn', '.inline-export-md-btn'], actionName: 'exportMessageAsMarkdown', @@ -4796,6 +4808,9 @@ function renderReplyQuoteHtml(fullMessageObject = null) { messageDiv.querySelectorAll(selector).forEach(button => { button.addEventListener('click', (event) => { event.preventDefault(); + if (button.getAttribute('aria-busy') === 'true') { + return; + } void triggerMessageExportAction(messageDiv, role, actionName, button); }); }); @@ -4911,11 +4926,15 @@ export function appendMessage( `; const maskButtonHtml = buildMaskControlsHtml(messageId, maskState); + const audioExportMenuItemHtml = window.appSettings?.enable_text_to_speech + ? '
  • Export to Audio
    • ' + : ''; const exportMenuItemsHtml = renderCompletedAssistantActions ? `
  • Export to Markdown
  • Export to Word
  • Export to PowerPoint
    • + ${audioExportMenuItemHtml}
  • Use as Prompt
  • Open in Email
    • ` : ''; const forkConversationMenuItemHtml = shouldRenderConversationForkAction(messageId, fullMessageObject) @@ -5417,6 +5436,9 @@ export function appendMessage( if (sender === "You") { const metadataContainerId = `metadata-${messageId || Date.now()}`; const maskState = getMaskStateFromMetadata(fullMessageObject?.metadata); + const audioExportMenuItemHtml = window.appSettings?.enable_text_to_speech + ? '
  • Export to Audio
    • ' + : ''; messageFooterHtml = `
    @@ -5433,6 +5455,7 @@ export function appendMessage(
  • Export to Markdown
  • Export to Word
  • Export to PowerPoint
    • + ${audioExportMenuItemHtml}
  • Use as Prompt
  • Open in Email
    • diff --git a/application/single_app/static/js/chat/chat-tts.js b/application/single_app/static/js/chat/chat-tts.js index dac562b27..acf264510 100644 --- a/application/single_app/static/js/chat/chat-tts.js +++ b/application/single_app/static/js/chat/chat-tts.js @@ -237,33 +237,38 @@ export async function playTTS(messageId, text) { } /** - * Synthesize a text chunk and return Audio element + * Synthesize text with the active voice and speed and return an MP3 Blob. + */ +export async function synthesizeSpeechBlob(text) { + const response = await fetch('/api/chat/tts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + text: text, + voice: ttsVoice, + speed: ttsSpeed + }) + }); + + if (!response.ok) { + const errorData = await response.json().catch(() => null); + throw new Error(errorData?.error || 'Failed to generate speech'); + } + + return response.blob(); +} + +/** + * Synthesize a text chunk and return an Audio element. */ async function synthesizeChunk(text, messageId) { try { - const response = await fetch('/api/chat/tts', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - text: text, - voice: ttsVoice, - speed: ttsSpeed - }) - }); - - if (!response.ok) { - const errorData = await response.json(); - throw new Error(errorData.error || 'Failed to generate speech'); - } - - // Get audio blob - const audioBlob = await response.blob(); + const audioBlob = await synthesizeSpeechBlob(text); const audioUrl = URL.createObjectURL(audioBlob); - + return new Audio(audioUrl); - } catch (error) { console.error('Error synthesizing chunk:', error); throw error; diff --git a/docs/explanation/features/MESSAGE_AUDIO_EXPORT.md b/docs/explanation/features/MESSAGE_AUDIO_EXPORT.md new file mode 100644 index 000000000..988a7375a --- /dev/null +++ b/docs/explanation/features/MESSAGE_AUDIO_EXPORT.md @@ -0,0 +1,67 @@ +# Message Audio Export + +Version implemented: **0.250.102** + +Fixed/Implemented in version: **0.250.102** + +## Overview + +SimpleChat users can export an individual user or assistant chat message as an MP3 audio file. The export reuses the chat text-to-speech service and the user's selected voice and playback speed. + +Related issue: microsoft/simplechat#628 + +## Dependencies + +- `application/single_app/config.py` version `0.250.102` +- Azure Speech Service configured in Admin Settings +- **Enable Text-to-Speech Chat Output** enabled +- A browser that supports Blob downloads + +## Technical Specifications + +### Architecture + +1. The message action reads visible plain text from the selected message. +2. The browser sends the text, active voice, and active speed to the existing authenticated `POST /api/chat/tts` endpoint. +3. Azure Speech synthesizes `Audio48Khz192KBitRateMonoMp3` output. +4. The browser downloads the returned `audio/mpeg` Blob with a timestamped `.mp3` filename. + +SimpleChat does not save generated audio to Cosmos DB or Blob Storage. The audio bytes are transient between Azure Speech, the application response, and the user's browser download. + +### Files + +- `application/single_app/static/js/chat/chat-tts.js` provides shared MP3 Blob synthesis with the active TTS preferences. +- `application/single_app/static/js/chat/chat-message-export.js` converts visible message text into a downloadable MP3. +- `application/single_app/static/js/chat/chat-messages.js` adds the feature-gated message actions. +- `application/single_app/route_backend_tts.py` remains the authenticated synthesis endpoint. + +### Security and access + +- The action is rendered only when `enable_text_to_speech` is enabled. +- The backend endpoint remains protected by the backend TTS Blueprint user policy and route-level authentication decorators. +- The browser sends message text for synthesis; it does not send caller-selected conversation, workspace, or user identifiers. +- Service failures return client-safe errors through existing Bootstrap toast notifications. + +## Usage Instructions + +1. Configure Azure Speech Service in **Admin Settings**. +2. Enable **Text-to-Speech Chat Output**. +3. Open a chat containing a completed user or assistant message. +4. Open the message's **More actions** menu. +5. Select **Export to Audio**. +6. Wait for synthesis to complete and save the downloaded `message_audio_YYYYMMDD_HHMMSS.mp3` file. + +The downloaded audio uses the voice and speed selected in the chat text-to-speech controls when the export begins. Speech-to-text input can remain disabled because message audio export is a text-to-speech feature. + +## Testing and Validation + +- `functional_tests/test_message_audio_export.py` validates the MP3 endpoint contract, active preference usage, feature gating, menu wiring, and version. +- `ui_tests/test_chat_message_audio_export.py` validates browser synthesis and downloads for user and assistant messages and verifies disabled deployments cannot invoke synthesis through the export function. +- Existing text-to-speech tests continue to cover playback, autoplay, voice selection, and speed formatting. + +## Known Limitations + +- MP3 is the only export format in this version. +- Azure Speech configuration, throttling, quotas, supported voices, and synthesis limits apply. +- Only visible message text is spoken. Markdown syntax, HTML markup, hidden metadata, and non-text generated artifacts are not included. +- Streaming assistant messages expose the action only after the message is complete. diff --git a/docs/explanation/release_notes.md b/docs/explanation/release_notes.md index 3b6ad1df7..40931bd0d 100644 --- a/docs/explanation/release_notes.md +++ b/docs/explanation/release_notes.md @@ -2,6 +2,15 @@ For feature-focused and fix-focused drill-downs by version, see [Features by Version](/explanation/features/) and [Fixes by Version](/explanation/fixes/). +### **(v0.250.102)** + +#### New Features + +* **Per-Message Audio Export** + * Users can export completed user and assistant chat messages as MP3 audio when text-to-speech is enabled. + * Downloads reuse the active Azure Speech voice and speed, include only visible message text, and remain transient without storing generated audio in SimpleChat. + * (Ref: microsoft/simplechat#628, `chat-tts.js`, `chat-message-export.js`, `chat-messages.js`, `MESSAGE_AUDIO_EXPORT.md`) + ### **(v0.250.101)** #### New Features diff --git a/functional_tests/test_chat_tts_autoplay_toggle.py b/functional_tests/test_chat_tts_autoplay_toggle.py index dfc8947ea..34fa57124 100644 --- a/functional_tests/test_chat_tts_autoplay_toggle.py +++ b/functional_tests/test_chat_tts_autoplay_toggle.py @@ -2,7 +2,7 @@ # test_chat_tts_autoplay_toggle.py """ Functional test for chat AI voice response autoplay toggle. -Version: 0.242.048 +Version: 0.250.102 Implemented in: 0.242.048 This test ensures the chat AI voice response toggle enables text-to-speech @@ -30,7 +30,7 @@ def test_chat_tts_autoplay_toggle_enables_tts_state(): config_content = read_text(CONFIG_FILE) chat_tts_content = read_text(CHAT_TTS_JS) - assert 'VERSION = "0.242.048"' in config_content + assert 'VERSION = "0.250.102"' in config_content assert "ttsEnabled = Boolean(settings.ttsEnabled || settings.ttsAutoplay);" in chat_tts_content assert "const previousTTSEnabled = ttsEnabled;" in chat_tts_content assert "if (ttsAutoplay) {\n ttsEnabled = true;\n }" in chat_tts_content diff --git a/functional_tests/test_message_audio_export.py b/functional_tests/test_message_audio_export.py new file mode 100644 index 000000000..49432c9c3 --- /dev/null +++ b/functional_tests/test_message_audio_export.py @@ -0,0 +1,96 @@ +# test_message_audio_export.py +#!/usr/bin/env python3 +""" +Functional test for per-message MP3 audio export. +Version: 0.250.102 +Implemented in: 0.250.102 + +This test ensures user and assistant messages expose a text-to-speech-gated +audio export that downloads MP3 bytes using the active TTS voice and speed. +""" + +from pathlib import Path + + +REPO_ROOT = Path(__file__).resolve().parents[1] +CONFIG_FILE = REPO_ROOT / "application" / "single_app" / "config.py" +EXPORT_FILE = REPO_ROOT / "application" / "single_app" / "static" / "js" / "chat" / "chat-message-export.js" +MESSAGES_FILE = REPO_ROOT / "application" / "single_app" / "static" / "js" / "chat" / "chat-messages.js" +TTS_FILE = REPO_ROOT / "application" / "single_app" / "static" / "js" / "chat" / "chat-tts.js" +TTS_ROUTE_FILE = REPO_ROOT / "application" / "single_app" / "route_backend_tts.py" + + +def read_text(path: Path) -> str: + """Read a repository file as UTF-8 text.""" + return path.read_text(encoding="utf-8") + + +def test_audio_export_uses_existing_mp3_tts_contract(): + """Verify audio export reuses the authenticated MP3 synthesis endpoint.""" + tts_source = read_text(TTS_FILE) + route_source = read_text(TTS_ROUTE_FILE) + + assert "export async function synthesizeSpeechBlob(text)" in tts_source + assert "fetch('/api/chat/tts'" in tts_source + assert "voice: ttsVoice" in tts_source + assert "speed: ttsSpeed" in tts_source + assert "return response.blob();" in tts_source + assert "Audio48Khz192KBitRateMonoMp3" in route_source + assert "mimetype='audio/mpeg'" in route_source + assert "as_attachment=False" in route_source + + +def test_audio_export_downloads_visible_message_text(): + """Verify the browser downloads visible message text as a timestamped MP3.""" + export_source = read_text(EXPORT_FILE) + + assert "function getMessagePlainText(messageDiv)" in export_source + assert "messageText.innerText || messageText.textContent" in export_source + assert "export async function exportMessageAsAudio(messageDiv, messageId, role)" in export_source + assert "window.appSettings?.enable_text_to_speech" in export_source + assert "const { synthesizeSpeechBlob } = await import('./chat-tts.js');" in export_source + assert "const audioBlob = await synthesizeSpeechBlob(content);" in export_source + assert "message_audio_${filenameTimestamp()}.mp3" in export_source + assert "downloadBlob(audioBlob, filename);" in export_source + + +def test_audio_export_menu_is_gated_for_user_and_assistant_messages(): + """Verify both message roles expose the action only under the TTS flag.""" + messages_source = read_text(MESSAGES_FILE) + + assert "actionName: 'exportMessageAsAudio'" in messages_source + assert "selectors: ['.dropdown-export-audio-btn', '.inline-export-audio-btn']" in messages_source + assert messages_source.count("const audioExportMenuItemHtml = window.appSettings?.enable_text_to_speech") == 2 + assert messages_source.count("dropdown-export-audio-btn") >= 3 + assert messages_source.count("${audioExportMenuItemHtml}") == 2 + assert 'data-default-label="Export to Audio"' in messages_source + assert 'data-pending-label="Creating Audio File..."' in messages_source + + +def test_audio_export_version_is_current(): + """Verify the feature version is recorded in application configuration.""" + assert 'VERSION = "0.250.102"' in read_text(CONFIG_FILE) + + +if __name__ == "__main__": + tests = [ + test_audio_export_uses_existing_mp3_tts_contract, + test_audio_export_downloads_visible_message_text, + test_audio_export_menu_is_gated_for_user_and_assistant_messages, + test_audio_export_version_is_current, + ] + results = [] + + for test in tests: + print(f"\nTesting {test.__name__}...") + try: + test() + print("Test passed") + results.append(True) + except Exception as ex: + print(f"Test failed: {ex}") + results.append(False) + + passed = sum(results) + print(f"\nResults: {passed}/{len(results)} tests passed") + raise SystemExit(0 if all(results) else 1) diff --git a/functional_tests/test_tts_speech_speed_prosody_rate.py b/functional_tests/test_tts_speech_speed_prosody_rate.py index cf73452c5..e627b73ec 100644 --- a/functional_tests/test_tts_speech_speed_prosody_rate.py +++ b/functional_tests/test_tts_speech_speed_prosody_rate.py @@ -2,7 +2,7 @@ #!/usr/bin/env python3 """ Functional test for TTS speech speed prosody rate formatting. -Version: 0.241.102 +Version: 0.250.102 Implemented in: 0.241.102 This test ensures that chat text-to-speech speed multipliers are translated diff --git a/ui_tests/test_chat_message_audio_export.py b/ui_tests/test_chat_message_audio_export.py new file mode 100644 index 000000000..0fdac072e --- /dev/null +++ b/ui_tests/test_chat_message_audio_export.py @@ -0,0 +1,230 @@ +# test_chat_message_audio_export.py +""" +UI test for per-message MP3 audio export. +Version: 0.250.102 +Implemented in: 0.250.102 + +This test ensures user and assistant message text is synthesized with the +active TTS voice and speed and downloaded as MP3 files in the browser. +""" + +import json +import re +from pathlib import Path + +import pytest + + +playwright_sync_api = pytest.importorskip("playwright.sync_api") + +REPO_ROOT = Path(__file__).resolve().parents[1] +EXPORT_FILE = REPO_ROOT / "application" / "single_app" / "static" / "js" / "chat" / "chat-message-export.js" +TTS_FILE = REPO_ROOT / "application" / "single_app" / "static" / "js" / "chat" / "chat-tts.js" + + +def load_tts_script(): + """Adapt the real TTS module for an isolated browser page.""" + source = TTS_FILE.read_text(encoding="utf-8") + source = source.replace( + "import { showToast } from './chat-toast.js';", + "var showToast = (...args) => window.__toastMessages.push(args);", + ) + source = re.sub(r"^export\s+", "", source, flags=re.MULTILINE) + source += "\nwindow.__testTTSModule = { initializeTTS, synthesizeSpeechBlob };\n" + return source + + +def load_export_script(): + """Adapt the real message export module for an isolated browser page.""" + source = EXPORT_FILE.read_text(encoding="utf-8") + source = source.replace( + 'import { showToast } from "./chat-toast.js";', + "var showToast = (...args) => window.__toastMessages.push(args);", + ) + source = source.replace( + "const { synthesizeSpeechBlob } = await import('./chat-tts.js');", + "const { synthesizeSpeechBlob } = window.__testTTSModule;", + ) + source = re.sub(r"^export\s+", "", source, flags=re.MULTILINE) + source += "\nwindow.__testMessageExportModule = { exportMessageAsAudio };\n" + return source + + +@pytest.mark.ui +def test_user_and_assistant_messages_download_audio_with_active_preferences(): + """Validate the complete browser synthesis and MP3 download workflow.""" + playwright = playwright_sync_api.sync_playwright().start() + browser = playwright.chromium.launch() + context = browser.new_context(viewport={"width": 1280, "height": 800}) + page = context.new_page() + + try: + page.set_content( + """ +
    +
    +
    User asks about quarterly results.
    +
    +
    + +
    + Quarterly results improved by 12%. +
    +
    +
    + """ + ) + page.add_script_tag( + content=f""" + window.appSettings = {{ enable_text_to_speech: true }}; + window.__toastMessages = []; + window.__ttsRequests = []; + window.__downloads = []; + window.__createdBlobs = []; + + const originalCreateElement = document.createElement.bind(document); + document.createElement = (tagName, options) => {{ + const element = originalCreateElement(tagName, options); + if (String(tagName).toLowerCase() === 'a') {{ + element.click = () => window.__downloads.push({{ + filename: element.download, + href: element.href, + }}); + }} + return element; + }}; + + URL.createObjectURL = (blob) => {{ + const url = `blob:audio-${{window.__createdBlobs.length + 1}}`; + window.__createdBlobs.push({{ + url, + size: blob.size, + type: blob.type, + }}); + return url; + }}; + URL.revokeObjectURL = () => {{}}; + + window.fetch = async (url, init = {{}}) => {{ + if (String(url) === '/api/user/settings') {{ + return new Response( + {json.dumps(json.dumps({"settings": {"ttsVoice": "en-US-AvaMultilingualNeural", "ttsSpeed": 1.25}}))}, + {{ status: 200, headers: {{ 'Content-Type': 'application/json' }} }} + ); + }} + + window.__ttsRequests.push({{ + url: String(url), + method: String(init.method || 'GET'), + body: JSON.parse(String(init.body || '{{}}')), + }}); + return new Response( + new Uint8Array([73, 68, 51, 4]), + {{ status: 200, headers: {{ 'Content-Type': 'audio/mpeg' }} }} + ); + }}; + """ + ) + page.add_script_tag(content=load_tts_script()) + page.add_script_tag(content=load_export_script()) + + page.evaluate( + """ + async () => { + await window.__testTTSModule.initializeTTS(); + await window.__testMessageExportModule.exportMessageAsAudio( + document.getElementById('user-message'), + 'user-1', + 'user' + ); + await window.__testMessageExportModule.exportMessageAsAudio( + document.getElementById('assistant-message'), + 'assistant-1', + 'assistant' + ); + } + """ + ) + + requests = page.evaluate("() => window.__ttsRequests") + downloads = page.evaluate("() => window.__downloads") + created_blobs = page.evaluate("() => window.__createdBlobs") + toast_messages = page.evaluate("() => window.__toastMessages") + + assert requests == [ + { + "url": "/api/chat/tts", + "method": "POST", + "body": { + "text": "User asks about quarterly results.", + "voice": "en-US-AvaMultilingualNeural", + "speed": 1.25, + }, + }, + { + "url": "/api/chat/tts", + "method": "POST", + "body": { + "text": "Quarterly results improved by 12%.", + "voice": "en-US-AvaMultilingualNeural", + "speed": 1.25, + }, + }, + ] + assert len(downloads) == 2 + assert all(re.fullmatch(r"message_audio_\d{8}_\d{6}\.mp3", item["filename"]) for item in downloads) + assert created_blobs == [ + {"url": "blob:audio-1", "size": 4, "type": "audio/mpeg"}, + {"url": "blob:audio-2", "size": 4, "type": "audio/mpeg"}, + ] + assert toast_messages.count(["Message exported as audio.", "success"]) == 2 + finally: + context.close() + browser.close() + playwright.stop() + + +@pytest.mark.ui +def test_audio_export_is_blocked_when_text_to_speech_is_disabled(): + """Validate direct calls cannot bypass the frontend feature flag.""" + playwright = playwright_sync_api.sync_playwright().start() + browser = playwright.chromium.launch() + context = browser.new_context() + page = context.new_page() + + try: + page.set_content('
    Do not synthesize.
    ') + page.add_script_tag( + content=""" + window.appSettings = { enable_text_to_speech: false }; + window.__toastMessages = []; + window.__synthesisCalled = false; + window.__testTTSModule = { + synthesizeSpeechBlob: async () => { + window.__synthesisCalled = true; + return new Blob([], { type: 'audio/mpeg' }); + }, + }; + """ + ) + page.add_script_tag(content=load_export_script()) + page.evaluate( + """ + async () => { + await window.__testMessageExportModule.exportMessageAsAudio( + document.getElementById('message'), + 'message-1', + 'user' + ); + } + """ + ) + + assert page.evaluate("() => window.__synthesisCalled") is False + assert page.evaluate("() => window.__toastMessages") == [ + ["Text-to-speech is not enabled.", "warning"] + ] + finally: + context.close() + browser.close() + playwright.stop() diff --git a/ui_tests/test_chat_tts_autoplay_toggle.py b/ui_tests/test_chat_tts_autoplay_toggle.py index 65cffac19..2cfdff478 100644 --- a/ui_tests/test_chat_tts_autoplay_toggle.py +++ b/ui_tests/test_chat_tts_autoplay_toggle.py @@ -1,7 +1,7 @@ # test_chat_tts_autoplay_toggle.py """ UI test for chat AI voice response autoplay toggle. -Version: 0.242.048 +Version: 0.250.102 Implemented in: 0.242.048 This test ensures the chat toolbar AI voice response toggle persists both the