@assistant-ui/react 0.11.36 → 0.11.38

package/dist/types/MessagePartComponentTypes.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType, PropsWithChildren } from "react";
 import type { MessagePartStatus, FileMessagePart, ImageMessagePart, ReasoningMessagePart, SourceMessagePart, TextMessagePart, ToolCallMessagePart, Unstable_AudioMessagePart } from "./AssistantTypes";
 import { MessagePartState } from "../legacy-runtime/runtime/MessagePartRuntime";
 import { ToolResponse } from "assistant-stream";
@@ -10,6 +10,11 @@ export type TextMessagePartProps = MessagePartState & TextMessagePart;
 export type TextMessagePartComponent = ComponentType<TextMessagePartProps>;
 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>;
 export type ImageMessagePartProps = MessagePartState & ImageMessagePart;

package/dist/types/MessagePartComponentTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagePartComponentTypes.d.ts","sourceRoot":"","sources":["../../src/types/MessagePartComponentTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC;AAChF,MAAM,MAAM,6BAA6B,GACvC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAE3C,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,0BAA0B,GAAG,aAAa,CAAC,sBAAsB,CAAC,CAAC;AAE/E,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AACxE,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAE3E,MAAM,MAAM,8BAA8B,GAAG,gBAAgB,GAC3D,yBAAyB,CAAC;AAC5B,MAAM,MAAM,kCAAkC,GAC5C,aAAa,CAAC,8BAA8B,CAAC,CAAC;AAEhD,MAAM,MAAM,wBAAwB,CAClC,KAAK,GAAG,GAAG,EACX,OAAO,GAAG,OAAO,IACf,gBAAgB,GAClB,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG;IACpC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEJ,MAAM,MAAM,4BAA4B,CACtC,KAAK,GAAG,GAAG,EACX,OAAO,GAAG,GAAG,IACX,aAAa,CAAC,wBAAwB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC"}
+{"version":3,"file":"MessagePartComponentTypes.d.ts","sourceRoot":"","sources":["../../src/types/MessagePartComponentTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC;AAChF,MAAM,MAAM,6BAA6B,GACvC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AACH,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAEzE,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,0BAA0B,GAAG,aAAa,CAAC,sBAAsB,CAAC,CAAC;AAE/E,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AACxE,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAE3E,MAAM,MAAM,8BAA8B,GAAG,gBAAgB,GAC3D,yBAAyB,CAAC;AAC5B,MAAM,MAAM,kCAAkC,GAC5C,aAAa,CAAC,8BAA8B,CAAC,CAAC;AAEhD,MAAM,MAAM,wBAAwB,CAClC,KAAK,GAAG,GAAG,EACX,OAAO,GAAG,OAAO,IACf,gBAAgB,GAClB,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG;IACpC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEJ,MAAM,MAAM,4BAA4B,CACtC,KAAK,GAAG,GAAG,EACX,OAAO,GAAG,GAAG,IACX,aAAa,CAAC,wBAAwB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC"}

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export type { Attachment, PendingAttachment, CompleteAttachment, AttachmentStatus, } from "./AttachmentTypes";
 export type { AppendMessage, TextMessagePart, ReasoningMessagePart, SourceMessagePart, ImageMessagePart, FileMessagePart, Unstable_AudioMessagePart, ToolCallMessagePart, MessageStatus, MessagePartStatus, ToolCallMessagePartStatus, ThreadUserMessagePart, ThreadAssistantMessagePart, ThreadSystemMessage, ThreadAssistantMessage, ThreadUserMessage, ThreadMessage, } from "./AssistantTypes";
-export type { EmptyMessagePartComponent, EmptyMessagePartProps, TextMessagePartComponent, TextMessagePartProps, ReasoningMessagePartComponent, ReasoningMessagePartProps, SourceMessagePartComponent, SourceMessagePartProps, ImageMessagePartComponent, ImageMessagePartProps, FileMessagePartComponent, FileMessagePartProps, Unstable_AudioMessagePartComponent, Unstable_AudioMessagePartProps, ToolCallMessagePartComponent, ToolCallMessagePartProps, } from "./MessagePartComponentTypes";
+export type { EmptyMessagePartComponent, EmptyMessagePartProps, TextMessagePartComponent, TextMessagePartProps, ReasoningMessagePartComponent, ReasoningMessagePartProps, SourceMessagePartComponent, SourceMessagePartProps, ImageMessagePartComponent, ImageMessagePartProps, FileMessagePartComponent, FileMessagePartProps, Unstable_AudioMessagePartComponent, Unstable_AudioMessagePartProps, ToolCallMessagePartComponent, ToolCallMessagePartProps, ReasoningGroupProps, ReasoningGroupComponent, } from "./MessagePartComponentTypes";
 export type { ThreadListItemStatus } from "../legacy-runtime/runtime/ThreadListItemRuntime";
 export type { Unsubscribe } from "./Unsubscribe";
 export type { AssistantEventScope, AssistantEventSelector, AssistantEvent, AssistantEventMap, AssistantEventCallback, } from "./EventTypes";

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACV,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,yBAAyB,EACzB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EAGzB,qBAAqB,EACrB,0BAA0B,EAC1B,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,6BAA6B,EAC7B,yBAAyB,EACzB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,kCAAkC,EAClC,8BAA8B,EAC9B,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAE5F,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACV,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,yBAAyB,EACzB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EAGzB,qBAAqB,EACrB,0BAA0B,EAC1B,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,6BAA6B,EAC7B,yBAAyB,EACzB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,kCAAkC,EAClC,8BAA8B,EAC9B,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAE5F,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,cAAc,CAAC"}

package/package.json

@@ -28,7 +28,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.11.36",
+  "version": "0.11.38",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -48,14 +48,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "assistant-cloud": "^0.1.6",
+    "assistant-cloud": "^0.1.7",
     "@assistant-ui/tap": "^0.1.5",
     "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-compose-refs": "^1.1.2",
-    "@radix-ui/react-context": "^1.1.2",
+    "@radix-ui/react-context": "^1.1.3",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-primitive": "^2.1.3",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-primitive": "^2.1.4",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-escape-keydown": "^1.1.1",
     "@standard-schema/spec": "^1.0.0",
@@ -84,11 +84,11 @@
     "@stryker-mutator/core": "^9.3.0",
     "@stryker-mutator/vitest-runner": "^9.3.0",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^24.10.0",
+    "@types/node": "^24.10.1",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1",
+    "eslint-config-next": "16.0.3",
     "tsx": "^4.20.6",
-    "vitest": "^4.0.6",
+    "vitest": "^4.0.8",
     "@assistant-ui/x-buildutils": "0.0.1"
   },
   "publishConfig": {

package/src/legacy-runtime/runtime-cores/remote-thread-list/RemoteThreadListThreadListRuntimeCore.tsx

@@ -308,9 +308,56 @@ export class RemoteThreadListThreadListRuntimeCore
   }
 
   public async switchToThread(threadIdOrRemoteId: string): Promise<void> {
-    const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
+    let data = this.getItemById(threadIdOrRemoteId);
+
+    if (!data) {
+      const remoteMetadata =
+        await this._options.adapter.fetch(threadIdOrRemoteId);
+      const state = this._state.value;
+      const mappingId = createThreadMappingId(remoteMetadata.remoteId);
+
+      const newThreadData = {
+        ...state.threadData,
+        [mappingId]: {
+          id: mappingId,
+          initializeTask: Promise.resolve({
+            remoteId: remoteMetadata.remoteId,
+            externalId: remoteMetadata.externalId,
+          }),
+          remoteId: remoteMetadata.remoteId,
+          externalId: remoteMetadata.externalId,
+          status: remoteMetadata.status,
+          title: remoteMetadata.title,
+        } as RemoteThreadData,
+      };
+
+      const newThreadIdMap = {
+        ...state.threadIdMap,
+        [remoteMetadata.remoteId]: mappingId,
+      };
+
+      const newThreadIds =
+        remoteMetadata.status === "regular"
+          ? [...state.threadIds, remoteMetadata.remoteId]
+          : state.threadIds;
+
+      const newArchivedThreadIds =
+        remoteMetadata.status === "archived"
+          ? [...state.archivedThreadIds, remoteMetadata.remoteId]
+          : state.archivedThreadIds;
 
+      this._state.update({
+        ...state,
+        threadIds: newThreadIds,
+        archivedThreadIds: newArchivedThreadIds,
+        threadIdMap: newThreadIdMap,
+        threadData: newThreadData,
+      });
+
+      data = this.getItemById(threadIdOrRemoteId);
+    }
+
+    if (!data) throw new Error("Thread not found");
     if (this._mainThreadId === data.id) return;
 
     const task = this._hookManager.startThreadRuntime(data.id);

package/src/legacy-runtime/runtime-cores/remote-thread-list/adapter/cloud.tsx

@@ -121,6 +121,16 @@ export const useCloudThreadListAdapter = (
       });
     },
 
+    fetch: async (threadId: string) => {
+      const thread = await cloud.threads.get(threadId);
+      return {
+        status: thread.is_archived ? "archived" : "regular",
+        remoteId: thread.id,
+        title: thread.title,
+        externalId: thread.external_id ?? undefined,
+      };
+    },
+
     unstable_Provider,
   };
 };

package/src/legacy-runtime/runtime-cores/remote-thread-list/adapter/in-memory.tsx

@@ -3,6 +3,7 @@ import {
   RemoteThreadInitializeResponse,
   RemoteThreadListAdapter,
   RemoteThreadListResponse,
+  RemoteThreadMetadata,
 } from "../types";
 
 export class InMemoryThreadListAdapter implements RemoteThreadListAdapter {
@@ -35,4 +36,8 @@ export class InMemoryThreadListAdapter implements RemoteThreadListAdapter {
   generateTitle(): Promise<AssistantStream> {
     return Promise.resolve(new ReadableStream<AssistantStreamChunk>());
   }
+
+  fetch(_threadId: string): Promise<RemoteThreadMetadata> {
+    return Promise.reject(new Error("Thread not found"));
+  }
 }

package/src/legacy-runtime/runtime-cores/remote-thread-list/types.tsx

@@ -31,6 +31,7 @@ export type RemoteThreadListAdapter = {
     remoteId: string,
     unstable_messages: readonly ThreadMessage[],
   ): Promise<AssistantStream>;
+  fetch(threadId: string): Promise<RemoteThreadMetadata>;
 
   unstable_Provider?: ComponentType<PropsWithChildren>;
 };

package/src/primitives/assistantModal/scope.tsx

@@ -1,5 +1,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { Scope } from "@radix-ui/react-context";
 
-export const usePopoverScope = PopoverPrimitive.createPopoverScope();
+export const usePopoverScope: ReturnType<
+  typeof PopoverPrimitive.createPopoverScope
+> = PopoverPrimitive.createPopoverScope();
 export type ScopedProps<P> = P & { __scopeAssistantModal?: Scope };

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;
   };
@@ -220,6 +277,7 @@ const defaultComponents = {
   File: () => null,
   Unstable_Audio: () => null,
   ToolGroup: ({ children }) => children,
+  ReasoningGroup: ({ children }) => children,
 } satisfies MessagePrimitiveParts.Props["components"];
 
 type MessagePartComponentProps = {
@@ -328,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";
@@ -416,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}
           >
@@ -437,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/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/primitives/thread/useThreadViewportAutoScroll.tsx

@@ -28,16 +28,13 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   // fix: delay the state change until the scroll is done
   const isScrollingToBottomRef = useRef(false);
 
-  const scrollToBottom = useCallback(
-    (behavior: ScrollBehavior) => {
-      const div = divRef.current;
-      if (!div || !autoScroll) return;
+  const scrollToBottom = useCallback((behavior: ScrollBehavior) => {
+    const div = divRef.current;
+    if (!div) return;
 
-      isScrollingToBottomRef.current = true;
-      div.scrollTo({ top: div.scrollHeight, behavior });
-    },
-    [autoScroll],
-  );
+    isScrollingToBottomRef.current = true;
+    div.scrollTo({ top: div.scrollHeight, behavior });
+  }, []);
 
   const handleScroll = () => {
     const div = divRef.current;
@@ -45,7 +42,8 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
     const isAtBottom = threadViewportStore.getState().isAtBottom;
     const newIsAtBottom =
-      div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed
+      Math.abs(div.scrollHeight - div.scrollTop - div.clientHeight) < 1 ||
+      div.scrollHeight <= div.clientHeight;
 
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
       // ignore scroll down
@@ -66,8 +64,9 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
   const resizeRef = useOnResizeContent(() => {
     if (
-      isScrollingToBottomRef.current ||
-      threadViewportStore.getState().isAtBottom
+      autoScroll &&
+      (isScrollingToBottomRef.current ||
+        threadViewportStore.getState().isAtBottom)
     ) {
       scrollToBottom("instant");
     }
@@ -87,7 +86,9 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   // autoscroll on run start
-  useAssistantEvent("thread.run-start", () => scrollToBottom("auto"));
+  useAssistantEvent("thread.run-start", () => {
+    if (autoScroll) scrollToBottom("auto");
+  });
 
   const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
   return autoScrollRef as RefCallback<TElement>;

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