@assistant-ui/react 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -148,11 +148,14 @@ var makeBaseComposer = (set) => ({
 });
 
 // src/context/stores/Composer.ts
-var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
+var makeComposerStore = (useThreadMessages, useThreadActions) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return create3()((set, get, store) => {
     return {
       ...makeBaseComposer(set, get, store),
+      get canCancel() {
+        return useThreadActions.getState().capabilities.cancel;
+      },
       isEditing: true,
       send: () => {
         const { setValue, value } = get();
@@ -164,10 +167,7 @@ var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
         });
       },
       cancel: () => {
-        const thread = useThread.getState();
-        if (!thread.isRunning) return false;
         useThreadActions.getState().cancelRun();
-        return true;
       },
       focus: () => {
         for (const listener of focusListeners) {
@@ -217,6 +217,9 @@ import { create as create6 } from "zustand";
 var makeThreadActionStore = (runtimeRef) => {
   return create6(
     () => Object.freeze({
+      get capabilities() {
+        return runtimeRef.current.capabilities;
+      },
       getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
       switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
       startRun: (parentId) => runtimeRef.current.startRun(parentId),
@@ -248,11 +251,7 @@ var ThreadProvider = ({
     const useThreadMessages = makeThreadMessagesStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(
-      useThread,
-      useThreadMessages,
-      useThreadActions
-    );
+    const useComposer = makeComposerStore(useThreadMessages, useThreadActions);
     return {
       useThread,
       useThreadMessages,
@@ -625,7 +624,7 @@ var useBranchPickerPrevious = () => {
 import { useCallback as useCallback9 } from "react";
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
-  const disabled = useComposer((c) => !c.isEditing);
+  const disabled = useComposer((c) => !c.canCancel);
   const callback = useCallback9(() => {
     const { cancel } = useComposer.getState();
     cancel();
@@ -669,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;
 };
@@ -682,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;
 };
@@ -757,15 +756,18 @@ var useThreadSuggestion = ({
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
+  const append = useAppendMessage();
   const disabled = useThread((t) => t.isRunning);
   const callback = useCallback12(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
-    composer.setValue(prompt);
     if (autoSend && !thread.isRunning) {
-      composer.send();
+      append(prompt);
+      composer.setValue("");
+    } else {
+      composer.setValue(prompt);
     }
-  }, [useThread, useComposer, prompt, autoSend]);
+  }, [useThread, useComposer, autoSend, append, prompt]);
   if (disabled) return null;
   return callback;
 };
@@ -1161,13 +1163,86 @@ 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();
+  decayFactor = 0.99;
+  targetText = "";
+  start() {
+    if (this.animationFrameId !== null) return;
+    this.animate();
+  }
+  stop() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  animate = () => {
+    const currentTime = Date.now();
+    const deltaTime = currentTime - this.lastUpdateTime;
+    this.lastUpdateTime = currentTime;
+    this.setText((currentText) => {
+      const targetText = this.targetText;
+      if (currentText === targetText) {
+        this.animationFrameId = null;
+        return currentText;
+      }
+      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);
+      this.animationFrameId = requestAnimationFrame(this.animate);
+      return newText;
+    });
+  };
+};
+var useSmooth = (text, smooth = false) => {
+  const [displayedText, setDisplayedText] = useState5(text);
+  const [animatorRef] = useState5(
+    new TextStreamAnimator(setDisplayedText)
+  );
+  useEffect8(() => {
+    if (!smooth) {
+      animatorRef.stop();
+      return;
+    }
+    if (!text.startsWith(animatorRef.targetText)) {
+      setDisplayedText(text);
+      animatorRef.targetText = text;
+      animatorRef.stop();
+      return;
+    }
+    animatorRef.targetText = text;
+    animatorRef.start();
+  }, [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, ...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";
 
@@ -1176,14 +1251,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";
@@ -1203,7 +1282,7 @@ import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
     /* @__PURE__ */ jsx16(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx16(ContentPartPrimitiveInProgress, { children: " \u25CF" })
+    /* @__PURE__ */ jsx16(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx16("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
   Image: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveImage, {}),
   UI: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveDisplay, {}),
@@ -1329,7 +1408,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";
@@ -1348,7 +1427,8 @@ var ComposerPrimitiveInput = forwardRef11(
     const ref = useComposedRefs2(forwardedRef, textareaRef);
     useEscapeKeydown((e) => {
       const composer = useComposer.getState();
-      if (composer.cancel()) {
+      if (composer.canCancel) {
+        composer.cancel();
         e.preventDefault();
       }
     });
@@ -1372,7 +1452,7 @@ var ComposerPrimitiveInput = forwardRef11(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect8(() => focus(), [focus]);
+    useEffect9(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
@@ -1533,11 +1613,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();
     });
@@ -1612,7 +1692,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
@@ -1622,20 +1702,19 @@ var makeEditComposerStore = ({
   onSend
 }) => create10()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
+  canCancel: false,
   isEditing: false,
   edit: () => {
     const value = onEdit();
-    set({ isEditing: true, value });
+    set({ isEditing: true, canCancel: true, value });
   },
   send: () => {
     const value = get().value;
-    set({ isEditing: false });
+    set({ isEditing: false, canCancel: false });
     onSend(value);
   },
   cancel: () => {
-    if (!get().isEditing) return false;
-    set({ isEditing: false });
-    return true;
+    set({ isEditing: false, canCancel: false });
   }
 }));
 
@@ -1675,7 +1754,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({
@@ -1712,7 +1791,7 @@ var useMessageContext2 = (messageIndex) => {
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect10(() => {
+  useEffect11(() => {
     return useThreadMessages.subscribe((thread) => {
       syncMessage(
         thread,
@@ -1756,9 +1835,9 @@ var ThreadMessageImpl = ({
 };
 var ThreadMessage = memo3(
   ThreadMessageImpl,
-  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
+  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.Message === next.components.Message && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
-var ThreadPrimitiveMessages = ({
+var ThreadPrimitiveMessagesImpl = ({
   components
 }) => {
   const { useThreadMessages } = useThreadContext();
@@ -1776,7 +1855,11 @@ var ThreadPrimitiveMessages = ({
     );
   });
 };
-ThreadPrimitiveMessages.displayName = "ThreadPrimitive.Messages";
+ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
+var ThreadPrimitiveMessages = memo3(
+  ThreadPrimitiveMessagesImpl,
+  (prev, next) => prev.components?.Message === next.components?.Message && prev.components?.UserMessage === next.components?.UserMessage && prev.components?.EditComposer === next.components?.EditComposer && prev.components?.AssistantMessage === next.components?.AssistantMessage
+);
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
 var ThreadPrimitiveScrollToBottom = createActionButton(
@@ -1791,7 +1874,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";
@@ -1960,6 +2043,9 @@ var BaseAssistantRuntime = class {
     this._thread = _thread;
     this._unsubscribe = this._thread.subscribe(this.subscriptionHandler);
   }
+  get capabilities() {
+    return this._thread.capabilities;
+  }
   _unsubscribe;
   get thread() {
     return this._thread;
@@ -2032,6 +2118,12 @@ var LocalRuntime = class extends BaseAssistantRuntime {
     );
   }
 };
+var CAPABILITIES = Object.freeze({
+  edit: true,
+  reload: true,
+  cancel: true,
+  copy: true
+});
 var LocalThreadRuntime = class {
   constructor(_configProviders, adapter) {
     this._configProviders = _configProviders;
@@ -2040,6 +2132,7 @@ var LocalThreadRuntime = class {
   _subscriptions = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
+  capabilities = CAPABILITIES;
   get messages() {
     return this.repository.getMessages();
   }
@@ -2123,7 +2216,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;
   });
@@ -2135,7 +2228,8 @@ var internal_exports = {};
 __export(internal_exports, {
   BaseAssistantRuntime: () => BaseAssistantRuntime,
   MessageRepository: () => MessageRepository,
-  ProxyConfigProvider: () => ProxyConfigProvider
+  ProxyConfigProvider: () => ProxyConfigProvider,
+  useSmooth: () => useSmooth
 });
 export {
   actionBar_exports as ActionBarPrimitive,