Add a text entry box to the simple-chatbot example

examples/simple-chatbot/client/javascript/index.html

@@ -30,6 +30,13 @@
           <select id="device-selector"></select>
           <button id="mic-toggle-btn">Unmute Mic</button>
         </div>
+        <div class="text-input-container">
+          <input
+            type="text"
+            id="text-input"
+            placeholder="Type your message..." />
+          <button id="send-text-btn" disabled>Send</button>
+        </div>
       </div>
 
       <div class="debug-panel">

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) => {

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;