@assistant-ui/react 0.4.2 → 0.4.3

package/dist/index.mjs

@@ -1179,7 +1179,7 @@ import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef7 } from "react";
 
 // src/utils/hooks/useSmooth.tsx
-import { useEffect as useEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
 var TextStreamAnimator = class {
   constructor(currentText, setText) {
     this.currentText = currentText;
@@ -1225,6 +1225,9 @@ var TextStreamAnimator = class {
   };
 };
 var useSmooth = (text, smooth = false) => {
+  const { useMessage } = useMessageContext();
+  const id = useMessage((m) => m.message.id);
+  const idRef = useRef4(id);
   const [displayedText, setDisplayedText] = useState5(text);
   const [animatorRef] = useState5(
     new TextStreamAnimator(text, setDisplayedText)
@@ -1234,7 +1237,8 @@ var useSmooth = (text, smooth = false) => {
       animatorRef.stop();
       return;
     }
-    if (!text.startsWith(animatorRef.targetText)) {
+    if (idRef.current !== id || !text.startsWith(animatorRef.targetText)) {
+      idRef.current = id;
       setDisplayedText(text);
       animatorRef.currentText = text;
       animatorRef.targetText = text;
@@ -1243,7 +1247,7 @@ var useSmooth = (text, smooth = false) => {
     }
     animatorRef.targetText = text;
     animatorRef.start();
-  }, [animatorRef, smooth, text]);
+  }, [animatorRef, id, smooth, text]);
   useEffect8(() => {
     return () => {
       animatorRef.stop();
@@ -1431,7 +1435,7 @@ import {
   forwardRef as forwardRef11,
   useCallback as useCallback15,
   useEffect as useEffect9,
-  useRef as useRef4
+  useRef as useRef5
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
@@ -1445,7 +1449,7 @@ var ComposerPrimitiveInput = forwardRef11(
       return c.value;
     });
     const Component = asChild ? Slot : TextareaAutosize;
-    const textareaRef = useRef4(null);
+    const textareaRef = useRef5(null);
     const ref = useComposedRefs2(forwardedRef, textareaRef);
     useEscapeKeydown((e) => {
       const composer = useComposer.getState();
@@ -1591,7 +1595,7 @@ import { forwardRef as forwardRef14 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
@@ -1650,16 +1654,13 @@ var useOnScrollToBottom = (callback) => {
 var useThreadViewportAutoScroll = ({
   autoScroll = true
 }) => {
-  const divRef = useRef5(null);
+  const divRef = useRef6(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = useRef5(true);
-  const lastScrollTop = useRef5(0);
-  const isScrollingToBottomRef = useRef5(false);
-  const scrollToBottom = () => {
+  const lastScrollTop = useRef6(0);
+  const isScrollingToBottomRef = useRef6(false);
+  const scrollToBottom = (behavior) => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
-    const behavior = firstRenderRef.current ? "instant" : "auto";
-    firstRenderRef.current = false;
     isScrollingToBottomRef.current = true;
     div.scrollTo({ top: div.scrollHeight, behavior });
   };
@@ -1670,7 +1671,9 @@ var useThreadViewportAutoScroll = ({
     const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else {
-      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom) {
+        isScrollingToBottomRef.current = false;
+      }
       if (newIsAtBottom !== isAtBottom) {
         useViewport.setState({
           isAtBottom: newIsAtBottom
@@ -1680,11 +1683,10 @@ var useThreadViewportAutoScroll = ({
     lastScrollTop.current = div.scrollTop;
   };
   const resizeRef = useOnResizeContent(() => {
-    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom && !firstRenderRef.current) {
-      handleScroll();
-    } else {
-      scrollToBottom();
+    if (isScrollingToBottomRef.current || useViewport.getState().isAtBottom) {
+      scrollToBottom("instant");
     }
+    handleScroll();
   });
   const scrollRef = useManagedRef((el) => {
     el.addEventListener("scroll", handleScroll);
@@ -1694,7 +1696,7 @@ var useThreadViewportAutoScroll = ({
   });
   const autoScrollRef = useComposedRefs3(resizeRef, scrollRef, divRef);
   useOnScrollToBottom(() => {
-    scrollToBottom();
+    scrollToBottom("auto");
   });
   return autoScrollRef;
 };
@@ -2289,7 +2291,7 @@ function assistantDecoderStream() {
   let currentToolCall;
   return new TransformStream({
     transform(chunk, controller) {
-      const [code, valueJson] = chunk.split(":");
+      const [code, valueJson] = parseStreamPart(chunk);
       const value = JSON.parse(valueJson);
       if (currentToolCall && code !== "2" /* ToolCallArgsTextDelta */ && code !== "E" /* Error */) {
         controller.enqueue({
@@ -2348,6 +2350,14 @@ function assistantDecoderStream() {
     }
   });
 }
+var parseStreamPart = (part) => {
+  const index = part.indexOf(":");
+  if (index === -1) throw new Error("Invalid stream part");
+  return [
+    part.slice(0, index),
+    part.slice(index + 1)
+  ];
+};
 
 // src/runtimes/edge/streams/chunkByLineStream.ts
 function chunkByLineStream() {