diff --git a/api_webchat/controller.js b/api_webchat/controller.js index 842240ec..cd800665 100644 --- a/api_webchat/controller.js +++ b/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); diff --git a/api_webchat/messageInput.js b/api_webchat/messageInput.js index db1063fd..0fd35134 100644 --- a/api_webchat/messageInput.js +++ b/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); } diff --git a/api_webchat/messagesArea.js b/api_webchat/messagesArea.js index 393d5b6e..0eecf1b8 100644 --- a/api_webchat/messagesArea.js +++ b/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