feat: implement premium animated smart chips in CRM Dashboard chat UI

apps/admin/src/components/crm/CrmAIAssistant.tsx

@@ -22,6 +22,14 @@ interface CrmAIAssistantProps {
     onDrop: (e: React.DragEvent) => void;
     onSendMessage: (e?: React.FormEvent) => void;
     onValidateAndSend: (message: string) => void;
+    suggestions?: Array<{
+        id: string;
+        label: string;
+        prompt: string;
+        icon: any;
+        color: string;
+        bgColor: string;
+    }>;
 }
 
 export default function CrmAIAssistant({
@@ -36,7 +44,8 @@ export default function CrmAIAssistant({
     onDragLeave,
     onDrop,
     onSendMessage,
-    onValidateAndSend
+    onValidateAndSend,
+    suggestions = []
 }: CrmAIAssistantProps) {
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -170,6 +179,31 @@ export default function CrmAIAssistant({
 
                 {/* Chat Input */}
                 <div className="p-8 bg-gradient-to-t from-slate-50 via-slate-50 to-transparent">
+                    {/* Zone des Suggestions d'Actions (Premium UI) */}
+                    {messages.length <= 3 && suggestions.length > 0 && (
+                        <div className="max-w-3xl mx-auto mb-6 flex gap-3 overflow-x-auto pb-4 scrollbar-hide no-scrollbar">
+                            {suggestions.map((action) => {
+                                const Icon = action.icon;
+                                return (
+                                    <motion.button
+                                        key={action.id}
+                                        whileHover={{ y: -2, scale: 1.02 }}
+                                        whileTap={{ scale: 0.98 }}
+                                        onClick={() => setInput(action.prompt)}
+                                        className="flex items-center gap-2 whitespace-nowrap px-4 py-2.5 bg-white border border-slate-200 shadow-sm rounded-xl hover:shadow-md hover:border-indigo-200 transition-all duration-200 group flex-shrink-0"
+                                    >
+                                        <div className={`p-1.5 rounded-lg ${action.bgColor} group-hover:scale-110 transition-transform`}>
+                                            <Icon className={`w-4 h-4 ${action.color}`} />
+                                        </div>
+                                        <span className="text-slate-700 text-sm font-medium">
+                                            {action.label}
+                                        </span>
+                                    </motion.button>
+                                );
+                            })}
+                        </div>
+                    )}
+
                     <form 
                         onSubmit={onSendMessage}
                         className="max-w-3xl mx-auto relative group"

apps/admin/src/pages/CrmConversationalDashboard.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useAuth } from '../lib/auth';
 import { useTenant } from '../lib/tenant';
+import { Megaphone, Bot, FileSignature, BarChart3 } from 'lucide-react';
 import CrmStatsHeader from '../components/crm/CrmStatsHeader';
 import CrmAIAssistant from '../components/crm/CrmAIAssistant';
 import CrmInbox from '../components/crm/CrmInbox';
@@ -12,6 +13,41 @@ interface Message {
     timestamp: Date;
 }
 
+const SUGGESTED_ACTIONS = [
+  { 
+    id: 'campaign', 
+    label: "Nouvelle campagne", 
+    prompt: "Rédige une campagne promotionnelle WhatsApp",
+    icon: Megaphone,
+    color: "text-blue-600",
+    bgColor: "bg-blue-50"
+  },
+  { 
+    id: 'auto', 
+    label: "Message auto", 
+    prompt: "Configure un message d'absence automatique",
+    icon: Bot,
+    color: "text-emerald-600",
+    bgColor: "bg-emerald-50"
+  },
+  { 
+    id: 'template', 
+    label: "Créer un Modèle", 
+    prompt: "Aide-moi à créer un template validé par Meta",
+    icon: FileSignature,
+    color: "text-purple-600",
+    bgColor: "bg-purple-50"
+  },
+  { 
+    id: 'stats', 
+    label: "Analyser", 
+    prompt: "Fais-moi un résumé analytique des dernières réponses",
+    icon: BarChart3,
+    color: "text-orange-600",
+    bgColor: "bg-orange-50"
+  }
+];
+
 export default function CrmConversationalDashboard() {
     const { token } = useAuth();
     const { selectedOrgId } = useTenant();
@@ -250,6 +286,7 @@ export default function CrmConversationalDashboard() {
                         }}
                         onSendMessage={handleSendMessage}
                         onValidateAndSend={handleValidateAndSend}
+                        suggestions={SUGGESTED_ACTIONS}
                     />
                 ) : (
                     <CrmInbox