@personaai/react 0.3.4 → 0.4.0

package/dist/index.d.cts

@@ -415,6 +415,62 @@ declare function useMcpConnections(options?: UseMcpConnectionsOptions): {
     refetch: () => Promise<PersonaMcpConnection[]>;
 };
 
-declare const VERSION = "0.3.4";
+/**
+ * SSE transport for chat streams, with a React Native fallback.
+ *
+ * On the web, `fetch` gives a streaming `response.body` and we read it with a
+ * ReadableStream reader. React Native's `fetch` is the whatwg-fetch polyfill
+ * over XMLHttpRequest: `response.body` is `undefined`, and the promise only
+ * settles once the entire response has arrived. That means the check cannot be
+ * "call fetch, then see whether body exists" - by that point the whole stream
+ * has already been buffered and the chance to stream is gone. The transport has
+ * to be chosen *before* the request is made.
+ *
+ * XMLHttpRequest itself does stream everywhere React Native runs: it appends to
+ * `responseText` and fires `readyState === 3` (LOADING) on every chunk, which is
+ * all an SSE consumer needs. So the RN path issues the request over raw XHR and
+ * hands back the same reader interface the fetch path does, leaving callers
+ * unaware of which one they got.
+ */
+/** Minimal reader interface, mirroring the shape of a ReadableStream reader. */
+interface SSEReader {
+    /** Resolves with the next decoded chunk, or `{ done: true }` at end of stream. */
+    read(): Promise<{
+        done: boolean;
+        value?: string;
+    }>;
+    /** Aborts the underlying request. */
+    cancel(): void;
+}
+interface SSEStream {
+    status: number;
+    ok: boolean;
+    getHeader(name: string): string | null;
+    /** Present only when `ok` is false, so callers can surface the server's message. */
+    errorText?: string;
+    reader: SSEReader;
+}
+interface OpenSSEOptions {
+    url: string;
+    headers: Record<string, string>;
+    body: string;
+    signal?: AbortSignal;
+}
+/**
+ * Whether `fetch` on this platform yields a streaming body.
+ *
+ * `navigator.product === 'ReactNative'` is the long-standing marker React
+ * Native sets, and is checked rather than feature-detecting `ReadableStream`:
+ * newer RN versions do expose a global `ReadableStream` while still leaving
+ * `response.body` undefined, so the presence of the type says nothing about
+ * whether fetch will populate it.
+ */
+declare function supportsStreamingFetch(): boolean;
+/**
+ * Opens an SSE stream, using whichever transport this platform can stream over.
+ */
+declare function openSSEStream(opts: OpenSSEOptions): Promise<SSEStream>;
+
+declare const VERSION = "0.4.0";
 
-export { type PersonaAgentSummary, type PersonaClarificationQuestion, type PersonaFileItem, type PersonaHealthInfo, type PersonaHitlActionRequest, type PersonaInterrupt, type PersonaMcpConnection, type PersonaMemoryAgentGroup, type PersonaMemoryFile, type PersonaMemoryList, type PersonaMessage, type PersonaPresentedFile, PersonaProvider, type PersonaProviderProps, type PersonaResumeValue, type PersonaRole, type PersonaStreamingEvent, type PersonaSubagentActivityEntry, type PersonaThread, type PersonaTodo, type PersonaToolCall, type PersonaWorkspaceFile, type SendMessageOverride, type UseChatOptions, type UseMcpConnectionsOptions, VERSION, useAgents, useChat, useConnection, useFiles, useMcpConnections, useMemory, usePersonaContext, useThreads };
+export { type OpenSSEOptions, type PersonaAgentSummary, type PersonaClarificationQuestion, type PersonaFileItem, type PersonaHealthInfo, type PersonaHitlActionRequest, type PersonaInterrupt, type PersonaMcpConnection, type PersonaMemoryAgentGroup, type PersonaMemoryFile, type PersonaMemoryList, type PersonaMessage, type PersonaPresentedFile, PersonaProvider, type PersonaProviderProps, type PersonaResumeValue, type PersonaRole, type PersonaStreamingEvent, type PersonaSubagentActivityEntry, type PersonaThread, type PersonaTodo, type PersonaToolCall, type PersonaWorkspaceFile, type SSEReader, type SSEStream, type SendMessageOverride, type UseChatOptions, type UseMcpConnectionsOptions, VERSION, openSSEStream, supportsStreamingFetch, useAgents, useChat, useConnection, useFiles, useMcpConnections, useMemory, usePersonaContext, useThreads };

package/dist/index.d.ts

@@ -415,6 +415,62 @@ declare function useMcpConnections(options?: UseMcpConnectionsOptions): {
     refetch: () => Promise<PersonaMcpConnection[]>;
 };
 
-declare const VERSION = "0.3.4";
+/**
+ * SSE transport for chat streams, with a React Native fallback.
+ *
+ * On the web, `fetch` gives a streaming `response.body` and we read it with a
+ * ReadableStream reader. React Native's `fetch` is the whatwg-fetch polyfill
+ * over XMLHttpRequest: `response.body` is `undefined`, and the promise only
+ * settles once the entire response has arrived. That means the check cannot be
+ * "call fetch, then see whether body exists" - by that point the whole stream
+ * has already been buffered and the chance to stream is gone. The transport has
+ * to be chosen *before* the request is made.
+ *
+ * XMLHttpRequest itself does stream everywhere React Native runs: it appends to
+ * `responseText` and fires `readyState === 3` (LOADING) on every chunk, which is
+ * all an SSE consumer needs. So the RN path issues the request over raw XHR and
+ * hands back the same reader interface the fetch path does, leaving callers
+ * unaware of which one they got.
+ */
+/** Minimal reader interface, mirroring the shape of a ReadableStream reader. */
+interface SSEReader {
+    /** Resolves with the next decoded chunk, or `{ done: true }` at end of stream. */
+    read(): Promise<{
+        done: boolean;
+        value?: string;
+    }>;
+    /** Aborts the underlying request. */
+    cancel(): void;
+}
+interface SSEStream {
+    status: number;
+    ok: boolean;
+    getHeader(name: string): string | null;
+    /** Present only when `ok` is false, so callers can surface the server's message. */
+    errorText?: string;
+    reader: SSEReader;
+}
+interface OpenSSEOptions {
+    url: string;
+    headers: Record<string, string>;
+    body: string;
+    signal?: AbortSignal;
+}
+/**
+ * Whether `fetch` on this platform yields a streaming body.
+ *
+ * `navigator.product === 'ReactNative'` is the long-standing marker React
+ * Native sets, and is checked rather than feature-detecting `ReadableStream`:
+ * newer RN versions do expose a global `ReadableStream` while still leaving
+ * `response.body` undefined, so the presence of the type says nothing about
+ * whether fetch will populate it.
+ */
+declare function supportsStreamingFetch(): boolean;
+/**
+ * Opens an SSE stream, using whichever transport this platform can stream over.
+ */
+declare function openSSEStream(opts: OpenSSEOptions): Promise<SSEStream>;
+
+declare const VERSION = "0.4.0";
 
-export { type PersonaAgentSummary, type PersonaClarificationQuestion, type PersonaFileItem, type PersonaHealthInfo, type PersonaHitlActionRequest, type PersonaInterrupt, type PersonaMcpConnection, type PersonaMemoryAgentGroup, type PersonaMemoryFile, type PersonaMemoryList, type PersonaMessage, type PersonaPresentedFile, PersonaProvider, type PersonaProviderProps, type PersonaResumeValue, type PersonaRole, type PersonaStreamingEvent, type PersonaSubagentActivityEntry, type PersonaThread, type PersonaTodo, type PersonaToolCall, type PersonaWorkspaceFile, type SendMessageOverride, type UseChatOptions, type UseMcpConnectionsOptions, VERSION, useAgents, useChat, useConnection, useFiles, useMcpConnections, useMemory, usePersonaContext, useThreads };
+export { type OpenSSEOptions, type PersonaAgentSummary, type PersonaClarificationQuestion, type PersonaFileItem, type PersonaHealthInfo, type PersonaHitlActionRequest, type PersonaInterrupt, type PersonaMcpConnection, type PersonaMemoryAgentGroup, type PersonaMemoryFile, type PersonaMemoryList, type PersonaMessage, type PersonaPresentedFile, PersonaProvider, type PersonaProviderProps, type PersonaResumeValue, type PersonaRole, type PersonaStreamingEvent, type PersonaSubagentActivityEntry, type PersonaThread, type PersonaTodo, type PersonaToolCall, type PersonaWorkspaceFile, type SSEReader, type SSEStream, type SendMessageOverride, type UseChatOptions, type UseMcpConnectionsOptions, VERSION, openSSEStream, supportsStreamingFetch, useAgents, useChat, useConnection, useFiles, useMcpConnections, useMemory, usePersonaContext, useThreads };

package/dist/index.js

@@ -42,6 +42,181 @@ function usePersonaContext() {
 
 // src/hooks/useChat.ts
 import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/streaming.ts
+function supportsStreamingFetch() {
+  if (typeof navigator !== "undefined" && navigator.product === "ReactNative") {
+    return false;
+  }
+  return typeof fetch !== "undefined" && typeof ReadableStream !== "undefined";
+}
+function fetchReader(response, controller) {
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+  return {
+    async read() {
+      const { done, value } = await reader.read();
+      if (done) return { done: true };
+      return { done: false, value: decoder.decode(value, { stream: true }) };
+    },
+    cancel() {
+      controller.abort();
+      void reader.cancel().catch(() => {
+      });
+    }
+  };
+}
+function xhrStream(opts) {
+  return new Promise((resolveStream, rejectStream) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", opts.url);
+    for (const [key, val] of Object.entries(opts.headers)) xhr.setRequestHeader(key, val);
+    let consumed = 0;
+    let finished = false;
+    let failure = null;
+    const queue = [];
+    let waiting = null;
+    let waitingReject = null;
+    let headersResolved = false;
+    const pump = () => {
+      const text = xhr.responseText;
+      if (text.length <= consumed) return;
+      const chunk = text.slice(consumed);
+      consumed = text.length;
+      if (waiting) {
+        const resolve = waiting;
+        waiting = null;
+        waitingReject = null;
+        resolve({ done: false, value: chunk });
+      } else {
+        queue.push(chunk);
+      }
+    };
+    const finish = (err) => {
+      if (finished) return;
+      finished = true;
+      failure = err ?? null;
+      if (waiting) {
+        const resolve = waiting;
+        const reject = waitingReject;
+        waiting = null;
+        waitingReject = null;
+        if (err && reject) reject(err);
+        else resolve({ done: true });
+      }
+    };
+    const reader = {
+      read() {
+        if (queue.length > 0) {
+          return Promise.resolve({ done: false, value: queue.shift() });
+        }
+        if (finished) {
+          return failure ? Promise.reject(failure) : Promise.resolve({ done: true });
+        }
+        return new Promise((resolve, reject) => {
+          waiting = resolve;
+          waitingReject = reject;
+        });
+      },
+      cancel() {
+        finish();
+        xhr.abort();
+      }
+    };
+    const resolveHeaders = () => {
+      if (headersResolved) return;
+      headersResolved = true;
+      const ok = xhr.status >= 200 && xhr.status < 300;
+      resolveStream({
+        status: xhr.status,
+        ok,
+        getHeader: (name) => xhr.getResponseHeader(name),
+        reader
+      });
+    };
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 2) {
+        resolveHeaders();
+      } else if (xhr.readyState === 3) {
+        resolveHeaders();
+        pump();
+      } else if (xhr.readyState === 4) {
+        resolveHeaders();
+        pump();
+        finish();
+      }
+    };
+    xhr.onerror = () => {
+      const err = new Error("Network request failed");
+      if (!headersResolved) rejectStream(err);
+      finish(err);
+    };
+    xhr.ontimeout = () => {
+      const err = new Error("Network request timed out");
+      if (!headersResolved) rejectStream(err);
+      finish(err);
+    };
+    if (opts.signal) {
+      if (opts.signal.aborted) {
+        xhr.abort();
+        finish();
+      } else {
+        opts.signal.addEventListener("abort", () => {
+          finish();
+          xhr.abort();
+        });
+      }
+    }
+    xhr.send(opts.body);
+  });
+}
+async function openSSEStream(opts) {
+  if (!supportsStreamingFetch()) {
+    return xhrStream(opts);
+  }
+  const controller = new AbortController();
+  if (opts.signal) {
+    if (opts.signal.aborted) controller.abort();
+    else opts.signal.addEventListener("abort", () => controller.abort());
+  }
+  const response = await fetch(opts.url, {
+    method: "POST",
+    headers: opts.headers,
+    body: opts.body,
+    signal: controller.signal
+  });
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => "Stream failed");
+    return {
+      status: response.status,
+      ok: false,
+      errorText,
+      getHeader: (name) => response.headers.get(name),
+      reader: { read: async () => ({ done: true }), cancel: () => controller.abort() }
+    };
+  }
+  if (!response.body) {
+    const text = await response.text();
+    let handed = false;
+    return {
+      status: response.status,
+      ok: true,
+      getHeader: (name) => response.headers.get(name),
+      reader: {
+        read: async () => handed ? { done: true } : (handed = true, { done: false, value: text }),
+        cancel: () => controller.abort()
+      }
+    };
+  }
+  return {
+    status: response.status,
+    ok: true,
+    getHeader: (name) => response.headers.get(name),
+    reader: fetchReader(response, controller)
+  };
+}
+
+// src/hooks/useChat.ts
 function isErrorToolContent(content) {
   if (typeof content !== "string" || !content.trim().startsWith("{")) return false;
   try {
@@ -50,6 +225,20 @@ function isErrorToolContent(content) {
     return false;
   }
 }
+function persistedTraceToActivityEntries(items) {
+  const entries = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      if (item.text) entries.push({ kind: "text", delta: item.text });
+    } else {
+      entries.push({ kind: "tool_start", toolName: item.name, args: item.argsText });
+      if (item.status === "completed") {
+        entries.push({ kind: "tool_result", toolName: item.name, result: item.resultText });
+      }
+    }
+  }
+  return entries;
+}
 function parsePresentedFile(content) {
   try {
     const parsed = JSON.parse(content);
@@ -94,7 +283,7 @@ function normalizePendingInterrupt(pending) {
   return null;
 }
 function useChat(options = {}) {
-  const { defaultAgentId, fetchWithAuth } = usePersonaContext();
+  const { defaultAgentId, fetchWithAuth, baseUrl, getAuthToken } = usePersonaContext();
   const agentId = options.agentId || defaultAgentId;
   const threadId = options.threadId;
   const [messages, setMessages] = useState(options.initialMessages || []);
@@ -134,12 +323,16 @@ function useChat(options = {}) {
         const body = await res.json();
         const data = body?.data ?? body;
         const raw = data?.messages ?? [];
+        const subagentTraces = data?.subagentTraces ?? {};
         const loaded = raw.map((m, i) => ({
           id: m.id || `history-${id}-${i}`,
           role: m.role,
           content: m.content,
           createdAt: /* @__PURE__ */ new Date(),
-          toolCalls: m.toolCalls
+          toolCalls: m.toolCalls?.map((tc) => {
+            const trace = subagentTraces[tc.toolCallId];
+            return Array.isArray(trace) && trace.length > 0 ? { ...tc, subagentActivity: persistedTraceToActivityEntries(trace) } : tc;
+          })
         }));
         setMessages(loaded);
         setInterrupt(normalizePendingInterrupt(data?.pendingInterrupt));
@@ -203,10 +396,12 @@ function useChat(options = {}) {
           content: m.content
         }));
         const resolvedThreadId = await (overrideOptions?.threadId ?? options.threadId);
-        const response = await fetchWithAuth("/chat", {
-          method: "POST",
+        const token = getAuthToken ? await getAuthToken() : null;
+        const stream = await openSSEStream({
+          url: `${baseUrl}/chat`,
           headers: {
-            "Content-Type": "application/json"
+            "Content-Type": "application/json",
+            ...token ? { Authorization: `Bearer ${token}` } : {}
           },
           body: JSON.stringify({
             agentId: targetAgentId,
@@ -216,15 +411,10 @@ function useChat(options = {}) {
           }),
           signal: controller.signal
         });
-        if (!response.ok) {
-          const errText = await response.text().catch(() => "Stream failed");
-          throw new Error(`Chat error (${response.status}): ${errText}`);
-        }
-        if (!response.body) {
-          throw new Error("No response body received for streaming.");
+        if (!stream.ok) {
+          throw new Error(`Chat error (${stream.status}): ${stream.errorText ?? "Stream failed"}`);
         }
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder("utf-8");
+        const reader = stream.reader;
         let buffer = "";
         let accumulatedText = "";
         let accumulatedReasoning = "";
@@ -239,7 +429,7 @@ function useChat(options = {}) {
         while (true) {
           const { done, value } = await reader.read();
           if (done) break;
-          buffer += decoder.decode(value, { stream: true });
+          buffer += value ?? "";
           const lines = buffer.split("\n");
           buffer = lines.pop() ?? "";
           for (const line of lines) {
@@ -352,7 +542,7 @@ function useChat(options = {}) {
         abortControllerRef.current = null;
       }
     },
-    [agentId, fetchWithAuth, input, isStreaming, messages, options]
+    [agentId, baseUrl, getAuthToken, input, isStreaming, messages, options]
   );
   const handleInputChange = useCallback((e) => {
     setInput(e.target.value);
@@ -838,10 +1028,12 @@ function useMcpConnections(options = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.3.4";
+var VERSION = "0.4.0";
 export {
   PersonaProvider,
   VERSION,
+  openSSEStream,
+  supportsStreamingFetch,
   useAgents,
   useChat,
   useConnection,