jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #301 from micz/diff_viewer

Browse source 
Diff viewer
This commit is contained in:
Mic 2025-03-22 16:57:17 +01:00 committed by GitHub
commit e32773ba8f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 2173 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_locales/en/messages.json
View file

@ -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": ""

1
api_webchat/index.html
View file

@ -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>

78
api_webchat/messagesArea.js
View file

@ -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

2071
js/lib/diff.js Normal file
View file

File diff suppressed because it is too large Load diff

4
js/mzta-menus.js
View file

@ -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'};
}

24
js/mzta-prompts.js
View file

@ -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.
1: 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
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;
}
}

10
mzta-background.js
View file

@ -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);
}

2
pages/customprompts/mzta-custom-prompts.html
View file

@ -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>

9
pages/customprompts/mzta-custom-prompts.js
View file

@ -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"]'),
];
}