+ = 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

@@ -76,43 +76,54 @@ display: block;
           gap: 0.5rem;
           align-items: center;
         }
-        .plus-button {
-          margin-right: 0;
-        }
-        .message-input {
-          flex-grow: 1;
-          padding: 0.75rem 1rem;
-          border: 1px solid #e2e8f0;
-          border-radius: 0.5rem;
-          outline: none;
-        }
-        .message-input:focus {
-          border-color: #93c5fd;
-        }
         .action-button {
           background: none;
-          border: none;
+          border: 1px solid #e2e8f0;
           cursor: pointer;
           color: #64748b;
           padding: 0.5rem;
           border-radius: 0.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
         }
         .action-button:hover {
           background: #f1f5f9;
           color: #1e40af;
         }
+        .message-input {
+          flex-grow: 1;
+          padding: 0.75rem 1rem;
+          border: 1px solid #e2e8f0;
+          border-radius: 0.5rem;
+          outline: none;
+        }
+        .message-input:focus {
+          border-color: #93c5fd;
+        }
         .send-button {
           background: #3b82f6;
           color: white;
           border: none;
           border-radius: 0.5rem;
-          padding: 0 1rem;
+          padding: 0;
           cursor: pointer;
+          width: 36px;
+          height: 36px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
         .send-button:hover {
           background: #2563eb;
         }
-        i {
+        .mic-active.listening {
+          background: #3b82f6;
+          color: white;
+        }
+i {
           width: 20px;
           height: 20px;
         }
@@ -171,25 +182,37 @@ 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="computer-screen">
+          <div class="screen-title">Voir l'ordinateur de Espace Codage</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>
 <div class="input-area">
-  <button class="action-button plus-button" title="Ajouter des fichiers" id="fileButton">
-    <i data-feather="plus"></i>
+  <button class="action-button" title="Ajouter des fichiers" id="fileButton">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <path d="M12 5v14M5 12h14"/>
+    </svg>
   </button>
   <button class="action-button" title="Connecter des applications" id="connectButton">
-    <i data-feather="plug"></i>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <path d="M9 7v5M15 7v5M7 12h10M10 12v4a4 4 0 0 0 4 4h1M6 7h12"/>
+    </svg>
   </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>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z"/>
+      <path d="M19 11a7 7 0 0 1-14 0" stroke-linecap="round"/>
+      <path d="M12 18v3M8 21h8" stroke-linecap="round"/>
+    </svg>
   </button>
   <button class="send-button" title="Envoyer" id="sendButton">
-    <i data-feather="arrow-right"></i>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 12h14M13 6l6 6-6 6"/>
+    </svg>
   </button>
   <input type="file" class="file-input" id="fileInput" multiple>
 </div>

script.js

@@ -13,7 +13,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const chat = document.querySelector('custom-chat');
     if (chat) {
         const shadowRoot = chat.shadowRoot;
-        
         // File picker
         const fileButton = shadowRoot.getElementById('fileButton');
         const fileInput = shadowRoot.getElementById('fileInput');
@@ -22,7 +21,11 @@ document.addEventListener('DOMContentLoaded', function() {
         // Connect apps
         const connectButton = shadowRoot.getElementById('connectButton');
         connectButton.addEventListener('click', () => {
-            alert('Connecter des applications - Cette fonctionnalité sera implémentée bientôt');
+            const conversation = shadowRoot.querySelector('.conversation');
+            const message = document.createElement('div');
+            message.className = 'message';
+            message.textContent = 'Ouverture: connecter des applications...';
+            conversation.appendChild(message);
         });
 
         // Microphone
@@ -36,11 +39,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     stopSpeechRecognition();
                 }
             } else {
-                alert('La reconnaissance vocale n\'est pas supportée par votre navigateur');
+                const conversation = shadowRoot.querySelector('.conversation');
+                const message = document.createElement('div');
+                message.className = 'message';
+                message.textContent = 'La reconnaissance vocale n\'est pas supportée par votre navigateur';
+                conversation.appendChild(message);
             }
         });
-
-        // Send message
+// Send message
         const sendButton = shadowRoot.getElementById('sendButton');
         const messageInput = shadowRoot.getElementById('messageInput');
         sendButton.addEventListener('click', sendMessage);