feat: add skip-back button for TTS playback (replay current or previous sentence)

frontend/src/App.jsx

@@ -17,6 +17,7 @@ import {
   Square,
   Share2,
   Trash2,
+  SkipBack,
   Volume2,
 } from 'lucide-react'
 
@@ -270,6 +271,17 @@ function AssistantSearchBar({ content, show, speak }) {
                 <Volume2 size={14} aria-hidden />
               )}
             </button>
+            {(speak.playing || speak.paused) && (
+              <button
+                type="button"
+                className="aj-msg-search-btn"
+                onClick={speak.onReplay}
+                data-tip="Skip back"
+                aria-label="Skip back"
+              >
+                <SkipBack size={14} aria-hidden />
+              </button>
+            )}
             {(speak.playing || speak.paused || (speak.loading && speak.showStop)) && (
               <button
                 type="button"
@@ -394,6 +406,8 @@ export default function App() {
   streamingRef.current = streaming
   const ttsContentResolverRef = useRef(null)
   const ttsPlaybackActiveRef = useRef(false)
+  const ttsSkipRef = useRef(false)
+  const ttsReplayDeltaRef = useRef(null)
   const streamingWasRef = useRef(false)
   const mediaRecorderRef = useRef(null)
   const audioChunksRef = useRef([])
@@ -557,6 +571,8 @@ export default function App() {
 
   const stopTts = useCallback(() => {
     ttsSessionRef.current += 1
+    ttsSkipRef.current = false
+    ttsReplayDeltaRef.current = null
     if (audioRef.current) {
       audioRef.current.pause()
       audioRef.current.src = ''
@@ -590,6 +606,20 @@ export default function App() {
     }
   }, [])
 
+  const replayTts = useCallback(() => {
+    const a = audioRef.current
+    if (!a) return
+    const EARLY_THRESHOLD = 1.0
+    if (a.currentTime > EARLY_THRESHOLD) {
+      a.currentTime = 0
+      if (a.paused) a.play().catch(() => {})
+      setTtsPaused(false)
+    } else {
+      ttsReplayDeltaRef.current = -1
+      ttsSkipRef.current = true
+    }
+  }, [])
+
   const playAudioUrlUntilDone = useCallback((url, session) => {
     return new Promise((resolve) => {
       if (session !== ttsSessionRef.current) {
@@ -611,6 +641,10 @@ export default function App() {
       }
       pollAbort = setInterval(() => {
         if (session !== ttsSessionRef.current) finish()
+        if (ttsSkipRef.current) {
+          audio.pause()
+          finish()
+        }
       }, 120)
       audio.onended = () => {
         finish()
@@ -675,6 +709,16 @@ export default function App() {
       let anyPlayed = false
       let lastErr = null
       const inFlight = new Map()
+      const recentUrls = new Map()
+
+      const revokeRecent = (keepFrom = Infinity) => {
+        for (const [idx, u] of recentUrls) {
+          if (idx < keepFrom) {
+            URL.revokeObjectURL(u)
+            recentUrls.delete(idx)
+          }
+        }
+      }
 
       const getSentencesAndLimit = () => {
         const live = streamingRef.current
@@ -692,14 +736,19 @@ export default function App() {
 
           if (playedCount < limit) {
             for (let ahead = playedCount; ahead < Math.min(playedCount + LOOKAHEAD, limit); ahead++) {
-              if (!inFlight.has(ahead)) {
+              if (!inFlight.has(ahead) && !recentUrls.has(ahead)) {
                 inFlight.set(ahead, fetchTtsAudio(sentences[ahead]))
               }
             }
 
-            if (!anyPlayed) setTtsLoadingIndex(index)
-            const result = await (inFlight.get(playedCount) || fetchTtsAudio(sentences[playedCount]))
-            inFlight.delete(playedCount)
+            let result
+            if (recentUrls.has(playedCount)) {
+              result = { url: recentUrls.get(playedCount) }
+            } else {
+              if (!anyPlayed) setTtsLoadingIndex(index)
+              result = await (inFlight.get(playedCount) || fetchTtsAudio(sentences[playedCount]))
+              inFlight.delete(playedCount)
+            }
 
             if (session !== ttsSessionRef.current) return
 
@@ -714,8 +763,20 @@ export default function App() {
             setTtsPlayingIndex(index)
             setTtsPaused(false)
 
+            recentUrls.set(playedCount, result.url)
+            revokeRecent(playedCount - 2)
+
             await playAudioUrlUntilDone(result.url, session)
-            URL.revokeObjectURL(result.url)
+
+            if (ttsSkipRef.current) {
+              ttsSkipRef.current = false
+              const delta = ttsReplayDeltaRef.current ?? 0
+              ttsReplayDeltaRef.current = null
+              playedCount = Math.max(0, playedCount + delta)
+              setTtsPaused(false)
+              continue
+            }
+
             if (ttsBlobUrlRef.current === result.url) {
               ttsBlobUrlRef.current = null
               audioRef.current = null
@@ -751,6 +812,7 @@ export default function App() {
         setTtsPaused(false)
       } finally {
         ttsPlaybackActiveRef.current = false
+        revokeRecent()
       }
     },
     [stopTts, playAudioUrlUntilDone, fetchTtsAudio],
@@ -1412,6 +1474,7 @@ export default function App() {
                         onReadAloud: () => playTtsForIndex(i, m.content),
                         onPause: pauseTts,
                         onResume: resumeTts,
+                        onReplay: replayTts,
                         onStopReading: stopTts,
                       }}
                     />