@agents24/chat-react 0.1.3 → 0.1.4

package/dist/index.js

@@ -1035,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 || {},
@@ -1118,11 +1252,11 @@ 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 as jsxs2 } from "react/jsx-runtime";
 var LATEST_EDGE_THRESHOLD_PX = 2;
@@ -1149,15 +1283,15 @@ 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 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;
@@ -1174,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;
@@ -1249,7 +1383,7 @@ function useLatestThreadViewport({
     };
     intrinsicResizePreserveRef.current.frame = requestAnimationFrame(preserveFrame);
   }, [isTopOrigin, markProgrammaticScroll]);
-  useEffect2(() => {
+  useEffect3(() => {
     const key = activeStreamKey || null;
     if (!key || activeStreamKeyRef.current === key) {
       activeStreamKeyRef.current = key;
@@ -1330,9 +1464,11 @@ export {
   consumeSseResponse,
   createChatId,
   createFetchChatTransport,
+  getActiveStreamingTextPartId,
   getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
+  isActiveStreamingTextPart,
   isAtTimelineLatestEdge,
   isRunningThreadStatus,
   isScrollable,
@@ -1351,6 +1487,7 @@ export {
   titleFromMessage,
   toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport
+  useLatestThreadViewport,
+  useStreamingText
 };
 //# sourceMappingURL=index.js.map