@personaai/react 0.7.2 → 0.7.4

package/README.md

@@ -94,6 +94,37 @@ function VoiceCall() {
 Requires a browser with `AudioWorklet` support (every current evergreen browser). Needs an HTTPS
 page in production — browsers refuse an insecure `ws://` connection from an `https:` page.
 
+### How `transcript` is shaped
+
+`transcript` is **live-only**: it starts empty on every `start()` and grows purely from the
+voice session's events. The server never replays the thread's prior history into it — pass
+`threadId` and the session *persists* new turns to that thread (so `useChat`/`useThreads` can read
+them back on reload), but `transcript` itself always reflects just what was spoken in this call.
+
+Gemini Live streams an agent answer as several incremental transcription fragments. The hook merges
+them so one utterance is **one transcript line**, mirroring how the same turns read back from the
+thread (consecutive assistant messages are coalesced on reload). The merge applies across distinct
+spoken segments of one answer too (e.g. split by a mid-answer tool call) — a new agent line is only
+started once a committed user line has intervened.
+
+### Showing voice turns in a text `useChat` feed
+
+Share the same `threadId` between `useVoice` and `useChat`, and pass the voice hook's return
+value into `useChat`'s `voice` option — that's the whole integration:
+
+```tsx
+const voice = useVoice({ agentId, threadId });
+const { messages, ... } = useChat({ threadId, voice });
+```
+
+`useChat` merges live voice turns into `messages` for you: one bubble per utterance, deduped
+against thread history and against a voice turn that already persisted back into the shared
+thread, consecutive same-speaker fragments folded into the line they opened, and the
+in-progress agent line updated in place while it's still being spoken (`isStreaming: true`, same
+as a text response). Injected messages get a `voice-`-prefixed id. You still call `voice.start()`
+/ `voice.stop()` yourself — `useChat` only owns the transcript-to-feed sync, not the call
+lifecycle.
+
 ## Devtools
 
 Floating panel for local debugging — inspect hooks, messages and threads with zero runtime changes. Dev-only, not bundled to production unless imported.

package/dist/index.cjs

@@ -435,6 +435,9 @@ function useChat(options = {}) {
   const [presentedFile, setPresentedFile] = (0, import_react2.useState)(null);
   const abortControllerRef = (0, import_react2.useRef)(null);
   const loadedThreadIdRef = (0, import_react2.useRef)(void 0);
+  const voiceThreadRef = (0, import_react2.useRef)(threadId);
+  const voicePrevLenRef = (0, import_react2.useRef)(0);
+  const voiceStreamingIdRef = (0, import_react2.useRef)(null);
   const stop = (0, import_react2.useCallback)(() => {
     if (abortControllerRef.current) {
       chatLogger.info("stop streaming", {});
@@ -540,6 +543,75 @@ function useChat(options = {}) {
     chatLogger.debug("loadThreadMessages trigger", { threadId });
     void loadThreadMessages(threadId);
   }, [threadId, isStreaming, messages.length, loadThreadMessages, chatLogger]);
+  const voice = options.voice;
+  (0, import_react2.useEffect)(() => {
+    if (!voice) return;
+    if (voiceThreadRef.current !== threadId) {
+      voiceThreadRef.current = threadId;
+      voicePrevLenRef.current = voice.transcript.length;
+      voiceStreamingIdRef.current = null;
+      return;
+    }
+    const isVoiceActive = voice.state !== "idle" && voice.state !== "ended" && voice.state !== "error";
+    const curLen = voice.transcript.length;
+    if (curLen < voicePrevLenRef.current) {
+      voicePrevLenRef.current = 0;
+      voiceStreamingIdRef.current = null;
+    }
+    if (!isVoiceActive) {
+      voicePrevLenRef.current = voice.transcript.length;
+      if (voiceStreamingIdRef.current) {
+        const doneId = voiceStreamingIdRef.current;
+        voiceStreamingIdRef.current = null;
+        setMessages(
+          (prev) => prev.map((m) => m.id === doneId ? { ...m, isStreaming: false } : m)
+        );
+      }
+      return;
+    }
+    if (curLen > voicePrevLenRef.current) {
+      const newLines = voice.transcript.slice(voicePrevLenRef.current);
+      voicePrevLenRef.current = curLen;
+      for (const line of newLines) {
+        const text = (line.text || "").trim();
+        if (!text) continue;
+        const role = line.speaker === "user" ? "user" : "assistant";
+        const voiceId = `voice-${line.id}`;
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === voiceId)) return prev;
+          if (prev.some(
+            (m) => !m.id.startsWith("voice-") && m.role === role && m.content.trim() === text
+          ))
+            return prev;
+          const last = prev[prev.length - 1];
+          if (last?.id.startsWith("voice-") && last.role === "assistant" && role === "assistant") {
+            const merged = text.startsWith(last.content) ? text : `${last.content} ${text}`.trim();
+            return [...prev.slice(0, -1), { ...last, content: merged, isStreaming: false }];
+          }
+          return [...prev, { id: voiceId, role, content: text, createdAt: /* @__PURE__ */ new Date() }];
+        });
+      }
+    }
+    const partialText = voice.partial?.speaker === "agent" ? voice.partial.text.trim() : "";
+    if (partialText) {
+      setMessages((prev) => {
+        const last = prev[prev.length - 1];
+        if (last?.id.startsWith("voice-") && last.role === "assistant") {
+          voiceStreamingIdRef.current = last.id;
+          return [...prev.slice(0, -1), { ...last, content: partialText, isStreaming: true }];
+        }
+        const id = voiceStreamingIdRef.current || `voice-partial-${Date.now()}`;
+        voiceStreamingIdRef.current = id;
+        return [...prev, { id, role: "assistant", content: partialText, isStreaming: true, createdAt: /* @__PURE__ */ new Date() }];
+      });
+    } else if (voice.state !== "speaking" && voiceStreamingIdRef.current) {
+      const doneId = voiceStreamingIdRef.current;
+      voiceStreamingIdRef.current = null;
+      setMessages(
+        (prev) => prev.map((m) => m.id === doneId ? { ...m, isStreaming: false } : m)
+      );
+    }
+  }, [voice?.transcript, voice?.partial, voice?.state, threadId]);
   const sendMessage = (0, import_react2.useCallback)(
     async (contentToSend, overrideOptions) => {
       const prompt = (contentToSend ?? input).trim();
@@ -1482,10 +1554,11 @@ function useVoice(options = {}) {
     }
     setPartial((prev) => prev?.speaker === speaker ? null : prev);
     const last = lastFinalTurnRef.current;
-    const sameUtterance = last && last.speaker === speaker && last.turnSeq === turnSeq;
+    const sameUserBurst = speaker === "user" && last && last.speaker === speaker && last.turnSeq === turnSeq;
     setTranscript((prev) => {
       const tail = prev[prev.length - 1];
-      if (sameUtterance && tail?.speaker === speaker) {
+      const agentContinues = speaker === "agent" && tail?.speaker === "agent";
+      if (agentContinues || sameUserBurst && tail?.speaker === "user") {
         const merged = mergeTranscriptText(tail.text, text);
         if (merged === tail.text) return prev;
         return prev.map(
@@ -1925,7 +1998,7 @@ function useMcpConnections(options = {}) {
 
 // src/index.ts
 var import_logger2 = require("@personaai/logger");
-var VERSION = "0.7.2";
+var VERSION = "0.7.3";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PersonaProvider,