corretly handling input state

api_webchat/controller.js

@@ -51,14 +51,14 @@ worker.onmessage = function(event) {
     const { type, payload } = event.data;
     switch (type) {
         case 'messageSent':
-            //messageInput.handleMessageSent();
+            messageInput.handleMessageSent();
             break;
         case 'newToken':
             messagesArea.handleNewToken(payload.token);
             break;
         case 'tokensDone':
             messagesArea.handleTokensDone(promptData);
-            messageInput.handleMessageSent();
+            messageInput.enableInput();
             break;
         case 'error':
             messagesArea.appendBotMessage(payload);

api_webchat/messageInput.js

@@ -109,7 +109,12 @@ class MessageInput extends HTMLElement {
     }
 
     handleMessageSent() {
-        console.log("handleMessageSent");
+        console.log("[ThunderAI] handleMessageSent");
+        this._messageInputField.value = '';
+    }
+
+    enableInput() {
+        console.log("[ThunderAI] enableInput");
         this._messageInputField.value = '';
         this._sendButton.removeAttribute('disabled');
         this._messageInputField.removeAttribute('disabled');
@@ -130,6 +135,7 @@ class MessageInput extends HTMLElement {
         this._sendButton.setAttribute('disabled', 'disabled');
         this._messageInputField.setAttribute('disabled', 'disabled');
         let messageContent = this._messageInputField.value;
+        this._messageInputField.value = '';
         if (this.messagesAreaComponent) {
             this.messagesAreaComponent.appendUserMessage(messageContent);
         }

api_webchat/messagesArea.js

@@ -49,6 +49,7 @@ messagesAreaStyle.textContent = `
     }
     .action-buttons {
         line-height: 1.3;
+        text-align: center;
     }
     @keyframes fadeIn {
         to {
@@ -60,6 +61,9 @@ messagesAreaStyle.textContent = `
         font-size: 1rem;
         margin-top: 20px;
     }
+    hr {
+        width: 100%;
+    }
 `;
 messagesAreaTemplate.content.appendChild(messagesAreaStyle);
 
@@ -103,6 +107,7 @@ class MessagesArea extends HTMLElement {
     handleTokensDone(promptData = null) {
         this.flushAccumulatingMessage();
         this.addActionButtons(promptData);
+        this.addDivider();
     }
 
     appendUserMessage(messageText, source="You") {
@@ -146,7 +151,8 @@ class MessagesArea extends HTMLElement {
         const actionButtons = document.createElement('div');
         actionButtons.classList.add('action-buttons');
         const actionButton = document.createElement('button');
-        actionButton.textContent = 'Send';
+        actionButton.textContent = 'Use this answer';
+        //actionButton.textContent = browser.i18n.getMessage("chatgpt_win_get_answer");
         actionButton.addEventListener('click', () => {
             alert('action: ' + promptData.action);
         });
@@ -155,6 +161,12 @@ class MessagesArea extends HTMLElement {
         this.scrollToBottom();
     }
 
+    addDivider() {
+        const divider = document.createElement('hr');
+        this.messages.appendChild(divider);
+        this.scrollToBottom();
+    }
+
     flushAccumulatingMessage() {
         if (this.accumulatingMessageEl) {
             // Collect all tokens in a full text