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

Add diff viewer functionality for APIs integrations. see #109

Browse source
This commit is contained in:
Mic 2025-03-21 00:22:00 +01:00
parent 645d04a3e5
commit 928946dfdf
4 changed files with 66 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
api_webchat/index.html
View file

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

78
api_webchat/messagesArea.js
View file

@ -90,6 +90,17 @@ messagesAreaStyle.textContent = `
color: navy; color: navy;
margin-bottom: var(--margin); 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); messagesAreaTemplate.content.appendChild(messagesAreaStyle);
@ -207,27 +218,6 @@ class MessagesArea extends HTMLElement {
} }
addActionButtons(promptData = null) { 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; } if(promptData == null) { return; }
const actionButtons = document.createElement('div'); const actionButtons = document.createElement('div');
actionButtons.classList.add('action-buttons'); 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 browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id}); // close window
}); });
if(promptData.action != 0) { actionButtons.appendChild(actionButton); } 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); actionButtons.appendChild(closeButton);
this.messages.appendChild(actionButtons); this.messages.appendChild(actionButtons);
this.scrollToBottom(); this.scrollToBottom();
@ -268,6 +270,40 @@ class MessagesArea extends HTMLElement {
this.scrollToBottom(); 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() { flushAccumulatingMessage() {
if (this.accumulatingMessageEl) { if (this.accumulatingMessageEl) {
// Collect all tokens in a full text // Collect all tokens in a full text

4
js/mzta-menus.js
View file

@ -106,7 +106,9 @@ export class mzta_Menus {
let selection_text = ''; let selection_text = '';
let only_typed_text = ''; let only_typed_text = '';
selection_text = msg_text.selection.replace(/\s+/g, ' ').trim(); selection_text = msg_text.selection.replace(/\s+/g, ' ').trim();
curr_prompt.selection_text = selection_text;
body_text = msg_text.text.replace(/\s+/g, ' ').trim(); 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(); only_typed_text = msg_text.only_typed_text.replace(/\s+/g, ' ').trim();
//open chatgpt window //open chatgpt window
//console.log("Click menu item..."); //console.log("Click menu item...");
@ -260,7 +262,7 @@ export class mzta_Menus {
break; break;
} }
}else{ // Classic prompts for the API webchat }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(); taWorkingStatus.stopWorking();
return {ok:'1'}; return {ok:'1'};
} }

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); let prefs = await browser.storage.sync.get(prefs_default);
taLog.changeDebug(prefs.do_debug); taLog.changeDebug(prefs.do_debug);
prefs = checkScreenDimensions(prefs); prefs = checkScreenDimensions(prefs);
@ -405,7 +405,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
return; return;
} }
//console.log(">>>>>>>>>> sender: " + JSON.stringify(sender)); //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!'); taLog.log('[OpenAI ChatGPT] Connection succeded!');
browser.runtime.onMessage.removeListener(listener2); browser.runtime.onMessage.removeListener(listener2);
} }
@ -455,7 +455,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
return; return;
} }
//console.log(">>>>>>>>>> sender: " + JSON.stringify(sender)); //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!'); taLog.log('[Google Gemini] Connection succeded!');
browser.runtime.onMessage.removeListener(listener5); 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')}); browser.tabs.sendMessage(createdTab3.id, { command: "api_error", error: browser.i18n.getMessage('ollama_empty_model')});
return; 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!'); taLog.log('[Ollama API] Connection succeded!');
browser.runtime.onMessage.removeListener(listener3); browser.runtime.onMessage.removeListener(listener3);
} }
@ -563,7 +563,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_
return; 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!'); taLog.log('[OpenAI Comp API] Connection succeded!');
browser.runtime.onMessage.removeListener(listener4); browser.runtime.onMessage.removeListener(listener4);
} }