@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/mail/app/components/email/ComposeEditor.tsx

@@ -1,16 +1,8 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@agent-native/toolkit/ui/dialog";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
+import type { EditorView } from "@tiptap/pm/view";
 import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { common, createLowlight } from "lowlight";
@@ -23,6 +15,15 @@ import {
 } from "react";
 import { Markdown } from "tiptap-markdown";
 
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 
 import { CodeBlockLangPicker } from "./CodeBlockLangPicker";
@@ -59,6 +60,8 @@ interface ComposeEditorProps {
     context?: string;
     submit?: boolean;
   }) => void;
+  /** Uploads an image file and resolves to its hosted URL, for pasted/dropped/slash-inserted images. */
+  onUploadImage: (file: File) => Promise<string>;
 }
 
 export const ComposeEditor = forwardRef<
@@ -76,6 +79,7 @@ export const ComposeEditor = forwardRef<
     draftId,
     getCurrentDraftBody,
     sendToAgent,
+    onUploadImage,
   },
   ref,
 ) {
@@ -89,9 +93,71 @@ export const ComposeEditor = forwardRef<
   const onChangeRef = useRef(onChange);
   const onSendRef = useRef(onSend);
   const onCloseRef = useRef(onClose);
+  const onUploadImageRef = useRef(onUploadImage);
   onChangeRef.current = onChange;
   onSendRef.current = onSend;
   onCloseRef.current = onClose;
+  onUploadImageRef.current = onUploadImage;
+
+  // Inserts a placeholder image node showing a local object URL immediately,
+  // then swaps in the hosted URL (or removes the node on failure) once the
+  // upload settles, so pasted/dropped screenshots appear inline right away.
+  // Operates on the raw ProseMirror view (rather than the Tiptap `Editor`)
+  // because it must run from inside `editorProps.handlePaste`/`handleDrop`,
+  // which fire before the `Editor` instance returned by `useEditor` exists.
+  const insertUploadingImage = (
+    view: EditorView,
+    file: File,
+    atPos?: number,
+  ) => {
+    const objectUrl = URL.createObjectURL(file);
+    const imageType = view.state.schema.nodes.image;
+    if (!imageType) return;
+
+    const insertTr = view.state.tr;
+    const imageNode = imageType.create({ src: objectUrl, alt: "" });
+    if (atPos != null) {
+      insertTr.insert(atPos, imageNode);
+    } else {
+      insertTr.replaceSelectionWith(imageNode);
+    }
+    view.dispatch(insertTr);
+
+    const findNodePos = () => {
+      let found: number | null = null;
+      view.state.doc.descendants((node, pos) => {
+        if (found != null) return false;
+        if (node.type.name === "image" && node.attrs.src === objectUrl) {
+          found = pos;
+          return false;
+        }
+        return true;
+      });
+      return found;
+    };
+
+    void onUploadImageRef
+      .current(file)
+      .then((url) => {
+        const pos = findNodePos();
+        if (pos == null) return;
+        const tr = view.state.tr.setNodeAttribute(pos, "src", url);
+        view.dispatch(tr);
+      })
+      .catch(() => {
+        const pos = findNodePos();
+        if (pos == null) return;
+        const node = view.state.doc.nodeAt(pos);
+        if (!node) return;
+        const tr = view.state.tr.delete(pos, pos + node.nodeSize);
+        view.dispatch(tr);
+      })
+      .finally(() => {
+        URL.revokeObjectURL(objectUrl);
+      });
+  };
+  const insertUploadingImageRef = useRef(insertUploadingImage);
+  insertUploadingImageRef.current = insertUploadingImage;
 
   const editor = useEditor({
     extensions: [
@@ -143,6 +209,35 @@ export const ComposeEditor = forwardRef<
         }
         return false;
       },
+      handlePaste: (view, event) => {
+        const files = Array.from(event.clipboardData?.items ?? [])
+          .filter(
+            (item) => item.kind === "file" && item.type.startsWith("image/"),
+          )
+          .map((item) => item.getAsFile())
+          .filter((file): file is File => file != null);
+        if (files.length === 0) return false;
+        event.preventDefault();
+        for (const file of files) {
+          insertUploadingImageRef.current(view, file);
+        }
+        return true;
+      },
+      handleDrop: (view, event) => {
+        const files = Array.from(event.dataTransfer?.files ?? []).filter(
+          (file) => file.type.startsWith("image/"),
+        );
+        if (files.length === 0) return false;
+        event.preventDefault();
+        const dropPos = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        for (const file of files) {
+          insertUploadingImageRef.current(view, file, dropPos?.pos);
+        }
+        return true;
+      },
     },
     onUpdate: ({ editor }) => {
       // Only a genuine local keystroke marks the user as "actively typing".
@@ -264,7 +359,11 @@ export const ComposeEditor = forwardRef<
         getCurrentDraftBody={getCurrentDraftBody}
         sendToAgent={sendToAgent}
       />
-      <ComposeSlashMenu editor={editor} onGenerate={onGenerate} />
+      <ComposeSlashMenu
+        editor={editor}
+        onGenerate={onGenerate}
+        onUploadImage={onUploadImage}
+      />
       <CodeBlockLangPicker editor={editor} />
       <EditorContent editor={editor} />
 

package/corpus/templates/mail/app/components/email/ComposeModal.tsx

@@ -1,22 +1,4 @@
 import { useAgentChatGenerating, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   appendSignatureToBody,
   splitAppendedSignature,
@@ -41,6 +23,24 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import type { CSSProperties } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAccountFilter } from "@/hooks/use-account-filter";
 import { useAliases } from "@/hooks/use-aliases";
 import { useUpdateQueuedDraft } from "@/hooks/use-draft-queue";
@@ -50,7 +50,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { useScheduleEmail } from "@/hooks/use-scheduled-jobs";
 import { canUseAgentGenerate } from "@/lib/agent-generate";
 import { expandAliasTokens } from "@/lib/alias-utils";
-import { openFilePicker, uploadFiles } from "@/lib/upload";
+import { openFilePicker, uploadFile, uploadFiles } from "@/lib/upload";
 import { cn } from "@/lib/utils";
 
 import { AttachmentStrip } from "./AttachmentStrip";
@@ -449,6 +449,16 @@ export function ComposeModal({
     }
   };
 
+  const handleUploadImage = async (file: File) => {
+    try {
+      const result = await uploadFile(file);
+      return result.url;
+    } catch (err) {
+      toast.error(t("mail.toasts.failedToUploadImage"));
+      throw err;
+    }
+  };
+
   const handleAttach = async () => {
     const file = await openFilePicker("*/*");
     if (!file) return;
@@ -465,6 +475,17 @@ export function ComposeModal({
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     const files = Array.from(e.dataTransfer.files ?? []);
     if (files.length === 0) return;
+    // All-image drops landing inside the editor are left alone here so
+    // ComposeEditor's own handleDrop (bubble phase) can insert them inline;
+    // everything else (non-image or mixed drops) still goes to attachments.
+    const target = e.target as HTMLElement;
+    const droppedOnEditor = target.closest(".compose-editor") != null;
+    if (
+      droppedOnEditor &&
+      files.every((file) => file.type.startsWith("image/"))
+    ) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
     void handleAttachFiles(files);
@@ -746,6 +767,7 @@ export function ComposeModal({
             showQuoted={showQuoted}
             setShowQuoted={setShowQuoted}
             signature={settings?.signature}
+            onUploadImage={handleUploadImage}
           />
 
           {/* Attachments */}
@@ -917,6 +939,7 @@ function ComposeBody({
   showQuoted,
   setShowQuoted,
   signature,
+  onUploadImage,
 }: {
   activeDraft: ComposeState;
   activeId: string;
@@ -935,6 +958,7 @@ function ComposeBody({
   showQuoted: boolean;
   setShowQuoted: (show: boolean) => void;
   signature?: string;
+  onUploadImage: (file: File) => Promise<string>;
 }) {
   const t = useT();
   const [editableContent, quotedContent] = useMemo(
@@ -1002,6 +1026,7 @@ function ComposeBody({
           })
         }
         sendToAgent={sendToAgent}
+        onUploadImage={onUploadImage}
       />
       {hasQuote && (
         <>

package/corpus/templates/mail/app/components/email/ComposeSlashMenu.tsx

@@ -11,6 +11,7 @@ import {
   IconMinus,
   IconPencil,
   IconPhoto,
+  IconMessage2,
 } from "@tabler/icons-react";
 import type { Editor } from "@tiptap/react";
 import {
@@ -21,21 +22,61 @@ import {
   useRef,
 } from "react";
 
+import { useSnippets, type Snippet } from "@/hooks/use-snippets";
+import { openFilePicker } from "@/lib/upload";
 import { cn } from "@/lib/utils";
 interface ComposeSlashMenuProps {
   editor: Editor;
   onGenerate: () => void;
+  onUploadImage: (file: File) => Promise<string>;
 }
 
 interface CommandItem {
-  titleKey: string;
-  descriptionKey: string;
+  // Either a translation key or a literal string may be supplied — literal
+  // strings win, so dynamic (non-translatable) content like a saved snippet's
+  // name can share the same command shape as the built-in i18n-keyed items.
+  titleKey?: string;
+  title?: string;
+  descriptionKey?: string;
+  description?: string;
   icon: React.ElementType;
   action: (editor: Editor) => void;
   category?: string;
 }
 
-function createCommands(onGenerate: () => void): CommandItem[] {
+/**
+ * Case-insensitive subsequence match: every character of `query` must appear
+ * in `text` in order, not necessarily contiguously (e.g. "mtg" matches
+ * "meeting"). Empty query matches everything.
+ */
+function fuzzyMatch(text: string, query: string): boolean {
+  if (!query) return true;
+  const haystack = text.toLowerCase();
+  let position = 0;
+  for (const char of query.toLowerCase()) {
+    position = haystack.indexOf(char, position);
+    if (position === -1) return false;
+    position += 1;
+  }
+  return true;
+}
+
+function createSnippetCommands(snippets: Snippet[]): CommandItem[] {
+  return snippets.map((snippet) => ({
+    title: snippet.name,
+    description: snippet.body,
+    icon: IconMessage2,
+    category: "snippets",
+    action: (editor) => {
+      editor.chain().focus().insertContent(snippet.body).run();
+    },
+  }));
+}
+
+function createCommands(
+  onGenerate: () => void,
+  onInsertImage: (editor: Editor) => void,
+): CommandItem[] {
   return [
     {
       titleKey: "mail.composeSlash.text",
@@ -113,9 +154,7 @@ function createCommands(onGenerate: () => void): CommandItem[] {
       descriptionKey: "mail.composeSlash.uploadImage",
       icon: IconPhoto,
       category: "media",
-      action: (editor) => {
-        editor.chain().focus().setImage({ src: "" }).run();
-      },
+      action: onInsertImage,
     },
     {
       titleKey: "mail.composeSlash.generate",
@@ -132,6 +171,7 @@ function createCommands(onGenerate: () => void): CommandItem[] {
 export function ComposeSlashMenu({
   editor,
   onGenerate,
+  onUploadImage,
 }: ComposeSlashMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -150,15 +190,74 @@ export function ComposeSlashMenu({
   const menuRef = useRef<HTMLDivElement>(null);
   const slashPosRef = useRef<number | null>(null);
   const t = useT();
+  const { data: snippetsData } = useSnippets();
+  const snippets = snippetsData?.snippets ?? [];
 
-  const commands = createCommands(onGenerate);
-
-  const filteredCommands = commands.filter(
-    (cmd) =>
-      t(cmd.titleKey).toLowerCase().includes(query.toLowerCase()) ||
-      t(cmd.descriptionKey).toLowerCase().includes(query.toLowerCase()),
+  const handleInsertImage = useCallback(
+    (targetEditor: Editor) => {
+      void (async () => {
+        const file = await openFilePicker("image/*");
+        if (!file) return;
+        const objectUrl = URL.createObjectURL(file);
+        targetEditor
+          .chain()
+          .focus()
+          .setImage({ src: objectUrl, alt: "" })
+          .run();
+        try {
+          const url = await onUploadImage(file);
+          targetEditor.state.doc.descendants((node, pos) => {
+            if (node.type.name === "image" && node.attrs.src === objectUrl) {
+              targetEditor
+                .chain()
+                .command(({ tr }) => {
+                  tr.setNodeAttribute(pos, "src", url);
+                  return true;
+                })
+                .run();
+              return false;
+            }
+            return true;
+          });
+        } catch {
+          targetEditor.state.doc.descendants((node, pos) => {
+            if (node.type.name === "image" && node.attrs.src === objectUrl) {
+              targetEditor
+                .chain()
+                .deleteRange({ from: pos, to: pos + node.nodeSize })
+                .run();
+              return false;
+            }
+            return true;
+          });
+        } finally {
+          URL.revokeObjectURL(objectUrl);
+        }
+      })();
+    },
+    [onUploadImage],
   );
 
+  const commands = createCommands(onGenerate, handleInsertImage);
+  const snippetCommands = createSnippetCommands(snippets);
+
+  const filteredCommands = [
+    ...commands.filter(
+      (cmd) =>
+        t(cmd.titleKey ?? "")
+          .toLowerCase()
+          .includes(query.toLowerCase()) ||
+        t(cmd.descriptionKey ?? "")
+          .toLowerCase()
+          .includes(query.toLowerCase()),
+    ),
+    ...snippetCommands.filter(
+      (cmd) =>
+        fuzzyMatch(cmd.title ?? "", query) ||
+        fuzzyMatch(cmd.description ?? "", query),
+    ),
+  ];
+
   const executeCommand = useCallback(
     (cmd: CommandItem) => {
       if (slashPosRef.current !== null) {
@@ -278,6 +377,9 @@ export function ComposeSlashMenu({
 
   const basicCommands = filteredCommands.filter((c) => c.category === "basic");
   const mediaCommands = filteredCommands.filter((c) => c.category === "media");
+  const snippetGroup = filteredCommands.filter(
+    (c) => c.category === "snippets",
+  );
   const aiCommands = filteredCommands.filter((c) => c.category === "ai");
 
   return (
@@ -333,6 +435,26 @@ export function ComposeSlashMenu({
             })}
           </>
         )}
+        {snippetGroup.length > 0 && (
+          <>
+            <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              {t("mail.composeSlash.snippets")}
+            </div>
+            {snippetGroup.map((cmd) => {
+              const globalIndex = filteredCommands.indexOf(cmd);
+              return (
+                <CommandButton
+                  key={cmd.title}
+                  cmd={cmd}
+                  t={t}
+                  isSelected={globalIndex === selectedIndex}
+                  onExecute={() => executeCommand(cmd)}
+                  onHover={() => setSelectedIndex(globalIndex)}
+                />
+              );
+            })}
+          </>
+        )}
         {aiCommands.length > 0 && (
           <>
             <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
@@ -383,12 +505,12 @@ function CommandButton({
       <div className="flex items-center justify-center w-8 h-8 rounded-md border border-border bg-background text-muted-foreground">
         <cmd.icon size={16} />
       </div>
-      <div>
-        <div className="text-sm font-medium text-foreground">
-          {t(cmd.titleKey)}
+      <div className="min-w-0">
+        <div className="text-sm font-medium text-foreground truncate">
+          {cmd.title ?? t(cmd.titleKey ?? "")}
         </div>
-        <div className="text-xs text-muted-foreground">
-          {t(cmd.descriptionKey)}
+        <div className="text-xs text-muted-foreground truncate">
+          {cmd.description ?? t(cmd.descriptionKey ?? "")}
         </div>
       </div>
     </button>