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

@@ -1,5 +1,17 @@
 
 class CustomChat extends HTMLElement {
+  constructor() {
+    super();
+    this._logs = [
+      "Espace Codage • Démarrage...",
+      "Chargement des services...", 
+      "Prêt ✅"
+    ];
+    this._messages = [
+      { role: "assistant", content: "Bonjour ! Je suis Rosalinda, votre IA personnelle. Comment puis-je vous aider aujourd'hui ?" }
+    ];
+  }
+
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
@@ -11,34 +23,73 @@ class CustomChat extends HTMLElement {
           background: #0b0f19;
           color: white;
           position: relative;
+          width: 100%;
         }
         .chat-container {
           flex: 1;
           overflow-y: auto;
           padding: 1rem;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
         }
         .message {
-          margin-bottom: 1rem;
+          margin-bottom: 0.5rem;
           padding: 0.75rem 1rem;
           border-radius: 0.75rem;
           max-width: 80%;
+          font-size: 0.875rem;
+          line-height: 1.4;
         }
         .user-message {
           background: #3b82f6;
           margin-left: auto;
+          border: 1px solid #2563eb;
         }
         .ai-message {
           background: #1e293b;
           margin-right: auto;
+          border: 1px solid #334155;
+        }
+        .computer-screen {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.5rem;
+          margin: 0.5rem;
+          overflow: hidden;
+        }
+        .screen-header {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.5rem 1rem;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .logs-container {
+          height: 7rem;
+          overflow-y: auto;
+          padding: 0.5rem 1rem;
+          font-family: monospace;
+          font-size: 0.7rem;
+          line-height: 1.5;
+          color: rgba(255, 255, 255, 0.7);
+        }
+        .log-line {
+          white-space: pre-wrap;
+          margin-bottom: 0.25rem;
         }
         .input-container {
           padding: 1rem;
           background: #0f172a;
           border-top: 1px solid #1e293b;
+          position: sticky;
+          bottom: 0;
         }
         .input-area {
           display: flex;
           gap: 0.5rem;
+          align-items: center;
         }
         input {
           flex: 1;
@@ -47,254 +98,228 @@ class CustomChat extends HTMLElement {
           border: 1px solid #334155;
           background: #1e293b;
           color: white;
+          font-size: 0.875rem;
         }
-        button {
-          padding: 0.75rem 1rem;
-          border-radius: 0.5rem;
-          background: #3b82f6;
-          color: white;
-          border: none;
-          cursor: pointer;
-        }
-        .file-upload {
-          display: none;
-        }
-        .logs {
-          font-family: monospace;
-          font-size: 0.8rem;
-          color: #94a3b8;
-          padding: 0.5rem;
-          background: #1e293b;
-          border-radius: 0.5rem;
-          margin-bottom: 0.5rem;
-          max-height: 100px;
-          overflow-y: auto;
-        }
-      </style>
-      <div class="chat-container" id="chat">
-        <div class="message ai-message">
-          Bonjour ! Je suis Rosalinda, votre IA personnelle. Comment puis-je vous aider aujourd'hui ?
-        </div>
-      </div>
-      <div class="logs">
-        <div>Rosalinda IA • Initialisation terminée</div>
-        <div>Système prêt à recevoir vos messages</div>
-      </div>
-      <div class="logs-container">
-        <div class="log-line">Espace Codage • Démarrage...</div>
-        <div class="log-line">Chargement des services...</div>
-        <div class="log-line">Prêt ✅</div>
-      </div>
-
-      <div class="input-container">
-        <div class="input-area">
-          <button class="action-button plus-button" title="Ajouter des fichiers" id="fileButton">
-            <i data-feather="plus"></i>
-          </button>
-          <button class="action-button" title="Connecter des applications" id="connectButton">
-            <i data-feather="plug"></i>
-          </button>
-          <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage" id="messageInput">
-          <button class="action-button mic-active" title="Saisie vocale" id="micButton">
-            <i data-feather="mic"></i>
-          </button>
-          <button class="send-button" title="Envoyer" id="sendButton">
-            <i data-feather="arrow-right"></i>
-          </button>
-          <input type="file" class="file-input" id="fileInput" multiple>
-        </div>
-      </div>
-<style>
-        .dev-screen {
-          background: #f1f5f9;
-          border: 1px solid #e2e8f0;
-          border-radius: 0.5rem;
-          padding: 1rem;
-          margin-bottom: 1.5rem;
-          font-family: monospace;
-        }
-        .dev-title {
-          font-weight: 600;
-          color: #1e293b;
-          margin-bottom: 0.5rem;
-        }
-        .code-scroll {
-          max-height: 120px;
-          overflow-y: auto;
-        }
-        :host {
-display: block;
-          width: 100%;
-          height: 100vh;
-          background: white;
-          border-right: 1px solid #e2e8f0;
-          padding: 1.5rem;
-          overflow-y: auto;
-        }
-        .chat-header {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          font-weight: 600;
-          color: #1e293b;
-          margin-bottom: 1.5rem;
-        }
-        .conversation {
-          margin-bottom: 1.5rem;
-        }
-        .message {
-          background: #f1f5f9;
-          padding: 0.75rem 1rem;
-          border-radius: 0.75rem;
-          margin-bottom: 0.75rem;
-          color: #334155;
-        }
-        .computer-screen {
-          background: #f1f5f9;
-          border: 1px solid #e2e8f0;
-          border-radius: 0.5rem;
-          padding: 1rem;
-          margin-bottom: 1.5rem;
-          font-family: monospace;
-        }
-        .screen-title {
-          font-weight: 600;
-          color: #1e293b;
-          margin-bottom: 0.5rem;
-        }
-        .screen-content {
-          max-height: 120px;
-          overflow-y: auto;
-        }
-        .input-area {
-          position: fixed;
-          bottom: 0;
-          left: 280px;
-          right: 40%;
-          background: white;
-          padding: 1rem;
-          border-top: 1px solid #e2e8f0;
+        .action-button {
+          width: 2.25rem;
+          height: 2.25rem;
           display: flex;
-          gap: 0.5rem;
           align-items: center;
-        }
-        .plus-button {
-          margin-right: 0;
-        }
-        .message-input {
-          flex-grow: 1;
-          padding: 0.75rem 1rem;
-          border: 1px solid #e2e8f0;
+          justify-content: center;
           border-radius: 0.5rem;
-          outline: none;
-        }
-        .message-input:focus {
-          border-color: #93c5fd;
-        }
-        .action-button {
-          background: none;
-          border: none;
+          background: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          color: white;
           cursor: pointer;
-          color: #64748b;
-          padding: 0.5rem;
-          border-radius: 0.5rem;
         }
         .action-button:hover {
-          background: #f1f5f9;
-          color: #1e40af;
+          background: rgba(255, 255, 255, 0.1);
         }
         .send-button {
           background: #3b82f6;
-          color: white;
           border: none;
-          border-radius: 0.5rem;
-          padding: 0 1rem;
-          cursor: pointer;
         }
         .send-button:hover {
           background: #2563eb;
         }
-        i {
-          width: 20px;
-          height: 20px;
+        .mic-button.listening {
+          background: white;
+          color: black;
         }
         .file-input {
           display: none;
         }
-        .logs-container {
-          max-height: 120px;
-          overflow-y: auto;
-          background: #f8fafc;
-          border: 1px solid #e2e8f0;
-          border-radius: 0.5rem;
-          padding: 0.5rem;
-          margin-bottom: 0.5rem;
-          font-family: monospace;
-          font-size: 0.8rem;
-        }
-        .log-line {
-          margin-bottom: 0.25rem;
-          color: #64748b;
-        }
-        .mic-active.listening {
-          background: #3b82f6;
-          color: white;
+        .files-info {
+          font-size: 0.7rem;
+          color: rgba(255, 255, 255, 0.6);
+          padding: 0.25rem 0.5rem;
         }
-</style>
-      <div class="chat-header">
-        <span>45.pace/index.html</span>
-        <span class="connection-status">*Connexion active : DeepSite API*</span>
+      </style>
+      <div class="chat-container" id="chat">
+        ${this._messages.map(msg => `
+          <div class="message ${msg.role === 'user' ? 'user-message' : 'ai-message'}">
+            ${msg.content}
+          </div>
+        `).join('')}
       </div>
+
       <div class="computer-screen">
-        <div class="screen-title">Voir l'ordinateur de Espace Codage</div>
-        <div class="screen-content">
-          <div class="code-line">▸ // Initialisation du projet</div>
-          <div class="code-line">const projet = new ProjetEspaceCodage();</div>
-          <div class="code-line">projet.chargerModules(['video', 'images', 'themes']);</div>
-          <div class="code-line"></div>
-          <div class="code-line">▸ // Connexion à ROSALINDA IA</div>
-          <div class="code-line">const rosalinda = new IAInterface();</div>
-          <div class="code-line">rosalinda.connecter();</div>
-          <div class="code-line">▸ // Chargement des dépendances</div>
-          <div class="code-line">import videoEditor from '@espace-codage/video';</div>
-          <div class="code-line">import imageGenerator from '@espace-codage/images';</div>
-          <div class="code-line">...</div>
+        <div class="screen-header">
+          <span>Voir l'ordinateur de Espace Codage</span>
+          <span id="micStatus">En ligne</span>
+        </div>
+        <div class="logs-container" id="logsContainer">
+          ${this._logs.map(log => `<div class="log-line">${log}</div>`).join('')}
         </div>
       </div>
-<div class="divider">---</div>
-      <div class="conversation-title">
-        <span class="ia-icon">🤖</span>
-        <span class="ia-name">ROSALINDA IA</span>
-      </div>
-      <div class="ia-description">
-        *Spécialisée en génération vidéo, images & thèmes*<br>
-        *Langue : Français | Microphone activé*
+
+      <div class="input-container">
+        <div class="input-area">
+          <button class="action-button" title="Ajouter des fichiers" id="fileButton">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </button>
+          <button class="action-button" title="Connecter des applications" id="connectButton">
+            <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" stroke-width="2" stroke-linecap="round" />
+              <path d="M6 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </button>
+          <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage" id="messageInput">
+          <button class="action-button mic-button" title="Saisie vocale" id="micButton">
+            <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" stroke-width="2" />
+              <path d="M19 11a7 7 0 0 1-14 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              <path d="M12 18v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              <path d="M8 21h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </button>
+          <button class="action-button send-button" title="Envoyer" id="sendButton">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M5 12h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+          <input type="file" class="file-input" id="fileInput" multiple>
+        </div>
+        <div class="files-info" id="filesInfo"></div>
       </div>
-      <div class="conversation">
-        <div class="message">"Je suis ROSALINDA, votre IA privée. Je fonctionne en local sans API externe, avec Ollama pour le texte, Stable Diffusion pour les images et FFmpeg pour les vidéos. Parlez-moi ou envoyez des fichiers pour commencer."</div>
+    `;
+
+    this._setupEventListeners();
+    this._startLogsSimulation();
+  }
+
+  _setupEventListeners() {
+    const shadow = this.shadowRoot;
+    const fileButton = shadow.getElementById('fileButton');
+    const fileInput = shadow.getElementById('fileInput');
+    const connectButton = shadow.getElementById('connectButton');
+    const micButton = shadow.getElementById('micButton');
+    const sendButton = shadow.getElementById('sendButton');
+    const messageInput = shadow.getElementById('messageInput');
+    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)` : '';
+    });
+
+    // Connect apps
+    connectButton.addEventListener('click', () => {
+      this._addMessage('assistant', 'Ouverture: connecter des applications...');
+    });
+
+    // Speech recognition
+    micButton.addEventListener('click', () => {
+      if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+        if (micButton.classList.contains('listening')) {
+          this._stopSpeechRecognition(recognition, micButton, micStatus);
+        } else {
+          recognition = this._startSpeechRecognition(micButton, micStatus, messageInput);
+        }
+      } else {
+        micStatus.textContent = 'Micro non supporté';
+        setTimeout(() => micStatus.textContent = 'En ligne', 2000);
+      }
+    });
+
+    // Send message
+    const sendMessage = () => {
+      const message = messageInput.value.trim();
+      if (message || files.length) {
+        this._addMessage('user', message + (files.length ? ` (${files.length} fichier(s))` : ''));
+        messageInput.value = '';
+        files = [];
+        filesInfo.textContent = '';
+        fileInput.value = '';
+
+        // Simulate Rosalinda's response
+        setTimeout(() => {
+          this._addMessage('assistant', 'Message reçu. Je traite votre demande...');
+        }, 1000);
+      }
+    };
+
+    sendButton.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') sendMessage();
+    });
+  }
+
+  _addMessage(role, content) {
+    this._messages.push({ role, content });
+    this._renderMessages();
+  }
+
+  _renderMessages() {
+    const chatContainer = this.shadowRoot.getElementById('chat');
+    chatContainer.innerHTML = this._messages.map(msg => `
+      <div class="message ${msg.role === 'user' ? 'user-message' : 'ai-message'}">
+        ${msg.content}
       </div>
-<div class="logs-container">
-  <div class="log-line">Espace Codage • Démarrage...</div>
-  <div class="log-line">Chargement des services...</div>
-  <div class="log-line">Prêt ✅</div>
-</div>
+    `).join('');
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+  }
 
-<div class="input-area">
-  <button class="action-button plus-button" title="Ajouter des fichiers" id="fileButton">
-    <i data-feather="plus"></i>
-  </button>
-  <button class="action-button" title="Connecter des applications" id="connectButton">
-    <i data-feather="plug"></i>
-  </button>
-  <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage" id="messageInput">
-  <button class="action-button mic-active" title="Saisie vocale" id="micButton">
-    <i data-feather="mic"></i>
-  </button>
-  <button class="send-button" title="Envoyer" id="sendButton">
-    <i data-feather="arrow-right"></i>
-  </button>
-  <input type="file" class="file-input" id="fileInput" multiple>
-</div>
+  _startLogsSimulation() {
+    const logsContainer = this.shadowRoot.getElementById('logsContainer');
+    setInterval(() => {
+      this._logs.push(`Console • ${new Date().toLocaleTimeString()} • activité...`);
+      if (this._logs.length > 20) this._logs.shift();
+      logsContainer.innerHTML = this._logs.map(log => `<div class="log-line">${log}</div>`).join('');
+      logsContainer.scrollTop = logsContainer.scrollHeight;
+    }, 1400);
+  }
+
+  _startSpeechRecognition(micButton, micStatus, messageInput) {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+    recognition.lang = 'fr-FR';
+    recognition.interimResults = true;
+    recognition.continuous = true;
+
+    micButton.classList.add('listening');
+    micStatus.textContent = 'Micro actif...';
+
+    recognition.onresult = (event) => {
+      let transcript = '';
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        transcript += event.results[i][0].transcript;
+      }
+      messageInput.value = transcript;
+    };
+
+    recognition.onerror = (event) => {
+      console.error('Speech recognition error', event.error);
+      micButton.classList.remove('listening');
+      micStatus.textContent = 'Erreur micro';
+      setTimeout(() => micStatus.textContent = 'En ligne', 2000);
+    };
+
+    recognition.onend = () => {
+      micButton.classList.remove('listening');
+      micStatus.textContent = 'En ligne';
+    };
+
+    recognition.start();
+    return recognition;
+  }
+
+  _stopSpeechRecognition(recognition, micButton, micStatus) {
+    if (recognition) {
+      recognition.stop();
+    }
+    micButton.classList.remove('listening');
+    micStatus.textContent = 'En ligne';
+  }
 `;
   }
 }