feat: implement AI campaign generation logic and frontend integration

apps/admin/src/pages/CrmConversationalDashboard.tsx

@@ -24,8 +24,9 @@ export default function CrmConversationalDashboard() {
     ]);
     const [input, setInput] = useState('');
     const [isUploading, setIsUploading] = useState(false);
+    const [isGenerating, setIsGenerating] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
-    const [uploadedFile, setUploadedFile] = useState<{ name: string, listName: string } | null>(null);
+    const [uploadedFile, setUploadedFile] = useState<{ name: string, listId: string, listName: string } | null>(null);
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
     const scrollToBottom = () => {
@@ -42,8 +43,6 @@ export default function CrmConversationalDashboard() {
         setIsUploading(true);
         const formData = new FormData();
         formData.append('file', file);
-        // listName is optional, but we can pass one if we want
-        // formData.append('listName', 'Import Client ' + new Date().toLocaleDateString());
 
         try {
             const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/organizations/${selectedOrgId}/lists/import`, {
@@ -56,9 +55,8 @@ export default function CrmConversationalDashboard() {
 
             if (res.ok) {
                 const data = await res.json();
-                setUploadedFile({ name: file.name, listName: data.listName });
+                setUploadedFile({ name: file.name, listId: data.listId, listName: data.listName });
                 
-                // Add AI response as requested
                 const aiMsg: Message = {
                     id: Date.now().toString(),
                     role: 'assistant',
@@ -97,9 +95,9 @@ export default function CrmConversationalDashboard() {
         }
     };
 
-    const handleSendMessage = (e?: React.FormEvent) => {
+    const handleSendMessage = async (e?: React.FormEvent) => {
         e?.preventDefault();
-        if (!input.trim()) return;
+        if (!input.trim() || !token || !selectedOrgId) return;
 
         const userMsg: Message = {
             id: Date.now().toString(),
@@ -108,18 +106,54 @@ export default function CrmConversationalDashboard() {
             timestamp: new Date()
         };
         setMessages(prev => [...prev, userMsg]);
+        const currentInput = input;
         setInput('');
+        setIsGenerating(true);
 
-        // For now, just a placeholder AI response
-        setTimeout(() => {
-            const aiMsg: Message = {
-                id: (Date.now() + 1).toString(),
-                role: 'assistant',
-                content: "C'est noté. Je prépare le brouillon de votre message pour la liste sélectionnée. (En cours de développement)",
-                timestamp: new Date()
-            };
-            setMessages(prev => [...prev, aiMsg]);
-        }, 1000);
+        try {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/organizations/${selectedOrgId}/campaigns/generate`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ 
+                    prompt: currentInput, 
+                    listId: uploadedFile?.listId 
+                })
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                const aiMsg: Message = {
+                    id: Date.now().toString(),
+                    role: 'assistant',
+                    content: data.message,
+                    timestamp: new Date()
+                };
+                setMessages(prev => [...prev, aiMsg]);
+            } else {
+                const errorMsg: Message = {
+                    id: Date.now().toString(),
+                    role: 'assistant',
+                    content: "Désolé, je n'ai pas pu générer le message. Pouvez-vous reformuler votre demande ?",
+                    timestamp: new Date()
+                };
+                setMessages(prev => [...prev, errorMsg]);
+            }
+        } catch (err) {
+            console.error("Generation failed:", err);
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    const handleValidateAndSend = (_message: string) => {
+        if (!uploadedFile) {
+            alert("Veuillez d'abord importer une liste de contacts.");
+            return;
+        }
+        alert(`Campagne validée ! Envoi du message vers la liste "${uploadedFile.listName}"... (Action à implémenter)`);
     };
 
     return (
@@ -238,9 +272,35 @@ export default function CrmConversationalDashboard() {
                                     }`}>
                                         {msg.content}
                                     </div>
+                                    {msg.role === 'assistant' && msg.id !== '1' && !isGenerating && messages[messages.length - 1].id === msg.id && (
+                                        <motion.button 
+                                            initial={{ opacity: 0, scale: 0.9 }}
+                                            animate={{ opacity: 1, scale: 1 }}
+                                            onClick={() => handleValidateAndSend(msg.content)}
+                                            className="mt-3 bg-emerald-500 text-white px-6 py-3 rounded-2xl font-black text-xs shadow-lg shadow-emerald-100 hover:bg-emerald-600 hover:scale-105 active:scale-95 transition-all flex items-center gap-2"
+                                        >
+                                            <CheckCircle2 className="w-4 h-4" /> Valider et Envoyer à la liste
+                                        </motion.button>
+                                    )}
                                 </div>
                             </motion.div>
                         ))}
+                        {isGenerating && (
+                            <motion.div 
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                className="flex justify-start"
+                            >
+                                <div className="flex gap-4 max-w-[80%]">
+                                    <div className="w-10 h-10 rounded-2xl flex items-center justify-center bg-indigo-600 text-white shadow-sm flex-shrink-0 animate-pulse">
+                                        <Bot className="w-6 h-6" />
+                                    </div>
+                                    <div className="bg-white border border-slate-200 p-5 rounded-[1.8rem] rounded-tl-none flex items-center gap-3 text-slate-400 font-bold text-xs animate-pulse">
+                                        <Loader2 className="w-4 h-4 animate-spin" /> L'IA rédige votre campagne...
+                                    </div>
+                                </div>
+                            </motion.div>
+                        )}
                         <div ref={messagesEndRef} />
                     </div>
 

apps/api/src/index.ts

@@ -14,6 +14,7 @@ import { analyticsRoutes } from './routes/analytics';
 import { notificationRoutes } from './routes/notifications';
 import { internalRoutes } from './routes/internal';
 import { authRoutes } from './routes/auth';
+import campaignRoutes from './routes/campaigns';
 import { setupRateLimit } from './middleware/rateLimit';
 import { startCleanupCron } from './services/cleanup';
 
@@ -109,6 +110,7 @@ const registerRoutes = async () => {
         scope.register(paymentRoutes, { prefix: '/v1/payments' });
         scope.register(analyticsRoutes, { prefix: '/v1/analytics' });
         scope.register(notificationRoutes, { prefix: '/v1/notifications' });
+        scope.register(campaignRoutes, { prefix: '/v1/organizations' });
         scope.register(internalRoutes);
     });
 

apps/api/src/routes/campaigns.ts

@@ -0,0 +1,27 @@
+import { FastifyInstance } from 'fastify';
+import { aiService } from '../services/ai';
+
+export default async function campaignRoutes(fastify: FastifyInstance) {
+    // Generate AI Message for Campaign
+    fastify.post('/:id/campaigns/generate', async (req, reply) => {
+        const { prompt, listId } = req.body as { prompt: string, listId?: string };
+
+        if (!prompt) {
+            return reply.code(400).send({ error: 'Prompt is required' });
+        }
+
+        try {
+            const { text, aiSource } = await aiService.generateBroadcastMessage(prompt);
+
+            return {
+                ok: true,
+                message: text,
+                aiSource,
+                listId // Echoing back the listId for frontend use
+            };
+        } catch (err) {
+            fastify.log.error(err);
+            return reply.code(500).send({ error: 'AI Generation failed' });
+        }
+    });
+}

apps/api/src/services/ai/index.ts

@@ -284,6 +284,11 @@ export class AIService {
         return { ...data, aiSource: source };
     }
 
+    async generateBroadcastMessage(userPrompt: string): Promise<{ text: string, aiSource: string }> {
+        const systemPrompt = "Tu es un expert en marketing WhatsApp. Rédige un message court, percutant, avec des emojis pertinents, basé sur les instructions de l'utilisateur. Le message doit être prêt à être envoyé à une liste de diffusion.";
+        return this.generateText(systemPrompt, userPrompt, 0.8);
+    }
+
     async extractBusinessProfile(userInput: string, dayNumber: number, userLanguage: string = 'FR'): Promise<any> {
         const personality = await this.getTenantPersonality();
         const prompt = PromptLoader.compile('business-profile-extraction', {