@assistant-ui/react 0.12.8 → 0.12.10

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { getSelectionMessageId } from "../../utils/getSelectionMessageId";
+
+type SelectionInfo = {
+  text: string;
+  messageId: string;
+  rect: DOMRect;
+};
+
+const SelectionToolbarContext = createContext<SelectionInfo | null>(null);
+
+export const useSelectionToolbarInfo = () =>
+  useContext(SelectionToolbarContext);
+
+export namespace SelectionToolbarPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+/**
+ * A floating toolbar that appears when text is selected within a message.
+ *
+ * Listens for mouse and keyboard selection events, validates that the
+ * selection is within a single message, and renders a positioned portal
+ * near the selection. Prevents mousedown from clearing the selection.
+ *
+ * @example
+ * ```tsx
+ * <SelectionToolbarPrimitive.Root>
+ *   <SelectionToolbarPrimitive.Quote>Quote</SelectionToolbarPrimitive.Quote>
+ * </SelectionToolbarPrimitive.Root>
+ * ```
+ */
+export const SelectionToolbarPrimitiveRoot = forwardRef<
+  SelectionToolbarPrimitiveRoot.Element,
+  SelectionToolbarPrimitiveRoot.Props
+>(({ onMouseDown, style, ...props }, forwardedRef) => {
+  const [info, setInfo] = useState<SelectionInfo | null>(null);
+
+  useEffect(() => {
+    const checkSelection = () => {
+      requestAnimationFrame(() => {
+        const sel = window.getSelection();
+        if (!sel || sel.isCollapsed) {
+          setInfo(null);
+          return;
+        }
+
+        const text = sel.toString().trim();
+        if (!text) {
+          setInfo(null);
+          return;
+        }
+
+        const messageId = getSelectionMessageId(sel);
+        if (!messageId) {
+          setInfo(null);
+          return;
+        }
+
+        const range = sel.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        setInfo({ text, messageId, rect });
+      });
+    };
+
+    const handleSelectionCollapse = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed) {
+        setInfo(null);
+      }
+    };
+
+    const handleScroll = () => {
+      setInfo(null);
+    };
+
+    document.addEventListener("mouseup", checkSelection);
+    document.addEventListener("keyup", checkSelection);
+    document.addEventListener("selectionchange", handleSelectionCollapse);
+    document.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      document.removeEventListener("mouseup", checkSelection);
+      document.removeEventListener("keyup", checkSelection);
+      document.removeEventListener("selectionchange", handleSelectionCollapse);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+
+  if (!info) return null;
+
+  const positionStyle: React.CSSProperties = {
+    position: "fixed",
+    top: `${info.rect.top - 8}px`,
+    left: `${info.rect.left + info.rect.width / 2}px`,
+    transform: "translate(-50%, -100%)",
+    zIndex: 50,
+    ...style,
+  };
+
+  return createPortal(
+    <SelectionToolbarContext.Provider value={info}>
+      <Primitive.div
+        {...props}
+        ref={forwardedRef}
+        style={positionStyle}
+        onMouseDown={(e) => {
+          // Prevent mousedown from clearing the text selection
+          e.preventDefault();
+          onMouseDown?.(e);
+        }}
+      />
+    </SelectionToolbarContext.Provider>,
+    document.body,
+  );
+});
+
+SelectionToolbarPrimitiveRoot.displayName = "SelectionToolbarPrimitive.Root";

package/src/primitives/selectionToolbar/index.ts

@@ -0,0 +1,8 @@
+export {
+  SelectionToolbarPrimitiveRoot as Root,
+  type SelectionToolbarPrimitiveRoot,
+} from "./SelectionToolbarRoot";
+export {
+  SelectionToolbarPrimitiveQuote as Quote,
+  type SelectionToolbarPrimitiveQuote,
+} from "./SelectionToolbarQuote";

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -21,7 +21,7 @@ export const SuggestionPrimitiveDescription = forwardRef<
   SuggestionPrimitiveDescription.Element,
   SuggestionPrimitiveDescription.Props
 >((props, ref) => {
-  const label = useAuiState(({ suggestion }) => suggestion.label);
+  const label = useAuiState((s) => s.suggestion.label);
 
   return (
     <Primitive.span {...props} ref={ref}>

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -21,7 +21,7 @@ export const SuggestionPrimitiveTitle = forwardRef<
   SuggestionPrimitiveTitle.Element,
   SuggestionPrimitiveTitle.Props
 >((props, ref) => {
-  const title = useAuiState(({ suggestion }) => suggestion.title);
+  const title = useAuiState((s) => s.suggestion.title);
 
   return (
     <Primitive.span {...props} ref={ref}>

package/src/primitives/suggestion/SuggestionTrigger.tsx

@@ -28,8 +28,8 @@ const useSuggestionTrigger = ({
   clearComposer?: boolean | undefined;
 }) => {
   const aui = useAui();
-  const disabled = useAuiState(({ thread }) => thread.isDisabled);
-  const prompt = useAuiState(({ suggestion }) => suggestion.prompt);
+  const disabled = useAuiState((s) => s.thread.isDisabled);
+  const prompt = useAuiState((s) => s.suggestion.prompt);
 
   const resolvedSend = send ?? false;
 
@@ -37,7 +37,10 @@ const useSuggestionTrigger = ({
     const isRunning = aui.thread().getState().isRunning;
 
     if (resolvedSend && !isRunning) {
-      aui.thread().append(prompt);
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
       if (clearComposer) {
         aui.composer().setText("");
       }

package/src/primitives/thread/ThreadEmpty.tsx

@@ -11,7 +11,7 @@ export const ThreadPrimitiveEmpty: FC<ThreadPrimitiveEmpty.Props> = ({
   children,
 }) => {
   const empty = useAuiState(
-    ({ thread }) => thread.messages.length === 0 && !thread.isLoading,
+    (s) => s.thread.messages.length === 0 && !s.thread.isLoading,
   );
   return empty ? children : null;
 };

package/src/primitives/thread/ThreadIf.tsx

@@ -13,14 +13,14 @@ type ThreadIfFilters = {
 type UseThreadIfProps = RequireAtLeastOne<ThreadIfFilters>;
 
 const useThreadIf = (props: UseThreadIfProps) => {
-  return useAuiState(({ thread }) => {
-    if (props.empty === true && !thread.isEmpty) return false;
-    if (props.empty === false && thread.isEmpty) return false;
-
-    if (props.running === true && !thread.isRunning) return false;
-    if (props.running === false && thread.isRunning) return false;
-    if (props.disabled === true && !thread.isDisabled) return false;
-    if (props.disabled === false && thread.isDisabled) return false;
+  return useAuiState((s) => {
+    if (props.empty === true && !s.thread.isEmpty) return false;
+    if (props.empty === false && s.thread.isEmpty) return false;
+
+    if (props.running === true && !s.thread.isRunning) return false;
+    if (props.running === false && s.thread.isRunning) return false;
+    if (props.disabled === true && !s.thread.isDisabled) return false;
+    if (props.disabled === false && s.thread.isDisabled) return false;
 
     return true;
   });

package/src/primitives/thread/ThreadMessages.tsx

@@ -129,8 +129,8 @@ type ThreadMessageComponentProps = {
 const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
   components,
 }) => {
-  const role = useAuiState(({ message }) => message.role);
-  const isEditing = useAuiState(({ message }) => message.composer.isEditing);
+  const role = useAuiState((s) => s.message.role);
+  const isEditing = useAuiState((s) => s.message.composer.isEditing);
   const Component = getComponent(components, role, isEditing);
 
   return <Component />;
@@ -196,7 +196,7 @@ ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
 export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
   components,
 }) => {
-  const messagesLength = useAuiState(({ thread }) => thread.messages.length);
+  const messagesLength = useAuiState((s) => s.thread.messages.length);
 
   const messageElements = useMemo(() => {
     if (messagesLength === 0) return null;

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -40,7 +40,7 @@ const useThreadSuggestion = ({
   method?: "replace";
 }) => {
   const aui = useAui();
-  const disabled = useAuiState(({ thread }) => thread.isDisabled);
+  const disabled = useAuiState((s) => s.thread.isDisabled);
 
   // ========== Deprecation Mapping ==========
   const resolvedSend = send ?? autoSend ?? false;
@@ -50,7 +50,10 @@ const useThreadSuggestion = ({
     const isRunning = aui.thread().getState().isRunning;
 
     if (resolvedSend && !isRunning) {
-      aui.thread().append(prompt);
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
       if (clearComposer) {
         aui.composer().setText("");
       }

package/src/primitives/thread/ThreadSuggestions.tsx

@@ -84,7 +84,7 @@ export const ThreadPrimitiveSuggestionsImpl: FC<
   ThreadPrimitiveSuggestions.Props
 > = ({ components }) => {
   const suggestionsLength = useAuiState(
-    ({ suggestions }) => suggestions.suggestions.length,
+    (s) => s.suggestions.suggestions.length,
   );
 
   const suggestionElements = useMemo(() => {

package/src/primitives/thread/ThreadViewportSlack.tsx

@@ -59,11 +59,11 @@ export const ThreadPrimitiveViewportSlack: FC<ThreadViewportSlackProps> = ({
 }) => {
   const shouldApplySlack = useAuiState(
     // only add slack to the last assistant message following a user message (valid turn)
-    ({ thread, message }) =>
-      message.isLast &&
-      message.role === "assistant" &&
-      message.index >= 1 &&
-      thread.messages.at(message.index - 1)?.role === "user",
+    (s) =>
+      s.message.isLast &&
+      s.message.role === "assistant" &&
+      s.message.index >= 1 &&
+      s.thread.messages.at(s.message.index - 1)?.role === "user",
   );
   const threadViewportStore = useThreadViewportStore({ optional: true });
   const isNested = useContext(SlackNestingContext);

package/src/primitives/threadList/ThreadListItems.tsx

@@ -60,8 +60,8 @@ export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
   archived = false,
   components,
 }) => {
-  const contentLength = useAuiState(({ threads }) =>
-    archived ? threads.archivedThreadIds.length : threads.threadIds.length,
+  const contentLength = useAuiState((s) =>
+    archived ? s.threads.archivedThreadIds.length : s.threads.threadIds.length,
   );
 
   const listElements = useMemo(() => {

package/src/primitives/threadList/ThreadListNew.tsx

@@ -19,7 +19,7 @@ export const ThreadListPrimitiveNew = forwardRef<
   ThreadListPrimitiveNew.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
   const isMain = useAuiState(
-    ({ threads }) => threads.newThreadId === threads.mainThreadId,
+    (s) => s.threads.newThreadId === s.threads.mainThreadId,
   );
 
   const aui = useAui();

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -16,7 +16,7 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
   ThreadListItemPrimitiveRoot.Props
 >((props, ref) => {
   const isMain = useAuiState(
-    ({ threads, threadListItem }) => threads.mainThreadId === threadListItem.id,
+    (s) => s.threads.mainThreadId === s.threadListItem.id,
   );
 
   return (

package/src/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -12,7 +12,7 @@ export namespace ThreadListItemPrimitiveTitle {
 export const ThreadListItemPrimitiveTitle: FC<
   ThreadListItemPrimitiveTitle.Props
 > = ({ fallback }) => {
-  const title = useAuiState(({ threadListItem }) => threadListItem.title);
+  const title = useAuiState((s) => s.threadListItem.title);
   return <>{title || fallback}</>;
 };
 

package/src/types/QuoteTypes.ts

@@ -0,0 +1,4 @@
+export type QuoteInfo = {
+  readonly text: string;
+  readonly messageId: string;
+};

package/src/types/index.ts

@@ -52,3 +52,5 @@ export type {
 export type { ThreadListItemStatus } from "../legacy-runtime/runtime/ThreadListItemRuntime";
 
 export type { Unsubscribe } from "./Unsubscribe";
+
+export type { QuoteInfo } from "./QuoteTypes";

package/src/types/scopes/composer.ts

@@ -1,5 +1,6 @@
 import type { Attachment } from "../AttachmentTypes";
 import type { MessageRole, RunConfig } from "../AssistantTypes";
+import type { QuoteInfo } from "../QuoteTypes";
 import type { ComposerRuntime } from "../../legacy-runtime/runtime";
 import type { AttachmentMethods } from "./attachment";
 import { DictationState } from "../../legacy-runtime/runtime-cores";
@@ -20,6 +21,12 @@ export type ComposerState = {
    * Undefined when dictation is not active.
    */
   readonly dictation: DictationState | undefined;
+
+  /**
+   * The currently quoted text, if any.
+   * Undefined when no quote is set.
+   */
+  readonly quote: QuoteInfo | undefined;
 };
 
 export type ComposerMethods = {
@@ -46,6 +53,11 @@ export type ComposerMethods = {
    */
   stopDictation(): void;
 
+  /**
+   * Set a quote for the next message. Pass undefined to clear.
+   */
+  setQuote(quote: QuoteInfo | undefined): void;
+
   /** @internal */
   __internal_getRuntime?(): ComposerRuntime;
 };

package/src/utils/getSelectionMessageId.ts

@@ -0,0 +1,20 @@
+const findMessageId = (node: Node | null): string | null => {
+  let el = node instanceof HTMLElement ? node : (node?.parentElement ?? null);
+  while (el) {
+    const id = el.getAttribute("data-message-id");
+    if (id) return id;
+    el = el.parentElement;
+  }
+  return null;
+};
+
+export const getSelectionMessageId = (selection: Selection): string | null => {
+  const { anchorNode, focusNode } = selection;
+  if (!anchorNode || !focusNode) return null;
+
+  const anchorId = findMessageId(anchorNode);
+  const focusId = findMessageId(focusNode);
+
+  if (!anchorId || anchorId !== focusId) return null;
+  return anchorId;
+};

package/src/utils/smooth/useSmooth.tsx

@@ -75,7 +75,7 @@ export const useSmooth = (
   smooth: boolean = false,
 ): MessagePartState & (TextMessagePart | ReasoningMessagePart) => {
   const { text } = state;
-  const id = useAuiState(({ message }) => message.id);
+  const id = useAuiState((s) => s.message.id);
 
   const idRef = useRef(id);
   const [displayedText, setDisplayedText] = useState(text);

package/src/utils/useToolArgsFieldStatus.tsx

@@ -4,15 +4,15 @@ import { useAuiState } from "@assistant-ui/store";
 const COMPLETE_STATUS = { type: "complete" };
 
 export const useToolArgsFieldStatus = (fieldPath: (string | number)[]) => {
-  return useAuiState(({ part }) => {
-    if (part.type !== "tool-call")
+  return useAuiState((s) => {
+    if (s.part.type !== "tool-call")
       throw new Error(
         "useToolArgsFieldStatus can only be used inside tool-call message parts",
       );
 
-    const state = getPartialJsonObjectFieldState(part.args, fieldPath);
-    if (state === "complete" || part.status?.type === "requires-action")
+    const state = getPartialJsonObjectFieldState(s.part.args, fieldPath);
+    if (state === "complete" || s.part.status?.type === "requires-action")
       return COMPLETE_STATUS;
-    return part.status;
+    return s.part.status;
   });
 };

package/src/primitives/chainOfThought/CHAIN_OF_THOUGHT.spec.md

@@ -1,68 +0,0 @@
-ChainOfThought Primitive
-
-Overview
-
-- Groups consecutive reasoning and tool-call message parts into a collapsible "chain of thought" section.
-- Built on the part-scope mechanism shared with `MessagePrimitiveParts`, using `Derived` for part resolution.
-- Each part within the chain of thought gets its own part scope via `ChainOfThoughtPartByIndexProvider`.
-- Rendering is delegated to the shared `MessagePartComponent`, supporting the same component configuration as `MessagePrimitiveParts`.
-
-Architecture
-
-ChainOfThoughtState
-
-```typescript
-type ChainOfThoughtState = {
-  readonly startIndex: number; // index of the first CoT part in the parent message
-  readonly parts: readonly ChainOfThoughtPart[];
-  readonly collapsed: boolean;
-  readonly status: MessagePartStatus | ToolCallMessagePartStatus;
-};
-```
-
-ChainOfThoughtMethods
-
-```typescript
-type ChainOfThoughtMethods = {
-  getState(): ChainOfThoughtState;
-  setCollapsed(collapsed: boolean): void;
-  part(selector: { index: number }): PartMethods;
-};
-```
-
-- `part({ index })` delegates to the parent message's `part()` at offset `startIndex + index`.
-
-ChainOfThoughtClient
-
-- Resource params: `{ startIndex, parts, getMessagePart }`.
-- `getMessagePart` is a callback that resolves to the parent message's `part()` method.
-- The `part` method implementation: `({ index }) => getMessagePart({ index: startIndex + index })`.
-
-Providers
-
-ChainOfThoughtByIndicesProvider
-
-- Wraps a range of message parts (startIndex..endIndex) into a chain of thought scope.
-- Reads parts from the parent message state, passes `startIndex` and `getMessagePart` to `ChainOfThoughtClient`.
-- Used internally by `MessagePrimitiveParts` when `ChainOfThought` component is configured.
-
-ChainOfThoughtPartByIndexProvider
-
-- Follows the same pattern as `PartByIndexProvider`.
-- Reads `startIndex` from chain of thought state.
-- Creates a `Derived` part scope: `source: "message"`, `query: { type: "index", index: startIndex + index }`.
-- Delegates `get` to `aui.chainOfThought().part({ index })`.
-
-Rendering (ChainOfThoughtPrimitiveParts)
-
-- Accepts `components` prop with the same type as `MessagePrimitiveParts.Props["components"]`.
-- Reads `collapsed` and `parts.length` from chain of thought state.
-- When collapsed, renders nothing.
-- When expanded, renders each part via `ChainOfThoughtPartByIndexProvider` + `MessagePartComponent`.
-- `MessagePartComponent` is the shared rendering component exported from `MessageParts.tsx`.
-
-Integration with MessagePrimitiveParts
-
-- When `components.ChainOfThought` is set, `MessagePrimitiveParts` groups consecutive tool-call and reasoning parts into `chainOfThoughtGroup` ranges.
-- Each group is wrapped in `ChainOfThoughtByIndicesProvider`, which sets up the chain of thought scope.
-- The user's `ChainOfThought` component renders inside that scope and can use `ChainOfThoughtPrimitive.Parts` to render individual parts through the part-scope mechanism.