@assistant-ui/react 0.15.15 → 0.15.17

package/src/primitives/composer/trigger/TriggerPopoverRootContext.tsx

@@ -16,9 +16,11 @@ import {
 } from "../ComposerInputPluginContext";
 import type { TriggerPopoverResourceOutput } from "./TriggerPopoverResource";
 import type { TriggerBehavior } from "./triggerSelectionResource";
+import type { TriggerMatcher } from "./detectTrigger";
 
 export type RegisteredTrigger = {
   readonly char: string;
+  readonly matcher?: TriggerMatcher | undefined;
   /** Behavior contributed by a child `TriggerPopover.Directive` / `.Action`. */
   readonly behavior?: TriggerBehavior;
   readonly resource: TriggerPopoverResourceOutput;

package/src/primitives/composer/trigger/detectTrigger.test.ts

@@ -1,11 +1,27 @@
 import { describe, it, expect } from "vitest";
-import { detectTrigger } from "./detectTrigger";
+import { detectTrigger, type TriggerMatcher } from "./detectTrigger";
+
+const matchFromLastTrigger: TriggerMatcher = (
+  text,
+  triggerChar,
+  cursorPosition,
+) => {
+  const textUpToCursor = text.slice(0, cursorPosition);
+  const offset = textUpToCursor.lastIndexOf(triggerChar);
+  if (offset === -1) return null;
+  return {
+    query: textUpToCursor.slice(offset + triggerChar.length),
+    offset,
+    endOffset: cursorPosition,
+  };
+};
 
 describe("detectTrigger", () => {
   it("detects @query at cursor position", () => {
     expect(detectTrigger("hello @wea", "@", 10)).toEqual({
       query: "wea",
       offset: 6,
+      endOffset: 10,
     });
   });
 
@@ -25,14 +41,76 @@ describe("detectTrigger", () => {
     expect(detectTrigger("@foo", "@", 4)).toEqual({
       query: "foo",
       offset: 0,
+      endOffset: 4,
     });
   });
 
   it("stops at whitespace in query", () => {
-    // "@foo bar" — space terminates the mention
     expect(detectTrigger("@foo bar", "@", 8)).toBeNull();
   });
 
+  it("uses a custom matcher for multi-word queries", () => {
+    expect(
+      detectTrigger("hello @Example UK", "@", 17, matchFromLastTrigger),
+    ).toEqual({
+      query: "Example UK",
+      offset: 6,
+      endOffset: 17,
+    });
+  });
+
+  it("keeps a matcher endOffset that is not the query length", () => {
+    const matchNormalized: TriggerMatcher = (
+      text,
+      triggerChar,
+      cursorPosition,
+    ) => {
+      const textUpToCursor = text.slice(0, cursorPosition);
+      const offset = textUpToCursor.lastIndexOf(triggerChar);
+      if (offset === -1) return null;
+      return {
+        query: "example",
+        offset,
+        endOffset: cursorPosition,
+      };
+    };
+
+    expect(
+      detectTrigger("hello @Example UK", "@", 17, matchNormalized),
+    ).toEqual({
+      query: "example",
+      offset: 6,
+      endOffset: 17,
+    });
+  });
+
+  it("rejects a matcher whose offset is not the trigger", () => {
+    const match: TriggerMatcher = () => ({
+      query: "x",
+      offset: 0,
+      endOffset: 2,
+    });
+    expect(detectTrigger("hello @x", "@", 8, match)).toBeNull();
+  });
+
+  it("rejects a matcher that matches at the caret", () => {
+    const match: TriggerMatcher = () => ({
+      query: "",
+      offset: 6,
+      endOffset: 7,
+    });
+    expect(detectTrigger("hello @foo", "@", 6, match)).toBeNull();
+  });
+
+  it("rejects a matcher whose endOffset is inside the trigger", () => {
+    const match: TriggerMatcher = () => ({
+      query: "",
+      offset: 6,
+      endOffset: 6,
+    });
+    expect(detectTrigger("hello @foo", "@", 10, match)).toBeNull();
+  });
+
   it("stops at newline", () => {
     expect(detectTrigger("@foo\nbar", "@", 8)).toBeNull();
   });
@@ -45,20 +123,19 @@ describe("detectTrigger", () => {
     expect(detectTrigger("hello\t@foo", "@", 10)).toEqual({
       query: "foo",
       offset: 6,
+      endOffset: 10,
     });
   });
 
   it("finds trigger closest to cursor, not earlier ones", () => {
-    // Text has two @: "hello @old text @new"
-    // Cursor at end → should find @new
     expect(detectTrigger("hello @old text @new", "@", 20)).toEqual({
       query: "new",
       offset: 16,
+      endOffset: 20,
     });
   });
 
   it("ignores trigger after cursor", () => {
-    // Cursor at position 5, trigger at position 10
     expect(detectTrigger("hello text @foo", "@", 5)).toBeNull();
   });
 
@@ -66,6 +143,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("hello @@foo", "@@", 11)).toEqual({
       query: "foo",
       offset: 6,
+      endOffset: 11,
     });
   });
 
@@ -73,6 +151,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("hello @", "@", 7)).toEqual({
       query: "",
       offset: 6,
+      endOffset: 7,
     });
   });
 
@@ -80,6 +159,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("全角\u3000@foo", "@", 7)).toEqual({
       query: "foo",
       offset: 3,
+      endOffset: 7,
     });
   });
 
@@ -87,6 +167,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("x\u00A0@foo", "@", 6)).toEqual({
       query: "foo",
       offset: 2,
+      endOffset: 6,
     });
   });
 
@@ -98,6 +179,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("hello\u3000@foo", "@", 10)).toEqual({
       query: "foo",
       offset: 6,
+      endOffset: 10,
     });
   });
 
@@ -105,6 +187,7 @@ describe("detectTrigger", () => {
     expect(detectTrigger("hello\u00a0@foo", "@", 10)).toEqual({
       query: "foo",
       offset: 6,
+      endOffset: 10,
     });
   });
 

package/src/primitives/composer/trigger/detectTrigger.ts

@@ -1,5 +1,43 @@
 const WHITESPACE_RE = /\s/u;
 
+export type TriggerMatch = {
+  readonly query: string;
+  readonly offset: number;
+  readonly endOffset: number;
+};
+
+/**
+ * Locates a trigger query in `text` relative to `cursorPosition`.
+ *
+ * `offset` is the index of `triggerChar`. `endOffset` is the exclusive end of
+ * the span both the textarea and Lexical replace on select. `query` is the
+ * search string and may differ from that span.
+ *
+ * Return null when the caret is at or before the trigger. Escape moves the
+ * caret to `offset` so a match there would reopen the popover.
+ */
+export type TriggerMatcher = (
+  text: string,
+  triggerChar: string,
+  cursorPosition: number,
+) => TriggerMatch | null;
+
+export function resolveTriggerMatch(
+  text: string,
+  triggerChar: string,
+  cursorPosition: number,
+  match: TriggerMatch | null,
+): TriggerMatch | null {
+  if (match === null) return null;
+  const { query, offset, endOffset } = match;
+  if (offset < 0 || offset + triggerChar.length > cursorPosition) return null;
+  if (!text.startsWith(triggerChar, offset)) return null;
+  if (endOffset < offset + triggerChar.length || endOffset > text.length) {
+    return null;
+  }
+  return { query, offset, endOffset };
+}
+
 /**
  * Detect a trigger character in text relative to the cursor position.
  *
@@ -9,27 +47,30 @@ export function detectTrigger(
   text: string,
   triggerChar: string,
   cursorPosition: number,
-): {
-  query: string;
-  offset: number;
-} | null {
-  // Only consider text up to the cursor
+  matcher?: TriggerMatcher | undefined,
+): TriggerMatch | null {
+  if (matcher) {
+    return resolveTriggerMatch(
+      text,
+      triggerChar,
+      cursorPosition,
+      matcher(text, triggerChar, cursorPosition),
+    );
+  }
+
   const textUpToCursor = text.slice(0, cursorPosition);
 
-  // Search backwards from cursor for the trigger character.
-  // Stop at any whitespace during scan — trigger must be contiguous with cursor.
   for (let i = textUpToCursor.length - 1; i >= 0; i--) {
     const char = textUpToCursor[i]!;
 
     if (WHITESPACE_RE.test(char)) return null;
 
     if (textUpToCursor.startsWith(triggerChar, i)) {
-      // Trigger must be preceded by whitespace or be at start of text
       if (i > 0 && !WHITESPACE_RE.test(textUpToCursor[i - 1]!)) continue;
 
       const query = textUpToCursor.slice(i + triggerChar.length);
 
-      return { query, offset: i };
+      return { query, offset: i, endOffset: cursorPosition };
     }
   }
 

package/src/primitives/composer/trigger/index.ts

@@ -21,6 +21,7 @@ export {
 } from "./TriggerPopoverItems";
 export { ComposerPrimitiveTriggerPopoverBack } from "./TriggerPopoverBack";
 export type { TriggerBehavior } from "./triggerSelectionResource";
+export type { TriggerMatch, TriggerMatcher } from "./detectTrigger";
 
 import { ComposerPrimitiveTriggerPopover as Base } from "./TriggerPopover";
 import { ComposerPrimitiveTriggerPopoverAction } from "./TriggerPopoverAction";

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -1,12 +1,13 @@
 import { useMemo, useState } from "react";
 import { resource } from "@assistant-ui/tap";
-import { detectTrigger } from "./detectTrigger";
+import {
+  detectTrigger,
+  type TriggerMatch,
+  type TriggerMatcher,
+} from "./detectTrigger";
 
 /** Detected trigger position within the composer text. */
-export type DetectedTrigger = {
-  readonly offset: number;
-  readonly query: string;
-};
+export type DetectedTrigger = TriggerMatch;
 
 export type TriggerDetectionResourceOutput = {
   /** Detected trigger (or `null` when inactive). */
@@ -21,16 +22,18 @@ export type TriggerDetectionResourceOutput = {
 const useTriggerDetectionResource = ({
   text,
   triggerChar,
+  matcher,
 }: {
   text: string;
   triggerChar: string;
+  matcher?: TriggerMatcher | undefined;
 }): TriggerDetectionResourceOutput => {
   const [cursorPosition, setCursorPosition] = useState(text.length);
 
   const trigger = useMemo(() => {
     const pos = Math.min(cursorPosition, text.length);
-    return detectTrigger(text, triggerChar, pos);
-  }, [cursorPosition, text, triggerChar]);
+    return detectTrigger(text, triggerChar, pos, matcher);
+  }, [cursorPosition, matcher, text, triggerChar]);
 
   const query = trigger?.query ?? "";
 

package/src/primitives/composer/trigger/triggerSelectionResource.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from "vitest";
+import { createTapRoot, flushTapSync, useResource } from "@assistant-ui/tap";
+import type {
+  Unstable_DirectiveFormatter,
+  Unstable_TriggerItem,
+} from "@assistant-ui/core";
+import type { AssistantClient } from "@assistant-ui/store";
+import { TriggerDetectionResource } from "./triggerDetectionResource";
+import {
+  TriggerSelectionResource,
+  type TriggerBehavior,
+} from "./triggerSelectionResource";
+
+const item: Unstable_TriggerItem = {
+  id: "file",
+  type: "file",
+  label: "file.txt",
+};
+
+const formatter: Unstable_DirectiveFormatter = {
+  serialize: () => "@file.txt",
+  parse: () => [],
+};
+
+const makeAui = (textRef: { value: string }) => {
+  const setText = vi.fn((value: string) => {
+    textRef.value = value;
+  });
+
+  return {
+    aui: {
+      composer: {
+        getState: () => ({ text: textRef.value }),
+        setText,
+      },
+    } as unknown as AssistantClient,
+    setText,
+  };
+};
+
+const render = ({
+  behavior,
+  text,
+  trigger,
+}: {
+  behavior: TriggerBehavior;
+  text: string;
+  trigger: { offset: number; query: string; endOffset: number };
+}) => {
+  const textRef = { value: text };
+  const { aui, setText } = makeAui(textRef);
+  const setCursorPosition = vi.fn();
+  const onSelected = vi.fn();
+  const root = createTapRoot(function Root() {
+    return useResource(
+      TriggerSelectionResource({
+        behavior,
+        trigger,
+        aui,
+        triggerChar: "@",
+        setCursorPosition,
+        onSelected,
+      }),
+    );
+  });
+
+  return { root, setText, setCursorPosition, onSelected };
+};
+
+describe("TriggerSelectionResource", () => {
+  it("resynchronizes the cursor after inserting a directive", () => {
+    const { root, setText, setCursorPosition, onSelected } = render({
+      behavior: { kind: "directive", formatter },
+      text: "@file tail",
+      trigger: { offset: 0, query: "file", endOffset: 5 },
+    });
+
+    root.getValue().selectItem(item);
+
+    expect(setText).toHaveBeenCalledWith("@file.txt tail");
+    expect(setCursorPosition).toHaveBeenCalledWith("@file.txt".length + 1);
+    expect(onSelected).toHaveBeenCalledOnce();
+  });
+
+  it("resynchronizes the cursor after removing an action", () => {
+    const { root, setText, setCursorPosition } = render({
+      behavior: {
+        kind: "action",
+        formatter,
+        onExecute: vi.fn(),
+        removeOnExecute: true,
+      },
+      text: "before @file tail",
+      trigger: { offset: 7, query: "file", endOffset: 12 },
+    });
+
+    root.getValue().selectItem(item);
+
+    expect(setText).toHaveBeenCalledWith("before tail");
+    expect(setCursorPosition).toHaveBeenCalledWith(7);
+  });
+
+  it("does not rewrite composer text on a second select after insertion", () => {
+    const textRef = { value: "@fil" };
+    const { aui, setText } = makeAui(textRef);
+    const onSelected = vi.fn();
+    const root = createTapRoot(function Root() {
+      const detection = useResource(
+        TriggerDetectionResource({
+          text: textRef.value,
+          triggerChar: "@",
+        }),
+      );
+      return useResource(
+        TriggerSelectionResource({
+          behavior: { kind: "directive", formatter },
+          trigger: detection.trigger,
+          aui,
+          triggerChar: "@",
+          setCursorPosition: detection.setCursorPosition,
+          onSelected,
+        }),
+      );
+    });
+
+    flushTapSync(() => {
+      root.getValue().selectItem(item);
+    });
+    root.getValue().selectItem(item);
+
+    expect(setText).toHaveBeenCalledOnce();
+    expect(setText).toHaveBeenCalledWith("@file.txt ");
+    expect(textRef.value).toBe("@file.txt ");
+  });
+
+  it("replaces the matcher endOffset even when query is shorter", () => {
+    const { root, setText } = render({
+      behavior: { kind: "directive", formatter },
+      text: "hello @Example UK tail",
+      trigger: { offset: 6, query: "example", endOffset: 17 },
+    });
+
+    root.getValue().selectItem(item);
+
+    expect(setText).toHaveBeenCalledWith("hello @file.txt tail");
+  });
+});

package/src/primitives/composer/trigger/triggerSelectionResource.ts

@@ -37,7 +37,6 @@ const useTriggerSelectionResource = ({
   behavior,
   trigger,
   aui,
-  triggerChar,
   setCursorPosition,
   onSelected,
 }: {
@@ -74,15 +73,14 @@ const useTriggerSelectionResource = ({
 
     const currentText = aui.composer.getState().text;
     const before = currentText.slice(0, trigger.offset);
-    const after = currentText.slice(
-      trigger.offset + triggerChar.length + trigger.query.length,
-    );
+    const after = currentText.slice(trigger.endOffset);
 
     const insertDirective = () => {
       const directive = behavior.formatter.serialize(item);
       aui.composer.setText(
         before + directive + (after.startsWith(" ") ? after : ` ${after}`),
       );
+      setCursorPosition(before.length + directive.length + 1);
     };
 
     if (behavior.kind === "directive") {
@@ -93,6 +91,7 @@ const useTriggerSelectionResource = ({
         aui.composer.setText(
           before + (after.startsWith(" ") ? after.slice(1) : after),
         );
+        setCursorPosition(before.length);
       } else {
         // Leave directive chip in the composer as an audit trail
         insertDirective();

package/src/primitives/composer.ts

@@ -29,3 +29,4 @@ export { useTriggerPopoverScopeContextOptional as unstable_useTriggerPopoverScop
 export { useTriggerPopoverTriggers as unstable_useTriggerPopoverTriggers } from "./composer/trigger";
 export { useTriggerPopoverTriggersOptional as unstable_useTriggerPopoverTriggersOptional } from "./composer/trigger";
 export type { RegisteredTrigger as Unstable_RegisteredTrigger } from "./composer/trigger";
+export type { TriggerMatcher as Unstable_TriggerMatcher } from "./composer/trigger";

package/src/primitives/message/MessageRoot.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import {
   useThreadViewport,
   useThreadViewportStore,

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,

package/src/primitives/thread/ThreadRoot.tsx

@@ -24,6 +24,9 @@ export namespace ThreadPrimitiveRoot {
  * This component serves as the foundational wrapper for all thread-related components.
  * It provides the basic structure and context needed for thread functionality.
  *
+ * While this component is mounted, an unhandled Escape keydown stops active speech, even if
+ * the action bar that started it is no longer mounted.
+ *
  * @example
  * ```tsx
  * <ThreadPrimitive.Root>

package/src/primitives/thread/ThreadViewport.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { useCallback, useLayoutEffect, useRef, type RefCallback } from "react";
 import { useAuiEvent, useAuiState } from "@assistant-ui/store";
 import { isUserScrollUp } from "@assistant-ui/store/client";

package/src/primitives/threadList/ThreadListNew.tsx

@@ -6,7 +6,7 @@ import type {
 } from "../../utils/createActionButton";
 import { forwardRef } from "react";
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { useAuiState } from "@assistant-ui/store";
 import { useThreadListNew as useThreadListNewBehavior } from "@assistant-ui/core/react";
 

package/src/primitives/threadListFocusGroup.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { createCollection } from "@radix-ui/react-collection";
+import { Collection } from "radix-ui/internal";
 import { createContext, useContext, type RefObject } from "react";
 
 const [collection, useThreadListCollection] =
-  createCollection<HTMLButtonElement>("ThreadList");
+  Collection.createCollection<HTMLButtonElement>("ThreadList");
 
 export const ThreadListCollection = collection;
 export { useThreadListCollection };

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -10,7 +10,7 @@ import {
   useRef,
 } from "react";
 import { useAuiState } from "@assistant-ui/store";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { Direction } from "radix-ui";
 import {
   ThreadListItemFocusProvider,

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef } from "react";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import {
   type ActionButtonElement,
   type ActionButtonProps,

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from "react";
 import { Direction, DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -8,7 +8,7 @@ import {
   useContext,
 } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "radix-ui/internal";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 const ThreadListItemMoreSetOpenContext = createContext<

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -5,8 +5,8 @@ import {
   Direction,
   type DropdownMenu as DropdownMenuPrimitive,
 } from "radix-ui";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "radix-ui/internal";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderTrigger } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/scope.ts

@@ -1,8 +1,8 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type { Scope } from "@radix-ui/react-context";
+import type { Context } from "radix-ui/internal";
 
 export const useDropdownMenuScope: ReturnType<
   typeof DropdownMenuPrimitive.createDropdownMenuScope
 > = DropdownMenuPrimitive.createDropdownMenuScope();
 
-export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Scope };
+export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Context.Scope };