Update templates/index.html

templates/index.html

@@ -1,70 +1,70 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
 <head>
     <meta charset="UTF-8">
-    <title>Voice Agent</title>
     <script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
     <style>
-        .card { max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; text-align: center; }
-        #volume-bar { height: 10px; background: #007bff; width: 0%; transition: width 0.1s; }
-        #transcript { height: 150px; overflow-y: auto; border: 1px solid #eee; margin-top: 10px; padding: 5px; text-align: left; }
+        body { font-family: 'Segoe UI', sans-serif; background-color: #f4f7f6; display: flex; justify-content: center; padding-top: 50px; }
+        .card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 350px; text-align: center; }
+        h1 { color: #333; font-size: 24px; margin-bottom: 20px; }
+        button { padding: 12px 24px; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; transition: 0.3s; margin: 5px; }
+        #btn-hubungkan { background: #007bff; color: white; }
+        #btn-batal { background: #dc3545; color: white; }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        #status { margin: 15px 0; font-weight: bold; color: #555; }
+        #transcript { margin-top: 20px; padding: 15px; background: #f8f9fa; border-left: 4px solid #007bff; border-radius: 5px; min-height: 80px; text-align: left; font-size: 14px; color: #444; }
     </style>
 </head>
 <body>
     <div class="card">
-        <h1>Agent Status</h1>
-        <button id="start-btn">Hubungkan</button>
-        <div id="status">Status: Terputus</div>
-        <div style="background: #ddd; margin: 10px 0;"><div id="volume-bar"></div></div>
+        <h1>Voice Agent</h1>
+        <button id="btn-hubungkan">Hubungkan</button>
+        <button id="btn-batal" disabled>Batal</button>
+        <p id="status">Status: Terputus</p>
         <div id="transcript">Belum ada percakapan...</div>
     </div>
 
     <script>
-        const startBtn = document.getElementById('start-btn');
-        const statusDiv = document.getElementById('status');
-        const volumeBar = document.getElementById('volume-bar');
-        const transcriptDiv = document.getElementById('transcript');
+        const btnHubungkan = document.getElementById('btn-hubungkan');
+        const btnBatal = document.getElementById('btn-batal');
+        const status = document.getElementById('status');
+        const transcript = document.getElementById('transcript');
         let room;
 
-        async function connect() {
+        btnHubungkan.onclick = async () => {
             try {
+                status.innerText = "Menghubungkan...";
                 const res = await fetch('/token');
                 const data = await res.json();
                 
-                room = new LivekitClient.Room({
-                    adaptiveStream: true,
-                    dynacast: true,
-                });
-
-                // 1. Event saat ada data (transkrip) masuk
-                room.on(LivekitClient.RoomEvent.DataReceived, (payload, participant) => {
+                room = new LivekitClient.Room();
+                
+                // Menerima teks dari Agen
+                room.on('dataReceived', (payload) => {
                     const text = new TextDecoder().decode(payload);
-                    transcriptDiv.innerHTML += `<p><b>Agent:</b> ${text}</p>`;
-                    transcriptDiv.scrollTop = transcriptDiv.scrollHeight;
+                    transcript.innerHTML = `<b>Agen:</b> ${text}`;
                 });
 
                 await room.connect(data.server_url, data.token);
-                statusDiv.innerText = "Status: Terhubung";
                 await room.localParticipant.setMicrophoneEnabled(true);
-
-                // 2. Loop untuk Indikator Suara
-                setInterval(() => {
-                    if (room.localParticipant) {
-                        const trackPub = room.localParticipant.audioTrackPublications.values().next().value;
-                        if (trackPub && trackPub.track) {
-                            const level = trackPub.track.getVolumeLevel() * 100;
-                            volumeBar.style.width = Math.min(level * 2, 100) + "%";
-                        }
-                    }
-                }, 100);
-
+                
+                status.innerText = "Status: Terhubung";
+                btnHubungkan.disabled = true;
+                btnBatal.disabled = false;
             } catch (e) {
-                console.error(e);
-                statusDiv.innerText = "Gagal: " + e.message;
+                status.innerText = "Error: " + e.message;
             }
-        }
+        };
 
-        startBtn.onclick = connect;
+        btnBatal.onclick = () => {
+            if (room) {
+                room.disconnect();
+                status.innerText = "Status: Terputus";
+                btnHubungkan.disabled = false;
+                btnBatal.disabled = true;
+                transcript.innerHTML = "Belum ada percakapan...";
+            }
+        };
     </script>
 </body>
 </html>