feat(tts): add TTS buttons to PlanView and FilesView markdown preview with configurable input mode (#1443)

Add TTS controls to markdown preview surfaces so users can listen to plans and markdown files directly from the preview toolbar. Changes: - Add read-aloud / stop buttons to PlanView markdown preview. - Add read-aloud / stop buttons to FilesView markdown preview for markdown files. - Respect the existing showMessageTTSButtons preference in both preview views. - Add a persisted ttsInputMode setting with sanitized/raw modes. - Keep sanitized mode as the default for backward compatibility. - Allow raw markdown only for server TTS providers that can handle markdown. - Always use sanitized text for browser and macOS say fallback paths. - Add Voice Settings controls for TTS input mode. - Add i18n keys for the new preview buttons and setting labels. - Merge latest main and preserve newer FilesView toolbar/editor changes. Validation: - bun test packages/ui/src/stores/useConfigStore.test.ts packages/ui/src/components/chat/message/parts/ToolPart.test.ts packages/web/server/lib/tts/routes.test.js - bun run type-check - bun run lint - git diff --check --------- Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-06-08 19:31:21 +03:00
parent a6bf73b245
commit ba95e13b36
21 changed files with 191 additions and 19 deletions
@@ -161,6 +161,8 @@ export const VoiceSettings: React.FC = () => {
    const openaiCompatibleTtsModel = useConfigStore((state) => state.openaiCompatibleTtsModel);
    const setOpenaiCompatibleTtsModel = useConfigStore((state) => state.setOpenaiCompatibleTtsModel);
    const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+    const ttsInputMode = useConfigStore((state) => state.ttsInputMode);
+    const setTtsInputMode = useConfigStore((state) => state.setTtsInputMode);
    // STT settings
    const sttProvider = useConfigStore((state) => state.sttProvider);
    const setSttProvider = useConfigStore((state) => state.setSttProvider);
@@ -1053,6 +1055,36 @@ export const VoiceSettings: React.FC = () => {
                        <span className="typography-ui-label text-foreground">{t('settings.voice.page.field.messageReadAloudButton')}</span>
                    </div>

+                    <div className="pb-1.5 pt-0.5">
+                        <div className="flex min-w-0 flex-col gap-1.5">
+                            <div className="flex items-center gap-1.5">
+                                <span className="typography-ui-label text-foreground">
+                                    {t('settings.voice.page.field.ttsInputMode')}
+                                </span>
+                            </div>
+                            <div className="flex flex-wrap items-center gap-1">
+                                <Button
+                                    variant="chip"
+                                    size="xs"
+                                    aria-pressed={ttsInputMode === 'sanitized'}
+                                    onClick={() => setTtsInputMode('sanitized')}
+                                    className="!font-normal"
+                                >
+                                    {t('settings.voice.page.field.ttsInputModeSanitized')}
+                                </Button>
+                                <Button
+                                    variant="chip"
+                                    size="xs"
+                                    aria-pressed={ttsInputMode === 'raw'}
+                                    onClick={() => setTtsInputMode('raw')}
+                                    className="!font-normal"
+                                >
+                                    {t('settings.voice.page.field.ttsInputModeRaw')}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
                </section>

                {voiceModeEnabled && isSupported && (
@@ -54,9 +54,10 @@ import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
 import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
-import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
-import { Icon } from "@/components/icon/Icon";
-import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
+import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
+import { Icon } from "@/components/icon/Icon";
+import { useMessageTTS } from '@/hooks/useMessageTTS';
+import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
 import { getDefaultTheme } from '@/lib/theme/themes';
 import { openDesktopFileInApp, openDesktopPath } from '@/lib/desktop';
 import { useOpenInAppsStore } from '@/stores/useOpenInAppsStore';
@@ -785,11 +786,12 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
  const activeDirectoryLoadIdsRef = React.useRef<Map<string, number>>(new Map());
  const nextDirectoryLoadIdRef = React.useRef(0);

-  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
-  const [searching, setSearching] = React.useState(false);
-
-  const [fileContent, setFileContent] = React.useState<string>('');
-  const [fileLoading, setFileLoading] = React.useState(false);
+  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
+  const [searching, setSearching] = React.useState(false);
+
+  const [fileContent, setFileContent] = React.useState<string>('');
+  const { isPlaying: isTTSPlaying, play: playTTS, stop: stopTTS } = useMessageTTS();
+  const [fileLoading, setFileLoading] = React.useState(false);
  const [fileError, setFileError] = React.useState<string | null>(null);
  const [desktopImageSrc, setDesktopImageSrc] = React.useState<string>('');
  const [imageAssetAuthReadyKey, setImageAssetAuthReadyKey] = React.useState('');
@@ -911,6 +913,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
  const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
  const fileEditorKeymap = useUIStore((state) => state.fileEditorKeymap);
  const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
+  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);

  // Global mouseup to end drag selection
  React.useEffect(() => {
@@ -3065,20 +3068,50 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
          />
        )}

-        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
-          <PreviewToggleButton
-            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
+        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
+          <PreviewToggleButton
+            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
            onToggle={() => {
              if (isHtmlFile(selectedFile?.path ?? '')) {
                saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview');
              } else {
                saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview');
              }
-            }}
-          />
-        )}
-        {isDrawio && (
-          <>
+            }}
+          />
+        )}
+
+        {isMarkdown && getMdViewMode() === 'preview' && showMessageTTSButtons && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
+                aria-label={isTTSPlaying ? t('filesView.tts.stopSpeaking') : t('filesView.tts.readAloud')}
+                onClick={() => {
+                  if (isTTSPlaying) {
+                    stopTTS();
+                  } else if (fileContent.trim()) {
+                    void playTTS(fileContent);
+                  }
+                }}
+              >
+                {isTTSPlaying ? (
+                  <Icon name="stop" className="size-4 text-[color:var(--status-success)]" />
+                ) : (
+                  <Icon name="volume-up" className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent sideOffset={8}>
+              {isTTSPlaying ? t('filesView.tts.stopSpeaking') : t('filesView.tts.readAloud')}
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {isDrawio && (
+          <>
            <PreviewToggleButton
              currentMode={drawioViewMode}
              onToggle={() => saveDrawioViewMode(drawioViewMode === 'preview' ? 'edit' : 'preview')}
@@ -40,6 +40,7 @@ import { parseProjectPlanMarkdown } from '@/lib/openchamberConfig';
 import { createWorktreeSessionForNewBranch } from '@/lib/worktreeSessionCreator';
 import { TodoSendDialog, type TodoSendExecution } from '@/components/session/TodoSendDialog';
 import { Icon } from "@/components/icon/Icon";
+import { useMessageTTS } from '@/hooks/useMessageTTS';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
 import { useI18n } from '@/lib/i18n';

@@ -197,6 +198,8 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
    return toDisplayPath(resolvedPath, { currentDirectory: sessionDirectory, homeDirectory });
  }, [resolvedPath, sessionDirectory, homeDirectory]);
  const [content, setContent] = React.useState<string>('');
+  const { isPlaying: isTTSPlaying, play: playTTS, stop: stopTTS } = useMessageTTS();
+  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
  const [saveError, setSaveError] = React.useState<string | null>(null);
  const planFileLabel = React.useMemo(() => {
    return displayPath ? displayPath.split('/').pop() || t('planView.file.defaultName') : t('planView.file.defaultName');
@@ -689,6 +692,34 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
              currentMode={mdViewMode}
              onToggle={() => saveMdViewMode(mdViewMode === 'preview' ? 'edit' : 'preview')}
            />
+            {mdViewMode === 'preview' && showMessageTTSButtons && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0"
+                    aria-label={isTTSPlaying ? t('planView.tts.stopSpeaking') : t('planView.tts.readAloud')}
+                    onClick={() => {
+                      if (isTTSPlaying) {
+                        stopTTS();
+                      } else if (content.trim()) {
+                        void playTTS(content);
+                      }
+                    }}
+                  >
+                    {isTTSPlaying ? (
+                      <Icon name="stop" className="h-4 w-4 text-[color:var(--status-success)]" />
+                    ) : (
+                      <Icon name="volume-up" className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent sideOffset={8}>
+                  {isTTSPlaying ? t('planView.tts.stopSpeaking') : t('planView.tts.readAloud')}
+                </TooltipContent>
+              </Tooltip>
+            )}
            <Button
              variant="ghost"
              size="sm"
@@ -35,6 +35,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
    const openaiCompatibleUrl = useConfigStore((state) => state.openaiCompatibleUrl);
    const openaiCompatibleTtsModel = useConfigStore((state) => state.openaiCompatibleTtsModel);
    const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+    const ttsInputMode = useConfigStore((state) => state.ttsInputMode);

    const isServerProvider = voiceProvider === 'openai' || voiceProvider === 'openai-compatible';
    const shouldCheckOpenAIAvailability = showMessageTTSButtons && isServerProvider;
@@ -64,7 +65,9 @@ export function useMessageTTS(): UseMessageTTSReturn {
        setIsPlaying(true);
        
        try {
-            const textToSpeak = sanitizeForTTS(text);
+            const shouldUseRaw = ttsInputMode === 'raw' && isServerProvider;
+            const sanitizedText = sanitizeForTTS(text);
+            const textToSpeak = shouldUseRaw ? text : sanitizedText;
            
            if (isServerProvider && isServerTTSAvailable) {
                const voice = voiceProvider === 'openai-compatible' ? openaiCompatibleVoice : openaiVoice;
@@ -83,7 +86,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
                });
            } else if (voiceProvider === 'say' && isSayTTSAvailable) {
                const wordsPerMinute = Math.round(100 + (speechRate - 0.5) * 200);
-                await speakSayTTS(textToSpeak, {
+                await speakSayTTS(sanitizedText, {
                    voice: sayVoice,
                    rate: wordsPerMinute,
                    onEnd: () => setIsPlaying(false),
@@ -94,7 +97,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
                await browserVoiceService.waitForVoices();
                await browserVoiceService.resumeAudioContext();
                await browserVoiceService.speakText(
-                    textToSpeak,
+                    sanitizedText,
                    navigator.language || 'en-US',
                    () => setIsPlaying(false),
                    {
@@ -123,6 +126,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
        openaiCompatibleTtsModel,
        isServerTTSAvailable,
        isSayTTSAvailable,
+        ttsInputMode,
        speakServerTTS,
        speakSayTTS,
        stop,
@@ -1537,6 +1537,9 @@ export const settingsDict = {
  'settings.voice.page.preview.browserVoiceFallback': 'your browser voice',
  'settings.voice.page.preview.voiceLine': 'Hello! I\'m {voiceName}. This is how I sound.',
  'settings.voice.page.preview.customServerLine': 'Hello! This is a preview of the custom TTS server.',
+  'settings.voice.page.field.ttsInputMode': 'TTS Input Mode',
+  'settings.voice.page.field.ttsInputModeSanitized': 'Sanitized',
+  'settings.voice.page.field.ttsInputModeRaw': 'Raw Markdown',
  'settings.openchamber.visual.section.colorMode': 'Color Mode',
  'settings.openchamber.visual.section.mobileLayout': 'Mobile Layout',
  'settings.openchamber.visual.option.mobileLayout.default': 'Old',
@@ -1741,6 +1741,10 @@ export const dict = {
  'chat.messageBody.tts.stopSpeaking': 'Stop speaking',
  'chat.messageBody.tts.readAloud': 'Read aloud',
  'chat.messageBody.tts.readAloudWithProvider': 'Read aloud ({provider} voice)',
+  'planView.tts.readAloud': 'Read plan aloud',
+  'planView.tts.stopSpeaking': 'Stop speaking',
+  'filesView.tts.readAloud': 'Read file aloud',
+  'filesView.tts.stopSpeaking': 'Stop speaking',
  'chat.messageBody.toast.noProject': 'No project found for this session',
  'chat.messageBody.toast.savePlanFailed': 'Failed to save plan',
  'chat.messageBody.toast.planSaved': 'Plan saved',
@@ -1504,6 +1504,9 @@ export const settingsDict = {
  "settings.voice.page.preview.browserVoiceFallback": "voz del navegador",
  "settings.voice.page.preview.voiceLine": "¡Hola! Soy {voiceName}. Así suena mi voz.",
  "settings.voice.page.preview.customServerLine": "¡Hola! Esta es una previsualización del servidor TTS personalizado.",
+  "settings.voice.page.field.ttsInputMode": "Modo de entrada TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Texto limpio",
+  "settings.voice.page.field.ttsInputModeRaw": "Markdown sin procesar",
  "settings.openchamber.visual.section.colorMode": "Modo de color",
  "settings.openchamber.visual.section.mobileLayout": "Diseño móvil",
  "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
  "chat.messageBody.tts.stopSpeaking": "Dejar de hablar",
  "chat.messageBody.tts.readAloud": "Leer en voz alta",
  "chat.messageBody.tts.readAloudWithProvider": "Leer en voz alta ({provider} voz)",
+  "planView.tts.readAloud": "Leer plan en voz alta",
+  "planView.tts.stopSpeaking": "Detener lectura",
+  "filesView.tts.readAloud": "Leer archivo en voz alta",
+  "filesView.tts.stopSpeaking": "Detener lectura",
  "chat.messageBody.toast.noProject": "No se encontró proyecto para esta sesión",
  "chat.messageBody.toast.savePlanFailed": "No se pudo guardar el plan",
  "chat.messageBody.toast.planSaved": "Plan guardado",
@@ -1504,6 +1504,9 @@ export const settingsDict = {
  'settings.voice.page.preview.browserVoiceFallback': '브라우저 음성',
  'settings.voice.page.preview.voiceLine': '안녕하세요! 저는 {voiceName}입니다. 이렇게 들립니다.',
  'settings.voice.page.preview.customServerLine': '안녕하세요! 사용자 정의 TTS 서버 미리보기입니다.',
+  'settings.voice.page.field.ttsInputMode': 'TTS 입력 모드',
+  'settings.voice.page.field.ttsInputModeSanitized': '정제된 텍스트',
+  'settings.voice.page.field.ttsInputModeRaw': '원본 Markdown',
  'settings.openchamber.visual.section.colorMode': '색상 모드',
  'settings.openchamber.visual.section.mobileLayout': '모바일 레이아웃',
  'settings.openchamber.visual.option.mobileLayout.default': '이전',
@@ -1741,6 +1741,10 @@ export const dict: Record<I18nKey, string> = {
  'chat.messageBody.tts.stopSpeaking': '읽기 중지',
  'chat.messageBody.tts.readAloud': '소리 내어 읽기',
  'chat.messageBody.tts.readAloudWithProvider': '소리 내어 읽기({provider} 음성)',
+  'planView.tts.readAloud': '계획 소리 내어 읽기',
+  'planView.tts.stopSpeaking': '읽기 중지',
+  'filesView.tts.readAloud': '파일 소리 내어 읽기',
+  'filesView.tts.stopSpeaking': '읽기 중지',
  'chat.messageBody.toast.noProject': '이 세션의 프로젝트를 찾을 수 없음',
  'chat.messageBody.toast.savePlanFailed': '플랜 저장 실패',
  'chat.messageBody.toast.planSaved': '플랜이 저장되었습니다',
@@ -1749,5 +1749,8 @@ export const settingsDict = {
  'settings.voice.page.tooltip.say': 'Natywne dla macOS. Szybkie, darmowe, offline.',
  'settings.voice.page.tooltip.sttBrowser': 'Web Speech API (Chrome/Edge). Darmowe, bez konfiguracji.',
  'settings.voice.page.tooltip.sttServer': 'Serwer Whisper zgodny z OpenAI. Lepsza dokładność, dowolny język.',
+  'settings.voice.page.field.ttsInputMode': 'Tryb wejścia TTS',
+  'settings.voice.page.field.ttsInputModeSanitized': 'Oczyszczony tekst',
+  'settings.voice.page.field.ttsInputModeRaw': 'Surowy Markdown',
  'settings.window.description': 'Okno ustawień OpenChamber.',
 };
@@ -714,6 +714,10 @@ export const dict: Record<I18nKey, string> = {
  'chat.messageBody.tts.stopSpeaking': 'Przestań mówić',
  'chat.messageBody.tts.readAloud': 'Czytaj na głos',
  'chat.messageBody.tts.readAloudWithProvider': 'Czytaj na głos ({provider} voice)',
+  'planView.tts.readAloud': 'Czytaj plan na głos',
+  'planView.tts.stopSpeaking': 'Zatrzymaj czytanie',
+  'filesView.tts.readAloud': 'Czytaj plik na głos',
+  'filesView.tts.stopSpeaking': 'Zatrzymaj czytanie',
  'chat.messageBody.toast.noProject': 'Nie znaleziono projektu dla tej sesji',
  'chat.messageBody.toast.savePlanFailed': 'Nie udało się zapisać planu',
  'chat.messageBody.toast.planSaved': 'Plan zapisany',
@@ -1504,6 +1504,9 @@ export const settingsDict = {
  "settings.voice.page.preview.browserVoiceFallback": "voz do navegador",
  "settings.voice.page.preview.voiceLine": "Olá! Sou {voiceName}. É assim que minha voz soa.",
  "settings.voice.page.preview.customServerLine": "Olá! Esta é uma prévia do servidor TTS personalizado.",
+  "settings.voice.page.field.ttsInputMode": "Modo de entrada TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Texto limpo",
+  "settings.voice.page.field.ttsInputModeRaw": "Markdown bruto",
  "settings.openchamber.visual.section.colorMode": "Modo de cor",
  "settings.openchamber.visual.section.mobileLayout": "Layout móvel",
  "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
  "chat.messageBody.tts.stopSpeaking": "Parar de falar",
  "chat.messageBody.tts.readAloud": "Ler em voz alta",
  "chat.messageBody.tts.readAloudWithProvider": "Ler em voz alta (voz {provider})",
+  "planView.tts.readAloud": "Ler plano em voz alta",
+  "planView.tts.stopSpeaking": "Parar de falar",
+  "filesView.tts.readAloud": "Ler arquivo em voz alta",
+  "filesView.tts.stopSpeaking": "Parar de falar",
  "chat.messageBody.toast.noProject": "Não foi encontrado projeto para esta sessão",
  "chat.messageBody.toast.savePlanFailed": "Não foi possível salvar o plano",
  "chat.messageBody.toast.planSaved": "Plano salvo",
@@ -1504,6 +1504,9 @@ export const settingsDict = {
  "settings.voice.page.preview.browserVoiceFallback": "голос вашого браузера",
  "settings.voice.page.preview.voiceLine": "Привіт! Я {voiceName}. Ось як я звучу.",
  "settings.voice.page.preview.customServerLine": "Привіт! Це попередній перегляд спеціального сервера TTS.",
+  "settings.voice.page.field.ttsInputMode": "Режим вводу TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Очищений текст",
+  "settings.voice.page.field.ttsInputModeRaw": "Сирий Markdown",
  "settings.openchamber.visual.section.colorMode": "Режим теми",
  "settings.openchamber.visual.section.mobileLayout": "Мобільний макет",
  "settings.openchamber.visual.option.mobileLayout.default": "Попередній",
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
  "chat.messageBody.tts.stopSpeaking": "Зупинити озвучення",
  "chat.messageBody.tts.readAloud": "Прочитати вголос",
  "chat.messageBody.tts.readAloudWithProvider": "Прочитати вголос (голос {provider})",
+  "planView.tts.readAloud": "Прочитати план вголос",
+  "planView.tts.stopSpeaking": "Зупинити читання",
+  "filesView.tts.readAloud": "Прочитати файл вголос",
+  "filesView.tts.stopSpeaking": "Зупинити читання",
  "chat.messageBody.toast.noProject": "Для цієї сесії не знайдено жодного проєкту",
  "chat.messageBody.toast.savePlanFailed": "Не вдалося зберегти план",
  "chat.messageBody.toast.planSaved": "План збережено",
@@ -1504,6 +1504,9 @@ export const settingsDict = {
  'settings.voice.page.preview.browserVoiceFallback': '你的浏览器声音',
  'settings.voice.page.preview.voiceLine': '你好！我是 {voiceName}。这是我的声音效果。',
  'settings.voice.page.preview.customServerLine': '你好！这是自定义 TTS 服务器的预览。',
+  'settings.voice.page.field.ttsInputMode': 'TTS 输入模式',
+  'settings.voice.page.field.ttsInputModeSanitized': '清理后文本',
+  'settings.voice.page.field.ttsInputModeRaw': '原始 Markdown',
  'settings.openchamber.visual.section.colorMode': '颜色模式',
  'settings.openchamber.visual.section.mobileLayout': '移动端布局',
  'settings.openchamber.visual.option.mobileLayout.default': '旧版',
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
  'chat.messageBody.tts.stopSpeaking': '停止朗读',
  'chat.messageBody.tts.readAloud': '朗读',
  'chat.messageBody.tts.readAloudWithProvider': '朗读（{provider} 语音）',
+  'planView.tts.readAloud': '朗读计划',
+  'planView.tts.stopSpeaking': '停止朗读',
+  'filesView.tts.readAloud': '朗读文件',
+  'filesView.tts.stopSpeaking': '停止朗读',
  'chat.messageBody.toast.noProject': '未找到此会话对应的项目',
  'chat.messageBody.toast.savePlanFailed': '保存计划失败',
  'chat.messageBody.toast.planSaved': '计划已保存',
@@ -1425,6 +1425,9 @@
  'settings.voice.page.preview.browserVoiceFallback': '你的瀏覽器聲音',
  'settings.voice.page.preview.voiceLine': '你好！我是 {voiceName}。這是我的聲音效果。',
  'settings.voice.page.preview.customServerLine': '你好！這是自訂 TTS 伺服器的預覽。',
+  'settings.voice.page.field.ttsInputMode': 'TTS 輸入模式',
+  'settings.voice.page.field.ttsInputModeSanitized': '清理後文字',
+  'settings.voice.page.field.ttsInputModeRaw': '原始 Markdown',
  'settings.openchamber.visual.section.colorMode': '顏色模式',
  'settings.openchamber.visual.section.localization': '在地化',
  'settings.openchamber.visual.section.spacingAndLayout': '間距與佈局',
@@ -1711,6 +1711,10 @@ export const dict: Record<I18nKey, string> = {
  'chat.messageBody.tts.stopSpeaking': '停止朗讀',
  'chat.messageBody.tts.readAloud': '朗讀',
  'chat.messageBody.tts.readAloudWithProvider': '朗讀（{provider} 語音）',
+  'planView.tts.readAloud': '朗讀計畫',
+  'planView.tts.stopSpeaking': '停止朗讀',
+  'filesView.tts.readAloud': '朗讀檔案',
+  'filesView.tts.stopSpeaking': '停止朗讀',
  'chat.messageBody.toast.noProject': '找不到此會話對應的專案',
  'chat.messageBody.toast.savePlanFailed': '儲存計畫失敗',
  'chat.messageBody.toast.planSaved': '計畫已儲存',
@@ -683,6 +683,7 @@ interface ConfigStore {
    sttSilenceHoldMs: number;
    sttTranscribeOnStop: boolean;
    showMessageTTSButtons: boolean;
+    ttsInputMode: 'sanitized' | 'raw';
    voiceModeEnabled: boolean;
    // Summarization settings
    summarizeMessageTTS: boolean;
@@ -710,6 +711,7 @@ interface ConfigStore {
    setSttSilenceHoldMs: (ms: number) => void;
    setSttTranscribeOnStop: (enabled: boolean) => void;
    setShowMessageTTSButtons: (show: boolean) => void;
+    setTtsInputMode: (mode: 'sanitized' | 'raw') => void;
    setVoiceModeEnabled: (enabled: boolean) => void;
    setSummarizeMessageTTS: (enabled: boolean) => void;
    setSummarizeVoiceConversation: (enabled: boolean) => void;
@@ -978,6 +980,13 @@ export const useConfigStore = create<ConfigStore>()(
                    }
                    return false;
                })(),
+                ttsInputMode: (() => {
+                    if (typeof window !== 'undefined') {
+                        const saved = localStorage.getItem('ttsInputMode');
+                        if (saved === 'raw') return 'raw' as const;
+                    }
+                    return 'sanitized' as const;
+                })(),
                // Voice mode enabled - load from localStorage or default to false
                voiceModeEnabled: (() => {
                    if (typeof window !== 'undefined') {
@@ -2286,6 +2295,13 @@ export const useConfigStore = create<ConfigStore>()(
                    }
                },

+                setTtsInputMode: (mode: 'sanitized' | 'raw') => {
+                    set({ ttsInputMode: mode });
+                    if (typeof window !== 'undefined') {
+                        localStorage.setItem('ttsInputMode', mode);
+                    }
+                },
+
                setVoiceModeEnabled: (enabled: boolean) => {
                    set({ voiceModeEnabled: enabled });
                    if (typeof window !== 'undefined') {