@nocobase/portal-template-default 1.0.15 → 1.0.17

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

@@ -0,0 +1,262 @@
+import { useCallback, useState } from "react";
+import {
+  isLocalMailDraft,
+  type MailAccount,
+  type MailMessage,
+  type MailRecipientOption,
+} from "./types";
+import { MailCompose } from "./mail-compose";
+import type {
+  ComposeInitialValues,
+  ComposeMode,
+  ComposeVariant,
+} from "./mail-compose";
+import { splitReplyQuote } from "./mail-reply-quote";
+
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function originalBodyHtml(message: MailMessage) {
+  if (message.bodyHtml) return message.bodyHtml;
+  const text = escapeHtml(message.bodyText ?? "");
+  return `<p>${text.replace(/\n/g, "<br>")}</p>`;
+}
+
+function quoteBlock(header: string, message: MailMessage) {
+  return [
+    "<p></p>",
+    '<div class="nb-mail-quote" style="border-left:2px solid #d4d4d8;padding-left:12px;margin-top:16px;color:#52525b">',
+    `<div style="margin-bottom:8px">${header}</div>`,
+    originalBodyHtml(message),
+    "</div>",
+  ].join("");
+}
+
+function stripHtml(value: string) {
+  return value
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/p>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function composeReference(message: MailMessage) {
+  return {
+    from: message.fromUser?.name || message.from,
+    date: message.date,
+    subject: message.subject,
+    preview: message.bodyText || stripHtml(message.bodyHtml || ""),
+    html: originalBodyHtml(message),
+  };
+}
+
+function addressList(
+  users: Array<{ address: string }> | undefined,
+  raw: string | undefined
+) {
+  if (users?.length) return users.map((user) => user.address);
+  return (raw || "").split(/[,;\n]/).map((value) => value.trim()).filter(Boolean);
+}
+
+function normalizeAddress(value: string) {
+  return (value.match(/<([^>]+)>/)?.[1] || value).trim().toLocaleLowerCase();
+}
+
+export function canReplyAll(message: MailMessage, accountEmails: string[] = []) {
+  const own = new Set(
+    [message.email, message.identityEmail, ...accountEmails]
+      .filter((value): value is string => Boolean(value))
+      .map(normalizeAddress)
+  );
+  const participants = uniqueAddresses(
+    [
+      message.from,
+      ...addressList(message.toUsers, message.to),
+      ...addressList(message.ccUsers, message.cc),
+    ],
+    own
+  );
+  return participants.length > 1;
+}
+
+function uniqueAddresses(addresses: Array<string | undefined>, excluded = new Set<string>()) {
+  const seen = new Set<string>();
+  return addresses.filter((address): address is string => {
+    const normalized = address ? normalizeAddress(address) : "";
+    if (!normalized || excluded.has(normalized) || seen.has(normalized)) return false;
+    seen.add(normalized);
+    return true;
+  });
+}
+
+export function buildComposeInitial(
+  message: MailMessage,
+  mode: ComposeMode,
+  accountEmails: string[] = []
+): ComposeInitialValues {
+  const senderIdentity = message.identityEmail || message.email;
+  const senderValues = {
+    from: senderIdentity,
+    identityEmail: senderIdentity,
+    accountEmail: message.email,
+  };
+
+  if (mode === "draft") {
+    if (!isLocalMailDraft(message)) {
+      throw new Error(
+        "Provider-backed drafts are read-only here. Edit them in the original mail provider."
+      );
+    }
+    const draftContent = splitReplyQuote(message.bodyHtml || message.bodyText || "");
+    return {
+      ...senderValues,
+      id: message.id,
+      isDraft: true,
+      to: message.toUsers?.map((user) => user.address).join(", ") || message.to,
+      cc: message.ccUsers?.map((user) => user.address).join(", ") || message.cc,
+      subject: message.subject,
+      body: draftContent.body,
+      replyBody: draftContent.replyBody,
+      replyTo: message.replyTo,
+      attachments: (message.attachments ?? []).flatMap((attachment) =>
+        attachment.path
+          ? [
+              {
+                originalname: attachment.originalname || attachment.filename,
+                filename: attachment.originalname || attachment.filename,
+                path: attachment.path,
+                size: attachment.size ?? 0,
+                encoding: attachment.encoding || "7bit",
+                mimetype:
+                  attachment.mimetype || attachment.mimeType || "application/octet-stream",
+                mimeType:
+                  attachment.mimeType || attachment.mimetype || "application/octet-stream",
+              },
+            ]
+          : []
+      ),
+    };
+  }
+
+  if (mode === "forward") {
+    const header = [
+      "---------- Forwarded message ----------",
+      `From: ${escapeHtml(message.from)}`,
+      `Date: ${escapeHtml(message.date)}`,
+      `Subject: ${escapeHtml(message.subject ?? "")}`,
+    ]
+      .map((line) => `<div>${line}</div>`)
+      .join("");
+    return {
+      ...senderValues,
+      subject: `Fwd: ${message.subject}`,
+      body: quoteBlock(header, message),
+      reference: composeReference(message),
+    };
+  }
+
+  const replyTo = message.replyTo || message.mailId;
+  const ownAddresses = new Set(
+    [message.email, message.identityEmail, ...accountEmails]
+      .filter((value): value is string => Boolean(value))
+      .map(normalizeAddress)
+  );
+  const toAddresses =
+    mode === "replyAll"
+      ? uniqueAddresses(
+          [message.from, ...addressList(message.toUsers, message.to)],
+          ownAddresses
+        )
+      : [message.from];
+  const toKeys = new Set(toAddresses.map(normalizeAddress));
+  const ccAddresses =
+    mode === "replyAll"
+      ? uniqueAddresses(
+          addressList(message.ccUsers, message.cc),
+          new Set([...ownAddresses, ...toKeys])
+        )
+      : [];
+
+  return {
+    ...senderValues,
+    to: toAddresses.join(", "),
+    cc: ccAddresses.join(", ") || undefined,
+    subject: message.subject?.startsWith("Re:")
+      ? message.subject
+      : `Re: ${message.subject}`,
+    replyTo,
+    body: "",
+    replyBody: originalBodyHtml(message),
+    reference: composeReference(message),
+  };
+}
+
+export interface UseMailComposeOptions {
+  accounts?: MailAccount[];
+  onSent?: () => void;
+  variant?: ComposeVariant;
+  allowScheduleSend?: boolean;
+  allowBulkSend?: boolean;
+  autoSaveDraft?: boolean;
+  defaultBulkIntervalMs?: number;
+  recipientOptions?: MailRecipientOption[];
+  onAccountChange?: (account: MailAccount) => void;
+}
+
+export function useMailCompose(options: UseMailComposeOptions = {}) {
+  const [open, setOpen] = useState(false);
+  const [initial, setInitial] = useState<ComposeInitialValues>();
+  const [mode, setMode] = useState<ComposeMode>("new");
+
+  const openCompose = useCallback(
+    (values?: ComposeInitialValues, nextMode: ComposeMode = "new") => {
+      setInitial(values);
+      setMode(nextMode);
+      setOpen(true);
+    },
+    []
+  );
+
+  const reply = useCallback(
+    (message: MailMessage, nextMode: ComposeMode = "reply") => {
+      const accountEmails = (options.accounts ?? []).flatMap((account) => [
+        account.email,
+        ...(account.identities?.map((identity) => identity.email) ?? []),
+      ]);
+      openCompose(buildComposeInitial(message, nextMode, accountEmails), nextMode);
+    },
+    [options.accounts, openCompose]
+  );
+
+  const close = useCallback(() => setOpen(false), []);
+
+  const composeDialog = (
+    <MailCompose
+      open={open}
+      onOpenChange={setOpen}
+      accounts={options.accounts}
+      initial={initial}
+      mode={mode}
+      onSent={options.onSent}
+      variant={options.variant}
+      allowScheduleSend={options.allowScheduleSend}
+      allowBulkSend={options.allowBulkSend}
+      autoSaveDraft={options.autoSaveDraft}
+      defaultBulkIntervalMs={options.defaultBulkIntervalMs}
+      recipientOptions={options.recipientOptions}
+      onAccountChange={options.onAccountChange}
+    />
+  );
+
+  return { open, openCompose, reply, close, composeDialog };
+}

package/src/extensions/nocobase-mail/components/use-mail-mass-messages.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { mailApi } from "./mail-api";
+import { MailMassMessageStatus, type MailMassMessage } from "./types";
+
+const ACTIVE_STATUSES = new Set<MailMassMessageStatus>([
+  MailMassMessageStatus.PENDING,
+  MailMassMessageStatus.SENDING,
+]);
+
+export function useMailMassMessages(
+  parentId: number | null,
+  { enabled = true, pollIntervalMs = 3_000 } = {}
+) {
+  const [messages, setMessages] = useState<MailMassMessage[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const requestSequence = useRef(0);
+
+  const refresh = useCallback(async () => {
+    if (!enabled) return;
+    const sequence = ++requestSequence.current;
+    setLoading(true);
+    try {
+      const response = await mailApi.listMassMessages(parentId);
+      if (sequence === requestSequence.current) setMessages(response.rows);
+    } catch (error) {
+      if (sequence !== requestSequence.current) return;
+      toast.error(
+        error instanceof Error ? error.message : "Failed to load bulk send tasks"
+      );
+    } finally {
+      if (sequence === requestSequence.current) setLoading(false);
+    }
+  }, [enabled, parentId]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setMessages([]);
+      setLoading(false);
+      return;
+    }
+    void refresh();
+  }, [enabled, refresh]);
+
+  useEffect(() => {
+    if (!enabled || !messages.some((message) => ACTIVE_STATUSES.has(message.status))) {
+      return;
+    }
+    const timer = window.setInterval(() => void refresh(), pollIntervalMs);
+    return () => window.clearInterval(timer);
+  }, [enabled, messages, pollIntervalMs, refresh]);
+
+  return { messages, loading, refresh };
+}

package/src/extensions/nocobase-mail/components/use-mail-messages.ts

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { MailBoxType, MailListParams, MailMessage, MailScope } from "./types";
+import { mailApi } from "./mail-api";
+
+export interface UseMailMessagesOptions {
+  scope?: MailScope;
+  boxType?: MailBoxType;
+  search?: string;
+  labelId?: number;
+  isRead?: boolean;
+  userId?: number;
+  filter?: Record<string, unknown>;
+  sort?: string;
+  pageSize?: number;
+  debounceMs?: number;
+}
+
+export interface UseMailMessagesResult {
+  messages: MailMessage[];
+  total: number;
+  loading: boolean;
+  page: number;
+  pageSize: number;
+  setPage: (page: number) => void;
+  refresh: () => void;
+  setMessages: React.Dispatch<React.SetStateAction<MailMessage[]>>;
+}
+
+export function useMailMessages(options: UseMailMessagesOptions = {}): UseMailMessagesResult {
+  const {
+    scope,
+    boxType,
+    search = "",
+    labelId,
+    isRead,
+    userId,
+    filter,
+    sort,
+    pageSize = 20,
+    debounceMs = 300,
+  } = options;
+
+  const [messages, setMessages] = useState<MailMessage[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [debouncedSearch, setDebouncedSearch] = useState(search);
+  const requestSeq = useRef(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(search), debounceMs);
+    return () => clearTimeout(timer);
+  }, [search, debounceMs]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [scope, boxType, debouncedSearch, labelId, isRead, userId, filter, pageSize]);
+
+  const filterKey = useMemo(() => JSON.stringify(filter ?? {}), [filter]);
+
+  const load = useCallback(
+    async (targetPage: number) => {
+      const seq = ++requestSeq.current;
+      setLoading(true);
+      try {
+        const params: MailListParams = {
+          scope,
+          boxType,
+          search: debouncedSearch || undefined,
+          labelId,
+          isRead,
+          userId,
+          filter: JSON.parse(filterKey),
+          sort,
+          page: targetPage,
+          pageSize,
+        };
+        const res = await mailApi.listMessages(params);
+        if (seq !== requestSeq.current) return;
+        setMessages(res.rows);
+        setTotal(res.count);
+      } catch (error) {
+        if (seq !== requestSeq.current) return;
+        toast.error(error instanceof Error ? error.message : "Failed to load messages");
+        setMessages([]);
+        setTotal(0);
+      } finally {
+        if (seq === requestSeq.current) setLoading(false);
+      }
+    },
+    [scope, boxType, debouncedSearch, labelId, isRead, userId, filterKey, sort, pageSize]
+  );
+
+  useEffect(() => {
+    load(page);
+  }, [load, page]);
+
+  const refresh = useCallback(() => {
+    load(page);
+  }, [load, page]);
+
+  return {
+    messages,
+    total,
+    loading,
+    page,
+    pageSize,
+    setPage,
+    refresh,
+    setMessages,
+  };
+}

package/src/extensions/nocobase-mail/components/use-mail-signatures.ts

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useState } from "react";
+import type { MailAccount, MailAccountSignature, MailSignature } from "./types";
+import { mailApi } from "./mail-api";
+import { createSignatureId } from "./mail-signatures";
+
+export interface MailSignatureValues {
+  name: string;
+  content: string;
+  isDefault?: boolean;
+}
+
+function fromAccount(account?: MailAccount): MailSignature[] {
+  const signatures = account?.config?.signatures;
+  if (!Array.isArray(signatures)) return [];
+  return signatures.map((signature) => ({
+    id: String(signature.id),
+    name: signature.name,
+    content: signature.content,
+    isDefault: Boolean(signature.default),
+  }));
+}
+
+function toAccount(signatures: MailSignature[]): MailAccountSignature[] {
+  return signatures.map((signature) => ({
+    id: signature.id,
+    name: signature.name,
+    content: signature.content,
+    default: Boolean(signature.isDefault),
+  }));
+}
+
+function normalizeDefault(list: MailSignature[], defaultId?: string) {
+  return list.map((signature) => ({
+    ...signature,
+    isDefault: signature.id === defaultId,
+  }));
+}
+
+export function useMailSignatures(
+  account?: MailAccount,
+  onAccountChange?: (account: MailAccount) => void
+) {
+  const [state, setState] = useState<{
+    accountId?: number;
+    signatures: MailSignature[];
+  }>(() => ({ accountId: account?.id, signatures: fromAccount(account) }));
+  const [saving, setSaving] = useState(false);
+  const signatures =
+    state.accountId === account?.id ? state.signatures : fromAccount(account);
+
+  useEffect(() => {
+    setState({ accountId: account?.id, signatures: fromAccount(account) });
+  }, [account]);
+
+  const persist = useCallback(
+    async (next: MailSignature[]) => {
+      if (!account) throw new Error("Select a sender account before managing signatures");
+      setSaving(true);
+      try {
+        const config = {
+          ...(account.config ?? {}),
+          signatures: toAccount(next),
+        };
+        const response = await mailApi.updateAccount(account.id, {
+          config,
+        });
+        setState({ accountId: account.id, signatures: next });
+        onAccountChange?.({
+          ...account,
+          ...response,
+          config: response?.config ?? config,
+        });
+      } finally {
+        setSaving(false);
+      }
+    },
+    [account, onAccountChange]
+  );
+
+  const create = useCallback(
+    async (values: MailSignatureValues) => {
+      const signature: MailSignature = {
+        id: createSignatureId(),
+        name: values.name,
+        content: values.content,
+        isDefault: Boolean(values.isDefault),
+      };
+      const next = values.isDefault
+        ? normalizeDefault([...signatures, signature], signature.id)
+        : [...signatures, signature];
+      await persist(next);
+      return signature;
+    },
+    [persist, signatures]
+  );
+
+  const update = useCallback(
+    async (id: string, values: MailSignatureValues) => {
+      let next = signatures.map((signature) =>
+        signature.id === id ? { ...signature, ...values } : signature
+      );
+      if (values.isDefault) next = normalizeDefault(next, id);
+      await persist(next);
+    },
+    [persist, signatures]
+  );
+
+  const remove = useCallback(
+    async (id: string) => persist(signatures.filter((signature) => signature.id !== id)),
+    [persist, signatures]
+  );
+
+  const setDefault = useCallback(
+    async (id: string) => {
+      const target = signatures.find((signature) => signature.id === id);
+      await persist(normalizeDefault(signatures, target?.isDefault ? undefined : id));
+    },
+    [persist, signatures]
+  );
+
+  return { signatures, saving, create, update, remove, setDefault };
+}

package/src/extensions/nocobase-mail/components/use-mail-templates.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { mailApi } from "./mail-api";
+import type { MailTemplate } from "./types";
+
+export interface MailTemplateValues {
+  name: string;
+  content: string;
+}
+
+export function useMailTemplates() {
+  const [templates, setTemplates] = useState<MailTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      setTemplates(await mailApi.getTemplates());
+    } catch (error) {
+      setTemplates([]);
+      toast.error(error instanceof Error ? error.message : "Failed to load templates");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const create = useCallback(async (values: MailTemplateValues) => {
+    const template = await mailApi.createTemplate(values);
+    setTemplates((prev) => [...prev, template]);
+    return template;
+  }, []);
+
+  const update = useCallback(
+    async (id: number | string, values: MailTemplateValues) => {
+      const template = await mailApi.updateTemplate(id, values);
+      setTemplates((prev) =>
+        prev.map((item) => (item.id === id ? { ...item, ...template } : item))
+      );
+      return template;
+    },
+    []
+  );
+
+  const remove = useCallback(async (id: number | string) => {
+    await mailApi.deleteTemplate(id);
+    setTemplates((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+
+  return { templates, loading, refresh, create, update, remove };
+}

package/src/extensions/nocobase-mail/extension.tsx

@@ -0,0 +1,105 @@
+import type { AppExtension } from "@/app/extension";
+import {
+  ListFilter,
+  Mail,
+  MessagesSquare,
+  PanelsLeftRight,
+  PenLine,
+  Users,
+  UsersRound,
+} from "lucide-react";
+import { Outlet, Route } from "react-router";
+import { MailUnreadProvider } from "./components";
+import { MailBulkPage, MailComposePage, MailManagerPage } from "./mail-pages";
+import {
+  MailAudienceScenario,
+  MailCorrespondenceScenario,
+  MailScenarioOverview,
+  MailUnreadScenario,
+} from "./mail-demo-pages";
+
+const nocobaseMailExtension: AppExtension = {
+  id: "nocobase-mail",
+  Provider: MailUnreadProvider,
+  dev: {
+    resources: [
+      {
+        name: "mail",
+        list: "mail",
+        meta: {
+          label: "Mail",
+          icon: <Mail />,
+          description: "Read, send, and manage mailbox messages.",
+        },
+      },
+      {
+        name: "mail-scenario-workspace",
+        list: "mail/workspace",
+        meta: {
+          parent: "mail",
+          label: "My mailbox",
+          icon: <PanelsLeftRight />,
+        },
+      },
+      {
+        name: "mail-scenario-audiences",
+        list: "mail/personal",
+        meta: {
+          parent: "mail",
+          label: "Mailbox views",
+          icon: <Users />,
+        },
+      },
+      {
+        name: "mail-scenario-unread",
+        list: "mail/unread",
+        meta: {
+          parent: "mail",
+          label: "Unread indicator",
+          icon: <MessagesSquare />,
+        },
+      },
+      {
+        name: "mail-scenario-compose",
+        list: "mail/compose",
+        meta: {
+          parent: "mail",
+          label: "Compose & send",
+          icon: <PenLine />,
+        },
+      },
+      {
+        name: "mail-scenario-correspondence",
+        list: "mail/filtered",
+        meta: {
+          parent: "mail",
+          label: "Correspondence per user",
+          icon: <ListFilter />,
+        },
+      },
+      {
+        name: "mail-bulk",
+        list: "mail/bulk",
+        meta: {
+          parent: "mail",
+          label: "Bulk mail",
+          icon: <UsersRound />,
+          description: "Send bulk mail and track delivery jobs.",
+        },
+      },
+    ],
+    routes: (
+      <Route key="nocobase-mail" path="mail" element={<Outlet />}>
+        <Route index element={<MailScenarioOverview />} />
+        <Route path="workspace" element={<MailManagerPage />} />
+        <Route path="personal" element={<MailAudienceScenario />} />
+        <Route path="unread" element={<MailUnreadScenario />} />
+        <Route path="compose" element={<MailComposePage />} />
+        <Route path="filtered" element={<MailCorrespondenceScenario />} />
+        <Route path="bulk" element={<MailBulkPage />} />
+      </Route>
+    ),
+  },
+};
+
+export default nocobaseMailExtension;