@agents24/chat-react 0.1.7 → 0.1.8

package/dist/index.js

@@ -1,3 +1,19 @@
+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";
 
@@ -23,16 +39,16 @@ var STAGE_PRIORITY = {
 function numberOrNull(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
-function stagePriority(window2) {
-  return STAGE_PRIORITY[window2?.stage || "sent_prompt"] ?? STAGE_PRIORITY.sent_prompt;
+function stagePriority(window) {
+  return STAGE_PRIORITY[window?.stage || "sent_prompt"] ?? STAGE_PRIORITY.sent_prompt;
 }
-function hasRenderableContextWindow(window2) {
-  const maxTokens = window2?.max_tokens;
+function hasRenderableContextWindow(window) {
+  const maxTokens = window?.max_tokens;
   return typeof maxTokens === "number" && Number.isFinite(maxTokens) && maxTokens > 0;
 }
-function windowWeight(window2) {
-  if (!window2) return [0, 0];
-  return [stagePriority(window2), SOURCE_PRIORITY[window2.source] || 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;
@@ -1249,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 || {},
@@ -1463,301 +1345,26 @@ 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";
-};
-var isUserScrollIntentAwayFromLatest = (intent) => {
-  if (!intent) return false;
-  if ("deltaY" in intent && typeof intent.deltaY === "number") {
-    return intent.deltaY < 0;
-  }
-  if ("key" in intent && typeof intent.key === "string") {
-    if (intent.key === "ArrowUp" || intent.key === "PageUp" || intent.key === "Home") return true;
-    if ((intent.key === " " || intent.key === "Spacebar") && intent.shiftKey) return true;
-    return false;
-  }
-  return "touches" in intent;
-};
-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((intent) => {
-    const element = scrollContainerRef.current;
-    if (!activeStreamKey || !element) return;
-    const atLatest = isAtTimelineLatestEdge(element, isTopOrigin);
-    if (!atLatest || isUserScrollIntentAwayFromLatest(intent)) 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,
-      onKeyDownCapture: viewport.handleUserScrollIntent,
-      onScroll: viewport.handleScroll,
-      onTouchMoveCapture: viewport.handleUserScrollIntent,
-      onWheelCapture: 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,
@@ -1767,27 +1374,20 @@ export {
   createChatId,
   createFetchChatTransport,
   getActiveStreamingTextPartId,
-  getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart,
-  isAtTimelineLatestEdge,
   isRunningThreadStatus,
-  isScrollable,
-  isUserScrollIntentAwayFromLatest,
   latestContextWindowFromThread,
   mergeContextWindow,
   mergeContextWindowUpdate,
   mergeReasoningSteps,
-  nextLatestFollowStateOnScroll,
   normalizeContextCompression,
   normalizeContextWindow,
   parseSseBlock,
   partsFromResponseBlocks,
   reasoningStepsFromParts,
   renderChatPart,
-  shouldPrefetchOlder,
-  shouldUseTopOriginTimeline,
   textFromFinalOutput,
   threadActivityDate,
   threadDetailToMessages,
@@ -1795,7 +1395,9 @@ export {
   titleFromMessage,
   toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
   useStreamingText
 };
 //# sourceMappingURL=index.js.map