+ Audio notifications will play when Claude needs your input or completes tasks.
+ {!('speechSynthesis' in window) && (
+
+ ā ļø Text-to-speech is not supported in this browser.
+
+ )}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index d61ddd31..7007e3be 100755
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -324,12 +324,12 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
);
})()}
{message.toolInput && message.toolName !== 'Edit' && (() => {
- // Debug log to see what we're dealing with
- console.log('Tool display - name:', message.toolName, 'input type:', typeof message.toolInput);
+ // Debug log to see what we're dealing with (commented out to reduce console noise)
+ // console.log('Tool display - name:', message.toolName, 'input type:', typeof message.toolInput);
// Special handling for Write tool
if (message.toolName === 'Write') {
- console.log('Write tool detected, toolInput:', message.toolInput);
+ // console.log('Write tool detected, toolInput:', message.toolInput);
try {
let input;
// Handle both JSON string and already parsed object
@@ -339,7 +339,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
input = message.toolInput;
}
- console.log('Parsed Write input:', input);
+ // console.log('Parsed Write input:', input);
if (input.file_path && input.content !== undefined) {
return (
@@ -1652,7 +1652,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
case 'claude-status':
// Handle Claude working status messages
- console.log('š Received claude-status message:', latestMessage);
+ // console.log('š Received claude-status message:', latestMessage);
const statusData = latestMessage.data;
if (statusData) {
// Parse the status message to extract relevant information
@@ -1683,7 +1683,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
statusInfo.can_interrupt = statusData.can_interrupt;
}
- console.log('š Setting claude status:', statusInfo);
+ // console.log('š Setting claude status:', statusInfo);
setClaudeStatus(statusInfo);
setIsLoading(true);
setCanAbortSession(statusInfo.can_interrupt);
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index 76e95141..99b3c90f 100755
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -12,10 +12,12 @@ import {
Brain,
Sparkles,
FileText,
+ Volume2
Languages
} from 'lucide-react';
import DarkModeToggle from './DarkModeToggle';
import { useTheme } from '../contexts/ThemeContext';
+import AudioNotificationSettings from './AudioNotificationSettings';
const QuickSettingsPanel = ({
isOpen,
@@ -144,8 +146,7 @@ const QuickSettingsPanel = ({
/>
-
- {/* Input Settings */}
+{/* Input Settings */}
Input Settings
@@ -165,6 +166,13 @@ const QuickSettingsPanel = ({
When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.
+ {/* Audio Notifications */}
+
+
Audio Notifications
+
+
+
+
{/* Whisper Dictation Settings - HIDDEN */}
diff --git a/src/index.css b/src/index.css
index b5e97ba5..d6a65087 100755
--- a/src/index.css
+++ b/src/index.css
@@ -434,7 +434,9 @@
/* Mobile optimizations and components */
@layer components {
/* Mobile touch optimization and safe areas */
- @media (max-width: 768px) {
+}
+
+@media (max-width: 768px) {
* {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
@@ -512,109 +514,106 @@
opacity: 1 !important;
}
- @media (hover: none) and (pointer: coarse) {
- .group-hover\:opacity-100 {
- opacity: 1 !important;
- }
-
- .hover\:bg-gray-50:hover,
- .hover\:bg-gray-100:hover,
- .hover\:bg-red-200:hover,
- .dark\:hover\:bg-gray-700:hover,
- .dark\:hover\:bg-red-900\/50:hover {
- background-color: inherit;
- }
- }
+}
+
+@media (hover: none) and (pointer: coarse) {
+ .group-hover\:opacity-100 {
+ opacity: 1 !important;
}
- /* Touch device optimizations for all screen sizes */
- @media (hover: none) and (pointer: coarse) {
- .touch\:opacity-100 {
- opacity: 1 !important;
- }
-
- /* Completely disable hover states on touch devices */
- * {
- -webkit-tap-highlight-color: transparent !important;
- }
-
- /* Preserve checkbox visibility on touch devices */
- input[type="checkbox"] {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
- opacity: 1 !important;
- }
-
- /* Only disable hover states for interactive elements, not containers */
- button:hover,
- [role="button"]:hover,
- .cursor-pointer:hover,
- a:hover,
- .hover\:bg-gray-50:hover,
- .hover\:bg-gray-100:hover,
- .hover\:text-gray-900:hover,
- .hover\:opacity-100:hover {
- background-color: inherit !important;
- color: inherit !important;
- opacity: inherit !important;
- transform: inherit !important;
- }
-
- /* Preserve backgrounds for containers and modals */
- .fixed:hover,
- .modal:hover,
- .bg-white:hover,
- .bg-gray-800:hover,
- .bg-gray-900:hover,
- [class*="bg-"]:hover {
- background-color: revert !important;
- }
-
- /* Force buttons to be immediately clickable */
- button, [role="button"], .cursor-pointer {
- cursor: pointer !important;
- pointer-events: auto !important;
- }
-
- /* Keep active states for immediate feedback */
- .active\:scale-\[0\.98\]:active,
- .active\:scale-95:active {
- transform: scale(0.98) !important;
- }
+ .hover\:bg-gray-50:hover,
+ .hover\:bg-gray-100:hover,
+ .hover\:bg-red-200:hover,
+ .dark\:hover\:bg-gray-700:hover,
+ .dark\:hover\:bg-red-900\/50:hover {
+ background-color: inherit;
}
- /* Safe area support for iOS devices */
- .ios-bottom-safe {
- padding-bottom: max(env(safe-area-inset-bottom), 12px);
+ .touch\:opacity-100 {
+ opacity: 1 !important;
}
- @media screen and (max-width: 768px) {
- .chat-input-mobile {
- padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 12px));
- }
+ /* Completely disable hover states on touch devices */
+ * {
+ -webkit-tap-highlight-color: transparent !important;
}
-
- /* Text wrapping improvements */
- .chat-message {
- word-wrap: break-word;
- overflow-wrap: break-word;
- hyphens: auto;
+
+ /* Preserve checkbox visibility on touch devices */
+ input[type="checkbox"] {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
+ opacity: 1 !important;
}
-
- /* Force wrap long URLs and code */
- .chat-message pre,
- .chat-message code {
- white-space: pre-wrap !important;
- word-break: break-all;
- overflow-wrap: break-word;
+
+ /* Only disable hover states for interactive elements, not containers */
+ button:hover,
+ [role="button"]:hover,
+ .cursor-pointer:hover,
+ a:hover,
+ .hover\:bg-gray-50:hover,
+ .hover\:bg-gray-100:hover,
+ .hover\:text-gray-900:hover,
+ .hover\:opacity-100:hover {
+ background-color: inherit !important;
+ color: inherit !important;
+ opacity: inherit !important;
+ transform: inherit !important;
+ }
+
+ /* Preserve backgrounds for containers and modals */
+ .fixed:hover,
+ .modal:hover,
+ .bg-white:hover,
+ .bg-gray-800:hover,
+ .bg-gray-900:hover,
+ [class*="bg-"]:hover {
+ background-color: revert !important;
+ }
+
+ /* Force buttons to be immediately clickable */
+ button, [role="button"], .cursor-pointer {
+ cursor: pointer !important;
+ pointer-events: auto !important;
}
+
+ /* Keep active states for immediate feedback */
+ .active\:scale-\[0\.98\]:active,
+ .active\:scale-95:active {
+ transform: scale(0.98) !important;
+ }
+}
- /* Prevent horizontal scroll in chat area */
- .chat-message * {
- max-width: 100%;
- box-sizing: border-box;
+/* Safe area support for iOS devices */
+.ios-bottom-safe {
+ padding-bottom: max(env(safe-area-inset-bottom), 12px);
+}
+
+@media screen and (max-width: 768px) {
+ .chat-input-mobile {
+ padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 12px));
}
}
+/* Text wrapping improvements */
+.chat-message {
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+}
+
+/* Force wrap long URLs and code */
+.chat-message pre,
+.chat-message code {
+ white-space: pre-wrap !important;
+ word-break: break-all;
+ overflow-wrap: break-word;
+}
+
+/* Prevent horizontal scroll in chat area */
+.chat-message * {
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
/* Hide markdown backticks in prose content */
.prose code::before,
.prose code::after {
diff --git a/src/services/audioService.js b/src/services/audioService.js
new file mode 100644
index 00000000..0f22560e
--- /dev/null
+++ b/src/services/audioService.js
@@ -0,0 +1,525 @@
+// Audio notification service for claudecodeui
+class AudioService {
+ constructor() {
+ this.context = null;
+ this.isEnabled = true;
+ this.audioUnlocked = false;
+ this.settings = {
+ volume: 0.7,
+ rate: 1.0,
+ pitch: 1.0,
+ voice: null,
+ fallbackToBeep: true
+ };
+ this.initializeAudio();
+ this.setupMobileAudioUnlock();
+ }
+
+ async initializeAudio() {
+ try {
+ // Initialize Web Audio context for beep fallback
+ this.context = new (window.AudioContext || window.webkitAudioContext)();
+
+ // Initialize speech synthesis
+ if ('speechSynthesis' in window) {
+ this.speechSynthesis = window.speechSynthesis;
+
+ // Load voices when they become available
+ if (this.speechSynthesis.getVoices().length === 0) {
+ this.speechSynthesis.addEventListener('voiceschanged', () => {
+ this.loadVoices();
+ });
+ } else {
+ this.loadVoices();
+ }
+ }
+ } catch (error) {
+ console.warn('Could not initialize audio service:', error);
+ }
+ }
+
+ // Setup mobile audio unlock on user interaction
+ setupMobileAudioUnlock() {
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+ if (isMobile) {
+ console.log('š± Setting up mobile audio unlock listeners');
+
+ const unlockAudio = async (event) => {
+ try {
+ console.log('š± User interaction detected, unlocking audio...');
+
+ if (this.context && this.context.state === 'suspended') {
+ await this.context.resume();
+ console.log('š Audio context resumed');
+ }
+
+ // Play a silent buffer to unlock audio
+ if (this.context) {
+ const buffer = this.context.createBuffer(1, 1, 22050);
+ const source = this.context.createBufferSource();
+ source.buffer = buffer;
+ source.connect(this.context.destination);
+ source.start();
+ console.log('š Silent buffer played to unlock audio');
+ }
+
+ // Also try to unlock speech synthesis
+ if (this.speechSynthesis) {
+ try {
+ // Create a very short, silent utterance to unlock speech synthesis
+ const silentUtterance = new SpeechSynthesisUtterance(' ');
+ silentUtterance.volume = 0;
+ silentUtterance.rate = 10;
+ this.speechSynthesis.speak(silentUtterance);
+ console.log('š¤ Speech synthesis unlocked');
+ } catch (speechError) {
+ console.warn('Could not unlock speech synthesis:', speechError);
+ }
+ }
+
+ this.audioUnlocked = true;
+ console.log('ā Mobile audio fully unlocked through user interaction');
+
+ } catch (error) {
+ console.warn('Could not unlock mobile audio:', error);
+ }
+ };
+
+ // Add persistent event listeners (don't remove them)
+ document.addEventListener('touchstart', unlockAudio, { passive: true });
+ document.addEventListener('touchend', unlockAudio, { passive: true });
+ document.addEventListener('click', unlockAudio, { passive: true });
+ document.addEventListener('keydown', unlockAudio, { passive: true });
+
+ // Also listen for specific UI interactions that should unlock audio
+ const uiSelectors = ['button', 'input', 'select', 'textarea', '[role="button"]', '[onclick]'];
+ uiSelectors.forEach(selector => {
+ document.addEventListener('click', (event) => {
+ if (event.target.closest(selector)) {
+ unlockAudio(event);
+ }
+ }, { passive: true });
+ });
+ }
+ }
+
+ loadVoices() {
+ const voices = this.speechSynthesis.getVoices();
+
+ // Prioritized list of natural-sounding English voices
+ const preferredVoices = [
+ // High-quality neural voices
+ 'Microsoft Aria Online (Natural) - English (United States)',
+ 'Microsoft Jenny Online (Natural) - English (United States)',
+ 'Microsoft Guy Online (Natural) - English (United States)',
+ 'Microsoft Davis Online (Natural) - English (United States)',
+ 'Microsoft Ana Online (Natural) - English (United States)',
+
+ // Google voices (often high quality)
+ 'Google US English',
+ 'Google UK English Female',
+ 'Google UK English Male',
+
+ // System voices (macOS)
+ 'Samantha',
+ 'Alex',
+ 'Victoria',
+ 'Karen',
+ 'Daniel',
+
+ // Microsoft standard voices
+ 'Microsoft Zira',
+ 'Microsoft David',
+ 'Microsoft Mark',
+
+ // Chrome/Edge voices
+ 'Chrome OS US English',
+ 'Edge Aria',
+ 'Edge Jenny'
+ ];
+
+ // Find the best available voice
+ for (const voiceName of preferredVoices) {
+ const voice = voices.find(v =>
+ v.name.includes(voiceName) || v.name === voiceName
+ );
+ if (voice && voice.lang.startsWith('en')) {
+ this.settings.voice = voice;
+ console.log(`š¤ Selected voice: ${voice.name} (${voice.lang})`);
+ break;
+ }
+ }
+
+ // Fallback: find best English voice by language preference
+ if (!this.settings.voice) {
+ const englishVoices = voices.filter(v => v.lang.startsWith('en'));
+
+ // Prefer US English, then UK English, then any English
+ const prioritizedLangs = ['en-US', 'en-GB', 'en'];
+ for (const lang of prioritizedLangs) {
+ const voice = englishVoices.find(v => v.lang.startsWith(lang));
+ if (voice) {
+ this.settings.voice = voice;
+ console.log(`š¤ Fallback voice: ${voice.name} (${voice.lang})`);
+ break;
+ }
+ }
+ }
+
+ // Last resort: use first available voice
+ if (!this.settings.voice && voices.length > 0) {
+ this.settings.voice = voices[0];
+ console.log(`š¤ Last resort voice: ${voices[0].name} (${voices[0].lang})`);
+ }
+ }
+
+ async speak(text, options = {}) {
+ if (!this.isEnabled) return;
+
+ // Ensure audio context is active for mobile
+ await this.ensureAudioContextActive();
+
+ try {
+ // Try speech synthesis first
+ if (this.speechSynthesis && this.settings.voice) {
+ await this.speakWithSynthesis(text, options);
+ } else if (this.settings.fallbackToBeep) {
+ // Fallback to beep notification
+ this.playNotificationBeep();
+ }
+ } catch (error) {
+ console.warn('Speech synthesis failed:', error);
+ if (this.settings.fallbackToBeep) {
+ this.playNotificationBeep();
+ }
+ }
+ }
+
+ async speakWithSynthesis(text, options = {}) {
+ return new Promise((resolve, reject) => {
+ try {
+ // Cancel any ongoing speech
+ this.speechSynthesis.cancel();
+
+ const utterance = new SpeechSynthesisUtterance(text);
+ utterance.voice = this.settings.voice;
+ utterance.volume = options.volume || this.settings.volume;
+ utterance.rate = options.rate || this.settings.rate;
+ utterance.pitch = options.pitch || this.settings.pitch;
+
+ utterance.onend = () => resolve();
+ utterance.onerror = (error) => reject(error);
+
+ this.speechSynthesis.speak(utterance);
+ } catch (error) {
+ reject(error);
+ }
+ });
+ }
+
+ playNotificationBeep(frequency = 800, duration = 200) {
+ if (!this.context) return;
+
+ try {
+ const oscillator = this.context.createOscillator();
+ const gainNode = this.context.createGain();
+
+ oscillator.connect(gainNode);
+ gainNode.connect(this.context.destination);
+
+ oscillator.frequency.setValueAtTime(frequency, this.context.currentTime);
+ oscillator.type = 'sine';
+
+ gainNode.gain.setValueAtTime(0, this.context.currentTime);
+ gainNode.gain.linearRampToValueAtTime(0.3, this.context.currentTime + 0.01);
+ gainNode.gain.exponentialRampToValueAtTime(0.001, this.context.currentTime + duration / 1000);
+
+ oscillator.start(this.context.currentTime);
+ oscillator.stop(this.context.currentTime + duration / 1000);
+ } catch (error) {
+ console.warn('Could not play notification beep:', error);
+ }
+ }
+
+ // Handle audio notification from WebSocket
+ async handleAudioNotification(notification) {
+ if (!notification || notification.type !== 'audio-notification') return;
+
+ const { message, messageType, voice, metadata, audioUrl, source } = notification;
+
+ // Reduced console logging for audio notifications (commented out to reduce console noise)
+ // console.log(`š Playing audio notification: ${message}`);
+ // console.log(`šµ Audio source: ${source || 'browser-tts'}`);
+ // console.log(`š± Audio unlock status: ${this.isAudioUnlocked()}`);
+ // console.log(`š Audio URL provided: ${audioUrl ? 'YES' : 'NO'}`);
+ // console.log(`š Full notification data:`, { message, messageType, audioUrl, source, metadata });
+
+ // If we have a backend-generated audio URL, play that instead of browser TTS
+ if (audioUrl && source === 'backend-tts') {
+ try {
+ // console.log(`šµ Playing backend TTS audio: ${audioUrl}`);
+ await this.playStreamedAudio(audioUrl, notification);
+ // console.log(`ā Backend TTS audio played successfully`);
+ return;
+ } catch (error) {
+ console.warn('š Backend audio failed, falling back to browser TTS:', error);
+ console.error('š Error details:', error);
+ // Continue to browser TTS fallback below
+ }
+ }
+
+ // Fallback to browser TTS synthesis
+ // console.log('š¤ Using browser TTS synthesis');
+
+ // Add contextual information based on message type
+ let enhancedMessage = message;
+ if (messageType === 'session_start' && metadata?.projectPath) {
+ const projectName = metadata.projectPath.split('/').pop() || 'project';
+ enhancedMessage = `${message} for ${projectName}`;
+ }
+
+ await this.speak(enhancedMessage, { voice });
+ }
+
+ // Check if audio context is suspended (mobile autoplay restriction)
+ async ensureAudioContextActive() {
+ if (this.context && this.context.state === 'suspended') {
+ try {
+ await this.context.resume();
+ console.log('š Audio context resumed for mobile playback');
+ } catch (error) {
+ console.warn('Could not resume audio context:', error);
+ }
+ }
+ }
+
+ // Check if audio is fully unlocked and ready for mobile playback
+ isAudioUnlocked() {
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+ if (!isMobile) {
+ return true; // Desktop doesn't have autoplay restrictions for notifications
+ }
+
+ const contextReady = !this.context || this.context.state === 'running';
+ const audioUnlocked = this.audioUnlocked;
+
+ // console.log(`š± Mobile audio status: unlocked=${audioUnlocked}, contextReady=${contextReady}`);
+
+ return audioUnlocked && contextReady;
+ }
+
+ // Play streamed audio from backend TTS with mobile support
+ async playStreamedAudio(audioUrl, notification = {}) {
+ if (!this.isEnabled) return;
+
+ // Ensure audio context is active for mobile
+ await this.ensureAudioContextActive();
+
+ return new Promise((resolve, reject) => {
+ try {
+ // Create audio element
+ const audio = new Audio();
+
+ // Mobile-specific settings
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+ if (isMobile) {
+ // Allow mobile playback
+ audio.setAttribute('playsinline', 'true');
+ audio.muted = false; // Ensure not muted
+ console.log('š± Mobile device detected, applying mobile audio settings');
+ }
+
+ // Set up event handlers
+ audio.onloadstart = () => {
+ console.log('šµ Started loading backend audio...');
+ };
+
+ audio.oncanplay = () => {
+ console.log('šµ Backend audio ready to play');
+ };
+
+ audio.onended = () => {
+ console.log('ā Backend audio playback complete');
+ resolve();
+ };
+
+ audio.onerror = (error) => {
+ console.error('ā Backend audio playback error:', error);
+ console.error('Audio error details:', {
+ code: audio.error?.code,
+ message: audio.error?.message,
+ type: error.type,
+ target: error.target
+ });
+ reject(new Error(`Audio playback failed: ${error.message || audio.error?.message || 'Unknown error'}`));
+ };
+
+ audio.onabort = () => {
+ console.warn('ā ļø Backend audio playback aborted');
+ reject(new Error('Audio playback aborted'));
+ };
+
+ // Set audio properties
+ audio.volume = this.settings.volume || 0.7;
+ audio.preload = 'auto';
+
+ // Handle CORS and authentication if needed
+ audio.crossOrigin = 'anonymous';
+
+ // Start loading and playing
+ audio.src = audioUrl;
+
+ // Mobile-friendly play attempt with retry
+ const attemptPlay = async () => {
+ try {
+ // If audio is not unlocked on mobile, try to unlock it first
+ if (isMobile && !this.audioUnlocked) {
+ console.log('š± Audio not unlocked yet, attempting unlock before playback...');
+ await this.ensureAudioContextActive();
+
+ // Try to unlock with a silent buffer
+ try {
+ if (this.context) {
+ const buffer = this.context.createBuffer(1, 1, 22050);
+ const source = this.context.createBufferSource();
+ source.buffer = buffer;
+ source.connect(this.context.destination);
+ source.start();
+ this.audioUnlocked = true;
+ console.log('š Audio unlocked before playback attempt');
+ }
+ } catch (unlockError) {
+ console.warn('Could not pre-unlock audio:', unlockError);
+ }
+ }
+
+ const playPromise = audio.play();
+
+ if (playPromise !== undefined) {
+ await playPromise;
+ console.log('šµ Backend audio started playing successfully');
+ }
+ } catch (playError) {
+ console.error('ā Backend audio play() failed:', playError);
+
+ // For mobile, try multiple fallback approaches
+ if (isMobile && (playError.name === 'NotAllowedError' || playError.name === 'NotSupportedError')) {
+ console.log('š± Mobile autoplay blocked, trying fallback methods...');
+
+ // First, try browser TTS as it might work better on mobile
+ try {
+ console.log('š Falling back to browser TTS for mobile...');
+ const message = notification.message || 'Notification';
+ await this.speak(message);
+ resolve();
+ return;
+ } catch (ttsError) {
+ console.warn('š Browser TTS also failed, trying beep fallback');
+ }
+
+ // Last resort: beep notification
+ try {
+ this.playNotificationBeep();
+ console.log('š Played beep notification as final fallback');
+ resolve();
+ } catch (beepError) {
+ console.warn('š Even beep notification failed:', beepError);
+ resolve(); // Don't reject, just complete silently
+ }
+ } else {
+ reject(playError);
+ }
+ }
+ };
+
+ // Start play attempt
+ attemptPlay();
+
+ // Cleanup function
+ const cleanup = () => {
+ audio.onloadstart = null;
+ audio.oncanplay = null;
+ audio.onended = null;
+ audio.onerror = null;
+ audio.onabort = null;
+ audio.src = '';
+ };
+
+ // Set up cleanup on completion
+ audio.addEventListener('ended', cleanup, { once: true });
+ audio.addEventListener('error', cleanup, { once: true });
+ audio.addEventListener('abort', cleanup, { once: true });
+
+ } catch (error) {
+ console.error('ā Error setting up backend audio playback:', error);
+ reject(error);
+ }
+ });
+ }
+
+ // Settings management
+ setEnabled(enabled) {
+ this.isEnabled = enabled;
+ localStorage.setItem('audioNotifications.enabled', enabled.toString());
+ }
+
+ getEnabled() {
+ const stored = localStorage.getItem('audioNotifications.enabled');
+ return stored !== null ? stored === 'true' : this.isEnabled;
+ }
+
+ updateSettings(newSettings) {
+ this.settings = { ...this.settings, ...newSettings };
+ localStorage.setItem('audioNotifications.settings', JSON.stringify(this.settings));
+ }
+
+ loadSettings() {
+ const stored = localStorage.getItem('audioNotifications.settings');
+ if (stored) {
+ try {
+ this.settings = { ...this.settings, ...JSON.parse(stored) };
+ } catch (error) {
+ console.warn('Could not load audio settings:', error);
+ }
+ }
+ this.isEnabled = this.getEnabled();
+ }
+
+ // Test audio notification
+ async testNotification() {
+ // Try to test with backend TTS first
+ try {
+ const response = await fetch('/api/audio/test-notification', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ message: 'Audio notifications are working correctly',
+ messageType: 'test'
+ })
+ });
+
+ if (response.ok) {
+ console.log('šµ Backend TTS test initiated');
+ return; // Backend will handle the notification via WebSocket
+ }
+ } catch (error) {
+ console.warn('š Backend TTS test failed, using browser TTS:', error);
+ }
+
+ // Fallback to browser TTS
+ await this.speak('Audio notifications are working correctly');
+ }
+}
+
+// Create singleton instance
+export const audioService = new AudioService();
+
+// Load settings on initialization
+audioService.loadSettings();
+
+export default audioService;
\ No newline at end of file
diff --git a/src/utils/websocket.js b/src/utils/websocket.js
index f03fd002..272ed39c 100755
--- a/src/utils/websocket.js
+++ b/src/utils/websocket.js
@@ -1,4 +1,5 @@
import { useState, useEffect, useRef } from 'react';
+import { audioService } from '../services/audioService';
export function useWebSocket() {
const [ws, setWs] = useState(null);
@@ -67,6 +68,12 @@ export function useWebSocket() {
websocket.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
+
+ // Handle audio notifications
+ if (data.type === 'audio-notification') {
+ audioService.handleAudioNotification(data);
+ }
+
setMessages(prev => [...prev, data]);
} catch (error) {
console.error('Error parsing WebSocket message:', error);
diff --git a/test-audio.js b/test-audio.js
new file mode 100644
index 00000000..69f64ae8
--- /dev/null
+++ b/test-audio.js
@@ -0,0 +1,49 @@
+// Simple test script for audio streaming functionality
+import fetch from 'node-fetch';
+
+async function testTTSProviders() {
+ try {
+ console.log('Testing TTS providers endpoint...');
+ const response = await fetch('http://localhost:3000/api/settings/tts/providers');
+
+ if (response.ok) {
+ const providers = await response.json();
+ console.log('ā TTS Providers loaded successfully:');
+ console.log(JSON.stringify(providers, null, 2));
+ } else {
+ console.error(`ā Failed to load TTS providers: ${response.status} ${response.statusText}`);
+ const errorText = await response.text();
+ console.error('Error response:', errorText);
+ }
+ } catch (error) {
+ console.error('ā Network error:', error.message);
+ }
+}
+
+async function testAudioEndpoints() {
+ try {
+ console.log('\nTesting audio info endpoint...');
+ const response = await fetch('http://localhost:3000/api/audio/info');
+
+ if (response.ok) {
+ const info = await response.json();
+ console.log('ā Audio info loaded successfully:');
+ console.log(JSON.stringify(info, null, 2));
+ } else {
+ console.error(`ā Failed to load audio info: ${response.status} ${response.statusText}`);
+ }
+ } catch (error) {
+ console.error('ā Network error:', error.message);
+ }
+}
+
+async function runTests() {
+ console.log('šµ Audio Streaming System Test\n');
+
+ await testTTSProviders();
+ await testAudioEndpoints();
+
+ console.log('\nš Test completed');
+}
+
+runTests().catch(console.error);
\ No newline at end of file