Add xfyun asr service

examples/webpage/app.js

@@ -60,6 +60,7 @@ const state = {
   botUiTimer: null,
 
   // Chat state.
+  currentUserBubble: null,
   currentAssistantBubble: null,
 
   // VU meter smoothing.
@@ -151,6 +152,7 @@ function scrollChatToBottom() {
 
 function clearChat() {
   els.chatLog.innerHTML = "";
+  state.currentUserBubble = null;
   state.currentAssistantBubble = null;
   const empty = document.createElement("div");
   empty.className = "chat__empty";
@@ -531,7 +533,27 @@ function resetPlaybackClock() {
 function handleUserTranscript(text) {
   if (!text) return;
   state.currentAssistantBubble = null;
-  addBubble("user", text);
+  if (state.currentUserBubble) {
+    const body = state.currentUserBubble.querySelector(".bubble__text");
+    body.textContent = text;
+    state.currentUserBubble.classList.remove("bubble--interim");
+  } else {
+    addBubble("user", text);
+  }
+  state.currentUserBubble = null;
+}
+
+function handleUserTranscriptInterim(text) {
+  if (!text) return;
+  state.currentAssistantBubble = null;
+  if (!state.currentUserBubble) {
+    state.currentUserBubble = addBubble("user", text);
+    state.currentUserBubble.classList.add("bubble--interim");
+  } else {
+    const body = state.currentUserBubble.querySelector(".bubble__text");
+    body.textContent = text;
+  }
+  scrollChatToBottom();
 }
 
 function sendText(text) {
@@ -553,6 +575,7 @@ function sendText(text) {
   // reply will be created when `response.text.started` arrives.
   wsSend(JSON.stringify(message));
   stopPlaybackQueue();
+  state.currentUserBubble = null;
   addBubble("user", value);
   return true;
 }
@@ -627,6 +650,9 @@ function handleEvent(event) {
     case "input.transcript.final":
       handleUserTranscript(event.text);
       break;
+    case "input.transcript.interim":
+      handleUserTranscriptInterim(event.text);
+      break;
     case "transport.message":
       // Reserved for future structured messages; ignore silently.
       break;

examples/webpage/styles.css

@@ -239,6 +239,10 @@ body {
   border-bottom-right-radius: 4px;
 }
 
+.bubble--user.bubble--interim {
+  opacity: 0.75;
+}
+
 .bubble--assistant {
   background: var(--assistant);
   color: var(--text);