write message with ai + summerize

src/components/newMessage/NewMessage.tsx

@@ -9,6 +9,8 @@ import EmailAttachments from './EmailAttachments'
 import EmailFormActions from './EmailFormActions'
 import { useNewMessage } from './hooks/useNewMessage'
 import Intelligense from '@/assets/images/intelligense.svg'
+import { useGenerateEmail } from '@/pages/received/hooks/useEmailData'
+import { clx } from '@/helpers/utils'
 
 const NewMessage: FC = () => {
     const { t } = useTranslation('global')
@@ -16,6 +18,8 @@ const NewMessage: FC = () => {
     const [isClosing, setIsClosing] = useState(false)
     const [shouldRender, setShouldRender] = useState(false)
     const [isOpening, setIsOpening] = useState(false)
+    const [isIntelligenseOpen, setIsIntelligenseOpen] = useState(false)
+    const [prompt, setPrompt] = useState('')
 
     const {
         // Form state
@@ -46,6 +50,7 @@ const NewMessage: FC = () => {
         handleSaveDraft,
         resetForm
     } = useNewMessage()
+    const { mutate: generateEmail, isPending: isGeneratingEmail } = useGenerateEmail()
 
     useEffect(() => {
         if (openNewMessage) {
@@ -87,6 +92,21 @@ const NewMessage: FC = () => {
         }
     }
 
+    const handlePrompt = () => {
+        if (isIntelligenseOpen && prompt.length > 0) {
+            generateEmail({ prompt }, {
+                onSuccess: (data) => {
+                    setContent(data?.data?.assistance?.suggestion?.content)
+                    if (subject === '') {
+                        setSubject(data?.data?.assistance?.suggestion?.subject)
+                    }
+                }
+            })
+        } else {
+            setIsIntelligenseOpen(!isIntelligenseOpen)
+        }
+    }
+
     return (
         <>
             {shouldRender && (
@@ -126,17 +146,36 @@ const NewMessage: FC = () => {
                             </div>
 
                             <div className='flex gap-2 items-end'>
-                                <Input
-                                    label={t('new_message.subject')}
-                                    value={subject}
-                                    onChange={(e) => setSubject(e.target.value)}
-                                />
+                                <div className='flex flex-1 items-end gap-2'>
+                                    <Input
+                                        label={t('new_message.subject')}
+                                        value={subject}
+                                        onChange={(e) => setSubject(e.target.value)}
+                                        className='w-full'
+                                    />
 
-                                <div className='border border-border rounded-xl h-10 px-2 flex items-center justify-center'>
-                                    <img src={Intelligense} alt='intelligense' className='w-6' />
+                                    {
+                                        isIntelligenseOpen && (
+                                            <Input
+                                                placeholder={t('new_message.prompt')}
+                                                value={prompt}
+                                                onChange={(e) => setPrompt(e.target.value)}
+                                                className='w-full'
+                                            />
+                                        )
+                                    }
+                                </div>
+
+                                <div onClick={isGeneratingEmail ? undefined : handlePrompt} className='border border-border rounded-xl h-10 px-2 flex items-center justify-center'>
+                                    <img src={Intelligense} alt='intelligense' className={clx(
+                                        'w-6',
+                                        isGeneratingEmail && 'animate-spin spin-in'
+                                    )} />
                                 </div>
                             </div>
 
+
+
                             <div>
                                 <EmailEditor
                                     value={content}