@deuz-sdk/react 1.7.1 → 1.9.0

package/dist/index.cjs

@@ -19,46 +19,166 @@ function foldPart(turn, part) {
   return next;
 }
 var defaultGenerateId = () => typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `deuz-ui-${Math.random().toString(36).slice(2)}`;
+async function partsFromFiles(files) {
+  if (!files) return [];
+  const list = Array.from(
+    files
+  );
+  return list.length === 0 ? [] : chat.filesToImageParts(list);
+}
+function loadCursor(resume) {
+  try {
+    return resume.cursor?.load();
+  } catch {
+    return void 0;
+  }
+}
+function saveCursor(resume, id) {
+  try {
+    resume.cursor?.save(id);
+  } catch {
+  }
+}
 function useChat(options) {
   const genId = options.generateId ?? defaultGenerateId;
-  const [messages, setMessages] = react.useState(
-    () => chat.uiFromMessages(options.initialMessages ?? [], genId)
-  );
+  const [snapshot, setSnapshot] = react.useState(() => ({
+    history: {
+      ui: chat.uiFromMessages(options.initialMessages ?? [], genId),
+      canonical: options.initialMessages ? [...options.initialMessages] : []
+    },
+    dataParts: [],
+    citations: [],
+    activity: []
+  }));
   const [status, setStatus] = react.useState("idle");
   const [error, setError] = react.useState(void 0);
   const [pendingApprovals, setPendingApprovals] = react.useState([]);
-  const [cost, setCost] = react.useState(void 0);
-  const [budgetExceeded, setBudgetExceeded] = react.useState(
-    void 0
-  );
-  const [dataParts, setDataParts] = react.useState([]);
-  const [citations, setCitations] = react.useState([]);
-  const uiRef = react.useRef(messages);
-  const canonicalRef = react.useRef(
-    options.initialMessages ? [...options.initialMessages] : []
-  );
+  const [pendingToolCalls, setPendingToolCalls] = react.useState([]);
+  const snapshotRef = react.useRef(snapshot);
   const turnRef = react.useRef(void 0);
+  const parkedTurnRef = react.useRef(void 0);
+  const clientToolsRef = react.useRef([]);
+  const toolResultsRef = react.useRef(
+    []
+  );
   const approvalsRef = react.useRef([]);
   const verdictsRef = react.useRef([]);
   const abortRef = react.useRef(null);
   const lastEventIdRef = react.useRef(options.resume?.lastEventId);
-  const pushMessage = react.useCallback((message) => {
-    uiRef.current = [...uiRef.current, message];
-    setMessages(uiRef.current);
+  const placedIdRef = react.useRef(void 0);
+  const throttleMs = options.throttleMs ?? 0;
+  const flushTimerRef = react.useRef(void 0);
+  const dirtyRef = react.useRef(false);
+  const publish = react.useCallback(() => {
+    flushTimerRef.current = void 0;
+    dirtyRef.current = false;
+    setSnapshot(snapshotRef.current);
   }, []);
-  const syncTurn = react.useCallback((turn) => {
-    uiRef.current = [...uiRef.current.slice(0, -1), turn.message];
-    setMessages(uiRef.current);
-    if (turn.costUsd !== void 0) {
-      setCost({
-        costUsd: turn.costUsd,
-        ...turn.cacheSavingsUsd !== void 0 ? { cacheSavingsUsd: turn.cacheSavingsUsd } : {}
-      });
+  const commit = react.useCallback(
+    (next) => {
+      snapshotRef.current = next;
+      if (throttleMs <= 0) {
+        publish();
+        return;
+      }
+      dirtyRef.current = true;
+      if (flushTimerRef.current === void 0) {
+        flushTimerRef.current = setTimeout(publish, throttleMs);
+      }
+    },
+    [throttleMs, publish]
+  );
+  const flush = react.useCallback(() => {
+    if (flushTimerRef.current !== void 0) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = void 0;
     }
-    setBudgetExceeded(turn.budgetExceeded);
-    setDataParts(turn.dataParts);
-    setCitations(turn.citations);
+    if (dirtyRef.current) publish();
+  }, [publish]);
+  react.useEffect(
+    () => () => {
+      if (flushTimerRef.current !== void 0) clearTimeout(flushTimerRef.current);
+    },
+    []
+  );
+  const syncTurn = react.useCallback(
+    (turn) => {
+      const previous = snapshotRef.current;
+      const placed = placedIdRef.current;
+      const ui = previous.history.ui;
+      const index = placed === void 0 ? -1 : ui.findIndex((m) => m.id === placed);
+      placedIdRef.current = turn.message.id;
+      commit({
+        ...previous,
+        history: {
+          // NEW array either way — the turn's message is never spliced in place.
+          ui: index === -1 ? [...ui, turn.message] : [...ui.slice(0, index), turn.message, ...ui.slice(index + 1)],
+          canonical: previous.history.canonical
+        },
+        // `cost` is CUMULATIVE for the chat, so an absent reading keeps the
+        // previous one (1.7 behaviour, verbatim); every other readout is
+        // turn-scoped and resets when the turn does.
+        cost: turn.costUsd !== void 0 ? {
+          costUsd: turn.costUsd,
+          ...turn.cacheSavingsUsd !== void 0 ? { cacheSavingsUsd: turn.cacheSavingsUsd } : {}
+        } : previous.cost,
+        budgetExceeded: turn.budgetExceeded,
+        dataParts: turn.dataParts,
+        citations: turn.citations,
+        plan: turn.plan,
+        activity: turn.activity,
+        verifications: turn.verifications,
+        warnings: turn.warnings,
+        falseFinishes: turn.falseFinishes,
+        subAgents: turn.subAgents,
+        steps: turn.steps,
+        usage: turn.usage,
+        finishReason: turn.finishReason
+      });
+    },
+    [commit]
+  );
+  const appendCanonical = react.useCallback(
+    (message) => {
+      const previous = snapshotRef.current;
+      commit({
+        ...previous,
+        history: {
+          ui: previous.history.ui,
+          canonical: [...previous.history.canonical, message]
+        }
+      });
+    },
+    [commit]
+  );
+  const clearGates = react.useCallback(() => {
+    approvalsRef.current = [];
+    verdictsRef.current = [];
+    clientToolsRef.current = [];
+    toolResultsRef.current = [];
+    parkedTurnRef.current = void 0;
+    setPendingApprovals([]);
+    setPendingToolCalls([]);
   }, []);
+  const fold = react.useCallback(
+    (turn, part) => {
+      const next = foldPart(turn, part);
+      const onData = options.onData;
+      if (onData && typeof part.type === "string" && part.type.startsWith("data-")) {
+        const data = part;
+        try {
+          onData({
+            name: data.type.slice("data-".length),
+            ...typeof data.id === "string" ? { id: data.id } : {},
+            payload: data.payload
+          });
+        } catch {
+        }
+      }
+      return next;
+    },
+    [options.onData]
+  );
   const stop = react.useCallback(() => {
     abortRef.current?.abort();
   }, []);
@@ -75,7 +195,7 @@ function useChat(options) {
             method: "POST",
             headers: { "content-type": "application/json", ...options.headers },
             body: JSON.stringify({
-              messages: canonicalRef.current,
+              messages: snapshotRef.current.history.canonical,
               ...options.chatId !== void 0 ? { chatId: options.chatId } : {},
               ...approvalResponses?.length ? { approvalResponses } : {},
               ...options.body
@@ -85,15 +205,25 @@ function useChat(options) {
           approvalResponses = void 0;
           let turn = chat.createAssistantTurn(genId());
           turnRef.current = turn;
-          pushMessage(turn.message);
+          placedIdRef.current = void 0;
           syncTurn(turn);
-          for await (const part of ui.readDeuzStream(res)) {
-            turn = foldPart(turn, part);
+          flush();
+          for await (const part of ui.readDeuzStream(res, {
+            ...options.onHttpError ? { onHttpError: options.onHttpError } : {}
+          })) {
+            turn = fold(turn, part);
+            turnRef.current = turn;
+            syncTurn(turn);
+          }
+          const sealed = chat.sealAssistantTurn(turn);
+          if (sealed !== turn) {
+            turn = sealed;
             turnRef.current = turn;
             syncTurn(turn);
           }
+          flush();
           if (turn.error !== void 0) throw new Error(turn.error);
-          canonicalRef.current = [...canonicalRef.current, chat.assistantMessageFromTurn(turn)];
+          appendCanonical(chat.assistantMessageFromTurn(turn));
           turnRef.current = void 0;
           if (turn.approvals.length > 0) {
             approvalsRef.current = turn.approvals;
@@ -104,7 +234,14 @@ function useChat(options) {
           const toolCalls = turn.message.toolCalls ?? [];
           const serverResults = new Set(turn.serverResults);
           const clientPending = toolCalls.filter((t) => !serverResults.has(t.toolCallId));
-          if (clientPending.length === 0 || !options.onToolCall) return;
+          if (clientPending.length === 0) return;
+          if (!options.onToolCall) {
+            parkedTurnRef.current = turn;
+            clientToolsRef.current = clientPending;
+            toolResultsRef.current = [];
+            setPendingToolCalls(clientPending);
+            return;
+          }
           const results = [];
           for (const call of clientPending) {
             try {
@@ -133,10 +270,18 @@ function useChat(options) {
             }
             syncTurn(turn);
           }
-          canonicalRef.current = [...canonicalRef.current, chat.clientToolResultMessage(results)];
+          appendCanonical(chat.clientToolResultMessage(results));
         }
       } catch (err) {
-        if (controller.signal.aborted) return;
+        if (controller.signal.aborted) {
+          const open = turnRef.current;
+          if (open) {
+            const sealed = chat.sealAssistantTurn(open);
+            turnRef.current = sealed;
+            if (sealed !== open) syncTurn(sealed);
+          }
+          return;
+        }
         const e = err instanceof Error ? err : new Error(String(err));
         setError(e);
         setStatus("error");
@@ -144,6 +289,7 @@ function useChat(options) {
         return;
       } finally {
         setStatus((s) => s === "error" ? s : "idle");
+        flush();
       }
     },
     [
@@ -155,47 +301,112 @@ function useChat(options) {
       options.generateId,
       options.onToolCall,
       options.onError,
-      pushMessage,
+      options.onHttpError,
+      appendCanonical,
+      fold,
+      flush,
       syncTurn
     ]
   );
   const sendMessage = react.useCallback(
-    async (text) => {
-      canonicalRef.current = [...canonicalRef.current, { role: "user", content: text }];
-      pushMessage({ id: genId(), role: "user", content: text });
-      approvalsRef.current = [];
-      verdictsRef.current = [];
-      setPendingApprovals([]);
+    async (input) => {
+      const message = chat.userMessageFromInput(input);
+      const bubble = chat.uiFromMessages([message], genId)[0];
+      const previous = snapshotRef.current;
+      commit({
+        ...previous,
+        history: {
+          ui: bubble ? [...previous.history.ui, bubble] : previous.history.ui,
+          canonical: [...previous.history.canonical, message]
+        }
+      });
+      clearGates();
+      flush();
       await run();
     },
-    [run, pushMessage, options.generateId]
+    [run, commit, clearGates, flush, options.generateId]
   );
   const regenerate = react.useCallback(async () => {
-    const cut = chat.dropTrailingAssistant({ ui: uiRef.current, canonical: canonicalRef.current });
-    uiRef.current = cut.ui;
-    canonicalRef.current = cut.canonical;
-    setMessages(cut.ui);
-    approvalsRef.current = [];
-    verdictsRef.current = [];
-    setPendingApprovals([]);
+    const previous = snapshotRef.current;
+    commit({ ...previous, history: chat.dropTrailingAssistant(previous.history) });
+    clearGates();
+    flush();
     await run();
-  }, [run]);
+  }, [run, commit, clearGates, flush]);
   const editAndResend = react.useCallback(
-    async (messageId, text) => {
-      const cut = chat.branchBeforeUserMessage(
-        { ui: uiRef.current, canonical: canonicalRef.current },
-        messageId
-      );
+    async (messageId, input) => {
+      const previous = snapshotRef.current;
+      const cut = chat.branchBeforeUserMessage(previous.history, messageId);
       if (!cut) return;
-      uiRef.current = cut.ui;
-      canonicalRef.current = cut.canonical;
-      setMessages(cut.ui);
-      approvalsRef.current = [];
-      verdictsRef.current = [];
-      setPendingApprovals([]);
-      await sendMessage(text);
+      commit({ ...previous, history: cut });
+      clearGates();
+      flush();
+      await sendMessage(input);
+    },
+    [sendMessage, commit, clearGates, flush]
+  );
+  const setHistory = react.useCallback(
+    (update) => {
+      const previous = snapshotRef.current;
+      const next = typeof update === "function" ? update(previous.history) : update;
+      commit({
+        ...previous,
+        history: { ui: [...next.ui], canonical: [...next.canonical] }
+      });
+      clearGates();
+      flush();
     },
-    [sendMessage]
+    [commit, clearGates, flush]
+  );
+  const setMessages = react.useCallback(
+    (update) => {
+      setHistory((prev) => {
+        const ui = typeof update === "function" ? update(prev.ui) : update;
+        return { ui, canonical: chat.canonicalFromUI(ui) };
+      });
+    },
+    [setHistory]
+  );
+  const clearError = react.useCallback(() => {
+    setError(void 0);
+    setStatus((s) => s === "error" ? "idle" : s);
+  }, []);
+  const addToolResult = react.useCallback(
+    async (result) => {
+      const parked = clientToolsRef.current;
+      const call = parked.find((c) => c.toolCallId === result.toolCallId);
+      if (!call) return;
+      toolResultsRef.current = [
+        ...toolResultsRef.current.filter((r) => r.toolCallId !== result.toolCallId),
+        {
+          toolCallId: result.toolCallId,
+          result: result.output,
+          ...result.isError ? { isError: true } : {}
+        }
+      ];
+      const turn = parkedTurnRef.current;
+      if (turn) {
+        const next = chat.applyUIPart(turn, {
+          type: "tool-result",
+          toolCallId: result.toolCallId,
+          toolName: call.toolName,
+          output: result.output,
+          ...result.isError ? { isError: true } : {}
+        });
+        parkedTurnRef.current = next;
+        syncTurn(next);
+        flush();
+      }
+      const answered = toolResultsRef.current;
+      if (!parked.every((c) => answered.some((r) => r.toolCallId === c.toolCallId))) return;
+      clientToolsRef.current = [];
+      toolResultsRef.current = [];
+      parkedTurnRef.current = void 0;
+      setPendingToolCalls([]);
+      appendCanonical(chat.clientToolResultMessage(answered));
+      await run();
+    },
+    [run, appendCanonical, syncTurn, flush]
   );
   const addToolApprovalResponse = react.useCallback(
     async (response) => {
@@ -217,77 +428,118 @@ function useChat(options) {
     },
     [run]
   );
-  const reconnect = react.useCallback(async () => {
-    const resume = options.resume;
-    if (!resume) return;
-    const controller = new AbortController();
-    abortRef.current = controller;
-    setStatus("streaming");
-    setError(void 0);
-    try {
-      const cursor = lastEventIdRef.current;
-      let turn;
-      if (turnRef.current && cursor !== void 0) {
-        turn = turnRef.current;
-      } else {
-        turn = chat.createAssistantTurn(genId());
-        if (!turnRef.current) pushMessage(turn.message);
-      }
-      turnRef.current = turn;
-      const parts = ui.connectDeuzStream(resume.endpoint, {
-        ...cursor !== void 0 ? { lastEventId: cursor } : {},
-        onCursor: (id) => {
-          lastEventIdRef.current = id;
-        },
-        signal: controller.signal,
-        ...options.fetch ? { fetch: options.fetch } : {},
-        ...options.headers ? { headers: options.headers } : {}
-      });
-      for await (const part of parts) {
-        turn = foldPart(turn, part);
+  const runResume = react.useCallback(
+    async (silent) => {
+      const resume = options.resume;
+      if (!resume) return;
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setStatus("streaming");
+      setError(void 0);
+      let folded = 0;
+      try {
+        const cursor = lastEventIdRef.current ?? loadCursor(resume);
+        const inFlight = turnRef.current;
+        let turn = inFlight;
+        if (turn === void 0 || cursor === void 0) {
+          if (inFlight === void 0) placedIdRef.current = void 0;
+          turn = chat.createAssistantTurn(genId());
+        }
         turnRef.current = turn;
-        syncTurn(turn);
-      }
-      if (turn.error !== void 0) throw new Error(turn.error);
-      canonicalRef.current = [...canonicalRef.current, chat.assistantMessageFromTurn(turn)];
-      turnRef.current = void 0;
-      if (turn.approvals.length > 0) {
-        approvalsRef.current = turn.approvals;
-        verdictsRef.current = [];
-        setPendingApprovals(turn.approvals);
+        const parts = ui.connectDeuzStream(resume.endpoint, {
+          ...cursor !== void 0 ? { lastEventId: cursor } : {},
+          onCursor: (id) => {
+            lastEventIdRef.current = id;
+            saveCursor(resume, id);
+          },
+          signal: controller.signal,
+          ...options.fetch ? { fetch: options.fetch } : {},
+          ...options.headers ? { headers: options.headers } : {}
+        });
+        for await (const part of parts) {
+          folded++;
+          turn = fold(turn, part);
+          turnRef.current = turn;
+          syncTurn(turn);
+        }
+        if (folded === 0) {
+          turnRef.current = inFlight === void 0 ? void 0 : chat.sealAssistantTurn(inFlight);
+          return;
+        }
+        const sealed = chat.sealAssistantTurn(turn);
+        if (sealed !== turn) {
+          turn = sealed;
+          syncTurn(turn);
+        }
+        turnRef.current = turn;
+        if (turn.error !== void 0) throw new Error(turn.error);
+        appendCanonical(chat.assistantMessageFromTurn(turn));
+        turnRef.current = void 0;
+        if (turn.approvals.length > 0) {
+          approvalsRef.current = turn.approvals;
+          verdictsRef.current = [];
+          setPendingApprovals(turn.approvals);
+        }
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        if (silent) return;
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        setStatus("error");
+        options.onError?.(e);
+        return;
+      } finally {
+        setStatus((s) => s === "error" ? s : "idle");
+        flush();
       }
-    } catch (err) {
-      if (controller.signal.aborted) return;
-      const e = err instanceof Error ? err : new Error(String(err));
-      setError(e);
-      setStatus("error");
-      options.onError?.(e);
-      return;
-    } finally {
-      setStatus((s) => s === "error" ? s : "idle");
-    }
-  }, [
-    options.resume,
-    options.fetch,
-    options.headers,
-    options.generateId,
-    options.onError,
-    pushMessage,
-    syncTurn
-  ]);
+    },
+    [
+      options.resume,
+      options.fetch,
+      options.headers,
+      options.generateId,
+      options.onError,
+      appendCanonical,
+      fold,
+      flush,
+      syncTurn
+    ]
+  );
+  const reconnect = react.useCallback(() => runResume(false), [runResume]);
+  const autoResumedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (options.resume?.auto !== true || autoResumedRef.current) return;
+    autoResumedRef.current = true;
+    void runResume(true);
+  }, [options.resume?.auto, runResume]);
   return {
-    messages,
+    messages: snapshot.history.ui,
+    history: snapshot.history,
     status,
     error,
     pendingApprovals,
-    ...cost !== void 0 ? { cost } : {},
-    ...budgetExceeded !== void 0 ? { budgetExceeded } : {},
-    dataParts,
-    citations,
+    pendingToolCalls,
+    ...snapshot.cost !== void 0 ? { cost: snapshot.cost } : {},
+    ...snapshot.budgetExceeded !== void 0 ? { budgetExceeded: snapshot.budgetExceeded } : {},
+    dataParts: snapshot.dataParts,
+    citations: snapshot.citations,
+    ...snapshot.plan !== void 0 ? { plan: snapshot.plan } : {},
+    activity: snapshot.activity,
+    ...snapshot.verifications !== void 0 ? { verifications: snapshot.verifications } : {},
+    ...snapshot.warnings !== void 0 ? { warnings: snapshot.warnings } : {},
+    ...snapshot.falseFinishes !== void 0 ? { falseFinishes: snapshot.falseFinishes } : {},
+    ...snapshot.subAgents !== void 0 ? { subAgents: snapshot.subAgents } : {},
+    ...snapshot.steps !== void 0 ? { steps: snapshot.steps } : {},
+    ...snapshot.usage !== void 0 ? { usage: snapshot.usage } : {},
+    ...snapshot.finishReason !== void 0 ? { finishReason: snapshot.finishReason } : {},
     sendMessage,
     stop,
     regenerate,
     editAndResend,
+    setHistory,
+    setMessages,
+    addToolResult,
+    clearError,
     addToolApprovalResponse,
     reconnect
   };
@@ -297,6 +549,40 @@ function useObject(options) {
   const [isLoading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(void 0);
   const abortRef = react.useRef(null);
+  const throttleMs = options.throttleMs ?? 0;
+  const latestRef = react.useRef(void 0);
+  const timerRef = react.useRef(void 0);
+  const dirtyRef = react.useRef(false);
+  const publish = react.useCallback(() => {
+    timerRef.current = void 0;
+    dirtyRef.current = false;
+    setObject(latestRef.current);
+  }, []);
+  const commit = react.useCallback(
+    (next) => {
+      latestRef.current = next;
+      if (throttleMs <= 0) {
+        publish();
+        return;
+      }
+      dirtyRef.current = true;
+      if (timerRef.current === void 0) timerRef.current = setTimeout(publish, throttleMs);
+    },
+    [throttleMs, publish]
+  );
+  const flush = react.useCallback(() => {
+    if (timerRef.current !== void 0) {
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+    }
+    if (dirtyRef.current) publish();
+  }, [publish]);
+  react.useEffect(
+    () => () => {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    },
+    []
+  );
   const stop = react.useCallback(() => {
     abortRef.current?.abort();
   }, []);
@@ -307,7 +593,8 @@ function useObject(options) {
       abortRef.current = controller;
       setLoading(true);
       setError(void 0);
-      setObject(void 0);
+      commit(void 0);
+      flush();
       try {
         const doFetch = options.fetch ?? fetch;
         const res = await doFetch(options.api, {
@@ -316,9 +603,11 @@ function useObject(options) {
           body: JSON.stringify({ input }),
           signal: controller.signal
         });
-        for await (const part of ui.readDeuzStream(res)) {
+        for await (const part of ui.readDeuzStream(res, {
+          ...options.onHttpError ? { onHttpError: options.onHttpError } : {}
+        })) {
           if (part.type === "object-delta") {
-            setObject(part.object);
+            commit(part.object);
           } else if (part.type === "error") {
             setError(new Error(part.message));
             break;
@@ -330,9 +619,10 @@ function useObject(options) {
         }
       } finally {
         setLoading(false);
+        flush();
       }
     },
-    [options.api, options.fetch, options.headers]
+    [options.api, options.fetch, options.headers, options.onHttpError, commit, flush]
   );
   return { object, isLoading, error, submit, stop };
 }
@@ -362,6 +652,7 @@ function CostBadge({ cost, format }) {
 
 exports.CostBadge = CostBadge;
 exports.ToolApprovalCard = ToolApprovalCard;
+exports.partsFromFiles = partsFromFiles;
 exports.useChat = useChat;
 exports.useObject = useObject;
 //# sourceMappingURL=index.cjs.map