rt-chat-input 1.0.3 → 1.0.5

package/README.md

@@ -79,18 +79,30 @@ const handleAttach = (files) => {
 
 #### Props
 
-| 属性名                 | 类型                          | 默认值                    | 说明                                                |
-| ---------------------- | ----------------------------- | ------------------------- | --------------------------------------------------- |
-| `placeholder`          | `string`                      | `'请输入，或按住说话...'` | 输入框占位符                                        |
-| `disabled`             | `boolean`                     | `false`                   | 是否禁用                                            |
-| `wsUrl`                | `string`                      | `undefined`               | 实时语音转写 WebSocket 地址                         |
-| `maxVoiceDuration`     | `number`                      | `60`                      | 最大录音时长（秒）                                  |
-| `theme`                | `'light' \| 'dark' \| 'auto'` | `'light'`                 | 主题模式                                            |
-| `fixed`                | `boolean`                     | `false`                   | 是否开启固定底部定位（开箱即用模式）                |
-| `bottomOffset`         | `number \| string`            | `36`                      | 底部距离偏移量（仅 fixed=true 时有效），数字单位 px |
-| `showVoiceButton`      | `boolean`                     | `true`                    | 是否显示语音按钮                                    |
-| `showAttachmentButton` | `boolean`                     | `true`                    | 是否显示附件按钮                                    |
-| `acceptFileTypes`      | `string`                      | `'image/*,.pdf...'`       | 允许上传的文件类型                                  |
+| 属性名                 | 类型                          | 默认值                    | 说明                                                           |
+| ---------------------- | ----------------------------- | ------------------------- | -------------------------------------------------------------- |
+| `placeholder`          | `string`                      | `'请输入，或按住说话...'` | 输入框占位符                                                   |
+| `disabled`             | `boolean`                     | `false`                   | 是否禁用                                                       |
+| `wsUrl`                | `string`                      | `undefined`               | 语音转写 WebSocket 地址（见下方[后端接入指南](#后端接入指南)） |
+| `maxVoiceDuration`     | `number`                      | `60`                      | 最大录音时长（秒）                                             |
+| `theme`                | `'light' \| 'dark' \| 'auto'` | `'light'`                 | 主题模式                                                       |
+| `fixed`                | `boolean`                     | `false`                   | 是否开启固定底部定位（开箱即用模式）                           |
+| `bottomOffset`         | `number \| string`            | `36`                      | 底部距离偏移量（仅 fixed=true 时有效），数字单位 px            |
+| `showVoiceButton`      | `boolean`                     | `true`                    | 是否显示语音按钮                                               |
+| `showAttachmentButton` | `boolean`                     | `true`                    | 是否显示附件按钮                                               |
+| `acceptFileTypes`      | `string`                      | `'image/*,.pdf,.doc...'`  | 允许上传的文件类型（默认为常见图片及办公文档格式）             |
+| `agentSteps`           | `AgentStep[]`                 | `[]`                      | Agent 执行步骤（用于展示思考过程），格式见下方定义             |
+
+#### AgentStep 类型定义
+
+```typescript
+interface AgentStep {
+  id: string | number;
+  title: string;
+  status: "pending" | "loading" | "success" | "error";
+  details?: string;
+}
+```
 
 #### Events
 
@@ -101,6 +113,9 @@ const handleAttach = (files) => {
 | `change` | `(text: string)`                  | 输入框内容变化时触发                               |
 | `attach` | `(files: File[])`                 | 附件列表变化时触发                                 |
 | `error`  | `(message: string)`               | 发生错误时触发                                     |
+| `stop`   | `-`                               | 点击停止按钮时触发（仅 loading=true 时）           |
+| `focus`  | `(e: FocusEvent)`                 | 输入框获得焦点时触发                               |
+| `blur`   | `(e: FocusEvent)`                 | 输入框失去焦点时触发                               |
 
 ### VoiceRecorder 组件
 
@@ -116,6 +131,92 @@ import { VoiceRecorder } from "rt-chat-input";
 </template>
 ```
 
+## 后端接入指南
+
+组件通过 WebSocket 发送 16k 采样率的 PCM 音频流，并期望接收 JSON 格式的转写结果。
+
+### 1. 通信协议
+
+- **客户端发送**：Raw PCM Audio (Int16, 16000Hz, Mono)
+- **服务端返回**：JSON 字符串
+  ```json
+  {
+    "text": "转写文本内容",
+    "isFinal": false // true 表示句尾（最终结果），false 表示中间结果
+  }
+  ```
+
+### 2. Spring WebFlux 实现示例
+
+推荐使用后端作为代理连接 FunASR 服务（避免前端直接处理复杂的握手协议）。
+
+```kotlin
+// WebSocketHandler 实现
+@Component
+class RealTimeTranscriptionHandler(
+    private val objectMapper: ObjectMapper
+) : WebSocketHandler {
+
+    // FunASR 服务地址 (e.g. ws://192.168.1.100:10095)
+    @Value("\${asr.service.url}")
+    private lateinit var asrServiceUrl: String
+
+    override fun handle(session: WebSocketSession): Mono<Void> {
+        val client = ReactorNettyWebSocketClient()
+        return client.execute(URI(asrServiceUrl)) { asrSession ->
+            // 1. 发送 FunASR 握手包 (必须配置如下参数以匹配模型要求)
+            val handshake = mapOf(
+                "mode" to "2pass",
+                "chunk_size" to listOf(5, 10, 5),
+                "encoder_chunk_look_back" to 4,
+                "decoder_chunk_look_back" to 1,
+                "wav_name" to "microphone",
+                "wav_format" to "pcm",
+                "audio_fs" to 16000,
+                "is_speaking" to true
+            )
+            val handshakeMsg = asrSession.textMessage(objectMapper.writeValueAsString(handshake))
+
+            // 2. 转发音频流 (Frontend -> FunASR)
+            val upstream = session.receive()
+                .filter { it.type == WebSocketMessage.Type.BINARY }
+                .map { msg ->
+                     // 提取二进制数据并转发
+                     val bytes = ByteArray(msg.payload.readableByteCount())
+                     msg.payload.read(bytes)
+                     asrSession.binaryMessage { it.wrap(bytes) }
+                }
+
+            // 3. 接收结果并转换 (FunASR -> Frontend)
+            val downstream = asrSession.receive()
+                .map { it.payloadAsText }
+                .mapNotNull { json ->
+                    // 解析 FunASR 响应并转换为组件所需格式
+                    val node = objectMapper.readTree(json)
+                    val text = node.path("text").asText()
+                    val mode = node.path("mode").asText()
+                    if (!text.isNullOrBlank()) {
+                        val response = mapOf(
+                            "text" to text,
+                            "isFinal" to (mode == "2pass-offline")
+                        )
+                        session.textMessage(objectMapper.writeValueAsString(response))
+                    } else null
+                }
+
+            // 合并流：发送握手 + 双向转发
+            // 关键修复：在前端断开或流结束时，发送 {"is_speaking": false} 以触发 2pass-offline 最终结果
+            val endSignal = Mono.defer {
+                 Mono.just(asrSession.textMessage("{\"is_speaking\":false}"))
+            }
+
+            asrSession.send(upstream.startWith(handshakeMsg).concatWith(endSignal))
+                .then(session.send(downstream))
+        }
+    }
+}
+```
+
 ## 主题定制
 
 组件使用 CSS 变量进行样式定义，你可以通过覆盖这些变量来定制主题：

package/dist/chat-input.es.js

@@ -962,7 +962,8 @@ const sg = { class: "chat-modal-container" }, yg = {
     showAttachmentButton: { type: Boolean, default: !0 },
     acceptFileTypes: { default: "image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt" },
     fixed: { type: Boolean, default: !1 },
-    bottomOffset: { default: 36 }
+    bottomOffset: { default: 36 },
+    agentSteps: { default: () => [] }
   },
   emits: ["send", "stop", "voice", "change", "attach", "error", "focus", "blur"],
   setup(f, { expose: L, emit: w }) {
@@ -1285,7 +1286,7 @@ const sg = { class: "chat-modal-container" }, yg = {
       ], 6)
     ], 6));
   }
-}), GB = /* @__PURE__ */ EA(SB, [["__scopeId", "data-v-c4107bcb"]]), xB = {
+}), GB = /* @__PURE__ */ EA(SB, [["__scopeId", "data-v-454751bc"]]), xB = {
   install(f) {
     f.component("ChatInput", GB), f.component("VoiceRecorder", aA);
   }