@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/composer/PastedTextChip.tsx

@@ -0,0 +1,178 @@
+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";
+import { useComposerRuntimeAdapters } from "./runtime-adapters.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 adapters = useComposerRuntimeAdapters();
+  const t = adapters.translate!;
+  const formatNumber = adapters.formatNumber!;
+
+  const handleRemove = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onRemove?.(attachment.id);
+    },
+    [attachment.id, onRemove],
+  );
+
+  const lineSummary = t("agentChat.pastedText.lines", {
+    count: lines,
+    formattedCount: formatNumber(lines),
+    defaultValue: `${lines} lines`,
+  });
+  const charSummary = t("agentChat.pastedText.characters", {
+    count: chars,
+    formattedCount: formatNumber(chars),
+    defaultValue: `${chars} chars`,
+  });
+  const summary = lines > 0 ? lineSummary : charSummary;
+
+  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={t("agentChat.pastedText.preview", {
+            defaultValue: "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">
+              {t("agentChat.pastedText.title", {
+                defaultValue: "Pasted text",
+              })}
+            </span>
+            <span className="block text-[11px] text-muted-foreground">
+              {summary}
+            </span>
+          </span>
+          {onRemove && (
+            <span
+              role="button"
+              tabIndex={-1}
+              onClick={handleRemove}
+              aria-label={t("agentChat.pastedText.remove", {
+                defaultValue: "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">
+                {t("agentChat.pastedText.title", {
+                  defaultValue: "Pasted text",
+                })}
+              </span>
+              <span className="text-[11px] text-muted-foreground shrink-0">
+                {lineSummary} · {charSummary}
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              aria-label={t("agentChat.composer.closePreview", {
+                defaultValue: "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,110 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from "vitest";
+
+import {
+  buildPromptComposerSubmission,
+  shouldGateComposerForMissingEngine,
+} from "./PromptComposer.js";
+
+describe("shouldGateComposerForMissingEngine", () => {
+  it("never disables the composer while the status check is unresolved", () => {
+    for (const state of ["unknown", "unavailable"]) {
+      expect(
+        shouldGateComposerForMissingEngine({ state, hasSetupComponent: true }),
+      ).toBe(false);
+    }
+  });
+
+  it("gates only when a connect affordance can be rendered", () => {
+    expect(
+      shouldGateComposerForMissingEngine({
+        state: "missing",
+        hasSetupComponent: true,
+      }),
+    ).toBe(true);
+    expect(
+      shouldGateComposerForMissingEngine({
+        state: "missing",
+        hasSetupComponent: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("leaves the composer usable once an engine is configured", () => {
+    expect(
+      shouldGateComposerForMissingEngine({
+        state: "configured",
+        hasSetupComponent: true,
+      }),
+    ).toBe(false);
+  });
+});
+
+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");
+    }
+  });
+});