+ = 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) => (
<div

components/chat.js

@@ -79,7 +79,7 @@ display: block;
         .plus-button {
           margin-right: 0;
         }
-.message-input {
+        .message-input {
           flex-grow: 1;
           padding: 0.75rem 1rem;
           border: 1px solid #e2e8f0;
@@ -116,7 +116,29 @@ display: block;
           width: 20px;
           height: 20px;
         }
-      </style>
+        .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;
+        }
+</style>
       <div class="chat-header">
         <span>45.pace/index.html</span>
         <span class="connection-status">*Connexion active : DeepSite API*</span>
@@ -149,20 +171,27 @@ display: block;
       <div class="conversation">
         <div class="message">"Je suis ROSALINDA, votre IA dédiée, intégrée à DeepSite. Je travaille avec vous pour générer des vidéos, images et thèmes professionnels. Parlez-moi, joignez vos fichiers, je crée."</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-area">
-        <button class="action-button plus-button" title="Ajouter des fichiers">
-          <i data-feather="plus"></i>
-        </button>
-        <button class="action-button" title="Connecter des applications">
-          <i data-feather="plug"></i>
-        </button>
-        <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage">
-        <button class="action-button mic-active active" title="Saisie vocale">
-          <i data-feather="mic"></i>
-        </button>
-        <button class="send-button" title="Envoyer">
-          <i data-feather="arrow-right"></i>
-        </button>
+  <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>
 `;
   }

script.js

@@ -9,11 +9,93 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
-    // Microphone toggle
-    const micButtons = document.querySelectorAll('.mic-active');
-    micButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            this.classList.toggle('active');
+    // Chat functionality
+    const chat = document.querySelector('custom-chat');
+    if (chat) {
+        const shadowRoot = chat.shadowRoot;
+        
+        // File picker
+        const fileButton = shadowRoot.getElementById('fileButton');
+        const fileInput = shadowRoot.getElementById('fileInput');
+        fileButton.addEventListener('click', () => fileInput.click());
+
+        // Connect apps
+        const connectButton = shadowRoot.getElementById('connectButton');
+        connectButton.addEventListener('click', () => {
+            alert('Connecter des applications - Cette fonctionnalité sera implémentée bientôt');
         });
-    });
+
+        // Microphone
+        const micButton = shadowRoot.getElementById('micButton');
+        micButton.addEventListener('click', () => {
+            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+                micButton.classList.toggle('listening');
+                if (micButton.classList.contains('listening')) {
+                    startSpeechRecognition();
+                } else {
+                    stopSpeechRecognition();
+                }
+            } else {
+                alert('La reconnaissance vocale n\'est pas supportée par votre navigateur');
+            }
+        });
+
+        // Send message
+        const sendButton = shadowRoot.getElementById('sendButton');
+        const messageInput = shadowRoot.getElementById('messageInput');
+        sendButton.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+
+        // Logs simulation
+        const logsContainer = shadowRoot.querySelector('.logs-container');
+        setInterval(() => {
+            const timestamp = new Date().toLocaleTimeString();
+            const logLine = document.createElement('div');
+            logLine.className = 'log-line';
+            logLine.textContent = `Console • ${timestamp} • activité...`;
+            logsContainer.appendChild(logLine);
+            logsContainer.scrollTop = logsContainer.scrollHeight;
+        }, 1400);
+    }
+
+    let recognition;
+    function startSpeechRecognition() {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        recognition = new SpeechRecognition();
+        recognition.lang = 'fr-FR';
+        recognition.interimResults = true;
+        recognition.continuous = true;
+
+        recognition.onresult = (event) => {
+            const transcript = Array.from(event.results)
+                .map(result => result[0])
+                .map(result => result.transcript)
+                .join(' ');
+            messageInput.value = transcript;
+        };
+
+        recognition.onerror = (event) => {
+            console.error('Speech recognition error', event.error);
+            micButton.classList.remove('listening');
+        };
+
+        recognition.start();
+    }
+
+    function stopSpeechRecognition() {
+        if (recognition) {
+            recognition.stop();
+        }
+    }
+
+    function sendMessage() {
+        const message = messageInput.value.trim();
+        if (message) {
+            // TODO: Implement actual message sending
+            console.log('Message sent:', message);
+            messageInput.value = '';
+        }
+    }
 });

style.css

@@ -40,13 +40,33 @@ custom-code-preview {
 .favorites div:hover {
     background: #f1f5f9;
 }
-
 .divider {
     text-align: center;
     color: #94a3b8;
     margin: 1rem 0;
 }
 
+.mic-active.listening {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.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;
+}
 .conversation-title {
     font-weight: 600;
     margin-bottom: 1rem;