Spaces:
Sleeping
Sleeping
| import { | |
| useCallback, | |
| useId, | |
| useRef, | |
| type Dispatch, | |
| type SetStateAction, | |
| } from 'react' | |
| import { Loader2, Pause, Play, SkipBack, Square, Volume2 } from 'lucide-react' | |
| import { useTtsPreferences } from '../context/TtsPreferencesContext' | |
| import { extractTtsSentences } from '../lib/ttsSentenceSplit' | |
| import { | |
| getTtsPitch, | |
| getTtsVoiceUri, | |
| TTS_SPEED_OPTIONS, | |
| } from '../lib/ttsSettings' | |
| /** Strip rough markdown / noise so speech sounds sane (aligned with phd-advisor MessageBubble idea). */ | |
| export function stripForSpeech(raw: string): string { | |
| if (!raw) return '' | |
| return raw | |
| .replace(/```[\s\S]*?```/g, ' ') | |
| .replace(/`([^`]+)`/g, '$1') | |
| .replace(/#{1,6}\s?/g, '') | |
| .replace(/[*_~]{1,3}([^*_~]+)[*_~]{1,3}/g, '$1') | |
| .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') | |
| .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1') | |
| .replace(/^\s*[-*+]\s/gm, '') | |
| .replace(/\n{2,}/g, '. ') | |
| .replace(/\n/g, ' ') | |
| .replace(/\s+/g, ' ') | |
| .trim() | |
| } | |
| /** Shared across all message rows so starting playback in one row invalidates others (AskJerry-style). */ | |
| let ttsGen = 0 | |
| function bumpTtsGen(): number { | |
| ttsGen += 1 | |
| return ttsGen | |
| } | |
| export type MessageTtsSharedState = { | |
| index: number | null | |
| phase: 'idle' | 'loading' | 'playing' | 'paused' | |
| } | |
| export function createInitialMessageTtsState(): MessageTtsSharedState { | |
| return { index: null, phase: 'idle' } | |
| } | |
| type Props = { | |
| text: string | |
| messageIndex: number | |
| tts: MessageTtsSharedState | |
| setTts: Dispatch<SetStateAction<MessageTtsSharedState>> | |
| } | |
| export function MessageTtsControls({ | |
| text, | |
| messageIndex, | |
| tts, | |
| setTts, | |
| }: Props) { | |
| const labelId = useId() | |
| const { playbackSpeed, setPlaybackSpeed } = useTtsPreferences() | |
| const speedRef = useRef(playbackSpeed) | |
| speedRef.current = playbackSpeed | |
| const skipRef = useRef(false) | |
| const replayDeltaRef = useRef<number | null>(null) | |
| const isMine = | |
| tts.index === messageIndex && tts.phase !== 'idle' | |
| const loading = isMine && tts.phase === 'loading' | |
| const playing = isMine && tts.phase === 'playing' | |
| const paused = isMine && tts.phase === 'paused' | |
| const speakSentence = useCallback((sentence: string, myGen: number): Promise<void> => { | |
| return new Promise((resolve) => { | |
| const synth = window.speechSynthesis | |
| if (!synth || myGen !== ttsGen) { | |
| resolve() | |
| return | |
| } | |
| const u = new SpeechSynthesisUtterance(sentence) | |
| u.rate = speedRef.current | |
| u.pitch = getTtsPitch() | |
| const vUri = getTtsVoiceUri() | |
| if (vUri) { | |
| const v = synth.getVoices().find((x) => x.voiceURI === vUri) | |
| if (v) u.voice = v | |
| } | |
| let settled = false | |
| const finish = () => { | |
| if (settled) return | |
| settled = true | |
| resolve() | |
| } | |
| const pollId = window.setInterval(() => { | |
| if (myGen !== ttsGen) { | |
| synth.cancel() | |
| finish() | |
| } | |
| if (skipRef.current) { | |
| synth.cancel() | |
| finish() | |
| } | |
| }, 120) | |
| u.onend = () => { | |
| window.clearInterval(pollId) | |
| finish() | |
| } | |
| u.onerror = () => { | |
| window.clearInterval(pollId) | |
| finish() | |
| } | |
| synth.speak(u) | |
| }) | |
| }, []) | |
| const runPlayback = useCallback( | |
| async (myGen: number) => { | |
| const plain = stripForSpeech(text) | |
| const sentences = extractTtsSentences(plain, true) | |
| if (!sentences.length) { | |
| if (myGen === ttsGen) { | |
| setTts({ index: null, phase: 'idle' }) | |
| } | |
| return | |
| } | |
| let playedCount = 0 | |
| setTts({ index: messageIndex, phase: 'loading' }) | |
| await Promise.resolve() | |
| if (myGen !== ttsGen) return | |
| setTts({ index: messageIndex, phase: 'playing' }) | |
| while (playedCount < sentences.length) { | |
| if (myGen !== ttsGen) return | |
| await speakSentence(sentences[playedCount], myGen) | |
| if (myGen !== ttsGen) return | |
| if (skipRef.current) { | |
| skipRef.current = false | |
| const delta = replayDeltaRef.current ?? 0 | |
| replayDeltaRef.current = null | |
| playedCount = Math.max(0, playedCount + delta) | |
| continue | |
| } | |
| playedCount++ | |
| } | |
| if (myGen === ttsGen) { | |
| setTts({ index: null, phase: 'idle' }) | |
| } | |
| }, | |
| [messageIndex, setTts, speakSentence, text], | |
| ) | |
| const onPrimary = () => { | |
| if (paused) { | |
| window.speechSynthesis?.resume() | |
| setTts({ index: messageIndex, phase: 'playing' }) | |
| return | |
| } | |
| if (playing) { | |
| window.speechSynthesis?.pause() | |
| setTts({ index: messageIndex, phase: 'paused' }) | |
| return | |
| } | |
| if (loading) return | |
| window.speechSynthesis?.cancel() | |
| const myGen = bumpTtsGen() | |
| skipRef.current = false | |
| replayDeltaRef.current = null | |
| void runPlayback(myGen) | |
| } | |
| const onReplay = () => { | |
| replayDeltaRef.current = -1 | |
| skipRef.current = true | |
| window.speechSynthesis?.cancel() | |
| } | |
| const onStop = () => { | |
| bumpTtsGen() | |
| skipRef.current = false | |
| replayDeltaRef.current = null | |
| window.speechSynthesis?.cancel() | |
| setTts({ index: null, phase: 'idle' }) | |
| } | |
| const cycleSpeed = () => { | |
| const i = TTS_SPEED_OPTIONS.indexOf(playbackSpeed) | |
| setPlaybackSpeed(TTS_SPEED_OPTIONS[(i + 1) % TTS_SPEED_OPTIONS.length]) | |
| } | |
| const noText = !(text || '').trim() | |
| const primaryDisabled = | |
| loading || (noText && tts.index !== messageIndex) | |
| if (!window.speechSynthesis) { | |
| return null | |
| } | |
| return ( | |
| <div className="message-tts-bar" role="group" aria-labelledby={labelId}> | |
| <span id={labelId} className="sr-only"> | |
| Text-to-speech controls | |
| </span> | |
| <div className="message-tts-buttons"> | |
| <button | |
| type="button" | |
| className={`message-tts-btn ${playing || paused ? 'message-tts-btn-active' : ''}`} | |
| onClick={onPrimary} | |
| disabled={primaryDisabled} | |
| title={ | |
| paused | |
| ? 'Resume' | |
| : playing | |
| ? 'Pause' | |
| : loading | |
| ? 'Loading speech…' | |
| : 'Read aloud' | |
| } | |
| aria-label={ | |
| paused | |
| ? 'Resume' | |
| : playing | |
| ? 'Pause' | |
| : loading | |
| ? 'Loading speech' | |
| : 'Read aloud' | |
| } | |
| > | |
| {paused ? ( | |
| <Play size={14} aria-hidden /> | |
| ) : loading ? ( | |
| <Loader2 size={14} className="message-tts-loading-spin" aria-hidden /> | |
| ) : playing ? ( | |
| <Pause size={14} aria-hidden /> | |
| ) : ( | |
| <Volume2 size={14} aria-hidden /> | |
| )} | |
| </button> | |
| {(playing || paused) && ( | |
| <button | |
| type="button" | |
| className="message-tts-btn" | |
| onClick={onReplay} | |
| title="Skip back" | |
| aria-label="Skip back" | |
| > | |
| <SkipBack size={14} aria-hidden /> | |
| </button> | |
| )} | |
| <button | |
| type="button" | |
| className="message-tts-btn message-tts-speed-btn" | |
| onClick={cycleSpeed} | |
| title="Playback speed" | |
| aria-label={`Playback speed: ${playbackSpeed}x`} | |
| > | |
| <span className="message-tts-speed-label">{playbackSpeed}x</span> | |
| </button> | |
| {(playing || paused || (loading && isMine)) && ( | |
| <button | |
| type="button" | |
| className="message-tts-btn" | |
| onClick={onStop} | |
| title="Stop reading" | |
| aria-label="Stop reading" | |
| > | |
| <Square size={14} aria-hidden /> | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| } | |