@assistant-ui/react 0.10.33 → 0.10.34

package/package.json

@@ -28,7 +28,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.10.33",
+  "version": "0.10.34",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -57,13 +57,13 @@
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-escape-keydown": "^1.1.1",
     "@standard-schema/spec": "^1.0.0",
-    "assistant-stream": "^0.2.21",
+    "assistant-stream": "^0.2.22",
     "json-schema": "^0.4.0",
     "nanoid": "5.1.5",
     "react-textarea-autosize": "^8.5.9",
-    "zod": "^3.25.67",
-    "zustand": "^5.0.6",
-    "assistant-cloud": "0.0.3"
+    "zod": "^4.0.14",
+    "zustand": "^5.0.7",
+    "assistant-cloud": "0.0.4"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -83,9 +83,9 @@
     "@stryker-mutator/core": "^9.0.1",
     "@stryker-mutator/vitest-runner": "^9.0.1",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^24.0.4",
+    "@types/node": "^24.1.0",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
+    "eslint-config-next": "15.4.5",
     "tsx": "^4.20.3",
     "vitest": "^3.2.4",
     "@assistant-ui/x-buildutils": "0.0.1"

package/src/primitives/message/{MessagePartsGroupedByParentId.tsx → MessagePartsGrouped.tsx}

@@ -35,16 +35,18 @@ import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProg
 import { MessagePartStatus } from "../../types/AssistantTypes";
 
 type MessagePartGroup = {
-  parentId: string | undefined;
+  groupKey: string | undefined;
   indices: number[];
 };
 
+export type GroupingFunction = (parts: readonly any[]) => MessagePartGroup[];
+
 /**
  * Groups message parts by their parent ID.
  * Parts without a parent ID appear in their chronological position as individual groups.
  * Parts with the same parent ID are grouped together at the position of their first occurrence.
  */
-const groupMessagePartsByParentId = (
+const groupMessagePartsByParentId: GroupingFunction = (
   parts: readonly any[],
 ): MessagePartGroup[] => {
   // Map maintains insertion order, so groups appear in order of first occurrence
@@ -68,33 +70,80 @@ const groupMessagePartsByParentId = (
   const groups: MessagePartGroup[] = [];
   for (const [groupId, indices] of groupMap) {
     // Extract parentId (undefined for ungrouped parts)
-    const parentId = groupId.startsWith("__ungrouped_") ? undefined : groupId;
-    groups.push({ parentId, indices });
+    const groupKey = groupId.startsWith("__ungrouped_") ? undefined : groupId;
+    groups.push({ groupKey, indices });
   }
 
   return groups;
 };
 
-const useMessagePartsGroupedByParentId = (): MessagePartGroup[] => {
+const useMessagePartsGrouped = (
+  groupingFunction: GroupingFunction,
+): MessagePartGroup[] => {
   const parts = useMessage((m) => m.content);
 
   return useMemo(() => {
     if (parts.length === 0) {
       return [];
     }
-    return groupMessagePartsByParentId(parts);
-  }, [parts]);
+    return groupingFunction(parts);
+  }, [parts, groupingFunction]);
 };
 
-export namespace MessagePrimitiveUnstable_PartsGroupedByParentId {
+export namespace MessagePrimitiveUnstable_PartsGrouped {
   export type Props = {
+    /**
+     * Function that takes an array of message parts and returns an array of groups.
+     * Each group contains a key (for identification) and an array of indices.
+     *
+     * @example
+     * ```tsx
+     * // Group by parent ID (default behavior)
+     * groupingFunction={(parts) => {
+     *   const groups = new Map<string, number[]>();
+     *   parts.forEach((part, i) => {
+     *     const key = part.parentId ?? `__ungrouped_${i}`;
+     *     const indices = groups.get(key) ?? [];
+     *     indices.push(i);
+     *     groups.set(key, indices);
+     *   });
+     *   return Array.from(groups.entries()).map(([key, indices]) => ({
+     *     key: key.startsWith("__ungrouped_") ? undefined : key,
+     *     indices
+     *   }));
+     * }}
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Group by tool name
+     * import { groupMessagePartsByToolName } from "@assistant-ui/react";
+     *
+     * <MessagePrimitive.Unstable_PartsGrouped
+     *   groupingFunction={groupMessagePartsByToolName}
+     *   components={{
+     *     Group: ({ key, indices, children }) => {
+     *       if (!key) return <>{children}</>;
+     *       return (
+     *         <div className="tool-group">
+     *           <h4>Tool: {key}</h4>
+     *           {children}
+     *         </div>
+     *       );
+     *     }
+     *   }}
+     * />
+     * ```
+     */
+    groupingFunction: GroupingFunction;
+
     /**
      * Component configuration for rendering different types of message content.
      *
      * You can provide custom components for each content type (text, image, file, etc.)
      * and configure tool rendering behavior. If not provided, default components will be used.
      */
-    components?:
+    components:
       | {
           /** Component for rendering empty messages */
           Empty?: EmptyMessagePartComponent | undefined;
@@ -127,28 +176,27 @@ export namespace MessagePrimitiveUnstable_PartsGroupedByParentId {
             | undefined;
 
           /**
-           * Component for rendering grouped message parts with the same parent ID.
+           * Component for rendering grouped message parts.
            *
            * When provided, this component will automatically wrap message parts that share
-           * the same parent ID, allowing you to create collapsible sections, custom styling,
-           * or other grouped presentations.
+           * the same group key as determined by the groupingFunction.
            *
            * The component receives:
-           * - `parentId`: The parent ID shared by all parts in the group (or undefined for ungrouped parts)
+           * - `groupKey`: The group key (or undefined for ungrouped parts)
            * - `indices`: Array of indices for the parts in this group
            * - `children`: The rendered message part components
            *
            * @example
            * ```tsx
-           * // Collapsible parent ID group
-           * Group: ({ parentId, indices, children }) => {
-           *   if (!parentId) return <>{children}</>;
+           * // Collapsible group
+           * Group: ({ groupKey, indices, children }) => {
+           *   if (!groupKey) return <>{children}</>;
            *   return (
-           *     <details className="parent-group">
+           *     <details className="message-group">
            *       <summary>
-           *         Group {parentId} ({indices.length} parts)
+           *         Group {groupKey} ({indices.length} parts)
            *       </summary>
-           *       <div className="parent-group-content">
+           *       <div className="group-content">
            *         {children}
            *       </div>
            *     </details>
@@ -156,31 +204,13 @@ export namespace MessagePrimitiveUnstable_PartsGroupedByParentId {
            * }
            * ```
            *
-           * @example
-           * ```tsx
-           * // Custom styled parent ID group
-           * Group: ({ parentId, indices, children }) => {
-           *   if (!parentId) return <>{children}</>;
-           *   return (
-           *     <div className="border rounded-lg p-4 my-2">
-           *       <div className="text-sm text-gray-600 mb-2">
-           *         Related content ({parentId})
-           *       </div>
-           *       <div className="space-y-2">
-           *         {children}
-           *       </div>
-           *     </div>
-           *   );
-           * }
-           * ```
-           *
-           * @param parentId - The parent ID shared by all parts in this group (undefined for ungrouped parts)
+           * @param groupKey - The group key (undefined for ungrouped parts)
            * @param indices - Array of indices for the parts in this group
            * @param children - Rendered message part components to display within the group
            */
           Group?: ComponentType<
             PropsWithChildren<{
-              parentId: string | undefined;
+              groupKey: string | undefined;
               indices: number[];
             }>
           >;
@@ -215,10 +245,10 @@ const defaultComponents = {
   File: () => null,
   Unstable_Audio: () => null,
   Group: ({ children }) => children,
-} satisfies MessagePrimitiveUnstable_PartsGroupedByParentId.Props["components"];
+} satisfies MessagePrimitiveUnstable_PartsGrouped.Props["components"];
 
 type MessagePartComponentProps = {
-  components: MessagePrimitiveUnstable_PartsGroupedByParentId.Props["components"];
+  components: MessagePrimitiveUnstable_PartsGrouped.Props["components"];
 };
 
 const MessagePartComponent: FC<MessagePartComponentProps> = ({
@@ -276,7 +306,7 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
 
 type MessagePartProps = {
   partIndex: number;
-  components: MessagePrimitiveUnstable_PartsGroupedByParentId.Props["components"];
+  components: MessagePrimitiveUnstable_PartsGrouped.Props["components"];
 };
 
 const MessagePartImpl: FC<MessagePartProps> = ({ partIndex, components }) => {
@@ -344,23 +374,45 @@ const EmptyParts = memo(
 );
 
 /**
- * Renders the parts of a message grouped by their parent ID.
+ * Renders the parts of a message grouped by a custom grouping function.
  *
- * This component automatically groups message parts that share the same parent ID,
- * allowing you to create hierarchical or related content presentations. Parts without
- * a parent ID appear after grouped parts and remain ungrouped.
+ * This component allows you to group message parts based on any criteria you define.
+ * The grouping function receives all message parts and returns an array of groups,
+ * where each group has a key and an array of part indices.
  *
  * @example
  * ```tsx
- * <MessagePrimitive.Unstable_PartsGroupedByParentId
+ * // Group by parent ID (default behavior)
+ * <MessagePrimitive.Unstable_PartsGrouped
  *   components={{
  *     Text: ({ text }) => <p className="message-text">{text}</p>,
  *     Image: ({ image }) => <img src={image} alt="Message image" />,
- *     Group: ({ parentId, indices, children }) => {
- *       if (!parentId) return <>{children}</>;
+ *     Group: ({ groupKey, indices, children }) => {
+ *       if (!groupKey) return <>{children}</>;
  *       return (
  *         <div className="parent-group border rounded p-4">
- *           <h4>Related Content</h4>
+ *           <h4>Parent ID: {groupKey}</h4>
+ *           {children}
+ *         </div>
+ *       );
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Group by tool name
+ * import { groupMessagePartsByToolName } from "@assistant-ui/react";
+ *
+ * <MessagePrimitive.Unstable_PartsGrouped
+ *   groupingFunction={groupMessagePartsByToolName}
+ *   components={{
+ *     Group: ({ groupKey, indices, children }) => {
+ *       if (!groupKey) return <>{children}</>;
+ *       return (
+ *         <div className="tool-group">
+ *           <h4>Tool: {groupKey}</h4>
  *           {children}
  *         </div>
  *       );
@@ -369,11 +421,11 @@ const EmptyParts = memo(
  * />
  * ```
  */
-export const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<
-  MessagePrimitiveUnstable_PartsGroupedByParentId.Props
-> = ({ components }) => {
+export const MessagePrimitiveUnstable_PartsGrouped: FC<
+  MessagePrimitiveUnstable_PartsGrouped.Props
+> = ({ groupingFunction, components }) => {
   const contentLength = useMessage((s) => s.content.length);
-  const messageGroups = useMessagePartsGroupedByParentId();
+  const messageGroups = useMessagePartsGrouped(groupingFunction);
 
   const partsElements = useMemo(() => {
     if (contentLength === 0) {
@@ -385,8 +437,8 @@ export const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<
 
       return (
         <GroupComponent
-          key={`group-${groupIndex}-${group.parentId ?? "ungrouped"}`}
-          parentId={group.parentId}
+          key={`group-${groupIndex}-${group.groupKey ?? "ungrouped"}`}
+          groupKey={group.groupKey}
           indices={group.indices}
         >
           {group.indices.map((partIndex) => (
@@ -404,5 +456,26 @@ export const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<
   return <>{partsElements}</>;
 };
 
+MessagePrimitiveUnstable_PartsGrouped.displayName =
+  "MessagePrimitive.Unstable_PartsGrouped";
+
+/**
+ * Renders the parts of a message grouped by their parent ID.
+ * This is a convenience wrapper around Unstable_PartsGrouped with parent ID grouping.
+ *
+ * @deprecated Use MessagePrimitive.Unstable_PartsGrouped instead for more flexibility
+ */
+export const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<
+  Omit<MessagePrimitiveUnstable_PartsGrouped.Props, "groupingFunction">
+> = ({ components, ...props }) => {
+  return (
+    <MessagePrimitiveUnstable_PartsGrouped
+      {...props}
+      components={components}
+      groupingFunction={groupMessagePartsByParentId}
+    />
+  );
+};
+
 MessagePrimitiveUnstable_PartsGroupedByParentId.displayName =
   "MessagePrimitive.Unstable_PartsGroupedByParentId";

package/src/primitives/message/index.ts

@@ -4,4 +4,7 @@ export { MessagePrimitiveParts as Content } from "./MessageParts";
 export { MessagePrimitiveIf as If } from "./MessageIf";
 export { MessagePrimitiveAttachments as Attachments } from "./MessageAttachments";
 export { MessagePrimitiveError as Error } from "./MessageError";
-export { MessagePrimitiveUnstable_PartsGroupedByParentId as Unstable_PartsGroupedByParentId } from "./MessagePartsGroupedByParentId";
+export {
+  MessagePrimitiveUnstable_PartsGrouped as Unstable_PartsGrouped,
+  MessagePrimitiveUnstable_PartsGroupedByParentId as Unstable_PartsGroupedByParentId,
+} from "./MessagePartsGrouped";

package/src/runtimes/external-store/ExternalStoreThreadRuntimeCore.tsx

@@ -184,7 +184,7 @@ export class ExternalStoreThreadRuntimeCore
     // Common logic for both paths
     if (messages.length > 0) this.ensureInitialized();
 
-    if (oldStore?.isRunning ?? false !== store.isRunning ?? false) {
+    if ((oldStore?.isRunning ?? false) !== (store.isRunning ?? false)) {
       if (store.isRunning) {
         this._notifyEventSubscribers("run-start");
       } else {

package/dist/primitives/message/MessagePartsGroupedByParentId.d.ts

@@ -1,122 +0,0 @@
-import { type ComponentType, type FC, PropsWithChildren } from "react";
-import type { Unstable_AudioMessagePartComponent, EmptyMessagePartComponent, TextMessagePartComponent, ImageMessagePartComponent, SourceMessagePartComponent, ToolCallMessagePartComponent, ToolCallMessagePartProps, FileMessagePartComponent, ReasoningMessagePartComponent } from "../../types/MessagePartComponentTypes";
-export declare namespace MessagePrimitiveUnstable_PartsGroupedByParentId {
-    type Props = {
-        /**
-         * Component configuration for rendering different types of message content.
-         *
-         * You can provide custom components for each content type (text, image, file, etc.)
-         * and configure tool rendering behavior. If not provided, default components will be used.
-         */
-        components?: {
-            /** Component for rendering empty messages */
-            Empty?: EmptyMessagePartComponent | undefined;
-            /** Component for rendering text content */
-            Text?: TextMessagePartComponent | undefined;
-            /** Component for rendering reasoning content (typically hidden) */
-            Reasoning?: ReasoningMessagePartComponent | undefined;
-            /** Component for rendering source content */
-            Source?: SourceMessagePartComponent | undefined;
-            /** Component for rendering image content */
-            Image?: ImageMessagePartComponent | undefined;
-            /** Component for rendering file content */
-            File?: FileMessagePartComponent | undefined;
-            /** Component for rendering audio content (experimental) */
-            Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
-            /** Configuration for tool call rendering */
-            tools?: {
-                /** Map of tool names to their specific components */
-                by_name?: Record<string, ToolCallMessagePartComponent | undefined> | undefined;
-                /** Fallback component for unregistered tools */
-                Fallback?: ComponentType<ToolCallMessagePartProps> | undefined;
-            } | {
-                /** Override component that handles all tool calls */
-                Override: ComponentType<ToolCallMessagePartProps>;
-            } | undefined;
-            /**
-             * Component for rendering grouped message parts with the same parent ID.
-             *
-             * When provided, this component will automatically wrap message parts that share
-             * the same parent ID, allowing you to create collapsible sections, custom styling,
-             * or other grouped presentations.
-             *
-             * The component receives:
-             * - `parentId`: The parent ID shared by all parts in the group (or undefined for ungrouped parts)
-             * - `indices`: Array of indices for the parts in this group
-             * - `children`: The rendered message part components
-             *
-             * @example
-             * ```tsx
-             * // Collapsible parent ID group
-             * Group: ({ parentId, indices, children }) => {
-             *   if (!parentId) return <>{children}</>;
-             *   return (
-             *     <details className="parent-group">
-             *       <summary>
-             *         Group {parentId} ({indices.length} parts)
-             *       </summary>
-             *       <div className="parent-group-content">
-             *         {children}
-             *       </div>
-             *     </details>
-             *   );
-             * }
-             * ```
-             *
-             * @example
-             * ```tsx
-             * // Custom styled parent ID group
-             * Group: ({ parentId, indices, children }) => {
-             *   if (!parentId) return <>{children}</>;
-             *   return (
-             *     <div className="border rounded-lg p-4 my-2">
-             *       <div className="text-sm text-gray-600 mb-2">
-             *         Related content ({parentId})
-             *       </div>
-             *       <div className="space-y-2">
-             *         {children}
-             *       </div>
-             *     </div>
-             *   );
-             * }
-             * ```
-             *
-             * @param parentId - The parent ID shared by all parts in this group (undefined for ungrouped parts)
-             * @param indices - Array of indices for the parts in this group
-             * @param children - Rendered message part components to display within the group
-             */
-            Group?: ComponentType<PropsWithChildren<{
-                parentId: string | undefined;
-                indices: number[];
-            }>>;
-        } | undefined;
-    };
-}
-/**
- * Renders the parts of a message grouped by their parent ID.
- *
- * This component automatically groups message parts that share the same parent ID,
- * allowing you to create hierarchical or related content presentations. Parts without
- * a parent ID appear after grouped parts and remain ungrouped.
- *
- * @example
- * ```tsx
- * <MessagePrimitive.Unstable_PartsGroupedByParentId
- *   components={{
- *     Text: ({ text }) => <p className="message-text">{text}</p>,
- *     Image: ({ image }) => <img src={image} alt="Message image" />,
- *     Group: ({ parentId, indices, children }) => {
- *       if (!parentId) return <>{children}</>;
- *       return (
- *         <div className="parent-group border rounded p-4">
- *           <h4>Related Content</h4>
- *           {children}
- *         </div>
- *       );
- *     }
- *   }}
- * />
- * ```
- */
-export declare const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<MessagePrimitiveUnstable_PartsGroupedByParentId.Props>;
-//# sourceMappingURL=MessagePartsGroupedByParentId.d.ts.map

package/dist/primitives/message/MessagePartsGroupedByParentId.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessagePartsGroupedByParentId.d.ts","sourceRoot":"","sources":["../../../src/primitives/message/MessagePartsGroupedByParentId.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,EAAE,EAEP,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EACV,kCAAkC,EAClC,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,EAC9B,MAAM,uCAAuC,CAAC;AAwD/C,yBAAiB,+CAA+C,CAAC;IAC/D,KAAY,KAAK,GAAG;QAClB;;;;;WAKG;QACH,UAAU,CAAC,EACP;YACE,6CAA6C;YAC7C,KAAK,CAAC,EAAE,yBAAyB,GAAG,SAAS,CAAC;YAC9C,2CAA2C;YAC3C,IAAI,CAAC,EAAE,wBAAwB,GAAG,SAAS,CAAC;YAC5C,mEAAmE;YACnE,SAAS,CAAC,EAAE,6BAA6B,GAAG,SAAS,CAAC;YACtD,6CAA6C;YAC7C,MAAM,CAAC,EAAE,0BAA0B,GAAG,SAAS,CAAC;YAChD,4CAA4C;YAC5C,KAAK,CAAC,EAAE,yBAAyB,GAAG,SAAS,CAAC;YAC9C,2CAA2C;YAC3C,IAAI,CAAC,EAAE,wBAAwB,GAAG,SAAS,CAAC;YAC5C,2DAA2D;YAC3D,cAAc,CAAC,EAAE,kCAAkC,GAAG,SAAS,CAAC;YAChE,4CAA4C;YAC5C,KAAK,CAAC,EACF;gBACE,qDAAqD;gBACrD,OAAO,CAAC,EACJ,MAAM,CAAC,MAAM,EAAE,4BAA4B,GAAG,SAAS,CAAC,GACxD,SAAS,CAAC;gBACd,gDAAgD;gBAChD,QAAQ,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,GAAG,SAAS,CAAC;aAChE,GACD;gBACE,qDAAqD;gBACrD,QAAQ,EAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;aACnD,GACD,SAAS,CAAC;YAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAmDG;YACH,KAAK,CAAC,EAAE,aAAa,CACnB,iBAAiB,CAAC;gBAChB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;gBAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;aACnB,CAAC,CACH,CAAC;SACH,GACD,SAAS,CAAC;KACf,CAAC;CACH;AA4JD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,+CAA+C,EAAE,EAAE,CAC9D,+CAA+C,CAAC,KAAK,CAgCtD,CAAC"}

package/dist/primitives/message/MessagePartsGroupedByParentId.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/primitives/message/MessagePartsGroupedByParentId.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentType,\n  type FC,\n  memo,\n  PropsWithChildren,\n  useMemo,\n} from \"react\";\nimport {\n  TextMessagePartProvider,\n  useMessagePart,\n  useMessagePartRuntime,\n  useToolUIs,\n} from \"../../context\";\nimport {\n  useMessage,\n  useMessageRuntime,\n} from \"../../context/react/MessageContext\";\nimport { MessagePartRuntimeProvider } from \"../../context/providers/MessagePartRuntimeProvider\";\nimport { MessagePartPrimitiveText } from \"../messagePart/MessagePartText\";\nimport { MessagePartPrimitiveImage } from \"../messagePart/MessagePartImage\";\nimport type {\n  Unstable_AudioMessagePartComponent,\n  EmptyMessagePartComponent,\n  TextMessagePartComponent,\n  ImageMessagePartComponent,\n  SourceMessagePartComponent,\n  ToolCallMessagePartComponent,\n  ToolCallMessagePartProps,\n  FileMessagePartComponent,\n  ReasoningMessagePartComponent,\n} from \"../../types/MessagePartComponentTypes\";\nimport { MessagePartPrimitiveInProgress } from \"../messagePart/MessagePartInProgress\";\nimport { MessagePartStatus } from \"../../types/AssistantTypes\";\n\ntype MessagePartGroup = {\n  parentId: string | undefined;\n  indices: number[];\n};\n\n/**\n * Groups message parts by their parent ID.\n * Parts without a parent ID appear in their chronological position as individual groups.\n * Parts with the same parent ID are grouped together at the position of their first occurrence.\n */\nconst groupMessagePartsByParentId = (\n  parts: readonly any[],\n): MessagePartGroup[] => {\n  // Map maintains insertion order, so groups appear in order of first occurrence\n  const groupMap = new Map<string, number[]>();\n\n  // Process each part in order\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n    const parentId = part?.parentId as string | undefined;\n\n    // For parts without parentId, assign a unique group ID to maintain their position\n    const groupId = parentId ?? `__ungrouped_${i}`;\n\n    // Get or create the indices array for this group\n    const indices = groupMap.get(groupId) ?? [];\n    indices.push(i);\n    groupMap.set(groupId, indices);\n  }\n\n  // Convert map to array of groups\n  const groups: MessagePartGroup[] = [];\n  for (const [groupId, indices] of groupMap) {\n    // Extract parentId (undefined for ungrouped parts)\n    const parentId = groupId.startsWith(\"__ungrouped_\") ? undefined : groupId;\n    groups.push({ parentId, indices });\n  }\n\n  return groups;\n};\n\nconst useMessagePartsGroupedByParentId = (): MessagePartGroup[] => {\n  const parts = useMessage((m) => m.content);\n\n  return useMemo(() => {\n    if (parts.length === 0) {\n      return [];\n    }\n    return groupMessagePartsByParentId(parts);\n  }, [parts]);\n};\n\nexport namespace MessagePrimitiveUnstable_PartsGroupedByParentId {\n  export type Props = {\n    /**\n     * Component configuration for rendering different types of message content.\n     *\n     * You can provide custom components for each content type (text, image, file, etc.)\n     * and configure tool rendering behavior. If not provided, default components will be used.\n     */\n    components?:\n      | {\n          /** Component for rendering empty messages */\n          Empty?: EmptyMessagePartComponent | undefined;\n          /** Component for rendering text content */\n          Text?: TextMessagePartComponent | undefined;\n          /** Component for rendering reasoning content (typically hidden) */\n          Reasoning?: ReasoningMessagePartComponent | undefined;\n          /** Component for rendering source content */\n          Source?: SourceMessagePartComponent | undefined;\n          /** Component for rendering image content */\n          Image?: ImageMessagePartComponent | undefined;\n          /** Component for rendering file content */\n          File?: FileMessagePartComponent | undefined;\n          /** Component for rendering audio content (experimental) */\n          Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;\n          /** Configuration for tool call rendering */\n          tools?:\n            | {\n                /** Map of tool names to their specific components */\n                by_name?:\n                  | Record<string, ToolCallMessagePartComponent | undefined>\n                  | undefined;\n                /** Fallback component for unregistered tools */\n                Fallback?: ComponentType<ToolCallMessagePartProps> | undefined;\n              }\n            | {\n                /** Override component that handles all tool calls */\n                Override: ComponentType<ToolCallMessagePartProps>;\n              }\n            | undefined;\n\n          /**\n           * Component for rendering grouped message parts with the same parent ID.\n           *\n           * When provided, this component will automatically wrap message parts that share\n           * the same parent ID, allowing you to create collapsible sections, custom styling,\n           * or other grouped presentations.\n           *\n           * The component receives:\n           * - `parentId`: The parent ID shared by all parts in the group (or undefined for ungrouped parts)\n           * - `indices`: Array of indices for the parts in this group\n           * - `children`: The rendered message part components\n           *\n           * @example\n           * ```tsx\n           * // Collapsible parent ID group\n           * Group: ({ parentId, indices, children }) => {\n           *   if (!parentId) return <>{children}</>;\n           *   return (\n           *     <details className=\"parent-group\">\n           *       <summary>\n           *         Group {parentId} ({indices.length} parts)\n           *       </summary>\n           *       <div className=\"parent-group-content\">\n           *         {children}\n           *       </div>\n           *     </details>\n           *   );\n           * }\n           * ```\n           *\n           * @example\n           * ```tsx\n           * // Custom styled parent ID group\n           * Group: ({ parentId, indices, children }) => {\n           *   if (!parentId) return <>{children}</>;\n           *   return (\n           *     <div className=\"border rounded-lg p-4 my-2\">\n           *       <div className=\"text-sm text-gray-600 mb-2\">\n           *         Related content ({parentId})\n           *       </div>\n           *       <div className=\"space-y-2\">\n           *         {children}\n           *       </div>\n           *     </div>\n           *   );\n           * }\n           * ```\n           *\n           * @param parentId - The parent ID shared by all parts in this group (undefined for ungrouped parts)\n           * @param indices - Array of indices for the parts in this group\n           * @param children - Rendered message part components to display within the group\n           */\n          Group?: ComponentType<\n            PropsWithChildren<{\n              parentId: string | undefined;\n              indices: number[];\n            }>\n          >;\n        }\n      | undefined;\n  };\n}\n\nconst ToolUIDisplay = ({\n  Fallback,\n  ...props\n}: {\n  Fallback: ToolCallMessagePartComponent | undefined;\n} & ToolCallMessagePartProps) => {\n  const Render = useToolUIs((s) => s.getToolUI(props.toolName)) ?? Fallback;\n  if (!Render) return null;\n  return <Render {...props} />;\n};\n\nconst defaultComponents = {\n  Text: () => (\n    <p style={{ whiteSpace: \"pre-line\" }}>\n      <MessagePartPrimitiveText />\n      <MessagePartPrimitiveInProgress>\n        <span style={{ fontFamily: \"revert\" }}>{\" \\u25CF\"}</span>\n      </MessagePartPrimitiveInProgress>\n    </p>\n  ),\n  Reasoning: () => null,\n  Source: () => null,\n  Image: () => <MessagePartPrimitiveImage />,\n  File: () => null,\n  Unstable_Audio: () => null,\n  Group: ({ children }) => children,\n} satisfies MessagePrimitiveUnstable_PartsGroupedByParentId.Props[\"components\"];\n\ntype MessagePartComponentProps = {\n  components: MessagePrimitiveUnstable_PartsGroupedByParentId.Props[\"components\"];\n};\n\nconst MessagePartComponent: FC<MessagePartComponentProps> = ({\n  components: {\n    Text = defaultComponents.Text,\n    Reasoning = defaultComponents.Reasoning,\n    Image = defaultComponents.Image,\n    Source = defaultComponents.Source,\n    File = defaultComponents.File,\n    Unstable_Audio: Audio = defaultComponents.Unstable_Audio,\n    tools = {},\n  } = {},\n}) => {\n  const MessagePartRuntime = useMessagePartRuntime();\n\n  const part = useMessagePart();\n\n  const type = part.type;\n  if (type === \"tool-call\") {\n    const addResult = (result: any) => MessagePartRuntime.addToolResult(result);\n    if (\"Override\" in tools)\n      return <tools.Override {...part} addResult={addResult} />;\n    const Tool = tools.by_name?.[part.toolName] ?? tools.Fallback;\n    return <ToolUIDisplay {...part} Fallback={Tool} addResult={addResult} />;\n  }\n\n  if (part.status.type === \"requires-action\")\n    throw new Error(\"Encountered unexpected requires-action status\");\n\n  switch (type) {\n    case \"text\":\n      return <Text {...part} />;\n\n    case \"reasoning\":\n      return <Reasoning {...part} />;\n\n    case \"source\":\n      return <Source {...part} />;\n\n    case \"image\":\n      // eslint-disable-next-line jsx-a11y/alt-text\n      return <Image {...part} />;\n\n    case \"file\":\n      return <File {...part} />;\n\n    case \"audio\":\n      return <Audio {...part} />;\n\n    default:\n      const unhandledType: never = type;\n      throw new Error(`Unknown message part type: ${unhandledType}`);\n  }\n};\n\ntype MessagePartProps = {\n  partIndex: number;\n  components: MessagePrimitiveUnstable_PartsGroupedByParentId.Props[\"components\"];\n};\n\nconst MessagePartImpl: FC<MessagePartProps> = ({ partIndex, components }) => {\n  const messageRuntime = useMessageRuntime();\n  const runtime = useMemo(\n    () => messageRuntime.getMessagePartByIndex(partIndex),\n    [messageRuntime, partIndex],\n  );\n\n  return (\n    <MessagePartRuntimeProvider runtime={runtime}>\n      <MessagePartComponent components={components} />\n    </MessagePartRuntimeProvider>\n  );\n};\n\nconst MessagePart = memo(\n  MessagePartImpl,\n  (prev, next) =>\n    prev.partIndex === next.partIndex &&\n    prev.components?.Text === next.components?.Text &&\n    prev.components?.Reasoning === next.components?.Reasoning &&\n    prev.components?.Source === next.components?.Source &&\n    prev.components?.Image === next.components?.Image &&\n    prev.components?.File === next.components?.File &&\n    prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&\n    prev.components?.tools === next.components?.tools &&\n    prev.components?.Group === next.components?.Group,\n);\n\nconst COMPLETE_STATUS: MessagePartStatus = Object.freeze({\n  type: \"complete\",\n});\n\nconst EmptyPartFallback: FC<{\n  status: MessagePartStatus;\n  component: TextMessagePartComponent;\n}> = ({ status, component: Component }) => {\n  return (\n    <TextMessagePartProvider text=\"\" isRunning={status.type === \"running\"}>\n      <Component type=\"text\" text=\"\" status={status} />\n    </TextMessagePartProvider>\n  );\n};\n\nconst EmptyPartsImpl: FC<MessagePartComponentProps> = ({ components }) => {\n  const status =\n    useMessage((s) => s.status as MessagePartStatus) ?? COMPLETE_STATUS;\n\n  if (components?.Empty) return <components.Empty status={status} />;\n\n  return (\n    <EmptyPartFallback\n      status={status}\n      component={components?.Text ?? defaultComponents.Text}\n    />\n  );\n};\n\nconst EmptyParts = memo(\n  EmptyPartsImpl,\n  (prev, next) =>\n    prev.components?.Empty === next.components?.Empty &&\n    prev.components?.Text === next.components?.Text,\n);\n\n/**\n * Renders the parts of a message grouped by their parent ID.\n *\n * This component automatically groups message parts that share the same parent ID,\n * allowing you to create hierarchical or related content presentations. Parts without\n * a parent ID appear after grouped parts and remain ungrouped.\n *\n * @example\n * ```tsx\n * <MessagePrimitive.Unstable_PartsGroupedByParentId\n *   components={{\n *     Text: ({ text }) => <p className=\"message-text\">{text}</p>,\n *     Image: ({ image }) => <img src={image} alt=\"Message image\" />,\n *     Group: ({ parentId, indices, children }) => {\n *       if (!parentId) return <>{children}</>;\n *       return (\n *         <div className=\"parent-group border rounded p-4\">\n *           <h4>Related Content</h4>\n *           {children}\n *         </div>\n *       );\n *     }\n *   }}\n * />\n * ```\n */\nexport const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<\n  MessagePrimitiveUnstable_PartsGroupedByParentId.Props\n> = ({ components }) => {\n  const contentLength = useMessage((s) => s.content.length);\n  const messageGroups = useMessagePartsGroupedByParentId();\n\n  const partsElements = useMemo(() => {\n    if (contentLength === 0) {\n      return <EmptyParts components={components} />;\n    }\n\n    return messageGroups.map((group, groupIndex) => {\n      const GroupComponent = components?.Group ?? defaultComponents.Group;\n\n      return (\n        <GroupComponent\n          key={`group-${groupIndex}-${group.parentId ?? \"ungrouped\"}`}\n          parentId={group.parentId}\n          indices={group.indices}\n        >\n          {group.indices.map((partIndex) => (\n            <MessagePart\n              key={partIndex}\n              partIndex={partIndex}\n              components={components}\n            />\n          ))}\n        </GroupComponent>\n      );\n    });\n  }, [messageGroups, components, contentLength]);\n\n  return <>{partsElements}</>;\n};\n\nMessagePrimitiveUnstable_PartsGroupedByParentId.displayName =\n  \"MessagePrimitive.Unstable_PartsGroupedByParentId\";\n"],"mappings":"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","names":[]}