@assistant-ui/react 0.11.35 → 0.11.37

package/src/legacy-runtime/runtime-cores/external-store/auto-status.tsx

@@ -1,34 +1,67 @@
+import { ReadonlyJSONValue } from "assistant-stream/utils";
 import { MessageStatus } from "../../../types";
 
-const AUTO_STATUS_RUNNING = Object.freeze({ type: "running" });
-const AUTO_STATUS_COMPLETE = Object.freeze({
-  type: "complete",
-  reason: "unknown",
-});
+const symbolAutoStatus = Symbol("autoStatus");
 
-const AUTO_STATUS_PENDING = Object.freeze({
-  type: "requires-action",
-  reason: "tool-calls",
-});
+const AUTO_STATUS_RUNNING = Object.freeze(
+  Object.assign({ type: "running" as const }, { [symbolAutoStatus]: true }),
+);
+const AUTO_STATUS_COMPLETE = Object.freeze(
+  Object.assign(
+    {
+      type: "complete" as const,
+      reason: "unknown" as const,
+    },
+    { [symbolAutoStatus]: true },
+  ),
+);
 
-const AUTO_STATUS_INTERRUPT = Object.freeze({
-  type: "requires-action",
-  reason: "interrupt",
-});
+const AUTO_STATUS_PENDING = Object.freeze(
+  Object.assign(
+    {
+      type: "requires-action" as const,
+      reason: "tool-calls" as const,
+    },
+    { [symbolAutoStatus]: true },
+  ),
+);
+
+const AUTO_STATUS_INTERRUPT = Object.freeze(
+  Object.assign(
+    {
+      type: "requires-action" as const,
+      reason: "interrupt" as const,
+    },
+    { [symbolAutoStatus]: true },
+  ),
+);
 
 export const isAutoStatus = (status: MessageStatus) =>
-  status === AUTO_STATUS_RUNNING || status === AUTO_STATUS_COMPLETE;
+  (status as any)[symbolAutoStatus] === true;
 
 export const getAutoStatus = (
   isLast: boolean,
   isRunning: boolean,
   hasInterruptedToolCalls: boolean,
   hasPendingToolCalls: boolean,
-) =>
-  isLast && isRunning
+  error?: ReadonlyJSONValue,
+): MessageStatus => {
+  if (isLast && error) {
+    return Object.assign(
+      {
+        type: "incomplete" as const,
+        reason: "error" as const,
+        error: error,
+      },
+      { [symbolAutoStatus]: true },
+    );
+  }
+
+  return isLast && isRunning
     ? AUTO_STATUS_RUNNING
     : hasInterruptedToolCalls
       ? AUTO_STATUS_INTERRUPT
       : hasPendingToolCalls
         ? AUTO_STATUS_PENDING
         : AUTO_STATUS_COMPLETE;
+};

package/src/legacy-runtime/runtime-cores/external-store/external-message-converter.tsx

@@ -10,6 +10,7 @@ import { fromThreadMessageLike, ThreadMessageLike } from "./ThreadMessageLike";
 import { getAutoStatus, isAutoStatus } from "./auto-status";
 import { ThreadMessage, ToolCallMessagePart } from "../../../types";
 import { ToolExecutionStatus } from "../assistant-transport/useToolInvocations";
+import { ReadonlyJSONValue } from "assistant-stream/utils";
 
 export namespace useExternalMessageConverter {
   export type Message =
@@ -30,6 +31,7 @@ export namespace useExternalMessageConverter {
 
   export type Metadata = {
     readonly toolStatuses?: Record<string, ToolExecutionStatus>;
+    readonly error?: ReadonlyJSONValue;
   };
 
   export type Callback<T> = (
@@ -263,6 +265,7 @@ export const convertExternalMessages = <T extends WeakKey>(
       isRunning,
       hasSuspendedToolCalls,
       hasPendingToolCalls,
+      isLast ? metadata.error : undefined,
     );
     const newMessage = fromThreadMessageLike(
       joined,
@@ -348,6 +351,7 @@ export const useExternalMessageConverter = <T extends WeakKey>({
           isRunning,
           hasSuspendedToolCalls,
           hasPendingToolCalls,
+          isLast ? state.metadata.error : undefined,
         );
 
         if (

package/src/legacy-runtime/runtime-cores/local/LocalThreadListRuntimeCore.tsx

@@ -104,8 +104,10 @@ export class LocalThreadListRuntimeCore
     throw new Error("Method not implemented.");
   }
 
-  public initialize(): never {
-    throw new Error("Method not implemented.");
+  public initialize(
+    threadId: string,
+  ): Promise<{ remoteId: string; externalId: string | undefined }> {
+    return Promise.resolve({ remoteId: threadId, externalId: undefined });
   }
 
   public generateTitle(): never {

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

@@ -67,7 +67,7 @@ export const ExportedMessageRepository = {
       fromThreadMessageLike(
         m,
         generateId(),
-        getAutoStatus(false, false, false, false),
+        getAutoStatus(false, false, false, false, undefined),
       ),
     );
 

package/src/model-context/index.ts

@@ -19,5 +19,14 @@ export { tool } from "./tool";
 
 export { makeAssistantVisible } from "./makeAssistantVisible";
 
+export {
+  Toolkit,
+  type ToolDefinition,
+  type ToolkitFallback,
+  type ToolkitLayout,
+} from "./toolbox";
+
+export { Tools } from "../client/Tools";
+
 export * from "./registry";
 export * from "./frame";

package/src/model-context/makeAssistantVisible.tsx

@@ -76,7 +76,7 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
 
       const { clickable, editable } = config ?? {};
       useEffect(() => {
-        return api.registerModelContextProvider({
+        return api.modelContext().register({
           getModelContext: () => {
             return {
               tools: {

package/src/model-context/toolbox.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ComponentType, ReactNode } from "react";
+import type { Tool } from "assistant-stream";
+import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
+
+export type ToolDefinition<
+  TArgs extends Record<string, unknown>,
+  TResult,
+> = Tool<TArgs, TResult> & {
+  render?: ToolCallMessagePartComponent<TArgs, TResult> | undefined;
+};
+
+export const FallbackSymbol = Symbol("Toolkit.Fallback");
+export const LayoutSymbol = Symbol("Toolkit.Layout");
+
+export type ToolkitFallback = {
+  render: ToolCallMessagePartComponent<unknown, unknown>;
+};
+
+export type ToolkitLayout = {
+  render: ComponentType<{ children: ReactNode }>;
+};
+
+export type Toolkit = Record<string, ToolDefinition<any, any>> & {
+  [FallbackSymbol]?: ToolkitFallback;
+  [LayoutSymbol]?: ToolkitLayout;
+};
+
+export const Toolkit = {
+  Fallback: FallbackSymbol,
+  Layout: LayoutSymbol,
+} as const;
+
+export type ToolsConfig = {
+  toolkit: Toolkit;
+};

package/src/model-context/useAssistantInstructions.tsx

@@ -27,7 +27,7 @@ export const useAssistantInstructions = (
     const config = {
       system: instruction,
     };
-    return api.registerModelContextProvider({
+    return api.modelContext().register({
       getModelContext: () => config,
     });
   }, [api, instruction, disabled]);

package/src/model-context/useAssistantTool.tsx

@@ -33,7 +33,7 @@ export const useAssistantTool = <
         [toolName]: rest,
       },
     };
-    return api.registerModelContextProvider({
+    return api.modelContext().register({
       getModelContext: () => context,
     });
   }, [api, tool]);

package/src/primitives/index.ts

@@ -16,3 +16,4 @@ export { useMessagePartSource } from "./messagePart/useMessagePartSource";
 export { useMessagePartFile } from "./messagePart/useMessagePartFile";
 export { useMessagePartImage } from "./messagePart/useMessagePartImage";
 export { useThreadViewportAutoScroll } from "./thread/useThreadViewportAutoScroll";
+export { useScrollLock } from "./reasoning";

package/src/primitives/message/MessageParts.tsx

@@ -25,6 +25,7 @@ import type {
   ToolCallMessagePartProps,
   FileMessagePartComponent,
   ReasoningMessagePartComponent,
+  ReasoningGroupComponent,
 } from "../../types/MessagePartComponentTypes";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
 import { MessagePartStatus } from "../../types/AssistantTypes";
@@ -32,50 +33,75 @@ import { useShallow } from "zustand/shallow";
 
 type MessagePartRange =
   | { type: "single"; index: number }
-  | { type: "toolGroup"; startIndex: number; endIndex: number };
+  | { type: "toolGroup"; startIndex: number; endIndex: number }
+  | { type: "reasoningGroup"; startIndex: number; endIndex: number };
 
 /**
- * Groups consecutive tool-call message parts into ranges.
- * Always groups tool calls, even if there's only one.
+ * Creates a group state manager for a specific part type.
+ * Returns functions to start, end, and finalize groups.
+ */
+const createGroupState = <T extends "toolGroup" | "reasoningGroup">(
+  groupType: T,
+) => {
+  let start = -1;
+
+  return {
+    startGroup: (index: number) => {
+      if (start === -1) {
+        start = index;
+      }
+    },
+    endGroup: (endIndex: number, ranges: MessagePartRange[]) => {
+      if (start !== -1) {
+        ranges.push({
+          type: groupType,
+          startIndex: start,
+          endIndex,
+        } as MessagePartRange);
+        start = -1;
+      }
+    },
+    finalize: (endIndex: number, ranges: MessagePartRange[]) => {
+      if (start !== -1) {
+        ranges.push({
+          type: groupType,
+          startIndex: start,
+          endIndex,
+        } as MessagePartRange);
+      }
+    },
+  };
+};
+
+/**
+ * Groups consecutive tool-call and reasoning message parts into ranges.
+ * Always groups tool calls and reasoning parts, even if there's only one.
  */
 const groupMessageParts = (
   messageTypes: readonly string[],
 ): MessagePartRange[] => {
   const ranges: MessagePartRange[] = [];
-  let currentToolGroupStart = -1;
+  const toolGroup = createGroupState("toolGroup");
+  const reasoningGroup = createGroupState("reasoningGroup");
 
   for (let i = 0; i < messageTypes.length; i++) {
     const type = messageTypes[i];
 
     if (type === "tool-call") {
-      // Start a new tool group if we haven't started one
-      if (currentToolGroupStart === -1) {
-        currentToolGroupStart = i;
-      }
+      reasoningGroup.endGroup(i - 1, ranges);
+      toolGroup.startGroup(i);
+    } else if (type === "reasoning") {
+      toolGroup.endGroup(i - 1, ranges);
+      reasoningGroup.startGroup(i);
     } else {
-      // End current tool group if it exists
-      if (currentToolGroupStart !== -1) {
-        ranges.push({
-          type: "toolGroup",
-          startIndex: currentToolGroupStart,
-          endIndex: i - 1,
-        });
-        currentToolGroupStart = -1;
-      }
-
-      // Add non-tool-call part individually
+      toolGroup.endGroup(i - 1, ranges);
+      reasoningGroup.endGroup(i - 1, ranges);
       ranges.push({ type: "single", index: i });
     }
   }
 
-  // Handle any remaining tool group at the end
-  if (currentToolGroupStart !== -1) {
-    ranges.push({
-      type: "toolGroup",
-      startIndex: currentToolGroupStart,
-      endIndex: messageTypes.length - 1,
-    });
-  }
+  toolGroup.finalize(messageTypes.length - 1, ranges);
+  reasoningGroup.finalize(messageTypes.length - 1, ranges);
 
   return ranges;
 };
@@ -184,6 +210,37 @@ export namespace MessagePrimitiveParts {
           ToolGroup?: ComponentType<
             PropsWithChildren<{ startIndex: number; endIndex: number }>
           >;
+
+          /**
+           * Component for rendering grouped reasoning parts.
+           *
+           * When provided, this component will automatically wrap reasoning message parts
+           * (one or more consecutive) in a group container. Each reasoning part inside
+           * renders its own text independently - no text merging occurs.
+           *
+           * The component receives:
+           * - `startIndex`: The index of the first reasoning part in the group
+           * - `endIndex`: The index of the last reasoning part in the group
+           * - `children`: The rendered Reasoning components (one per part)
+           *
+           * @example
+           * ```tsx
+           * // Collapsible reasoning group
+           * ReasoningGroup: ({ children }) => (
+           *   <details className="reasoning-group">
+           *     <summary>Reasoning</summary>
+           *     <div className="reasoning-content">
+           *       {children}
+           *     </div>
+           *   </details>
+           * )
+           * ```
+           *
+           * @param startIndex - Index of the first reasoning part in the group
+           * @param endIndex - Index of the last reasoning part in the group
+           * @param children - Rendered reasoning part components
+           */
+          ReasoningGroup?: ReasoningGroupComponent;
         }
       | undefined;
   };
@@ -196,8 +253,9 @@ const ToolUIDisplay = ({
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
   const Render = useAssistantState(({ toolUIs }) => {
-    const Render = toolUIs[props.toolName] ?? Fallback;
-    if (Array.isArray(Render)) return Render[0];
+    const Render =
+      toolUIs.tools[props.toolName] ?? toolUIs.fallback ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
   if (!Render) return null;
@@ -219,6 +277,7 @@ const defaultComponents = {
   File: () => null,
   Unstable_Audio: () => null,
   ToolGroup: ({ children }) => children,
+  ReasoningGroup: ({ children }) => children,
 } satisfies MessagePrimitiveParts.Props["components"];
 
 type MessagePartComponentProps = {
@@ -327,7 +386,8 @@ export const MessagePrimitivePartByIndex: FC<MessagePrimitivePartByIndex.Props>
       prev.components?.File === next.components?.File &&
       prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
       prev.components?.tools === next.components?.tools &&
-      prev.components?.ToolGroup === next.components?.ToolGroup,
+      prev.components?.ToolGroup === next.components?.ToolGroup &&
+      prev.components?.ReasoningGroup === next.components?.ReasoningGroup,
   );
 
 MessagePrimitivePartByIndex.displayName = "MessagePrimitive.PartByIndex";
@@ -415,12 +475,12 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
             components={components}
           />
         );
-      } else {
+      } else if (range.type === "toolGroup") {
         const ToolGroupComponent =
           components!.ToolGroup ?? defaultComponents.ToolGroup;
         return (
           <ToolGroupComponent
-            key={range.startIndex}
+            key={`tool-${range.startIndex}`}
             startIndex={range.startIndex}
             endIndex={range.endIndex}
           >
@@ -436,6 +496,28 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
             )}
           </ToolGroupComponent>
         );
+      } else {
+        // reasoningGroup
+        const ReasoningGroupComponent =
+          components!.ReasoningGroup ?? defaultComponents.ReasoningGroup;
+        return (
+          <ReasoningGroupComponent
+            key={`reasoning-${range.startIndex}`}
+            startIndex={range.startIndex}
+            endIndex={range.endIndex}
+          >
+            {Array.from(
+              { length: range.endIndex - range.startIndex + 1 },
+              (_, i) => (
+                <MessagePrimitivePartByIndex
+                  key={i}
+                  index={range.startIndex + i}
+                  components={components}
+                />
+              ),
+            )}
+          </ReasoningGroupComponent>
+        );
       }
     });
   }, [messageRanges, components, contentLength]);

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -221,8 +221,9 @@ const ToolUIDisplay = ({
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
   const Render = useAssistantState(({ toolUIs }) => {
-    const Render = toolUIs[props.toolName] ?? Fallback;
-    if (Array.isArray(Render)) return Render[0];
+    const Render =
+      toolUIs.tools[props.toolName] ?? toolUIs.fallback ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
   if (!Render) return null;

package/src/primitives/reasoning/index.ts

@@ -0,0 +1 @@
+export { useScrollLock } from "./useScrollLock";

package/src/primitives/reasoning/useScrollLock.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { type RefObject, useCallback, useEffect, useRef } from "react";
+
+/**
+ * Locks scroll position during collapsible/height animations and hides scrollbar.
+ *
+ * This utility prevents page jumps when content height changes during animations,
+ * providing a smooth user experience. It finds the nearest scrollable ancestor and
+ * temporarily locks its scroll position while the animation completes.
+ *
+ * - Prevents forced reflows: no layout reads, mutations scoped to scrollable parent only
+ * - Reactive: only intercepts scroll events when browser actually adjusts
+ * - Cleans up automatically after animation duration
+ *
+ * @param animatedElementRef - Ref to the animated element
+ * @param animationDuration - Lock duration in milliseconds
+ * @returns Function to activate the scroll lock
+ *
+ * @example
+ * ```tsx
+ * const collapsibleRef = useRef<HTMLDivElement>(null);
+ * const lockScroll = useScrollLock(collapsibleRef, 200);
+ *
+ * const handleCollapse = () => {
+ *   lockScroll(); // Lock scroll before collapsing
+ *   setIsOpen(false);
+ * };
+ * ```
+ */
+export const useScrollLock = <T extends HTMLElement = HTMLElement>(
+  animatedElementRef: RefObject<T | null>,
+  animationDuration: number,
+) => {
+  const scrollContainerRef = useRef<HTMLElement | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+    };
+  }, []);
+
+  const lockScroll = useCallback(() => {
+    cleanupRef.current?.();
+
+    (function findScrollableAncestor() {
+      if (scrollContainerRef.current || !animatedElementRef.current) return;
+
+      let el: HTMLElement | null = animatedElementRef.current;
+      while (el) {
+        const { overflowY } = getComputedStyle(el);
+        if (overflowY === "scroll" || overflowY === "auto") {
+          scrollContainerRef.current = el;
+          break;
+        }
+        el = el.parentElement;
+      }
+    })();
+
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    const scrollPosition = scrollContainer.scrollTop;
+    const scrollbarWidth = scrollContainer.style.scrollbarWidth;
+
+    scrollContainer.style.scrollbarWidth = "none";
+
+    const resetPosition = () => (scrollContainer.scrollTop = scrollPosition);
+    scrollContainer.addEventListener("scroll", resetPosition);
+
+    const timeoutId = setTimeout(() => {
+      scrollContainer.removeEventListener("scroll", resetPosition);
+      scrollContainer.style.scrollbarWidth = scrollbarWidth;
+      cleanupRef.current = null;
+    }, animationDuration);
+
+    cleanupRef.current = () => {
+      clearTimeout(timeoutId);
+      scrollContainer.removeEventListener("scroll", resetPosition);
+      scrollContainer.style.scrollbarWidth = scrollbarWidth;
+    };
+  }, [animationDuration, animatedElementRef]);
+
+  return lockScroll;
+};

package/src/types/MessagePartComponentTypes.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType, PropsWithChildren } from "react";
 import type {
   MessagePartStatus,
   FileMessagePart,
@@ -24,6 +24,12 @@ export type ReasoningMessagePartProps = MessagePartState & ReasoningMessagePart;
 export type ReasoningMessagePartComponent =
   ComponentType<ReasoningMessagePartProps>;
 
+export type ReasoningGroupProps = PropsWithChildren<{
+  startIndex: number;
+  endIndex: number;
+}>;
+export type ReasoningGroupComponent = ComponentType<ReasoningGroupProps>;
+
 export type SourceMessagePartProps = MessagePartState & SourceMessagePart;
 export type SourceMessagePartComponent = ComponentType<SourceMessagePartProps>;
 

package/src/types/index.ts

@@ -44,6 +44,8 @@ export type {
   Unstable_AudioMessagePartProps,
   ToolCallMessagePartComponent,
   ToolCallMessagePartProps,
+  ReasoningGroupProps,
+  ReasoningGroupComponent,
 } from "./MessagePartComponentTypes";
 
 // Thread list item types