{"ast":null,"code":"var _jsxFileName = \"/home/gnx/Desktop/gnx-mail/frontend/src/pages/Compose.js\",\n _s = $RefreshSig$();\nimport React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useMutation, useQuery } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\nimport { Send, Paperclip, X, Plus, Bold, Italic, Underline, List, Link as LinkIcon } from 'lucide-react';\nimport { api, endpoints } from '../services/api';\nimport LoadingSpinner from '../components/LoadingSpinner';\nimport toast from 'react-hot-toast';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Compose = () => {\n _s();\n const [attachments, setAttachments] = useState([]);\n const [isRichText, setIsRichText] = useState(false);\n const navigate = useNavigate();\n const {\n register,\n handleSubmit,\n watch,\n setValue,\n formState: {\n errors\n }\n } = useForm({\n defaultValues: {\n to_emails: [],\n cc_emails: [],\n bcc_emails: [],\n subject: '',\n body_text: '',\n body_html: ''\n }\n });\n const {\n data: templates\n } = useQuery('templates', () => api.get(endpoints.templates).then(res => res.data.results));\n const {\n data: signatures\n } = useQuery('signatures', () => api.get(endpoints.signatures).then(res => res.data.results));\n const sendEmailMutation = useMutation(data => api.post(endpoints.sendEmail, data), {\n onSuccess: () => {\n toast.success('Email sent successfully!');\n navigate('/inbox');\n },\n onError: error => {\n toast.error('Failed to send email');\n console.error(error);\n }\n });\n const onSubmit = async data => {\n const formData = new FormData();\n\n // Add email data\n formData.append('subject', data.subject);\n formData.append('to_emails', JSON.stringify(data.to_emails));\n formData.append('cc_emails', JSON.stringify(data.cc_emails || []));\n formData.append('bcc_emails', JSON.stringify(data.bcc_emails || []));\n formData.append('body_text', data.body_text);\n formData.append('body_html', data.body_html || '');\n formData.append('priority', data.priority || 'normal');\n\n // Add attachments\n attachments.forEach(file => {\n formData.append('attachments', file);\n });\n sendEmailMutation.mutate(formData);\n };\n const handleAttachmentChange = e => {\n const files = Array.from(e.target.files);\n setAttachments(prev => [...prev, ...files]);\n };\n const removeAttachment = index => {\n setAttachments(prev => prev.filter((_, i) => i !== index));\n };\n const addRecipient = type => {\n const currentValue = watch(type);\n setValue(type, [...currentValue, '']);\n };\n const updateRecipient = (type, index, value) => {\n const currentValue = watch(type);\n const newValue = [...currentValue];\n newValue[index] = value;\n setValue(type, newValue);\n };\n const removeRecipient = (type, index) => {\n const currentValue = watch(type);\n setValue(type, currentValue.filter((_, i) => i !== index));\n };\n const RecipientField = ({\n type,\n label,\n placeholder\n }) => {\n const recipients = watch(type) || [];\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"space-y-2\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"block text-sm font-medium text-gray-700\",\n children: label\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 117,\n columnNumber: 9\n }, this), recipients.map((recipient, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-2\",\n children: [/*#__PURE__*/_jsxDEV(\"input\", {\n type: \"email\",\n value: recipient,\n onChange: e => updateRecipient(type, index, e.target.value),\n placeholder: placeholder,\n className: \"input flex-1\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n onClick: () => removeRecipient(type, index),\n className: \"text-gray-400 hover:text-red-500\",\n children: /*#__PURE__*/_jsxDEV(X, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 134,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 129,\n columnNumber: 13\n }, this)]\n }, index, true, {\n fileName: _jsxFileName,\n lineNumber: 121,\n columnNumber: 11\n }, this)), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n onClick: () => addRecipient(type),\n className: \"text-sm text-primary-600 hover:text-primary-500 flex items-center\",\n children: [/*#__PURE__*/_jsxDEV(Plus, {\n className: \"h-4 w-4 mr-1\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 143,\n columnNumber: 11\n }, this), \"Add \", label.toLowerCase()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 116,\n columnNumber: 7\n }, this);\n };\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"max-w-4xl mx-auto space-y-6\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"md:flex md:items-center md:justify-between\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex-1 min-w-0\",\n children: /*#__PURE__*/_jsxDEV(\"h2\", {\n className: \"text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate\",\n children: \"Compose Email\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 155,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"form\", {\n onSubmit: handleSubmit(onSubmit),\n className: \"space-y-6\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"card\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"card-body space-y-6\",\n children: [/*#__PURE__*/_jsxDEV(RecipientField, {\n type: \"to_emails\",\n label: \"To\",\n placeholder: \"Enter email address\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(RecipientField, {\n type: \"cc_emails\",\n label: \"Cc\",\n placeholder: \"Enter email address\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 171,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(RecipientField, {\n type: \"bcc_emails\",\n label: \"Bcc\",\n placeholder: \"Enter email address\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n htmlFor: \"subject\",\n className: \"block text-sm font-medium text-gray-700\",\n children: \"Subject\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n ...register('subject', {\n required: 'Subject is required'\n }),\n type: \"text\",\n className: `input ${errors.subject ? 'input-error' : ''}`,\n placeholder: \"Enter subject\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 188,\n columnNumber: 15\n }, this), errors.subject && /*#__PURE__*/_jsxDEV(\"p\", {\n className: \"mt-1 text-sm text-red-600\",\n children: errors.subject.message\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 195,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"block text-sm font-medium text-gray-700 mb-2\",\n children: \"Attachments\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 201,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-4\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"btn-secondary cursor-pointer\",\n children: [/*#__PURE__*/_jsxDEV(Paperclip, {\n className: \"h-4 w-4 mr-2\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 206,\n columnNumber: 19\n }, this), \"Attach Files\", /*#__PURE__*/_jsxDEV(\"input\", {\n type: \"file\",\n multiple: true,\n onChange: handleAttachmentChange,\n className: \"hidden\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 208,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 205,\n columnNumber: 17\n }, this), attachments.length > 0 && /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex flex-wrap gap-2\",\n children: attachments.map((file, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center bg-gray-100 rounded-md px-3 py-1\",\n children: [/*#__PURE__*/_jsxDEV(\"span\", {\n className: \"text-sm text-gray-700\",\n children: file.name\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 219,\n columnNumber: 25\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n onClick: () => removeAttachment(index),\n className: \"ml-2 text-gray-400 hover:text-red-500\",\n children: /*#__PURE__*/_jsxDEV(X, {\n className: \"h-3 w-3\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 225,\n columnNumber: 27\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 220,\n columnNumber: 25\n }, this)]\n }, index, true, {\n fileName: _jsxFileName,\n lineNumber: 218,\n columnNumber: 23\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 216,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 204,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 200,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center justify-between mb-2\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"block text-sm font-medium text-gray-700\",\n children: \"Message\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 237,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-2\",\n children: /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n onClick: () => setIsRichText(!isRichText),\n className: `text-sm px-3 py-1 rounded-md ${isRichText ? 'bg-primary-100 text-primary-700' : 'bg-gray-100 text-gray-700'}`,\n children: \"Rich Text\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 241,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 236,\n columnNumber: 15\n }, this), isRichText ? /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"border border-gray-300 rounded-md\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-2 p-2 border-b border-gray-300 bg-gray-50\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"p-1 hover:bg-gray-200 rounded\",\n children: /*#__PURE__*/_jsxDEV(Bold, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 260,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 259,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"p-1 hover:bg-gray-200 rounded\",\n children: /*#__PURE__*/_jsxDEV(Italic, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 262,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"p-1 hover:bg-gray-200 rounded\",\n children: /*#__PURE__*/_jsxDEV(Underline, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"p-1 hover:bg-gray-200 rounded\",\n children: /*#__PURE__*/_jsxDEV(List, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 269,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 268,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"p-1 hover:bg-gray-200 rounded\",\n children: /*#__PURE__*/_jsxDEV(LinkIcon, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 272,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 271,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 258,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"textarea\", {\n ...register('body_html'),\n rows: 12,\n className: \"w-full p-3 border-0 focus:ring-0 resize-none\",\n placeholder: \"Write your message...\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 275,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 256,\n columnNumber: 17\n }, this) : /*#__PURE__*/_jsxDEV(\"textarea\", {\n ...register('body_text', {\n required: 'Message is required'\n }),\n rows: 12,\n className: `input ${errors.body_text ? 'input-error' : ''}`,\n placeholder: \"Write your message...\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 283,\n columnNumber: 17\n }, this), errors.body_text && /*#__PURE__*/_jsxDEV(\"p\", {\n className: \"mt-1 text-sm text-red-600\",\n children: errors.body_text.message\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 291,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 235,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n htmlFor: \"priority\",\n className: \"block text-sm font-medium text-gray-700\",\n children: \"Priority\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"select\", {\n ...register('priority'),\n className: \"input\",\n children: [/*#__PURE__*/_jsxDEV(\"option\", {\n value: \"normal\",\n children: \"Normal\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 304,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"option\", {\n value: \"high\",\n children: \"High\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"option\", {\n value: \"low\",\n children: \"Low\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 300,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 296,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 163,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"card-footer\",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center justify-between\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-4\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"btn-secondary\",\n onClick: () => navigate('/inbox'),\n children: \"Cancel\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 314,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"button\",\n className: \"btn-secondary\",\n children: \"Save Draft\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 321,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 313,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n type: \"submit\",\n disabled: sendEmailMutation.isLoading,\n className: \"btn-primary\",\n children: [sendEmailMutation.isLoading ? /*#__PURE__*/_jsxDEV(LoadingSpinner, {\n size: \"sm\",\n className: \"mr-2\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 334,\n columnNumber: 19\n }, this) : /*#__PURE__*/_jsxDEV(Send, {\n className: \"h-4 w-4 mr-2\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 336,\n columnNumber: 19\n }, this), \"Send\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 312,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 162,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 161,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 151,\n columnNumber: 5\n }, this);\n};\n_s(Compose, \"9/+2ai8APFJomeBWyFzKCtCQm/8=\", false, function () {\n return [useNavigate, useForm, useQuery, useQuery, useMutation];\n});\n_c = Compose;\nexport default Compose;\nvar _c;\n$RefreshReg$(_c, \"Compose\");","map":{"version":3,"names":["React","useState","useForm","useMutation","useQuery","useNavigate","Send","Paperclip","X","Plus","Bold","Italic","Underline","List","Link","LinkIcon","api","endpoints","LoadingSpinner","toast","jsxDEV","_jsxDEV","Compose","_s","attachments","setAttachments","isRichText","setIsRichText","navigate","register","handleSubmit","watch","setValue","formState","errors","defaultValues","to_emails","cc_emails","bcc_emails","subject","body_text","body_html","data","templates","get","then","res","results","signatures","sendEmailMutation","post","sendEmail","onSuccess","success","onError","error","console","onSubmit","formData","FormData","append","JSON","stringify","priority","forEach","file","mutate","handleAttachmentChange","e","files","Array","from","target","prev","removeAttachment","index","filter","_","i","addRecipient","type","currentValue","updateRecipient","value","newValue","removeRecipient","RecipientField","label","placeholder","recipients","className","children","fileName","_jsxFileName","lineNumber","columnNumber","map","recipient","onChange","onClick","toLowerCase","htmlFor","required","message","multiple","length","name","rows","disabled","isLoading","size","_c","$RefreshReg$"],"sources":["/home/gnx/Desktop/gnx-mail/frontend/src/pages/Compose.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useMutation, useQuery } from 'react-query';\nimport { useNavigate } from 'react-router-dom';\nimport { \n Send, \n Paperclip, \n X, \n Plus,\n Bold,\n Italic,\n Underline,\n List,\n Link as LinkIcon\n} from 'lucide-react';\nimport { api, endpoints } from '../services/api';\nimport LoadingSpinner from '../components/LoadingSpinner';\nimport toast from 'react-hot-toast';\n\nconst Compose = () => {\n const [attachments, setAttachments] = useState([]);\n const [isRichText, setIsRichText] = useState(false);\n const navigate = useNavigate();\n\n const {\n register,\n handleSubmit,\n watch,\n setValue,\n formState: { errors },\n } = useForm({\n defaultValues: {\n to_emails: [],\n cc_emails: [],\n bcc_emails: [],\n subject: '',\n body_text: '',\n body_html: '',\n },\n });\n\n const { data: templates } = useQuery(\n 'templates',\n () => api.get(endpoints.templates).then(res => res.data.results)\n );\n\n const { data: signatures } = useQuery(\n 'signatures',\n () => api.get(endpoints.signatures).then(res => res.data.results)\n );\n\n const sendEmailMutation = useMutation(\n (data) => api.post(endpoints.sendEmail, data),\n {\n onSuccess: () => {\n toast.success('Email sent successfully!');\n navigate('/inbox');\n },\n onError: (error) => {\n toast.error('Failed to send email');\n console.error(error);\n },\n }\n );\n\n const onSubmit = async (data) => {\n const formData = new FormData();\n \n // Add email data\n formData.append('subject', data.subject);\n formData.append('to_emails', JSON.stringify(data.to_emails));\n formData.append('cc_emails', JSON.stringify(data.cc_emails || []));\n formData.append('bcc_emails', JSON.stringify(data.bcc_emails || []));\n formData.append('body_text', data.body_text);\n formData.append('body_html', data.body_html || '');\n formData.append('priority', data.priority || 'normal');\n \n // Add attachments\n attachments.forEach((file) => {\n formData.append('attachments', file);\n });\n\n sendEmailMutation.mutate(formData);\n };\n\n const handleAttachmentChange = (e) => {\n const files = Array.from(e.target.files);\n setAttachments(prev => [...prev, ...files]);\n };\n\n const removeAttachment = (index) => {\n setAttachments(prev => prev.filter((_, i) => i !== index));\n };\n\n const addRecipient = (type) => {\n const currentValue = watch(type);\n setValue(type, [...currentValue, '']);\n };\n\n const updateRecipient = (type, index, value) => {\n const currentValue = watch(type);\n const newValue = [...currentValue];\n newValue[index] = value;\n setValue(type, newValue);\n };\n\n const removeRecipient = (type, index) => {\n const currentValue = watch(type);\n setValue(type, currentValue.filter((_, i) => i !== index));\n };\n\n const RecipientField = ({ type, label, placeholder }) => {\n const recipients = watch(type) || [];\n \n return (\n