agentgui 1.0.483 → 1.0.485

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.483",
+  "version": "1.0.485",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/static/index.html

@@ -1199,13 +1199,21 @@
       overflow-y: auto;
       white-space: pre-wrap;
       word-break: break-word;
+      font-family: inherit;
+      border: 1px solid var(--color-border);
+      resize: none;
     }
 
-    .voice-transcript:empty::before {
-      content: attr(data-placeholder);
+    .voice-transcript::placeholder {
       color: var(--color-text-secondary);
     }
 
+    .voice-transcript:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      background: var(--color-bg-primary);
+    }
+
     .voice-mic-btn {
       display: flex;
       align-items: center;
@@ -3169,10 +3177,10 @@
         </div>
         <div class="voice-input-section">
           <div class="voice-input-wrapper">
-            <select class="agent-selector voice-agent-selector" data-voice-agent-selector title="Select agent"></select>
-            <select class="agent-selector voice-cli-selector" data-voice-cli-selector title="Select CLI tool"></select>
+            <select class="agent-selector voice-agent-selector" data-voice-agent-selector title="Select agent"></select>
+            <select class="agent-selector voice-cli-selector" data-voice-cli-selector title="Select CLI tool"></select>
             <select class="agent-selector voice-model-selector" data-voice-model-selector title="Select model"></select>
-            <div class="voice-transcript" id="voiceTranscript" data-placeholder="Tap mic and speak..."></div>
+            <textarea class="voice-transcript" id="voiceTranscript" placeholder="Type or tap mic and speak..." spellcheck="true"></textarea>
             <button class="voice-mic-btn" id="voiceMicBtn" title="Toggle recording" aria-label="Voice input">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>

package/static/js/voice.js

@@ -260,6 +260,15 @@
     if (sendBtn) {
       sendBtn.addEventListener('click', sendVoiceMessage);
     }
+    var transcript = document.getElementById('voiceTranscript');
+    if (transcript) {
+      transcript.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.key === 'Enter' || e.metaKey && e.key === 'Enter') {
+          e.preventDefault();
+          sendVoiceMessage();
+        }
+      });
+    }
   }
 
   function resampleBuffer(inputBuffer, fromRate, toRate) {
@@ -310,8 +319,12 @@
     if (isRecording) return;
     var el = document.getElementById('voiceTranscript');
     if (el) {
-      el.textContent = '';
-      el.setAttribute('data-final', '');
+      if (el.value !== undefined) {
+        el.value = '';
+      } else {
+        el.textContent = '';
+        el.setAttribute('data-final', '');
+      }
     }
     try {
       mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -357,7 +370,13 @@
     }
     recordedChunks = [];
     var resampled = resampleBuffer(merged, sourceSampleRate, TARGET_SAMPLE_RATE);
-    if (el) el.textContent = 'Transcribing...';
+    if (el) {
+      if (el.value !== undefined) {
+        el.value = 'Transcribing...';
+      } else {
+        el.textContent = 'Transcribing...';
+      }
+    }
     try {
       var wavBuffer = encodeWav(resampled, TARGET_SAMPLE_RATE);
       var resp = await fetch(BASE + '/api/stt', {
@@ -368,27 +387,53 @@
       var data = await resp.json();
       if (data.text) {
         if (el) {
-          el.textContent = data.text;
-          el.setAttribute('data-final', data.text);
+          if (el.value !== undefined) {
+            el.value = data.text;
+          } else {
+            el.textContent = data.text;
+            el.setAttribute('data-final', data.text);
+          }
         }
       } else if (data.error) {
-        if (el) el.textContent = 'Error: ' + data.error;
+        if (el) {
+          if (el.value !== undefined) {
+            el.value = 'Error: ' + data.error;
+          } else {
+            el.textContent = 'Error: ' + data.error;
+          }
+        }
       } else {
-        if (el) el.textContent = '';
+        if (el) {
+          if (el.value !== undefined) {
+            el.value = '';
+          } else {
+            el.textContent = '';
+          }
+        }
       }
     } catch (e) {
-      if (el) el.textContent = 'Transcription failed: ' + e.message;
+      if (el) {
+        if (el.value !== undefined) {
+          el.value = 'Transcription failed: ' + e.message;
+        } else {
+          el.textContent = 'Transcription failed: ' + e.message;
+        }
+      }
     }
   }
 
   function sendVoiceMessage() {
     var el = document.getElementById('voiceTranscript');
     if (!el) return;
-    var text = el.textContent.trim();
+    var text = (el.value || el.textContent || '').trim();
     if (!text || text.startsWith('Transcribing') || text.startsWith('Error')) return;
     addVoiceBlock(text, true);
-    el.textContent = '';
-    el.setAttribute('data-final', '');
+    if (el.value !== undefined) {
+      el.value = '';
+    } else {
+      el.textContent = '';
+      el.setAttribute('data-final', '');
+    }
     if (typeof agentGUIClient !== 'undefined' && agentGUIClient) {
       var input = agentGUIClient.ui.messageInput;
       if (input) {
@@ -655,7 +700,7 @@
     var emptyMsg = container.querySelector('.voice-empty');
     if (emptyMsg) emptyMsg.remove();
     var lastChild = container.lastElementChild;
-    if (!isUser && !_voiceBreakNext && lastChild && lastChild.classList.contains('voice-block') && !lastChild.classList.contains('voice-block-user')) {
+    if (!isUser && !_voiceBreakNext && !isLoadingHistory && lastChild && lastChild.classList.contains('voice-block') && !lastChild.classList.contains('voice-block-user')) {
       var contentSpan = lastChild.querySelector('.voice-block-content');
       if (contentSpan) {
         contentSpan.textContent += '\n' + stripHtml(text);
@@ -769,6 +814,13 @@
         if (data.seq !== undefined) renderedSeqs.add(data.seq);
         handleVoiceBlock(data.block, true, data.blockRole);
       }
+      if (data.type === 'message_created' && data.message) {
+        if (data.conversationId && data.conversationId !== currentConversationId) return;
+        var message = data.message;
+        if (message.role === 'user' && message.content) {
+          handleVoiceBlock({ type: 'text', text: message.content }, true, 'user');
+        }
+      }
       if (data.type === 'streaming_start') {
         if (data.conversationId && data.conversationId !== currentConversationId) return;
         spokenChunks = new Set();
@@ -830,8 +882,8 @@
     if (window.wsClient) {
       window.wsClient.rpc('conv.chunks', { id: conversationId })
         .then(function(data) {
-          isLoadingHistory = false;
           if (!data.ok || !Array.isArray(data.chunks) || data.chunks.length === 0) {
+            isLoadingHistory = false;
             showVoiceEmpty(container);
             return;
           }
@@ -850,6 +902,7 @@
             }
           });
           if (!hasContent) showVoiceEmpty(container);
+          isLoadingHistory = false;
         })
         .catch(function() {
           isLoadingHistory = false;