voilà merci pour votre aide en fait je voudrais sort sur la deuxième colonne où il fait noter bonjour je suis votre assistante comment puis-je vous aider avec votre projet aujourd'hui j'aimerais en fait quand je lui envoie par exemple je voudrais une vidéo complète à bas je voudrais en fait qu'elle doit générer des explications s'il vous plaît et puis sur la troisième colonne là où il fait marqué échec de chargement de l'aperçu voilà je voudrais qu'elle génère soit des vidéos ou images puisque je lui demande je voudrais un agent il ya qui s'appelle rosalinda s'il vous plaît intégré dans mon thème mon entreprise pour que je puisse travailler s'il vous plaît merci

index.html

@@ -94,9 +94,9 @@
             <div class="flex-1 flex flex-col p-4 overflow-y-auto" id="chatContainer">
                 <div class="flex-1 overflow-y-auto p-2 flex flex-col gap-3" id="chatMessages">
                     <div class="msg bg-gray-700/50 border border-gray-700 p-3 rounded-xl max-w-[80%]">
-                        Bonjour 👋 Je suis votre assistant IA. Comment puis-je vous aider avec votre projet aujourd'hui ?
+                        Bonjour 👋 Je suis Rosalinda, votre assistante IA. Je peux vous aider à générer des images, vidéos et bien plus. Dites-moi ce dont vous avez besoin !
                     </div>
-                </div>
+</div>
                 <div class="p-3 border-t border-gray-700 bg-gray-850">
                     <div class="flex items-center gap-2 p-2 rounded-xl bg-gray-800 border border-gray-700">
                         <button id="chatMicBtn" class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
@@ -141,16 +141,17 @@
                     </button>
                 </div>
             </div>
-
-            <div class="flex-1 flex items-center justify-center bg-gray-850/30">
-                <div class="w-full max-w-sm p-6 text-center">
-                    <div class="h-40 bg-gray-800 rounded-xl border-2 border-dashed border-gray-700 mb-4"></div>
-                    <h3 class="font-bold text-lg mb-1">Échec du chargement de l'aperçu.</h3>
-                    <p class="text-gray-400">Vérifie l'URL / le serveur local, puis rafraîchis.</p>
+                <div class="flex-1 flex flex-col p-4 overflow-y-auto bg-gray-850/30" id="previewPanel">
+                    <h3 class="font-bold text-lg mb-4">Génération Rosalinda</h3>
+                    <div id="mediaResults" class="grid grid-cols-2 gap-4">
+                        <!-- Les médias générés apparaîtront ici -->
+                    </div>
+                    <div id="explanations" class="mt-4 p-4 bg-gray-800 rounded-lg">
+                        <h4 class="font-medium mb-2">Explications techniques</h4>
+                        <p class="text-sm text-gray-400">En attente de votre demande...</p>
+                    </div>
                 </div>
-            </div>
-
-            <div class="p-3 border-t border-gray-700 flex justify-between text-sm bg-gray-850">
+<div class="p-3 border-t border-gray-700 flex justify-between text-sm bg-gray-850">
                 <span class="text-gray-500">Statut: <span class="text-gray-400">Hors ligne</span></span>
                 <span class="text-gray-500">Mode: <span class="text-gray-400">Preview</span></span>
             </div>

style.css

@@ -92,6 +92,31 @@ input:focus, button:focus {
     gap: 0.75rem;
 }
 
+/* Preview panel styles */
+#previewPanel {
+    background: rgba(17, 24, 39, 0.5);
+}
+
+#mediaResults {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.aspect-w-16 {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.aspect-h-9 {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.aspect-square {
+    aspect-ratio: 1/1;
+}
 .message-ia {
     background: #e3f2fd;
     padding: 12px;