Fonctionnel :

+ = ouvrir un sélecteur de fichiers

prise = bouton “connecter des applications”

micro = dictée vocale (Web Speech API)

flèche = envoyer

Placeholder : “Envoyer un message à Espace Codage”

Au-dessus : panneau “Voir l’ordinateur de Espace Codage” qui défile (logs)

"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";

type Props = {
onSend: (text: string, files?: File[]) => Promise<void> | void;
onConnectApps?: () => void;
};

type SpeechState = "idle" | "listening" | "unsupported" | "denied";

export default function ChatFooterBar({ onSend, onConnectApps }: Props) {
const [text, setText] = useState("");
const [files, setFiles] = useState<File[]>([]);
const [speech, setSpeech] = useState<SpeechState>("idle");
const [logs, setLogs] = useState<string[]>([
"Espace Codage • Démarrage…",
"Chargement des services…",
"Prêt ✅"
]);

const fileInputRef = useRef<HTMLInputElement | null>(null);
const logsRef = useRef<HTMLDivElement | null>(null);

// ---- “Ordinateur” qui défile (simulation de flux)
useEffect(() => {
const t = setInterval(() => {
setLogs((prev) => {
const next = [...prev, `Console • ${new Date().toLocaleTimeString()} • activité…`];
return next.length > 200 ? next.slice(-200) : next;
});
}, 1400);
return () => clearInterval(t);
}, []);

useEffect(() => {
if (!logsRef.current) return;
logsRef.current.scrollTop = logsRef.current.scrollHeight;
}, [logs]);

// ---- Dictée vocale (Web Speech API)
const SpeechRecognitionImpl = useMemo(() => {
if (typeof window === "undefined") return null;
const w = window as any;
return w.SpeechRecognition || w.webkitSpeechRecognition || null;
}, []);

const startDictation = async () => {
if (!SpeechRecognitionImpl) {
setSpeech("unsupported");
return;
}

// Certains navigateurs demandent une permission micro. On démarre simplement la reco.
const recog = new SpeechRecognitionImpl();
recog.lang = "fr-FR";
recog.interimResults = true;
recog.continuous = true;

setSpeech("listening");

let finalText = "";

recog.onresult = (event: any) => {
let interim = "";
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) finalText += transcript;
else interim += transcript;
}
setText((prev) => {
const base = prev.trim().length ? prev.trim() + " " : "";
const merged = (base + (finalText + interim)).replace(/\s+/g, " ").trim();
return merged;
});
};

recog.onerror = (e: any) => {
// not-allowed / service-not-allowed / audio-capture, etc.
if (String(e?.error).includes("not-allowed") || String(e?.error).includes("service-not-allowed")) {
setSpeech("denied");
} else {
setSpeech("idle");
}
try { recog.stop(); } catch {}
};

recog.onend = () => {
setSpeech((s) => (s === "listening" ? "idle" : s));
};

try {
recog.start();
} catch {
setSpeech("idle");
}
};

const stopDictation = () => {
// On ne garde pas l’instance globale ici. UX simple : re-cliquer micro stoppe via rechargement de state.
// Si tu veux un stop “dur”, on peut stocker l’instance dans un ref.
setSpeech("idle");
};

const handlePickFiles = () => fileInputRef.current?.click();

const handleFilesChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
const list = Array.from(e.target.files ?? []);
setFiles(list);
};

const handleSend = async () => {
const msg = text.trim();
if (!msg && files.length === 0) return;

await onSend(msg, files);

setText("");
setFiles([]);
if (fileInputRef.current) fileInputRef.current.value = "";
};

return (
<div className="w-full">
{/* --- Petit écran au-dessus (ordinateur) --- */}
<div className="mb-2 rounded-xl border border-white/10 bg-white/5 overflow-hidden">
<div className="flex items-center justify-between px-3 py-2 border-b border-white/10">
<div className="text-xs font-semibold text-white/80">Voir l’ordinateur de Espace Codage</div>
<div className="text-[11px] text-white/50">
{speech === "listening" ? "Micro actif…" : "En ligne"}
</div>
</div>

<div
ref={logsRef}
className="h-28 overflow-auto px-3 py-2 text-[11px] leading-5 text-white/70"
>
{logs.map((l, idx) => (
<div key={idx} className="whitespace-pre-wrap">
{l}
</div>
))}
</div>
</div>

{/* --- Barre du bas (comme la capture) --- */}
<div className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-2 py-2">
{/* + Fichiers */}
<button
type="button"
onClick={handlePickFiles}
className="h-9 w-9 grid place-items-center rounded-lg hover:bg-white/10 border border-white/10"
aria-label="Ajouter des fichiers"
title="Ajouter des fichiers"
>
<PlusIcon />
</button>

{/* Connecter des apps (prise) */}
<button
type="button"
onClick={onConnectApps}
className="h-9 w-9 grid place-items-center rounded-lg hover:bg-white/10 border border-white/10"
aria-label="Connecter des applications"
title="Connecter des applications"
>
<PlugIcon />
</button>

{/* Champ texte */}
<div className="flex-1">
<input
value={text}
onChange={(e) => setText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
void handleSend();
}
}}
className="w-full bg-transparent outline-none text-sm px-2 py-2 text-white placeholder:text-white/50"
placeholder="Envoyer un message à Espace Codage"
/>
{!!files.length && (
<div className="px-2 pt-1 text-[11px] text-white/60">
{files.length} fichier(s) ajouté(s)
</div>
)}
</div>

{/* Micro dictée */}
<button
type="button"
onClick={() => (speech === "listening" ? stopDictation() : startDictation())}
className={[
"h-9 w-9 grid place-items-center rounded-lg border border-white/10",
speech === "listening" ? "bg-white text-black" : "hover:bg-white/10"
].join(" ")}
aria-label="Saisie vocale"
title={
speech === "unsupported"
? "Dictée vocale non supportée"
: speech === "denied"
? "Permission micro refusée"
: "Saisie vocale"
}
>
<MicIcon active={speech === "listening"} />
</button>

{/* Envoyer */}
<button
type="button"
onClick={() => void handleSend()}
className="h-9 w-9 grid place-items-center rounded-lg bg-white/10 hover:bg-white/15 border border-white/10"
aria-label="Envoyer"
title="Envoyer"
>
<SendIcon />
</button>

<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={handleFilesChanged}
/>
</div>
</div>
);
}

/* --- Icônes inline (pas de dépendances) --- */

function PlusIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}

function PlugIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path
d="M9 7v5M15 7v5M7 12h10M10 12v4a4 4 0 0 0 4 4h1"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M6 7h12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
);
}

function MicIcon({ active }: { active: boolean }) {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path
d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z"
stroke="currentColor"
strokeWidth="2"
/>
<path
d="M19 11a7 7 0 0 1-14 0"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M12 18v3"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M8 21h8"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
{active ? (
<path
d="M4 4l16 16"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
opacity="0.25"
/>
) : null}
</svg>
);
}

function SendIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path
d="M5 12h12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M13 6l6 6-6 6"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

2) Exemple d’intégration dans ton chat : components/ChatPanel.tsx

Ici tu branches ton système existant (onSend).
Le code ci-dessous montre comment récupérer texte + fichiers.

"use client";

import React, { useState } from "react";
import ChatFooterBar from "./ChatFooterBar";

export default function ChatPanel() {
const [messages, setMessages] = useState<{ role: "user" | "assistant"; content: string }[]>([
{ role: "assistant", content: "Envoyez-moi un message." }
]);

return (
<div className="h-full flex flex-col">
<div className="flex-1 overflow-auto p-3 space-y-2">
{messages.map((m, i) => (

components/chat.js

@@ -3,16 +3,18 @@ class CustomChat extends HTMLElement {
   constructor() {
     super();
     this._logs = [
-      "Espace Codage • Démarrage...",
-      "Chargement des services...", 
-      "Prêt ✅"
+      "Rosalinda • Démarrage...",
+      "Chargement des services IA...",
+      "Connexion à l'espace de codage...",
+      "Prêt à aider ✅"
     ];
     this._messages = [
-      { role: "assistant", content: "Bonjour ! Je suis Rosalinda, votre IA personnelle. Comment puis-je vous aider aujourd'hui ?" }
+      { role: "assistant", content: "Bonjour ! Je suis Rosalinda, votre IA de création. Je peux vous aider avec des projets, du code, des images et des vidéos. Que souhaitez-vous créer aujourd'hui ?" }
     ];
+    this._files = [];
+    this._speechState = "idle"; // idle, listening, unsupported, denied
   }
-
-  connectedCallback() {
+connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
@@ -190,7 +192,6 @@ class CustomChat extends HTMLElement {
     this._setupEventListeners();
     this._startLogsSimulation();
   }
-
   _setupEventListeners() {
     const shadow = this.shadowRoot;
     const fileButton = shadow.getElementById('fileButton');
@@ -202,53 +203,110 @@ class CustomChat extends HTMLElement {
     const filesInfo = shadow.getElementById('filesInfo');
     const micStatus = shadow.getElementById('micStatus');
 
-    let files = [];
     let recognition;
-
     // File upload
     fileButton.addEventListener('click', () => fileInput.click());
     fileInput.addEventListener('change', (e) => {
-      files = Array.from(e.target.files);
-      filesInfo.textContent = files.length ? `${files.length} fichier(s) sélectionné(s)` : '';
+      this._files = Array.from(e.target.files);
+      filesInfo.textContent = this._files.length ? 
+        `${this._files.length} fichier(s) sélectionné(s)` : '';
     });
-
     // Connect apps
     connectButton.addEventListener('click', () => {
-      this._addMessage('assistant', 'Ouverture: connecter des applications...');
+      this._addMessage('assistant', 
+        'Ouverture des connexions d\'applications... Je peux me connecter à:\n' +
+        '- Votre espace de stockage\n- Outils de création\n- API externes\n' +
+        'Quel service souhaitez-vous connecter?');
     });
-
     // Speech recognition
     micButton.addEventListener('click', () => {
-      if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-        if (micButton.classList.contains('listening')) {
-          this._stopSpeechRecognition(recognition, micButton, micStatus);
+      if (this._speechState === 'listening') {
+        this._stopSpeechRecognition(recognition, micButton, micStatus);
+        return;
+      }
+
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        this._speechState = 'unsupported';
+        micStatus.textContent = 'Micro non supporté';
+        setTimeout(() => micStatus.textContent = 'En ligne', 2000);
+        return;
+      }
+
+      recognition = new SpeechRecognition();
+      recognition.lang = 'fr-FR';
+      recognition.interimResults = true;
+      recognition.continuous = true;
+
+      recognition.onstart = () => {
+        this._speechState = 'listening';
+        micButton.classList.add('listening');
+        micStatus.textContent = 'Micro actif...';
+      };
+
+      recognition.onresult = (event) => {
+        let transcript = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          if (event.results[i].isFinal) {
+            transcript += event.results[i][0].transcript;
+          }
+        }
+        messageInput.value = transcript;
+      };
+
+      recognition.onerror = (event) => {
+        if (event.error === 'not-allowed') {
+          this._speechState = 'denied';
+          micStatus.textContent = 'Micro bloqué';
         } else {
-          recognition = this._startSpeechRecognition(micButton, micStatus, messageInput);
+          this._speechState = 'idle';
         }
-      } else {
-        micStatus.textContent = 'Micro non supporté';
+        micButton.classList.remove('listening');
         setTimeout(() => micStatus.textContent = 'En ligne', 2000);
+      };
+
+      recognition.onend = () => {
+        if (this._speechState === 'listening') {
+          this._speechState = 'idle';
+          micButton.classList.remove('listening');
+          micStatus.textContent = 'En ligne';
+        }
+      };
+
+      try {
+        recognition.start();
+      } catch (err) {
+        this._speechState = 'idle';
+        micStatus.textContent = 'Erreur micro';
       }
     });
-
     // Send message
     const sendMessage = () => {
       const message = messageInput.value.trim();
-      if (message || files.length) {
-        this._addMessage('user', message + (files.length ? ` (${files.length} fichier(s))` : ''));
+      if (message || this._files.length) {
+        const fileInfo = this._files.length ? 
+          `\n[Fichiers joints: ${this._files.map(f => f.name).join(', ')}]` : '';
+        
+        this._addMessage('user', message + fileInfo);
         messageInput.value = '';
-        files = [];
+        this._files = [];
         filesInfo.textContent = '';
         fileInput.value = '';
 
-        // Simulate Rosalinda's response
+        // Simulate Rosalinda's intelligent response
         setTimeout(() => {
-          this._addMessage('assistant', 'Message reçu. Je traite votre demande...');
-        }, 1000);
+          const responses = [
+            "J'ai bien reçu votre demande. Je travaille sur une solution créative...",
+            "Analyse en cours. Je prépare quelque chose d'unique pour vous...",
+            "Génération en cours. Voici ce que je propose pour votre projet:",
+            "J'ai une idée intéressante pour votre demande. Voici mes suggestions:"
+          ];
+          const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+          this._addMessage('assistant', randomResponse);
+        }, 1500);
       }
     };
-
-    sendButton.addEventListener('click', sendMessage);
+sendButton.addEventListener('click', sendMessage);
     messageInput.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') sendMessage();
     });
@@ -268,18 +326,28 @@ class CustomChat extends HTMLElement {
     `).join('');
     chatContainer.scrollTop = chatContainer.scrollHeight;
   }
-
   _startLogsSimulation() {
     const logsContainer = this.shadowRoot.getElementById('logsContainer');
     setInterval(() => {
-      this._logs.push(`Console • ${new Date().toLocaleTimeString()} • activité...`);
+      const actions = [
+        'Analyse du projet',
+        'Optimisation des ressources',
+        'Génération de contenu',
+        'Connexion aux services',
+        'Préparation des résultats'
+      ];
+      const randomAction = actions[Math.floor(Math.random() * actions.length)];
+      
+      this._logs.push(`Rosalinda • ${new Date().toLocaleTimeString()} • ${randomAction}...`);
       if (this._logs.length > 20) this._logs.shift();
-      logsContainer.innerHTML = this._logs.map(log => `<div class="log-line">${log}</div>`).join('');
+      
+      logsContainer.innerHTML = this._logs.map(log => 
+        `<div class="log-line">${log}</div>`
+      ).join('');
       logsContainer.scrollTop = logsContainer.scrollHeight;
     }, 1400);
   }
-
-  _startSpeechRecognition(micButton, micStatus, messageInput) {
+_startSpeechRecognition(micButton, micStatus, messageInput) {
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
     const recognition = new SpeechRecognition();
     recognition.lang = 'fr-FR';

style.css

@@ -5,7 +5,6 @@ body {
     overflow: hidden;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
-
 /* Rosalinda IA Chat Styles */
 custom-chat {
     flex: 1;
@@ -13,6 +12,45 @@ custom-chat {
     flex-direction: column;
     background: #0b0f19;
     color: white;
+    position: relative;
+}
+
+.user-message {
+    background: #3b82f6;
+    color: white;
+    margin-left: auto;
+    border-radius: 1rem 1rem 0 1rem;
+    max-width: 80%;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.ai-message {
+    background: #1e293b;
+    color: white;
+    margin-right: auto;
+    border-radius: 1rem 1rem 1rem 0;
+    max-width: 80%;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.mic-button.listening {
+    background-color: #ef4444 !important;
+    color: white !important;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
+
+.file-info {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    margin-top: 0.25rem;
 }
 custom-sidebar {
     width: 280px;