@nocobase/portal-template-default 1.0.16 → 1.0.17

package/src/extensions/nocobase-mail/components/mail-api.ts

@@ -0,0 +1,423 @@
+import { nocobaseClient } from "@/lib/nocobase/client";
+import type {
+  MailAccount,
+  MailIdentity,
+  MailLabel,
+  MailListParams,
+  MailListResponse,
+  MailMassSendSettings,
+  MailMassListResponse,
+  MailMassMessage,
+  MailMessage,
+  MailNote,
+  MailSendPayload,
+  MailTemplate,
+  MailUploadedAttachment,
+  MailUserRecord,
+} from "./types";
+
+function parseListResponse(payload: unknown): MailListResponse {
+  if (!payload || typeof payload !== "object") return { rows: [], count: 0 };
+  const obj = payload as {
+    data?: unknown;
+    meta?: { count?: number };
+    rows?: unknown;
+    count?: number;
+  };
+  if (Array.isArray(obj.data)) {
+    return { rows: obj.data, count: obj.meta?.count ?? obj.data.length };
+  }
+  if (Array.isArray(obj.rows)) {
+    return { rows: obj.rows, count: obj.count ?? obj.rows.length };
+  }
+  if (Array.isArray(payload)) {
+    return { rows: payload, count: payload.length };
+  }
+  return { rows: [], count: 0 };
+}
+
+export const mailApi = {
+  listMessages(params: MailListParams = {}): Promise<MailListResponse> {
+    const filter: Record<string, unknown> = {};
+    if (params.boxType) filter.boxType = { $in: [params.boxType] };
+    if (params.isRead !== undefined) filter.isRead = params.isRead;
+    if (params.labelId) filter["labels.id"] = { $in: [params.labelId] };
+    if (params.userId !== undefined) filter.userId = params.userId;
+    if (params.search) {
+      filter.$or = [
+        { subject: { $includes: params.search } },
+        { from: { $includes: params.search } },
+        { to: { $includes: params.search } },
+      ];
+    }
+    if (params.filter) Object.assign(filter, params.filter);
+
+    const action = params.scope === "personal" ? "listPerson" : "list";
+
+    return nocobaseClient
+      .action<unknown>("mailMessages", action, {
+        query: {
+          page: params.page ?? 1,
+          pageSize: params.pageSize ?? 20,
+          subjectMerge: true,
+          appends: "user",
+          ...(Object.keys(filter).length
+            ? { filter: JSON.stringify(filter) }
+            : {}),
+          sort: params.sort ?? "-relatedMessageLatestDate",
+        },
+        unwrap: "none",
+      })
+      .then(parseListResponse);
+  },
+
+  getMessage(id: number | string): Promise<MailMessage> {
+    return nocobaseClient.action<MailMessage>("mailMessages", "get", {
+      query: { filterByTk: id, appends: "children,labels,note" },
+    });
+  },
+
+  trashMessages(
+    ids: (number | string)[],
+    moveToTrash = true
+  ): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "trash", {
+      body: { filterByTk: ids, moveToTrash },
+    });
+  },
+
+  destroyMessages(ids: (number | string)[]): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "destroy", {
+      query: { filterByTk: ids },
+    });
+  },
+
+  cancelScheduled(id: number | string): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "cancelTimelySend", {
+      query: { id },
+    });
+  },
+
+  setRead(mailIds: string[], isRead: boolean): Promise<unknown> {
+    return nocobaseClient.action("mail", "messageSetReaded", {
+      body: { mailIds, isRead },
+    });
+  },
+
+  send(payload: MailSendPayload): Promise<unknown> {
+    return nocobaseClient.action("mail", "messageSend", { body: payload });
+  },
+
+  massSend(
+    payload: MailSendPayload,
+    settings: MailMassSendSettings = {}
+  ): Promise<unknown> {
+    return nocobaseClient.action("mailMassMessages", "send", {
+      body: {
+        data: payload,
+        mailSendSetting: settings,
+      },
+    });
+  },
+
+  async listMassMessages(
+    parentId: number | null = null
+  ): Promise<MailMassListResponse> {
+    const pageSize = 100;
+    const rows: MailMassMessage[] = [];
+    let page = 1;
+    let count = 0;
+
+    do {
+      const payload = await nocobaseClient.action<unknown>(
+        "mailMassMessages",
+        "list",
+        {
+          query: {
+            page,
+            pageSize,
+            filter: JSON.stringify({ parentId }),
+            sort: "-createdAt",
+          },
+          unwrap: "none",
+        }
+      );
+      const parsed = parseListResponse(payload);
+      const nextRows = parsed.rows as unknown as MailMassMessage[];
+      rows.push(...nextRows);
+      count = parsed.count;
+      if (!nextRows.length) break;
+      page += 1;
+    } while (rows.length < count);
+
+    return { rows, count };
+  },
+
+  cancelMassMessage(id: number | string): Promise<unknown> {
+    return nocobaseClient.action("mailMassMessages", "cancel", {
+      body: { id },
+    });
+  },
+
+  resendMassMessage(id: number | string): Promise<unknown> {
+    return nocobaseClient.action("mailMassMessages", "resend", {
+      body: { id },
+    });
+  },
+
+  uploadAttachment(file: File): Promise<MailUploadedAttachment> {
+    const formData = new FormData();
+    formData.append("file", file);
+    return nocobaseClient
+      .action<MailUploadedAttachment>("mail", "messageAttachmentUpload", {
+        body: formData,
+      })
+      .then((attachment) => ({
+        ...attachment,
+        // Google reads originalname/mimetype; Microsoft reads filename/mimeType.
+        // Keep both pairs aligned so recipients see the real file name and type.
+        filename: attachment.originalname,
+        mimeType: attachment.mimetype,
+      }));
+  },
+
+  saveDraft(payload: MailSendPayload): Promise<{ id: number }> {
+    return nocobaseClient.action<{ id: number }>("mail", "messageSavingDraft", {
+      body: payload,
+    });
+  },
+
+  sync(emails: string[]): Promise<unknown> {
+    return nocobaseClient.action("mail", "messagesSync", { body: { emails } });
+  },
+
+  unreadCount(): Promise<number> {
+    return nocobaseClient
+      .action<unknown>("mail", "messageUnreadCount")
+      .then((value) => {
+        if (typeof value === "number") return value;
+        if (value && typeof value === "object" && "count" in value) {
+          const count = Number((value as { count?: unknown }).count);
+          return Number.isFinite(count) ? count : 0;
+        }
+        return 0;
+      });
+  },
+
+  getAccounts(): Promise<MailAccount[]> {
+    return nocobaseClient.action<MailAccount[]>("mail", "getMailAccounts");
+  },
+
+  findDraft(values: {
+    accountEmail: string;
+    identityEmail: string;
+    to: string[];
+  }): Promise<MailMessage | undefined> {
+    return nocobaseClient
+      .action<MailMessage | undefined>("mailMessages", "get", {
+        query: {
+          filter: JSON.stringify({
+            isDraft: true,
+            from: values.identityEmail,
+            email: values.accountEmail,
+            to: values.to,
+          }),
+          appends: "labels,note",
+        },
+      })
+      .then((draft) => draft || undefined);
+  },
+
+  getOAuthUrl(
+    type: "google" | "microsoft",
+    options: { email?: string; reauthorize?: boolean } = {}
+  ): Promise<string> {
+    return nocobaseClient
+      .action<{ url?: string }>("mail", "oauth2url", {
+        query: { type, ...options },
+      })
+      .then((response) => response.url || "");
+  },
+
+  deleteAccount(email: string): Promise<unknown> {
+    return nocobaseClient.action("mail", "deleteMailAccount", {
+      body: { email },
+    });
+  },
+
+  resyncAccount(email: string): Promise<unknown> {
+    return nocobaseClient.action("mail", "messagesResync", {
+      body: { email },
+    });
+  },
+
+  syncAliases(email: string): Promise<MailIdentity[]> {
+    return nocobaseClient
+      .action<MailIdentity[]>("mail", "accountIdentitiesSync", {
+        body: { email },
+      })
+      .then((identities) => (Array.isArray(identities) ? identities : []));
+  },
+
+  getUsers(): Promise<MailUserRecord[]> {
+    return nocobaseClient
+      .action<MailUserRecord[]>("users", "list", {
+        query: { pageSize: 100 },
+      })
+      .then((res) => (Array.isArray(res) ? res : []));
+  },
+
+  getLabels(userId?: number | string): Promise<MailLabel[]> {
+    const filter =
+      userId !== undefined ? { createdBy: { id: userId } } : undefined;
+    return nocobaseClient
+      .action<MailLabel[]>("mailMessageLabels", "list", {
+        query: {
+          paginate: false,
+          ...(filter ? { filter: JSON.stringify(filter) } : {}),
+        },
+      })
+      .then((res) => (Array.isArray(res) ? res : []));
+  },
+
+  createLabel(values: {
+    label: string;
+    color: string;
+    description?: string;
+  }): Promise<MailLabel> {
+    return nocobaseClient.action<MailLabel>("mailMessageLabels", "create", {
+      body: values,
+    });
+  },
+
+  updateLabel(
+    id: number | string,
+    values: { label: string; color: string; description?: string }
+  ): Promise<MailLabel> {
+    return nocobaseClient.action<MailLabel>("mailMessageLabels", "update", {
+      query: { filterByTk: id },
+      body: values,
+    });
+  },
+
+  deleteLabel(id: number | string): Promise<unknown> {
+    return nocobaseClient.action("mailMessageLabels", "destroy", {
+      query: { filterByTk: id },
+    });
+  },
+
+  getTemplates(): Promise<MailTemplate[]> {
+    return nocobaseClient
+      .action<MailTemplate[]>("mailTemplates", "list", {
+        query: { paginate: false, sort: "createdAt" },
+      })
+      .then((res) => (Array.isArray(res) ? res : []));
+  },
+
+  createTemplate(values: {
+    name: string;
+    content: string;
+  }): Promise<MailTemplate> {
+    return nocobaseClient.action<MailTemplate>("mailTemplates", "create", {
+      body: values,
+    });
+  },
+
+  updateTemplate(
+    id: number | string,
+    values: { name: string; content: string }
+  ): Promise<MailTemplate> {
+    return nocobaseClient.action<MailTemplate>("mailTemplates", "update", {
+      query: { filterByTk: id },
+      body: values,
+    });
+  },
+
+  deleteTemplate(id: number | string): Promise<unknown> {
+    return nocobaseClient.action("mailTemplates", "destroy", {
+      query: { filterByTk: id },
+    });
+  },
+
+  updateAccount(
+    id: number | string,
+    values: Partial<MailAccount>
+  ): Promise<MailAccount> {
+    return nocobaseClient.action<MailAccount>("mailAccounts", "update", {
+      query: { filterByTk: id },
+      body: values,
+    });
+  },
+
+  setMessageLabels(
+    messageId: number | string,
+    labelIds: number[]
+  ): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "update", {
+      query: { filterByTk: messageId },
+      body: { labels: labelIds },
+    });
+  },
+
+  setTodo(messageId: number | string, isTodo: boolean): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "update", {
+      query: { filterByTk: messageId },
+      body: { isTodo },
+    });
+  },
+
+  setBoxType(messageId: number | string, boxType: string): Promise<unknown> {
+    return nocobaseClient.action("mailMessages", "update", {
+      query: { filterByTk: messageId },
+      body: { boxType },
+    });
+  },
+
+  createNote(messageId: number | string, note: string): Promise<MailNote> {
+    return nocobaseClient.action<MailNote>("mailMessageNotes", "create", {
+      body: { mailMessageId: messageId, note },
+    });
+  },
+
+  updateNote(
+    noteId: number | string,
+    messageId: number | string,
+    note: string
+  ): Promise<MailNote> {
+    return nocobaseClient.action<MailNote>("mailMessageNotes", "update", {
+      query: { filterByTk: noteId },
+      body: { mailMessageId: messageId, note },
+    });
+  },
+
+  attachmentUrl(messageId: number | string, attachmentId: string): string {
+    return nocobaseClient
+      .buildUrl("mail:messageAttachmentGet", {
+        id: messageId,
+        attachmentId,
+      })
+      .toString();
+  },
+
+  inlineImageUrl(messageId: number | string, contentId: string): string {
+    return nocobaseClient
+      .buildUrl("mail:messageContentPreview", { messageId, contentId })
+      .toString();
+  },
+
+  async fetchInlineImage(
+    messageId: number | string,
+    contentId: string
+  ): Promise<Blob> {
+    const response = await fetch(this.inlineImageUrl(messageId, contentId), {
+      headers: nocobaseClient.getHeaders({
+        withAclMeta: false,
+        headers: { Accept: "image/*" },
+      }),
+    });
+    if (!response.ok) {
+      throw new Error(`Inline image request failed (${response.status})`);
+    }
+    return response.blob();
+  },
+};

package/src/extensions/nocobase-mail/components/mail-attachment-list.tsx

@@ -0,0 +1,67 @@
+import { Download, FileText, Image as ImageIcon, Paperclip } from "lucide-react";
+import type { MailAttachment } from "./types";
+import { mailApi } from "./mail-api";
+import { cn } from "@/lib/utils";
+
+function formatSize(size?: number) {
+  if (!size) return "";
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isImage(mimeType: string) {
+  return mimeType.startsWith("image/");
+}
+
+export function MailAttachmentList({
+  messageId,
+  attachments,
+  className,
+}: {
+  messageId: number | string;
+  attachments: MailAttachment[];
+  className?: string;
+}) {
+  if (!attachments?.length) return null;
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+        <Paperclip className="size-3.5" />
+        {attachments.length} attachment{attachments.length > 1 ? "s" : ""}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {attachments.map((att) => (
+          <a
+            key={att.attachmentId}
+            href={mailApi.attachmentUrl(messageId, att.attachmentId)}
+            target="_blank"
+            rel="noreferrer"
+            className={cn(
+              "group flex items-center gap-2.5 rounded-lg border border-border/80 bg-card px-3 py-2",
+              "shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-all hover:border-primary/40 hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
+            )}
+          >
+            {isImage(att.mimeType) ? (
+              <ImageIcon className="size-4 shrink-0 text-sky-500" />
+            ) : (
+              <FileText className="size-4 shrink-0 text-muted-foreground" />
+            )}
+            <div className="min-w-0">
+              <div className="max-w-[180px] truncate text-xs font-medium text-foreground">
+                {att.filename}
+              </div>
+              {att.size ? (
+                <div className="text-[10px] text-muted-foreground">
+                  {formatSize(att.size)}
+                </div>
+              ) : null}
+            </div>
+            <Download className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-compose-attachments.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from "react";
+import { AlertCircle, Loader2, Paperclip, RefreshCw, X } from "lucide-react";
+import { toast } from "sonner";
+import { mailApi } from "./mail-api";
+import type { MailUploadedAttachment } from "./types";
+import { Button } from "@/components/ui/button";
+
+const MAX_ATTACHMENT_SIZE = 25 * 1024 * 1024;
+
+interface AttachmentRow {
+  id: string;
+  name: string;
+  status: "uploading" | "done" | "error";
+  file?: File;
+  uploaded?: MailUploadedAttachment;
+}
+
+function attachmentId() {
+  return `attachment-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export interface MailComposeAttachmentsProps {
+  value: MailUploadedAttachment[];
+  onChange: (value: MailUploadedAttachment[]) => void;
+  onBusyChange?: (busy: boolean) => void;
+  onDirty?: () => void;
+  disabled?: boolean;
+}
+
+export function MailComposeAttachments({
+  value,
+  onChange,
+  onBusyChange,
+  onDirty,
+  disabled,
+}: MailComposeAttachmentsProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const onChangeRef = useRef(onChange);
+  const onBusyChangeRef = useRef(onBusyChange);
+  const [rows, setRows] = useState<AttachmentRow[]>(() =>
+    value.map((attachment) => ({
+      id: attachmentId(),
+      name: attachment.originalname,
+      status: "done",
+      uploaded: attachment,
+    }))
+  );
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    onBusyChangeRef.current = onBusyChange;
+  }, [onChange, onBusyChange]);
+
+  useEffect(() => {
+    onChangeRef.current(
+      rows.flatMap((row) =>
+        row.status === "done" && row.uploaded ? [row.uploaded] : []
+      )
+    );
+    onBusyChangeRef.current?.(rows.some((row) => row.status !== "done"));
+  }, [rows]);
+
+  const upload = async (id: string, file: File) => {
+    setRows((prev) =>
+      prev.map((row) =>
+        row.id === id ? { ...row, status: "uploading", file } : row
+      )
+    );
+    try {
+      const uploaded = await mailApi.uploadAttachment(file);
+      setRows((prev) =>
+        prev.map((row) =>
+          row.id === id ? { ...row, status: "done", uploaded } : row
+        )
+      );
+    } catch (error) {
+      setRows((prev) =>
+        prev.map((row) => (row.id === id ? { ...row, status: "error" } : row))
+      );
+      toast.error(
+        error instanceof Error ? error.message : `${file.name} upload failed`
+      );
+    }
+  };
+
+  const addFiles = (files: File[]) => {
+    const accepted = files.filter((file) => {
+      if (file.size <= MAX_ATTACHMENT_SIZE) return true;
+      toast.error(`${file.name} exceeds the 25 MB attachment limit`);
+      return false;
+    });
+    const additions = accepted.map((file) => ({
+      id: attachmentId(),
+      name: file.name,
+      status: "uploading" as const,
+      file,
+    }));
+    if (additions.length) onDirty?.();
+    setRows((prev) => [...prev, ...additions]);
+    additions.forEach((row) => void upload(row.id, row.file));
+  };
+
+  return (
+    <div className="space-y-2">
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={(event) => {
+          if (event.target.files?.length) addFiles(Array.from(event.target.files));
+          event.target.value = "";
+        }}
+      />
+      {rows.length > 0 && (
+        <div className="flex min-w-0 flex-wrap gap-2">
+          {rows.map((row) => (
+            <span
+              key={row.id}
+              className="flex min-w-0 max-w-full items-center gap-1.5 rounded-md border border-border/80 bg-muted/50 px-2 py-1 text-xs"
+            >
+              {row.status === "uploading" ? (
+                <Loader2 className="size-3 animate-spin text-muted-foreground" />
+              ) : row.status === "error" ? (
+                <AlertCircle className="size-3 text-destructive" />
+              ) : (
+                <Paperclip className="size-3 text-muted-foreground" />
+              )}
+              <span className="min-w-0 max-w-52 truncate">{row.name}</span>
+              {row.status === "error" && row.file && (
+                <button
+                  type="button"
+                  title="Retry upload"
+                  onClick={() => void upload(row.id, row.file!)}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <RefreshCw className="size-3" />
+                </button>
+              )}
+              <button
+                type="button"
+                title="Remove attachment"
+                onClick={() => {
+                  onDirty?.();
+                  setRows((prev) => prev.filter((item) => item.id !== row.id));
+                }}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="size-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        title="Attach files"
+        disabled={disabled}
+        onClick={() => inputRef.current?.click()}
+      >
+        <Paperclip />
+      </Button>
+    </div>
+  );
+}