@agent-native/toolkit 0.14.3 → 0.15.0

package/src/composer/PastedTextChip.tsx

@@ -5,6 +5,7 @@ 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) {
@@ -58,6 +59,9 @@ export function PastedTextChip({
 }: 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) => {
@@ -67,7 +71,17 @@ export function PastedTextChip({
     [attachment.id, onRemove],
   );
 
-  const summary = lines > 0 ? `${lines} lines` : `${chars} chars`;
+  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}>
@@ -81,7 +95,9 @@ export function PastedTextChip({
               : "max-w-[260px] px-2.5 py-2 text-xs",
             onRemove && !compact && "pe-7",
           )}
-          aria-label="Preview pasted text"
+          aria-label={t("agentChat.pastedText.preview", {
+            defaultValue: "Preview pasted text",
+          })}
         >
           <span
             className={cn(
@@ -94,7 +110,11 @@ export function PastedTextChip({
             />
           </span>
           <span className="min-w-0 flex-1">
-            <span className="block truncate font-medium">Pasted text</span>
+            <span className="block truncate font-medium">
+              {t("agentChat.pastedText.title", {
+                defaultValue: "Pasted text",
+              })}
+            </span>
             <span className="block text-[11px] text-muted-foreground">
               {summary}
             </span>
@@ -104,7 +124,9 @@ export function PastedTextChip({
               role="button"
               tabIndex={-1}
               onClick={handleRemove}
-              aria-label="Remove pasted text"
+              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",
@@ -126,15 +148,21 @@ export function PastedTextChip({
           <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-sm font-medium truncate">
+                {t("agentChat.pastedText.title", {
+                  defaultValue: "Pasted text",
+                })}
+              </span>
               <span className="text-[11px] text-muted-foreground shrink-0">
-                {lines} lines · {chars} chars
+                {lineSummary} · {charSummary}
               </span>
             </div>
             <button
               type="button"
               onClick={() => setOpen(false)}
-              aria-label="Close preview"
+              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" />

package/src/composer/PromptComposer.tsx

@@ -315,6 +315,7 @@ function ImagePreviewLightbox({
   alt: string;
   onClose: () => void;
 }) {
+  const t = useComposerRuntimeAdapters().translate!;
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -330,7 +331,9 @@ function ImagePreviewLightbox({
   return (
     <div
       role="dialog"
-      aria-label="Image preview"
+      aria-label={t("agentChat.composer.imagePreview", {
+        defaultValue: "Image preview",
+      })}
       onClick={onClose}
       className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 p-6 cursor-zoom-out"
     >
@@ -343,7 +346,9 @@ function ImagePreviewLightbox({
       <button
         type="button"
         onClick={onClose}
-        aria-label="Close preview"
+        aria-label={t("agentChat.composer.closePreview", {
+          defaultValue: "Close preview",
+        })}
         className="absolute end-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/30 bg-black/40 text-white hover:bg-black/60"
       >
         <IconX className="h-4 w-4" />
@@ -361,6 +366,7 @@ function AttachmentChip({
 }) {
   const src = useMemo(() => getImageSrc(attachment), [attachment]);
   const [previewOpen, setPreviewOpen] = useState(false);
+  const t = useComposerRuntimeAdapters().translate!;
   useEffect(
     () => () => {
       if (src?.startsWith("blob:")) URL.revokeObjectURL(src);
@@ -378,7 +384,10 @@ function AttachmentChip({
         <button
           type="button"
           onClick={() => setPreviewOpen(true)}
-          aria-label={`Preview ${attachment.name}`}
+          aria-label={t("agentChat.composer.previewAttachment", {
+            name: attachment.name,
+            defaultValue: `Preview ${attachment.name}`,
+          })}
           className="agent-composer-attachment-image group relative flex h-16 min-w-16 max-w-28 cursor-zoom-in items-center justify-center overflow-hidden rounded-lg border border-border/70 bg-muted/50"
         >
           <img
@@ -400,7 +409,10 @@ function AttachmentChip({
                 onRemove(attachment.id);
               }
             }}
-            aria-label={`Remove ${attachment.name}`}
+            aria-label={t("agentChat.composer.removeAttachment", {
+              name: attachment.name,
+              defaultValue: `Remove ${attachment.name}`,
+            })}
             className="absolute end-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground hover:text-foreground"
           >
             <IconX className="h-3 w-3" />
@@ -420,13 +432,17 @@ function AttachmentChip({
   return (
     <div className="agent-composer-attachment-chip group relative inline-flex max-w-[200px] items-center gap-2 rounded-md border border-border/70 bg-muted/50 px-2 py-1.5 text-xs">
       <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-background text-[9px] font-semibold uppercase text-muted-foreground">
-        {attachment.name.split(".").pop() || "file"}
+        {attachment.name.split(".").pop() ||
+          t("agentChat.composer.file", { defaultValue: "file" })}
       </div>
       <span className="min-w-0 truncate font-medium">{attachment.name}</span>
       <button
         type="button"
         onClick={() => onRemove(attachment.id)}
-        aria-label={`Remove ${attachment.name}`}
+        aria-label={t("agentChat.composer.removeAttachment", {
+          name: attachment.name,
+          defaultValue: `Remove ${attachment.name}`,
+        })}
         className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
       >
         <IconX className="h-3 w-3" />
@@ -506,6 +522,7 @@ function PromptComposerInner({
   composerRef,
 }: PromptComposerProps) {
   const adapters = useComposerRuntimeAdapters();
+  const t = adapters.translate!;
   const modelsAdapter = adapters.models!;
   const BuilderSetupCard = modelsAdapter.BuilderSetupCard;
   const BuilderSetupContent = modelsAdapter.BuilderSetupContent;
@@ -641,7 +658,11 @@ function PromptComposerInner({
           maxDocumentAttachmentBytes={maxDocumentAttachmentBytes}
           documentAttachmentLimitLabel={documentAttachmentLimitLabel}
           placeholder={
-            gateComposer ? "Connect AI above to continue..." : placeholder
+            gateComposer
+              ? t("agentChat.composer.connectAbove", {
+                  defaultValue: "Connect AI above to continue...",
+                })
+              : placeholder
           }
           initialText={initialText}
           initialTextKey={initialTextKey}

package/src/composer/TiptapComposer.spec.ts

@@ -28,6 +28,31 @@ import {
 } from "./TiptapComposer.js";
 
 describe("createTiptapComposerExtensions", () => {
+  it("refreshes the rendered placeholder after a locale change", () => {
+    let placeholder = "Ask the agent...";
+    const element = document.createElement("div");
+    const editor = new Editor({
+      element,
+      extensions: createTiptapComposerExtensions(() => placeholder),
+    });
+
+    expect(
+      element
+        .querySelector(".is-editor-empty")
+        ?.getAttribute("data-placeholder"),
+    ).toBe("Ask the agent...");
+
+    placeholder = "Frag den Agenten...";
+    editor.view.dispatch(editor.state.tr.setSelection(editor.state.selection));
+
+    expect(
+      element
+        .querySelector(".is-editor-empty")
+        ?.getAttribute("data-placeholder"),
+    ).toBe("Frag den Agenten...");
+    editor.destroy();
+  });
+
   it("rejects a truthy editor after BFCache/remount destruction", () => {
     const editor = new Editor({
       element: document.createElement("div"),
@@ -68,6 +93,17 @@ describe("createTiptapComposerExtensions", () => {
     expect(compactComposerReasoningEffortLabel("medium")).toBe("Med");
     expect(compactComposerReasoningEffortLabel("minimal")).toBe("Min");
     expect(compactComposerReasoningEffortLabel("xhigh")).toBe("XHigh");
+
+    const translate = (key: string, options?: Record<string, unknown>) =>
+      key === "agentChat.composer.defaultModel"
+        ? "Standardmodell"
+        : key === "agentChat.composer.reasoningMediumShort"
+          ? "Mittel"
+          : String(options?.defaultValue ?? key);
+    expect(compactComposerModelName("auto", translate)).toBe("Standardmodell");
+    expect(compactComposerReasoningEffortLabel("medium", translate)).toBe(
+      "Mittel",
+    );
   });
 
   it("keeps the prompt composer schema minimal and restores legacy draft HTML", () => {
@@ -202,6 +238,14 @@ describe("createTiptapComposerExtensions", () => {
         attachmentCount: 1,
       }),
     ).toBe("Create an extension: Use the attached context.");
+    expect(
+      displayableComposerModeMessage({
+        messagePrefix: "Erstelle eine Erweiterung: ",
+        trimmedText: "",
+        attachmentCount: 1,
+        attachedContextFallback: "Verwende den angehängten Kontext.",
+      }),
+    ).toBe("Erstelle eine Erweiterung: Verwende den angehängten Kontext.");
   });
 
   it("detects oversized PDF attachments before submit", () => {
@@ -256,6 +300,47 @@ describe("createTiptapComposerExtensions", () => {
     ).toBeNull();
   });
 
+  it("localizes a custom multipart document cap", () => {
+    const file = new File(
+      [new Uint8Array(4 * 1024 * 1024 + 1)],
+      "reference.pdf",
+      { type: "application/pdf" },
+    );
+    let translatedOptions: Record<string, unknown> | undefined;
+
+    const error = getOversizedDocumentAttachmentError(
+      [
+        {
+          type: "document",
+          name: "reference.pdf",
+          contentType: "application/pdf",
+          file,
+        },
+      ],
+      {
+        maxBytes: 4 * 1024 * 1024,
+        label: "Präsentationsdateien",
+        translate: (key, options) => {
+          expect(key).toBe("agentChat.composer.documentTooLarge");
+          translatedOptions = options;
+          return `„${String(options?.name)}“ ist ${String(options?.size)} MB groß. ${String(options?.label)} sind auf ${String(options?.maxSize)} MB begrenzt.`;
+        },
+      },
+    );
+
+    expect(error).toBe(
+      "„reference.pdf“ ist 4.0 MB groß. Präsentationsdateien sind auf 4 MB begrenzt.",
+    );
+    expect(translatedOptions).toEqual(
+      expect.objectContaining({
+        name: "reference.pdf",
+        size: "4.0",
+        label: "Präsentationsdateien",
+        maxSize: "4",
+      }),
+    );
+  });
+
   it("maps Enter keybindings to immediate and queued submit intents", () => {
     const enter = {
       key: "Enter",