@assistant-ui/react 0.11.41 → 0.11.43

package/src/client/AssistantClient.ts

@@ -1,7 +1,6 @@
 import {
   tapMemo,
   resource,
-  Unsubscribe,
   tapInlineResource,
   ResourceElement,
   tapResource,
@@ -29,6 +28,7 @@ import { withModelContextProvider } from "./ModelContext";
 import { ToolsApi, ToolsState } from "./types/Tools";
 import { ModelContextApi, ModelContextState } from "./types/ModelContext";
 import { ModelContext as ModelContextResource } from "./ModelContextClient";
+import { Unsubscribe } from "../types";
 
 type AssistantClientState = {
   readonly threads: ThreadListClientState;

package/src/client/ModelContext.ts

@@ -2,9 +2,9 @@ import {
   createContext,
   tapContext,
   withContextProvider,
-  Unsubscribe,
 } from "@assistant-ui/tap";
 import { ModelContextProvider } from "../model-context/ModelContextTypes";
+import { Unsubscribe } from "../types";
 
 export type ModelContextRegistrar = ModelContextProvider & {
   register: (provider: ModelContextProvider) => Unsubscribe;

package/src/client/ThreadMessageClient.tsx

@@ -63,6 +63,7 @@ const ThreadMessageAttachmentClient = resource(
 );
 export type ThreadMessageClientProps = {
   message: ThreadMessage;
+  index: number;
   isLast?: boolean;
   branchNumber?: number;
   branchCount?: number;
@@ -70,6 +71,7 @@ export type ThreadMessageClientProps = {
 export const ThreadMessageClient = resource(
   ({
     message,
+    index,
     isLast = true,
     branchNumber = 1,
     branchCount = 1,
@@ -102,6 +104,7 @@ export const ThreadMessageClient = resource(
         parts: parts.state,
         composer: composerState.state,
         parentId: null,
+        index,
         isLast,
         branchNumber,
         branchCount,
@@ -110,7 +113,7 @@ export const ThreadMessageClient = resource(
         isCopied: isCopiedState,
         isHovering: isHoveringState,
       };
-    }, [message, isCopiedState, isHoveringState, isLast]);
+    }, [message, index, isCopiedState, isHoveringState, isLast]);
 
     return tapApi<MessageClientApi>({
       getState: () => state,

package/src/client/types/Message.ts

@@ -30,6 +30,9 @@ export type MessageClientState = ThreadMessage & {
 
   readonly isCopied: boolean;
   readonly isHovering: boolean;
+
+  /** The position of this message in the thread (0 for first message) */
+  readonly index: number;
 };
 
 export type MessageClientApi = {

package/src/client/types/ModelContext.ts

@@ -1,4 +1,4 @@
-import type { Unsubscribe } from "@assistant-ui/tap";
+import type { Unsubscribe } from "../../types";
 import type { ModelContextProvider } from "../../model-context/ModelContextTypes";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

package/src/client/types/Tools.ts

@@ -1,5 +1,4 @@
-import { Unsubscribe } from "@assistant-ui/tap";
-import { ToolCallMessagePartComponent } from "../../types";
+import { ToolCallMessagePartComponent, Unsubscribe } from "../../types";
 
 export type ToolsState = {
   tools: Record<string, ToolCallMessagePartComponent[]>;

package/src/context/providers/ThreadViewportProvider.tsx

@@ -2,7 +2,10 @@
 
 import type { FC, PropsWithChildren } from "react";
 import { useEffect, useState } from "react";
-import { makeThreadViewportStore } from "../stores/ThreadViewport";
+import {
+  makeThreadViewportStore,
+  type ThreadViewportStoreOptions,
+} from "../stores/ThreadViewport";
 import {
   ThreadViewportContext,
   ThreadViewportContextValue,
@@ -10,10 +13,15 @@ import {
 } from "../react/ThreadViewportContext";
 import { writableStore } from "../ReadonlyStore";
 
-const useThreadViewportStoreValue = () => {
+export type ThreadViewportProviderProps = PropsWithChildren<{
+  options?: ThreadViewportStoreOptions;
+}>;
+
+const useThreadViewportStoreValue = (options: ThreadViewportStoreOptions) => {
   const outerViewport = useThreadViewportStore({ optional: true });
-  const [store] = useState(() => makeThreadViewportStore());
+  const [store] = useState(() => makeThreadViewportStore(options));
 
+  // Forward scrollToBottom from outer viewport to inner viewport
   useEffect(() => {
     return outerViewport?.getState().onScrollToBottom(() => {
       store.getState().scrollToBottom();
@@ -29,11 +37,25 @@ const useThreadViewportStoreValue = () => {
     });
   }, [store, outerViewport]);
 
+  // Sync options to store when they change
+  useEffect(() => {
+    const nextState = {
+      turnAnchor: options.turnAnchor ?? "bottom",
+    };
+
+    const currentState = store.getState();
+    if (currentState.turnAnchor !== nextState.turnAnchor) {
+      writableStore(store).setState(nextState);
+    }
+  }, [store, options.turnAnchor]);
+
   return store;
 };
 
-export const ThreadViewportProvider: FC<PropsWithChildren> = ({ children }) => {
-  const useThreadViewport = useThreadViewportStoreValue();
+export const ThreadPrimitiveViewportProvider: FC<
+  ThreadViewportProviderProps
+> = ({ children, options = {} }) => {
+  const useThreadViewport = useThreadViewportStoreValue(options);
 
   const [context] = useState<ThreadViewportContextValue>(() => {
     return {

package/src/context/react/AssistantApiContext.tsx

@@ -31,7 +31,7 @@ import {
   AttachmentClientApi,
   AttachmentClientState,
 } from "../../client/types/Attachment";
-import { Unsubscribe } from "@assistant-ui/tap";
+import { Unsubscribe } from "../../types";
 import {
   AssistantEvent,
   AssistantEventCallback,
@@ -42,7 +42,6 @@ import {
   ThreadListClientApi,
   ThreadListClientState,
 } from "../../client/types/ThreadList";
-import { ThreadViewportProvider } from "../providers/ThreadViewportProvider";
 import { DevToolsProviderApi } from "../../devtools/DevToolsHooks";
 import {
   AssistantClientProps,
@@ -354,9 +353,7 @@ export const AssistantProvider: FC<
 
   return (
     <AssistantApiContext.Provider value={api}>
-      {/* TODO temporarily allow accessing viewport state from outside the viewport */}
-      {/* TODO figure out if this behavior should be deprecated, since it is quite hacky */}
-      <ThreadViewportProvider>{children}</ThreadViewportProvider>
+      {children}
     </AssistantApiContext.Provider>
   );
 };

package/src/context/stores/ThreadViewport.tsx

@@ -3,20 +3,124 @@
 import { create } from "zustand";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 
+export type SizeHandle = {
+  /** Update the height */
+  setHeight: (height: number) => void;
+  /** Unregister this handle */
+  unregister: Unsubscribe;
+};
+
+type SizeRegistry = {
+  register: () => SizeHandle;
+};
+
+const createSizeRegistry = (
+  onChange: (total: number) => void,
+): SizeRegistry => {
+  const entries = new Map<symbol, number>();
+
+  const recalculate = () => {
+    let total = 0;
+    for (const height of entries.values()) {
+      total += height;
+    }
+    onChange(total);
+  };
+
+  return {
+    register: () => {
+      const id = Symbol();
+      entries.set(id, 0);
+
+      return {
+        setHeight: (height: number) => {
+          if (entries.get(id) !== height) {
+            entries.set(id, height);
+            recalculate();
+          }
+        },
+        unregister: () => {
+          entries.delete(id);
+          recalculate();
+        },
+      };
+    },
+  };
+};
+
 export type ThreadViewportState = {
   readonly isAtBottom: boolean;
-  readonly scrollToBottom: () => void;
-  readonly onScrollToBottom: (callback: () => void) => Unsubscribe;
+  readonly scrollToBottom: (config?: {
+    behavior?: ScrollBehavior | undefined;
+  }) => void;
+  readonly onScrollToBottom: (
+    callback: ({ behavior }: { behavior: ScrollBehavior }) => void,
+  ) => Unsubscribe;
+
+  /** Controls scroll anchoring: "top" anchors user messages at top, "bottom" is classic behavior */
+  readonly turnAnchor: "top" | "bottom";
+
+  /** Raw height values from registered elements */
+  readonly height: {
+    /** Total viewport height */
+    readonly viewport: number;
+    /** Total content inset height (footer, anchor message, etc.) */
+    readonly inset: number;
+    /** Height of the anchor user message (full height) */
+    readonly userMessage: number;
+  };
+
+  /** Register a viewport and get a handle to update its height */
+  readonly registerViewport: () => SizeHandle;
+
+  /** Register a content inset (footer, anchor message, etc.) and get a handle to update its height */
+  readonly registerContentInset: () => SizeHandle;
+
+  /** Register the anchor user message height */
+  readonly registerUserMessageHeight: () => SizeHandle;
+};
+
+export type ThreadViewportStoreOptions = {
+  turnAnchor?: "top" | "bottom" | undefined;
 };
 
-export const makeThreadViewportStore = () => {
-  const scrollToBottomListeners = new Set<() => void>();
+export const makeThreadViewportStore = (
+  options: ThreadViewportStoreOptions = {},
+) => {
+  const scrollToBottomListeners = new Set<
+    (config: { behavior: ScrollBehavior }) => void
+  >();
 
-  return create<ThreadViewportState>(() => ({
+  const viewportRegistry = createSizeRegistry((total) => {
+    store.setState({
+      height: {
+        ...store.getState().height,
+        viewport: total,
+      },
+    });
+  });
+  const insetRegistry = createSizeRegistry((total) => {
+    store.setState({
+      height: {
+        ...store.getState().height,
+        inset: total,
+      },
+    });
+  });
+  const userMessageRegistry = createSizeRegistry((total) => {
+    store.setState({
+      height: {
+        ...store.getState().height,
+        userMessage: total,
+      },
+    });
+  });
+
+  const store = create<ThreadViewportState>(() => ({
     isAtBottom: true,
-    scrollToBottom: () => {
+    scrollToBottom: ({ behavior = "auto" } = {}) => {
       for (const listener of scrollToBottomListeners) {
-        listener();
+        listener({ behavior });
       }
     },
     onScrollToBottom: (callback) => {
@@ -25,5 +129,19 @@ export const makeThreadViewportStore = () => {
         scrollToBottomListeners.delete(callback);
       };
     },
+
+    turnAnchor: options.turnAnchor ?? "bottom",
+
+    height: {
+      viewport: 0,
+      inset: 0,
+      userMessage: 0,
+    },
+
+    registerViewport: viewportRegistry.register,
+    registerContentInset: insetRegistry.register,
+    registerUserMessageHeight: userMessageRegistry.register,
   }));
+
+  return store;
 };

package/src/devtools/DevToolsHooks.ts

@@ -1,5 +1,5 @@
 import { AssistantApi } from "../context/react/AssistantApiContext";
-import { Unsubscribe } from "@assistant-ui/tap";
+import { Unsubscribe } from "../types";
 
 export interface EventLog {
   time: Date;

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -8,6 +8,7 @@ import {
 import { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
 import { RuntimeAdapter } from "./RuntimeAdapter";
+import { ThreadPrimitiveViewportProvider } from "../context/providers/ThreadViewportProvider";
 
 export namespace AssistantProvider {
   export type Props = PropsWithChildren<{
@@ -36,7 +37,11 @@ export const AssistantRuntimeProviderImpl: FC<AssistantProvider.Props> = ({
     <AssistantProvider api={api}>
       {RenderComponent && <RenderComponent />}
 
-      {children}
+      {/* TODO temporarily allow accessing viewport state from outside the viewport */}
+      {/* TODO figure out if this behavior should be deprecated, since it is quite hacky */}
+      <ThreadPrimitiveViewportProvider>
+        {children}
+      </ThreadPrimitiveViewportProvider>
     </AssistantProvider>
   );
 };

package/src/legacy-runtime/client/ComposerRuntimeClient.ts

@@ -2,8 +2,8 @@ import {
   resource,
   tapMemo,
   tapEffect,
-  RefObject,
   tapInlineResource,
+  type tapRef,
 } from "@assistant-ui/tap";
 import {
   ComposerRuntime,
@@ -43,8 +43,8 @@ export const ComposerClient = resource(
     messageIdRef,
     runtime,
   }: {
-    threadIdRef: RefObject<string>;
-    messageIdRef?: RefObject<string>;
+    threadIdRef: tapRef.RefObject<string>;
+    messageIdRef?: tapRef.RefObject<string>;
     runtime: ComposerRuntime;
   }) => {
     const runtimeState = tapSubscribable(runtime);

package/src/legacy-runtime/client/ThreadRuntimeClient.ts

@@ -5,7 +5,7 @@ import {
   tapInlineResource,
   tapMemo,
   tapEffect,
-  RefObject,
+  type tapRef,
 } from "@assistant-ui/tap";
 import { ComposerClient } from "./ComposerRuntimeClient";
 import { MessageClient } from "./MessageRuntimeClient";
@@ -24,7 +24,7 @@ const MessageClientById = resource(
   }: {
     runtime: ThreadRuntime;
     id: string;
-    threadIdRef: RefObject<string>;
+    threadIdRef: tapRef.RefObject<string>;
   }) => {
     const messageRuntime = tapMemo(
       () => runtime.getMessageById(id),

package/src/legacy-runtime/runtime/MessageRuntime.ts

@@ -80,6 +80,8 @@ const getMessagePartState = (
 
 export type MessageState = ThreadMessage & {
   readonly parentId: string | null;
+  /** The position of this message in the thread (0 for first message) */
+  readonly index: number;
   readonly isLast: boolean;
 
   readonly branchNumber: number;

package/src/legacy-runtime/runtime/RuntimeBindings.ts

@@ -45,6 +45,8 @@ export type ThreadListRuntimeCoreBinding = SubscribableWithState<
 export type MessageStateBinding = SubscribableWithState<
   ThreadMessage & {
     readonly parentId: string | null;
+    /** The position of this message in the thread (0 for first message) */
+    readonly index: number;
     readonly isLast: boolean;
     readonly branchNumber: number;
     readonly branchCount: number;

package/src/legacy-runtime/runtime/ThreadRuntime.ts

@@ -447,6 +447,7 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
         return {
           message,
           parentId: messages[idx - 1]?.id ?? null,
+          index: idx,
         };
       },
     );
@@ -468,19 +469,20 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
   private _getMessageRuntime(
     path: MessageRuntimePath,
     callback: () =>
-      | { parentId: string | null; message: ThreadMessage }
+      | { parentId: string | null; message: ThreadMessage; index: number }
       | undefined,
   ) {
     return new MessageRuntimeImpl(
       new ShallowMemoizeSubject({
         path,
         getState: () => {
-          const { message, parentId } = callback() ?? {};
+          const { message, parentId, index } = callback() ?? {};
 
           const { messages, speech: speechState } =
             this._threadBinding.getState();
 
-          if (!message || parentId === undefined) return SKIP_UPDATE;
+          if (!message || parentId === undefined || index === undefined)
+            return SKIP_UPDATE;
 
           const thread = this._threadBinding.getState();
 
@@ -491,6 +493,7 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
             ...message,
             ...{ [symbolInnerMessage]: (message as any)[symbolInnerMessage] },
 
+            index,
             isLast: messages.at(-1)?.id === message.id,
             parentId,
 

package/src/legacy-runtime/runtime-cores/assistant-transport/useToolInvocations.ts

@@ -131,7 +131,7 @@ export function useToolInvocations({
   });
 
   const ignoredToolIds = useRef<Set<string>>(new Set());
-  const isInititialState = useRef(true);
+  const isInitialState = useRef(true);
 
   useEffect(() => {
     const processMessages = (
@@ -140,7 +140,7 @@ export function useToolInvocations({
       messages.forEach((message) => {
         message.content.forEach((content) => {
           if (content.type === "tool-call") {
-            if (isInititialState.current) {
+            if (isInitialState.current) {
               ignoredToolIds.current.add(content.toolCallId);
             } else {
               if (ignoredToolIds.current.has(content.toolCallId)) {
@@ -225,8 +225,8 @@ export function useToolInvocations({
 
     processMessages(state.messages);
 
-    if (isInititialState.current) {
-      isInititialState.current = false;
+    if (isInitialState.current) {
+      isInitialState.current = false;
     }
   }, [state, controller, onResult]);
 
@@ -244,7 +244,7 @@ export function useToolInvocations({
   return {
     reset: () => {
       abort();
-      isInititialState.current = true;
+      isInitialState.current = true;
     },
     abort,
     resume: (toolCallId: string, payload: unknown) => {

package/src/legacy-runtime/runtime-cores/core/ThreadRuntimeCore.tsx

@@ -79,6 +79,7 @@ export type ThreadRuntimeCore = Readonly<{
     | {
         parentId: string | null;
         message: ThreadMessage;
+        index: number;
       }
     | undefined;
 

package/src/legacy-runtime/runtime-cores/utils/MessageRepository.tsx

@@ -339,6 +339,7 @@ export class MessageRepository {
     return {
       parentId: message.prev?.current.id ?? null,
       message: message.current,
+      index: message.level,
     };
   }
 

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -1,10 +1,12 @@
+"use client";
+
 import { forwardRef, useCallback, useState } from "react";
 
 import { Slot } from "@radix-ui/react-slot";
 import React from "react";
 import { useAssistantApi } from "../../context";
 
-export namespace ComposerAttachmentDropzonePrimitive {
+export namespace ComposerPrimitiveAttachmentDropzone {
   export type Element = HTMLDivElement;
   export type Props = React.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean | undefined;
@@ -12,19 +14,40 @@ export namespace ComposerAttachmentDropzonePrimitive {
   };
 }
 
-export const ComposerAttachmentDropzone = forwardRef<
+export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   HTMLDivElement,
-  ComposerAttachmentDropzonePrimitive.Props
+  ComposerPrimitiveAttachmentDropzone.Props
 >(({ disabled, asChild = false, children, ...rest }, ref) => {
   const [isDragging, setIsDragging] = useState(false);
   const api = useAssistantApi();
 
-  const handleDrag = useCallback(
+  const handleDragEnterCapture = useCallback(
+    (e: React.DragEvent) => {
+      if (disabled) return;
+      e.preventDefault();
+      setIsDragging(true);
+    },
+    [disabled],
+  );
+
+  const handleDragOverCapture = useCallback(
     (e: React.DragEvent) => {
       if (disabled) return;
       e.preventDefault();
-      e.stopPropagation();
-      setIsDragging(e.type === "dragenter" || e.type === "dragover");
+      if (!isDragging) setIsDragging(true);
+    },
+    [disabled, isDragging],
+  );
+
+  const handleDragLeaveCapture = useCallback(
+    (e: React.DragEvent) => {
+      if (disabled) return;
+      e.preventDefault();
+      const next = e.relatedTarget as Node | null;
+      if (next && e.currentTarget.contains(next)) {
+        return;
+      }
+      setIsDragging(false);
     },
     [disabled],
   );
@@ -33,7 +56,6 @@ export const ComposerAttachmentDropzone = forwardRef<
     async (e: React.DragEvent) => {
       if (disabled) return;
       e.preventDefault();
-      e.stopPropagation();
       setIsDragging(false);
       for (const file of e.dataTransfer.files) {
         try {
@@ -47,10 +69,10 @@ export const ComposerAttachmentDropzone = forwardRef<
   );
 
   const dragProps = {
-    onDragEnter: handleDrag,
-    onDragOver: handleDrag,
-    onDragLeave: handleDrag,
-    onDrop: handleDrop,
+    onDragEnterCapture: handleDragEnterCapture,
+    onDragOverCapture: handleDragOverCapture,
+    onDragLeaveCapture: handleDragLeaveCapture,
+    onDropCapture: handleDrop,
   };
 
   const Comp = asChild ? Slot : "div";
@@ -67,4 +89,5 @@ export const ComposerAttachmentDropzone = forwardRef<
   );
 });
 
-ComposerAttachmentDropzone.displayName = "ComposerPrimitive.AttachmentDropzone";
+ComposerPrimitiveAttachmentDropzone.displayName =
+  "ComposerPrimitive.AttachmentDropzone";

package/src/primitives/composer/index.ts

@@ -5,4 +5,5 @@ export { ComposerPrimitiveCancel as Cancel } from "./ComposerCancel";
 export { ComposerPrimitiveAddAttachment as AddAttachment } from "./ComposerAddAttachment";
 export { ComposerPrimitiveAttachments as Attachments } from "./ComposerAttachments";
 export { ComposerPrimitiveAttachmentByIndex as AttachmentByIndex } from "./ComposerAttachments";
+export { ComposerPrimitiveAttachmentDropzone as AttachmentDropzone } from "./ComposerAttachmentDropzone";
 export { ComposerPrimitiveIf as If } from "./ComposerIf";