@personaai/react 0.7.3 → 0.7.4

package/README.md

@@ -109,35 +109,21 @@ started once a committed user line has intervened.
 
 ### Showing voice turns in a text `useChat` feed
 
-If you drive a `useVoice({ agentId, threadId })` session alongside `useChat({ threadId })` and
-inject live turns into the chat feed yourself, dedupe before injecting. Because the session
-persists to the same thread, `useChat.messages` may already carry a turn once it refreshes or on
-reload — re-injecting the live copy appends it a second time:
+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 { transcript, ... } = useVoice({ agentId, threadId });
-const { messages, appendMessage, ... } = useChat({ threadId });
-
-// Turn a committed voice line into a chat message once, and only if the feed
-// does not already hold this content (from an earlier live inject OR a reload
-// that pulled the persisted thread).
-const pushVoiceLine = (line: { id: string; speaker: "user" | "agent"; text: string }) => {
-  if (messages.some((m) => m.id === line.id)) return;           // injected before
-  if (messages.some((m) =>
-    !String(m.id).startsWith("voice-") &&
-    m.role === line.speaker &&
-    String(m.content).trim() === line.text.trim(),
-  )) return;                                                     // already on the thread
-  appendMessage({
-    id: `voice-${line.id}`,
-    role: line.speaker,
-    content: line.text,
-  });
-};
+const voice = useVoice({ agentId, threadId });
+const { messages, ... } = useChat({ threadId, voice });
 ```
 
-Voice turns are intentionally **live-only** in `useVoice` — history is the thread's job, not the
-hook's, so when you share a thread with `useChat` you own the dedup at the injection boundary.
+`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
 

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();