TTS all chat functionality

oristarium · Dec 16, 2024 · c737b9c · c737b9c
1 parent c39ed8a
commit c737b9c
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 1 deletion.
diff --git a/assets/control.html b/assets/control.html
@@ -49,6 +49,13 @@
             <option value="ko">Korean</option>
             <option value="ja">Japanese</option>
           </select>
+          <div class="toggle-wrapper">
+            <label for="tts-all-chat" class="toggle-label">
+              <input type="checkbox" id="tts-all-chat" class="toggle-input">
+              <span class="toggle-display"></span>
+              TTS All Chat
+            </label>
+          </div>
         </div>
         <button id="open-avatar-settings" class="btn btn-secondary">
           Avatar Settings

diff --git a/assets/css/control.css b/assets/css/control.css
@@ -567,4 +567,50 @@ button:not(:disabled):hover {
     display: flex;
     gap: 10px;
     margin: 10px 0;
+}
+
+/* Add toggle switch styles */
+.toggle-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.toggle-label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 8px;
+}
+
+.toggle-input {
+    display: none;
+}
+
+.toggle-display {
+    width: 40px;
+    height: 20px;
+    background: #ccc;
+    border-radius: 20px;
+    position: relative;
+    transition: background 0.3s;
+}
+
+.toggle-display:before {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s;
+}
+
+.toggle-input:checked + .toggle-display {
+    background: var(--color-success);
+}
+
+.toggle-input:checked + .toggle-display:before {
+    transform: translateX(20px);
 }
diff --git a/assets/js/modules/ChatManager.js b/assets/js/modules/ChatManager.js
@@ -1,12 +1,17 @@
+import { MessageHandler } from './MessageHandler.js';
+
 export class ChatManager {
     constructor() {
         this.container = document.getElementById('chat-container');
         this.scrollButton = document.getElementById('scroll-button');
         this.isUserScrolling = false;
         this.scrollTimeout = null;
+        this.messageHandler = new MessageHandler();
+        this.ttsAllChat = false;
 
         this.setupScrollHandlers();
         this.setupMessageHandler();
+        this.setupTTSToggle();
     }
 
     setupScrollHandlers() {
@@ -18,10 +23,20 @@ export class ChatManager {
 
     setupMessageHandler() {
         window.addEventListener('chatMessage', (event) => {
-            this.appendMessage(event.detail);
+            this.handleChatMessage(event.detail);
         });
     }
 
+    setupTTSToggle() {
+        const ttsToggle = document.getElementById('tts-all-chat');
+        if (ttsToggle) {
+            ttsToggle.addEventListener('change', (e) => {
+                this.ttsAllChat = e.target.checked;
+                console.log('TTS All Chat:', this.ttsAllChat ? 'enabled' : 'disabled');
+            });
+        }
+    }
+
     handleScroll() {
         if (!this.isNearBottom()) {
             this.isUserScrolling = true;
@@ -137,4 +152,24 @@ export class ChatManager {
             </div>
         `;
     }
+
+    canMessageBeTTSed(message) {
+        const content = message.data.content;
+        return content && content.sanitized && content.sanitized.trim() !== '';
+    }
+
+    async handleChatMessage(message) {
+        try {
+            // Use the same helper method for TTS All Chat
+            if (this.ttsAllChat && this.canMessageBeTTSed(message)) {
+                console.log('TTS All Chat enabled, sending to TTS:', message);
+                await this.messageHandler.sendToTTS(message);
+            }
+
+            // Just append to UI, don't broadcast to display
+            this.appendMessage(message);
+        } catch (error) {
+            console.error('Error handling chat message:', error);
+        }
+    }
 }