Update static/index.html

static/index.html

@@ -55,6 +55,12 @@
         <h2>Client WebSocket pour API Mock</h2>
         <div id="status" class="disconnected">Déconnecté</div>
         
+        <div style="margin-bottom: 20px;">
+            <label for="apiKey" style="display: block; margin-bottom: 5px; font-weight: bold;">Clé API :</label>
+            <input type="password" id="apiKey" placeholder="Entrez votre clé API..." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
+            <small style="color: #666; font-size: 12px;">La clé est stockée uniquement dans votre navigateur pour cette session.</small>
+        </div>
+        
         <h3>Logs de Communication :</h3>
         <ul id="logs">
             <li>En attente de connexion...</li>
@@ -65,21 +71,30 @@
         const statusDiv = document.getElementById('status');
         const logsList = document.getElementById('logs');
         let ws;
+        
         function addLog(message) {
             const li = document.createElement('li');
             li.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
             logsList.appendChild(li);
             logsList.scrollTop = logsList.scrollHeight; // Auto-scroll
         }
+        
         // OpenAI API Call for private mode
         async function callOpenAI(prompt) {
             console.log('prompt:', prompt)
+            
+            // Récupérer la clé API depuis l'input
+            const apiKey = document.getElementById('apiKey').value.trim();
+            if (!apiKey) {
+                throw new Error('Clé API manquante. Veuillez la saisir dans le champ prévu.');
+            }
+            
             try {
                 const response = await fetch('https://llm.synapse.thalescloud.io/v1/chat/completions', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
-                        'Authorization': `Bearer sk-WzlemPa1Od-gAFwALPbgDA`
+                        'Authorization': `Bearer ${apiKey}`
                     },
                     body: JSON.stringify({
                         model: 'gemini-2.5-pro',
@@ -92,6 +107,7 @@
                         temperature: 0.7
                     })
                 });
+                
                 console.log('response:', response)
                 if (!response.ok) {
                     throw new Error(`OpenAI API error: ${response.status}`);
@@ -105,29 +121,56 @@
                 throw error;
             }
         }
+        
         function connect() {
             // Adapte le protocole (ws ou wss pour le sécurisé)
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             const wsUrl = `${protocol}//${window.location.host}/ws`;
             ws = new WebSocket(wsUrl);
+            
             ws.onopen = function() {
                 statusDiv.textContent = 'Connecté';
                 statusDiv.className = 'connected';
                 addLog('Connexion WebSocket établie.');
             };
+            
+            // CORRECTION PRINCIPALE : Rendre onmessage async et ajouter gestion d'erreur
             ws.onmessage = async function(event) {
                 const messageFromServer = event.data;
                 console.log(`Message reçu du serveur : "${messageFromServer}"`)
                 addLog(`Message reçu du serveur : "${messageFromServer}"`);
                 
                 try {
+                    // Vérifier que la connexion est encore ouverte
+                    if (ws.readyState !== WebSocket.OPEN) {
+                        addLog('Erreur: WebSocket fermé, impossible de répondre');
+                        return;
+                    }
+                    
+                    addLog('Appel API en cours...');
+                    
+                    // CORRECTION : Utiliser await pour attendre la réponse
                     const responsePhrase = await callOpenAI(messageFromServer);
-                    addLog(`Envoi de la réponse automatique : "${responsePhrase}"`);
-                    ws.send(responsePhrase);
+                    
+                    // Vérifier à nouveau que la connexion est ouverte
+                    if (ws.readyState === WebSocket.OPEN) {
+                        addLog(`Envoi de la réponse automatique : "${responsePhrase}"`);
+                        ws.send(responsePhrase);
+                    } else {
+                        addLog('Erreur: WebSocket fermé pendant l\'appel API');
+                    }
+                    
                 } catch (error) {
+                    console.error('Erreur lors de l\'appel API:', error);
                     addLog(`Erreur lors de l'appel API : ${error.message}`);
+                    
+                    // Envoyer un message d'erreur au serveur pour éviter le timeout
+                    if (ws.readyState === WebSocket.OPEN) {
+                        ws.send(`Erreur: ${error.message}`);
+                    }
                 }
             };
+            
             ws.onclose = function() {
                 statusDiv.textContent = 'Déconnecté';
                 statusDiv.className = 'disconnected';
@@ -135,12 +178,14 @@
                 // Tente de se reconnecter après 3 secondes
                 setTimeout(connect, 3000); 
             };
+            
             ws.onerror = function(error) {
                 addLog('Erreur WebSocket.');
                 console.error('WebSocket Error:', error);
                 ws.close();
             };
         }
+        
         // Lance la connexion au chargement de la page
         connect();
     </script>