From ba4024ddbf2ee1b04f786341cefb6a4e481331c8 Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Fri, 21 Mar 2025 18:34:30 +0100
Subject: [PATCH 1/5] chatgtpweb: Include diff library in content scripts for
 enhanced functionality. see #109

---
 manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manifest.json b/manifest.json
index fa3ce5cf..a13a85be 100644
--- a/manifest.json
+++ b/manifest.json
@@ -59,7 +59,7 @@
     "content_scripts": [
         {
             "matches": ["https://*.chatgpt.com/*"],
-            "js": ["js/tb115_segmenter/tb115_loader.js"],
+            "js": ["js/tb115_segmenter/tb115_loader.js","js/lib/diff.js"],
             "all_frames": true,
             "run_at": "document_start"
         }

From 7c606bcb71a3f8d0f3b6c2221da14bd17878cccb Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Sat, 22 Mar 2025 17:17:17 +0100
Subject: [PATCH 2/5] Update diff viewer to use body text as fallback for
 original text. see #109

---
 api_webchat/messagesArea.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/api_webchat/messagesArea.js b/api_webchat/messagesArea.js
index c4888060..cae92c4e 100644
--- a/api_webchat/messagesArea.js
+++ b/api_webchat/messagesArea.js
@@ -254,7 +254,11 @@ class MessagesArea extends HTMLElement {
             diffvButton.textContent = 'Show differences';
             diffvButton.addEventListener('click', async () => {
                 let strippedText = fullTextHTMLAtAssignment.replace(/<\/?[^>]+(>|$)/g, "");
-                this.appendDiffViewer(promptData.prompt_info?.selection_text, strippedText);
+                let originalText = promptData.prompt_info?.selection_text;
+                if((originalText == null) || (originalText == "")) {
+                    originalText = promptData.prompt_info?.body_text;
+                }
+                this.appendDiffViewer(originalText, strippedText);
             });
             actionButtons.appendChild(diffvButton);
         }

From bebbfdd74cb6e75f8af838b32ef2c5fd17997301 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Sat, 22 Mar 2025 17:42:23 +0100
Subject: [PATCH 3/5] Add dark mode styles for added and removed message
 highlights. see #109

---
 api_webchat/messagesArea.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/api_webchat/messagesArea.js b/api_webchat/messagesArea.js
index cae92c4e..bfc02123 100644
--- a/api_webchat/messagesArea.js
+++ b/api_webchat/messagesArea.js
@@ -45,7 +45,6 @@ messagesAreaStyle.textContent = `
         line-height: 1.3;
         padding: 5px;
         border-radius: 10px;
-
     }
     .message p{
         margin: 0;
@@ -95,12 +94,19 @@ messagesAreaStyle.textContent = `
         background-color: #d4fcdc;
         display: inline;
     }
-
     .removed {
         background-color: #fddddd;
         display: inline;
         text-decoration: line-through;
     }
+    @media (prefers-color-scheme: dark) {
+        .added {
+            background-color:rgb(0, 94, 0);
+        }
+        .removed {
+            background-color:rgb(90, 0, 0);
+        }
+    }
 `;
 messagesAreaTemplate.content.appendChild(messagesAreaStyle);
 

From 23adcbf48fab00197e0c1059159b95eb7325689f Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Sat, 22 Mar 2025 17:58:13 +0100
Subject: [PATCH 4/5] Add diff viewer functionality and related UI elements.
 work in progress. see #109

---
 _locales/en/messages.json |  4 +++
 js/mzta-chatgpt.js        | 70 +++++++++++++++++++++++++++++++++++++--
 mzta-background.js        |  7 ++++
 3 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b654ddf6..c380ce14 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1214,5 +1214,9 @@
   "noActiveCalendar": {
     "message": "No active calendar found!",
     "description": ""
+  },
+  "btn_show_differences": {
+    "message": "Show differences",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/js/mzta-chatgpt.js b/js/mzta-chatgpt.js
index 182ae6f4..d3abe0d8 100644
--- a/js/mzta-chatgpt.js
+++ b/js/mzta-chatgpt.js
@@ -20,7 +20,7 @@
 // Some original methods derived from https://github.com/KudoAI/chatgpt.js/blob/7eb8463cd61143fa9e1d5a8ec3c14d3c1b286e54/chatgpt.js
 // Using a full string to inject it in the ChatGPT page to avoid any security error
 
-export const mzta_script = `
+//export const mzta_script = `
 let force_go = false;
 let do_force_completion = false;
 let current_message = null;
@@ -99,7 +99,7 @@ function chatpgt_scrollToBottom () {
 function addCustomDiv(prompt_action,tabId,mailMessageId) {
     // Create <style> element for the CSS
     var style = document.createElement('style');
-    style.textContent = ".mzta-header-fixed {position: fixed;bottom: 0;left: 0;height:100px;width: 100%;background-color: #333;color: white;text-align: center;padding: 10px 0;z-index: 1000;border-top: 3px solid white;}"
+    style.textContent = ".mzta-header-fixed {position:fixed;bottom:0;left: 0;height:100px;width:100%;background-color: #333;color: white;text-align: center;padding: 10px 0;z-index: 1000;border-top: 3px solid white;}"
     style.textContent += "body {padding-bottom: 100px !important;} [id^='headlessui-dialog-panel-:r']{padding-bottom: 100px !important;} [data-testid='screen-thread']{padding-bottom: 100px !important;} [slot='content']{padding-bottom: 100px !important;}";
     style.textContent += ".mzta-btn {background-color: #007bff;border: none;color: white;padding: 8px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;border-radius: 5px;}";
     style.textContent += ".mzta-btn:hover {background-color:#0056b3;color:white;}";
@@ -116,6 +116,9 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
     style.textContent += "#mzta-custom_textarea{color:black;padding:1px;font-size:15px;width:100%;}";
     style.textContent += "#mzta-custom_info{text-align:center;width:100%;padding-bottom:10px;font-size:15px;}";
     style.textContent += "#mzta-prompt-name{font-size:13px;font-style:italic;color:#919191;position:fixed;bottom:75px;;left:0;padding-left:5px;}";
+    style.textContent += "#mzta-diff{overflow-y:scroll;text-align:justify;padding:10px;border:2px solid white;border-radius:1em;position:fixed;top:50%;left:50%;width:80%;height:30em;transform:translate(-50%,-50%);z-index:9999;background-color: #333;color: white;}";
+    style.textContent += "#mzta-diff span.added{background-color: rgb(0, 94, 0);display:inline;} #mzta-diff span.removed{background-color: rgb(90, 0, 0);display:inline;text-decoration:line-through;}";
+    style.textContent += "#mzta-btn_close_diff{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);}";
 
     // Add <style> to the page's <head>
     document.head.appendChild(style);
@@ -170,11 +173,13 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
     curr_msg.style.display = 'block';
     fixedDiv.appendChild(curr_msg);
 
+    // loading gif
     var loading = document.createElement('img');
     loading.src = browser.runtime.getURL("/images/loading.gif");
     loading.id = "mzta-loading";
     fixedDiv.appendChild(loading);
 
+    // OK button
     var btn_ok = document.createElement('button');
     btn_ok.id="mzta-btn_ok";
     btn_ok.classList.add('mzta-btn');
@@ -210,6 +215,55 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
     btn_ok.style.display = 'none';
     fixedDiv.appendChild(btn_ok);
 
+    if(mztaUseDiffViewer == '1'){
+        // diff div
+        var diffDiv = document.createElement('div');
+        diffDiv.id = 'mzta-diff';
+        diffDiv.style.display = 'none';
+        // diff div close button
+        var btn_close_diff = document.createElement('button');
+        btn_close_diff.id = 'mzta-btn_close_diff';
+        btn_close_diff.classList.add('mzta-btn');
+        btn_close_diff.textContent = browser.i18n.getMessage('chatgpt_win_close');
+        btn_close_diff.onclick = function() {
+            document.getElementById('mzta-diff').style.display = 'none';
+        };
+        diffDiv.appendChild(btn_close_diff);
+        fixedDiv.appendChild(diffDiv);
+
+        // diff viewer button
+        var btn_diff = document.createElement('button');
+        btn_diff.id='mzta-btn_diff';
+        btn_diff.classList.add('mzta-btn');
+        btn_diff.textContent = browser.i18n.getMessage('btn_show_differences');
+        btn_diff.style.display = 'none';
+        btn_diff.disabled = true;
+        btn_diff.onclick = async function() {
+            diffDiv.innerHTML = '';
+            const response = getSelectedHtml();
+            const wordDiff = Diff.diffWords(mztaOriginalText, response.replace(/<\\/?[^>]+(>|$)/g, ''));
+            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
+                diffDiv.appendChild(diffElement);
+                diffDiv.style.display = 'block';
+              });
+        };
+        fixedDiv.appendChild(btn_diff);
+    }
+
     //div per custom text
     let customDiv = document.createElement('div');
     customDiv.id = 'mzta-custom_text';
@@ -291,6 +345,9 @@ function operation_done(){
     }
     curr_msg.style.display = 'block';
     document.getElementById('mzta-btn_ok').style.display = 'inline';
+    if(mztaUseDiffViewer == '1'){
+        document.getElementById('mzta-btn_diff').style.display = 'inline';
+    }
     document.getElementById('mzta-loading').style.display = 'none';
     document.getElementById('mzta-force-completion').style.display = 'none';
     chatpgt_scrollToBottom();
@@ -459,12 +516,21 @@ document.addEventListener("selectionchange", function() {
      // Set a timeout to delay the execution of the callback
      selectionChangeTimeout = setTimeout(function() {
         let btn_ok = document.getElementById('mzta-btn_ok');
+        let btn_diff = document.getElementById('mzta-btn_diff');
         if (isSomethingSelected()) {
             btn_ok.disabled = false;
             btn_ok.classList.remove('btn_disabled');
+            if(mztaUseDiffViewer == '1'){
+                btn_diff.disabled = false;
+                btn_diff.classList.remove('btn_disabled');
+            }
         } else {
             btn_ok.disabled = true;
             btn_ok.classList.add('btn_disabled');
+            if(mztaUseDiffViewer == '1'){
+                btn_diff.disabled = true;
+                btn_diff.classList.add('btn_disabled');
+            }
         }
      }, 300); // Delay in milliseconds
 });
diff --git a/mzta-background.js b/mzta-background.js
index 835b3de7..21b1b384 100644
--- a/mzta-background.js
+++ b/mzta-background.js
@@ -348,6 +348,11 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
 
                 taLog.log("prefs.chatgpt_web_model: " + prefs.chatgpt_web_model);
                 taLog.log("_gpt_model: " + _gpt_model);
+
+                let originalText = prompt_info.selection_text;
+                if((originalText == null) || (originalText == "")) {
+                    originalText = prompt_info.body_text;
+                }
         
                 let pre_script = `let mztaWinId = `+ createdTab.windowId +`;
                 let mztaStatusPageDesc="`+ browser.i18n.getMessage("prefs_status_page") +`";
@@ -358,6 +363,8 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
                 let mztaPhDefVal="`+(prefs.placeholders_use_default_value?'1':'0')+`";
                 let mztaGPTModel="`+ _gpt_model +`";
                 let mztaDoDebug="`+(prefs.do_debug?'1':'0')+`";
+                let mztaUseDiffViewer="`+(prompt_info.use_diff_viewer?'1':'0')+`";
+                let mztaOriginalText="`+ originalText +`";
                 `;
 
                 taLog.log("Waiting 1 sec");

From ce545952925539606505f553dcefe1c8b1faec00 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Sat, 22 Mar 2025 22:08:51 +0100
Subject: [PATCH 5/5] diff viwer vompleted for chatgpt web interface. see #109

---
 _locales/en/messages.json |  4 ++++
 js/mzta-chatgpt.js        | 34 +++++++++++++++++++++++++---------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c380ce14..32429f9d 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1218,5 +1218,9 @@
   "btn_show_differences": {
     "message": "Show differences",
     "description": ""
+  },
+  "chatgpt_win_diff_title": {
+    "message": "Differences between the original and the modified text",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/js/mzta-chatgpt.js b/js/mzta-chatgpt.js
index d3abe0d8..43379f5e 100644
--- a/js/mzta-chatgpt.js
+++ b/js/mzta-chatgpt.js
@@ -20,7 +20,7 @@
 // Some original methods derived from https://github.com/KudoAI/chatgpt.js/blob/7eb8463cd61143fa9e1d5a8ec3c14d3c1b286e54/chatgpt.js
 // Using a full string to inject it in the ChatGPT page to avoid any security error
 
-//export const mzta_script = `
+export const mzta_script = `
 let force_go = false;
 let do_force_completion = false;
 let current_message = null;
@@ -116,7 +116,10 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
     style.textContent += "#mzta-custom_textarea{color:black;padding:1px;font-size:15px;width:100%;}";
     style.textContent += "#mzta-custom_info{text-align:center;width:100%;padding-bottom:10px;font-size:15px;}";
     style.textContent += "#mzta-prompt-name{font-size:13px;font-style:italic;color:#919191;position:fixed;bottom:75px;;left:0;padding-left:5px;}";
-    style.textContent += "#mzta-diff{overflow-y:scroll;text-align:justify;padding:10px;border:2px solid white;border-radius:1em;position:fixed;top:50%;left:50%;width:80%;height:30em;transform:translate(-50%,-50%);z-index:9999;background-color: #333;color: white;}";
+    style.textContent += "#mzta-diff-overlay{position: fixed;top:0;left:0;width:100vw;height:100vh;background: rgba(0, 0, 0, 0.5);display:flex;justify-content:center;align-items:center;z-index:999;}";
+    style.textContent += "#mzta-diff{padding:10px;border:2px solid white;border-radius:1em;position:fixed;top:50%;left:50%;width:80%;height:30em;transform:translate(-50%,-50%);z-index:9999;background-color: #333;color: white;}";
+    style.textContent += "#mzta-diff_title{font-size:16px;font-weight:bold;text-align:center;padding-bottom:10px;}";
+    style.textContent += "#mzta-diff_content{overflow-y:scroll;text-align:justify;width:100%;height:22.5em;}";
     style.textContent += "#mzta-diff span.added{background-color: rgb(0, 94, 0);display:inline;} #mzta-diff span.removed{background-color: rgb(90, 0, 0);display:inline;text-decoration:line-through;}";
     style.textContent += "#mzta-btn_close_diff{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);}";
 
@@ -216,20 +219,33 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
     fixedDiv.appendChild(btn_ok);
 
     if(mztaUseDiffViewer == '1'){
+        // diff overlay div
+        var diffOverlay = document.createElement('div');
+        diffOverlay.id = 'mzta-diff-overlay';
+        diffOverlay.style.display = 'none';
         // diff div
         var diffDiv = document.createElement('div');
         diffDiv.id = 'mzta-diff';
-        diffDiv.style.display = 'none';
+        // diff div title
+        var diffTitle = document.createElement('div');
+        diffTitle.id = 'mzta-diff_title';
+        diffTitle.textContent = browser.i18n.getMessage('chatgpt_win_diff_title');
+        diffDiv.appendChild(diffTitle);
+        // diff div content
+        var diffContent = document.createElement('div');
+        diffContent.id = 'mzta-diff_content';
+        diffDiv.appendChild(diffContent);
         // diff div close button
         var btn_close_diff = document.createElement('button');
         btn_close_diff.id = 'mzta-btn_close_diff';
         btn_close_diff.classList.add('mzta-btn');
         btn_close_diff.textContent = browser.i18n.getMessage('chatgpt_win_close');
         btn_close_diff.onclick = function() {
-            document.getElementById('mzta-diff').style.display = 'none';
+            document.getElementById('mzta-diff-overlay').style.display = 'none';
         };
         diffDiv.appendChild(btn_close_diff);
-        fixedDiv.appendChild(diffDiv);
+        diffOverlay.appendChild(diffDiv);
+        fixedDiv.appendChild(diffOverlay);
 
         // diff viewer button
         var btn_diff = document.createElement('button');
@@ -239,7 +255,7 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
         btn_diff.style.display = 'none';
         btn_diff.disabled = true;
         btn_diff.onclick = async function() {
-            diffDiv.innerHTML = '';
+            diffContent.innerHTML = '';
             const response = getSelectedHtml();
             const wordDiff = Diff.diffWords(mztaOriginalText, response.replace(/<\\/?[^>]+(>|$)/g, ''));
             wordDiff.forEach(part => {
@@ -257,8 +273,8 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
                 }
             
                 // Add the element to the container
-                diffDiv.appendChild(diffElement);
-                diffDiv.style.display = 'block';
+                diffContent.appendChild(diffElement);
+                diffOverlay.style.display = 'block';
               });
         };
         fixedDiv.appendChild(btn_diff);
@@ -300,7 +316,7 @@ function customTextBtnClick(args) {
     args.customDiv.style.display = 'none';
 }
 
-function checkGPTModel(model) { //TODO
+function checkGPTModel(model) {
     if(model == '') return;
     doLog("checkGPTModel model: " + model);
   return new Promise((resolve, reject) => {