@assistant-ui/react 0.3.1 → 0.3.3

package/dist/index.mjs

@@ -668,7 +668,7 @@ var useContentPartDisplay = () => {
       throw new Error(
         "This component can only be used inside ui content parts."
       );
-    return c.part.display;
+    return c;
   });
   return display;
 };
@@ -681,7 +681,7 @@ var useContentPartImage = () => {
       throw new Error(
         "ContentPartImage can only be used inside image content parts."
       );
-    return c.part.image;
+    return c;
   });
   return image;
 };
@@ -1163,13 +1163,92 @@ var ContentPartProvider = ({
 // src/primitives/contentPart/ContentPartText.tsx
 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";
+var TextStreamAnimator = class {
+  constructor(setText) {
+    this.setText = setText;
+  }
+  animationFrameId = null;
+  lastUpdateTime = Date.now();
+  targetText = "";
+  start() {
+    if (this.animationFrameId !== null) return;
+    this.lastUpdateTime = Date.now();
+    this.animate();
+  }
+  stop() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  animate = () => {
+    const currentTime = Date.now();
+    const deltaTime = currentTime - this.lastUpdateTime;
+    let timeToConsume = deltaTime;
+    this.setText((currentText) => {
+      const targetText = this.targetText;
+      if (currentText === targetText) {
+        this.animationFrameId = null;
+        return currentText;
+      }
+      const remainingChars = targetText.length - currentText.length;
+      const baseTimePerChar = Math.min(5, 250 / remainingChars);
+      let charsToAdd = 0;
+      while (timeToConsume >= baseTimePerChar && charsToAdd < remainingChars) {
+        charsToAdd++;
+        timeToConsume -= baseTimePerChar;
+      }
+      this.animationFrameId = requestAnimationFrame(this.animate);
+      if (charsToAdd === 0) {
+        return currentText;
+      }
+      const newText = targetText.slice(0, currentText.length + charsToAdd);
+      this.lastUpdateTime = currentTime - timeToConsume;
+      return newText;
+    });
+  };
+};
+var useSmooth = (text, smooth = false) => {
+  const [displayedText, setDisplayedText] = useState5(text);
+  const [animatorRef] = useState5(
+    new TextStreamAnimator(setDisplayedText)
+  );
+  useEffect8(() => {
+    console.log("smooth", smooth);
+    if (!smooth) {
+      animatorRef.stop();
+      return;
+    }
+    if (!text.startsWith(animatorRef.targetText)) {
+      setDisplayedText(text);
+      animatorRef.targetText = text;
+      animatorRef.stop();
+      return;
+    }
+    animatorRef.targetText = text;
+    animatorRef.start();
+    console.log("animating");
+  }, [animatorRef, smooth, text]);
+  useEffect8(() => {
+    return () => {
+      animatorRef.stop();
+    };
+  }, [animatorRef]);
+  return smooth ? displayedText : text;
+};
+
+// src/primitives/contentPart/ContentPartText.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var ContentPartPrimitiveText = forwardRef7((props, forwardedRef) => {
+var ContentPartPrimitiveText = forwardRef7(({ smooth = true, ...rest }, forwardedRef) => {
   const {
-    part: { text },
-    status
+    status,
+    part: { text }
   } = useContentPartText();
-  return /* @__PURE__ */ jsx14(Primitive4.span, { "data-status": status, ...props, ref: forwardedRef, children: text });
+  const smoothText = useSmooth(text, smooth);
+  return /* @__PURE__ */ jsx14(Primitive4.span, { "data-status": status, ...rest, ref: forwardedRef, children: smoothText });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
@@ -1178,14 +1257,18 @@ import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var ContentPartPrimitiveImage = forwardRef8((props, forwardedRef) => {
-  const image = useContentPartImage();
+  const {
+    part: { image }
+  } = useContentPartImage();
   return /* @__PURE__ */ jsx15(Primitive5.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
 // src/primitives/contentPart/ContentPartDisplay.tsx
 var ContentPartPrimitiveDisplay = () => {
-  const display = useContentPartDisplay();
+  const {
+    part: { display }
+  } = useContentPartDisplay();
   return display ?? null;
 };
 ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
@@ -1331,7 +1414,7 @@ import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef11,
   useCallback as useCallback15,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useRef as useRef4
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
@@ -1375,7 +1458,7 @@ var ComposerPrimitiveInput = forwardRef11(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect8(() => focus(), [focus]);
+    useEffect9(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
@@ -1536,11 +1619,11 @@ var useOnResizeContent = (callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef3(callback);
   const { useViewport } = useThreadContext();
-  useEffect9(() => {
+  useEffect10(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -1615,7 +1698,7 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 import { memo as memo3 } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect10, useState as useState5 } from "react";
+import { useEffect as useEffect11, useState as useState6 } from "react";
 import { create as create12 } from "zustand";
 
 // src/context/stores/EditComposer.ts
@@ -1677,7 +1760,7 @@ var syncMessage = (messages, getBranches, useMessage, messageIndex) => {
 };
 var useMessageContext2 = (messageIndex) => {
   const { useThreadMessages, useThreadActions } = useThreadContext();
-  const [context] = useState5(() => {
+  const [context] = useState6(() => {
     const useMessage = create12(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
@@ -1714,7 +1797,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect10(() => {
+  useEffect11(() => {
     return useThreadMessages.subscribe((thread) => {
       syncMessage(
         thread,
@@ -1797,7 +1880,7 @@ var ThreadPrimitiveSuggestion = createActionButton(
 );
 
 // src/runtime/local/useLocalRuntime.tsx
-import { useInsertionEffect as useInsertionEffect3, useState as useState6 } from "react";
+import { useInsertionEffect as useInsertionEffect3, useState as useState7 } from "react";
 
 // src/runtime/utils/idUtils.tsx
 import { customAlphabet } from "nanoid/non-secure";
@@ -2139,7 +2222,7 @@ var LocalThreadRuntime = class {
 
 // src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = useState6(() => new LocalRuntime(adapter));
+  const [runtime] = useState7(() => new LocalRuntime(adapter));
   useInsertionEffect3(() => {
     runtime.adapter = adapter;
   });
@@ -2151,7 +2234,8 @@ var internal_exports = {};
 __export(internal_exports, {
   BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
-  ProxyConfigProvider: () => ProxyConfigProvider
+  ProxyConfigProvider: () => ProxyConfigProvider,
+  useSmooth: () => useSmooth
 });
 export {
   actionBar_exports as ActionBarPrimitive,