@assistant-ui/react 0.12.24 → 0.12.26

package/src/primitives/composer/slash-command/ComposerSlashCommandRoot.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { type ReactNode, type FC, useCallback, useMemo } from "react";
-import type {
-  Unstable_SlashCommandAdapter,
-  Unstable_SlashCommandItem,
-} from "@assistant-ui/core";
-import { ComposerPrimitiveTriggerPopoverRoot } from "../trigger/TriggerPopoverContext";
-import type { OnSelectBehavior } from "../trigger/TriggerPopoverResource";
-
-// =============================================================================
-// SlashCommandRoot — convenience wrapper around TriggerPopoverRoot
-// =============================================================================
-
-export namespace ComposerPrimitiveSlashCommandRoot {
-  export type Props = {
-    children: ReactNode;
-    /** The adapter providing slash command categories and items. */
-    adapter: Unstable_SlashCommandAdapter;
-    /** Character(s) that trigger the popover. @default "/" */
-    trigger?: string | undefined;
-    /** Callback when a slash command is selected. */
-    onSelect?: ((item: Unstable_SlashCommandItem) => void) | undefined;
-  };
-}
-
-/**
- * Convenience wrapper around `TriggerPopoverRoot` pre-configured for `/` slash commands.
- * When a user selects a command, the `/command` text is removed from the composer
- * and the item's `execute` callback (if any) and `onSelect` prop are called.
- *
- * @example
- * ```tsx
- * <ComposerPrimitive.Unstable_SlashCommandRoot adapter={slashAdapter}>
- *   <ComposerPrimitive.Input />
- *   <ComposerPrimitive.Unstable_TriggerPopoverPopover>
- *     <ComposerPrimitive.Unstable_TriggerPopoverItems>
- *       {(items) => items.map(item => (
- *         <ComposerPrimitive.Unstable_TriggerPopoverItem key={item.id} item={item}>
- *           {item.label}
- *         </ComposerPrimitive.Unstable_TriggerPopoverItem>
- *       ))}
- *     </ComposerPrimitive.Unstable_TriggerPopoverItems>
- *   </ComposerPrimitive.Unstable_TriggerPopoverPopover>
- * </ComposerPrimitive.Unstable_SlashCommandRoot>
- * ```
- */
-export const ComposerPrimitiveSlashCommandRoot: FC<
-  ComposerPrimitiveSlashCommandRoot.Props
-> = ({ children, adapter, trigger = "/", onSelect: onSelectProp }) => {
-  const handler = useCallback(
-    (item: Unstable_SlashCommandItem) => {
-      item.execute?.();
-      onSelectProp?.(item);
-    },
-    [onSelectProp],
-  );
-
-  const onSelect = useMemo<OnSelectBehavior>(
-    () => ({ type: "action", handler }),
-    [handler],
-  );
-
-  return (
-    <ComposerPrimitiveTriggerPopoverRoot
-      adapter={adapter}
-      trigger={trigger}
-      onSelect={onSelect}
-    >
-      {children}
-    </ComposerPrimitiveTriggerPopoverRoot>
-  );
-};
-
-ComposerPrimitiveSlashCommandRoot.displayName =
-  "ComposerPrimitive.SlashCommandRoot";

package/src/primitives/composer/slash-command/index.ts

@@ -1 +0,0 @@
-export { ComposerPrimitiveSlashCommandRoot } from "./ComposerSlashCommandRoot";

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

@@ -1,129 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useId,
-  type ReactNode,
-  type FC,
-} from "react";
-import { useResource } from "@assistant-ui/tap/react";
-import { useAui, useAuiState } from "@assistant-ui/store";
-import type { Unstable_TriggerAdapter } from "@assistant-ui/core";
-import {
-  TriggerPopoverResource,
-  type TriggerPopoverResourceOutput,
-  type OnSelectBehavior,
-} from "./TriggerPopoverResource";
-import {
-  useComposerInputPluginRegistryOptional,
-  ComposerInputPluginProvider,
-} from "../ComposerInputPluginContext";
-
-// =============================================================================
-// Context
-// =============================================================================
-
-const TriggerPopoverContext =
-  createContext<TriggerPopoverResourceOutput | null>(null);
-
-export const useTriggerPopoverContext = () => {
-  const ctx = useContext(TriggerPopoverContext);
-  if (!ctx)
-    throw new Error(
-      "useTriggerPopoverContext must be used within ComposerPrimitive.TriggerPopoverRoot",
-    );
-  return ctx;
-};
-
-export const useTriggerPopoverContextOptional = () => {
-  return useContext(TriggerPopoverContext);
-};
-
-// =============================================================================
-// Root Component
-// =============================================================================
-
-export namespace ComposerPrimitiveTriggerPopoverRoot {
-  export type Props = {
-    children: ReactNode;
-    /** The adapter providing categories and items. */
-    adapter: Unstable_TriggerAdapter;
-    /** Character(s) that trigger the popover. @default "@" */
-    trigger?: string | undefined;
-    /** What happens when an item is selected. */
-    onSelect: OnSelectBehavior;
-  };
-}
-
-const TriggerPopoverRootInner: FC<
-  ComposerPrimitiveTriggerPopoverRoot.Props
-> = ({ children, adapter, trigger: triggerChar = "@", onSelect }) => {
-  const aui = useAui();
-  const text = useAuiState((s) => s.composer.text);
-  const popoverId = useId();
-
-  const triggerPopover = useResource(
-    TriggerPopoverResource({
-      adapter,
-      text,
-      triggerChar,
-      onSelect,
-      aui,
-      popoverId,
-    }),
-  );
-
-  // Register as ComposerInput plugin
-  const pluginRegistry = useComposerInputPluginRegistryOptional();
-
-  useEffect(() => {
-    if (!pluginRegistry) return undefined;
-    return pluginRegistry.register(triggerPopover);
-  }, [pluginRegistry, triggerPopover]);
-
-  return (
-    <TriggerPopoverContext.Provider value={triggerPopover}>
-      {children}
-    </TriggerPopoverContext.Provider>
-  );
-};
-
-/**
- * Provider that wraps the composer with trigger detection, keyboard navigation,
- * and popover state. Supports any trigger character (`@`, `/`, `:`, etc.).
- * Multiple trigger roots can coexist around the same input.
- *
- * @example
- * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopoverRoot
- *   trigger="/"
- *   adapter={slashAdapter}
- *   onSelect={{ type: "action", handler: (item) => console.log(item) }}
- * >
- *   <ComposerPrimitive.Input />
- *   <ComposerPrimitive.Unstable_TriggerPopoverPopover>
- *     ...
- *   </ComposerPrimitive.Unstable_TriggerPopoverPopover>
- * </ComposerPrimitive.Unstable_TriggerPopoverRoot>
- * ```
- */
-export const ComposerPrimitiveTriggerPopoverRoot: FC<
-  ComposerPrimitiveTriggerPopoverRoot.Props
-> = (props) => {
-  const existingRegistry = useComposerInputPluginRegistryOptional();
-
-  if (existingRegistry) {
-    return <TriggerPopoverRootInner {...props} />;
-  }
-
-  return (
-    <ComposerInputPluginProvider>
-      <TriggerPopoverRootInner {...props} />
-    </ComposerInputPluginProvider>
-  );
-};
-
-ComposerPrimitiveTriggerPopoverRoot.displayName =
-  "ComposerPrimitive.TriggerPopoverRoot";

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

@@ -1,51 +0,0 @@
-"use client";
-
-import { Primitive } from "../../../utils/Primitive";
-import {
-  type ComponentRef,
-  type ComponentPropsWithoutRef,
-  forwardRef,
-} from "react";
-import { useTriggerPopoverContext } from "./TriggerPopoverContext";
-
-export namespace ComposerPrimitiveTriggerPopoverPopover {
-  export type Element = ComponentRef<typeof Primitive.div>;
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
-}
-
-/**
- * Renders a container for the trigger popover.
- * Only renders when a trigger character is detected in the composer text.
- *
- * @example
- * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopoverRoot trigger="/" adapter={adapter} onSelect={onSelect}>
- *   <ComposerPrimitive.Input />
- *   <ComposerPrimitive.Unstable_TriggerPopoverPopover>
- *     <ComposerPrimitive.Unstable_TriggerPopoverCategories />
- *   </ComposerPrimitive.Unstable_TriggerPopoverPopover>
- * </ComposerPrimitive.Unstable_TriggerPopoverRoot>
- * ```
- */
-export const ComposerPrimitiveTriggerPopoverPopover = forwardRef<
-  ComposerPrimitiveTriggerPopoverPopover.Element,
-  ComposerPrimitiveTriggerPopoverPopover.Props
->(({ "aria-label": ariaLabel, ...props }, forwardedRef) => {
-  const { open, popoverId, highlightedItemId } = useTriggerPopoverContext();
-  if (!open) return null;
-
-  return (
-    <Primitive.div
-      role="listbox"
-      id={popoverId}
-      aria-label={ariaLabel ?? "Suggestions"}
-      aria-activedescendant={highlightedItemId}
-      data-state="open"
-      {...props}
-      ref={forwardedRef}
-    />
-  );
-});
-
-ComposerPrimitiveTriggerPopoverPopover.displayName =
-  "ComposerPrimitive.TriggerPopoverPopover";

package/src/unstable/useToolMentionAdapter.ts

@@ -1,114 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useAui } from "@assistant-ui/store";
-import type {
-  Unstable_MentionAdapter,
-  Unstable_MentionCategory,
-  Unstable_MentionItem,
-} from "@assistant-ui/core";
-
-export type Unstable_ToolMentionAdapterOptions = {
-  /**
-   * Explicit list of tools to show in the mention picker.
-   * If provided, model context tools are NOT included unless
-   * `includeModelContextTools` is true.
-   */
-  tools?: readonly Unstable_MentionItem[] | undefined;
-
-  /**
-   * Include tools from the model context (registered via useAssistantTool).
-   * Defaults to true when `tools` is not provided, false otherwise.
-   */
-  includeModelContextTools?: boolean | undefined;
-
-  /**
-   * Custom function to format the display label for a tool.
-   * Receives the tool name (id) and returns the display label.
-   *
-   * @example
-   * ```ts
-   * formatLabel: (name) => name.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase())
-   * // "get_current_weather" → "Get Current Weather"
-   * ```
-   */
-  formatLabel?: ((toolName: string) => string) | undefined;
-
-  /** Custom label for the tools category. @default "Tools" */
-  categoryLabel?: string | undefined;
-};
-
-/**
- * @deprecated This API is still under active development and might change without notice.
- *
- * Creates a MentionAdapter for tools. When a user types `@`, they see
- * available tools and can mention them to hint the LLM to use a specific tool.
- *
- * @example
- * ```tsx
- * const mentionAdapter = unstable_useToolMentionAdapter({
- *   formatLabel: (name) => name.replaceAll("_", " "),
- * });
- * ```
- */
-export function unstable_useToolMentionAdapter(
-  options?: Unstable_ToolMentionAdapterOptions,
-): Unstable_MentionAdapter {
-  const aui = useAui();
-  const explicitTools = options?.tools;
-  const includeModelContext =
-    options?.includeModelContextTools ?? !explicitTools;
-  const formatLabel = options?.formatLabel;
-  const categoryLabel = options?.categoryLabel;
-
-  return useMemo<Unstable_MentionAdapter>(() => {
-    const getTools = (): Unstable_MentionItem[] => {
-      const items: Unstable_MentionItem[] = [];
-
-      if (explicitTools) {
-        items.push(...explicitTools);
-      }
-
-      if (includeModelContext) {
-        const context = aui.thread().getModelContext();
-        const tools = context.tools;
-        if (tools) {
-          for (const [name, tool] of Object.entries(tools)) {
-            if (!items.some((i) => i.id === name)) {
-              items.push({
-                id: name,
-                type: "tool",
-                label: formatLabel ? formatLabel(name) : name,
-                description: tool.description ?? undefined,
-              });
-            }
-          }
-        }
-      }
-
-      return items;
-    };
-
-    return {
-      categories(): Unstable_MentionCategory[] {
-        return [
-          { id: "tools", label: categoryLabel ?? "Tools", icon: undefined },
-        ];
-      },
-
-      categoryItems(_categoryId: string): Unstable_MentionItem[] {
-        return getTools();
-      },
-
-      search(query: string): Unstable_MentionItem[] {
-        const lower = query.toLowerCase();
-        return getTools().filter(
-          (item) =>
-            item.id.toLowerCase().includes(lower) ||
-            item.label.toLowerCase().includes(lower) ||
-            item.description?.toLowerCase().includes(lower),
-        );
-      },
-    };
-  }, [aui, explicitTools, includeModelContext, formatLabel, categoryLabel]);
-}