diff --git a/examples/simple-chatbot/client/javascript/index.html b/examples/simple-chatbot/client/javascript/index.html index 6d3a18db4..658922776 100644 --- a/examples/simple-chatbot/client/javascript/index.html +++ b/examples/simple-chatbot/client/javascript/index.html @@ -1,47 +1,44 @@ + + + + AI Chatbot + - - - - AI Chatbot - - - -
-
-
- Status: Disconnected -
-
- - -
-
- -
-
-
+ +
+
+
+ Status: Disconnected
- +
+ + +
+
+ +
+
+
+ +
+
+ +
+
+ + +
+
+ +
+

Debug Info

+
-
-
- - -
-
- -
-

Debug Info

-
-
-
- - - - - - \ No newline at end of file + + + + diff --git a/examples/simple-chatbot/client/javascript/src/app.js b/examples/simple-chatbot/client/javascript/src/app.js index b24af87e2..01a2e8c5e 100644 --- a/examples/simple-chatbot/client/javascript/src/app.js +++ b/examples/simple-chatbot/client/javascript/src/app.js @@ -42,6 +42,7 @@ class ChatbotClient { this.debugLog = document.getElementById('debug-log'); this.botVideoContainer = document.getElementById('bot-video-container'); this.deviceSelector = document.getElementById('device-selector'); + this.micToggleBtn = document.getElementById('mic-toggle-btn'); // Create an audio element for bot's voice output this.botAudio = document.createElement('audio'); @@ -79,13 +80,19 @@ class ChatbotClient { // Handle mic mute/unmute toggle const micToggleBtn = document.getElementById('mic-toggle-btn'); - micToggleBtn.addEventListener('click', () => { - let micEnabled = this.pcClient.isMicEnabled; - micToggleBtn.textContent = micEnabled ? 'Unmute Mic' : 'Mute Mic'; - this.pcClient.enableMic(!micEnabled); + micToggleBtn.addEventListener('click', async () => { + if (this.pcClient.state === 'disconnected') { + await this.pcClient.initDevices(); + } else { + this.pcClient.enableMic(!this.pcClient.isMicEnabled); + } }); } + updateMicToggleButton(micEnabled) { + console.log('Mic enabled:', micEnabled, this.pcClient?.isMicEnabled); + this.micToggleBtn.textContent = micEnabled ? 'Mute Mic' : 'Unmute Mic'; + } /** * Set up the Pipecat client and Daily transport */ @@ -94,7 +101,7 @@ class ChatbotClient { // Initialize the Pipecat client with a DailyTransport and our configuration this.pcClient = new PipecatClient({ transport: new DailyTransport(), - enableMic: true, // Enable microphone for user input + enableMic: true, enableCam: false, callbacks: { // Handle connection state changes @@ -109,6 +116,7 @@ class ChatbotClient { this.connectBtn.disabled = false; this.disconnectBtn.disabled = true; this.log('Client disconnected'); + this.updateMicToggleButton(false); }, // Handle transport state changes onTransportStateChanged: (state) => { @@ -156,8 +164,6 @@ class ChatbotClient { // Set up listeners for media track events this.setupTrackListeners(); - - await this.pcClient.initDevices(); this.setupEventListeners(); } @@ -216,13 +222,16 @@ class ChatbotClient { // Listen for new tracks starting this.pcClient.on(RTVIEvent.TrackStarted, (track, participant) => { - // Only handle non-local (bot) tracks if (!participant?.local) { if (track.kind === 'audio') { this.setupAudioTrack(track); } else if (track.kind === 'video') { this.setupVideoTrack(track); } + } else if (track.kind === 'audio') { + console.log(`Local audio track started: `, this.pcClient.tracks()); + // If local audio track starts, update mic + this.updateMicToggleButton(true); } }); @@ -230,9 +239,13 @@ class ChatbotClient { this.pcClient.on(RTVIEvent.TrackStopped, (track, participant) => { this.log( `Track stopped event: ${track.kind} from ${ - participant?.name || 'unknown' + participant ? (participant.local ? 'local' : 'bot') : 'unknown' }` ); + if (participant?.local && track.kind === 'audio') { + // If local audio track stops, update mic toggle button + this.updateMicToggleButton(false); + } }); }