diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e249045a..b102c033 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1572,6 +1572,10 @@ "message": "Receiving data", "description": "" }, + "apiwebchat_done": { + "message": "Done!", + "description": "" + }, "hyprland_warning": { "message": "If you're having trouble opening the AI chat window, try setting the height and width values to 0. This issue can occur on linux in certain environments, for example, when using Hyprland.", "description": "" diff --git a/api_webchat/controller.js b/api_webchat/controller.js index e5138da0..f9973720 100644 --- a/api_webchat/controller.js +++ b/api_webchat/controller.js @@ -244,7 +244,7 @@ worker.onmessage = async function(event) { break; case 'error': messagesArea.appendBotMessage(payload,'error'); - messageInput.enableInput(); + messageInput.enableInput(false); break; default: console.error('[ThunderAI] Unknown event type from API worker:', type); @@ -292,7 +292,7 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => { break; case "api_error": messagesArea.appendBotMessage(message.error,'error'); - messageInput.enableInput(); + messageInput.enableInput(false); break; } }); diff --git a/api_webchat/messageInput.js b/api_webchat/messageInput.js index 567339ee..c539563e 100644 --- a/api_webchat/messageInput.js +++ b/api_webchat/messageInput.js @@ -74,6 +74,26 @@ messagesInputStyle.textContent = ` display: none; vertical-align: middle; } + #statusLoggerText{ + font-weight: 600; + } + #statusLogger.status-working{ + border-color: #2196F3; + background: #E3F2FD; + color: #1565C0; + } + #statusLogger.status-done{ + border-color: #4CAF50; + background: #E8F5E9; + color: #2E7D32; + } + @keyframes statusFadeOut { + from { opacity: 1; } + to { opacity: 0; } + } + #statusLogger.status-fadeout{ + animation: statusFadeOut 0.5s ease-out forwards; + } #mzta-custom_text{ padding:10px; width:50%; @@ -134,6 +154,16 @@ messagesInputStyle.textContent = ` background: #212121; color: #ffffff; } + #statusLogger.status-working{ + border-color: #64B5F6; + background: #1A3A5C; + color: #90CAF9; + } + #statusLogger.status-done{ + border-color: #81C784; + background: #1B3D1E; + color: #A5D6A7; + } } `; messageInputTemplate.content.appendChild(messagesInputStyle); @@ -228,6 +258,7 @@ messageInputTemplate.content.appendChild(customDiv); class MessageInput extends HTMLElement { model = ''; + _doneTimeout = null; _customTextArray = []; _currentCustomTextIndex = 0; @@ -285,7 +316,7 @@ class MessageInput extends HTMLElement { this._messageInputField.value = ''; } - enableInput() { + enableInput(showDone = true) { // console.log("[ThunderAI] enableInput"); this._messageInputField.value = ''; this._messageInputField.removeAttribute('disabled'); @@ -294,21 +325,56 @@ class MessageInput extends HTMLElement { this._stopButton.setAttribute('disabled', 'disabled'); this._stopButton.style.display = 'none'; this._stopButton.title = browser.i18n.getMessage("chagpt_api_send_button") + ": " + this.model; - this.hideStatusMessage(); - this.setStatusMessage(''); + if (showDone) { + this.showDoneStatus(); + } else { + this.hideStatusMessage(); + this.setStatusMessage(''); + } } setStatusMessage(message) { this._statusLoggerText.textContent = message; } - showStatusMessage() { + showStatusMessage(state = 'working') { + if (this._doneTimeout) { + clearTimeout(this._doneTimeout); + this._doneTimeout = null; + } + this._setStatusClass('status-' + state); this._statusLogger.style.display = 'flex'; } hideStatusMessage() { this._statusLogger.style.display = 'none'; this._statusLoggerImg.style.display = 'none'; + this._setStatusClass(null); + } + + _setStatusClass(className) { + this._statusLogger.classList.remove('status-working', 'status-done', 'status-fadeout'); + if (className) { + this._statusLogger.classList.add(className); + } + } + + showDoneStatus() { + if (this._doneTimeout) { + clearTimeout(this._doneTimeout); + } + this._statusLoggerImg.style.display = 'none'; + this.setStatusMessage(browser.i18n.getMessage('apiwebchat_done')); + this._setStatusClass('status-done'); + this._statusLogger.style.display = 'flex'; + + this._doneTimeout = setTimeout(() => { + this._statusLogger.classList.add('status-fadeout'); + this._doneTimeout = setTimeout(() => { + this.hideStatusMessage(); + this.setStatusMessage(''); + }, 500); + }, 1500); } _handleKeyDown(event) {