@agent-native/toolkit 0.209.0 → 0.209.1-nightly-20261015093558

package/src/composer/TiptapComposer.tsx

@@ -183,7 +183,12 @@ export interface TiptapComposerHandle {
    * triggers such as `@` open their menus as if the person typed them.
    */
   insertTextAtCursor?(text: string): void;
-  setText(text: string): void;
+  /**
+   * Replace the draft. Each reference becomes a chip in place of
+   * `text.slice(start, end)`; one that overlaps another or crosses a line
+   * break stays text.
+   */
+  setText(text: string, references?: readonly ComposerTextReference[]): void;
   /** Submit replacement text with the current attachments and context, without editing the draft on failure. */
   submitWithText(text: string): Promise<boolean>;
   /** Submit the current draft as if the person pressed send. */
@@ -207,6 +212,13 @@ export interface ComposerTextSelection {
   direction: "forward" | "backward" | "none";
 }
 
+/** A chip standing for `text.slice(start, end)` of a draft's plain text. */
+export interface ComposerTextReference {
+  start: number;
+  end: number;
+  reference: AgentComposerReference;
+}
+
 export type ComposerSubmitIntent = "immediate" | "queued";
 
 export const DEFAULT_VOICE_DICTATION_ENABLED = false;
@@ -1066,6 +1078,8 @@ export interface TiptapComposerProps {
   initialText?: string;
   /** Stable key used to re-apply the seeded text. */
   initialTextKey?: string | number;
+  /** Chips placed into `initialText`, as `setText` takes them. */
+  initialReferences?: readonly ComposerTextReference[];
   /**
    * When provided, called instead of composerRuntime.send(). Used for queue
    * mode and standalone prompt popovers. Receives the live composer
@@ -1095,6 +1109,9 @@ export interface TiptapComposerProps {
   /** Called whenever the plain editor text changes. */
   onTextChange?: (text: string) => void;
   mentionItems?: MentionItem[];
+  /** Why some of `mentionItems` could not load, shown in the @ popover. */
+  mentionItemsError?: string;
+  onRetryMentionItems?: () => void;
   mentionPopoverDensity?: "default" | "stacked";
   includeDefaultMentionSearch?: boolean;
   onReferencesChange?: (references: Reference[]) => void;
@@ -1239,14 +1256,53 @@ export interface TiptapComposerProps {
   onAttachmentError?: (message: string) => void;
 }
 
-function plainTextToDoc(text: string) {
-  const lines = text.length > 0 ? text.split(/\r?\n/) : [""];
+interface TextChip {
+  start: number;
+  end: number;
+  attrs: ReturnType<typeof mentionReferenceAttrs>;
+}
+
+function plainTextToDoc(text: string, chips: readonly TextChip[] = []) {
+  const ordered = [...chips].sort((a, b) => a.start - b.start);
+  const lines: { start: number; end: number }[] = [];
+  let lineStart = 0;
+  for (const separator of text.matchAll(/\r?\n/g)) {
+    lines.push({ start: lineStart, end: separator.index });
+    lineStart = separator.index + separator[0].length;
+  }
+  lines.push({ start: lineStart, end: text.length });
   return {
     type: "doc",
-    content: lines.map((line) => ({
-      type: "paragraph",
-      content: line ? [{ type: "text", text: line }] : [],
-    })),
+    content: lines.map((line) => {
+      const content: Record<string, unknown>[] = [];
+      let cursor = line.start;
+      const addText = (end: number) => {
+        if (end > cursor) {
+          content.push({ type: "text", text: text.slice(cursor, end) });
+        }
+      };
+      for (const chip of ordered) {
+        if (
+          chip.start < cursor ||
+          line.end < chip.end ||
+          chip.end <= chip.start
+        )
+          continue;
+        addText(chip.start);
+        content.push({ type: "mentionReference", attrs: chip.attrs });
+        cursor = chip.end;
+      }
+      addText(line.end);
+      // Drafts are reported trimmed, so a chip that ends one lost the space
+      // picking it added; without it the next word typed joins the chip's text.
+      if (
+        cursor === text.length &&
+        content.at(-1)?.type === "mentionReference"
+      ) {
+        content.push({ type: "text", text: " " });
+      }
+      return { type: "paragraph", content };
+    }),
   };
 }
 
@@ -2779,6 +2835,7 @@ export function TiptapComposer({
   focusRef,
   initialText,
   initialTextKey,
+  initialReferences,
   onSubmit,
   onEmptySubmit,
   onBeforeSubmit,
@@ -2835,6 +2892,8 @@ export function TiptapComposer({
   interceptBuildRequestsForBuilder = false,
   onAttachmentError,
   mentionItems: hostMentionItems = [],
+  mentionItemsError,
+  onRetryMentionItems,
   mentionPopoverDensity = "default",
   includeDefaultMentionSearch = true,
   onReferencesChange,
@@ -2849,6 +2908,20 @@ export function TiptapComposer({
     !(attachmentsEnabled && attachButton);
   const adapters = useComposerRuntimeAdapters();
   const t = adapters.translate!;
+  const initialReferencesRef = useRef(initialReferences);
+  initialReferencesRef.current = initialReferences;
+  const textChips = useCallback(
+    (references: readonly ComposerTextReference[] = []): TextChip[] =>
+      references.flatMap(({ start, end, reference }) => {
+        const normalized = adapters.agentChat!.normalizeReference!(
+          reference,
+        ) as AgentComposerReference | null;
+        return normalized
+          ? [{ start, end, attrs: mentionReferenceAttrs(normalized) }]
+          : [];
+      }),
+    [adapters],
+  );
   const sendButtonTooltip = t(getComposerSendTooltipKey(willQueue), {
     defaultValue: willQueue ? "Queue message" : "Send message",
   });
@@ -3632,6 +3705,14 @@ export function TiptapComposer({
             popoverRef.current?.moveDown();
             return true;
           }
+          if (
+            (event.key === "Enter" ||
+              (event.key === "Tab" && !event.shiftKey)) &&
+            popoverRef.current?.activateRetry()
+          ) {
+            event.preventDefault();
+            return true;
+          }
           // A mention comes only from an explicit pick of a highlighted row. With
           // nothing highlighted, even while a search is pending, the "@" is
           // plain text: Enter submits it and a late result changes nothing.
@@ -4032,7 +4113,11 @@ export function TiptapComposer({
         );
         if (from > 1 && before !== "" && !/\s/.test(before)) inserted = ` @`;
       }
+      // The popover anchors on the selection right after this insert, but an
+      // execCommand edit reaches the editor state only once ProseMirror reads
+      // the DOM back, so an @ goes through the editor directly.
       if (
+        mention ||
         typeof document.execCommand !== "function" ||
         !document.execCommand("insertText", false, inserted)
       ) {
@@ -4052,9 +4137,9 @@ export function TiptapComposer({
       popoverStateRef.current = state;
       setPopover(state);
     },
-    setText(text: string) {
+    setText(text: string, references?: readonly ComposerTextReference[]) {
       if (!isComposerEditorUsable(editor)) return;
-      editor.commands.setContent(plainTextToDoc(text));
+      editor.commands.setContent(plainTextToDoc(text, textChips(references)));
       editor.commands.focus("end");
       const trimmed = editor.getText({ blockSeparator: "\n" }).trim();
       setEditorHasText(trimmed.length > 0);
@@ -5799,7 +5884,9 @@ export function TiptapComposer({
         return;
       } else if (initialTextKeyRef.current !== key) {
         initialTextKeyRef.current = key;
-        editor.commands.setContent(plainTextToDoc(initialText));
+        editor.commands.setContent(
+          plainTextToDoc(initialText, textChips(initialReferencesRef.current)),
+        );
       } else {
         return;
       }
@@ -5821,6 +5908,7 @@ export function TiptapComposer({
     initialText,
     initialTextKey,
     scheduleComposerDraftPersist,
+    textChips,
     updateSlotReferences,
   ]);
 
@@ -6228,6 +6316,8 @@ export function TiptapComposer({
         commands={filteredCommands}
         hint={hint}
         isLoading={popover?.type === "@" ? mentionsLoading : skillsLoading}
+        error={mentionItemsError}
+        onRetry={onRetryMentionItems}
         query={popover?.query ?? ""}
         onSelectMention={handleSelectMention}
         onSelectSkill={handleSelectSkill}

package/src/composer/extensions/MentionReference.tsx

@@ -1,9 +1,12 @@
 import { mergeAttributes, Node } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 
-import { MentionItemMedia } from "../MentionItemMedia.js";
+import { MentionChip } from "../MentionChip.js";
 import type { MentionItemMedia as MentionItemMediaValue } from "../types.js";
 
+const NAME_START = /^[\p{L}\p{M}\p{N}_]/u;
+const NAME_END = /[\p{L}\p{M}\p{N}_]$/u;
+
 function parseMentionItemMedia(
   value: string | null,
 ): MentionItemMediaValue | null {
@@ -46,21 +49,16 @@ function parseMentionItemMedia(
 const MentionReferenceComponent = ({ node }: { node: any }) => {
   return (
     <NodeViewWrapper as="span" className="inline">
-      <span
-        className="inline-flex items-center gap-1 rounded-md border border-input bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground align-middle mx-0.5 max-w-[200px] select-none"
+      <MentionChip
+        className="select-none"
         title={node.attrs.refPath || node.attrs.refId || node.attrs.label}
         data-mention-reference=""
         data-mention-ref-type={node.attrs.refType || undefined}
         data-mention-ref-id={node.attrs.refId || undefined}
-      >
-        <MentionItemMedia
-          icon={node.attrs.icon}
-          media={node.attrs.media}
-          size="sm"
-          fallbackIcon="stack"
-        />
-        <span className="truncate">{node.attrs.label}</span>
-      </span>
+        icon={node.attrs.icon}
+        media={node.attrs.media}
+        label={node.attrs.label}
+      />
     </NodeViewWrapper>
   );
 };
@@ -106,8 +104,18 @@ export const MentionReference = Node.create({
     ];
   },
 
-  renderText({ node }) {
-    return `@${node.attrs.label}`;
+  renderText({ node, parent, index }) {
+    const text = `@${node.attrs.label}`;
+    // Text matches a mention only as a whole @name token, so a chip right
+    // against a word would read as no mention, or as a later one.
+    const before = parent.maybeChild(index - 1);
+    const after = parent.maybeChild(index + 1);
+    const leading = before?.isText && NAME_END.test(before.text ?? "");
+    const trailing =
+      NAME_END.test(text) &&
+      ((after?.isText && NAME_START.test(after.text ?? "")) ||
+        after?.type === node.type);
+    return `${leading ? " " : ""}${text}${trailing ? " " : ""}`;
   },
 
   addNodeView() {

package/src/composer/index.ts

@@ -59,6 +59,7 @@ export {
   type ComposerDraftSnapshot,
   type ComposerSubmitIntent,
   type TiptapComposerHandle,
+  type ComposerTextReference,
   type ComposerTextSelection,
   type TiptapComposerProps,
   type TiptapComposerSubmitOptions,
@@ -128,6 +129,7 @@ export {
   type AgentPromptAttachment,
   type ReadAgentPromptAttachmentOptions,
 } from "./prompt-attachments.js";
+export { MentionChip, type MentionChipProps } from "./MentionChip.js";
 export { MentionPopover } from "./MentionPopover.js";
 export { useMentionSearch } from "./use-mention-search.js";
 export {

package/src/ui/button-group.spec.tsx

@@ -101,6 +101,10 @@ describe("ButtonGroup", () => {
         ":not([data-slot=button-group-separator]+*)",
       ),
     ).toBe(true);
+    expect(horizontal?.className).toContain(
+      ":not(:has(~:not([data-button-group-ignore])))",
+    );
+    expect(horizontal?.className).not.toContain("nth-last-child");
     expect(nested?.className).toContain("border-s-current/20");
     expect(
       horizontal?.querySelector('[data-slot="button-group-separator"]'),

package/src/ui/button-group.tsx

@@ -11,9 +11,9 @@ const buttonGroupVariants = cva(
     variants: {
       orientation: {
         horizontal:
-          "[&>*:first-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-s-md [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)]:rounded-s-none [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)[class~='border']]:border-s-0 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-s [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-s-current/20 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:last-child):not([data-slot=button-group]):not(:has(+[data-slot=button-group]))]:rounded-e-none [&>*:last-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-e-md has-[>input[data-button-group-ignore]]:[&>*:nth-last-child(2)]:!rounded-e-md",
+          "[&>*:first-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-s-md [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)]:rounded-s-none [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)[class~='border']]:border-s-0 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-s [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-s-current/20 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):has(~:not([data-button-group-ignore])):not([data-slot=button-group]):not(:has(+[data-slot=button-group]))]:rounded-e-none [&>*:not(:has(~:not([data-button-group-ignore]))):not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-e-md",
         vertical:
-          "flex-col [&>*:first-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-t-md [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)]:rounded-t-none [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)[class~='border']]:border-t-0 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-t [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-t-current/20 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:last-child):not([data-slot=button-group]):not(:has(+[data-slot=button-group]))]:rounded-b-none [&>*:last-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-b-md has-[>input[data-button-group-ignore]]:[&>*:nth-last-child(2)]:!rounded-b-md",
+          "flex-col [&>*:first-child:not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-t-md [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)]:rounded-t-none [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*)[class~='border']]:border-t-0 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-t [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):not(:first-child):not([data-slot=button-group]):not([data-slot=button-group]+*):not([data-slot=button-group-separator]):not([data-slot=button-group-separator]+*):not([class~='border'])]:border-t-current/20 [&>*:not([data-button-group-ignore]):not(select[aria-hidden=true]):has(~:not([data-button-group-ignore])):not([data-slot=button-group]):not(:has(+[data-slot=button-group]))]:rounded-b-none [&>*:not(:has(~:not([data-button-group-ignore]))):not([data-slot=button-group]):not([data-button-group-ignore]):not(select[aria-hidden=true])]:rounded-b-md",
       },
     },
     defaultVariants: {