Merge pull request #297 from micz/action_loading_indicator

Action loading indicator

CHANGELOG.md

@@ -10,6 +10,7 @@
         <li>Added the <i>{%mail_folder_path%}</i> placeholder to get the mail folder path [<a href="https://github.com/micz/ThunderAI/issues/253">#253</a>].</li>
         <li>Added the <i>{%account_email_address%}</i> placeholder to get the current account mail address [<a href="https://github.com/micz/ThunderAI/issues/272">#272</a>].</li>
         <li>Added a context menu to manually add tags and run the spam filter on selected messages. [<a href="https://github.com/micz/ThunderAI/issues/262">#262</a>].</li>
+        <li>The button icon now shows a loading indicator when ThunderAI is performing an operation [<a href="https://github.com/micz/ThunderAI/issues/295">#295</a>].</li>
         <li>Improved the handling of null or undefined placeholders [<a href="https://github.com/micz/ThunderAI/issues/288">#288</a>].</li>
         <li>Czech (cs) translation added, thanks to <a href="https://hosted.weblate.org/user/jaroush/">Jaroslav Staněk</a> and <a href="https://hosted.weblate.org/user/Fjuro/">Fjuro</a>.</li>
         <li>Simplified Chinese (zh_Hans) translation added, thanks to <a href="https://github.com/jeklau">jeklau</a>.</li>

images/icon-loading.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="shape-rendering: auto; display: block; background: transparent;" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><g><rect fill="#7ddfde" height="20" width="20" y="19" x="19">
+  <animate calcMode="discrete" begin="0s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="19" x="40">
+  <animate calcMode="discrete" begin="0.125s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="19" x="61">
+  <animate calcMode="discrete" begin="0.25s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="40" x="19">
+  <animate calcMode="discrete" begin="0.875s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="40" x="61">
+  <animate calcMode="discrete" begin="0.375s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="61" x="19">
+  <animate calcMode="discrete" begin="0.75s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="61" x="40">
+  <animate calcMode="discrete" begin="0.625s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><rect fill="#7ddfde" height="20" width="20" y="61" x="61">
+  <animate calcMode="discrete" begin="0.5s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#ffe5c9;#7ddfde;#7ddfde" attributeName="fill"></animate>
+</rect><g></g></g><!-- [ldio] generated by https://loading.io --></svg>

js/mzta-menus.js

@@ -24,6 +24,7 @@ import { taPromptUtils } from './mzta-utils-prompt.js';
 import { taLogger } from './mzta-logger.js';
 import { placeholdersUtils } from './mzta-placeholders.js';
 import { mzta_specialCommand } from './mzta-special-commands.js';
+import { taWorkingStatus } from './mzta-working-status.js';
  
 export class mzta_Menus {
 
@@ -88,6 +89,7 @@ export class mzta_Menus {
         };
     
         curr_menu_entry.act = async () => {
+            taWorkingStatus.startWorking();
             const tabs = await browser.tabs.query({ active: true, currentWindow: true });
             const msg_text = await getMailBody(tabs, placeholdersUtils.hasPlaceholder(curr_prompt.text,'mail_typed_text'));
     
@@ -156,6 +158,7 @@ export class mzta_Menus {
                         let prefs_at = await browser.storage.sync.get({add_tags_maxnum: 3, connection_type: '', add_tags_force_lang: true, default_chatgpt_lang: '', do_debug: false});
                         if((prefs_at.connection_type === '')||(prefs_at.connection_type === null)||(prefs_at.connection_type === undefined)||(prefs_at.connection_type === 'chatgpt_web')){
                             console.error("[ThunderAI | AddTags] Invalid connection type: " + prefs_at.connection_type);
+                            taWorkingStatus.stopWorking();
                             return {ok:'0'};
                         }
                         fullPrompt = taPromptUtils.finalizePrompt_add_tags(fullPrompt, prefs_at.add_tags_maxnum, prefs_at.add_tags_force_lang, prefs_at.default_chatgpt_lang);
@@ -171,11 +174,13 @@ export class mzta_Menus {
                         }catch(err){
                             console.error("[ThunderAI] Error getting tags: ", err);
                             browser.tabs.sendMessage(tabs[0].id, { command: "sendAlert", curr_tab_type: tabs[0].type, message: "Error getting tags: " + err });
+                            taWorkingStatus.stopWorking();
                             return {ok:'0'};
                         }
                         this.logger.log("tags_current_email: " + tags_current_email);
                         this.logger.log("tags_full_list: " + JSON.stringify(tags_full_list));
                         browser.tabs.sendMessage(tabs[0].id, {command: "getTags", tags: tags_current_email, messageId: curr_message.id});
+                        taWorkingStatus.stopWorking();
                         return {ok:'1'};
                         break;  // Add tags to the email - END
                     }
@@ -184,6 +189,7 @@ export class mzta_Menus {
                         let prefs_at = await browser.storage.sync.get({connection_type: ''});
                         if((prefs_at.connection_type === '')||(prefs_at.connection_type === null)||(prefs_at.connection_type === undefined)||(prefs_at.connection_type === 'chatgpt_web')){
                             console.error("[ThunderAI | GetCalendarEvent] Invalid connection type: " + prefs_at.connection_type);
+                            taWorkingStatus.stopWorking();
                             return {ok:'0'};
                         }
                         /* We expect to receive from the AI a JSON object like this:
@@ -203,30 +209,37 @@ export class mzta_Menus {
                         }catch(err){
                             console.error("[ThunderAI] Error getting calendar event data: ", JSON.stringify(err));
                             browser.tabs.sendMessage(tabs[0].id, { command: "sendAlert", curr_tab_type: tabs[0].type, message: browser.i18n.getMessage("calendar_getting_data_error") + ": " + JSON.stringify(err) });
+                            taWorkingStatus.stopWorking();
                             return {ok:'0'};
                         }
                         this.logger.log("calendar_event_data: " + calendar_event_data);
                         try{
                             let result_openCalendarEventDialog = await browser.runtime.sendMessage('thunderai-sparks@micz.it',{action: "openCalendarEventDialog", calendar_event_data: calendar_event_data})
                             if(result_openCalendarEventDialog == 'ok'){
+                                taWorkingStatus.stopWorking();
                                 return {ok:'1'};
                             } else {
                                 browser.tabs.sendMessage(tabs[0].id, { command: "sendAlert", curr_tab_type: tabs[0].type, message: browser.i18n.getMessage("calendar_opening_dialog_error") + ": " + result_openCalendarEventDialog.error });
+                                taWorkingStatus.stopWorking();
                                 return {ok:'0'};
                             }
                         }catch(err){
                             console.error("[ThunderAI] Error opening calendar event dialog: ", JSON.stringify(err));
                             browser.tabs.sendMessage(tabs[0].id, { command: "sendAlert", curr_tab_type: tabs[0].type, message: browser.i18n.getMessage("calendar_opening_dialog_error") + ": " + browser.i18n.getMessage("sparks_not_installed") });
+                            taWorkingStatus.stopWorking();
                             return {ok:'0'};
                         }
                         break;  // Get a calendar event info - END
                     }
                     default:
                         console.error("[ThunderAI] Unknown special prompt id: " + curr_prompt.id);
+                        taWorkingStatus.stopWorking();
+                        return {ok:'0'};
                         break;
                 }
             }else{  // Classic prompts for the API webchat
                 this.openChatGPT(fullPrompt, curr_prompt.action, tabs[0].id, curr_prompt.name, curr_prompt.need_custom_text);
+                taWorkingStatus.stopWorking();
                 return {ok:'1'};
             }
         };

js/mzta-working-status.js

@@ -0,0 +1,41 @@
+/*
+ *  ThunderAI [https://micz.it/thunderbird-addon-thunderai/]
+ *  Copyright (C) 2024 - 2025  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+export const taWorkingStatus = {
+
+    WorkingLevel: 0,
+    taLog: console,
+
+    startWorking(){
+        this.WorkingLevel++;
+        this.taLog.log("[startWorking] WorkingLevel: " + this.WorkingLevel);
+        browser.messageDisplayAction.setIcon({path: "/images/icon-loading.svg"});
+        browser.composeAction.setIcon({path: "/images/icon-loading.svg"});
+    },
+
+    stopWorking(){
+        this.WorkingLevel--;
+        this.taLog.log("[stopWorking] WorkingLevel: " + this.WorkingLevel);
+        if(this.WorkingLevel<=0){
+            this.WorkingLevel = 0;
+            browser.messageDisplayAction.setIcon({path: "/images/icon-32px.png"});
+            browser.composeAction.setIcon({path: "/images/icon-32px.png"});
+        }
+    }
+};

mzta-background.js

@@ -25,6 +25,7 @@ import { taPromptUtils } from './js/mzta-utils-prompt.js';
 import { mzta_specialCommand } from './js/mzta-special-commands.js';
 import { getSpamFilterPrompt } from './js/mzta-prompts.js';
 import { taSpamReport } from './js/mzta-spamreport.js';
+import { taWorkingStatus } from './js/mzta-working-status.js';
 
 browser.runtime.onInstalled.addListener(({ reason, previousVersion }) => {
     // console.log(">>>>>>>>>>> onInstalled: " + JSON.stringify(reason) + ", previousVersion: " + previousVersion);
@@ -47,6 +48,7 @@ let prefs_init = {};
 await reload_pref_init();
 
 let taLog = new taLogger("mzta-background",prefs_init.do_debug);
+taWorkingStatus.taLog = taLog;
 
 let special_prompts_ids = getActiveSpecialPromptsIDs(prefs_init.add_tags, await doGetCalendarEvent(prefs_init.get_calendar_event), (prefs_init.connection_type === "chatgpt_web"));
 
@@ -744,6 +746,7 @@ const newEmailListener = (folder, messagesList) => {
 }
 
 async function processEmails(messages, addTagsAuto, spamFilter) {
+    taWorkingStatus.startWorking();
     for await (let message of messages) {
         let curr_fullMessage = null;
         let msg_text = null;
@@ -824,6 +827,7 @@ async function processEmails(messages, addTagsAuto, spamFilter) {
             taSpamReport.saveReportData(report_data, message.headerMessageId);
         }
     }
+    taWorkingStatus.stopWorking();
 }
 
 

options/mzta-release-notes.html

@@ -13,6 +13,7 @@
         <li>Added the <i>{%mail_folder_path%}</i> placeholder to get the mail folder path [<a href="https://github.com/micz/ThunderAI/issues/253">#253</a>].</li>
         <li>Added the <i>{%account_email_address%}</i> placeholder to get the current account mail address [<a href="https://github.com/micz/ThunderAI/issues/272">#272</a>].</li>
         <li>Added a context menu to manually add tags and run the spam filter on selected messages. [<a href="https://github.com/micz/ThunderAI/issues/262">#262</a>].</li>
+        <li>The button icon now shows a loading indicator when ThunderAI is performing an operation [<a href="https://github.com/micz/ThunderAI/issues/295">#295</a>].</li>
         <li>Improved the handling of null or undefined placeholders [<a href="https://github.com/micz/ThunderAI/issues/288">#288</a>].</li>
         <li>Czech (cs) translation added, thanks to <a href="https://hosted.weblate.org/user/jaroush/">Jaroslav Staněk</a> and <a href="https://hosted.weblate.org/user/Fjuro/">Fjuro</a>.</li>
         <li>Simplified Chinese (zh_Hans) translation added, thanks to <a href="https://github.com/jeklau">jeklau</a>.</li>