cc and bcc

src/components/newMessage/NewMessage.tsx

@@ -21,10 +21,13 @@ const NewMessage: FC = () => {
     const [isOpening, setIsOpening] = useState(false)
     const [isIntelligenseOpen, setIsIntelligenseOpen] = useState(false)
     const [prompt, setPrompt] = useState('')
+    const [showCcBcc, setShowCcBcc] = useState(false)
 
     const {
         // Form state
         toEmails,
+        ccEmails,
+        bccEmails,
         subject,
         content,
         priority,
@@ -38,6 +41,10 @@ const NewMessage: FC = () => {
         // Form handlers
         addEmail,
         removeEmail,
+        addCcEmail,
+        removeCcEmail,
+        addBccEmail,
+        removeBccEmail,
         setSubject,
         setContent,
         setPriority,
@@ -76,6 +83,7 @@ const NewMessage: FC = () => {
         setTimeout(() => {
             setOpenNewMessage(false)
             resetForm()
+            setShowCcBcc(false)
         }, 300)
     }
 
@@ -132,20 +140,60 @@ const NewMessage: FC = () => {
                         {/* Content */}
                         <div className='space-y-6 md:space-y-8'>
                             <div>
-                                <label className='text-sm'>
+                                <label className='text-sm mb-1 block'>
                                     {t('new_message.to')}
                                 </label>
-                                <div className='mt-1'>
+                                <div>
                                     <EmailInput
                                         toEmails={toEmails}
                                         onAddEmail={addEmail}
                                         onRemoveEmail={removeEmail}
                                         suggestions={emailSuggestions}
                                         onSearchSuggestions={searchEmailSuggestions}
+                                        showCcBccButton={true}
+                                        onCcBccClick={() => setShowCcBcc(!showCcBcc)}
                                     />
                                 </div>
                             </div>
 
+                            {/* CC/BCC Accordion */}
+                            <div
+                                className={clx(
+                                    'overflow-hidden transition-all duration-300 ease-in-out space-y-4',
+                                    showCcBcc ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+                                )}
+                            >
+                                <div>
+                                    <label className='text-sm'>
+                                        CC
+                                    </label>
+                                    <div className='mt-1'>
+                                        <EmailInput
+                                            toEmails={ccEmails}
+                                            onAddEmail={addCcEmail}
+                                            onRemoveEmail={removeCcEmail}
+                                            suggestions={emailSuggestions}
+                                            onSearchSuggestions={searchEmailSuggestions}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <label className='text-sm'>
+                                        BCC
+                                    </label>
+                                    <div className='mt-1'>
+                                        <EmailInput
+                                            toEmails={bccEmails}
+                                            onAddEmail={addBccEmail}
+                                            onRemoveEmail={removeBccEmail}
+                                            suggestions={emailSuggestions}
+                                            onSearchSuggestions={searchEmailSuggestions}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
                             <div className='flex gap-2 items-end'>
                                 <div className='flex lg:flex-row flex-col flex-1 items-end gap-2'>
                                     <Input