@assistant-ui/react 0.12.8 → 0.12.10

package/src/primitives/message/MessageParts.tsx

@@ -145,154 +145,162 @@ const useMessagePartsGroups = (
 };
 
 export namespace MessagePrimitiveParts {
+  type BaseComponents = {
+    /** Component for rendering empty messages */
+    Empty?: EmptyMessagePartComponent | undefined;
+    /** Component for rendering text content */
+    Text?: TextMessagePartComponent | 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;
+  };
+
+  type ToolsConfig =
+    | {
+        /** 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>;
+      };
+
+  /**
+   * Standard component configuration for rendering reasoning and tool-call parts
+   * individually (with optional grouping).
+   *
+   * Cannot be combined with `ChainOfThought`.
+   */
+  type StandardComponents = BaseComponents & {
+    /** Component for rendering reasoning content (typically hidden) */
+    Reasoning?: ReasoningMessagePartComponent | undefined;
+    /** Configuration for tool call rendering */
+    tools?: ToolsConfig | undefined;
+
+    /**
+     * Component for rendering grouped consecutive tool calls.
+     *
+     * When provided, this component will automatically wrap consecutive tool-call
+     * message parts, allowing you to create collapsible sections, custom styling,
+     * or other grouped presentations for multiple tool calls.
+     *
+     * The component receives:
+     * - `startIndex`: The index of the first tool call in the group
+     * - `endIndex`: The index of the last tool call in the group
+     * - `children`: The rendered tool call components
+     *
+     * @example
+     * ```tsx
+     * // Collapsible tool group
+     * ToolGroup: ({ startIndex, endIndex, children }) => (
+     *   <details className="tool-group">
+     *     <summary>
+     *       {endIndex - startIndex + 1} tool calls
+     *     </summary>
+     *     <div className="tool-group-content">
+     *       {children}
+     *     </div>
+     *   </details>
+     * )
+     * ```
+     *
+     * @param startIndex - Index of the first tool call in the group
+     * @param endIndex - Index of the last tool call in the group
+     * @param children - Rendered tool call components to display within the group
+     *
+     * @deprecated This feature is still experimental and subject to change.
+     */
+    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;
+
+    ChainOfThought?: never;
+  };
+
+  /**
+   * Chain of thought component configuration.
+   *
+   * When `ChainOfThought` is set, it takes control of rendering ALL reasoning and
+   * tool-call parts in the message. The `Reasoning`, `tools`, `ReasoningGroup`, and
+   * `ToolGroup` components cannot be used alongside it.
+   *
+   * The component is automatically wrapped in a ChainOfThoughtByIndicesProvider
+   * that sets up the chainOfThought client scope with the correct parts.
+   *
+   * @example
+   * ```tsx
+   * // Chain of thought with accordion
+   * ChainOfThought: () => (
+   *   <ChainOfThoughtPrimitive.Root>
+   *     <ChainOfThoughtPrimitive.AccordionTrigger>
+   *       Toggle reasoning
+   *     </ChainOfThoughtPrimitive.AccordionTrigger>
+   *     <ChainOfThoughtPrimitive.Parts />
+   *   </ChainOfThoughtPrimitive.Root>
+   * )
+   * ```
+   */
+  type ChainOfThoughtComponents = BaseComponents & {
+    ChainOfThought: ComponentType;
+
+    Reasoning?: never;
+    tools?: never;
+    ToolGroup?: never;
+    ReasoningGroup?: never;
+  };
+
   export 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.
+     *
+     * Use either `Reasoning`/`tools`/`ToolGroup`/`ReasoningGroup` for standard rendering,
+     * or `ChainOfThought` to group all reasoning and tool-call parts into a single
+     * collapsible component. These two modes are mutually exclusive.
      */
-    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 consecutive tool calls.
-           *
-           * When provided, this component will automatically wrap consecutive tool-call
-           * message parts, allowing you to create collapsible sections, custom styling,
-           * or other grouped presentations for multiple tool calls.
-           *
-           * The component receives:
-           * - `startIndex`: The index of the first tool call in the group
-           * - `endIndex`: The index of the last tool call in the group
-           * - `children`: The rendered tool call components
-           *
-           * @example
-           * ```tsx
-           * // Collapsible tool group
-           * ToolGroup: ({ startIndex, endIndex, children }) => (
-           *   <details className="tool-group">
-           *     <summary>
-           *       {endIndex - startIndex + 1} tool calls
-           *     </summary>
-           *     <div className="tool-group-content">
-           *       {children}
-           *     </div>
-           *   </details>
-           * )
-           * ```
-           *
-           * @example
-           * ```tsx
-           * // Custom styled tool group with header
-           * ToolGroup: ({ startIndex, endIndex, children }) => (
-           *   <div className="border rounded-lg p-4 my-2">
-           *     <div className="text-sm text-gray-600 mb-2">
-           *       Tool execution #{startIndex + 1}-{endIndex + 1}
-           *     </div>
-           *     <div className="space-y-2">
-           *       {children}
-           *     </div>
-           *   </div>
-           * )
-           * ```
-           *
-           * @param startIndex - Index of the first tool call in the group
-           * @param endIndex - Index of the last tool call in the group
-           * @param children - Rendered tool call components to display within the group
-           *
-           * @deprecated This feature is still experimental and subject to change.
-           */
-          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;
-
-          /**
-           * Component for rendering chain of thought (reasoning + tool-call) parts.
-           *
-           * When provided, this component takes control of rendering ALL reasoning and
-           * tool-call parts in the message. The Reasoning, tools, ReasoningGroup, and
-           * ToolGroup components are completely ignored when ChainOfThought is set.
-           *
-           * The component is automatically wrapped in a ChainOfThoughtByIndicesProvider
-           * that sets up the chainOfThought client scope with the correct parts.
-           *
-           * @example
-           * ```tsx
-           * // Chain of thought with accordion
-           * ChainOfThought: () => (
-           *   <ChainOfThoughtPrimitive.Root>
-           *     <ChainOfThoughtPrimitive.AccordionTrigger>
-           *       Toggle reasoning
-           *     </ChainOfThoughtPrimitive.AccordionTrigger>
-           *     <ChainOfThoughtPrimitive.Parts />
-           *   </ChainOfThoughtPrimitive.Root>
-           * )
-           * ```
-           */
-          ChainOfThought?: ComponentType;
-        }
-      | undefined;
+    components?: StandardComponents | ChainOfThoughtComponents | undefined;
     /**
      * When enabled, shows the Empty component if the last part in the message
      * is anything other than Text or Reasoning.
@@ -313,8 +321,8 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAuiState(({ tools }) => {
-    const Render = tools.tools[props.toolName] ?? Fallback;
+  const Render = useAuiState((s) => {
+    const Render = s.tools.tools[props.toolName] ?? Fallback;
     if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
@@ -356,7 +364,7 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
   } = {},
 }) => {
   const aui = useAui();
-  const part = useAuiState(({ part }) => part);
+  const part = useAuiState((s) => s.part);
 
   const type = part.type;
   if (type === "tool-call") {
@@ -495,11 +503,11 @@ const ConditionalEmptyImpl: FC<{
   components: MessagePrimitiveParts.Props["components"];
   enabled: boolean;
 }> = ({ components, enabled }) => {
-  const shouldShowEmpty = useAuiState(({ message }) => {
+  const shouldShowEmpty = useAuiState((s) => {
     if (!enabled) return false;
-    if (message.parts.length === 0) return false;
+    if (s.message.parts.length === 0) return false;
 
-    const lastPart = message.parts[message.parts.length - 1];
+    const lastPart = s.message.parts[s.message.parts.length - 1];
     return lastPart?.type !== "text" && lastPart?.type !== "reasoning";
   });
 
@@ -543,7 +551,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
   components,
   unstable_showEmptyOnNonTextEnd = true,
 }) => {
-  const contentLength = useAuiState(({ message }) => message.parts.length);
+  const contentLength = useAuiState((s) => s.message.parts.length);
   const useChainOfThought = !!components?.ChainOfThought;
   const messageRanges = useMessagePartsGroups(useChainOfThought);
 

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -74,7 +74,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
 const useMessagePartsGrouped = (
   groupingFunction: GroupingFunction,
 ): MessagePartGroup[] => {
-  const parts = useAuiState(({ message }) => message.parts);
+  const parts = useAuiState((s) => s.message.parts);
 
   return useMemo(() => {
     if (parts.length === 0) {
@@ -219,8 +219,8 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAuiState(({ tools }) => {
-    const Render = tools.tools[props.toolName] ?? Fallback;
+  const Render = useAuiState((s) => {
+    const Render = s.tools.tools[props.toolName] ?? Fallback;
     if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
@@ -261,7 +261,7 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
   } = {},
 }) => {
   const aui = useAui();
-  const part = useAuiState(({ part }) => part);
+  const part = useAuiState((s) => s.part);
 
   const type = part.type;
   if (type === "tool-call") {
@@ -426,7 +426,7 @@ const EmptyParts = memo(
 export const MessagePrimitiveUnstable_PartsGrouped: FC<
   MessagePrimitiveUnstable_PartsGrouped.Props
 > = ({ groupingFunction, components }) => {
-  const contentLength = useAuiState(({ message }) => message.parts.length);
+  const contentLength = useAuiState((s) => s.message.parts.length);
   const messageGroups = useMessagePartsGrouped(groupingFunction);
 
   const partsElements = useMemo(() => {

package/src/primitives/message/MessageRoot.tsx

@@ -60,11 +60,11 @@ const useMessageViewportRef = () => {
   // inset rules:
   // - the previous user message before the last assistant message registers its full height
   const shouldRegisterAsInset = useAuiState(
-    ({ thread, message }) =>
+    (s) =>
       turnAnchor === "top" &&
-      message.role === "user" &&
-      message.index === thread.messages.length - 2 &&
-      thread.messages.at(-1)?.role === "assistant",
+      s.message.role === "user" &&
+      s.message.index === s.thread.messages.length - 2 &&
+      s.thread.messages.at(-1)?.role === "assistant",
   );
 
   const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);
@@ -116,10 +116,11 @@ export const MessagePrimitiveRoot = forwardRef<
     isHoveringRef,
     anchorUserMessageRef,
   );
+  const messageId = useAuiState((s) => s.message.id);
 
   return (
     <ThreadPrimitiveViewportSlack>
-      <Primitive.div {...props} ref={ref} />
+      <Primitive.div {...props} ref={ref} data-message-id={messageId} />
     </ThreadPrimitiveViewportSlack>
   );
 });

package/src/primitives/messagePart/MessagePartInProgress.tsx

@@ -11,9 +11,7 @@ export namespace MessagePartPrimitiveInProgress {
 export const MessagePartPrimitiveInProgress: FC<
   MessagePartPrimitiveInProgress.Props
 > = ({ children }) => {
-  const isInProgress = useAuiState(
-    ({ part }) => part.status.type === "running",
-  );
+  const isInProgress = useAuiState((s) => s.part.status.type === "running");
 
   return isInProgress ? children : null;
 };

package/src/primitives/messagePart/useMessagePartData.tsx

@@ -4,11 +4,11 @@ import { useAuiState } from "@assistant-ui/store";
 import { DataMessagePart } from "../../types";
 
 export const useMessagePartData = <T = any>(name?: string) => {
-  const part = useAuiState(({ part }) => {
-    if (part.type !== "data") {
+  const part = useAuiState((s) => {
+    if (s.part.type !== "data") {
       return null;
     }
-    return part as DataMessagePart<T>;
+    return s.part as DataMessagePart<T>;
   });
 
   if (!part) {

package/src/primitives/messagePart/useMessagePartFile.tsx

@@ -5,13 +5,13 @@ import { useAuiState } from "@assistant-ui/store";
 import { FileMessagePart } from "../../types";
 
 export const useMessagePartFile = () => {
-  const file = useAuiState(({ part }) => {
-    if (part.type !== "file")
+  const file = useAuiState((s) => {
+    if (s.part.type !== "file")
       throw new Error(
         "MessagePartFile can only be used inside file message parts.",
       );
 
-    return part as MessagePartState & FileMessagePart;
+    return s.part as MessagePartState & FileMessagePart;
   });
 
   return file;

package/src/primitives/messagePart/useMessagePartImage.tsx

@@ -5,13 +5,13 @@ import { useAuiState } from "@assistant-ui/store";
 import { ImageMessagePart } from "../../types";
 
 export const useMessagePartImage = () => {
-  const image = useAuiState(({ part }) => {
-    if (part.type !== "image")
+  const image = useAuiState((s) => {
+    if (s.part.type !== "image")
       throw new Error(
         "MessagePartImage can only be used inside image message parts.",
       );
 
-    return part as MessagePartState & ImageMessagePart;
+    return s.part as MessagePartState & ImageMessagePart;
   });
 
   return image;

package/src/primitives/messagePart/useMessagePartReasoning.tsx

@@ -5,13 +5,13 @@ import { useAuiState } from "@assistant-ui/store";
 import { ReasoningMessagePart } from "../../types";
 
 export const useMessagePartReasoning = () => {
-  const text = useAuiState(({ part }) => {
-    if (part.type !== "reasoning")
+  const text = useAuiState((s) => {
+    if (s.part.type !== "reasoning")
       throw new Error(
         "MessagePartReasoning can only be used inside reasoning message parts.",
       );
 
-    return part as MessagePartState & ReasoningMessagePart;
+    return s.part as MessagePartState & ReasoningMessagePart;
   });
 
   return text;

package/src/primitives/messagePart/useMessagePartSource.tsx

@@ -5,13 +5,13 @@ import { useAuiState } from "@assistant-ui/store";
 import { SourceMessagePart } from "../../types";
 
 export const useMessagePartSource = () => {
-  const source = useAuiState(({ part }) => {
-    if (part.type !== "source")
+  const source = useAuiState((s) => {
+    if (s.part.type !== "source")
       throw new Error(
         "MessagePartSource can only be used inside source message parts.",
       );
 
-    return part as MessagePartState & SourceMessagePart;
+    return s.part as MessagePartState & SourceMessagePart;
   });
 
   return source;

package/src/primitives/messagePart/useMessagePartText.tsx

@@ -5,13 +5,14 @@ import { useAuiState } from "@assistant-ui/store";
 import { TextMessagePart, ReasoningMessagePart } from "../../types";
 
 export const useMessagePartText = () => {
-  const text = useAuiState(({ part }) => {
-    if (part.type !== "text" && part.type !== "reasoning")
+  const text = useAuiState((s) => {
+    if (s.part.type !== "text" && s.part.type !== "reasoning")
       throw new Error(
         "MessagePartText can only be used inside text or reasoning message parts.",
       );
 
-    return part as MessagePartState & (TextMessagePart | ReasoningMessagePart);
+    return s.part as MessagePartState &
+      (TextMessagePart | ReasoningMessagePart);
   });
 
   return text;

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+  useCallback,
+} from "react";
+import { useAui } from "@assistant-ui/store";
+import { useSelectionToolbarInfo } from "./SelectionToolbarRoot";
+
+export namespace SelectionToolbarPrimitiveQuote {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+/**
+ * A button that quotes the currently selected text.
+ *
+ * Must be placed inside `SelectionToolbarPrimitive.Root`. Reads the
+ * selection info from context (captured by the Root), sets it as a
+ * quote in the thread composer, and clears the selection.
+ *
+ * @example
+ * ```tsx
+ * <SelectionToolbarPrimitive.Quote>
+ *   <QuoteIcon /> Quote
+ * </SelectionToolbarPrimitive.Quote>
+ * ```
+ */
+export const SelectionToolbarPrimitiveQuote = forwardRef<
+  SelectionToolbarPrimitiveQuote.Element,
+  SelectionToolbarPrimitiveQuote.Props
+>(({ onClick, disabled, ...props }, forwardedRef) => {
+  const aui = useAui();
+  const info = useSelectionToolbarInfo();
+
+  const handleClick = useCallback(() => {
+    if (!info) return;
+
+    aui.thread().composer.setQuote({
+      text: info.text,
+      messageId: info.messageId,
+    });
+
+    window.getSelection()?.removeAllRanges();
+  }, [aui, info]);
+
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !info}
+      onClick={composeEventHandlers(onClick, handleClick)}
+    />
+  );
+});
+
+SelectionToolbarPrimitiveQuote.displayName = "SelectionToolbarPrimitive.Quote";