@nocobase/portal-template-default 1.0.16 → 1.0.17

package/src/extensions/nocobase-mail/components/mail-mass-tracking.tsx

@@ -0,0 +1,271 @@
+import { useMemo, useState } from "react";
+import { format, parseISO } from "date-fns";
+import { ChevronDown, Loader2, RefreshCw, RotateCcw, StopCircle } from "lucide-react";
+import { toast } from "sonner";
+import { mailApi } from "./mail-api";
+import { useMailMassMessages } from "./use-mail-mass-messages";
+import { MailMassMessageStatus, type MailMassMessage } from "./types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+const STATUS_STYLES: Record<MailMassMessageStatus, string> = {
+  pending: "border-blue-500/25 bg-blue-500/10 text-blue-600",
+  sending: "border-blue-500/25 bg-blue-500/10 text-blue-600",
+  sent: "border-green-500/25 bg-green-500/10 text-green-600",
+  failed: "border-red-500/25 bg-red-500/10 text-red-600",
+  canceled: "border-border bg-muted text-muted-foreground",
+  some_sent: "border-amber-500/25 bg-amber-500/10 text-amber-600",
+};
+
+const STATUS_LABELS: Record<MailMassMessageStatus, string> = {
+  pending: "Pending",
+  sending: "Sending",
+  sent: "Sent",
+  failed: "Failed",
+  canceled: "Canceled",
+  some_sent: "Partially sent",
+};
+
+function formatDate(value?: string | null) {
+  if (!value) return "—";
+  try {
+    return format(parseISO(value), "MMM d, yyyy · HH:mm");
+  } catch {
+    return value;
+  }
+}
+
+function resultText(result: unknown) {
+  if (!result) return undefined;
+  if (typeof result === "string") return result;
+  try {
+    return JSON.stringify(result);
+  } catch {
+    return "Unknown error";
+  }
+}
+
+function canCancel(task: MailMassMessage) {
+  return [MailMassMessageStatus.PENDING, MailMassMessageStatus.SENDING].includes(
+    task.status
+  );
+}
+
+function canResend(task: MailMassMessage) {
+  return [
+    MailMassMessageStatus.FAILED,
+    MailMassMessageStatus.CANCELED,
+    MailMassMessageStatus.SOME_SENT,
+  ].includes(task.status);
+}
+
+export function MailMassTracking() {
+  const roots = useMailMassMessages(null);
+  const [expandedId, setExpandedId] = useState<number>();
+  const children = useMailMassMessages(expandedId ?? -1, {
+    enabled: expandedId !== undefined,
+  });
+  const [confirm, setConfirm] = useState<{
+    action: "cancel" | "resend";
+    task: MailMassMessage;
+  }>();
+  const [working, setWorking] = useState(false);
+
+  const childProgress = useMemo(() => {
+    if (!expandedId || !children.messages.length) return undefined;
+    const sent = children.messages.filter(
+      (message) => message.status === MailMassMessageStatus.SENT
+    ).length;
+    return { sent, total: children.messages.length };
+  }, [children.messages, expandedId]);
+
+  const runAction = async () => {
+    if (!confirm) return;
+    setWorking(true);
+    try {
+      if (confirm.action === "cancel") {
+        await mailApi.cancelMassMessage(confirm.task.id);
+        toast.success("Bulk send task canceled");
+      } else {
+        await mailApi.resendMassMessage(confirm.task.id);
+        toast.success("Bulk send task queued again");
+      }
+      setConfirm(undefined);
+      await Promise.all([roots.refresh(), children.refresh()]);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Bulk task action failed");
+    } finally {
+      setWorking(false);
+    }
+  };
+
+  const taskActions = (task: MailMassMessage) => (
+    <div className="flex items-center gap-1">
+      {canCancel(task) && (
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={(event) => {
+            event.stopPropagation();
+            setConfirm({ action: "cancel", task });
+          }}
+        >
+          <StopCircle /> Cancel
+        </Button>
+      )}
+      {canResend(task) && (
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={(event) => {
+            event.stopPropagation();
+            setConfirm({ action: "resend", task });
+          }}
+        >
+          <RotateCcw /> Resend
+        </Button>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          Track delivery, cancel active jobs, and retry failed recipients.
+        </p>
+        <Button variant="outline" size="sm" onClick={() => void roots.refresh()}>
+          <RefreshCw /> Refresh
+        </Button>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border">
+        {roots.loading && !roots.messages.length ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="size-5 animate-spin text-muted-foreground" />
+          </div>
+        ) : roots.messages.length ? (
+          roots.messages.map((task) => {
+            const expanded = expandedId === task.id;
+            const recipients = task.to.split(",").filter(Boolean).length;
+            return (
+              <div key={task.id} className="border-b last:border-0">
+                <div className="grid w-full grid-cols-[minmax(0,1fr)_120px_150px_auto] items-center gap-4 px-4 py-3 hover:bg-muted/40">
+                  <button
+                    type="button"
+                    className="col-span-3 grid grid-cols-subgrid items-center text-left"
+                    onClick={() => setExpandedId(expanded ? undefined : task.id)}
+                  >
+                    <span className="min-w-0">
+                      <span className="block truncate text-sm font-medium">
+                        {task.message?.subject || "(no subject)"}
+                      </span>
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {recipients} recipients · from {task.from}
+                      </span>
+                    </span>
+                    <Badge variant="outline" className={STATUS_STYLES[task.status]}>
+                      {STATUS_LABELS[task.status]}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">
+                      {formatDate(task.createdAt)}
+                    </span>
+                  </button>
+                  <span className="flex items-center gap-2">
+                    {taskActions(task)}
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      title={expanded ? "Hide recipients" : "Show recipients"}
+                      onClick={() => setExpandedId(expanded ? undefined : task.id)}
+                    >
+                      <ChevronDown
+                        className={cn("size-4 transition-transform", expanded && "rotate-180")}
+                      />
+                    </Button>
+                  </span>
+                </div>
+                {expanded && (
+                  <div className="border-t bg-muted/20 px-4 py-3">
+                    {children.loading && !children.messages.length ? (
+                      <Loader2 className="mx-auto size-4 animate-spin text-muted-foreground" />
+                    ) : children.messages.length ? (
+                      <div className="space-y-2">
+                        {childProgress && (
+                          <p className="text-xs font-medium text-muted-foreground">
+                            {childProgress.sent} of {childProgress.total} sent
+                          </p>
+                        )}
+                        {children.messages.map((child) => (
+                          <div
+                            key={child.id}
+                            className="grid grid-cols-[minmax(0,1fr)_120px_150px_auto] items-center gap-4 rounded-md bg-background px-3 py-2"
+                          >
+                            <span className="truncate text-sm">{child.to}</span>
+                            <Badge variant="outline" className={STATUS_STYLES[child.status]}>
+                              {STATUS_LABELS[child.status]}
+                            </Badge>
+                            <span className="text-xs text-muted-foreground">
+                              {formatDate(child.sendAt)}
+                            </span>
+                            {taskActions(child)}
+                            {resultText(child.result) && (
+                              <p className="col-span-full text-xs text-destructive">
+                                {resultText(child.result)}
+                              </p>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="py-3 text-center text-xs text-muted-foreground">
+                        No recipient tasks found.
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        ) : (
+          <p className="py-12 text-center text-sm text-muted-foreground">
+            No bulk send tasks yet.
+          </p>
+        )}
+      </div>
+
+      <AlertDialog open={Boolean(confirm)} onOpenChange={(open) => !open && setConfirm(undefined)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {confirm?.action === "cancel" ? "Cancel bulk send?" : "Resend failed mail?"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {confirm?.action === "cancel"
+                ? "Recipients that were already sent will not be recalled."
+                : "Only failed or canceled recipients will be queued again."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Back</AlertDialogCancel>
+            <AlertDialogAction disabled={working} onClick={() => void runAction()}>
+              {working && <Loader2 className="animate-spin" />}
+              {confirm?.action === "cancel" ? "Cancel task" : "Resend"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-note-editor.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Loader2, StickyNote } from "lucide-react";
+import { toast } from "sonner";
+import type { MailMessage, MailNote } from "./types";
+import { mailApi } from "./mail-api";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export function MailNoteEditor({
+  message,
+  onChange,
+}: {
+  message: MailMessage;
+  onChange?: (note: MailNote | undefined) => void;
+}) {
+  const note = message.note?.[0];
+  const hasNote = Boolean(note?.note);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(note?.note ?? "");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setDraft(note?.note ?? "");
+  }, [note]);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      if (note) {
+        await mailApi.updateNote(note.id, message.id, draft);
+        onChange?.(draft.trim() ? { ...note, note: draft } : undefined);
+      } else {
+        const created = await mailApi.createNote(message.id, draft);
+        onChange?.(created);
+      }
+      setOpen(false);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to save note");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            className={cn("text-left", hasNote ? "block w-full" : "inline-flex")}
+          />
+        }
+      >
+        {hasNote ? (
+          <span className="block w-full rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2.5 transition-colors hover:bg-amber-500/15 dark:border-amber-400/25 dark:bg-amber-400/10 dark:hover:bg-amber-400/15">
+            <span className="flex items-start gap-2">
+              <StickyNote className="mt-0.5 size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+              <span className="line-clamp-3 text-xs leading-5 whitespace-pre-wrap text-foreground/90">
+                {note?.note}
+              </span>
+            </span>
+          </span>
+        ) : (
+          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground">
+            <StickyNote className="size-3.5" />
+            Add note
+          </span>
+        )}
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-80 gap-2">
+        <div className="px-1 text-xs font-semibold text-muted-foreground">
+          {hasNote ? "Edit note" : "Add note"}
+        </div>
+        <Textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Leave yourself a note about this email…"
+          className="min-h-24 text-sm"
+          autoFocus
+        />
+        <div className="flex items-center justify-end gap-1.5">
+          <Button variant="ghost" size="xs" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button size="xs" onClick={() => void save()} disabled={saving}>
+            {saving ? <Loader2 className="animate-spin" /> : null}
+            Save
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-recipient-input.tsx

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { Check, Loader2, UserRound, X } from "lucide-react";
+import { mailApi } from "./mail-api";
+import type { MailRecipientOption } from "./types";
+import { cn } from "@/lib/utils";
+
+export function currentToken(value: string) {
+  return value.split(/[,;\n]/).at(-1)?.trim().toLocaleLowerCase() ?? "";
+}
+
+export function appendRecipient(value: string, email: string) {
+  const endsWithSeparator = /[,;\n]\s*$/.test(value);
+  const entries = value
+    .split(/[,;\n]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+  if (!endsWithSeparator && entries.length) entries.pop();
+  if (!entries.some((item) => item.toLocaleLowerCase() === email.toLocaleLowerCase())) {
+    entries.push(email);
+  }
+  return entries.join(", ");
+}
+
+export function mergeRecipients(value: string, additions: string) {
+  const entries = `${value},${additions}`
+    .split(/[,;\n]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+  return entries
+    .filter(
+      (item, index) =>
+        entries.findIndex(
+          (candidate) =>
+            candidate.toLocaleLowerCase() === item.toLocaleLowerCase()
+        ) === index
+    )
+    .join(", ");
+}
+
+export interface MailRecipientInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  options?: MailRecipientOption[];
+  placeholder?: string;
+  className?: string;
+}
+
+export function MailRecipientInput({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className,
+}: MailRecipientInputProps) {
+  const [users, setUsers] = useState<MailRecipientOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const selectingOption = useRef(false);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    mailApi
+      .getUsers()
+      .then((records) => {
+        if (!active) return;
+        const nocobaseUsers = records.flatMap((record) =>
+            record.email
+              ? [{ email: record.email, name: record.nickname || record.username }]
+              : []
+          );
+        const merged = [...nocobaseUsers, ...(options ?? [])];
+        setUsers(
+          merged.filter(
+            (item, index) =>
+              merged.findIndex(
+                (candidate) =>
+                  candidate.email.toLocaleLowerCase() === item.email.toLocaleLowerCase()
+              ) === index
+          )
+        );
+      })
+      .catch(() => active && setUsers(options ?? []))
+      .finally(() => active && setLoading(false));
+    return () => {
+      active = false;
+    };
+  }, [options]);
+
+  const recipients = useMemo(
+    () =>
+      value
+        .split(/[,;\n]/)
+        .map((item) => item.trim())
+        .filter(
+          (item, index, entries) =>
+            item &&
+            entries.findIndex(
+              (candidate) =>
+                candidate.toLocaleLowerCase() === item.toLocaleLowerCase()
+            ) === index
+        ),
+    [value]
+  );
+  const selected = useMemo(
+    () => new Set(recipients.map((item) => item.toLocaleLowerCase())),
+    [recipients]
+  );
+  const matches = users
+    .filter((item) => {
+      const token = query.trim().toLocaleLowerCase();
+      if (!token) return true;
+      return `${item.name ?? ""} ${item.email} ${item.description ?? ""}`
+        .toLocaleLowerCase()
+        .includes(token);
+    })
+    .slice(0, 8);
+
+  const commitRecipients = useCallback((rawValue: string) => {
+    onChange(mergeRecipients(value, rawValue));
+    setQuery("");
+  }, [onChange, value]);
+
+  const commitQuery = useCallback(() => {
+    commitRecipients(query);
+  }, [commitRecipients, query]);
+
+  const removeRecipient = useCallback(
+    (email: string) => {
+      onChange(
+        recipients
+          .filter((item) => item.toLocaleLowerCase() !== email.toLocaleLowerCase())
+          .join(", ")
+      );
+    },
+    [onChange, recipients]
+  );
+
+  return (
+    <Combobox.Root
+      multiple
+      open={open}
+      onOpenChange={setOpen}
+      inputValue={query}
+      onInputValueChange={(nextValue, details) => {
+        if (details.reason !== "input-change" && details.reason !== "none") return;
+        if (/[,;\n]\s*$/.test(nextValue)) {
+          commitRecipients(nextValue);
+          return;
+        }
+        setQuery(nextValue);
+        setOpen(true);
+      }}
+      value={recipients}
+      onValueChange={(nextRecipients) => {
+        onChange(nextRecipients.join(", "));
+        setQuery("");
+        selectingOption.current = false;
+      }}
+      filter={null}
+      autoHighlight
+    >
+      <Combobox.InputGroup
+        className={cn(
+          "flex min-h-9 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-2 py-1 text-sm transition-colors outline-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30",
+          className
+        )}
+      >
+        {recipients.map((email) => (
+          <span
+            key={email.toLocaleLowerCase()}
+            className="inline-flex max-w-full items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs"
+          >
+            <span className="max-w-48 truncate">{email}</span>
+            <button
+              type="button"
+              title={`Remove ${email}`}
+              aria-label={`Remove ${email}`}
+              className="rounded-sm text-muted-foreground hover:text-foreground"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => removeRecipient(email)}
+            >
+              <X className="size-3" />
+            </button>
+          </span>
+        ))}
+        <Combobox.Input
+          aria-label={placeholder}
+          placeholder={recipients.length ? undefined : placeholder}
+          className="h-6 min-w-28 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground"
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            if (!selectingOption.current) commitQuery();
+          }}
+          onKeyDown={(event) => {
+            if ((event.key === "," || event.key === ";") && query.trim()) {
+              event.preventDefault();
+              commitQuery();
+              return;
+            }
+            if (event.key === "Enter" && query.trim() && matches.length === 0) {
+              event.preventDefault();
+              commitQuery();
+            }
+          }}
+        />
+      </Combobox.InputGroup>
+      <Combobox.Portal>
+        <Combobox.Positioner
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          className="isolate z-50 w-[var(--anchor-width)] min-w-72"
+        >
+          <Combobox.Popup
+            initialFocus={false}
+            className="rounded-lg bg-popover p-1.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden"
+          >
+            <Combobox.List className="max-h-72 overflow-y-auto outline-hidden">
+              {loading ? (
+                <div className="flex items-center justify-center py-4">
+                  <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                </div>
+              ) : matches.length ? (
+                matches.map((item) => {
+                  const isSelected = selected.has(item.email.toLocaleLowerCase());
+                  return (
+                    <Combobox.Item
+                      key={item.email}
+                      value={item.email}
+                      onMouseDown={() => {
+                        selectingOption.current = true;
+                      }}
+                      className="flex w-full cursor-default items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm outline-hidden data-highlighted:bg-muted"
+                    >
+                      <UserRound className="size-4 shrink-0 text-muted-foreground" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate font-medium">{item.name || item.email}</span>
+                        {item.name && (
+                          <span className="block truncate text-xs text-muted-foreground">{item.email}</span>
+                        )}
+                      </span>
+                      {isSelected && <Check className="size-4 text-primary" />}
+                    </Combobox.Item>
+                  );
+                })
+              ) : (
+                <p className="px-2.5 py-3 text-xs text-muted-foreground">
+                  Type a complete email address to add it directly.
+                </p>
+              )}
+            </Combobox.List>
+          </Combobox.Popup>
+        </Combobox.Positioner>
+      </Combobox.Portal>
+    </Combobox.Root>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-reply-quote.ts

@@ -0,0 +1,28 @@
+export interface MailReplyContent {
+  body: string;
+  replyBody?: string;
+}
+
+const replyQuotePattern =
+  /<div\b(?=[^>]*\bdata-role=["']reply-quote["'])[^>]*>\s*<blockquote\b(?=[^>]*\btype=["']cite["'])[^>]*>([\s\S]*?)<\/blockquote>\s*<\/div>\s*$/i;
+
+export function serializeReplyQuote(body: string, replyBody?: string) {
+  if (!replyBody) return body;
+  return [
+    body,
+    '<div class="nocobase-quote nb-mail-quote" data-role="reply-quote">',
+    '<blockquote type="cite" style="border-left: 1px solid #ccc; padding-left: 8px; margin: 0;">',
+    replyBody,
+    "</blockquote>",
+    "</div>",
+  ].join("");
+}
+
+export function splitReplyQuote(value: string): MailReplyContent {
+  const match = replyQuotePattern.exec(value);
+  if (!match || match.index === undefined) return { body: value };
+  return {
+    body: value.slice(0, match.index),
+    replyBody: match[1],
+  };
+}