diff --git a/examples/simple-chatbot/client/javascript/index.html b/examples/simple-chatbot/client/javascript/index.html index 658922776..dc9050576 100644 --- a/examples/simple-chatbot/client/javascript/index.html +++ b/examples/simple-chatbot/client/javascript/index.html @@ -30,6 +30,13 @@ +
+ + +
diff --git a/examples/simple-chatbot/client/javascript/src/app.js b/examples/simple-chatbot/client/javascript/src/app.js index 01a2e8c5e..38e8e6d04 100644 --- a/examples/simple-chatbot/client/javascript/src/app.js +++ b/examples/simple-chatbot/client/javascript/src/app.js @@ -43,6 +43,7 @@ class ChatbotClient { this.botVideoContainer = document.getElementById('bot-video-container'); this.deviceSelector = document.getElementById('device-selector'); this.micToggleBtn = document.getElementById('mic-toggle-btn'); + this.sendTextBtn = document.getElementById('send-text-btn'); // Create an audio element for bot's voice output this.botAudio = document.createElement('audio'); @@ -87,6 +88,31 @@ class ChatbotClient { this.pcClient.enableMic(!this.pcClient.isMicEnabled); } }); + + const textInput = document.getElementById('text-input'); + + const sendTextToLLM = () => { + this.sendTextBtn.disabled = true; // Disable button to prevent multiple clicks + const text = textInput.value.trim(); + if (text) { + void this.pcClient.appendToContext({ + role: 'user', + content: text, + run_immediately: true, + }); + } + textInput.value = ''; // Clear the input + this.sendTextBtn.disabled = false; // Re-enable button after sending + }; + + this.sendTextBtn.addEventListener('click', sendTextToLLM); + + // Also handle Enter key in the input + textInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + sendTextToLLM(); + } + }); } updateMicToggleButton(micEnabled) { @@ -115,6 +141,7 @@ class ChatbotClient { this.updateStatus('Disconnected'); this.connectBtn.disabled = false; this.disconnectBtn.disabled = true; + this.sendTextBtn.disabled = true; this.log('Client disconnected'); this.updateMicToggleButton(false); }, @@ -136,6 +163,7 @@ class ChatbotClient { onBotReady: (data) => { this.log(`Bot ready: ${JSON.stringify(data)}`); this.setupMediaTracks(); + this.sendTextBtn.disabled = false; }, // Transcript events onUserTranscript: (data) => { diff --git a/examples/simple-chatbot/client/javascript/src/style.css b/examples/simple-chatbot/client/javascript/src/style.css index 359dfa1a9..f2a65ff88 100644 --- a/examples/simple-chatbot/client/javascript/src/style.css +++ b/examples/simple-chatbot/client/javascript/src/style.css @@ -21,6 +21,11 @@ body { margin-bottom: 20px; } +.device-bar { + flex-direction: column; + gap: 10px; +} + .controls, .device-controls { display: flex; @@ -62,6 +67,35 @@ body { box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Add a subtle focus effect */ } +.text-input-container { + display: flex; + gap: 8px; + margin-left: 10px; + width: 100%; + flex: 1; +} + +#text-input { + flex: 1; + padding: 8px 16px; + border: 1px solid #e0e0e0; + border-radius: 4px; + min-width: 200px; +} + +#send-text-btn { + padding: 8px 16px; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + flex-shrink: 0; +} + +#send-text-btn:hover { + background-color: #0056b3; +} + #connect-btn { background-color: #4caf50; color: white;