@assistant-ui/react 0.5.92 → 0.5.94

package/src/utils/hooks/useManagedRef.ts

@@ -0,0 +1,24 @@
+import { useCallback, useRef } from "react";
+
+export const useManagedRef = <TNode>(
+  callback: (node: TNode) => (() => void) | void,
+) => {
+  const cleanupRef = useRef<(() => void) | void>();
+
+  const ref = useCallback(
+    (el: TNode | null) => {
+      // Call the previous cleanup function
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+
+      // Call the new callback and store its cleanup function
+      if (el) {
+        cleanupRef.current = callback(el);
+      }
+    },
+    [callback],
+  );
+
+  return ref;
+};

package/src/utils/hooks/useOnResizeContent.tsx

@@ -0,0 +1,49 @@
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useCallback } from "react";
+import { useManagedRef } from "./useManagedRef";
+
+export const useOnResizeContent = (callback: () => void) => {
+  const callbackRef = useCallbackRef(callback);
+
+  const refCallback = useCallback(
+    (el: HTMLElement) => {
+      const resizeObserver = new ResizeObserver(() => {
+        callbackRef();
+      });
+
+      const mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.observe(node);
+            }
+          }
+
+          for (const node of mutation.removedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.unobserve(node);
+            }
+          }
+        }
+
+        callbackRef();
+      });
+
+      resizeObserver.observe(el);
+      mutationObserver.observe(el, { childList: true });
+
+      // Observe existing children
+      for (const child of el.children) {
+        resizeObserver.observe(child);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [callbackRef],
+  );
+
+  return useManagedRef(refCallback);
+};

package/src/utils/hooks/useOnScrollToBottom.tsx

@@ -0,0 +1,12 @@
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useEffect } from "react";
+import { useThreadViewport } from "../../context/react/ThreadContext";
+
+export const useOnScrollToBottom = (callback: () => void) => {
+  const callbackRef = useCallbackRef(callback);
+  const onScrollToBottom = useThreadViewport((vp) => vp.onScrollToBottom);
+
+  useEffect(() => {
+    return onScrollToBottom(callbackRef);
+  }, [onScrollToBottom, callbackRef]);
+};

package/src/utils/idUtils.tsx

@@ -0,0 +1,10 @@
+import { customAlphabet } from "nanoid/non-secure";
+
+export const generateId = customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7,
+);
+
+const optimisticPrefix = "__optimistic__";
+export const generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
+export const isOptimisticId = (id: string) => id.startsWith(optimisticPrefix);

package/src/utils/smooth/SmoothContext.tsx

@@ -0,0 +1,82 @@
+import {
+  ComponentType,
+  createContext,
+  FC,
+  forwardRef,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+import { ReadonlyStore } from "../../context/ReadonlyStore";
+import { create, UseBoundStore } from "zustand";
+import {
+  ContentPartStatus,
+  ToolCallContentPartStatus,
+} from "../../types/AssistantTypes";
+import { useContentPartStore } from "../../context/react/ContentPartContext";
+import { createContextStoreHook } from "../../context/react/utils/createContextStoreHook";
+
+type SmoothContextValue = {
+  useSmoothStatus: UseBoundStore<
+    ReadonlyStore<ContentPartStatus | ToolCallContentPartStatus>
+  >;
+};
+
+const SmoothContext = createContext<SmoothContextValue | null>(null);
+
+const makeSmoothContext = (
+  initialState: ContentPartStatus | ToolCallContentPartStatus,
+) => {
+  const useSmoothStatus = create(() => initialState);
+  return { useSmoothStatus };
+};
+
+export const SmoothContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const outer = useSmoothContext({ optional: true });
+  const contentPartStore = useContentPartStore();
+
+  const [context] = useState(() =>
+    makeSmoothContext(contentPartStore.getState().status),
+  );
+
+  // do not wrap if there is an outer SmoothContextProvider
+  if (outer) return children;
+
+  return (
+    <SmoothContext.Provider value={context}>{children}</SmoothContext.Provider>
+  );
+};
+
+export const withSmoothContextProvider = <C extends ComponentType<any>>(
+  Component: C,
+): C => {
+  const Wrapped = forwardRef((props, ref) => {
+    return (
+      <SmoothContextProvider>
+        <Component {...(props as any)} ref={ref} />
+      </SmoothContextProvider>
+    );
+  });
+  Wrapped.displayName = Component.displayName;
+  return Wrapped as any;
+};
+
+function useSmoothContext(options?: {
+  optional?: false | undefined;
+}): SmoothContextValue;
+function useSmoothContext(options?: {
+  optional?: boolean | undefined;
+}): SmoothContextValue | null;
+function useSmoothContext(options?: { optional?: boolean | undefined }) {
+  const context = useContext(SmoothContext);
+  if (!options?.optional && !context)
+    throw new Error(
+      "This component must be used within a SmoothContextProvider.",
+    );
+  return context;
+}
+
+export const { useSmoothStatus, useSmoothStatusStore } = createContextStoreHook(
+  useSmoothContext,
+  "useSmoothStatus",
+);

package/src/utils/smooth/index.ts

@@ -0,0 +1,3 @@
+export { useSmooth } from "./useSmooth";
+export { useSmoothStatus } from "./SmoothContext";
+export { withSmoothContextProvider } from "./SmoothContext";

package/src/utils/smooth/useSmooth.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useMessage } from "../../context";
+import { ContentPartStatus, TextContentPart } from "../../types/AssistantTypes";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useSmoothStatusStore } from "./SmoothContext";
+import { writableStore } from "../../context/ReadonlyStore";
+import { ContentPartState } from "../../api/ContentPartRuntime";
+
+class TextStreamAnimator {
+  private animationFrameId: number | null = null;
+  private lastUpdateTime: number = Date.now();
+
+  public targetText: string = "";
+
+  constructor(
+    public currentText: string,
+    private setText: (newText: string) => void,
+  ) {}
+
+  start() {
+    if (this.animationFrameId !== null) return;
+    this.lastUpdateTime = Date.now();
+    this.animate();
+  }
+
+  stop() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+
+  private animate = () => {
+    const currentTime = Date.now();
+    const deltaTime = currentTime - this.lastUpdateTime;
+    let timeToConsume = deltaTime;
+
+    const remainingChars = this.targetText.length - this.currentText.length;
+    const baseTimePerChar = Math.min(5, 250 / remainingChars);
+
+    let charsToAdd = 0;
+    while (timeToConsume >= baseTimePerChar && charsToAdd < remainingChars) {
+      charsToAdd++;
+      timeToConsume -= baseTimePerChar;
+    }
+
+    if (charsToAdd !== remainingChars) {
+      this.animationFrameId = requestAnimationFrame(this.animate);
+    } else {
+      this.animationFrameId = null;
+    }
+    if (charsToAdd === 0) return;
+
+    this.currentText = this.targetText.slice(
+      0,
+      this.currentText.length + charsToAdd,
+    );
+    this.lastUpdateTime = currentTime - timeToConsume;
+    this.setText(this.currentText);
+  };
+}
+
+const SMOOTH_STATUS: ContentPartStatus = Object.freeze({
+  type: "running",
+});
+
+export const useSmooth = (
+  state: ContentPartState & TextContentPart,
+  smooth: boolean = false,
+): ContentPartState & TextContentPart => {
+  const { text } = state;
+  const id = useMessage({
+    optional: true,
+    selector: (m: { id: string }) => m.id,
+  });
+
+  const idRef = useRef(id);
+  const [displayedText, setDisplayedText] = useState(text);
+
+  const smoothStatusStore = useSmoothStatusStore({ optional: true });
+  const setText = useCallbackRef((text: string) => {
+    setDisplayedText(text);
+    if (smoothStatusStore) {
+      writableStore(smoothStatusStore).setState(
+        text !== state.text ? SMOOTH_STATUS : state.status,
+      );
+    }
+  });
+
+  // TODO this is hacky
+  useEffect(() => {
+    if (smoothStatusStore) {
+      writableStore(smoothStatusStore).setState(
+        text !== state.text ? SMOOTH_STATUS : state.status,
+      );
+    }
+  }, [smoothStatusStore, text, displayedText, state.status, state.text]);
+
+  const [animatorRef] = useState<TextStreamAnimator>(
+    new TextStreamAnimator(text, setText),
+  );
+
+  useEffect(() => {
+    if (!smooth) {
+      animatorRef.stop();
+      return;
+    }
+
+    if (idRef.current !== id || !text.startsWith(animatorRef.targetText)) {
+      idRef.current = id;
+      setText(text);
+
+      animatorRef.currentText = text;
+      animatorRef.targetText = text;
+      animatorRef.stop();
+
+      return;
+    }
+
+    animatorRef.targetText = text;
+    animatorRef.start();
+  }, [setText, animatorRef, id, smooth, text]);
+
+  useEffect(() => {
+    return () => {
+      animatorRef.stop();
+    };
+  }, [animatorRef]);
+
+  return useMemo(
+    () =>
+      smooth
+        ? {
+            type: "text",
+            text: displayedText,
+            part: { type: "text", text: displayedText },
+            status: text === displayedText ? state.status : SMOOTH_STATUS,
+          }
+        : state,
+    [smooth, displayedText, state, text],
+  );
+};

package/dist/chunk-BJPOCE4O.mjs

@@ -1,11 +0,0 @@
-"use client";
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-export {
-  __export
-};
-//# sourceMappingURL=chunk-BJPOCE4O.mjs.map

package/dist/chunk-PZ5AY32C.js

@@ -1,10 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-
-
-exports.__export = __export;
-//# sourceMappingURL=chunk-PZ5AY32C.js.map

package/dist/chunk-PZ5AY32C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/assistant-ui/assistant-ui/packages/react/dist/chunk-PZ5AY32C.js"],"names":[],"mappings":"AAAA,6EAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG;AAChC,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG;AACtB,IAAI,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC;AACD;AACA;AACE;AACF,4BAAC","file":"/home/runner/work/assistant-ui/assistant-ui/packages/react/dist/chunk-PZ5AY32C.js"}