51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T344d,"use client"; import { Button, Chip, Input, Modal, ModalBody, ModalContent, ScrollShadow, Textarea, } from "@heroui/react"; import type React from "react"; import { useEffect, useRef, useState } from "react"; import { z } from "zod"; import { Cancel01Icon, HugeiconsIcon, Loading03Icon, Mail01Icon, PencilEdit01Icon, PlusSignIcon, Tick02Icon, } from "@/components/icons"; import { cn } from "@/lib/utils"; // Email validation schema const emailComposeSchema = z.object({ to: z .array(z.string().email("Invalid email address")) .min(1, "At least one recipient is required"), subject: z .string() .min(1, "Subject is required") .max(200, "Subject must be under 200 characters"), body: z .string() .min(1, "Email body is required") .max(10000, "Email body must be under 10,000 characters"), }); const emailValidationSchema = z.string().email("Invalid email address"); export interface EmailData { to: string[]; subject: string; body: string; draft_id?: string; thread_id?: string; bcc?: string[]; cc?: string[]; is_html?: boolean; } export interface EmailComposeCardProps { emailData: EmailData; onSend?: (data: EmailData) => void; className?: string; } function RecipientSelectionModal({ isOpen, onClose, onConfirm, suggestions, selectedEmails, setSelectedEmails, customEmailInput, setCustomEmailInput, customEmailError, setCustomEmailError, handleAddCustomEmail, }: { isOpen: boolean; onClose: () => void; onConfirm: () => void; suggestions: string[]; selectedEmails: string[]; setSelectedEmails: React.Dispatch>; customEmailInput: string; setCustomEmailInput: React.Dispatch>; customEmailError: string; setCustomEmailError: React.Dispatch>; handleAddCustomEmail: () => void; }) { const handleSuggestionToggle = (email: string) => { setSelectedEmails((prev) => { if (prev.includes(email)) { // Remove from selected return prev.filter((e) => e !== email); } else { // Add to selected return [...prev, email]; } }); }; const handleCustomEmailKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); handleAddCustomEmail(); } }; return (

Email Suggestions

{/* Suggestions */}

{suggestions.map((email) => ( handleSuggestionToggle(email)} endContent={ selectedEmails.includes(email) ? ( ) : null } > {email} ))}

{ setCustomEmailInput(e.target.value); setCustomEmailError(""); }} onKeyDown={handleCustomEmailKeyPress} size="sm" isInvalid={!!customEmailError} errorMessage={customEmailError} />

{/* Action Buttons */}

); } export function EmailComposeCard({ emailData, onSend, className, }: EmailComposeCardProps) { const [isRecipientModalOpen, setIsRecipientModalOpen] = useState(false); const [isSending, setIsSending] = useState(false); // Inline editing states const [isEditingSubject, setIsEditingSubject] = useState(false); const [isEditingBody, setIsEditingBody] = useState(false); const [editData, setEditData] = useState(emailData); // Suggestions come from emailData.to - these are resolved email addresses from the agent const [suggestions, setSuggestions] = useState(emailData.to || []); // Selected emails state const [selectedEmails, setSelectedEmails] = useState( emailData.to || [], ); // Custom email input state const [customEmailInput, setCustomEmailInput] = useState(""); const [customEmailError, setCustomEmailError] = useState(""); // Input refs for auto-focus const subjectInputRef = useRef(null); const bodyInputRef = useRef(null); // Initialize with empty emails array - user must select recipients // If there's only one email, select it by default useEffect(() => { const suggestions = emailData.to || []; setEditData((prev) => ({ ...prev, to: [] })); setSuggestions(suggestions); // If there's exactly one email suggestion, select it by default if (suggestions.length === 1) setSelectedEmails([suggestions[0]]); else setSelectedEmails([]); }, [emailData.to]); // Auto-focus logic useEffect(() => { if (isEditingSubject && subjectInputRef.current) { subjectInputRef.current.focus(); } }, [isEditingSubject]); useEffect(() => { if (isEditingBody && bodyInputRef.current) { bodyInputRef.current.focus(); } }, [isEditingBody]); const validateForm = () => { try { emailComposeSchema.parse({ to: selectedEmails, subject: editData.subject, body: editData.body, }); return true; } catch (error) { if (error instanceof z.ZodError) { const newErrors: Record = {}; error.errors.forEach((err) => { if (err.path[0]) { newErrors[err.path[0].toString()] = err.message; } }); } return false; } }; const validateCustomEmail = (email: string): boolean => { try { emailValidationSchema.parse(email); setCustomEmailError(""); return true; } catch (error) { if (error instanceof z.ZodError) { setCustomEmailError(error.errors[0]?.message || "Invalid email"); } return false; } }; const handleSend = async () => { if (selectedEmails.length === 0) { console.error("Please select at least one recipient"); return; } if (!validateForm()) { console.error("Please fix the validation errors"); return; } setIsSending(true); try { if (onSend) { await onSend({ ...editData, to: selectedEmails }); } } catch (error) { console.error("Error sending email:", error); } finally { setIsSending(false); } }; // Handle custom email addition const handleAddCustomEmail = () => { const trimmedEmail = customEmailInput.trim(); if (!trimmedEmail) { setCustomEmailError("Please enter an email address"); return; } if (!validateCustomEmail(trimmedEmail)) { return; } if (selectedEmails.includes(trimmedEmail)) { setCustomEmailError("Email already selected"); return; } // Add to selected emails setSelectedEmails((prev) => [...prev, trimmedEmail]); // Add to suggestions if not already there if (!suggestions.includes(trimmedEmail)) { setSuggestions((prev) => [...prev, trimmedEmail]); } // Clear input setCustomEmailInput(""); setCustomEmailError(""); }; const handleConfirmRecipients = () => { setEditData((prev) => ({ ...prev, to: selectedEmails })); setIsRecipientModalOpen(false); }; return ( <> {/* Main Email Card - Zinc Colors, Flat & Rounded, Light/Dark Mode */}

{/* Header with status chip */}

{emailData.draft_id ? "Email Draft" : "Compose Email"} {emailData.thread_id && ( Reply )}

To: {selectedEmails.join(", ") || ""}

Subject: {isEditingSubject ? ( setEditData({ ...editData, subject: e.target.value }) } onBlur={() => setIsEditingSubject(false)} onKeyDown={(e) => { if (e.key === "Enter") setIsEditingSubject(false); }} size="sm" classNames={{ input: "text-base font-medium text-zinc-900 dark:text-zinc-200", inputWrapper: "h-7 min-h-7 bg-transparent shadow-none border-none px-0", }} /> ) : ( {editData.subject} )}

{isEditingBody ? (

setEditData({ ...editData, body: e.target.value })
								}
								onBlur={() => setIsEditingBody(false)}
								minRows={6}
								classNames={{
									input:
										"text-sm text-zinc-900 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-500",
									inputWrapper: "bg-transparent shadow-none border-none p-0",
								}}
							/>
						) : (
							editData.body
						)}
					</ScrollShadow>
				</div>
				<div className="flex justify-end px-6 pb-5">
					<Button
						color="primary"
						onPress={handleSend}
						isLoading={isSending}
						isDisabled={selectedEmails.length === 0}
						radius="full"
						className="font-medium"
					>
						{isSending ? (
							<>
								<HugeiconsIcon
									icon={Loading03Icon}
									size={16}
									className="animate-spin"
								/>
								Sending...
							</>
						) : emailData.draft_id ? (
							"Send Draft"
						) : (
							"Send"
						)}
					</Button>
				</div>
			</div>

<RecipientSelectionModal
				isOpen={isRecipientModalOpen}
				onClose={() => setIsRecipientModalOpen(false)}
				onConfirm={handleConfirmRecipients}
				suggestions={suggestions}
				selectedEmails={selectedEmails}
				setSelectedEmails={setSelectedEmails}
				customEmailInput={customEmailInput}
				setCustomEmailInput={setCustomEmailInput}
				customEmailError={customEmailError}
				setCustomEmailError={setCustomEmailError}
				handleAddCustomEmail={handleAddCustomEmail}
			/>
		</>
	);
}
50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@gaia","registryDependencies":["icons"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/new-york/ui/email-compose-card.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>