@agents24/chat-react 0.1.2 → 0.1.4

package/dist/index.js

@@ -13,7 +13,8 @@ var titleFromMessage = (text, files = []) => {
   return base.replace(/\s+/g, " ").slice(0, 48);
 };
 var threadActivityDate = (thread) => String(thread.updated_at || thread.last_activity_at || thread.created_at || (/* @__PURE__ */ new Date()).toISOString());
-var assistantTextFromBlocks = (blocks) => (blocks || []).filter((block) => block.kind === "assistant_text" && typeof block.text === "string").map((block) => String(block.text)).join("\n\n").trim();
+var assistantTextFromResponseBlocks = (blocks) => (blocks || []).filter((block) => block.kind === "assistant_text" && typeof block.text === "string").map((block) => String(block.text)).join("\n\n").trim();
+var assistantTextFromParts = (parts) => (parts || []).filter((part) => part.kind === "text").map((part) => part.text).join("\n\n").trim();
 var textFromFinalOutput = (value) => {
   if (typeof value === "string") return value;
   if (!value || typeof value !== "object") return "";
@@ -58,95 +59,126 @@ var assistantTextFromEvents = (events) => {
   if (typeof assistantText === "string" && assistantText.trim()) return assistantText;
   return textFromFinalOutput(latestEventPayloadValue(events, "final_output"));
 };
-var normalizeToolStatus = (status) => {
-  if (status === "running" || status === "active" || status === "pending") return "running";
-  if (status === "failed" || status === "error") return "error";
-  return "done";
+var asRecord = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : null;
+var optionalString = (value) => typeof value === "string" && value.trim() ? value.trim() : void 0;
+var toolStateFromStatus = (status) => {
+  const normalized = String(status || "").trim().toLowerCase();
+  if (["failed", "error"].includes(normalized)) return "output-error";
+  if (["cancelled", "canceled"].includes(normalized)) return "cancelled";
+  if (["complete", "completed", "done", "success"].includes(normalized)) return "output-available";
+  if (["running", "active", "pending", "streaming"].includes(normalized)) return "input-available";
+  return "input-available";
 };
-var toolName = (tool) => String(tool.toolName || tool.tool_name || tool.name || tool.slug || tool.action || tool.title || "").trim().toLowerCase();
-var humanize = (value) => value.replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
-var toolActionKey = (tool) => {
-  const name = toolName(tool);
-  if (name.includes("search")) return "search";
-  if (name.includes("browse") || name.includes("navigate")) return "navigate";
-  if (name.includes("resolve")) return "resolve";
-  if (name.includes("open") || name.includes("read")) return "read";
-  if (name.includes("context")) return "context";
-  if (name.includes("link")) return "links";
-  return "work";
-};
-var actionLabels = {
-  search: "Searching",
-  navigate: "Navigating",
-  resolve: "Resolving",
-  read: "Reading",
-  context: "Checking context",
-  links: "Finding links",
-  work: "Working"
-};
-var toolTitle = (tool) => {
-  const explicit = tool.title || tool.label || tool.summary;
-  if (explicit) return String(explicit);
-  const name = toolName(tool);
-  return name ? humanize(name) : actionLabels[toolActionKey(tool)];
-};
-var toolDetail = (tool) => {
-  const summary = String(tool.summary || "").trim();
-  const detail = String(tool.detail || "").trim();
-  return summary || detail || void 0;
-};
-var summarizeToolGroup = (tools) => {
-  if (tools.length === 1) return tools[0].title;
-  const counts = /* @__PURE__ */ new Map();
-  tools.forEach((tool) => counts.set(tool.actionKey, (counts.get(tool.actionKey) || 0) + 1));
-  return Array.from(counts.entries()).map(([key, count]) => `${actionLabels[key]} ${count}`).join(", ");
-};
-var toolGroupStatus = (tools) => {
-  if (tools.some((tool) => tool.status === "error")) return "error";
-  if (tools.some((tool) => tool.status === "running")) return "running";
-  return "done";
+var toolNameFromRecord = (tool) => String(tool.toolName || tool.tool_name || tool.name || tool.slug || tool.action || "tool").trim() || "tool";
+var toolCallIdFromRecords = (block, tool) => optionalString(tool.toolCallId) || optionalString(tool.tool_call_id) || optionalString(block.toolCallId) || optionalString(block.tool_call_id) || optionalString(block.id) || null;
+var presentationFromTool = (tool) => {
+  const presentation = asRecord(tool.presentation);
+  const outputView = asRecord(tool.outputView) || asRecord(tool.output_view);
+  const next = presentation ? { ...presentation } : {};
+  [
+    "title",
+    "activity",
+    "detail",
+    "category",
+    "groupKey",
+    "groupLabel",
+    "showOutput",
+    "outputView"
+  ].forEach((key) => {
+    if (tool[key] !== void 0) {
+      next[key] = tool[key];
+    }
+  });
+  if (tool.group_key !== void 0) next.group_key = tool.group_key;
+  if (tool.group_label !== void 0) next.group_label = tool.group_label;
+  if (tool.show_output !== void 0) next.show_output = tool.show_output;
+  if (outputView && next.outputView === void 0) next.outputView = outputView;
+  return Object.keys(next).length > 0 ? next : null;
 };
-var createToolBlock = (block, index) => {
-  const tool = block.tool || {};
-  const actionKey = toolActionKey(tool);
+var createToolPart = (block, index) => {
+  const tool = asRecord(block.tool) || {};
+  const toolName = toolNameFromRecord(tool);
+  const errorText = optionalString(tool.errorText) || optionalString(tool.error) || optionalString(block.error) || null;
   return {
     id: String(block.id || `${block.kind || "tool"}-${index}`),
+    type: `tool-${toolName}`,
     kind: "tool",
-    title: toolTitle(tool),
-    actionLabel: actionLabels[actionKey],
-    actionKey,
-    status: normalizeToolStatus(block.status),
-    detail: toolDetail(tool)
+    toolName,
+    toolCallId: toolCallIdFromRecords(block, tool),
+    state: toolStateFromStatus(block.status),
+    input: tool.input ?? block.input,
+    output: tool.output ?? block.output,
+    errorText,
+    presentation: presentationFromTool(tool),
+    raw: block
   };
 };
-var renderBlocksFromResponseBlocks = (blocks, fallbackText) => {
-  const mapped = [];
-  let pendingTools = [];
-  const flushTools = () => {
-    if (pendingTools.length === 0) return;
-    mapped.push({
-      id: `tool-group-${pendingTools[0].id}`,
-      kind: "tool_group",
-      title: summarizeToolGroup(pendingTools),
-      status: toolGroupStatus(pendingTools),
-      tools: pendingTools
-    });
-    pendingTools = [];
-  };
+var createDataPart = (block, index, name = String(block.kind || "data")) => ({
+  id: String(block.id || `${name}-${index}`),
+  type: "data",
+  kind: "data",
+  name,
+  data: block,
+  raw: block
+});
+var partsFromResponseBlocks = (blocks, fallbackText) => {
+  const parts = [];
   (blocks || []).forEach((block, index) => {
     const id = String(block.id || `${block.kind || "block"}-${index}`);
     if (block.kind === "assistant_text" && typeof block.text === "string") {
-      flushTools();
-      mapped.push({ id, kind: "text", content: String(block.text) });
+      parts.push({ id, type: "text", kind: "text", text: String(block.text), raw: block });
+      return;
+    }
+    if (block.kind === "tool_call") {
+      parts.push(createToolPart(block, index));
+      return;
+    }
+    if (block.kind === "ui_blocks") {
+      parts.push({
+        id,
+        type: "ui-blocks",
+        kind: "ui-blocks",
+        state: toolStateFromStatus(block.status),
+        toolCallId: optionalString(block.toolCallId) || optionalString(block.tool_call_id) || null,
+        contractVersion: optionalString(block.contractVersion) || optionalString(block.contract_version) || null,
+        bundle: asRecord(block.bundle),
+        errorText: optionalString(block.error) || null,
+        raw: block
+      });
+      return;
+    }
+    if (block.kind === "reasoning_note") {
+      parts.push({
+        id,
+        type: "reasoning",
+        kind: "reasoning",
+        label: optionalString(block.label) || null,
+        text: optionalString(block.text) || optionalString(block.summary) || null,
+        status: optionalString(block.status) || null,
+        raw: block
+      });
+      return;
+    }
+    if (block.kind === "approval_request") {
+      parts.push({ id, type: "approval", kind: "approval", raw: block });
       return;
     }
-    if (block.kind === "tool_call") pendingTools.push(createToolBlock(block, index));
+    if (block.kind === "error") {
+      parts.push({
+        id,
+        type: "error",
+        kind: "error",
+        errorText: optionalString(block.error) || optionalString(block.message) || "Error",
+        raw: block
+      });
+      return;
+    }
+    parts.push(createDataPart(block, index));
   });
-  flushTools();
-  if (!mapped.some((block) => block.kind === "text") && fallbackText?.trim()) {
-    mapped.push({ id: "assistant-fallback-text", kind: "text", content: fallbackText });
+  if (!parts.some((part) => part.kind === "text") && fallbackText?.trim()) {
+    parts.push({ id: "assistant-fallback-text", type: "text", kind: "text", text: fallbackText });
   }
-  return mapped;
+  return parts;
 };
 var mergeReasoningSteps = (steps, options) => {
   if (!steps?.length) return [];
@@ -164,21 +196,20 @@ var mergeReasoningSteps = (steps, options) => {
   });
   return merged;
 };
-var reasoningStepsFromBlocks = (blocks) => (blocks || []).map((block) => {
-  const kind = String(block.kind || "");
-  if (kind === "tool_call") {
-    const tool = block.tool || {};
+var reasoningStepsFromParts = (parts) => (parts || []).map((block) => {
+  if (block.kind === "tool") {
+    const label = optionalString(block.presentation?.activity) || optionalString(block.presentation?.title) || block.toolName;
     return {
-      label: toolTitle(tool),
-      status: block.status === "running" ? "active" : "complete",
-      description: String(tool.summary || tool.detail || tool.action || "")
+      label,
+      status: block.state === "input-available" || block.state === "input-streaming" ? "active" : "complete",
+      description: optionalString(block.presentation?.detail) || ""
     };
   }
-  if (kind === "reasoning_note") {
+  if (block.kind === "reasoning") {
     return {
-      label: String(block.label || "Reasoning"),
+      label: block.label || "Reasoning",
       status: block.status === "running" ? "active" : "complete",
-      description: String(block.text || block.summary || "")
+      description: block.text || ""
     };
   }
   return null;
@@ -197,19 +228,21 @@ var turnToMessages = (turn, activeRunId) => {
       role: "user",
       content: userContent,
       createdAt,
+      parts: userContent ? [{ id: `${baseId}-user-text`, type: "text", kind: "text", text: userContent }] : [],
       attachments
     });
   }
-  const assistantText = turn.assistant_output_text || assistantTextFromBlocks(responseBlocks) || assistantTextFromEvents(turn.run_events) || textFromFinalOutput(turn.final_output);
+  const assistantText = turn.assistant_output_text || assistantTextFromResponseBlocks(responseBlocks) || assistantTextFromEvents(turn.run_events) || textFromFinalOutput(turn.final_output);
   if (assistantText || responseBlocks.length > 0 || isRunning) {
+    const parts = partsFromResponseBlocks(responseBlocks, assistantText);
     messages.push({
       id: `${baseId}-assistant`,
       role: "assistant",
       runId: turn.run_id || null,
-      content: assistantText,
+      content: assistantText || assistantTextFromParts(parts),
       createdAt: turn.completed_at ? new Date(turn.completed_at) : createdAt,
-      blocks: renderBlocksFromResponseBlocks(responseBlocks, assistantText),
-      reasoningSteps: mergeReasoningSteps(reasoningStepsFromBlocks(responseBlocks), { finalize: !isRunning }),
+      parts,
+      reasoningSteps: mergeReasoningSteps(reasoningStepsFromParts(parts), { finalize: !isRunning }),
       isFinal: !isRunning
     });
   }
@@ -423,7 +456,7 @@ function useAgents24ChatController({
             createdAt: /* @__PURE__ */ new Date(),
             reasoningSteps: input.reasoning,
             isFinal: false,
-            blocks: input.blocks
+            parts: input.parts || []
           });
           messagesRef.current = next2;
           return next2;
@@ -435,7 +468,7 @@ function useAgents24ChatController({
           content: input.content,
           reasoningSteps: input.reasoning,
           isFinal: false,
-          blocks: input.blocks ?? next[index].blocks
+          parts: input.parts ?? next[index].parts
         };
         messagesRef.current = next;
         return next;
@@ -451,7 +484,7 @@ function useAgents24ChatController({
         (message) => input.messageId && message.id === input.messageId || input.runId && message.role === "assistant" && message.runId === input.runId
       );
       const existing = existingIndex >= 0 ? input.baseMessages[existingIndex] : void 0;
-      const blocks = input.blocks || existing?.blocks || renderBlocksFromResponseBlocks(void 0, content);
+      const parts = input.parts || existing?.parts || partsFromResponseBlocks(void 0, content);
       const assistant = {
         id: existing?.id || input.messageId || createId(),
         role: "assistant",
@@ -459,13 +492,7 @@ function useAgents24ChatController({
         content,
         createdAt: /* @__PURE__ */ new Date(),
         isFinal: true,
-        blocks: blocks.map((block) => {
-          if (block.kind === "tool") return { ...block, status: input.error ? "error" : "done" };
-          if (block.kind === "tool_group") {
-            return { ...block, status: input.error ? "error" : "done", tools: block.tools.map((tool) => ({ ...tool, status: input.error ? "error" : "done" })) };
-          }
-          return block;
-        }),
+        parts,
         reasoningSteps: mergeReasoningSteps(input.reasoning, { finalize: true }),
         thinkingDurationMs: input.thinkingDurationMs
       };
@@ -500,7 +527,11 @@ function useAgents24ChatController({
       setIsLoadingOlder(false);
       isLoadingOlderRef.current = false;
       try {
-        const detail = await transport.getThread({ threadId, limit: pageSize });
+        const detail = await transport.getThread({
+          threadId,
+          limit: pageSize,
+          includeRunEvents: false
+        });
         if (activeThreadIdRef.current !== threadId || seq !== requestSeqRef.current) return;
         const nextMessages = threadDetailToMessages(detail);
         const paging = threadPaging(detail);
@@ -532,7 +563,12 @@ function useAgents24ChatController({
     isLoadingOlderRef.current = true;
     setIsLoadingOlder(true);
     try {
-      const detail = await transport.getThread({ threadId, limit: pageSize, beforeTurnIndex });
+      const detail = await transport.getThread({
+        threadId,
+        limit: pageSize,
+        beforeTurnIndex,
+        includeRunEvents: false
+      });
       if (activeThreadIdRef.current !== threadId) return;
       const older = threadDetailToMessages(detail);
       const paging = threadPaging(detail);
@@ -556,16 +592,17 @@ function useAgents24ChatController({
       if (event.run_id) activeRunIdRef.current = event.run_id;
       setContextStatus((current) => mergeContextWindow(current, payload.context_window));
       if (responseBlocks) {
-        const blockText = String(payload.assistant_output_text || "") || assistantTextFromBlocks(responseBlocks) || streamingContentRef.current;
+        const blockText = String(payload.assistant_output_text || "") || assistantTextFromResponseBlocks(responseBlocks) || streamingContentRef.current;
         if (blockText) setStreamingText(blockText);
-        const reasoning = mergeReasoningSteps([...reasoningRef.current, ...reasoningStepsFromBlocks(responseBlocks)]);
+        const parts = partsFromResponseBlocks(responseBlocks, blockText);
+        const reasoning = mergeReasoningSteps([...reasoningRef.current, ...reasoningStepsFromParts(parts)]);
         setReasoningSteps(reasoning);
         setLiveAssistantMessage({
           messageId: assistantMessageId,
           runId: event.run_id || activeRunIdRef.current,
           content: blockText,
           reasoning,
-          blocks: renderBlocksFromResponseBlocks(responseBlocks, blockText),
+          parts,
           baseMessages
         });
       }
@@ -595,7 +632,7 @@ function useAgents24ChatController({
         thinkingDurationMs: Date.now() - startedAt,
         messageId: assistantMessageId,
         runId: event.run_id || activeRunIdRef.current,
-        blocks: responseBlocks ? renderBlocksFromResponseBlocks(responseBlocks, finalText) : void 0,
+        parts: responseBlocks ? partsFromResponseBlocks(responseBlocks, finalText) : void 0,
         error: isFailed ? String(payload.message || payload.error || event.diagnostics?.[0]?.message || onStreamErrorMessage?.(event) || "The chat run failed.") : void 0
       });
     },
@@ -622,6 +659,7 @@ function useAgents24ChatController({
           role: "user",
           content: input.message.text,
           createdAt: /* @__PURE__ */ new Date(),
+          parts: input.message.text ? [{ id: createId(), type: "text", kind: "text", text: input.message.text }] : [],
           attachments: input.message.files
         };
         baseMessages = [...messagesRef.current, userMessage];
@@ -633,6 +671,7 @@ function useAgents24ChatController({
           content: "",
           createdAt: /* @__PURE__ */ new Date(),
           isFinal: false,
+          parts: [],
           reasoningSteps: []
         };
         const liveMessages = [...baseMessages, assistantMessage];
@@ -843,6 +882,7 @@ function useAgents24ChatController({
         createdAt: /* @__PURE__ */ new Date(),
         isFinal: Boolean(input.isFinal),
         isVoice: input.role === "user",
+        parts: content ? [{ id: createId(), type: "text", kind: "text", text: content }] : [],
         citations: input.citations,
         reasoningSteps: input.reasoningSteps
       };
@@ -906,6 +946,53 @@ function useAgents24ChatController({
   ]);
 }
 
+// src/renderers.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultToolPart = ({ part }) => {
+  const label = typeof part.presentation?.activity === "string" ? part.presentation.activity : typeof part.presentation?.title === "string" ? part.presentation.title : part.toolName;
+  const detail = typeof part.presentation?.detail === "string" ? part.presentation.detail : part.errorText || part.state;
+  return /* @__PURE__ */ jsxs("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: [
+    /* @__PURE__ */ jsx("div", { children: label }),
+    detail ? /* @__PURE__ */ jsx("div", { children: detail }) : null
+  ] });
+};
+var DefaultChatPart = ({
+  part,
+  message,
+  renderOptions
+}) => {
+  if (renderOptions?.renderPart) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderOptions.renderPart(part, message) });
+  }
+  if (part.kind === "text") return /* @__PURE__ */ jsx(Fragment, { children: part.text });
+  if (part.kind === "tool") {
+    const ToolRenderer = renderOptions?.toolRenderers?.[part.type] || renderOptions?.fallbackToolRenderer || DefaultToolPart;
+    return /* @__PURE__ */ jsx(Fragment, { children: ToolRenderer({ part, message }) });
+  }
+  if (part.kind === "reasoning") {
+    return /* @__PURE__ */ jsx("div", { "data-agents24-reasoning-part": true, children: part.text || part.label });
+  }
+  if (part.kind === "ui-blocks") {
+    return /* @__PURE__ */ jsx("div", { "data-agents24-ui-blocks-part": true, "data-state": part.state });
+  }
+  if (part.kind === "approval") {
+    return /* @__PURE__ */ jsx("div", { "data-agents24-approval-part": true });
+  }
+  if (part.kind === "error") {
+    return /* @__PURE__ */ jsx("div", { "data-agents24-error-part": true, children: part.errorText });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-agents24-data-part": part.name });
+};
+var renderChatPart = (part, message, renderOptions) => /* @__PURE__ */ jsx(
+  DefaultChatPart,
+  {
+    part,
+    message,
+    renderOptions
+  },
+  part.id
+);
+
 // src/sse.ts
 var parseSseBlock = (block) => {
   const data = block.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.replace(/^data:\s?/, "")).join("\n").trim();
@@ -948,6 +1035,140 @@ var consumeSseResponse = async (response, onEvent) => {
   return { threadId, runId };
 };
 
+// src/streaming-text.ts
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
+var defaultCompletedTextCache = /* @__PURE__ */ new Map();
+var defaultStreamingTextCache = {
+  get: (id) => defaultCompletedTextCache.get(id),
+  set: (id, text) => {
+    defaultCompletedTextCache.set(id, text);
+    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {
+      const firstKey = defaultCompletedTextCache.keys().next().value;
+      if (firstKey) defaultCompletedTextCache.delete(firstKey);
+    }
+  }
+};
+var getActiveStreamingTextPartId = (message, streamingMessageId) => {
+  if (message.role !== "assistant" || streamingMessageId !== message.id) return null;
+  return message.parts.slice().reverse().find((part) => part.kind === "text")?.id || null;
+};
+var isActiveStreamingTextPart = (message, part, streamingMessageId) => part.kind === "text" && part.id === getActiveStreamingTextPartId(message, streamingMessageId);
+function useStreamingText({
+  id,
+  isStreaming,
+  text,
+  cache = defaultStreamingTextCache,
+  charsPerSecond = 72,
+  catchupThreshold = 40,
+  maxCatchupChars = 20
+}) {
+  const cacheAdapter = cache === false ? null : cache;
+  const [displayedText, setDisplayedText] = useState2(() => {
+    const cachedText = cacheAdapter?.get(id);
+    return isStreaming && cachedText !== text ? "" : text;
+  });
+  const targetRef = useRef2(text);
+  const displayedRef = useRef2(displayedText);
+  const rafRef = useRef2(null);
+  const lastFrameAtRef = useRef2(null);
+  const idRef = useRef2(id);
+  const shouldAnimateRef = useRef2(isStreaming);
+  useEffect2(() => {
+    if (isStreaming || !text) return;
+    cacheAdapter?.set(id, text);
+  }, [cacheAdapter, id, isStreaming, text]);
+  useEffect2(() => {
+    targetRef.current = text;
+  }, [text]);
+  useEffect2(() => {
+    if (idRef.current === id) return;
+    idRef.current = id;
+    const cachedText = cacheAdapter?.get(id);
+    const initial = isStreaming && cachedText !== text ? "" : text;
+    shouldAnimateRef.current = isStreaming && initial !== text;
+    displayedRef.current = initial;
+    setDisplayedText(initial);
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameAtRef.current = null;
+  }, [cacheAdapter, id, isStreaming, text]);
+  useEffect2(() => {
+    if (typeof window === "undefined") {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    const cachedText = cacheAdapter?.get(id);
+    if (cachedText === text) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    if (isStreaming) {
+      shouldAnimateRef.current = true;
+    }
+    if (!shouldAnimateRef.current) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    if (!text.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+    }
+    const tick = (timestamp) => {
+      const previousTimestamp = lastFrameAtRef.current ?? timestamp;
+      lastFrameAtRef.current = timestamp;
+      const target = targetRef.current;
+      const current = displayedRef.current;
+      if (current.length >= target.length) {
+        shouldAnimateRef.current = false;
+        rafRef.current = null;
+        return;
+      }
+      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
+      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
+      const gap = target.length - current.length;
+      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
+      const nextLength = Math.min(
+        target.length,
+        current.length + Math.max(charsFromTime, catchupStep)
+      );
+      const next = target.slice(0, nextLength);
+      displayedRef.current = next;
+      setDisplayedText(next);
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+    if (rafRef.current === null && displayedRef.current.length < text.length) {
+      rafRef.current = window.requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      lastFrameAtRef.current = null;
+    };
+  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
+  return {
+    displayedText,
+    isAnimating: isStreaming,
+    mode: isStreaming ? "streaming" : "static",
+    parseIncompleteMarkdown: isStreaming
+  };
+}
+
 // src/transport.ts
 var jsonHeaders = (headers) => ({
   ...headers || {},
@@ -1031,13 +1252,13 @@ var createFetchChatTransport = ({
 // src/viewport.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useLayoutEffect,
   useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState2
+  useRef as useRef3,
+  useState as useState3
 } from "react";
-import { jsxs } from "react/jsx-runtime";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
 var LATEST_EDGE_THRESHOLD_PX = 2;
 var MIN_OLDER_PREFETCH_PX = 320;
 var MAX_OLDER_PREFETCH_PX = 900;
@@ -1048,6 +1269,11 @@ var isAtTimelineLatestEdge = (element, isTopOrigin) => {
 };
 var shouldPrefetchOlder = (element) => Math.abs(element.scrollTop) + element.clientHeight >= element.scrollHeight - Math.min(MAX_OLDER_PREFETCH_PX, Math.max(MIN_OLDER_PREFETCH_PX, element.clientHeight * 0.75));
 var getLatestScrollTop = (element, isTopOrigin) => isTopOrigin ? Math.max(0, element.scrollHeight - element.clientHeight) : 0;
+var shouldUseTopOriginTimeline = ({
+  hasOlder,
+  itemCount,
+  topOriginMaxItems = 4
+}) => !hasOlder && itemCount > 0 && itemCount <= topOriginMaxItems;
 function useLatestThreadViewport({
   itemCount,
   hasOlder,
@@ -1057,18 +1283,16 @@ function useLatestThreadViewport({
   shouldAutoFollow = true,
   topOriginMaxItems = 4
 }) {
-  const scrollContainerRef = useRef2(null);
-  const olderPagePreserveRef = useRef2(null);
-  const olderPageRequestInFlightRef = useRef2(false);
-  const intrinsicResizePreserveRef = useRef2(null);
-  const autoFollowLatestRef = useRef2(true);
-  const programmaticScrollRef = useRef2(false);
-  const programmaticScrollTimeoutRef = useRef2(null);
-  const activeStreamKeyRef = useRef2(null);
-  const [isAtLatest, setIsAtLatest] = useState2(true);
-  const [topOriginCandidateOverflows, setTopOriginCandidateOverflows] = useState2(false);
-  const topOriginCandidate = !hasOlder && itemCount > 0 && itemCount <= topOriginMaxItems;
-  const isTopOrigin = topOriginCandidate && !topOriginCandidateOverflows;
+  const scrollContainerRef = useRef3(null);
+  const olderPagePreserveRef = useRef3(null);
+  const olderPageRequestInFlightRef = useRef3(false);
+  const intrinsicResizePreserveRef = useRef3(null);
+  const autoFollowLatestRef = useRef3(true);
+  const programmaticScrollRef = useRef3(false);
+  const programmaticScrollTimeoutRef = useRef3(null);
+  const activeStreamKeyRef = useRef3(null);
+  const [isAtLatest, setIsAtLatest] = useState3(true);
+  const isTopOrigin = shouldUseTopOriginTimeline({ hasOlder, itemCount, topOriginMaxItems });
   const markProgrammaticScroll = useCallback2(() => {
     programmaticScrollRef.current = true;
     if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
@@ -1084,7 +1308,7 @@ function useLatestThreadViewport({
     element.scrollTop = getLatestScrollTop(element, isTopOrigin);
     setIsAtLatest(true);
   }, [isTopOrigin, markProgrammaticScroll]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
       const preserve = intrinsicResizePreserveRef.current;
@@ -1095,11 +1319,6 @@ function useLatestThreadViewport({
     const element = scrollContainerRef.current;
     const preserve = olderPagePreserveRef.current;
     if (!element) return;
-    if (topOriginCandidate) {
-      setTopOriginCandidateOverflows(isScrollable(element));
-    } else if (topOriginCandidateOverflows) {
-      setTopOriginCandidateOverflows(false);
-    }
     if (!preserve) {
       setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
       return;
@@ -1110,7 +1329,7 @@ function useLatestThreadViewport({
     olderPagePreserveRef.current = null;
     olderPageRequestInFlightRef.current = false;
     setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-  }, [isTopOrigin, itemCount, markProgrammaticScroll, topOriginCandidate, topOriginCandidateOverflows]);
+  }, [isTopOrigin, itemCount, markProgrammaticScroll]);
   const handleScroll = useCallback2(
     (event) => {
       const element = event.currentTarget;
@@ -1164,25 +1383,30 @@ function useLatestThreadViewport({
     };
     intrinsicResizePreserveRef.current.frame = requestAnimationFrame(preserveFrame);
   }, [isTopOrigin, markProgrammaticScroll]);
-  useEffect2(() => {
+  useEffect3(() => {
     const key = activeStreamKey || null;
     if (!key || activeStreamKeyRef.current === key) {
       activeStreamKeyRef.current = key;
       return;
     }
     autoFollowLatestRef.current = true;
+    if (isTopOrigin) {
+      activeStreamKeyRef.current = key;
+      return;
+    }
     const frame = requestAnimationFrame(scrollToLatest);
     activeStreamKeyRef.current = key;
     return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, scrollToLatest]);
+  }, [activeStreamKey, isTopOrigin, scrollToLatest]);
   useLayoutEffect(() => {
+    if (isTopOrigin) return;
     if (!activeStreamKey || !shouldAutoFollow || !autoFollowLatestRef.current) return;
     if (isLoadingOlder || olderPageRequestInFlightRef.current) return;
     const frame = requestAnimationFrame(() => {
       if (autoFollowLatestRef.current && !isLoadingOlder && !olderPageRequestInFlightRef.current) scrollToLatest();
     });
     return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, itemCount, scrollToLatest, shouldAutoFollow]);
+  }, [activeStreamKey, isLoadingOlder, isTopOrigin, itemCount, scrollToLatest, shouldAutoFollow]);
   return {
     scrollContainerRef,
     isAtLatest,
@@ -1212,7 +1436,7 @@ function LatestThreadViewport({
     activeStreamKey
   });
   const timelineItems = useMemo2(() => viewport.isTopOrigin ? items : [...items].reverse(), [items, viewport.isTopOrigin]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: viewport.scrollContainerRef,
@@ -1230,31 +1454,40 @@ function LatestThreadViewport({
 }
 export {
   DEFAULT_THREAD_PAGE_SIZE,
+  DefaultChatPart,
+  DefaultToolPart,
   LatestThreadViewport,
   activeRunIdFromThread,
   activeRunIdFromThreadDetail,
-  assistantTextFromBlocks,
+  assistantTextFromParts,
+  assistantTextFromResponseBlocks,
   consumeSseResponse,
   createChatId,
   createFetchChatTransport,
+  getActiveStreamingTextPartId,
   getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
+  isActiveStreamingTextPart,
   isAtTimelineLatestEdge,
   isRunningThreadStatus,
   isScrollable,
   latestContextWindowFromThread,
   mergeReasoningSteps,
   parseSseBlock,
-  reasoningStepsFromBlocks,
-  renderBlocksFromResponseBlocks,
+  partsFromResponseBlocks,
+  reasoningStepsFromParts,
+  renderChatPart,
   shouldPrefetchOlder,
+  shouldUseTopOriginTimeline,
   textFromFinalOutput,
   threadActivityDate,
   threadDetailToMessages,
   threadPaging,
   titleFromMessage,
+  toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport
+  useLatestThreadViewport,
+  useStreamingText
 };
 //# sourceMappingURL=index.js.map