@personaai/react 0.3.5 → 0.5.0

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 {
@@ -108,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 || []);
@@ -215,16 +390,25 @@ function useChat(options = {}) {
       setInterrupt(null);
       const controller = new AbortController();
       abortControllerRef.current = controller;
+      const finalizeReasoning = () => {
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.role === "reasoning" && m.isStreaming ? { ...m, isStreaming: false } : m
+          )
+        );
+      };
       try {
-        const payloadMessages = nextMessages.map((m) => ({
+        const payloadMessages = nextMessages.filter((m) => m.role !== "reasoning").map((m) => ({
           role: m.role === "assistant" ? "assistant" : "user",
           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,
@@ -234,19 +418,15 @@ 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 = "";
         const toolCallsMap = /* @__PURE__ */ new Map();
+        let activeReasoningId = null;
+        const reasoningById = /* @__PURE__ */ new Map();
         const patchAssistant = (patch) => {
           setMessages(
             (prev) => prev.map(
@@ -254,10 +434,26 @@ function useChat(options = {}) {
             )
           );
         };
+        const insertReasoningMessage = (id) => {
+          const msg = {
+            id,
+            role: "reasoning",
+            content: "",
+            createdAt: /* @__PURE__ */ new Date(),
+            isStreaming: true
+          };
+          setMessages((prev) => {
+            const idx = prev.findIndex((m) => m.id === assistantMessageId);
+            if (idx === -1) return [...prev, msg];
+            const next = [...prev];
+            next.splice(idx, 0, msg);
+            return next;
+          });
+        };
         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) {
@@ -297,11 +493,33 @@ function useChat(options = {}) {
               } else if (event.type === "STATE_SNAPSHOT") {
                 setFiles(normalizeWorkspaceFiles(event.snapshot.files));
                 setTodos(event.snapshot.todos);
+              } else if (event.type === "REASONING_MESSAGE_START" && event.messageId) {
+                activeReasoningId = event.messageId;
+                reasoningById.set(event.messageId, { content: "" });
+                insertReasoningMessage(event.messageId);
               } else if (event.type === "REASONING_MESSAGE_CONTENT") {
-                accumulatedReasoning += event.delta;
-                patchAssistant({ reasoning: accumulatedReasoning, isReasoning: true });
+                let rid = event.messageId || activeReasoningId || "";
+                if (!rid || !reasoningById.has(rid)) {
+                  rid = rid || `reasoning-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+                  activeReasoningId = rid;
+                  reasoningById.set(rid, { content: "" });
+                  insertReasoningMessage(rid);
+                }
+                const entry = reasoningById.get(rid);
+                entry.content += event.delta;
+                setMessages(
+                  (prev) => prev.map(
+                    (m) => m.id === rid ? { ...m, content: entry.content, isStreaming: true } : m
+                  )
+                );
               } else if (event.type === "REASONING_END") {
-                patchAssistant({ isReasoning: false });
+                const rid = activeReasoningId;
+                activeReasoningId = null;
+                if (rid) {
+                  setMessages(
+                    (prev) => prev.map((m) => m.id === rid ? { ...m, isStreaming: false } : m)
+                  );
+                }
               } else if (event.type === "CUSTOM") {
                 if (event.name === "hitl_request") {
                   const value2 = event.value;
@@ -337,8 +555,7 @@ function useChat(options = {}) {
           content: accumulatedText,
           createdAt: /* @__PURE__ */ new Date(),
           isStreaming: false,
-          toolCalls: Array.from(toolCallsMap.values()),
-          ...accumulatedReasoning ? { reasoning: accumulatedReasoning, isReasoning: false } : {}
+          toolCalls: Array.from(toolCallsMap.values())
         };
         setMessages(
           (prev) => prev.map((msg) => msg.id === assistantMessageId ? finalMessage : msg)
@@ -368,9 +585,10 @@ function useChat(options = {}) {
       } finally {
         setIsStreaming(false);
         abortControllerRef.current = null;
+        finalizeReasoning();
       }
     },
-    [agentId, fetchWithAuth, input, isStreaming, messages, options]
+    [agentId, baseUrl, getAuthToken, input, isStreaming, messages, options]
   );
   const handleInputChange = useCallback((e) => {
     setInput(e.target.value);
@@ -856,10 +1074,12 @@ function useMcpConnections(options = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.3.5";
+var VERSION = "0.4.0";
 export {
   PersonaProvider,
   VERSION,
+  openSSEStream,
+  supportsStreamingFetch,
   useAgents,
   useChat,
   useConnection,