@assistant-ui/react 0.12.24 → 0.12.26

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

@@ -1,58 +1,26 @@
-import {
-  resource,
-  tapState,
-  tapMemo,
-  tapEffectEvent,
-  tapEffect,
-  tapRef,
-} from "@assistant-ui/tap";
+import { resource, tapEffectEvent, tapResource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
-  Unstable_DirectiveFormatter,
 } from "@assistant-ui/core";
 import type { AssistantClient } from "@assistant-ui/store";
-import { detectTrigger } from "./detectTrigger";
-
-function isTriggerItem(
-  x: Unstable_TriggerItem | Unstable_TriggerCategory,
-): x is Unstable_TriggerItem {
-  return "type" in x;
-}
-
-function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
-  return (
-    item.id.toLowerCase().includes(lower) ||
-    item.label.toLowerCase().includes(lower) ||
-    (item.description?.toLowerCase().includes(lower) ?? false)
-  );
-}
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export type TriggerPopoverKeyEvent = {
-  readonly key: string;
-  readonly shiftKey: boolean;
-  preventDefault(): void;
-};
+import { TriggerDetectionResource } from "./triggerDetectionResource";
+import { TriggerKeyboardResource } from "./triggerKeyboardResource";
+import { TriggerNavigationResource } from "./triggerNavigationResource";
+import {
+  TriggerSelectionResource,
+  type SelectItemOverride,
+  type TriggerBehavior,
+} from "./triggerSelectionResource";
 
-export type SelectItemOverride = (item: Unstable_TriggerItem) => boolean;
+export type { SelectItemOverride, TriggerBehavior };
+export type { TriggerPopoverKeyEvent } from "./triggerKeyboardResource";
 
-export type OnSelectBehavior =
-  | {
-      type: "insertDirective";
-      formatter: Unstable_DirectiveFormatter;
-    }
-  | {
-      type: "action";
-      handler: (item: Unstable_TriggerItem) => void;
-    };
+/** @deprecated Use `TriggerBehavior`. */
+export type OnSelectBehavior = TriggerBehavior;
 
 export type TriggerPopoverResourceOutput = {
-  // State
   readonly open: boolean;
   readonly query: string;
   readonly activeCategoryId: string | null;
@@ -65,312 +33,105 @@ export type TriggerPopoverResourceOutput = {
   /** ID of the currently highlighted item (for aria-activedescendant). */
   readonly highlightedItemId: string | undefined;
 
-  // Actions
   selectCategory(categoryId: string): void;
   goBack(): void;
   selectItem(item: Unstable_TriggerItem): void;
   close(): void;
-  handleKeyDown(e: TriggerPopoverKeyEvent): boolean;
+  /** Move the highlight to an entry index (e.g. from pointer hover). Out-of-range values are ignored. */
+  highlightIndex(index: number): void;
+  handleKeyDown(e: {
+    readonly key: string;
+    readonly shiftKey: boolean;
+    preventDefault(): void;
+  }): boolean;
 
-  // Internal (for ComposerInput integration)
   setCursorPosition(pos: number): void;
   registerSelectItemOverride(fn: SelectItemOverride): () => void;
 };
 
-// =============================================================================
-// Resource
-// =============================================================================
-
+/** Composes detection, navigation, keyboard, and selection sub-resources. */
 export const TriggerPopoverResource = resource(
   ({
     adapter,
     text,
     triggerChar,
-    onSelect,
+    behavior,
     aui,
     popoverId,
   }: {
     adapter: Unstable_TriggerAdapter | undefined;
     text: string;
     triggerChar: string;
-    onSelect: OnSelectBehavior;
+    behavior: TriggerBehavior | undefined;
     aui: AssistantClient;
     /** Stable ID for accessible element IDs (pass React's useId() from component layer). */
     popoverId: string;
   }): TriggerPopoverResourceOutput => {
-    // -------------------------------------------------------------------------
-    // Cursor tracking + trigger detection
-    // -------------------------------------------------------------------------
-
-    const [cursorPosition, setCursorPosition] = tapState(text.length);
-
-    const trigger = tapMemo(() => {
-      const pos = Math.min(cursorPosition, text.length);
-      return detectTrigger(text, triggerChar, pos);
-    }, [cursorPosition, text, triggerChar]);
-
-    const open = trigger !== null && adapter !== undefined;
-    const query = trigger?.query ?? "";
-
-    // -------------------------------------------------------------------------
-    // Category navigation
-    // -------------------------------------------------------------------------
-
-    const [activeCategoryId, setActiveCategoryId] = tapState<string | null>(
-      null,
+    const detection = tapResource(
+      TriggerDetectionResource({ text, triggerChar }),
     );
 
-    // Reset when popover closes
-    tapEffect(() => {
-      if (!open) setActiveCategoryId(null);
-    }, [open]);
-
-    const categories = tapMemo<readonly Unstable_TriggerCategory[]>(() => {
-      if (!open || !adapter) return [];
-      return adapter.categories();
-    }, [open, adapter]);
-
-    const effectiveActiveCategoryId = open ? activeCategoryId : null;
-
-    // -------------------------------------------------------------------------
-    // Items + search
-    // -------------------------------------------------------------------------
-
-    const allItems = tapMemo<readonly Unstable_TriggerItem[]>(() => {
-      if (!effectiveActiveCategoryId || !adapter) return [];
-      return adapter.categoryItems(effectiveActiveCategoryId);
-    }, [effectiveActiveCategoryId, adapter]);
-
-    const searchResults = tapMemo<
-      readonly Unstable_TriggerItem[] | null
-    >(() => {
-      if (!open || !adapter || effectiveActiveCategoryId) return null;
-      // If categories exist and query is empty, show categories first (not search)
-      if (!query && categories.length > 0) return null;
-      if (adapter.search) return adapter.search(query);
-
-      // Fallback: search all categories manually (reuse already-computed list)
-      const all: Unstable_TriggerItem[] = [];
-      const lower = query.toLowerCase();
-      for (const cat of categories) {
-        for (const item of adapter.categoryItems(cat.id)) {
-          if (matchesQuery(item, lower)) {
-            all.push(item);
-          }
-        }
-      }
-      return all;
-    }, [open, adapter, query, effectiveActiveCategoryId, categories]);
-
-    const isSearchMode = searchResults !== null;
-
-    // -------------------------------------------------------------------------
-    // Filtering
-    // -------------------------------------------------------------------------
-
-    const filteredCategories = tapMemo(() => {
-      if (isSearchMode) return [];
-      if (!query) return categories;
-      const lower = query.toLowerCase();
-      return categories.filter((cat) =>
-        cat.label.toLowerCase().includes(lower),
-      );
-    }, [categories, query, isSearchMode]);
-
-    const filteredItems = tapMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (!query) return allItems;
-      const lower = query.toLowerCase();
-      return allItems.filter((item) => matchesQuery(item, lower));
-    }, [allItems, query, isSearchMode, searchResults]);
-
-    // -------------------------------------------------------------------------
-    // Keyboard navigation
-    // -------------------------------------------------------------------------
-
-    const [highlightedIndex, setHighlightedIndex] = tapState(0);
-
-    const navigableList = tapMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (effectiveActiveCategoryId) return filteredItems;
-      return filteredCategories;
-    }, [
-      isSearchMode,
-      searchResults,
-      effectiveActiveCategoryId,
-      filteredItems,
-      filteredCategories,
-    ]);
-
-    // Reset highlight when list changes
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional reset on list change
-    tapEffect(() => {
-      setHighlightedIndex(0);
-    }, [navigableList]);
-
-    // -------------------------------------------------------------------------
-    // Select-item override (for Lexical integration)
-    // -------------------------------------------------------------------------
-
-    const selectItemOverrideRef = tapRef<SelectItemOverride | null>(null);
-
-    const registerSelectItemOverride = tapEffectEvent(
-      (fn: SelectItemOverride) => {
-        selectItemOverrideRef.current = fn;
-        return () => {
-          if (selectItemOverrideRef.current === fn) {
-            selectItemOverrideRef.current = null;
-          }
-        };
-      },
+    const open =
+      detection.trigger !== null &&
+      adapter !== undefined &&
+      behavior !== undefined;
+
+    const navigation = tapResource(
+      TriggerNavigationResource({
+        adapter,
+        query: detection.query,
+        open,
+      }),
     );
 
-    // -------------------------------------------------------------------------
-    // Actions (stable via tapEffectEvent)
-    // -------------------------------------------------------------------------
-
-    const selectCategory = tapEffectEvent((categoryId: string) => {
-      setActiveCategoryId(categoryId);
-      setHighlightedIndex(0);
-    });
-
-    const goBack = tapEffectEvent(() => {
-      setActiveCategoryId(null);
-      setHighlightedIndex(0);
+    const onSelected = tapEffectEvent(() => {
+      navigation.goBack();
     });
 
-    const selectItem = tapEffectEvent((item: Unstable_TriggerItem) => {
-      if (!trigger) return;
-
-      // Try the override first (e.g. Lexical MentionPlugin)
-      if (selectItemOverrideRef.current?.(item)) {
-        setActiveCategoryId(null);
-        setHighlightedIndex(0);
-        return;
-      }
-
-      // Behavior depends on the onSelect configuration
-      if (onSelect.type === "insertDirective") {
-        // Insert directive text (mention path)
-        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 directive = onSelect.formatter.serialize(item);
-        const newText =
-          before + directive + (after.startsWith(" ") ? after : ` ${after}`);
-
-        aui.composer().setText(newText);
-      } else if (onSelect.type === "action") {
-        // Execute action + clear trigger text (slash command path)
-        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 newText = before + after.trimStart();
-        aui.composer().setText(newText);
-
-        onSelect.handler(item);
-      }
-
-      setActiveCategoryId(null);
-      setHighlightedIndex(0);
-    });
-
-    const close = tapEffectEvent(() => {
-      setActiveCategoryId(null);
-      setHighlightedIndex(0);
-      // Move cursor before the trigger so trigger detection deactivates
-      if (trigger) {
-        setCursorPosition(trigger.offset);
-      }
-    });
-
-    const handleKeyDown = tapEffectEvent(
-      (e: TriggerPopoverKeyEvent): boolean => {
-        if (!open) return false;
-
-        switch (e.key) {
-          case "ArrowDown": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev < len - 1 ? prev + 1 : 0;
-            });
-            return true;
-          }
-          case "ArrowUp": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev > 0 ? prev - 1 : len - 1;
-            });
-            return true;
-          }
-          case "Enter": {
-            if (e.shiftKey) return false;
-            e.preventDefault();
-            const item = navigableList[highlightedIndex];
-            if (!item) return true;
-
-            if (isTriggerItem(item)) {
-              selectItem(item);
-            } else {
-              selectCategory(item.id);
-            }
-            return true;
-          }
-          case "Escape": {
-            e.preventDefault();
-            close();
-            return true;
-          }
-          case "Backspace": {
-            if (effectiveActiveCategoryId && query === "") {
-              e.preventDefault();
-              goBack();
-              return true;
-            }
-            return false;
-          }
-          default:
-            return false;
-        }
-      },
+    const selection = tapResource(
+      TriggerSelectionResource({
+        behavior,
+        trigger: detection.trigger,
+        aui,
+        triggerChar,
+        setCursorPosition: detection.setCursorPosition,
+        onSelected,
+      }),
     );
 
-    // -------------------------------------------------------------------------
-    // Output
-    // -------------------------------------------------------------------------
-
-    // Compute highlighted item ID for aria-activedescendant
-    const highlightedEntry = navigableList[highlightedIndex];
-    const highlightedItemId =
-      open && highlightedEntry
-        ? `${popoverId}-option-${highlightedEntry.id}`
-        : undefined;
+    const keyboard = tapResource(
+      TriggerKeyboardResource({
+        navigableList: navigation.navigableList,
+        isSearchMode: navigation.isSearchMode,
+        activeCategoryId: navigation.activeCategoryId,
+        query: detection.query,
+        popoverId,
+        open,
+        selectItem: selection.selectItem,
+        selectCategory: navigation.selectCategory,
+        goBack: navigation.goBack,
+        close: selection.close,
+      }),
+    );
 
     return {
       open,
-      query,
-      activeCategoryId: effectiveActiveCategoryId,
-      categories: filteredCategories,
-      items: filteredItems,
-      highlightedIndex,
-      isSearchMode,
+      query: detection.query,
+      activeCategoryId: navigation.activeCategoryId,
+      categories: navigation.categories,
+      items: navigation.items,
+      highlightedIndex: keyboard.highlightedIndex,
+      isSearchMode: navigation.isSearchMode,
       popoverId,
-      highlightedItemId,
-      selectCategory,
-      goBack,
-      selectItem,
-      close,
-      handleKeyDown,
-      setCursorPosition,
-      registerSelectItemOverride,
+      highlightedItemId: keyboard.highlightedItemId,
+      selectCategory: navigation.selectCategory,
+      goBack: navigation.goBack,
+      selectItem: selection.selectItem,
+      close: selection.close,
+      highlightIndex: keyboard.highlightIndex,
+      handleKeyDown: keyboard.handleKeyDown,
+      setCursorPosition: detection.setCursorPosition,
+      registerSelectItemOverride: selection.registerSelectItemOverride,
     };
   },
 );

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

@@ -0,0 +1,212 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type FC,
+  type ReactNode,
+} from "react";
+import {
+  ComposerInputPluginProvider,
+  useComposerInputPluginRegistryOptional,
+} from "../ComposerInputPluginContext";
+import type { TriggerPopoverResourceOutput } from "./TriggerPopoverResource";
+import type { TriggerBehavior } from "./triggerSelectionResource";
+
+export type RegisteredTrigger = {
+  readonly char: string;
+  /** Behavior contributed by a child `TriggerPopover.Directive` / `.Action`. */
+  readonly behavior?: TriggerBehavior;
+  readonly resource: TriggerPopoverResourceOutput;
+};
+
+export type TriggerPopoverLifecycleListener = {
+  added(trigger: RegisteredTrigger): void;
+  removed(char: string): void;
+};
+
+export type TriggerPopoverRootContextValue = {
+  register(trigger: RegisteredTrigger): () => void;
+  getTriggers(): ReadonlyMap<string, RegisteredTrigger>;
+  subscribe(listener: () => void): () => void;
+  /** Subscribe to per-trigger add/remove events. */
+  subscribeLifecycle(listener: TriggerPopoverLifecycleListener): () => void;
+};
+
+const TriggerPopoverRootContext =
+  createContext<TriggerPopoverRootContextValue | null>(null);
+
+export const useTriggerPopoverRootContext = () => {
+  const ctx = useContext(TriggerPopoverRootContext);
+  if (!ctx)
+    throw new Error(
+      "useTriggerPopoverRootContext must be used within ComposerPrimitive.TriggerPopoverRoot",
+    );
+  return ctx;
+};
+
+export const useTriggerPopoverRootContextOptional = () =>
+  useContext(TriggerPopoverRootContext);
+
+/**
+ * Live map of registered triggers, re-rendering on change. Prefer
+ * `subscribeLifecycle` for incremental add/remove handling.
+ */
+export const useTriggerPopoverTriggers = () => {
+  const ctx = useTriggerPopoverRootContext();
+  return useSyncExternalStore(ctx.subscribe, ctx.getTriggers, ctx.getTriggers);
+};
+
+const EMPTY_TRIGGERS: ReadonlyMap<string, RegisteredTrigger> = new Map();
+const noopSubscribe = () => () => {};
+const getEmptyTriggers = () => EMPTY_TRIGGERS;
+
+/** Like `useTriggerPopoverTriggers` but returns an empty map outside a root. */
+export const useTriggerPopoverTriggersOptional = () => {
+  const ctx = useTriggerPopoverRootContextOptional();
+  return useSyncExternalStore(
+    ctx ? ctx.subscribe : noopSubscribe,
+    ctx ? ctx.getTriggers : getEmptyTriggers,
+    ctx ? ctx.getTriggers : getEmptyTriggers,
+  );
+};
+
+export namespace ComposerPrimitiveTriggerPopoverRoot {
+  export type Props = {
+    children: ReactNode;
+  };
+}
+
+const TriggerPopoverRootInner: FC<
+  ComposerPrimitiveTriggerPopoverRoot.Props
+> = ({ children }) => {
+  const triggersRef = useRef<ReadonlyMap<string, RegisteredTrigger>>(new Map());
+  const listenersRef = useRef<Set<() => void>>(new Set());
+  const lifecycleListenersRef = useRef<Set<TriggerPopoverLifecycleListener>>(
+    new Set(),
+  );
+
+  const notify = useCallback(() => {
+    for (const listener of listenersRef.current) listener();
+  }, []);
+
+  const register = useCallback<TriggerPopoverRootContextValue["register"]>(
+    (trigger) => {
+      const { char } = trigger;
+      if (triggersRef.current.has(char)) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[assistant-ui] Duplicate TriggerPopover for char "${char}". Ignoring the second registration.`,
+          );
+        }
+        return () => {};
+      }
+      if (process.env.NODE_ENV !== "production") {
+        for (const existing of triggersRef.current.values()) {
+          if (
+            char.startsWith(existing.char) ||
+            existing.char.startsWith(char)
+          ) {
+            console.warn(
+              `[assistant-ui] Trigger prefix collision between "${existing.char}" and "${char}". One char is a prefix of the other; only one will match reliably.`,
+            );
+          }
+        }
+      }
+      const next = new Map(triggersRef.current);
+      next.set(char, trigger);
+      triggersRef.current = next;
+      notify();
+      for (const l of lifecycleListenersRef.current) l.added(trigger);
+      return () => {
+        const after = new Map(triggersRef.current);
+        after.delete(char);
+        triggersRef.current = after;
+        notify();
+        for (const l of lifecycleListenersRef.current) l.removed(char);
+      };
+    },
+    [notify],
+  );
+
+  const getTriggers = useCallback<
+    TriggerPopoverRootContextValue["getTriggers"]
+  >(() => triggersRef.current, []);
+
+  const subscribe = useCallback<TriggerPopoverRootContextValue["subscribe"]>(
+    (listener) => {
+      listenersRef.current.add(listener);
+      return () => {
+        listenersRef.current.delete(listener);
+      };
+    },
+    [],
+  );
+
+  const subscribeLifecycle = useCallback<
+    TriggerPopoverRootContextValue["subscribeLifecycle"]
+  >((listener) => {
+    lifecycleListenersRef.current.add(listener);
+    return () => {
+      lifecycleListenersRef.current.delete(listener);
+    };
+  }, []);
+
+  const value = useMemo<TriggerPopoverRootContextValue>(
+    () => ({ register, getTriggers, subscribe, subscribeLifecycle }),
+    [register, getTriggers, subscribe, subscribeLifecycle],
+  );
+
+  return (
+    <TriggerPopoverRootContext.Provider value={value}>
+      {children}
+    </TriggerPopoverRootContext.Provider>
+  );
+};
+
+/**
+ * Provider that groups one or more `TriggerPopover` declarations. Each trigger
+ * is identified by its `char` (unique within the root). Behavior is contributed
+ * by a child `TriggerPopover.Directive` or `TriggerPopover.Action`.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+ *   <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
+ *     <ComposerPrimitive.Unstable_TriggerPopover.Directive formatter={formatter} />
+ *     ...
+ *   </ComposerPrimitive.Unstable_TriggerPopover>
+ *
+ *   <ComposerPrimitive.Unstable_TriggerPopover char="/" adapter={slashAdapter}>
+ *     <ComposerPrimitive.Unstable_TriggerPopover.Action onExecute={handler} />
+ *     ...
+ *   </ComposerPrimitive.Unstable_TriggerPopover>
+ *
+ *   <ComposerPrimitive.Root>
+ *     <ComposerPrimitive.Input />
+ *   </ComposerPrimitive.Root>
+ * </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+ * ```
+ */
+export const ComposerPrimitiveTriggerPopoverRoot: FC<
+  ComposerPrimitiveTriggerPopoverRoot.Props
+> = ({ children }) => {
+  const existingRegistry = useComposerInputPluginRegistryOptional();
+
+  if (existingRegistry) {
+    return <TriggerPopoverRootInner>{children}</TriggerPopoverRootInner>;
+  }
+
+  return (
+    <ComposerInputPluginProvider>
+      <TriggerPopoverRootInner>{children}</TriggerPopoverRootInner>
+    </ComposerInputPluginProvider>
+  );
+};
+
+ComposerPrimitiveTriggerPopoverRoot.displayName =
+  "ComposerPrimitive.TriggerPopoverRoot";

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

@@ -75,4 +75,40 @@ describe("detectTrigger", () => {
       offset: 6,
     });
   });
+
+  it("treats U+3000 full-width space before trigger as boundary", () => {
+    expect(detectTrigger("全角\u3000@foo", "@", 7)).toEqual({
+      query: "foo",
+      offset: 3,
+    });
+  });
+
+  it("treats U+00A0 NBSP before trigger as boundary", () => {
+    expect(detectTrigger("x\u00A0@foo", "@", 6)).toEqual({
+      query: "foo",
+      offset: 2,
+    });
+  });
+
+  it("stops at U+3000 full-width space inside query", () => {
+    expect(detectTrigger("@foo\u3000bar", "@", 8)).toBeNull();
+  });
+
+  it("IME full-width space before trigger char acts as boundary", () => {
+    expect(detectTrigger("hello\u3000@foo", "@", 10)).toEqual({
+      query: "foo",
+      offset: 6,
+    });
+  });
+
+  it("NBSP between word and trigger acts as boundary", () => {
+    expect(detectTrigger("hello\u00a0@foo", "@", 10)).toEqual({
+      query: "foo",
+      offset: 6,
+    });
+  });
+
+  it("full-width trigger char does NOT match ASCII trigger (literal comparison)", () => {
+    expect(detectTrigger("hello \uff20foo", "@", 10)).toBeNull();
+  });
 });