feat: default smooth to true (#407)

Yonom · Jul 5, 2024 · b5aa29f · b5aa29f
1 parent 3b129a9
commit b5aa29f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 13 deletions.
diff --git a/.changeset/tasty-goats-wink.md b/.changeset/tasty-goats-wink.md
@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-ui": patch
+"@assistant-ui/react": patch
+---
+
+feat: smooth streaming by default
diff --git a/packages/react-ui/src/components/markdown-text.tsx b/packages/react-ui/src/components/markdown-text.tsx
@@ -7,14 +7,16 @@ type MarkdownTextProps = Partial<MarkdownTextPrimitiveProps>;
 
 export const makeMarkdownText = ({
   className,
+  smooth = true,
   ...rest
 }: MarkdownTextProps = {}) => {
   const MarkdownTextImpl: FC<TextContentPartProps> = ({ status }) => {
     return (
       <MarkdownTextPrimitive
+        smooth={smooth}
         className={
           "aui-md-root" +
-          (status === "in_progress" ? " aui-md aui-md-in-progress" : "") +
+          (status === "in_progress" ? " aui-md-in-progress" : "") +
           (!!className ? " " + className : "")
         }
         {...rest}

diff --git a/packages/react-ui/src/components/text.tsx b/packages/react-ui/src/components/text.tsx
@@ -11,7 +11,7 @@ export const Text: FC<TextContentPartProps> = ({ status }) => {
         "aui-text" + (status === "in_progress" ? " aui-text-in-progress" : "")
       }
     >
-      <ContentPartPrimitive.Text smooth />
+      <ContentPartPrimitive.Text />
     </p>
   );
 };
diff --git a/packages/react/src/primitives/contentPart/ContentPartText.tsx b/packages/react/src/primitives/contentPart/ContentPartText.tsx
@@ -14,7 +14,7 @@ export type ContentPartPrimitiveTextProps = Omit<
 export const ContentPartPrimitiveText = forwardRef<
   ContentPartPrimitiveTextElement,
   ContentPartPrimitiveTextProps
->(({ smooth, ...rest }, forwardedRef) => {
+>(({ smooth = true, ...rest }, forwardedRef) => {
   const {
     status,
     part: { text },

diff --git a/packages/react/src/primitives/message/MessageContent.tsx b/packages/react/src/primitives/message/MessageContent.tsx
@@ -39,7 +39,7 @@ export type MessagePrimitiveContentProps = {
 const defaultComponents = {
   Text: () => (
     <p style={{ whiteSpace: "pre-line" }}>
-      <ContentPartPrimitiveText smooth />
+      <ContentPartPrimitiveText />
       <ContentPartPrimitiveInProgress>
         <span style={{ fontFamily: "revert" }}>{" \u25CF"}</span>
       </ContentPartPrimitiveInProgress>

diff --git a/packages/react/src/utils/hooks/useSmooth.tsx b/packages/react/src/utils/hooks/useSmooth.tsx
@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
 class TextStreamAnimator {
   private animationFrameId: number | null = null;
   private lastUpdateTime: number = Date.now();
-  private decayFactor: number = 0.99;
 
   public targetText: string = "";
 
@@ -13,6 +12,7 @@ class TextStreamAnimator {
 
   start() {
     if (this.animationFrameId !== null) return;
+    this.lastUpdateTime = Date.now();
     this.animate();
   }
 
@@ -26,7 +26,7 @@ class TextStreamAnimator {
   private animate = () => {
     const currentTime = Date.now();
     const deltaTime = currentTime - this.lastUpdateTime;
-    this.lastUpdateTime = currentTime;
+    let timeToConsume = deltaTime;
 
     this.setText((currentText) => {
       const targetText = this.targetText;
@@ -37,14 +37,22 @@ class TextStreamAnimator {
       }
 
       const remainingChars = targetText.length - currentText.length;
-      const charsToAdd = Math.max(
-        1,
-        Math.floor(
-          remainingChars * (1 - Math.pow(this.decayFactor, deltaTime)),
-        ),
-      );
-      const newText = targetText.slice(0, currentText.length + charsToAdd);
+      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;
     });
   };
@@ -57,6 +65,7 @@ export const useSmooth = (text: string, smooth: boolean = false) => {
   );
 
   useEffect(() => {
+    console.log("smooth", smooth);
     if (!smooth) {
       animatorRef.stop();
       return;
@@ -71,6 +80,7 @@ export const useSmooth = (text: string, smooth: boolean = false) => {
 
     animatorRef.targetText = text;
     animatorRef.start();
+    console.log("animating");
   }, [animatorRef, smooth, text]);
 
   useEffect(() => {