feat(voice-button): refactor speech input modes from mixed/continuous to append/replace

Author: SonyLeo

docs/demos/sender/voice-input.vue

@@ -2,36 +2,44 @@
 import { ref } from 'vue'
 import { TrSender, VoiceButton } from '@opentiny/tiny-robot'
 
-const voiceMode = ref<'mixed' | 'continuous'>('mixed')
+const voiceMode = ref<'append' | 'replace'>('append')
 </script>
 
 <template>
   <div style="display: flex; flex-direction: column; gap: 16px">
     <div style="display: flex; align-items: center; gap: 12px">
       <span style="font-weight: 500">模式：</span>
       <label style="display: flex; align-items: center; gap: 4px; cursor: pointer">
-        <input type="radio" value="mixed" v-model="voiceMode" style="cursor: pointer" />
-        <span>混合输入</span>
+        <input type="radio" value="append" v-model="voiceMode" style="cursor: pointer" />
+        <span>追加模式</span>
       </label>
       <label style="display: flex; align-items: center; gap: 4px; cursor: pointer">
-        <input type="radio" value="continuous" v-model="voiceMode" style="cursor: pointer" />
-        <span>连续识别</span>
+        <input type="radio" value="replace" v-model="voiceMode" style="cursor: pointer" />
+        <span>替换模式</span>
       </label>
     </div>
     <div style="padding: 8px 12px; background: #f5f7fa; border-radius: 4px; font-size: 13px; color: #666">
-      {{ voiceMode === 'mixed' ? '语音识别结果追加到输入框，可继续编辑' : '持续识别语音并自动替换内容' }}
+      {{
+        voiceMode === 'append'
+          ? '追加模式：每次语音识别结果会追加到输入框末尾，适合混合输入'
+          : '替换模式：每次语音识别会替换输入框全部内容，适合纯语音输入'
+      }}
     </div>
     <tr-sender
       :key="voiceMode"
       mode="multiple"
-      :placeholder="voiceMode === 'mixed' ? '点击麦克风说话，识别结果会追加到此处...' : '点击麦克风开始连续识别...'"
+      :placeholder="
+        voiceMode === 'append'
+          ? '可以打字或点击麦克风说话，语音内容会追加...'
+          : '点击麦克风说话，每次识别会替换全部内容...'
+      "
     >
       <template #footer-right>
         <VoiceButton
           :speech-config="
-            voiceMode === 'mixed'
+            voiceMode === 'append'
               ? { autoReplace: false, interimResults: true }
-              : { autoReplace: true, continuous: true }
+              : { autoReplace: true, interimResults: true }
           "
         />
       </template>

packages/components/src/sender-actions/voice-button/index.vue

@@ -34,16 +34,24 @@ const insertTranscript = (transcript: string) => {
     return
   }
 
-  // 在单次录音会话期间，持续替换当前的语音插入范围
-  const range = speechRange.value ?? {
-    from: editorInstance.state.selection.from,
-    to: editorInstance.state.selection.to,
+  // autoReplace 模式：替换整个输入框内容
+  if (speechRange.value === null) {
+    // 首次插入，记录起始位置为 0
+    speechRange.value = {
+      from: 0,
+      to: 0,
+    }
   }
-  const tr = editorInstance.state.tr.insertText(transcript, range.from, range.to)
+
+  // 替换从起始位置到当前内容末尾的所有文本
+  const docSize = editorInstance.state.doc.content.size
+  const tr = editorInstance.state.tr.insertText(transcript, speechRange.value.from, docSize)
   editorInstance.view.dispatch(tr)
+
+  // 更新范围，保持起始位置不变，更新结束位置
   speechRange.value = {
-    from: range.from,
-    to: range.from + transcript.length,
+    from: speechRange.value.from,
+    to: speechRange.value.from + transcript.length,
   }
   editorInstance.commands.focus('end')
 }
@@ -62,7 +70,9 @@ const speechOptions = {
     emit('speech-interim', transcript)
   },
   onFinal: (transcript: string) => {
-    insertTranscript(transcript)
+    if (!props.speechConfig?.autoReplace) {
+      insertTranscript(transcript)
+    }
     emit('speech-final', transcript)
   },
   onEnd: (transcript?: string) => {