@agents24/chat-react 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,9 +1,144 @@
+import {
+  LatestThreadScroller,
+  LatestThreadScrollerButton,
+  LatestThreadScrollerContent,
+  LatestThreadScrollerItem,
+  LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport
+} from "./chunk-E3TJ3I6G.js";
+import {
+  getActiveStreamingTextPartId,
+  isActiveStreamingTextPart,
+  useStreamingText
+} from "./chunk-EWZO4QJI.js";
+
 // src/controller.ts
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
+// src/context-window.ts
+var SOURCE_PRIORITY = {
+  unknown: 0,
+  heuristic_estimate: 1,
+  tokenizer_estimate: 1,
+  text_estimate: 1,
+  estimated: 1,
+  multimodal_estimate: 2,
+  hf_tokenizer: 3,
+  runtime_tokenizer: 3,
+  provider_count_api: 4,
+  provider_usage: 5,
+  exact: 5
+};
+var STAGE_PRIORITY = {
+  preflight: 0,
+  sent_prompt: 1,
+  final_usage: 2
+};
+function numberOrNull(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function stagePriority(window) {
+  return STAGE_PRIORITY[window?.stage || "sent_prompt"] ?? STAGE_PRIORITY.sent_prompt;
+}
+function hasRenderableContextWindow(window) {
+  const maxTokens = window?.max_tokens;
+  return typeof maxTokens === "number" && Number.isFinite(maxTokens) && maxTokens > 0;
+}
+function windowWeight(window) {
+  if (!window) return [0, 0];
+  return [stagePriority(window), SOURCE_PRIORITY[window.source] || 0];
+}
+function normalizeContextCompression(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value;
+  return {
+    active: Boolean(payload.active),
+    reason: typeof payload.reason === "string" ? payload.reason : null,
+    input_tokens: numberOrNull(payload.input_tokens),
+    max_tokens: numberOrNull(payload.max_tokens),
+    usage_ratio: numberOrNull(payload.usage_ratio),
+    full_frame_count: numberOrNull(payload.full_frame_count),
+    compact_frame_count: numberOrNull(payload.compact_frame_count),
+    dropped_frame_count: numberOrNull(payload.dropped_frame_count),
+    artifact_ref_count: numberOrNull(payload.artifact_ref_count),
+    compression_trigger_budget: numberOrNull(payload.compression_trigger_budget),
+    compression_target_budget: numberOrNull(payload.compression_target_budget),
+    compression_target_ratio: numberOrNull(payload.compression_target_ratio),
+    threshold_used: numberOrNull(payload.threshold_used)
+  };
+}
+function normalizeContextWindow(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value;
+  const rawSource = String(payload.source || "").trim();
+  const source = rawSource === "exact" || rawSource === "estimated" || rawSource === "unknown" || rawSource === "provider_count_api" || rawSource === "provider_usage" || rawSource === "runtime_tokenizer" || rawSource === "hf_tokenizer" || rawSource === "multimodal_estimate" || rawSource === "text_estimate" || rawSource === "tokenizer_estimate" || rawSource === "heuristic_estimate" ? rawSource : rawSource ? "estimated" : "unknown";
+  const rawStage = String(payload.stage || "").trim();
+  const stage = rawStage === "preflight" || rawStage === "sent_prompt" || rawStage === "final_usage" ? rawStage : "sent_prompt";
+  const rawConfidence = String(payload.confidence || "").trim();
+  const confidence = rawConfidence === "exact" || rawConfidence === "high" || rawConfidence === "medium" || rawConfidence === "low" || rawConfidence === "unknown" ? rawConfidence : null;
+  return {
+    source,
+    run_id: typeof payload.run_id === "string" ? payload.run_id : null,
+    stage,
+    confidence,
+    counter: typeof payload.counter === "string" ? payload.counter : null,
+    model_id: typeof payload.model_id === "string" ? payload.model_id : null,
+    max_tokens: numberOrNull(payload.max_tokens),
+    max_tokens_source: typeof payload.max_tokens_source === "string" ? payload.max_tokens_source : null,
+    input_tokens: numberOrNull(payload.input_tokens),
+    remaining_tokens: numberOrNull(payload.remaining_tokens),
+    usage_ratio: numberOrNull(payload.usage_ratio),
+    assembly: payload.assembly && typeof payload.assembly === "object" && !Array.isArray(payload.assembly) ? payload.assembly : null,
+    context_compression: normalizeContextCompression(payload.context_compression)
+  };
+}
+function mergeContextWindow(current, incoming) {
+  if (!incoming) return current ?? null;
+  if (!current) return incoming;
+  if (hasRenderableContextWindow(current) && !hasRenderableContextWindow(incoming)) return current;
+  const currentRunId = current.run_id || null;
+  const incomingRunId = incoming.run_id || null;
+  if (incomingRunId && currentRunId && incomingRunId !== currentRunId) {
+    return stagePriority(incoming) >= STAGE_PRIORITY.sent_prompt ? incoming : current;
+  }
+  const currentWeight = windowWeight(current);
+  const incomingWeight = windowWeight(incoming);
+  return incomingWeight[0] > currentWeight[0] || incomingWeight[0] === currentWeight[0] && incomingWeight[1] >= currentWeight[1] ? incoming : current;
+}
+function mergeContextWindowUpdate(current, incoming) {
+  return mergeContextWindow(current, normalizeContextWindow(incoming));
+}
+function compressionFromContextWindow(contextWindow) {
+  if (!contextWindow) return null;
+  if (contextWindow.context_compression) return contextWindow.context_compression;
+  const assembly = contextWindow.assembly;
+  if (!assembly || typeof assembly !== "object" || Array.isArray(assembly)) return null;
+  const artifactRefs = Array.isArray(assembly.artifact_refs) ? assembly.artifact_refs : [];
+  const compactFrameCount = numberOrNull(assembly.compact_frame_count) ?? 0;
+  const droppedFrameCount = numberOrNull(assembly.dropped_frame_count) ?? 0;
+  const reason = typeof assembly.compaction_reason === "string" ? assembly.compaction_reason : "none";
+  return {
+    active: reason !== "none" || compactFrameCount > 0 || droppedFrameCount > 0,
+    reason,
+    input_tokens: contextWindow.input_tokens ?? null,
+    max_tokens: contextWindow.max_tokens ?? null,
+    usage_ratio: contextWindow.usage_ratio ?? null,
+    full_frame_count: numberOrNull(assembly.full_frame_count),
+    compact_frame_count: compactFrameCount,
+    dropped_frame_count: droppedFrameCount,
+    artifact_ref_count: artifactRefs.length,
+    compression_trigger_budget: numberOrNull(assembly.compression_trigger_budget),
+    compression_target_budget: numberOrNull(assembly.compression_target_budget),
+    compression_target_ratio: numberOrNull(assembly.compression_target_ratio),
+    threshold_used: numberOrNull(assembly.threshold_used)
+  };
+}
+
 // src/model.ts
 var DEFAULT_THREAD_PAGE_SIZE = 5;
-var isRunningThreadStatus = (status) => (/* @__PURE__ */ new Set(["queued", "running"])).has(String(status || "").toLowerCase());
+var isRunningThreadStatus = (status) => (/* @__PURE__ */ new Set(["queued", "running", "cancelling"])).has(String(status || "").toLowerCase());
 var createChatId = () => {
   if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
   return `chat-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
@@ -42,6 +177,16 @@ var attachmentsFromTurn = (turn) => (turn.attachments || []).map((attachment, in
     mediaType: String(record.mime_type || record.mediaType || record.type || "application/octet-stream")
   };
 });
+var tokenUsageFromTurn = (turn) => {
+  const usage = turn.run_usage;
+  if (!usage || typeof usage !== "object") return void 0;
+  return {
+    inputTokens: usage.input_tokens ?? null,
+    outputTokens: usage.output_tokens ?? null,
+    totalTokens: usage.total_tokens ?? null,
+    usageSource: usage.source ?? null
+  };
+};
 var latestEventPayloadValue = (events, key) => {
   for (let index = (events || []).length - 1; index >= 0; index -= 1) {
     const payload = events?.[index]?.payload;
@@ -243,7 +388,8 @@ var turnToMessages = (turn, activeRunId) => {
       createdAt: turn.completed_at ? new Date(turn.completed_at) : createdAt,
       parts,
       reasoningSteps: mergeReasoningSteps(reasoningStepsFromParts(parts), { finalize: !isRunning }),
-      isFinal: !isRunning
+      isFinal: !isRunning,
+      tokenUsage: tokenUsageFromTurn(turn)
     });
   }
   return messages;
@@ -260,10 +406,11 @@ var threadPaging = (thread) => {
   };
 };
 var latestContextWindowFromThread = (thread) => {
-  if (thread.context_window && typeof thread.context_window === "object") return thread.context_window;
+  const threadContextWindow = normalizeContextWindow(thread.context_window);
+  if (threadContextWindow) return threadContextWindow;
   for (let index = (thread.turns || []).length - 1; index >= 0; index -= 1) {
-    const value = thread.turns?.[index]?.context_window;
-    if (value && typeof value === "object") return value;
+    const contextWindow = normalizeContextWindow(thread.turns?.[index]?.context_window);
+    if (contextWindow) return contextWindow;
   }
   return null;
 };
@@ -294,10 +441,6 @@ var activeRunIdFromThreadDetail = (thread) => {
 };
 
 // src/controller.ts
-var mergeContextWindow = (current, incoming) => {
-  if (!incoming || typeof incoming !== "object") return current;
-  return { ...current || {}, ...incoming };
-};
 var threadSummaryToStored = (thread) => ({
   ...thread,
   id: String(thread.id),
@@ -315,7 +458,9 @@ function useAgents24ChatController({
   createId = createChatId,
   onActiveThreadIdChange,
   onSourceClick,
-  onStreamErrorMessage
+  onStreamErrorMessage,
+  onRuntimeEvent,
+  onThreadDetailLoaded
 }) {
   const activeThreadId = controlledActiveThreadId ?? storage.getActiveThreadId?.() ?? null;
   const initialCached = activeThreadId ? storage.getThread(activeThreadId) : void 0;
@@ -332,6 +477,9 @@ function useAgents24ChatController({
   const [disliked, setDisliked] = useState({});
   const [copiedMessageId, setCopiedMessageId] = useState(null);
   const [lastThinkingDurationMs, setLastThinkingDurationMs] = useState(null);
+  const [threads, setThreads] = useState(() => storage.listThreads());
+  const [isRefreshingThreads, setIsRefreshingThreads] = useState(false);
+  const [activeRunId, setActiveRunId] = useState(null);
   const textareaRef = useRef(null);
   const activeThreadIdRef = useRef(activeThreadId);
   const messagesRef = useRef(messages);
@@ -348,6 +496,20 @@ function useAgents24ChatController({
   const streamingMessageIdRef = useRef(null);
   const reasoningRef = useRef([]);
   const liveVoiceIdsRef = useRef({});
+  const setActiveRunIdValue = useCallback((runId) => {
+    activeRunIdRef.current = runId;
+    setActiveRunId(runId);
+  }, []);
+  const syncThreadsFromStorage = useCallback(() => {
+    setThreads(storage.listThreads());
+  }, [storage]);
+  const upsertStoredThread = useCallback(
+    (thread) => {
+      storage.upsertThread(thread);
+      syncThreadsFromStorage();
+    },
+    [storage, syncThreadsFromStorage]
+  );
   useEffect(() => {
     messagesRef.current = messages;
   }, [messages]);
@@ -355,7 +517,7 @@ function useAgents24ChatController({
     (threadId, nextMessages, paging, options) => {
       const existing = storage.getThread(threadId);
       const firstUser = nextMessages.find((message) => message.role === "user");
-      storage.upsertThread({
+      upsertStoredThread({
         ...existing || {},
         id: threadId,
         title: existing?.title || (firstUser ? titleFromMessage(firstUser.content, firstUser.attachments || []) : "New chat"),
@@ -366,13 +528,13 @@ function useAgents24ChatController({
         nextBeforeTurnIndex: paging?.nextBeforeTurnIndex ?? nextBeforeTurnIndexRef.current
       });
     },
-    [storage]
+    [storage, upsertStoredThread]
   );
   const markThreadRunStatus = useCallback(
     (threadId, runId, status, lastEventSeq) => {
       const existing = storage.getThread(threadId);
       if (!existing || !runId) return;
-      storage.upsertThread({
+      upsertStoredThread({
         ...existing,
         last_run_id: runId,
         last_run_status: status,
@@ -389,14 +551,25 @@ function useAgents24ChatController({
           created_at: existing.activeRun?.created_at ?? existing.active_run?.created_at ?? (/* @__PURE__ */ new Date()).toISOString()
         },
         lastEventSeq: typeof lastEventSeq === "number" ? lastEventSeq : existing.lastEventSeq ?? null,
-        isRunning: status === "queued" || status === "running"
+        isRunning: activeRunIdFromThread({
+          lastRunId: runId,
+          lastRunStatus: status,
+          activeRun: { run_id: runId, status }
+        }) !== null
       });
     },
-    [storage]
+    [storage, upsertStoredThread]
   );
   const refresh = useCallback(async () => {
-    const data = await transport.listThreads();
-    storage.setThreads((data.items || []).map((item) => threadSummaryToStored(item)));
+    setIsRefreshingThreads(true);
+    try {
+      const data = await transport.listThreads();
+      const nextThreads = (data.items || []).map((item) => threadSummaryToStored(item));
+      storage.setThreads(nextThreads);
+      setThreads(storage.listThreads());
+    } finally {
+      setIsRefreshingThreads(false);
+    }
   }, [storage, transport]);
   const applyThreadId = useCallback(
     (threadId, baseMessages) => {
@@ -424,7 +597,7 @@ function useAgents24ChatController({
     const controller = abortControllerRef.current;
     abortControllerRef.current = null;
     controller?.abort();
-    activeRunIdRef.current = null;
+    setActiveRunIdValue(null);
     reattachedRunIdRef.current = null;
     streamingMessageIdRef.current = null;
     streamingContentRef.current = "";
@@ -433,7 +606,7 @@ function useAgents24ChatController({
     setIsLoading(false);
     setStreamingContent("");
     setCurrentReasoning([]);
-  }, []);
+  }, [setActiveRunIdValue]);
   const setLiveAssistantMessage = useCallback(
     (input) => {
       setMessages((prev) => {
@@ -503,7 +676,7 @@ function useAgents24ChatController({
         persistThread(input.threadId, completed);
         const existingThread = storage.getThread(input.threadId);
         if (existingThread && input.runId) {
-          storage.upsertThread({
+          upsertStoredThread({
             ...existingThread,
             messages: completed,
             last_run_id: input.runId,
@@ -518,7 +691,7 @@ function useAgents24ChatController({
       }
       return completed;
     },
-    [createId, persistThread, storage]
+    [createId, persistThread, storage, upsertStoredThread]
   );
   const loadThread = useCallback(
     async (threadId) => {
@@ -533,6 +706,7 @@ function useAgents24ChatController({
           includeRunEvents: false
         });
         if (activeThreadIdRef.current !== threadId || seq !== requestSeqRef.current) return;
+        void onThreadDetailLoaded?.(detail);
         const nextMessages = threadDetailToMessages(detail);
         const paging = threadPaging(detail);
         setContextStatus(latestContextWindowFromThread(detail));
@@ -542,7 +716,7 @@ function useAgents24ChatController({
         hasOlderTurnsRef.current = paging.hasOlderTurns;
         nextBeforeTurnIndexRef.current = paging.nextBeforeTurnIndex;
         loadedThreadIdRef.current = threadId;
-        storage.upsertThread({
+        upsertStoredThread({
           ...threadSummaryToStored(detail),
           messages: nextMessages,
           isHydrated: true,
@@ -554,7 +728,7 @@ function useAgents24ChatController({
         if (activeThreadIdRef.current === threadId) setLoadingHistory(false);
       }
     },
-    [pageSize, setLoadingHistory, storage, transport]
+    [onThreadDetailLoaded, pageSize, setLoadingHistory, transport, upsertStoredThread]
   );
   const loadOlderTurns = useCallback(async () => {
     const threadId = activeThreadIdRef.current;
@@ -586,11 +760,18 @@ function useAgents24ChatController({
   }, [pageSize, persistThread, transport]);
   const handleStreamEvent = useCallback(
     (input) => {
-      const { event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages } = input;
+      const { mode, event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages } = input;
       const payload = event.payload || {};
       const responseBlocks = Array.isArray(payload.response_blocks) ? payload.response_blocks : null;
-      if (event.run_id) activeRunIdRef.current = event.run_id;
-      setContextStatus((current) => mergeContextWindow(current, payload.context_window));
+      if (event.run_id) setActiveRunIdValue(event.run_id);
+      void onRuntimeEvent?.(event, {
+        mode,
+        assistantMessageId,
+        threadId: streamThreadIdRef.current,
+        runId: event.run_id || activeRunIdRef.current,
+        startedAt
+      });
+      setContextStatus((current) => mergeContextWindowUpdate(current, payload.context_window));
       if (responseBlocks) {
         const blockText = String(payload.assistant_output_text || "") || assistantTextFromResponseBlocks(responseBlocks) || streamingContentRef.current;
         if (blockText) setStreamingText(blockText);
@@ -636,7 +817,7 @@ function useAgents24ChatController({
         error: isFailed ? String(payload.message || payload.error || event.diagnostics?.[0]?.message || onStreamErrorMessage?.(event) || "The chat run failed.") : void 0
       });
     },
-    [applyThreadId, finalizeAssistantMessage, markThreadRunStatus, onStreamErrorMessage, setLiveAssistantMessage, setReasoningSteps]
+    [applyThreadId, finalizeAssistantMessage, markThreadRunStatus, onRuntimeEvent, onStreamErrorMessage, setActiveRunIdValue, setLiveAssistantMessage, setReasoningSteps]
   );
   const runStream = useCallback(
     async (input) => {
@@ -698,16 +879,16 @@ function useAgents24ChatController({
       }
       try {
         if (input.mode === "attach") {
-          activeRunIdRef.current = input.runId;
+          setActiveRunIdValue(input.runId);
           reattachedRunIdRef.current = input.runId;
           await transport.attachRun(
             { runId: input.runId, signal: controller.signal },
-            (event) => handleStreamEvent({ event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
+            (event) => handleStreamEvent({ mode: "attach", event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
           );
         } else {
           await transport.streamMessage(
-            { text: input.message.text, files: input.message.files || [], threadId: activeThreadIdRef.current, signal: controller.signal },
-            (event) => handleStreamEvent({ event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
+            { ...input.message, files: input.message.files || [], threadId: activeThreadIdRef.current, signal: controller.signal },
+            (event) => handleStreamEvent({ mode: "submit", event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
           );
         }
         if (streamingContentRef.current.trim() && streamingMessageIdRef.current) {
@@ -739,7 +920,7 @@ function useAgents24ChatController({
         const isCurrentStream = abortControllerRef.current === controller || streamingMessageIdRef.current === assistantMessageId;
         if (abortControllerRef.current === controller) abortControllerRef.current = null;
         if (isCurrentStream) {
-          activeRunIdRef.current = null;
+          setActiveRunIdValue(null);
           streamingMessageIdRef.current = null;
           reattachedRunIdRef.current = null;
           setStreamingMessageId(null);
@@ -750,7 +931,7 @@ function useAgents24ChatController({
         }
       }
     },
-    [createId, finalizeAssistantMessage, handleStreamEvent, onStreamErrorMessage, persistThread, refresh, setReasoningSteps, transport]
+    [createId, finalizeAssistantMessage, handleStreamEvent, onStreamErrorMessage, persistThread, refresh, setActiveRunIdValue, setReasoningSteps, transport]
   );
   const handleSubmit = useCallback(
     async (message) => {
@@ -765,7 +946,7 @@ function useAgents24ChatController({
     const liveMessageId = streamingMessageIdRef.current;
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
-    activeRunIdRef.current = null;
+    setActiveRunIdValue(null);
     streamingMessageIdRef.current = null;
     setStreamingMessageId(null);
     setIsLoading(false);
@@ -782,10 +963,16 @@ function useAgents24ChatController({
         messageId: liveMessageId
       });
     }
-  }, [finalizeAssistantMessage, lastThinkingDurationMs, setReasoningSteps, transport]);
+  }, [finalizeAssistantMessage, lastThinkingDurationMs, setActiveRunIdValue, setReasoningSteps, transport]);
   useEffect(() => {
-    refresh().catch(() => storage.setThreads([]));
+    refresh().catch(() => {
+      storage.setThreads([]);
+      setThreads([]);
+    });
   }, [refresh, storage]);
+  useEffect(() => {
+    syncThreadsFromStorage();
+  }, [storageKey, syncThreadsFromStorage]);
   useEffect(() => {
     const previous = activeThreadIdRef.current;
     activeThreadIdRef.current = activeThreadId;
@@ -893,7 +1080,40 @@ function useAgents24ChatController({
       return next;
     });
   }, [createId, persistThread]);
+  const startNewThread = useCallback(() => {
+    detachActiveStream();
+    requestSeqRef.current += 1;
+    activeThreadIdRef.current = null;
+    loadedThreadIdRef.current = null;
+    nextBeforeTurnIndexRef.current = null;
+    hasOlderTurnsRef.current = false;
+    storage.setActiveThreadId?.(null);
+    onActiveThreadIdChange?.(null);
+    setMessages([]);
+    messagesRef.current = [];
+    setHasOlderTurns(false);
+    setIsLoadingOlder(false);
+    setContextStatus(null);
+    setLoadingHistory(false);
+  }, [detachActiveStream, onActiveThreadIdChange, setLoadingHistory, storage]);
+  const loadThreadById = useCallback(
+    async (threadId) => {
+      if (!threadId) return;
+      if (activeThreadIdRef.current !== threadId) {
+        if (abortControllerRef.current) detachActiveStream();
+        activeThreadIdRef.current = threadId;
+        storage.setActiveThreadId?.(threadId);
+        onActiveThreadIdChange?.(threadId);
+      }
+      await loadThread(threadId);
+    },
+    [detachActiveStream, loadThread, onActiveThreadIdChange, storage]
+  );
+  const activeThread = activeThreadId ? storage.getThread(activeThreadId) || threads.find((thread) => thread.id === activeThreadId) || null : null;
   return useMemo(() => ({
+    threads,
+    activeThreadId,
+    activeThread,
     messages,
     streamingContent,
     streamingMessageId,
@@ -902,12 +1122,13 @@ function useAgents24ChatController({
     isLoading,
     isLoadingHistory,
     isLoadingOlder,
+    isRefreshingThreads,
     hasOlderTurns,
     liked,
     disliked,
     copiedMessageId,
     lastThinkingDurationMs,
-    activeRunId: activeRunIdRef.current,
+    activeRunId,
     handleSubmit,
     handleStop,
     handleCopy,
@@ -916,11 +1137,16 @@ function useAgents24ChatController({
     handleRetry,
     handleSourceClick: (citations) => onSourceClick?.(citations),
     upsertLiveVoiceMessage,
+    startNewThread,
+    loadThreadById,
     loadOlderTurns,
     refresh,
     textareaRef
   }), [
     copiedMessageId,
+    activeRunId,
+    activeThread,
+    activeThreadId,
     contextStatus,
     currentReasoning,
     disliked,
@@ -934,14 +1160,18 @@ function useAgents24ChatController({
     isLoading,
     isLoadingHistory,
     isLoadingOlder,
+    isRefreshingThreads,
     lastThinkingDurationMs,
     liked,
+    loadThreadById,
     loadOlderTurns,
     messages,
     onSourceClick,
     refresh,
     streamingContent,
     streamingMessageId,
+    startNewThread,
+    threads,
     upsertLiveVoiceMessage
   ]);
 }
@@ -1035,140 +1265,6 @@ 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 || {},
@@ -1249,312 +1345,49 @@ var createFetchChatTransport = ({
   };
 };
 
-// src/viewport.tsx
+// src/viewport.ts
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useLayoutEffect,
-  useMemo as useMemo2,
-  useRef as useRef3,
-  useState as useState3
-} from "react";
-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;
-var isScrollable = (element) => element.scrollHeight - element.clientHeight > LATEST_EDGE_THRESHOLD_PX;
-var isAtTimelineLatestEdge = (element, isTopOrigin) => {
-  if (!isScrollable(element)) return true;
-  return isTopOrigin ? element.scrollHeight - element.clientHeight - element.scrollTop <= LATEST_EDGE_THRESHOLD_PX : Math.abs(element.scrollTop) <= LATEST_EDGE_THRESHOLD_PX;
-};
-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;
-var nextLatestFollowStateOnScroll = ({
-  atLatest,
-  current,
-  isProgrammatic
-}) => {
-  if (isProgrammatic) return current;
-  return atLatest ? "following" : "detached";
-};
-function useLatestThreadViewport({
-  itemCount,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  shouldAutoFollow = true,
-  topOriginMaxItems = 4
-}) {
-  const scrollContainerRef = useRef3(null);
-  const olderPagePreserveRef = useRef3(null);
-  const olderPageRequestInFlightRef = useRef3(false);
-  const intrinsicResizePreserveRef = useRef3(null);
-  const followStateRef = useRef3("following");
-  const programmaticScrollRef = useRef3(false);
-  const programmaticScrollTimeoutRef = useRef3(null);
-  const activeStreamKeyRef = useRef3(null);
-  const observedScrollHeightRef = useRef3(null);
-  const [isAtLatest, setIsAtLatest] = useState3(true);
-  const [followState, setFollowState] = useState3("following");
-  const isTopOrigin = shouldUseTopOriginTimeline({ hasOlder, itemCount, topOriginMaxItems });
-  const setLatestFollowState = useCallback2((next) => {
-    if (followStateRef.current === next) return;
-    followStateRef.current = next;
-    setFollowState(next);
-  }, []);
-  const markProgrammaticScroll = useCallback2(() => {
-    programmaticScrollRef.current = true;
-    if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-    programmaticScrollTimeoutRef.current = setTimeout(() => {
-      programmaticScrollRef.current = false;
-      programmaticScrollTimeoutRef.current = null;
-    }, 80);
-  }, []);
-  const scrollToLatest = useCallback2((options) => {
-    const element = scrollContainerRef.current;
-    if (!element) return;
-    if (options?.reattach !== false) setLatestFollowState("following");
-    markProgrammaticScroll();
-    element.scrollTop = getLatestScrollTop(element, isTopOrigin);
-    setIsAtLatest(true);
-    observedScrollHeightRef.current = element.scrollHeight;
-  }, [isTopOrigin, markProgrammaticScroll, setLatestFollowState]);
-  const detachFromLatest = useCallback2(() => {
-    setLatestFollowState("detached");
-  }, [setLatestFollowState]);
-  const reattachToLatest = useCallback2(() => {
-    scrollToLatest({ reattach: true });
-  }, [scrollToLatest]);
-  const handleUserScrollIntent = useCallback2(() => {
-    const element = scrollContainerRef.current;
-    if (!activeStreamKey || !element) return;
-    if (!isAtTimelineLatestEdge(element, isTopOrigin)) detachFromLatest();
-  }, [activeStreamKey, detachFromLatest, isTopOrigin]);
-  useEffect3(() => {
-    return () => {
-      if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-      const preserve = intrinsicResizePreserveRef.current;
-      if (preserve?.frame !== null && preserve?.frame !== void 0) cancelAnimationFrame(preserve.frame);
-    };
-  }, []);
-  useLayoutEffect(() => {
-    const element = scrollContainerRef.current;
-    const preserve = olderPagePreserveRef.current;
-    if (!element) return;
-    observedScrollHeightRef.current = element.scrollHeight;
-    if (!preserve) {
-      setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-      return;
-    }
-    const addedHeight = element.scrollHeight - preserve.previousHeight;
-    markProgrammaticScroll();
-    element.scrollTop = preserve.previousTop - addedHeight;
-    olderPagePreserveRef.current = null;
-    olderPageRequestInFlightRef.current = false;
-    setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-  }, [isTopOrigin, itemCount, markProgrammaticScroll]);
-  const handleScroll = useCallback2(
-    (event) => {
-      const element = event.currentTarget;
-      const atLatest = isAtTimelineLatestEdge(element, isTopOrigin);
-      setIsAtLatest(atLatest);
-      setLatestFollowState(
-        nextLatestFollowStateOnScroll({
-          atLatest,
-          current: followStateRef.current,
-          isProgrammatic: programmaticScrollRef.current
-        })
-      );
-      if (isTopOrigin || !hasOlder || isLoadingOlder || olderPageRequestInFlightRef.current || !shouldPrefetchOlder(element)) {
-        return;
-      }
-      olderPageRequestInFlightRef.current = true;
-      olderPagePreserveRef.current = {
-        previousHeight: element.scrollHeight,
-        previousTop: element.scrollTop
-      };
-      void Promise.resolve(onLoadOlder()).finally(() => {
-        requestAnimationFrame(() => {
-          if (!olderPagePreserveRef.current) return;
-          olderPagePreserveRef.current = null;
-          olderPageRequestInFlightRef.current = false;
-        });
-      });
-    },
-    [hasOlder, isLoadingOlder, isTopOrigin, onLoadOlder, setLatestFollowState]
-  );
-  const preserveIntrinsicResize = useCallback2(() => {
-    const element = scrollContainerRef.current;
-    if (!element || isTopOrigin) return;
-    const active = intrinsicResizePreserveRef.current;
-    if (active?.frame !== null && active?.frame !== void 0) cancelAnimationFrame(active.frame);
-    intrinsicResizePreserveRef.current = {
-      lastHeight: element.scrollHeight,
-      endAt: Date.now() + 260,
-      frame: null
-    };
-    const preserveFrame = () => {
-      const nextElement = scrollContainerRef.current;
-      const preserve = intrinsicResizePreserveRef.current;
-      if (!nextElement || !preserve) return;
-      const heightDelta = nextElement.scrollHeight - preserve.lastHeight;
-      if (Math.abs(heightDelta) >= 1) {
-        markProgrammaticScroll();
-        nextElement.scrollTop -= heightDelta;
-        preserve.lastHeight = nextElement.scrollHeight;
-        setIsAtLatest(isAtTimelineLatestEdge(nextElement, isTopOrigin));
-      }
-      if (Date.now() < preserve.endAt) {
-        preserve.frame = requestAnimationFrame(preserveFrame);
-      } else {
-        intrinsicResizePreserveRef.current = null;
-      }
-    };
-    intrinsicResizePreserveRef.current.frame = requestAnimationFrame(preserveFrame);
-  }, [isTopOrigin, markProgrammaticScroll]);
-  useLayoutEffect(() => {
-    const key = activeStreamKey || null;
-    const previousKey = activeStreamKeyRef.current;
-    if (!key) {
-      activeStreamKeyRef.current = null;
-      if (previousKey && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        const frame2 = requestAnimationFrame(() => {
-          if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-            scrollToLatest({ reattach: false });
-          }
-        });
-        return () => cancelAnimationFrame(frame2);
-      }
-      return;
-    }
-    if (previousKey === key) {
-      activeStreamKeyRef.current = key;
-      return;
-    }
-    setLatestFollowState("following");
-    const frame = requestAnimationFrame(() => scrollToLatest());
-    activeStreamKeyRef.current = key;
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, setLatestFollowState, shouldAutoFollow]);
-  useLayoutEffect(() => {
-    if (!activeStreamKey || !shouldAutoFollow || followStateRef.current !== "following") return;
-    if (isLoadingOlder || olderPageRequestInFlightRef.current) return;
-    const frame = requestAnimationFrame(() => {
-      if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, itemCount, scrollToLatest, shouldAutoFollow]);
-  useEffect3(() => {
-    if (!activeStreamKey) {
-      observedScrollHeightRef.current = scrollContainerRef.current?.scrollHeight ?? null;
-      return;
-    }
-    let frame = null;
-    const watchStreamResize = () => {
-      const element = scrollContainerRef.current;
-      if (!element) return;
-      const previousHeight = observedScrollHeightRef.current;
-      const nextHeight = element.scrollHeight;
-      observedScrollHeightRef.current = nextHeight;
-      if (previousHeight !== null && Math.abs(nextHeight - previousHeight) >= 1 && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-      frame = requestAnimationFrame(watchStreamResize);
-    };
-    frame = requestAnimationFrame(watchStreamResize);
-    return () => {
-      if (frame !== null) cancelAnimationFrame(frame);
-    };
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, shouldAutoFollow]);
-  return {
-    scrollContainerRef,
-    isAtLatest,
-    isFollowingLatest: followState === "following",
-    isTopOrigin,
-    shouldShowLatestButton: !isAtLatest,
-    handleScroll,
-    handleUserScrollIntent,
-    scrollToLatest,
-    detachFromLatest,
-    reattachToLatest,
-    preserveIntrinsicResize
-  };
-}
-function LatestThreadViewport({
-  items,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  className,
-  latestSpacer,
-  trailingSpacer,
-  renderItem
-}) {
-  const viewport = useLatestThreadViewport({
-    itemCount: items.length,
-    hasOlder,
-    isLoadingOlder,
-    onLoadOlder,
-    activeStreamKey
-  });
-  const timelineItems = useMemo2(() => viewport.isTopOrigin ? items : [...items].reverse(), [items, viewport.isTopOrigin]);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref: viewport.scrollContainerRef,
-      className,
-      onKeyDown: viewport.handleUserScrollIntent,
-      onScroll: viewport.handleScroll,
-      onTouchMove: viewport.handleUserScrollIntent,
-      onWheel: viewport.handleUserScrollIntent,
-      role: "log",
-      style: { overflowAnchor: "none" },
-      children: [
-        !viewport.isTopOrigin && (latestSpacer ?? null),
-        timelineItems.map((item) => renderItem(item, viewport)),
-        viewport.isTopOrigin && (trailingSpacer ?? latestSpacer ?? null)
-      ]
-    }
-  );
-}
+  MessageScroller,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility
+} from "@shadcn/react/message-scroller";
 export {
   DEFAULT_THREAD_PAGE_SIZE,
   DefaultChatPart,
   DefaultToolPart,
-  LatestThreadViewport,
+  LatestThreadScroller,
+  LatestThreadScrollerButton,
+  LatestThreadScrollerContent,
+  LatestThreadScrollerItem,
+  LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport,
+  MessageScroller,
   activeRunIdFromThread,
   activeRunIdFromThreadDetail,
   assistantTextFromParts,
   assistantTextFromResponseBlocks,
+  compressionFromContextWindow,
   consumeSseResponse,
   createChatId,
   createFetchChatTransport,
   getActiveStreamingTextPartId,
-  getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart,
-  isAtTimelineLatestEdge,
   isRunningThreadStatus,
-  isScrollable,
   latestContextWindowFromThread,
+  mergeContextWindow,
+  mergeContextWindowUpdate,
   mergeReasoningSteps,
-  nextLatestFollowStateOnScroll,
+  normalizeContextCompression,
+  normalizeContextWindow,
   parseSseBlock,
   partsFromResponseBlocks,
   reasoningStepsFromParts,
   renderChatPart,
-  shouldPrefetchOlder,
-  shouldUseTopOriginTimeline,
   textFromFinalOutput,
   threadActivityDate,
   threadDetailToMessages,
@@ -1562,7 +1395,9 @@ export {
   titleFromMessage,
   toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
   useStreamingText
 };
 //# sourceMappingURL=index.js.map