@agent-native/toolkit 0.5.1 → 0.7.0

package/src/composer/MentionPopover.tsx

@@ -0,0 +1,412 @@
+import {
+  IconFile,
+  IconFolder,
+  IconStack2,
+  IconFileText,
+  IconCheckbox,
+  IconMail,
+  IconUser,
+  IconPresentation,
+  IconMessageChatbot,
+  IconTrash,
+  IconPlus,
+  IconHelp,
+  IconHistory,
+  IconTerminal2,
+  IconClipboardList,
+  IconPencil,
+} from "@tabler/icons-react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import { createPortal } from "react-dom";
+
+import type { MentionItem, SkillResult, SlashCommand } from "./types.js";
+
+export interface MentionPopoverRef {
+  moveUp: () => void;
+  moveDown: () => void;
+  getSelectedIndex: () => number;
+  getSelectedMention: () => MentionItem | null;
+  getSelectedCommand: () => SlashCommand | null;
+}
+
+interface MentionPopoverProps {
+  type: "@" | "/";
+  position: { top: number; left: number } | null;
+  mentionItems: MentionItem[];
+  skills: SkillResult[];
+  commands?: SlashCommand[];
+  hint?: string;
+  isLoading: boolean;
+  query: string;
+  onSelectMention: (item: MentionItem) => void;
+  onSelectSkill: (skill: SkillResult) => void;
+  onSelectCommand?: (command: SlashCommand) => void;
+  onClose: () => void;
+}
+
+const iconProps = { size: 14, className: "shrink-0 text-muted-foreground" };
+
+function MentionItemIcon({ icon }: { icon?: string }) {
+  switch (icon) {
+    case "folder":
+      return <IconFolder {...iconProps} />;
+    case "document":
+      return <IconFileText {...iconProps} />;
+    case "form":
+      return <IconCheckbox {...iconProps} />;
+    case "email":
+      return <IconMail {...iconProps} />;
+    case "user":
+      return <IconUser {...iconProps} />;
+    case "deck":
+      return <IconPresentation {...iconProps} />;
+    case "agent":
+      return <IconMessageChatbot {...iconProps} />;
+    case "file":
+      return <IconFile {...iconProps} />;
+    default:
+      return <IconFile {...iconProps} />;
+  }
+}
+
+function CommandIcon({ icon }: { icon?: string }) {
+  switch (icon) {
+    case "clear":
+      return <IconTrash {...iconProps} />;
+    case "new":
+      return <IconPlus {...iconProps} />;
+    case "help":
+      return <IconHelp {...iconProps} />;
+    case "history":
+      return <IconHistory {...iconProps} />;
+    case "plan":
+      return <IconClipboardList {...iconProps} />;
+    case "act":
+      return <IconPencil {...iconProps} />;
+    default:
+      return <IconTerminal2 {...iconProps} />;
+  }
+}
+
+function HintWithLink({ hint }: { hint: string }) {
+  // If hint contains a URL, split it and render the URL as a link
+  const urlMatch = hint.match(/(https?:\/\/\S+)/);
+  if (!urlMatch) return <>{hint}</>;
+  const before = hint.slice(0, urlMatch.index);
+  const url = urlMatch[1];
+  return (
+    <>
+      {before}
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline hover:text-foreground"
+      >
+        Learn more
+      </a>
+    </>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-1 p-1">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center gap-2 rounded px-2 py-1.5">
+          <div className="h-3.5 w-3.5 rounded bg-muted animate-pulse" />
+          <div
+            className="h-3 rounded bg-muted animate-pulse"
+            style={{ width: `${60 + i * 20}px` }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function LoadingSkeletonRow() {
+  return (
+    <div className="flex items-center gap-2 rounded px-2 py-1.5">
+      <div className="h-3.5 w-3.5 rounded bg-muted animate-pulse" />
+      <div className="h-3 w-24 rounded bg-muted animate-pulse" />
+    </div>
+  );
+}
+
+export const MentionPopover = forwardRef<
+  MentionPopoverRef,
+  MentionPopoverProps
+>(function MentionPopover(props, ref) {
+  const {
+    type,
+    position,
+    mentionItems,
+    skills,
+    commands = [],
+    hint,
+    isLoading,
+    query,
+    onSelectMention,
+    onSelectSkill,
+    onSelectCommand,
+    onClose,
+  } = props;
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const itemCount =
+    type === "@" ? mentionItems.length : commands.length + skills.length;
+
+  // Group mention items by section for @ popover
+  const groupedMentions = React.useMemo(() => {
+    if (type !== "@") return [];
+    const groups = new Map<string, MentionItem[]>();
+    for (const item of mentionItems) {
+      const section = item.section || "Other";
+      if (!groups.has(section)) groups.set(section, []);
+      groups.get(section)!.push(item);
+    }
+    // Sort: Agents first, then Connected Agents, then template-specific,
+    // then Files, then Other
+    const sorted: { section: string; items: MentionItem[] }[] = [];
+    const knownSections = new Set([
+      "Agents",
+      "Connected Agents",
+      "Files",
+      "Other",
+    ]);
+    // Agents first
+    if (groups.has("Agents")) {
+      sorted.push({ section: "Agents", items: groups.get("Agents")! });
+      groups.delete("Agents");
+    }
+    if (groups.has("Connected Agents")) {
+      sorted.push({
+        section: "Connected Agents",
+        items: groups.get("Connected Agents")!,
+      });
+      groups.delete("Connected Agents");
+    }
+    // Template-specific sections (anything not in knownSections)
+    for (const [section, items] of groups) {
+      if (!knownSections.has(section)) {
+        sorted.push({ section, items });
+      }
+    }
+    // Files
+    if (groups.has("Files")) {
+      sorted.push({ section: "Files", items: groups.get("Files")! });
+    }
+    // Other
+    if (groups.has("Other")) {
+      sorted.push({ section: "Other", items: groups.get("Other")! });
+    }
+    return sorted;
+  }, [type, mentionItems]);
+
+  // Flat list of mention items in section order for keyboard index tracking
+  const flatMentionItems = React.useMemo(() => {
+    return groupedMentions.flatMap((g) => g.items);
+  }, [groupedMentions]);
+
+  // Reset selection when items change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [commands, mentionItems, skills, query]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const container = listRef.current;
+    if (!container) return;
+    // Find the actual item element by data attribute
+    const selected = container.querySelector(
+      `[data-mention-index="${selectedIndex}"]`,
+    ) as HTMLElement | undefined;
+    if (selected) {
+      selected.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+
+  useImperativeHandle(ref, () => ({
+    moveUp: () => {
+      setSelectedIndex((prev) =>
+        prev <= 0 ? Math.max(0, itemCount - 1) : prev - 1,
+      );
+    },
+    moveDown: () => {
+      setSelectedIndex((prev) => (prev >= itemCount - 1 ? 0 : prev + 1));
+    },
+    getSelectedIndex: () => selectedIndex,
+    getSelectedMention: () => flatMentionItems[selectedIndex] ?? null,
+    getSelectedCommand: () => {
+      if (type !== "/" || selectedIndex >= commands.length) return null;
+      return commands[selectedIndex] ?? null;
+    },
+  }));
+
+  if (!position) return null;
+
+  const content = (
+    <>
+      {/* Backdrop to capture outside clicks */}
+      <div className="fixed inset-0 z-[9998]" onClick={onClose} />
+      <div
+        data-agent-native-composer-popover="true"
+        className="fixed z-[9999] w-[320px] overflow-y-auto rounded-lg border border-border bg-popover shadow-lg"
+        style={{
+          bottom: `calc(100vh - ${position.top}px + 4px)`,
+          left: Math.max(8, Math.min(position.left, window.innerWidth - 336)),
+          maxHeight: Math.min(320, position.top - 8),
+        }}
+      >
+        {isLoading && itemCount === 0 ? (
+          <LoadingSkeleton />
+        ) : itemCount === 0 ? (
+          <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+            {type === "@" ? (
+              query ? (
+                "No results found"
+              ) : (
+                "Type to search..."
+              )
+            ) : hint ? (
+              <HintWithLink hint={hint} />
+            ) : (
+              "No skills available"
+            )}
+          </div>
+        ) : (
+          <div ref={listRef} className="p-1">
+            {isLoading && <LoadingSkeletonRow />}
+            {type === "@"
+              ? (() => {
+                  let flatIndex = 0;
+                  return groupedMentions.map((group) => (
+                    <div key={group.section}>
+                      <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+                        {group.section}
+                      </div>
+                      {group.items.map((item) => {
+                        const idx = flatIndex++;
+                        return (
+                          <button
+                            key={item.id}
+                            data-mention-index={idx}
+                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
+                              idx === selectedIndex
+                                ? "bg-accent text-accent-foreground"
+                                : "hover:bg-accent/50"
+                            }`}
+                            onMouseEnter={() => setSelectedIndex(idx)}
+                            onClick={() => onSelectMention(item)}
+                          >
+                            <MentionItemIcon icon={item.icon} />
+                            <span className="truncate text-sm">
+                              {item.label}
+                            </span>
+                            {item.description && (
+                              <span className="ms-auto shrink-0 truncate max-w-[160px] text-xs text-muted-foreground">
+                                {item.description}
+                              </span>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  ));
+                })()
+              : (() => {
+                  let idx = 0;
+                  return (
+                    <>
+                      {commands.length > 0 && (
+                        <div>
+                          <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+                            Commands
+                          </div>
+                          {commands.map((cmd) => {
+                            const i = idx++;
+                            return (
+                              <button
+                                key={cmd.name}
+                                data-mention-index={i}
+                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
+                                  i === selectedIndex
+                                    ? "bg-accent text-accent-foreground"
+                                    : "hover:bg-accent/50"
+                                }`}
+                                onMouseEnter={() => setSelectedIndex(i)}
+                                onClick={() => onSelectCommand?.(cmd)}
+                              >
+                                <CommandIcon icon={cmd.icon} />
+                                <span className="min-w-0 flex-1">
+                                  <span className="block truncate text-sm">
+                                    /{cmd.name}
+                                  </span>
+                                  {cmd.description && (
+                                    <span className="block truncate text-xs text-muted-foreground">
+                                      {cmd.description}
+                                    </span>
+                                  )}
+                                </span>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      )}
+                      {skills.length > 0 && (
+                        <div>
+                          {commands.length > 0 && (
+                            <div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+                              Skills
+                            </div>
+                          )}
+                          {(skills as SkillResult[]).map((skill) => {
+                            const i = idx++;
+                            return (
+                              <button
+                                key={skill.path}
+                                data-mention-index={i}
+                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
+                                  i === selectedIndex
+                                    ? "bg-accent text-accent-foreground"
+                                    : "hover:bg-accent/50"
+                                }`}
+                                onMouseEnter={() => setSelectedIndex(i)}
+                                onClick={() => onSelectSkill(skill)}
+                              >
+                                <IconStack2 {...iconProps} />
+                                <span className="min-w-0 flex-1">
+                                  <span className="block truncate text-sm">
+                                    {skill.name}
+                                  </span>
+                                  {skill.description && (
+                                    <span className="block truncate text-xs text-muted-foreground">
+                                      {skill.description}
+                                    </span>
+                                  )}
+                                </span>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </>
+                  );
+                })()}
+          </div>
+        )}
+      </div>
+    </>
+  );
+
+  return createPortal(content, document.body);
+});

package/src/composer/PastedTextChip.tsx

@@ -0,0 +1,150 @@
+import type { Attachment } from "@assistant-ui/react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { IconClipboardText, IconX } from "@tabler/icons-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { cn } from "../utils.js";
+import { countLines, unwrapAttachmentEnvelope } from "./pasted-text.js";
+
+function readAttachmentText(attachment: Attachment): Promise<string> | string {
+  if ("file" in attachment && attachment.file instanceof File) {
+    return attachment.file.text();
+  }
+  const textPart = attachment.content?.find(
+    (p): p is { type: "text"; text: string } =>
+      p.type === "text" && "text" in p && typeof p.text === "string",
+  );
+  return textPart ? unwrapAttachmentEnvelope(textPart.text) : "";
+}
+
+function usePastedAttachmentText(attachment: Attachment): {
+  text: string;
+  lines: number;
+  chars: number;
+} {
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    const result = readAttachmentText(attachment);
+    if (typeof result === "string") {
+      setText(result);
+      return;
+    }
+    result
+      .then((value) => {
+        if (!cancelled) setText(value);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [attachment]);
+
+  return { text, lines: countLines(text), chars: text.length };
+}
+
+export interface PastedTextChipProps {
+  attachment: Attachment;
+  onRemove?: (id: string) => void;
+  /** Compact variant rendered inside sent user messages. */
+  compact?: boolean;
+}
+
+export function PastedTextChip({
+  attachment,
+  onRemove,
+  compact = false,
+}: PastedTextChipProps) {
+  const [open, setOpen] = useState(false);
+  const { text, lines, chars } = usePastedAttachmentText(attachment);
+
+  const handleRemove = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onRemove?.(attachment.id);
+    },
+    [attachment.id, onRemove],
+  );
+
+  const summary = lines > 0 ? `${lines} lines` : `${chars} chars`;
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "group relative inline-flex items-center gap-2 rounded-md border border-border/70 bg-muted/50 text-start text-foreground hover:bg-muted/70 cursor-pointer",
+            compact
+              ? "max-w-[220px] px-2 py-1.5 text-xs"
+              : "max-w-[260px] px-2.5 py-2 text-xs",
+            onRemove && !compact && "pe-7",
+          )}
+          aria-label="Preview pasted text"
+        >
+          <span
+            className={cn(
+              "flex shrink-0 items-center justify-center rounded bg-background text-muted-foreground",
+              compact ? "h-6 w-6" : "h-8 w-8",
+            )}
+          >
+            <IconClipboardText
+              className={compact ? "h-3.5 w-3.5" : "h-4 w-4"}
+            />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate font-medium">Pasted text</span>
+            <span className="block text-[11px] text-muted-foreground">
+              {summary}
+            </span>
+          </span>
+          {onRemove && (
+            <span
+              role="button"
+              tabIndex={-1}
+              onClick={handleRemove}
+              aria-label="Remove pasted text"
+              className={cn(
+                "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground",
+                compact ? "" : "absolute end-1.5 top-1.5",
+              )}
+            >
+              <IconX className="h-3 w-3" />
+            </span>
+          )}
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="top"
+          align="start"
+          sideOffset={6}
+          collisionPadding={12}
+          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-lg border border-border bg-popover text-popover-foreground shadow-lg origin-[var(--radix-popover-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
+        >
+          <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
+            <div className="flex items-center gap-2 min-w-0">
+              <IconClipboardText className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">Pasted text</span>
+              <span className="text-[11px] text-muted-foreground shrink-0">
+                {lines} lines · {chars} chars
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              aria-label="Close preview"
+              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
+            >
+              <IconX className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <pre className="max-h-[60vh] overflow-auto px-3 py-2 text-[12px] leading-[1.5] whitespace-pre-wrap break-words font-mono text-foreground">
+            {text}
+          </pre>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/src/composer/PromptComposer.spec.ts

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from "vitest";
+
+import { buildPromptComposerSubmission } from "./PromptComposer.js";
+
+describe("buildPromptComposerSubmission", () => {
+  it("passes images through files only — never inlines base64 into prompt text", async () => {
+    // Images are passed to `files` for the host to process through the
+    // attachment pipeline. They must NOT be inlined as base64 in `text`
+    // (≈700K tokens per MB of image data).
+    const file = new File(["fake image"], "sketch.png", {
+      type: "image/png",
+    });
+
+    const result = await buildPromptComposerSubmission({
+      text: "",
+      attachments: [
+        {
+          id: "sketch.png",
+          name: "sketch.png",
+          type: "image",
+          file,
+        },
+      ],
+    });
+
+    expect(result.files).toEqual([file]);
+    // text must not contain any base64 data or uploaded-image markup
+    expect(result.text).not.toContain("data:image");
+    expect(result.text).not.toContain("<uploaded-image");
+  });
+
+  it("escapes inline attachment metadata in standalone submissions", async () => {
+    const file = new File(["hello"], 'bad"name&.md', {
+      type: "text/markdown",
+    });
+
+    const result = await buildPromptComposerSubmission({
+      text: "Review this",
+      attachments: [
+        {
+          id: "bad",
+          name: file.name,
+          type: "document",
+          file,
+        },
+      ],
+    });
+
+    expect(result.text).toContain('name="bad&quot;name&amp;.md"');
+    expect(result.text).not.toContain('name="bad"name&.md"');
+  });
+
+  it("does not include image data in prompt text regardless of file size", async () => {
+    // Both small and large images stay in `files` only.
+    const smallFile = new File(["small image"], "small.png", {
+      type: "image/png",
+    });
+    const largeFile = new File([new Uint8Array(3 * 1024 * 1024)], "large.png", {
+      type: "image/png",
+    });
+
+    for (const file of [smallFile, largeFile]) {
+      const result = await buildPromptComposerSubmission({
+        text: "",
+        attachments: [{ id: file.name, name: file.name, type: "image", file }],
+      });
+      expect(result.files).toEqual([file]);
+      expect(result.text).not.toContain("data:image");
+    }
+  });
+});