Merge pull request #301 from micz/diff_viewer

Diff viewer

_locales/en/messages.json

@@ -131,6 +131,10 @@
     "message": "Enabled",
     "description": ""
   },
+  "customPrompts_form_label_use_diff_viewer": {
+    "message": "Enable the diff viewer",
+    "description": ""
+  },
   "customPrompts_form_required_fields": {
     "message": "Required fields",
     "description": ""

api_webchat/index.html

@@ -17,6 +17,7 @@
     <!-- Include the JavaScript files at bottom to avoid blocking UI -->
     <script src="messageInput.js" type="module" defer></script>
     <script src="markdown-it.min.js"></script>
+    <script src="../js/lib/diff.js"></script>
     <script src="messagesArea.js" type="module" defer></script>
     <script src="controller.js" type="module" defer></script>
 </body>

api_webchat/messagesArea.js

@@ -90,6 +90,17 @@ messagesAreaStyle.textContent = `
         color: navy;
         margin-bottom: var(--margin);
     }
+    /* diff viewer */
+    .added {
+        background-color: #d4fcdc;
+        display: inline;
+    }
+
+    .removed {
+        background-color: #fddddd;
+        display: inline;
+        text-decoration: line-through;
+    }
 `;
 messagesAreaTemplate.content.appendChild(messagesAreaStyle);
 
@@ -207,27 +218,6 @@ class MessagesArea extends HTMLElement {
     }
 
     addActionButtons(promptData = null) {
-        // ============================== TESTING
-        // promptData = {
-        //     action: "1",
-        //     tabId: 1,
-        //     mailMessageId: 1
-        // }
-        // let browser = {
-        //     i18n: {
-        //         getMessage: async function(key) {
-        //             return key;
-        //         }
-        //     },
-        //     storage: {
-        //         sync: {
-        //             get: async function(key) {
-        //                 return 'apitest';
-        //             }
-        //         }
-        //     }
-        // }
-        // ============================== TESTING - END
         if(promptData == null) { return; }
         const actionButtons = document.createElement('div');
         actionButtons.classList.add('action-buttons');
@@ -257,6 +247,18 @@ class MessagesArea extends HTMLElement {
             browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id});    // close window
         });
         if(promptData.action != 0) { actionButtons.appendChild(actionButton); }
+
+        // diff viewer button
+        if(promptData.prompt_info?.use_diff_viewer == "1") {
+            const diffvButton = document.createElement('button');
+            diffvButton.textContent = 'Show differences';
+            diffvButton.addEventListener('click', async () => {
+                let strippedText = fullTextHTMLAtAssignment.replace(/<\/?[^>]+(>|$)/g, "");
+                this.appendDiffViewer(promptData.prompt_info?.selection_text, strippedText);
+            });
+            actionButtons.appendChild(diffvButton);
+        }
+
         actionButtons.appendChild(closeButton);
         this.messages.appendChild(actionButtons);
         this.scrollToBottom();
@@ -268,6 +270,40 @@ class MessagesArea extends HTMLElement {
         this.scrollToBottom();
     }
 
+    appendDiffViewer(originalText, newText) {
+        const wordDiff = Diff.diffWords(originalText, newText);
+
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('message', 'bot');
+
+        // Iterate over each part of the diff to create the HTML output
+        wordDiff.forEach(part => {
+            const diffElement = document.createElement("span");
+        
+            // Apply a different class depending on whether the word is added, removed, or unchanged
+            if (part.added) {
+              diffElement.className = "added";
+              diffElement.textContent = part.value;
+            } else if (part.removed) {
+              diffElement.className = "removed";
+              diffElement.textContent = part.value;
+            } else {
+              diffElement.textContent = part.value;
+            }
+        
+            // Add the element to the container
+            messageElement.appendChild(diffElement);
+          });
+
+        const header = document.createElement('h2');
+        header.textContent = "Diff viewer";
+        this.messages.appendChild(header);
+        
+        this.messages.appendChild(messageElement);
+        this.addDivider();
+        this.scrollToBottom();
+    }
+
     flushAccumulatingMessage() {
         if (this.accumulatingMessageEl) {
             // Collect all tokens in a full text

js/mzta-menus.js

@@ -106,7 +106,9 @@ export class mzta_Menus {
             let selection_text = '';
             let only_typed_text = '';
             selection_text = msg_text.selection.replace(/\s+/g, ' ').trim();
+            curr_prompt.selection_text = selection_text;
             body_text = msg_text.text.replace(/\s+/g, ' ').trim();
+            curr_prompt.body_text = body_text;
             only_typed_text = msg_text.only_typed_text.replace(/\s+/g, ' ').trim();
             //open chatgpt window
             //console.log("Click menu item...");
@@ -261,7 +263,7 @@ export class mzta_Menus {
                         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);
+                this.openChatGPT(fullPrompt, curr_prompt.action, tabs[0].id, curr_prompt.name, curr_prompt.need_custom_text, curr_prompt);
                 taWorkingStatus.stopWorking();
                 return {ok:'1'};
             }

js/mzta-prompts.js

@@ -45,8 +45,12 @@
     1: Custom text needed
 
     Define response language (define_response_lang attribute):
-    0: Do not include a statement about the response language in the prompt.
+    0: Do not include a statement about the response language in the prompt
-    1: Include a statement about the response language in the prompt.
+    1: Include a statement about the response language in the prompt
+
+    Use the diff viewer (use_diff_viewer attribute):
+    0: Do not use the diff viewer
+    1: Use the diff viewer
 
     ================ USER PROPERTIES
     Enabled (enabled attribute):
@@ -72,6 +76,7 @@ const defaultPrompts = [
         need_signature: "1",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -85,6 +90,7 @@ const defaultPrompts = [
         need_signature: "1",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -98,6 +104,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "1",
         is_default: "1",
         is_special: "0",
     },
@@ -111,6 +118,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "1",
         is_default: "1",
         is_special: "0",
     },
@@ -124,6 +132,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -137,6 +146,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "1",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -150,6 +160,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "0",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -163,6 +174,7 @@ const defaultPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "0",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "0",
     },
@@ -179,6 +191,7 @@ const specialPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "0",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "1",
     },
@@ -192,6 +205,7 @@ const specialPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "0",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "1",
     },
@@ -205,6 +219,7 @@ const specialPrompts = [
         need_signature: "0",
         need_custom_text: "0",
         define_response_lang: "0",
+        use_diff_viewer: "0",
         is_default: "1",
         is_special: "1",
     },
@@ -324,6 +339,11 @@ async function getCustomPrompts() {
     if(prefs._custom_prompt === null){
         return [];
     } else {
+        prefs._custom_prompt.forEach(prompt => {
+            if (prompt.use_diff_viewer === undefined) {
+                prompt.use_diff_viewer = "0";
+            }
+        });
         return prefs._custom_prompt;
     }
 }

mzta-background.js

@@ -296,7 +296,7 @@ browser.runtime.onMessageExternal.addListener((message, sender, sendResponse) =>
     }
 });
 
-async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_custom_text = 0) {
+async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_custom_text = 0, prompt_info = {}) {
     let prefs = await browser.storage.sync.get(prefs_default);
     taLog.changeDebug(prefs.do_debug);
     prefs = checkScreenDimensions(prefs);
@@ -405,7 +405,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
                     return;
                 }
                 //console.log(">>>>>>>>>> sender: " + JSON.stringify(sender));
-                browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId2, do_custom_text: do_custom_text});
+                browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId2, do_custom_text: do_custom_text, prompt_info: prompt_info});
                 taLog.log('[OpenAI ChatGPT] Connection succeded!');
                 browser.runtime.onMessage.removeListener(listener2);
             }
@@ -455,7 +455,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
                     return;
                 }
                 //console.log(">>>>>>>>>> sender: " + JSON.stringify(sender));
-                browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId5, do_custom_text: do_custom_text});
+                browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId5, do_custom_text: do_custom_text, prompt_info: prompt_info});
                 taLog.log('[Google Gemini] Connection succeded!');
                 browser.runtime.onMessage.removeListener(listener5);
             }
@@ -511,7 +511,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
                         browser.tabs.sendMessage(createdTab3.id, { command: "api_error", error: browser.i18n.getMessage('ollama_empty_model')});
                         return;
                     }
-                    browser.tabs.sendMessage(createdTab3.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId3, do_custom_text: do_custom_text});
+                    browser.tabs.sendMessage(createdTab3.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId3, do_custom_text: do_custom_text, prompt_info: prompt_info});
                     taLog.log('[Ollama API] Connection succeded!');
                     browser.runtime.onMessage.removeListener(listener3);
                 }
@@ -563,7 +563,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
                             return;
                         }
         
-                        browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId4, do_custom_text: do_custom_text});
+                        browser.tabs.sendMessage(createdTab.id, { command: "api_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId4, do_custom_text: do_custom_text, prompt_info: prompt_info});
                         taLog.log('[OpenAI Comp API] Connection succeded!');
                         browser.runtime.onMessage.removeListener(listener4);
                     }

pages/customprompts/mzta-custom-prompts.html

@@ -57,6 +57,8 @@
                 <span class="need_custom_text_span"><input type="checkbox" id="checkboxNeedCustomTextNew" name="need_custom_text" class="need_custom_text_new" value="1" tabindex="8"> <label for="checkboxNeedCustomTextNew">__MSG_customPrompts_form_label_need_custom_text__</label></span>
                 <br>
                 <input type="checkbox" id="checkboxDefineResponseLangNew" name="define_response_lang" value="1" tabindex="8"> <label for="checkboxDefineResponseLangNew">__MSG_customPrompts_form_label_define_response_lang__</label>
+                <br>
+                <input type="checkbox" id="checkboxUseDiffViewerNew" name="use_diff_viewer" value="1" tabindex="9"> <label for="checkboxUseDiffViewerNew">__MSG_customPrompts_form_label_use_diff_viewer__</label>
             </td>
         </tr>
         <tr>

pages/customprompts/mzta-custom-prompts.js

@@ -155,6 +155,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     var checkboxNeedSignatureNew = document.getElementById('checkboxNeedSignatureNew');
     var checkboxNeedCustomTextNew = document.getElementById('checkboxNeedCustomTextNew');
     var checkboxDefineResponseLangNew = document.getElementById('checkboxDefineResponseLangNew');
+    var checkboxUseDiffViewerNew = document.getElementById('checkboxUseDiffViewerNew');
 
     const btnAddNew = document.getElementById('btnAddNew');
     btnAddNew.addEventListener('click', (e) => {
@@ -172,6 +173,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             need_signature: (checkboxNeedSignatureNew.checked) ? 1 : 0,
             need_custom_text: (checkboxNeedCustomTextNew.checked) ? 1 : 0,
             define_response_lang: (checkboxDefineResponseLangNew.checked) ? 1 : 0,
+            use_diff_viewer: (checkboxUseDiffViewerNew.checked) ? 1 : 0,
             enabled: 1,
             position_compose: positionMax_compose + 1,
             position_display: positionMax_display + 1,
@@ -318,6 +320,7 @@ function showItemRowEditor(tr) {
     tr.querySelector('input.need_signature').disabled = false;
     tr.querySelector('input.need_custom_text').disabled = false;
     tr.querySelector('input.define_response_lang').disabled = false;
+    tr.querySelector('input.use_diff_viewer').disabled = false;
 }
 
 function hideItemRowEditor(tr) {
@@ -335,6 +338,7 @@ function hideItemRowEditor(tr) {
     tr.querySelector('input.need_signature').disabled = true;
     tr.querySelector('input.need_custom_text').disabled = true;
     tr.querySelector('input.define_response_lang').disabled = true;
+    tr.querySelector('input.use_diff_viewer').disabled = true;
 }
 
 // Confirm and log deletion action
@@ -413,7 +417,7 @@ function handleInputChange(e) {
 function loadPromptsList(values){
     // console.log('>>>>>>>> loadPromptsList values: ' + JSON.stringify(values));
     let options = {
-        valueNames: [ { data: ['idnum'] }, 'is_default', 'id', 'name', 'text', 'type', 'action', 'position_compose', 'position_display', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'define_response_lang', attr: 'checked_val'}, { name: 'enabled', attr: 'checked_val'} ],
+        valueNames: [ { data: ['idnum'] }, 'is_default', 'id', 'name', 'text', 'type', 'action', 'position_compose', 'position_display', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'define_response_lang', attr: 'checked_val'}, { name: 'use_diff_viewer', attr: 'checked_val'}, { name: 'enabled', attr: 'checked_val'} ],
         item: function(values) {
             let type_output = '';
             switch(String(values.type)){
@@ -471,6 +475,8 @@ function loadPromptsList(values){
                     <br>
                     <input type="checkbox" class="define_response_lang" disabled> __MSG_customPrompts_form_label_define_response_lang__
                     <br>
+                    <input type="checkbox" class="use_diff_viewer" disabled> __MSG_customPrompts_form_label_use_diff_viewer__
+                    <br>
                     <input type="checkbox" class="enabled input_mod"> __MSG_customPrompts_form_label_enabled__
                     <span class="is_default hiddendata"></span>
                     <span class="position_compose hiddendata"></span>
@@ -609,6 +615,7 @@ function checkSelectedBoxes(checkboxes = null) {
             ...document.querySelectorAll('.need_signature[type="checkbox"]'),
             ...document.querySelectorAll('.need_custom_text[type="checkbox"]'),
             ...document.querySelectorAll('.define_response_lang[type="checkbox"]'),
+            ...document.querySelectorAll('.use_diff_viewer[type="checkbox"]'),
             ...document.querySelectorAll('.enabled[type="checkbox"]'),
         ];
     }