@assistant-ui/react 0.11.39 → 0.11.43

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/runManager.ts

@@ -11,7 +11,7 @@ export function useRunManager(config: {
   onRun: (signal: AbortSignal) => Promise<void>;
   onFinish?: (() => void) | undefined;
   onCancel?: (() => void) | undefined;
-  onError?: ((error: Error) => void) | undefined;
+  onError?: ((error: Error) => void | Promise<void>) | undefined;
 }): RunManager {
   const [isRunning, setIsRunning] = useState(false);
   const stateRef = useRef({
@@ -37,7 +37,7 @@ export function useRunManager(config: {
         if (ac.signal.aborted) {
           onCancelRef.current?.();
         } else {
-          onErrorRef.current?.(error as Error);
+          await onErrorRef.current?.(error as Error);
         }
       } finally {
         onFinishRef.current?.();

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

@@ -97,10 +97,17 @@ export type AssistantTransportOptions<T> = {
       commands: AssistantTransportCommand[];
       updateState: (updater: (state: T) => T) => void;
     },
-  ) => void;
+  ) => void | Promise<void>;
+  /**
+   * Called when commands are cancelled.
+   *
+   * When an error occurs, queued commands are automatically cancelled after `onError` settles.
+   * In this case, the `error` parameter contains the error that caused the cancellation.
+   */
   onCancel?: (params: {
     commands: AssistantTransportCommand[];
     updateState: (updater: (state: T) => T) => void;
+    error?: Error;
   }) => void;
   adapters?: {
     attachments?: AttachmentAdapter | undefined;

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.tsx

@@ -174,6 +174,9 @@ const useAssistantTransportThreadRuntime = <T,>(
         ...commandQueue.state.inTransit,
         ...commandQueue.state.queued,
       ];
+
+      commandQueue.reset();
+
       options.onCancel?.({
         commands: cmds,
         updateState: (updater) => {
@@ -181,19 +184,31 @@ const useAssistantTransportThreadRuntime = <T,>(
           rerender((prev) => prev + 1);
         },
       });
+    },
+    onError: async (error) => {
+      const inTransitCmds = [...commandQueue.state.inTransit];
+      const queuedCmds = [...commandQueue.state.queued];
 
       commandQueue.reset();
-    },
-    onError: (error) => {
-      const cmds = [...commandQueue.state.inTransit];
-      options.onError?.(error as Error, {
-        commands: cmds,
-        updateState: (updater) => {
-          agentStateRef.current = updater(agentStateRef.current);
-          rerender((prev) => prev + 1);
-        },
-      });
-      commandQueue.markDelivered();
+
+      try {
+        await options.onError?.(error as Error, {
+          commands: inTransitCmds,
+          updateState: (updater) => {
+            agentStateRef.current = updater(agentStateRef.current);
+            rerender((prev) => prev + 1);
+          },
+        });
+      } finally {
+        options.onCancel?.({
+          commands: queuedCmds,
+          updateState: (updater) => {
+            agentStateRef.current = updater(agentStateRef.current);
+            rerender((prev) => prev + 1);
+          },
+          error: error as Error,
+        });
+      }
     },
   });
 

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";

package/src/primitives/message/MessageRoot.tsx

@@ -9,7 +9,10 @@ import {
 } from "react";
 import { useAssistantApi, useAssistantState } from "../../context";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
+import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useThreadViewport } from "../../context/react/ThreadViewportContext";
+import { ThreadPrimitiveViewportSlack } from "../thread/ThreadViewportSlack";
 
 const useIsHoveringRef = () => {
   const api = useAssistantApi();
@@ -41,6 +44,34 @@ const useIsHoveringRef = () => {
   return useManagedRef(callbackRef);
 };
 
+/**
+ * Hook that registers the anchor user message as a content inset.
+ * Only registers if: user message, at index messages.length-2, and last message is assistant.
+ */
+const useMessageViewportRef = () => {
+  const turnAnchor = useThreadViewport((s) => s.turnAnchor);
+  const registerUserHeight = useThreadViewport(
+    (s) => s.registerUserMessageHeight,
+  );
+
+  // inset rules:
+  // - the previous user message before the last assistant message registers its full height
+  const shouldRegisterAsInset = useAssistantState(
+    ({ thread, message }) =>
+      turnAnchor === "top" &&
+      message.role === "user" &&
+      message.index === thread.messages.length - 2 &&
+      thread.messages.at(-1)?.role === "assistant",
+  );
+
+  const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);
+
+  return useSizeHandle(
+    shouldRegisterAsInset ? registerUserHeight : null,
+    getHeight,
+  );
+};
+
 export namespace MessagePrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;
   /**
@@ -57,6 +88,9 @@ export namespace MessagePrimitiveRoot {
  * hover state management for the message. It automatically tracks when the user
  * is hovering over the message, which can be used by child components like action bars.
  *
+ * When `turnAnchor="top"` is set on the viewport, this component
+ * registers itself as the scroll anchor if it's the last user message.
+ *
  * @example
  * ```tsx
  * <MessagePrimitive.Root>
@@ -73,9 +107,18 @@ export const MessagePrimitiveRoot = forwardRef<
   MessagePrimitiveRoot.Props
 >((props, forwardRef) => {
   const isHoveringRef = useIsHoveringRef();
-  const ref = useComposedRefs<HTMLDivElement>(forwardRef, isHoveringRef);
+  const anchorUserMessageRef = useMessageViewportRef();
+  const ref = useComposedRefs<HTMLDivElement>(
+    forwardRef,
+    isHoveringRef,
+    anchorUserMessageRef,
+  );
 
-  return <Primitive.div {...props} ref={ref} />;
+  return (
+    <ThreadPrimitiveViewportSlack>
+      <Primitive.div {...props} ref={ref} />
+    </ThreadPrimitiveViewportSlack>
+  );
 });
 
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";

package/src/primitives/messagePart/useMessagePartData.tsx

@@ -3,7 +3,6 @@
 import { useAssistantState } from "../../context";
 import { DataMessagePart } from "../../types";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useMessagePartData = <T = any,>(name?: string) => {
   const part = useAssistantState(({ part }) => {
     if (part.type !== "data") {

package/src/primitives/thread/ThreadScrollToBottom.tsx

@@ -11,14 +11,22 @@ import {
   useThreadViewportStore,
 } from "../../context/react/ThreadViewportContext";
 
-const useThreadScrollToBottom = () => {
+export namespace useThreadScrollToBottom {
+  export type Options = {
+    behavior?: ScrollBehavior | undefined;
+  };
+}
+
+const useThreadScrollToBottom = ({
+  behavior,
+}: useThreadScrollToBottom.Options = {}) => {
   const isAtBottom = useThreadViewport((s) => s.isAtBottom);
 
   const threadViewportStore = useThreadViewportStore();
 
   const handleScrollToBottom = useCallback(() => {
-    threadViewportStore.getState().scrollToBottom();
-  }, [threadViewportStore]);
+    threadViewportStore.getState().scrollToBottom({ behavior });
+  }, [threadViewportStore, behavior]);
 
   if (isAtBottom) return null;
   return handleScrollToBottom;
@@ -32,4 +40,5 @@ export namespace ThreadPrimitiveScrollToBottom {
 export const ThreadPrimitiveScrollToBottom = createActionButton(
   "ThreadPrimitive.ScrollToBottom",
   useThreadScrollToBottom,
+  ["behavior"],
 );

package/src/primitives/thread/ThreadViewport.tsx

@@ -2,9 +2,16 @@
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive } from "@radix-ui/react-primitive";
-import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  type ComponentRef,
+  forwardRef,
+  ComponentPropsWithoutRef,
+  useCallback,
+} from "react";
 import { useThreadViewportAutoScroll } from "./useThreadViewportAutoScroll";
-import { ThreadViewportProvider } from "../../context/providers/ThreadViewportProvider";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
+import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 
 export namespace ThreadPrimitiveViewport {
   export type Element = ComponentRef<typeof Primitive.div>;
@@ -12,12 +19,31 @@ export namespace ThreadPrimitiveViewport {
     /**
      * Whether to automatically scroll to the bottom when new messages are added.
      * When enabled, the viewport will automatically scroll to show the latest content.
-     * @default true
+     *
+     * Default false if `turnAnchor` is "top", otherwise defaults to true.
      */
     autoScroll?: boolean | undefined;
+
+    /**
+     * Controls scroll anchoring behavior for new messages.
+     * - "bottom" (default): Messages anchor at the bottom, classic chat behavior.
+     * - "top": New user messages anchor at the top of the viewport for a focused reading experience.
+     */
+    turnAnchor?: "top" | "bottom" | undefined;
   };
 }
 
+const useViewportSizeRef = () => {
+  const register = useThreadViewport((s) => s.registerViewport);
+  const getHeight = useCallback(
+    (el: HTMLElement) =>
+      el.clientHeight - parseFloat(getComputedStyle(el).paddingTop),
+    [],
+  );
+
+  return useSizeHandle(register, getHeight);
+};
+
 const ThreadPrimitiveViewportScrollable = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
@@ -25,8 +51,8 @@ const ThreadPrimitiveViewportScrollable = forwardRef<
   const autoScrollRef = useThreadViewportAutoScroll<HTMLDivElement>({
     autoScroll,
   });
-
-  const ref = useComposedRefs(forwardedRef, autoScrollRef);
+  const viewportSizeRef = useViewportSizeRef();
+  const ref = useComposedRefs(forwardedRef, autoScrollRef, viewportSizeRef);
 
   return (
     <Primitive.div {...rest} ref={ref}>
@@ -47,7 +73,7 @@ ThreadPrimitiveViewportScrollable.displayName =
  *
  * @example
  * ```tsx
- * <ThreadPrimitive.Viewport autoScroll={true}>
+ * <ThreadPrimitive.Viewport turnAnchor="top">
  *   <ThreadPrimitive.Messages components={{ Message: MyMessage }} />
  * </ThreadPrimitive.Viewport>
  * ```
@@ -55,11 +81,11 @@ ThreadPrimitiveViewportScrollable.displayName =
 export const ThreadPrimitiveViewport = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
->((props, ref) => {
+>(({ turnAnchor, ...props }, ref) => {
   return (
-    <ThreadViewportProvider>
+    <ThreadPrimitiveViewportProvider options={{ turnAnchor }}>
       <ThreadPrimitiveViewportScrollable {...props} ref={ref} />
-    </ThreadViewportProvider>
+    </ThreadPrimitiveViewportProvider>
   );
 });
 

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ComponentRef,
+  forwardRef,
+  ComponentPropsWithoutRef,
+  useCallback,
+} from "react";
+import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
+import { useThreadViewport } from "../../context/react/ThreadViewportContext";
+
+export namespace ThreadPrimitiveViewportFooter {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+/**
+ * A footer container that measures its height for scroll calculations.
+ *
+ * This component measures its height and provides it to the viewport context
+ * for use in scroll calculations (e.g., ViewportSlack min-height).
+ *
+ * Multiple ViewportFooter components can be used - their heights are summed.
+ *
+ * Typically used with `className="sticky bottom-0"` to keep the footer
+ * visible at the bottom of the viewport while scrolling.
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.Viewport>
+ *   <ThreadPrimitive.Messages components={{ ... }} />
+ *   <ThreadPrimitive.ViewportFooter className="sticky bottom-0">
+ *     <Composer />
+ *   </ThreadPrimitive.ViewportFooter>
+ * </ThreadPrimitive.Viewport>
+ * ```
+ */
+export const ThreadPrimitiveViewportFooter = forwardRef<
+  ThreadPrimitiveViewportFooter.Element,
+  ThreadPrimitiveViewportFooter.Props
+>((props, forwardedRef) => {
+  const register = useThreadViewport((s) => s.registerContentInset);
+  const getHeight = useCallback((el: HTMLElement) => {
+    const marginTop = parseFloat(getComputedStyle(el).marginTop) || 0;
+    return el.offsetHeight + marginTop;
+  }, []);
+
+  const resizeRef = useSizeHandle(register, getHeight);
+
+  const ref = useComposedRefs(forwardedRef, resizeRef);
+
+  return <Primitive.div {...props} ref={ref} />;
+});
+
+ThreadPrimitiveViewportFooter.displayName = "ThreadPrimitive.ViewportFooter";

package/src/primitives/thread/ThreadViewportSlack.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import {
+  createContext,
+  type FC,
+  type ReactNode,
+  useCallback,
+  useContext,
+} from "react";
+import { useThreadViewportStore } from "../../context/react/ThreadViewportContext";
+import { useAssistantState } from "../../context";
+import { useManagedRef } from "../../utils/hooks/useManagedRef";
+
+const SlackNestingContext = createContext(false);
+
+const parseCssLength = (value: string, element: HTMLElement): number => {
+  const match = value.match(/^([\d.]+)(em|px|rem)$/);
+  if (!match) return 0;
+
+  const num = parseFloat(match[1]!);
+  const unit = match[2];
+
+  if (unit === "px") return num;
+  if (unit === "em") {
+    const fontSize = parseFloat(getComputedStyle(element).fontSize) || 16;
+    return num * fontSize;
+  }
+  if (unit === "rem") {
+    const rootFontSize =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    return num * rootFontSize;
+  }
+  return 0;
+};
+
+export type ThreadViewportSlackProps = {
+  /** Threshold at which the user message height clamps to the offset */
+  fillClampThreshold?: string;
+  /** Offset used when clamping large user messages */
+  fillClampOffset?: string;
+  children: ReactNode;
+};
+
+/**
+ * A slot component that provides minimum height to enable scroll anchoring.
+ *
+ * When using `turnAnchor="top"`, this component ensures there is
+ * enough scroll room below the anchor point (last user message) for it to scroll
+ * to the top of the viewport. The min-height is applied only to the last
+ * assistant message.
+ *
+ * This component is used internally by MessagePrimitive.Root.
+ */
+export const ThreadPrimitiveViewportSlack: FC<ThreadViewportSlackProps> = ({
+  children,
+  fillClampThreshold = "10em",
+  fillClampOffset = "6em",
+}) => {
+  const isLast = useAssistantState(({ message }) => message.isLast);
+  const threadViewportStore = useThreadViewportStore({ optional: true });
+  const isNested = useContext(SlackNestingContext);
+
+  const callback = useCallback(
+    (el: HTMLElement) => {
+      if (!threadViewportStore || isNested) return;
+
+      const updateMinHeight = () => {
+        const state = threadViewportStore.getState();
+        if (state.turnAnchor === "top" && isLast) {
+          const { viewport, inset, userMessage } = state.height;
+          const threshold = parseCssLength(fillClampThreshold, el);
+          const offset = parseCssLength(fillClampOffset, el);
+          const clampAdjustment =
+            userMessage <= threshold ? userMessage : offset;
+
+          const minHeight = Math.max(0, viewport - inset - clampAdjustment);
+          el.style.minHeight = `${minHeight}px`;
+          el.style.flexShrink = "0";
+          el.style.transition = "min-height 0s";
+        } else {
+          el.style.minHeight = "";
+          el.style.flexShrink = "";
+          el.style.transition = "";
+        }
+      };
+
+      updateMinHeight();
+      return threadViewportStore.subscribe(updateMinHeight);
+    },
+    [
+      threadViewportStore,
+      isLast,
+      isNested,
+      fillClampThreshold,
+      fillClampOffset,
+    ],
+  );
+
+  const ref = useManagedRef<HTMLElement>(callback);
+
+  return (
+    <SlackNestingContext.Provider value={true}>
+      <Slot ref={ref}>{children}</Slot>
+    </SlackNestingContext.Provider>
+  );
+};
+
+ThreadPrimitiveViewportSlack.displayName = "ThreadPrimitive.ViewportSlack";

package/src/primitives/thread/index.ts

@@ -2,6 +2,9 @@ export { ThreadPrimitiveRoot as Root } from "./ThreadRoot";
 export { ThreadPrimitiveEmpty as Empty } from "./ThreadEmpty";
 export { ThreadPrimitiveIf as If } from "./ThreadIf";
 export { ThreadPrimitiveViewport as Viewport } from "./ThreadViewport";
+export { ThreadPrimitiveViewportProvider as ViewportProvider } from "../../context/providers/ThreadViewportProvider";
+export { ThreadPrimitiveViewportFooter as ViewportFooter } from "./ThreadViewportFooter";
+export { ThreadPrimitiveViewportSlack as ViewportSlack } from "./ThreadViewportSlack";
 export { ThreadPrimitiveMessages as Messages } from "./ThreadMessages";
 export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "./ThreadMessages";
 export { ThreadPrimitiveScrollToBottom as ScrollToBottom } from "./ThreadScrollToBottom";