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;