Update templates/index.html

templates/index.html

@@ -1,33 +1,56 @@
 <!DOCTYPE html>
-<html>
+<html lang="id">
 <head>
     <script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
+    <style>
+        body { font-family: sans-serif; display: flex; justify-content: center; padding-top: 50px; background: #f4f4f9; }
+        .card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 300px; text-align: center; }
+        button { padding: 12px 25px; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; margin-top: 15px; }
+        #toggle-btn { background: #007bff; color: white; }
+    </style>
 </head>
 <body>
-    <div style="text-align: center; margin-top: 50px; font-family: sans-serif;">
+    <div class="card">
         <h1>Voice Agent</h1>
-        <button id="btn">Hubungkan</button>
+        <button id="toggle-btn">Hubungkan</button>
         <p id="status">Status: Terputus</p>
     </div>
 
     <script>
-        const btn = document.getElementById('btn');
+        const btn = document.getElementById('toggle-btn');
         const status = document.getElementById('status');
         let room;
 
         btn.onclick = async () => {
-            try {
-                status.innerText = "Menghubungkan...";
-                const res = await fetch('/token');
-                const data = await res.json();
-                
-                room = new LivekitClient.Room();
-                await room.connect(data.server_url, data.token);
-                
-                status.innerText = "Status: Terhubung";
-                btn.disabled = true;
-            } catch (e) {
-                status.innerText = "Error: " + e.message;
+            if (room && room.state === 'connected') {
+                room.disconnect();
+                room = null;
+                btn.innerText = "Hubungkan";
+                status.innerText = "Status: Terputus";
+            } else {
+                try {
+                    status.innerText = "Menghubungkan...";
+                    const res = await fetch('/token');
+                    const data = await res.json();
+                    
+                    room = new LivekitClient.Room();
+
+                    // --- BAGIAN PENTING UNTUK AUDIO ---
+                    room.on(LivekitClient.RoomEvent.TrackSubscribed, (track) => {
+                        if (track.kind === 'audio') {
+                            track.attach(); // Memaksa audio dimainkan di speaker
+                        }
+                    });
+                    // ----------------------------------
+
+                    await room.connect(data.server_url, data.token);
+                    await room.localParticipant.setMicrophoneEnabled(true);
+                    
+                    btn.innerText = "Berhenti";
+                    status.innerText = "Status: Terhubung";
+                } catch (e) {
+                    status.innerText = "Error: " + e.message;
+                }
             }
         };
     </script>