DRY draft reply generation between AI agent & frontend

Author: exAspArk

AGENTS.md

@@ -2,10 +2,14 @@ There are two projects in this repository: @frontend and @backend.
 
 - Use `pnpm` instead of `npm`
 - Run `make check` after making changes to format, lint, and find type errors
-- Do not use `any` type in TypeScript
 - Do not use `git` unless explicitly asked
 - When asked to write tests from examples, anonymize test data
 
+## TypeScript
+
+- Do not use `any` type in TypeScript
+- Avoid explicitly specifying function return types
+
 ## @frontend
 
 - Prefer React components defined as const arrow functions

backend/src/tools/email-draft-upsert.tool.ts

@@ -2,14 +2,14 @@ import type { RequestContext } from '@mastra/core/request-context';
 import { createTool } from '@mastra/core/tools';
 import type { Loaded } from '@mikro-orm/postgresql';
 import { z } from 'zod';
-import type { BoardCard } from '@/entities/board-card';
 import type { User } from '@/entities/user';
 import type { Context } from '@/services/agent.service';
 import { BoardCardService } from '@/services/board-card.service';
 import { BoardMemberService } from '@/services/board-member.service';
 import { EmailDraftService } from '@/services/email-draft.service';
 import { EmailMessageService } from '@/services/email-message.service';
-import { createQuotedHtml } from '@/utils/shared';
+import { SenderEmailAddressService } from '@/services/sender-email-address.service';
+import { createQuotedHtml, participantToString, replyEmailFields } from '@/utils/shared';
 import { shortDateTimeWithWeekday } from '@/utils/time';
 
 export const emailDraftUpsertTool = createTool({
@@ -36,22 +36,49 @@ export const emailDraftUpsertTool = createTool({
     await BoardMemberService.populate(userBoardMember, ['user.boardMembers']);
     const user = userBoardMember.loadedUser as Loaded<User, 'boardMembers'>;
 
-    const boardCard = await BoardCardService.populate(initialBoardCard, ['boardCardReadPositions']);
+    const boardCard = await BoardCardService.populate(initialBoardCard, ['boardCardReadPositions', 'boardAccount']);
 
-    const quotedEmailHtml = await quotedHtml({
-      boardCard,
-      userTimeZone,
-      replyToEmailMessageId: data.replyToEmailMessageId,
-    });
+    const replyToEmailMessage = data.replyToEmailMessageId
+      ? await EmailMessageService.findById(boardCard, { id: data.replyToEmailMessageId })
+      : boardCard.externalThreadId
+        ? await EmailMessageService.findLastByExternalThreadId(boardCard.externalThreadId)
+        : undefined;
+
+    let { subject, from, to, cc, bcc } = data;
+
+    let quotedEmailHtml = '';
+    if (replyToEmailMessage) {
+      quotedEmailHtml = createQuotedHtml({
+        from: replyToEmailMessage.from,
+        sentAt: shortDateTimeWithWeekday(replyToEmailMessage.externalCreatedAt, { timeZone: userTimeZone }),
+        html: replyToEmailMessage.bodyHtml || '',
+        text: replyToEmailMessage.bodyText || '',
+      });
+
+      const senderEmailAddresses = await SenderEmailAddressService.findAddressesByBoardAccountAndUser(
+        boardCard.loadedBoardAccount.board,
+        { user, boardAccountId: boardCard.boardAccount.id },
+      );
+
+      const emailFields = replyEmailFields({
+        replyToMessage: replyToEmailMessage,
+        senderEmailAddresses: [...senderEmailAddresses],
+      });
+
+      subject = emailFields.subject;
+      from = participantToString(emailFields.from);
+      to = emailFields.to?.map(participantToString);
+      cc = emailFields.cc?.map(participantToString);
+    }
 
     await EmailDraftService.upsert(boardCard, {
       user,
       generated: false,
-      subject: data.subject,
-      from: data.from,
-      to: data.to,
-      cc: data.cc,
-      bcc: data.bcc,
+      subject,
+      from,
+      to,
+      cc,
+      bcc,
       bodyHtml: `${data.mainHtml}${quotedEmailHtml}`,
       lastEditedByUser: bordlyBoardMember.user,
     });
@@ -60,24 +87,3 @@ export const emailDraftUpsertTool = createTool({
     return { success: true };
   },
 });
-
-const quotedHtml = async ({
-  boardCard,
-  userTimeZone,
-  replyToEmailMessageId,
-}: {
-  boardCard: Loaded<BoardCard>;
-  userTimeZone?: string;
-  replyToEmailMessageId?: string;
-}) => {
-  if (replyToEmailMessageId) {
-    const replyToEmailMessage = await EmailMessageService.findById(boardCard, { id: replyToEmailMessageId });
-    return createQuotedHtml({
-      from: replyToEmailMessage.from,
-      sentAt: shortDateTimeWithWeekday(replyToEmailMessage.externalCreatedAt, { timeZone: userTimeZone }),
-      html: replyToEmailMessage.bodyHtml || '',
-      text: replyToEmailMessage.bodyText || '',
-    });
-  }
-  return '';
-};

backend/src/utils/shared.ts

@@ -41,6 +41,52 @@ export const participantToString = (p: Participant) => (p.name ? `${p.name} <${p
 
 export const isCommentForBordly = (text: string) => text.trim().toLowerCase().startsWith('@bordly');
 
+export const replyEmailFields = ({
+  replyToMessage,
+  senderEmailAddresses,
+}: {
+  replyToMessage: {
+    subject: string;
+    from: Participant;
+    to?: Participant[];
+    cc?: Participant[];
+    bcc?: Participant[];
+    replyTo?: Participant;
+  };
+  senderEmailAddresses: {
+    email: string;
+    name?: string | null;
+    isDefault: boolean;
+  }[];
+}) => {
+  if (senderEmailAddresses.length === 0) throw new Error('No sender email addresses available');
+
+  const emailParticipantEmails = new Set<string>([
+    replyToMessage.from.email,
+    ...(replyToMessage.to?.map((p) => p.email) ?? []),
+    ...(replyToMessage.cc?.map((p) => p.email) ?? []),
+    ...(replyToMessage.bcc?.map((p) => p.email) ?? []),
+  ]);
+  const fromEmailAddress =
+    senderEmailAddresses.find((addr) => emailParticipantEmails.has(addr.email)) ||
+    senderEmailAddresses.find((addr) => addr.isDefault) ||
+    senderEmailAddresses[0]!;
+
+  const subject = replyToMessage.subject.toLowerCase().startsWith('re:')
+    ? replyToMessage.subject
+    : `Re: ${replyToMessage.subject}`;
+  const from = { email: fromEmailAddress.email, name: fromEmailAddress.name || null } as Participant;
+
+  const sent = replyToMessage.from.email === from.email;
+  const to = sent ? replyToMessage.to : replyToMessage.replyTo ? [replyToMessage.replyTo] : [replyToMessage.from];
+  const cc = [
+    ...(sent ? [] : (replyToMessage.to?.filter((p) => p.email !== from.email) ?? [])),
+    ...(replyToMessage.cc?.filter((p) => p.email !== from.email) ?? []),
+  ];
+
+  return { subject, from, to: to && to.length > 0 ? to : undefined, cc: cc.length > 0 ? cc : undefined };
+};
+
 export const createQuotedHtml = ({
   from,
   sentAt,

frontend/src/components/board-card/email-draft-card.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useEditor } from '@tiptap/react';
-import { createQuotedHtml, type Participant, participantToString } from 'bordly-backend/utils/shared';
+import { createQuotedHtml, type Participant, participantToString, replyEmailFields } from 'bordly-backend/utils/shared';
 import { ALargeSmall, Paperclip, Send, Trash } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -72,13 +72,12 @@ export const EmailDraftCard = ({
 }) => {
   const navigate = useNavigate();
   const { queryClient, trpc } = useRouteContext();
+  const [subject, setSubject] = useState(emailDraft?.subject || boardCard.subject);
   const [from, setFrom] = useState(emailDraft ? participantToString(emailDraft.from) : '');
   const [to, setTo] = useState(emailDraft ? participantsToString(emailDraft.to) : '');
   const [cc, setCc] = useState(emailDraft ? participantsToString(emailDraft.cc) : '');
   const [bcc, setBcc] = useState(emailDraft ? participantsToString(emailDraft.bcc) : '');
 
-  const noMessages = boardCard.emailMessageCount === 0;
-
   // Set default "From" address using loaded email addresses
   const { data: emailAddressesData } = useQuery({
     ...trpc.senderEmailAddress.getAddressesForBoardMember.queryOptions({
@@ -98,36 +97,15 @@ export const EmailDraftCard = ({
         return prevFrom;
       });
     } else {
-      // Set from
-      const emailParticipantEmails = new Set<string>([
-        ...(replyToEmailMessage ? [replyToEmailMessage.from.email] : []),
-        ...(replyToEmailMessage?.to?.map((p) => p.email) ?? []),
-        ...(replyToEmailMessage?.cc?.map((p) => p.email) ?? []),
-        ...(replyToEmailMessage?.bcc?.map((p) => p.email) ?? []),
-      ]);
-      const fromEmailAddress =
-        fromEmailAddresses.find((addr) => emailParticipantEmails.has(addr.email)) ||
-        fromEmailAddresses.find((addr) => addr.isDefault) ||
-        fromEmailAddresses[0];
-      setFrom(participantToString(fromEmailAddress as Participant));
-
       if (replyToEmailMessage) {
-        const sent = replyToEmailMessage!.from.email === fromEmailAddress.email;
-        // Set to
-        setTo(
-          sent
-            ? participantsToString(replyToEmailMessage.to)
-            : replyToEmailMessage.replyTo
-              ? participantToString(replyToEmailMessage.replyTo)
-              : participantToString(replyToEmailMessage.from),
-        );
-        // Set cc
-        setCc(
-          participantsToString([
-            ...(sent ? [] : (replyToEmailMessage.to?.filter((p) => p.email !== fromEmailAddress.email) ?? [])),
-            ...(replyToEmailMessage.cc?.filter((p) => p.email !== fromEmailAddress.email) ?? []),
-          ]),
-        );
+        const replyFields = replyEmailFields({
+          replyToMessage: replyToEmailMessage,
+          senderEmailAddresses: fromEmailAddresses,
+        });
+        setSubject(replyFields.subject);
+        setFrom(participantToString(replyFields.from));
+        setTo(participantsToString(replyFields.to));
+        setCc(participantsToString(replyFields.cc));
       }
     }
   }, [emailDraft, replyToEmailMessage, fromEmailAddresses]);
@@ -158,7 +136,7 @@ export const EmailDraftCard = ({
     onExecute: (params) => {
       removeEmailDraftData({ trpc, queryClient, params });
       removeBoardCardEmailDraftData({ trpc, queryClient, params });
-      if (noMessages) {
+      if (boardCard.emailMessageCount === 0) {
         removeBoardCardData({ trpc, queryClient, params });
         navigate({ to: ROUTES.BOARD.replace('$boardId', boardId) });
       }
@@ -245,7 +223,7 @@ export const EmailDraftCard = ({
       emailDraftUpsertMutation.mutate({
         boardId,
         boardCardId,
-        subject: noMessages ? boardCard.subject : `Re: ${boardCard.subject}`,
+        subject,
         bodyHtml: `${editor.getHTML()}${quotedHtml}`,
         from: from.trim(),
         to: to ? parseParticipantsInput(to) : undefined,
@@ -274,7 +252,7 @@ export const EmailDraftCard = ({
     emailDraftSendMutation.mutate({
       boardId,
       boardCardId,
-      subject: noMessages ? boardCard.subject : `Re: ${boardCard.subject}`,
+      subject,
       bodyHtml: `${editor.getHTML()}${quotedHtml}`,
       from: from.trim(),
       to: to ? parseParticipantsInput(to) : undefined,