@assistant-ui/react 0.12.9 → 0.12.10

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";

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;
   });
 };