@alquimia-ai/ui 1.2.3 → 1.2.4

package/dist/index.js

@@ -2827,48 +2827,57 @@ var React32 = __toESM(require("react"));
 // src/components/hooks/use-text-streaming.ts
 var import_react11 = require("react");
 var CHAR_DELAY = 25;
-var PUNCTUATION_DELAY = 200;
-var PUNCTUATION_MARKS = [".", "!", "?", ";", ":"];
+var PUNCTUATION_DELAY = 400;
 function useTextStreaming(content, shouldStream, handleIsTextStreaming) {
-  const [displayedContent, setDisplayedContent] = (0, import_react11.useState)("");
-  const timeoutId = (0, import_react11.useRef)(null);
+  const [displayedText, setDisplayedText] = (0, import_react11.useState)("");
+  const contentRef = (0, import_react11.useRef)(content);
+  const indexRef = (0, import_react11.useRef)(0);
+  const timerRef = (0, import_react11.useRef)(null);
   const hasStartedStreaming = (0, import_react11.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;
-  };
   (0, import_react11.useEffect)(() => {
-    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 = (0, import_react11.useCallback)(() => {
+    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);
     }
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    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