feat: Mail: reply all button #357
Conversation
|
@suyash5053 is attempting to deploy a commit to the Inbox Zero Team on Vercel. A member of the Team first needs to authorize it. |
|
|
WalkthroughThis pull request introduces two primary features. The first enhances the email composition form by adding support for CC addresses, including new state management for the CC input, updated handler functions, and UI elements mirroring the "to" field. The second feature adds a "Reply to All" option in the email message view, including state management, new callbacks, and corresponding UI updates in the top bar and reply panel to support replying to multiple recipients. Changes
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
apps/web/app/(app)/compose/ComposeEmailForm.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in 'apps/web/.eslintrc.json': Cannot find module '@typescript-eslint/parser'
apps/web/components/email-list/EmailMessage.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in 'apps/web/.eslintrc.json': Cannot find module '@typescript-eslint/parser'
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (3)
apps/web/components/email-list/EmailMessage.tsx (2)
190-192:⚠️ Potential issueFix onClick handler placement.
The onClick handler is incorrectly placed on the ForwardIcon instead of its Button wrapper.
Apply this diff to fix the handler placement:
- <Button variant="ghost" size="icon"> - <ForwardIcon className="h-4 w-4" onClick={onForward} /> + <Button variant="ghost" size="icon" onClick={onForward}> + <ForwardIcon className="h-4 w-4" />
361-386: 🛠️ Refactor suggestionReduce code duplication in email preparation functions.
The
prepareReplyToAllEmailfunction largely duplicates the logic fromprepareReplyingToEmail. Consider refactoring to use a single function with a parameter for "Reply to All" behavior.Apply this diff to reduce duplication:
-const prepareReplyToAllEmail = ( - message: ParsedMessage, - content = "", -): ReplyingToEmail => { - const sentFromUser = message.labelIds?.includes("SENT"); - - const { html } = createReplyContent({ message }); - - return { - to: sentFromUser ? message.headers.to : message.headers.from, - cc: message.headers.cc, - subject: sentFromUser - ? message.headers.subject - : `Re: ${message.headers.subject}`, - headerMessageId: message.headers["message-id"]!, - threadId: message.threadId!, - bcc: sentFromUser ? message.headers.bcc : "", - references: message.headers.references, - draftHtml: content || "", - quotedContentHtml: html, - }; -}; const prepareReplyingToEmail = ( message: ParsedMessage, content = "", + replyToAll = false, ): ReplyingToEmail => { const sentFromUser = message.labelIds?.includes("SENT"); const { html } = createReplyContent({ message }); return { to: sentFromUser ? message.headers.to : message.headers.from, - cc: replyToAll ? message.headers.cc : "", + cc: replyToAll ? message.headers.cc : "", subject: sentFromUser ? message.headers.subject : `Re: ${message.headers.subject}`, headerMessageId: message.headers["message-id"]!, threadId: message.threadId!, bcc: sentFromUser ? message.headers.bcc : "", references: message.headers.references, draftHtml: content || "", quotedContentHtml: html, }; };apps/web/app/(app)/compose/ComposeEmailForm.tsx (1)
120-127: 🛠️ Refactor suggestionImprove contacts search to work with both recipient fields.
The contacts API is only queried with the "To" field's search query. It should also respond to CC field searches.
Update the SWR hook to handle both search queries:
const { data } = useSWR<ContactsResponse, { error: string }>( env.NEXT_PUBLIC_CONTACTS_ENABLED - ? `/api/google/contacts?query=${searchQuery}` + ? `/api/google/contacts?query=${searchQuery || searchQueryCc}` : null, { keepPreviousData: true, }, );
🧹 Nitpick comments (1)
apps/web/app/(app)/compose/ComposeEmailForm.tsx (1)
317-437: Extract recipient field component to reduce duplication.The CC field implementation duplicates most of the "To" field code. Consider extracting a reusable recipient field component.
Create a new component
RecipientFieldthat can be reused for both "To" and "CC" fields:type RecipientFieldProps = { label: string; value: string[]; searchQuery: string; setSearchQuery: (value: string) => void; onRemoveEmail: (email: string) => void; onComboboxChange: (values: string[]) => void; contacts?: ContactsResponse['result']; }; const RecipientField: React.FC<RecipientFieldProps> = ({ label, value, searchQuery, setSearchQuery, onRemoveEmail, onComboboxChange, contacts, }) => { return ( <div className="flex space-x-2"> <div className="mt-2"> <Label name={label.toLowerCase()} label={label} /> </div> <Combobox value={value} onChange={onComboboxChange} multiple > {/* Move existing Combobox implementation here */} </Combobox> </div> ); };Then use it in the form:
<RecipientField label="To" value={selectedEmailAddresses} searchQuery={searchQuery} setSearchQuery={setSearchQuery} onRemoveEmail={(email) => onRemoveSelectedEmail(email, "to")} onComboboxChange={(values) => handleComboboxOnChange(values, "to")} contacts={data?.result} /> <RecipientField label="CC" value={selectedCcAddresses} searchQuery={searchQueryCc} setSearchQuery={setSearchQueryCc} onRemoveEmail={(email) => onRemoveSelectedEmail(email, "cc")} onComboboxChange={(values) => handleComboboxOnChange(values, "cc")} contacts={data?.result} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/(app)/compose/ComposeEmailForm.tsx(5 hunks)apps/web/components/email-list/EmailMessage.tsx(13 hunks)
🔇 Additional comments (1)
apps/web/components/email-list/EmailMessage.tsx (1)
52-56: LGTM! Clean implementation of "Reply to All" state management.The implementation follows React best practices with proper state management and memoization.
Also applies to: 62-62
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/web/components/email-list/EmailMessage.tsx (1)
190-193:⚠️ Potential issueFix Forward button's onClick handler placement.
The onClick handler is incorrectly placed on the ForwardIcon instead of the Button component.
- <Button variant="ghost" size="icon"> - <ForwardIcon className="h-4 w-4" onClick={onForward} /> + <Button variant="ghost" size="icon" onClick={onForward}> + <ForwardIcon className="h-4 w-4" />
🧹 Nitpick comments (3)
apps/web/components/email-list/EmailMessage.tsx (2)
110-110: Simplify the boolean expression.The boolean expression can be simplified since both variables are boolean.
- showReply={showReply || showReplyAll} + showReply={Boolean(showReply || showReplyAll)}
332-358: Reduce code duplication between reply functions.The
prepareReplyToAllEmailfunction largely duplicatesprepareReplyingToEmail. Consider refactoring to reuse the common logic.-const prepareReplyToAllEmail = ( - message: ParsedMessage, - content = "", -): ReplyingToEmail => { - const sentFromUser = message.labelIds?.includes("SENT"); - - const { html } = createReplyContent({ message }); - - return { - to: sentFromUser ? message.headers.to : message.headers.from, - cc: message.headers.cc, - subject: sentFromUser - ? message.headers.subject - : `Re: ${message.headers.subject}`, - headerMessageId: message.headers["message-id"]!, - threadId: message.threadId!, - bcc: sentFromUser ? message.headers.bcc : "", - references: message.headers.references, - draftHtml: content || "", - quotedContentHtml: html, - }; -}; +const prepareReplyToAllEmail = ( + message: ParsedMessage, + content = "", +): ReplyingToEmail => prepareReplyingToEmail(message, content, true);Also applies to: 360-385
apps/web/app/(app)/compose/ComposeEmailForm.tsx (1)
133-138: Improve type safety for email field handling.Consider extracting the field type to improve maintainability and type safety.
+type EmailFieldType = "to" | "cc"; -const onRemoveSelectedEmail = (emailAddress: string, field: "to" | "cc") => { +const onRemoveSelectedEmail = (emailAddress: string, field: EmailFieldType) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/(app)/compose/ComposeEmailForm.tsx(3 hunks)apps/web/components/email-list/EmailMessage.tsx(12 hunks)
🔇 Additional comments (2)
apps/web/components/email-list/EmailMessage.tsx (1)
52-52: LGTM! Clean implementation of Reply to All state management.The implementation follows React best practices with proper state management and cleanup.
Also applies to: 56-56, 62-63
apps/web/app/(app)/compose/ComposeEmailForm.tsx (1)
441-457: LGTM! Clean implementation of CC field for non-contacts mode.The implementation maintains consistency with the existing pattern and properly handles form registration.
Fixes : #341
https://www.loom.com/share/637268ad5b3e448194c96e50eed24035?sid=d02bddd3-f6f0-439b-9147-af9a7369c8fb
Solution
When clicked on forward all, The function sets the CC of the reply to the CC of the email received. Let me know if need some improvement.
A loom video is also attached to show the respective function. Let me know for improvements
@elie222
Summary by CodeRabbit