Add text chat UI

Author: vipyne

client/index.html

@@ -82,6 +82,15 @@
       </div>
     </div>
 
+    <!-- TODO: add logic in app.ts for whether or not to display this -->
+    <!-- <div class="main-content" style="display: none;"> -->
+    <div class="main-content">
+      <div id="input-area">
+        <input type="text" id="message-input" placeholder="Type your message to the bot here...">
+        <button id="send-btn">Send</button>
+      </div>
+    </div>
+
     <!-- Hidden elements for compatibility -->
     <div style="display: none;">
       <button id="disconnect-btn">Disconnect</button>

client/src/app.ts

@@ -37,6 +37,8 @@ class WebRTCApp {
   private selfViewVideo!: HTMLVideoElement;
   private videoContainer!: HTMLElement;
   private botName!: HTMLElement;
+  private sendBtn!: HTMLElement;
+  private msgInput!: HTMLInputElement;
 
   // State
   private connected: boolean = false;
@@ -228,6 +230,10 @@ class WebRTCApp {
       "bot-video-container"
     ) as HTMLElement;
     this.botName = document.getElementById("bot-name") as HTMLElement;
+    this.sendBtn = document.getElementById("send-btn") as HTMLElement;
+    this.msgInput = document.getElementById(
+      "message-input"
+    ) as HTMLInputElement;
   }
 
   private setupDOMEventListeners(): void {
@@ -306,8 +312,50 @@ class WebRTCApp {
         this.cameraChevronBtn.classList.remove("active");
       }
     });
+
+    // Text chat handlers
+    this.sendBtn.addEventListener('click', () => this.handleTextSubmit());
+    const _this = this;
+    this.msgInput.addEventListener(
+      'keydown',
+      function (event: KeyboardEvent<HTMLTextAreaElement>) {
+        if (event.key === 'Enter') {
+          _this.handleTextSubmit();
+        }
+      }
+    );
+
   }
 
+  async handleTextSubmit() {
+    const text = this.msgInput.value;
+    const message = text.trim();
+
+    try {
+      await this.rtviClient?.action({
+        service: "llm",
+        action: "append_to_messages",
+        arguments: [
+          {
+            name: "messages",
+            value: [
+              {
+                role: "user",
+                content: message,
+              },
+            ],
+          },
+        ],
+      });
+      this.log(`User: ${message}`);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this.msgInput.value = ""
+    }
+  };
+
+
   private togglePopover(popover: HTMLElement, chevronBtn: HTMLElement): void {
     popover.classList.toggle("show");
     chevronBtn.classList.toggle("active");

client/src/style.css

@@ -381,6 +381,20 @@ audio {
   display: none; /* Hide audio but keep it functional */
 }
 
+#input-area {
+    display: flex;
+    width: 100%;
+}
+
+#message-input {
+    flex-grow: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-right: 10px;
+    width: 100%;
+}
+
 /* Media queries */
 @media (max-width: 768px) {
   .container {