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>
This commit is contained in:
yangyaofei
committed by
GitHub
GitHub
co-authored by
Bohdan Triapitsyn
Bohdan Triapitsyn
parent
a6bf73b245
commit
ba95e13b36
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user