fix: Resolve Mac Chrome TTS invocation, Qwen TTS missing parameters and UI layout issues (#12)

components/audio/tts-config-popover.tsx

@@ -56,12 +56,37 @@ export function TtsConfigPopover() {
     if (previewing) {
       audioRef.current?.pause();
       audioRef.current = null;
+      window.speechSynthesis?.cancel();
       setPreviewing(false);
       return;
     }
 
     setPreviewing(true);
     try {
+      // Handle browser native TTS separately
+      if (ttsProviderId === 'browser-native-tts') {
+        if (!('speechSynthesis' in window)) {
+          setPreviewing(false);
+          return;
+        }
+
+        const utterance = new SpeechSynthesisUtterance('你好，欢迎来到AI课堂！让我们一起学习吧。');
+        const voices = window.speechSynthesis.getVoices();
+        const selectedVoice = voices.find(
+          (v) => v.name === ttsVoice || v.lang === ttsVoice,
+        );
+        if (selectedVoice) utterance.voice = selectedVoice;
+
+        utterance.onend = () => {
+          setPreviewing(false);
+        };
+        utterance.onerror = () => {
+          setPreviewing(false);
+        };
+        window.speechSynthesis.speak(utterance);
+        return;
+      }
+
       const providerConfig = ttsProvidersConfig[ttsProviderId];
       const res = await fetch('/api/generate/tts', {
         method: 'POST',

components/generation/media-popover.tsx

@@ -33,7 +33,7 @@ import { VIDEO_PROVIDERS } from '@/lib/media/video-providers';
 import { TTS_PROVIDERS, getTTSVoices } from '@/lib/audio/constants';
 import { ASR_PROVIDERS, getASRSupportedLanguages } from '@/lib/audio/constants';
 import type { ImageProviderId, VideoProviderId } from '@/lib/media/types';
-import type { ASRProviderId } from '@/lib/audio/types';
+import type { ASRProviderId, TTSProviderId } from '@/lib/audio/types';
 import type { SettingsSection } from '@/lib/types/settings';
 
 interface MediaPopoverProps {
@@ -104,6 +104,7 @@ export function MediaPopover({ onSettingsOpen }: MediaPopoverProps) {
   const ttsVoice = useSettingsStore((s) => s.ttsVoice);
   const ttsSpeed = useSettingsStore((s) => s.ttsSpeed);
   const ttsProvidersConfig = useSettingsStore((s) => s.ttsProvidersConfig);
+  const setTTSProvider = useSettingsStore((s) => s.setTTSProvider);
   const setTTSVoice = useSettingsStore((s) => s.setTTSVoice);
   const setTTSSpeed = useSettingsStore((s) => s.setTTSSpeed);
 
@@ -170,26 +171,60 @@ export function MediaPopover({ onSettingsOpen }: MediaPopoverProps) {
     [videoProvidersConfig],
   );
 
-  // TTS: flat voice list from current provider, localized
-  const ttsVoices = useMemo(
+  // TTS: grouped by provider (only available providers)
+  const ttsGroups = useMemo(
     () =>
-      getTTSVoices(ttsProviderId).map((v) => ({
-        id: v.id,
-        name: getVoiceDisplayName(v.name, locale),
-      })),
-    [ttsProviderId, locale],
+      Object.values(TTS_PROVIDERS)
+        .filter((p) => cfgOk(ttsProvidersConfig, p.id, p.requiresApiKey))
+        .map((p) => ({
+          groupId: p.id,
+          groupName: p.name,
+          groupIcon: p.icon,
+          available: true,
+          items: getTTSVoices(p.id).map((v) => ({
+            id: v.id,
+            name: getVoiceDisplayName(v.name, locale),
+          })),
+        })),
+    [ttsProvidersConfig, locale],
   );
 
   // TTS preview
   const handlePreview = useCallback(async () => {
     if (previewing) {
       audioRef.current?.pause();
       audioRef.current = null;
+      window.speechSynthesis?.cancel();
       setPreviewing(false);
       return;
     }
     setPreviewing(true);
     try {
+      // Handle browser native TTS separately
+      if (ttsProviderId === 'browser-native-tts') {
+        if (!('speechSynthesis' in window)) {
+          setPreviewing(false);
+          return;
+        }
+
+        const utterance = new SpeechSynthesisUtterance('你好，欢迎来到AI课堂！让我们一起学习吧。');
+        utterance.rate = ttsSpeed;
+        const voices = window.speechSynthesis.getVoices();
+        const selectedVoice = voices.find(
+          (v) => v.name === ttsVoice || v.lang === ttsVoice,
+        );
+        if (selectedVoice) utterance.voice = selectedVoice;
+
+        utterance.onend = () => {
+          setPreviewing(false);
+        };
+        utterance.onerror = () => {
+          setPreviewing(false);
+        };
+        window.speechSynthesis.speak(utterance);
+        return;
+      }
+
       const providerConfig = ttsProvidersConfig[ttsProviderId];
       const res = await fetch('/api/generate/tts', {
         method: 'POST',
@@ -221,7 +256,7 @@ export function MediaPopover({ onSettingsOpen }: MediaPopoverProps) {
     } catch {
       setPreviewing(false);
     }
-  }, [ttsProviderId, ttsVoice, ttsProvidersConfig, previewing]);
+  }, [ttsProviderId, ttsVoice, ttsProvidersConfig, previewing, ttsSpeed]);
 
   // ASR: only available providers
   const asrGroups = useMemo(
@@ -348,29 +383,17 @@ export function MediaPopover({ onSettingsOpen }: MediaPopoverProps) {
             >
               {/* Voice select + preview */}
               <div className="flex items-center gap-2">
-                <Select value={ttsVoice} onValueChange={setTTSVoice}>
-                  <SelectTrigger className="h-8 rounded-lg border-border/40 bg-background/80 hover:bg-muted/40 shadow-none text-xs focus:ring-1 focus:ring-ring/30 px-2.5 flex-1 min-w-0">
-                    <span className="flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
-                      {TTS_PROVIDERS[ttsProviderId]?.icon && (
-                        <img
-                          src={TTS_PROVIDERS[ttsProviderId].icon}
-                          alt=""
-                          className="size-4 rounded-sm shrink-0"
-                        />
-                      )}
-                      <span className="truncate">
-                        <SelectValue />
-                      </span>
-                    </span>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {ttsVoices.map((v) => (
-                      <SelectItem key={v.id} value={v.id} className="text-xs">
-                        {v.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <div className="flex-1 min-w-0">
+                  <GroupedSelect
+                    groups={ttsGroups}
+                    selectedGroupId={ttsProviderId}
+                    selectedItemId={ttsVoice}
+                    onSelect={(gid, iid) => {
+                      setTTSProvider(gid as TTSProviderId);
+                      setTTSVoice(iid);
+                    }}
+                  />
+                </div>
                 <button
                   onClick={handlePreview}
                   className={cn(

components/settings/tts-settings.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { DEFAULT_TTS_VOICES, TTS_PROVIDERS } from '@/lib/audio/constants';
+import type { TTSProviderId } from '@/lib/audio/types';
 import { useI18n } from '@/lib/hooks/use-i18n';
+import { createLogger } from '@/lib/logger';
 import { useSettingsStore } from '@/lib/store/settings';
-import { TTS_PROVIDERS, DEFAULT_TTS_VOICES } from '@/lib/audio/constants';
-import type { TTSProviderId } from '@/lib/audio/types';
-import { Volume2, Loader2, CheckCircle2, XCircle, Eye, EyeOff } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { createLogger } from '@/lib/logger';
+import { CheckCircle2, Eye, EyeOff, Loader2, Volume2, XCircle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
 
 const log = createLogger('TTSSettings');
 
@@ -255,9 +255,9 @@ export function TTSSettings({ selectedProviderId }: TTSSettingsProps) {
           className={cn(
             'rounded-lg p-3 text-sm overflow-hidden',
             testStatus === 'success' &&
-              'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/50 dark:text-green-400 dark:border-green-800',
+            'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950/50 dark:text-green-400 dark:border-green-800',
             testStatus === 'error' &&
-              'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/50 dark:text-red-400 dark:border-red-800',
+            'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/50 dark:text-red-400 dark:border-red-800',
           )}
         >
           <div className="flex items-start gap-2 min-w-0">

components/stage.tsx

@@ -456,6 +456,12 @@ export function Stage({
     audioPlayerRef.current.setPlaybackRate(playbackSpeed);
   }, [playbackSpeed]);
 
+  // Sync browser TTS setting to audio player
+  const ttsProviderId = useSettingsStore((s) => s.ttsProviderId);
+  useEffect(() => {
+    audioPlayerRef.current.setBrowserTTSEnabled(ttsProviderId === 'browser-native-tts');
+  }, [ttsProviderId]);
+
   /**
    * Handle discussion SSE — POST /api/chat and push events to engine
    */

lib/action/engine.ts

@@ -30,6 +30,7 @@ import type {
 } from '@/lib/types/action';
 import katex from 'katex';
 import { createLogger } from '@/lib/logger';
+import { useSettingsStore } from '@/lib/store/settings';
 
 const log = createLogger('ActionEngine');
 
@@ -165,9 +166,28 @@ export class ActionEngine {
   private async executeSpeech(action: SpeechAction): Promise<void> {
     if (!this.audioPlayer) return;
 
+    const settings = useSettingsStore.getState();
+    const isBrowserNativeTTS = settings.ttsProviderId === 'browser-native-tts';
+
+    // Enable browser TTS fallback in AudioPlayer if using browser native TTS
+    if (isBrowserNativeTTS) {
+      this.audioPlayer.setBrowserTTSEnabled(true);
+    }
+
     return new Promise<void>((resolve) => {
       this.audioPlayer!.onEnded(() => resolve());
-      this.audioPlayer!.play(action.audioId || '')
+
+      // Prepare browser TTS options if using browser native TTS
+      const browserTTSOptions = isBrowserNativeTTS
+        ? {
+            text: action.text,
+            voice: settings.ttsVoice,
+            rate: settings.ttsSpeed,
+            lang: settings.ttsVoice?.startsWith('zh') ? 'zh-CN' : 'en-US',
+          }
+        : undefined;
+
+      this.audioPlayer!.play(action.audioId || '', browserTTSOptions)
         .then((audioStarted) => {
           if (!audioStarted) resolve();
         })

lib/audio/tts-providers.ts

@@ -89,8 +89,8 @@
  * - URL-based: For providers returning audio URL (download in second step)
  */
 
-import type { TTSModelConfig } from './types';
 import { TTS_PROVIDERS } from './constants';
+import type { TTSModelConfig } from './types';
 
 /**
  * Result of TTS generation
@@ -279,7 +279,7 @@ async function generateQwenTTS(config: TTSModelConfig, text: string): Promise<TT
       model: 'qwen3-tts-flash',
       input: {
         text,
-        voice: config.voice,
+        voice: config.voice || "Cherry",
         language_type: 'Chinese', // Default to Chinese, can be made configurable
       },
       parameters: {

lib/playback/engine.ts

@@ -33,9 +33,10 @@ import type {
   TriggerEvent,
   Effect,
 } from './types';
-import type { AudioPlayer } from '@/lib/utils/audio-player';
+import type { AudioPlayer, BrowserTTSOptions } from '@/lib/utils/audio-player';
 import { ActionEngine } from '@/lib/action/engine';
 import { useCanvasStore } from '@/lib/store/canvas';
+import { useSettingsStore } from '@/lib/store/settings';
 import { createLogger } from '@/lib/logger';
 
 const log = createLogger('PlaybackEngine');
@@ -433,8 +434,25 @@ export class PlaybackEngine {
           }, readingMs);
         };
 
+        // Prepare browser TTS options if using browser native TTS
+        const settings = useSettingsStore.getState();
+        const browserTTSOptions: BrowserTTSOptions | undefined =
+          settings.ttsProviderId === 'browser-native-tts'
+            ? {
+                text: speechAction.text,
+                voice: settings.ttsVoice,
+                rate: settings.ttsSpeed,
+                lang: settings.ttsVoice?.startsWith('zh') ? 'zh-CN' : 'en-US',
+              }
+            : undefined;
+
+        // Enable browser TTS fallback in AudioPlayer if using browser native TTS
+        if (browserTTSOptions) {
+          this.audioPlayer.setBrowserTTSEnabled(true);
+        }
+
         this.audioPlayer
-          .play(speechAction.audioId || '')
+          .play(speechAction.audioId || '', browserTTSOptions)
           .then((audioStarted) => {
             if (!audioStarted) scheduleReadingTimer();
           })