@alquimia-ai/ui 1.2.3 → 1.2.4

package/dist/index.mjs

@@ -2626,50 +2626,59 @@ RatingComment.displayName = "RatingComment";
 import * as React32 from "react";
 
 // src/components/hooks/use-text-streaming.ts
-import { useEffect as useEffect10, useRef, useState as useState10 } from "react";
+import { useState as useState10, useEffect as useEffect10, useRef, useCallback as useCallback2 } from "react";
 var CHAR_DELAY = 25;
-var PUNCTUATION_DELAY = 200;
-var PUNCTUATION_MARKS = [".", "!", "?", ";", ":"];
+var PUNCTUATION_DELAY = 400;
 function useTextStreaming(content, shouldStream, handleIsTextStreaming) {
-  const [displayedContent, setDisplayedContent] = useState10("");
-  const timeoutId = useRef(null);
+  const [displayedText, setDisplayedText] = useState10("");
+  const contentRef = useRef(content);
+  const indexRef = useRef(0);
+  const timerRef = useRef(null);
   const hasStartedStreaming = useRef(false);
-  const getDelayForChar = (text, position) => {
-    if (position === 0) return CHAR_DELAY;
-    const previousChar = text[position - 1] || "";
-    const isEllipsis = text.slice(position - 1, position + 2) === "...";
-    if (isEllipsis) {
-      return CHAR_DELAY;
-    }
-    return PUNCTUATION_MARKS.includes(previousChar) ? PUNCTUATION_DELAY : CHAR_DELAY;
-  };
   useEffect10(() => {
-    if (!shouldStream && !hasStartedStreaming.current) {
-      setDisplayedContent(content);
-      handleIsTextStreaming?.(false);
-      return;
+    contentRef.current = content;
+    if (hasStartedStreaming.current && !timerRef.current && indexRef.current < contentRef.current.length) {
+      typeNext();
     }
-    handleIsTextStreaming?.(true);
-    hasStartedStreaming.current = true;
-    if (displayedContent.length < content.length) {
-      const delay = getDelayForChar(content, displayedContent.length);
-      timeoutId.current = setTimeout(() => {
-        setDisplayedContent((prev) => prev + content[prev.length]);
+  }, [content]);
+  const typeNext = useCallback2(() => {
+    if (indexRef.current < contentRef.current.length) {
+      const nextChar = contentRef.current.charAt(indexRef.current);
+      setDisplayedText((prev) => prev + nextChar);
+      indexRef.current++;
+      const delay = /[.!?;:]/.test(nextChar) ? PUNCTUATION_DELAY : CHAR_DELAY;
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        typeNext();
       }, delay);
     } else {
       handleIsTextStreaming?.(false);
     }
+  }, []);
+  useEffect10(() => {
+    if (!shouldStream && !hasStartedStreaming.current) {
+      setDisplayedText(contentRef.current);
+      indexRef.current = contentRef.current.length;
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      handleIsTextStreaming?.(false);
+    } else {
+      if (indexRef.current < contentRef.current.length && !timerRef.current) {
+        handleIsTextStreaming?.(true);
+        hasStartedStreaming.current = true;
+        typeNext();
+      }
+    }
     return () => {
-      if (timeoutId.current) clearTimeout(timeoutId.current);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
     };
-  }, [
-    content,
-    displayedContent,
-    shouldStream,
-    getDelayForChar,
-    handleIsTextStreaming
-  ]);
-  return displayedContent;
+  }, [shouldStream, typeNext]);
+  return displayedText;
 }
 
 // src/components/molecules/call-out.tsx