@goodandready/dsh-voice 0.9.30 → 0.9.31

package/lib/client.js

@@ -132,6 +132,14 @@ window.__ModuleLoader__.load({
       'bargeIn': 'Barge-in',
       'polishSend': 'Polish whole draft before sending',
       'polishSendHint': 'Run the composed draft through the model right before sending',
+      'editablePreview': 'Editable preview before send',
+      'editablePreviewHint': 'Show recognized text before sending with editing, comparison and abort options.',
+      'editPreview': 'Edit',
+      'sendNow': 'Send',
+      'cancelPreview': 'Cancel',
+      'rawText': 'Raw',
+      'polishedText': 'Polished',
+      'sessionMismatch': 'Different chat active; canceled to prevent leak.',
       'sessionCommands': 'Voice session commands',
       'sessionCommandsHint': '"send", "cancel", "stop", "continue" act on the session instead of becoming text',
       'polishBaseUrl': 'Offline polish endpoint',
@@ -350,6 +358,14 @@ window.__ModuleLoader__.load({
       'bargeIn': '语音插话打断 (Barge-in)',
       'polishSend': '发送前润色整篇草稿',
       'polishSendHint': '发送给智能体前对整个输入框草稿进行一次整体润色',
+      'editablePreview': '发送前可编辑预览',
+      'editablePreviewHint': '发送前显示识别文本，支持编辑、润色对比和撤销。',
+      'editPreview': '编辑',
+      'sendNow': '发送',
+      'cancelPreview': '取消',
+      'rawText': '原文',
+      'polishedText': '润色',
+      'sessionMismatch': '当前会话已切换，已拦截发送以防止串话。',
       'sessionCommands': '会话语音控制指令',
       'sessionCommandsHint': '"send"、"cancel"、"stop"、"continue" 执行操作而非转为文本',
       'polishBaseUrl': '离线润色服务端点',
@@ -518,7 +534,20 @@ window.__ModuleLoader__.load({
       '.dvo-progress-bar{height:6px;width:100%;background:var(--dsw-alias-bg-layer-3);border-radius:3px;overflow:hidden}' +
       '.dvo-progress-fill{height:100%;background:var(--dsw-alias-state-info-primary);transition:width 150ms ease}' +
       '.dvo-jargon-table{width:100%;margin-top:6px;border-collapse:collapse;font-size:12px}' +
-      '.dvo-jargon-table td{padding:4px 6px;border-bottom:1px solid var(--dsw-alias-border-l1)}'
+      '.dvo-jargon-table td{padding:4px 6px;border-bottom:1px solid var(--dsw-alias-border-l1)}' +
+      '.dvo-pill-preview{display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-radius:18px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);width:100%;max-width:720px;margin:0 auto;box-shadow:0 8px 24px color-mix(in srgb, var(--dsw-alias-label-primary) 18%, transparent);box-sizing:border-box}' +
+      '.dvo-preview-header{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}' +
+      '.dvo-preview-tabs{display:inline-flex;align-items:center;gap:4px;background:var(--dsw-alias-bg-layer-2);padding:2px;border-radius:12px;border:1px solid var(--dsw-alias-border-l1)}' +
+      '.dvo-tab-btn{border:none;background:transparent;color:var(--dsw-alias-label-secondary);font-size:11px;font-weight:500;padding:3px 10px;border-radius:10px;cursor:pointer;transition:all 150ms ease}' +
+      '.dvo-tab-btn:hover{color:var(--dsw-alias-label-primary)}' +
+      '.dvo-tab-btn-active{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 3px color-mix(in srgb, var(--dsw-alias-label-primary) 15%, transparent)}' +
+      '.dvo-preview-body{display:flex;align-items:center;gap:8px;width:100%}' +
+      '.dvo-preview-text{flex:1;font-size:13px;color:var(--dsw-alias-label-primary);line-height:1.4;word-break:break-word;max-height:80px;overflow-y:auto;padding:2px 0}' +
+      '.dvo-preview-input{flex:1;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 8px;outline:none;font-family:inherit;width:100%}' +
+      '.dvo-preview-input:focus{border-color:var(--dsw-alias-state-info-primary)}' +
+      '.dvo-btn-send{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;flex:none;box-sizing:border-box;border:none;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);transition:opacity 150ms ease}' +
+      '.dvo-btn-send:hover{opacity:0.9}' +
+      '.dvo-warn-banner{font-size:12px;color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);border:1px solid var(--dsw-alias-state-error-primary);padding:4px 8px;border-radius:6px;margin-top:4px}'
     const cssId = 'dsh-voice/client.module.css'
     if (typeof document !== 'undefined' && !document.querySelector('style[data-dsh-plugin="dsh-voice"][data-plugin-css="' + cssId + '"]')) {
       const tag = document.createElement('style')
@@ -543,7 +572,7 @@ window.__ModuleLoader__.load({
       inputActions: null,
       input: null,
       settings: {
-        vadSilenceMs: 700, autoSendMs: 4000, stream: false, streamChunkMs: 1200, vadAdapt: 0,
+        vadSilenceMs: 700, autoSendMs: 4000, editablePreview: true, stream: false, streamChunkMs: 1200, vadAdapt: 0,
         noiseSuppression: true, contextGlossary: true,
         gatedTurnTaking: true, autoSendVisualRing: true, voiceActions: true,
         techJargonCorrection: true, jargonDictionary: [], liveInterimPreview: true,
@@ -1458,7 +1487,11 @@ voice._chainsPromise = null
       if (targetActions && typeof targetActions.captureInsertion === 'function') {
         try { span = targetActions.captureInsertion() } catch (_) {}
       }
-      const target = { actions: targetActions, input: targetInput, span }
+      const initialDraft = (targetInput && typeof targetInput.draft === 'string') ? targetInput.draft : ''
+      const targetSession = voice.session || (targetInput && targetInput.session)
+      const sessionId = (targetSession && (targetSession.sessionId || targetSession.id))
+        || voice.currentSessionId || ''
+      const target = { actions: targetActions, input: targetInput, session: targetSession, span, initialDraft, sessionId }
       voice._activeTarget = target
 
       if (voice.isTtsSpeaking) {
@@ -1539,7 +1572,12 @@ voice._chainsPromise = null
           if (mode === 'message') {
             const ok = appendDraft(said, target)
             if (ok !== false) {
-              voice.set({ phase: 'pending', pending: { text: said, target, totalMs: voice.settings.autoSendMs, leftMs: voice.settings.autoSendMs } })
+              const usePreview = voice.settings.editablePreview !== false
+              const autoMs = Number(voice.settings.autoSendMs) || 4000
+              const pendingState = usePreview
+                ? initPendingPreview(said, target, { autoSendMs: autoMs })
+                : { text: said, target, totalMs: autoMs, leftMs: autoMs }
+              voice.set({ phase: 'pending', pending: pendingState })
             } else {
               voice.set({ phase: 'idle' })
             }
@@ -1610,7 +1648,24 @@ voice._chainsPromise = null
             if (voice.lastNote) voice.lastNote.text = text
             if (mode === 'message') {
               if (ok !== false) {
-                voice.set({ phase: 'pending', pending: { text, target, totalMs: voice.settings.autoSendMs, leftMs: voice.settings.autoSendMs, audioUrl: noteUrl } })
+                const usePreview = voice.settings.editablePreview !== false
+                let polishedText = text
+                if (usePreview && voice.settings.polishSend) {
+                  try {
+                    const pRes = await fetch('/dsh-voice/polish', {
+                      method: 'POST',
+                      headers: { 'content-type': 'application/json' },
+                      body: JSON.stringify({ text }),
+                    })
+                    const pData = await pRes.json()
+                    if (pData && pData.text) polishedText = pData.text
+                  } catch (_) {}
+                }
+                const autoMs = Number(voice.settings.autoSendMs) || 4000
+                const pendingState = usePreview
+                  ? initPendingPreview(text, target, { autoSendMs: autoMs, polishedText, audioUrl: noteUrl, polishSend: voice.settings.polishSend })
+                  : { text, target, totalMs: autoMs, leftMs: autoMs, audioUrl: noteUrl }
+                voice.set({ phase: 'pending', pending: pendingState })
               } else {
                 voice.set({ phase: 'idle' })
               }
@@ -1658,38 +1713,11 @@ voice._chainsPromise = null
     }
 
     function submitPending() {
-      const pending = voice.pending
-      if (!pending) return
-      const text = pending.text
-      const target = pending.target || voice._activeTarget
-      const actions = (target && target.actions) || voice.inputActions
-      voice.pending = null
-      voice.set({ phase: 'idle' })
+      submitPendingPreview(voice)
+    }
 
-      if (voice.settings.polishSend) {
-        fetch('/dsh-voice/polish', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ text }),
-        })
-          .then((res) => res.json())
-          .then((data) => {
-            const polished = (data && data.text) || text
-            if (actions && typeof actions.setDraft === 'function') {
-              actions.setDraft(polished)
-            }
-            if (actions && typeof actions.submit === 'function') {
-              actions.submit()
-            }
-          })
-          .catch(() => {
-            if (actions && typeof actions.submit === 'function') {
-              actions.submit()
-            }
-          })
-      } else if (actions && typeof actions.submit === 'function') {
-        actions.submit()
-      }
+    function cancelPending() {
+      cancelPendingPreview(voice)
     }
 
     function runSessionCommand(cmd) {
@@ -1700,8 +1728,7 @@ voice._chainsPromise = null
     }
 
     function keepPending() {
-      voice.pending = null
-      voice.set({ phase: 'idle' })
+      keepPendingPreview(voice)
     }
     // ----------------------------------------------------------- components
     function VoiceButtons(props) {
@@ -1930,6 +1957,258 @@ voice._chainsPromise = null
       }
       return cleanup
     }
+// ------------------------------------------------------------------ 43-preview
+// Editable preview state machine, session pinning & UI component (#170).
+
+function initPendingPreview(text, target, options = {}) {
+  const autoMs = Number(options.autoSendMs) || 4000
+  const polishedText = options.polishedText || text
+  const isPolished = options.polishSend && polishedText && polishedText !== text
+  const initialDraft = (target && typeof target.initialDraft === 'string')
+    ? target.initialDraft
+    : ((target && target.input && typeof target.input.draft === 'string') ? target.input.draft : '')
+  const sessionId = (target && target.sessionId) || ''
+
+  return {
+    text,
+    rawText: text,
+    polishedText,
+    activeText: isPolished ? polishedText : text,
+    selectedTab: isPolished ? 'polished' : 'raw',
+    isEditing: false,
+    target,
+    sessionId,
+    initialDraft,
+    totalMs: autoMs,
+    leftMs: autoMs,
+    paused: false,
+    audioUrl: options.audioUrl || '',
+    sessionMismatch: false,
+  }
+}
+
+function cancelPendingPreview(voice) {
+  const pending = voice.pending
+  if (!pending) {
+    voice.set({ phase: 'idle' })
+    return
+  }
+  const target = pending.target || voice._activeTarget
+  const actions = (target && target.actions) || voice.inputActions
+
+  // Restore untouched composer draft if preview was active
+  if (pending.rawText !== undefined && pending.initialDraft !== undefined) {
+    if (actions && typeof actions.setDraft === 'function') {
+      try { actions.setDraft(pending.initialDraft) } catch (_) {}
+    }
+  }
+  voice.pending = null
+  voice.set({ phase: 'idle' })
+}
+
+function keepPendingPreview(voice) {
+  const pending = voice.pending
+  if (!pending) {
+    voice.set({ phase: 'idle' })
+    return
+  }
+  const target = pending.target || voice._activeTarget
+  const actions = (target && target.actions) || voice.inputActions
+
+  if (pending.rawText !== undefined) {
+    // Insert final edited text into composer draft without auto-sending
+    const initial = pending.initialDraft || ''
+    const textToInsert = pending.activeText || ''
+    const full = initial
+      ? (initial.endsWith(' ') || initial.endsWith('\n') ? (initial + textToInsert) : (initial + ' ' + textToInsert))
+      : textToInsert
+    if (actions && typeof actions.setDraft === 'function') {
+      try { actions.setDraft(full) } catch (_) {}
+    }
+  }
+  voice.pending = null
+  voice.set({ phase: 'idle' })
+}
+
+function submitPendingPreview(voice) {
+  const pending = voice.pending
+  if (!pending) return
+  const target = pending.target || voice._activeTarget
+  const actions = (target && target.actions) || voice.inputActions
+
+  // Session guard (#170): verify that current session matches initiating session
+  const currentSessionId = (target && target.session && (target.session.sessionId || target.session.id))
+    || (voice.session && (voice.session.sessionId || voice.session.id))
+    || voice.currentSessionId || ''
+
+  if (pending.sessionId && currentSessionId && pending.sessionId !== currentSessionId) {
+    pending.sessionMismatch = true
+    pending.paused = true
+    voice.notify()
+    return
+  }
+
+  const textToSend = (pending.rawText !== undefined ? pending.activeText : pending.text) || ''
+  voice.pending = null
+  voice.set({ phase: 'idle' })
+
+  if (pending.rawText !== undefined) {
+    const initial = pending.initialDraft || ''
+    const full = initial
+      ? (initial.endsWith(' ') || initial.endsWith('\n') ? (initial + textToSend) : (initial + ' ' + textToSend))
+      : textToSend
+    if (actions && typeof actions.setDraft === 'function') {
+      try { actions.setDraft(full) } catch (_) {}
+    }
+    if (actions && typeof actions.submit === 'function') {
+      try { actions.submit() } catch (_) {}
+    }
+  } else {
+    // Legacy path without rich preview
+    if (voice.settings.polishSend) {
+      fetch('/dsh-voice/polish', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ text: textToSend }),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          const polished = (data && data.text) || textToSend
+          if (actions && typeof actions.setDraft === 'function') actions.setDraft(polished)
+          if (actions && typeof actions.submit === 'function') actions.submit()
+        })
+        .catch(() => {
+          if (actions && typeof actions.submit === 'function') actions.submit()
+        })
+    } else if (actions && typeof actions.submit === 'function') {
+      actions.submit()
+    }
+  }
+}
+
+function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef) {
+  const p = voice.pending
+  const total = p.totalMs || Number(voice.settings.autoSendMs) || 4000
+  const leftMs = Math.max(0, p.leftMs || 0)
+  const left = Math.ceil(leftMs / 1000)
+  const frac = total > 0 ? Math.max(0, Math.min(1, leftMs / total)) : 0
+  const circ = 2 * Math.PI * 14
+  const off = circ * (1 - frac)
+  const hasPolish = p.polishedText && p.polishedText !== p.rawText
+
+  return React.createElement('div', { className: 'dvo-pill-preview', role: 'region', 'aria-label': t('editablePreview') },
+    // Header row: tabs, audio playback, status/countdown, cancel button
+    React.createElement('div', { className: 'dvo-preview-header' },
+      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+        hasPolish
+          ? React.createElement('div', { className: 'dvo-preview-tabs' },
+              React.createElement('button', {
+                type: 'button',
+                className: 'dvo-tab-btn' + (p.selectedTab === 'raw' ? ' dvo-tab-btn-active' : ''),
+                onClick: () => {
+                  p.selectedTab = 'raw'
+                  p.activeText = p.rawText
+                  voice.notify()
+                },
+              }, t('rawText')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dvo-tab-btn' + (p.selectedTab === 'polished' ? ' dvo-tab-btn-active' : ''),
+                onClick: () => {
+                  p.selectedTab = 'polished'
+                  p.activeText = p.polishedText
+                  voice.notify()
+                },
+              }, t('polishedText')),
+            )
+          : React.createElement('span', { className: 'dvo-count' }, t('rawText')),
+        p.audioUrl
+          ? React.createElement('div', { className: 'dvo-audio-wrap' },
+              React.createElement('button', {
+                type: 'button', className: 'dvo-audio-play',
+                title: isPlaying ? t('pause') : t('play'),
+                'aria-label': isPlaying ? t('pause') : t('play'),
+                onClick: () => {
+                  const el = audioRef.current
+                  if (!el) return
+                  if (el.paused) { el.play().catch(() => {}); setIsPlaying(true) }
+                  else { el.pause(); setIsPlaying(false) }
+                },
+              }, isPlaying ? pauseIcon() : playIcon()),
+              React.createElement('audio', {
+                ref: audioRef, src: p.audioUrl,
+                onEnded: () => setIsPlaying(false),
+                onPause: () => setIsPlaying(false),
+                onPlay: () => setIsPlaying(true),
+              }),
+              React.createElement('span', { className: 'dvo-audio-time' }, t('listenBack')),
+            )
+          : null,
+      ),
+      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+        (!p.paused && !p.isEditing && v.settings.autoSendVisualRing !== false)
+          ? React.createElement('svg', { className: 'dvo-silence-ring', viewBox: '0 0 34 34' },
+              React.createElement('circle', { cx: 17, cy: 17, r: 14, className: 'dvo-ring-bg' }),
+              React.createElement('circle', {
+                cx: 17, cy: 17, r: 14, className: 'dvo-ring-fg',
+                strokeDasharray: `${circ} ${circ}`,
+                strokeDashoffset: off,
+              }),
+            )
+          : null,
+        React.createElement('span', { className: 'dvo-count' },
+          (p.paused || p.isEditing) ? '' : (left + t('secondsShort'))
+        ),
+        React.createElement('button', {
+          type: 'button', className: 'dvo-pbtn', title: t('cancelPreview'),
+          'aria-label': t('cancelPreview'),
+          onClick: () => { cancelPending(); focusComposer() },
+        }, xIcon()),
+      ),
+    ),
+    // Body row: editable input or preview text, Edit button, Send button
+    React.createElement('div', { className: 'dvo-preview-body' },
+      p.isEditing
+        ? React.createElement('input', {
+            type: 'text',
+            className: 'dvo-preview-input',
+            value: p.activeText,
+            autoFocus: true,
+            onChange: (e) => {
+              p.activeText = e.target.value
+              voice.notify()
+            },
+            onKeyDown: (e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                submitPending()
+              }
+            },
+          })
+        : React.createElement('span', { className: 'dvo-preview-text' }, p.activeText),
+      !p.isEditing
+        ? React.createElement('button', {
+            type: 'button', className: 'dvo-pbtn', title: t('editPreview'),
+            'aria-label': t('editPreview'),
+            onClick: () => {
+              p.isEditing = true
+              p.paused = true
+              voice.notify()
+            },
+          }, editIcon())
+        : null,
+      React.createElement('button', {
+        type: 'button', className: 'dvo-btn-send', title: t('sendNow'),
+        'aria-label': t('sendNow'),
+        onClick: () => { submitPending(); focusComposer() },
+      }, sendIcon()),
+    ),
+    // Mismatch warning banner
+    p.sessionMismatch
+      ? React.createElement('div', { className: 'dvo-warn-banner' }, t('sessionMismatch'))
+      : null,
+  )
+}
     // ----------------------------------------------------------- visualizers
     let _accentColorCache = { color: '', expires: 0 }
     let _softColorCache = { color: '', expires: 0 }
@@ -2071,6 +2350,8 @@ voice._chainsPromise = null
       const [isPlaying, setIsPlaying] = React.useState(false)
       voice.inputActions = props.inputActions
       voice.input = props.input
+      voice.session = props.session
+      voice.currentSessionId = (props.session && (props.session.sessionId || props.session.id)) || voice.currentSessionId || ''
       const ctx = props.ctx
 
       // VAD: accumulate silence and cut the phrase when the pause exceeds the threshold.
@@ -2194,6 +2475,10 @@ voice._chainsPromise = null
             else voice.notify()
             return
           }
+          if (p.paused || p.isEditing) {
+            // Confirmation or editing mode freezes auto-send countdown (#170)
+            return
+          }
           p.leftMs -= tick
           if (p.leftMs <= 0) { submitPending(); return }
           voice.notify()
@@ -2279,6 +2564,9 @@ voice._chainsPromise = null
       }
 
       if (v.phase === 'pending') {
+        if (voice.pending && voice.pending.rawText !== undefined) {
+          return renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
+        }
         const left = Math.max(0, Math.ceil((voice.pending ? voice.pending.leftMs : 0) / 1000))
         if (voice.pending && voice.pending.undoOnly) {
           // Cancel window for delayed dictation insert (#29-5).
@@ -2433,7 +2721,7 @@ voice._chainsPromise = null
         ))
         const offDock = ctx.slots.inject('conversation.input.dock', () => ctx.slots.register(
           { name: 'conversation.input.dock', id: 'dsh-voice-rec', order: 0, locale: NS, label: () => t('recordSlot') },
-          (props) => React.createElement(RecordPill, { input: props.input, inputActions: props.inputActions, ctx: ctx }),
+          (props) => React.createElement(RecordPill, { input: props.input, inputActions: props.inputActions, session: props.session, ctx: ctx }),
         ))
         return () => {
           if (typeof offRight === 'function') offRight()
@@ -3491,6 +3779,7 @@ voice._chainsPromise = null
           wakeWord: String(val.wakeWord || ''),
           bargeIn: !!val.bargeIn,
           polishSend: !!(val.message && val.message.polishSend),
+          editablePreview: val.message ? val.message.editablePreview !== false : true,
           sessionCommands: !!(val.message && val.message.sessionCommands),
           polishBaseUrl: String(val.polishBaseUrl || ''),
           noiseSuppression: val.noiseSuppression !== false,
@@ -4041,6 +4330,12 @@ voice._chainsPromise = null
       cancelCurrent,
       stopCurrent,
       submitPending,
+      cancelPending,
+      keepPending,
+      initPendingPreview,
+      cancelPendingPreview,
+      keepPendingPreview,
+      submitPendingPreview,
       loadWebGpuWhisper,
       isWebGpuSupported,
       isWasmSupported,