From 68084a67189dc4cbdbe7dd60c60ed858df9ee92f Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Fri, 10 Apr 2026 23:50:49 +0200
Subject: [PATCH] api webchat messages have now different colors. See #3

---
 _locales/en/messages.json   |  4 ++
 api_webchat/controller.js   |  4 +-
 api_webchat/messageInput.js | 74 +++++++++++++++++++++++++++++++++++--
 3 files changed, 76 insertions(+), 6 deletions(-)

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) {