diff --git a/api_webchat/controller.js b/api_webchat/controller.js index 8b722a25..c6f349c9 100644 --- a/api_webchat/controller.js +++ b/api_webchat/controller.js @@ -256,13 +256,13 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => { promptData = message; //send the received prompt to the llm api if(message.do_custom_text=="1") { - messageInput._showCustomTextField(); + messageInput._showCustomTextField(message.prompt_info?.custom_text_array); }else{ sendPrompt(message); } break; case 'api_send_custom_text': - let userInput = message.custom_text; + let userInput = message.custom_text; // From version 4.0.0 this is an array if(userInput !== null) { if(!placeholdersUtils.hasPlaceholder(promptData.prompt, 'additional_text')){ // no additional_text placeholder, do as usual @@ -270,7 +270,14 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => { }else{ // we have the additional_text placeholder, do the magic! let finalSubs = {}; - finalSubs["additional_text"] = userInput; + + if (Array.isArray(userInput)) { + userInput.forEach(obj => { + finalSubs[obj.placeholder.replace(/^{%|%}$/g, '').trim()] = obj.custom_text; + }); + } else { + finalSubs["additional_text"] = userInput; + } promptData.prompt = placeholdersUtils.replacePlaceholders({ text: promptData.prompt, replacements: finalSubs, diff --git a/api_webchat/messageInput.js b/api_webchat/messageInput.js index b5b2a6b0..2907174f 100644 --- a/api_webchat/messageInput.js +++ b/api_webchat/messageInput.js @@ -69,12 +69,14 @@ messagesInputStyle.textContent = ` } #mzta-custom_text{ padding:10px; - width:auto; + width:50%; + min-width:300px; max-width:80%; height:auto; max-height:80%; border-radius:5px; - overflow:auto; + overflow-y:auto; + overflow-x:hidden; position:fixed; top:50%; left:50%; @@ -84,15 +86,18 @@ messagesInputStyle.textContent = ` background:#333; color:white; border:3px solid white; + box-sizing: border-box; } #mzta-custom_loading{ height:50px;display:none; } #mzta-custom_textarea{ color:black; - padding:1px; + padding:5px; font-size:15px; width:100%; + box-sizing: border-box; + resize: vertical; } #mzta-custom_info{ text-align:center; @@ -100,6 +105,19 @@ messagesInputStyle.textContent = ` padding-bottom:10px; font-size:15px; } + #mzta-custom_info span{ + font-size:0.8em; + } + #mzta-custom_step{ + position: absolute; + bottom: 5px; + right: 10px; + font-size: 12px; + color: #ccc; + } + #mzta-custom_btn{ + margin-top:7px; + } @media (prefers-color-scheme: dark) { #messageInputField { background-color: #303030; @@ -178,6 +196,7 @@ customInfo.textContent = browser.i18n.getMessage("chatgpt_win_custom_text"); customDiv.appendChild(customInfo); const customTextArea = document.createElement('textarea'); customTextArea.id = 'mzta-custom_textarea'; +customTextArea.rows = 5; customDiv.appendChild(customTextArea); const customLoading = document.createElement('img'); customLoading.src = browser.runtime.getURL("/images/loading.gif"); @@ -188,11 +207,16 @@ customBtn.id = 'mzta-custom_btn'; customBtn.textContent = browser.i18n.getMessage("chatgpt_win_send"); customBtn.classList.add('mzta-btn'); customDiv.appendChild(customBtn); +const customStep = document.createElement('div'); +customStep.id = 'mzta-custom_step'; +customDiv.appendChild(customStep); messageInputTemplate.content.appendChild(customDiv); class MessageInput extends HTMLElement { model = ''; + _customTextArray = []; + _currentCustomTextIndex = 0; constructor() { super(); @@ -212,8 +236,14 @@ class MessageInput extends HTMLElement { this._customTextArea = shadowRoot.querySelector('#mzta-custom_textarea'); this._customLoading = shadowRoot.querySelector('#mzta-custom_loading'); this._customBtn = shadowRoot.querySelector('#mzta-custom_btn'); + this._customStep = shadowRoot.querySelector('#mzta-custom_step'); this._customBtn.addEventListener("click", () => { this._customTextBtnClick({customBtn:this._customBtn,customLoading:this._customLoading,customDiv:this._customText}) }); - this._customTextArea.addEventListener("keydown", (event) => { if(event.code == "Enter" && event.ctrlKey) this._customTextBtnClick({customBtn:this._customBtn,customLoading:this._customLoading,customDiv:this._customText}) }); + this._customTextArea.addEventListener("keydown", (event) => { + if (event.key === "Enter" && !event.shiftKey) { + event.preventDefault(); + this._customTextBtnClick({customBtn:this._customBtn,customLoading:this._customLoading,customDiv:this._customText}); + } + }); } connectedCallback() { @@ -306,21 +336,64 @@ class MessageInput extends HTMLElement { this._messageInputField.value = msg; } - _showCustomTextField(){ + _showCustomTextField(custom_text_array){ + this._customTextArray = custom_text_array || []; + if (this._customTextArray.length === 0) { + this._customTextArray.push({ placeholder: "{%additional_text%}", info: "" }); + } + this._currentCustomTextIndex = 0; this._customText.style.display = 'block'; + this._renderCustomTextStep(); + } + + _renderCustomTextStep() { + const currentItem = this._customTextArray[this._currentCustomTextIndex]; + const infoDiv = this.shadowRoot.querySelector('#mzta-custom_info'); + + this._customTextArea.value = ""; + infoDiv.textContent = browser.i18n.getMessage("chatgpt_win_custom_text"); + + if (currentItem.info && currentItem.info.trim() !== "") { + infoDiv.appendChild(document.createElement("br")); + const infoSpan = document.createElement("span"); + infoSpan.textContent = "[" + browser.i18n.getMessage("customPrompts_form_label_ID") + ": " + currentItem.info + "]"; + infoDiv.appendChild(infoSpan); + } + + if(this._customTextArray.length > 1) { + this._customStep.textContent = (this._currentCustomTextIndex + 1) + "/" + this._customTextArray.length; + this._customStep.style.display = 'block'; + } else { + this._customStep.style.display = 'none'; + } + this._customTextArea.focus(); } async _customTextBtnClick(args) { const customText = this._customTextArea.value; - // console.log(">>>>>>>>>>>>>>>> customText: " + customText); - args.customBtn.disabled = true; - args.customBtn.classList.add('disabled'); - args.customLoading.style.display = 'inline-block'; - args.customLoading.style.display = 'none'; - let tab = await browser.tabs.query({ active: true, currentWindow: true }); - browser.runtime.sendMessage({ command: "api_send_custom_text", custom_text: customText, tabId: tab[0].id }); - args.customDiv.style.display = 'none'; + + if (this._customTextArray[this._currentCustomTextIndex]) { + this._customTextArray[this._currentCustomTextIndex].custom_text = customText; + } + + this._currentCustomTextIndex++; + + if (this._currentCustomTextIndex < this._customTextArray.length) { + this._renderCustomTextStep(); + } else { + args.customBtn.disabled = true; + args.customBtn.classList.add('disabled'); + args.customLoading.style.display = 'inline-block'; + + let tab = await browser.tabs.query({ active: true, currentWindow: true }); + browser.runtime.sendMessage({ command: "api_send_custom_text", custom_text: this._customTextArray, tabId: tab[0].id }); + args.customDiv.style.display = 'none'; + + args.customBtn.disabled = false; + args.customBtn.classList.remove('disabled'); + args.customLoading.style.display = 'none'; + } } } diff --git a/js/mzta-chatgpt.js b/js/mzta-chatgpt.js index e64d5eb8..0a354d35 100644 --- a/js/mzta-chatgpt.js +++ b/js/mzta-chatgpt.js @@ -30,6 +30,8 @@ let current_mailMessageId = null; let selectionChangeTimeout = null; let isDragging = false; let delay_wait_completion = 7000; // milliseconds +let _customTextArray = []; +let _currentCustomTextIndex = 0; let lastSelectedHtml = ""; async function chatgpt_sendMsg(msg, method ='') { // return -1 send button not found, -2 textarea not found @@ -126,6 +128,8 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) { style.textContent += "#mzta-custom_loading{height:50px;display:none;}"; 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-custom_info span{font-size:0.8em;}"; + style.textContent += "#mzta-custom_step{position: absolute;bottom: 5px;right: 10px;font-size: 12px;color: #ccc;}"; 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-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;}"; @@ -378,6 +382,7 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) { customDiv.appendChild(customInfo); let customTextArea = document.createElement('textarea'); customTextArea.id = 'mzta-custom_textarea'; + customTextArea.rows = 5; customDiv.appendChild(customTextArea); let customLoading = document.createElement('img'); customLoading.src = browser.runtime.getURL("/images/loading.gif"); @@ -390,6 +395,9 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) { customBtn.addEventListener("click", () => { customTextBtnClick({customBtn:customBtn,customLoading:customLoading,customDiv:customDiv}) }); customTextArea.addEventListener("keydown", (event) => { if(event.code == "Enter" && event.ctrlKey) customTextBtnClick({customBtn:customBtn,customLoading:customLoading,customDiv:customDiv}) }); customDiv.appendChild(customBtn); + let customStep = document.createElement('div'); + customStep.id = 'mzta-custom_step'; + customDiv.appendChild(customStep); fixedDiv.appendChild(customDiv); // light background hint with diagonal thick arrow @@ -466,14 +474,54 @@ function createReplyToAllIcon() { return svg; } +function renderCustomTextStep() { + const currentItem = _customTextArray[_currentCustomTextIndex]; + const infoDiv = document.getElementById('mzta-custom_info'); + const customTextArea = document.getElementById('mzta-custom_textarea'); + const customStep = document.getElementById('mzta-custom_step'); + + customTextArea.value = ""; + infoDiv.textContent = browser.i18n.getMessage("chatgpt_win_custom_text"); + + if (currentItem.info && currentItem.info.trim() !== "") { + infoDiv.appendChild(document.createElement("br")); + const infoSpan = document.createElement("span"); + infoSpan.textContent = "[" + browser.i18n.getMessage("customPrompts_form_label_ID") + ": " + currentItem.info + "]"; + infoDiv.appendChild(infoSpan); + } + + if(_customTextArray.length > 1) { + customStep.textContent = (_currentCustomTextIndex + 1) + "/" + _customTextArray.length; + customStep.style.display = 'block'; + } else { + customStep.style.display = 'none'; + } + + customTextArea.focus(); +} + function customTextBtnClick(args) { const customText = document.getElementById('mzta-custom_textarea').value; - args.customBtn.disabled = true; - args.customBtn.classList.add('disabled'); - args.customLoading.style.display = 'inline-block'; - args.customLoading.style.display = 'none'; - doProceed(current_message,customText); - args.customDiv.style.display = 'none'; + + if (_customTextArray[_currentCustomTextIndex]) { + _customTextArray[_currentCustomTextIndex].custom_text = customText; + } + + _currentCustomTextIndex++; + + if (_currentCustomTextIndex < _customTextArray.length) { + renderCustomTextStep(); + } else { + args.customBtn.disabled = true; + args.customBtn.classList.add('disabled'); + args.customLoading.style.display = 'inline-block'; + args.customLoading.style.display = 'none'; + doProceed(current_message, _customTextArray); + args.customDiv.style.display = 'none'; + + args.customBtn.disabled = false; + args.customBtn.classList.remove('disabled'); + } } function checkGPTModel(model) { @@ -547,8 +595,14 @@ function checkLoggedIn(){ } function showCustomTextField(){ + let rawArray = current_message.prompt_info?.custom_text_array; + _customTextArray = Array.isArray(rawArray) ? rawArray : []; + if (_customTextArray.length === 0) { + _customTextArray.push({ placeholder: "{%additional_text%}", info: "" }); + } + _currentCustomTextIndex = 0; document.getElementById('mzta-custom_text').style.display = 'block'; - document.getElementById('mzta-custom_textarea').focus(); + renderCustomTextStep(); } async function doProceed(message, customText = ''){ @@ -558,16 +612,21 @@ async function doProceed(message, customText = ''){ await checkGPTModel(_gpt_model); } let final_prompt = message.prompt; -// console.log(">>>>>>>>>>>> doProceed customText: " + customText); -// console.log(">>>>>>>>>>>> doProceed final_prompt: " + final_prompt); -// console.log(">>>>>>>>>>>> doProceed mztaPhDefVal: " + JSON.stringify(mztaPhDefVal)); - //check if there is the additional_text placeholder - if(final_prompt.includes('{%additional_text%}')){ - // console.log(">>>>>>>>>>>> found ph customText: " + customText); - final_prompt = final_prompt.replace('{%additional_text%}', customText || (mztaPhDefVal == '1'?'':'{%additional_text%}')); - }else{ - if(customText != ''){ - final_prompt += ' '+customText; + + if (Array.isArray(customText)) { + customText.forEach(obj => { + let escapedPH = obj.placeholder.replace(/[.*+?^{$}()|[\\]\\\\]/g, '\\\\$&'); + let regex = new RegExp(escapedPH, 'g'); + final_prompt = final_prompt.replace(regex, obj.custom_text); + }); + } else { + //check if there is the additional_text placeholder + if(final_prompt.includes('{%additional_text%}')){ + final_prompt = final_prompt.replace('{%additional_text%}', customText || (mztaPhDefVal == '1'?'':'{%additional_text%}')); + }else{ + if(customText != ''){ + final_prompt += ' '+customText; + } } } diff --git a/js/mzta-menus.js b/js/mzta-menus.js index 4d04dcaf..cecfa413 100644 --- a/js/mzta-menus.js +++ b/js/mzta-menus.js @@ -192,6 +192,13 @@ export class mzta_Menus { only_quoted_text: only_quoted_text, tags_full_list: tags_full_list }); + + curr_prompt.custom_text_array = []; + + if(placeholdersUtils.hasPlaceholder(curr_prompt.text, 'additional_text')){ + curr_prompt.custom_text_array = placeholdersUtils.getPlaceholdersAdditionalTextArray(curr_prompt.text); + } + console.log(">>>>>>>>>>>>>>>>>>> curr_prompt.custom_text_array: " + JSON.stringify(curr_prompt.custom_text_array)); switch(curr_prompt.id){ case 'prompt_translate_this': diff --git a/js/mzta-placeholders.js b/js/mzta-placeholders.js index d8b63008..b06f82d3 100644 --- a/js/mzta-placeholders.js +++ b/js/mzta-placeholders.js @@ -148,7 +148,7 @@ const defaultPlaceholders = [ default_value: "", type: 0, is_default: "1", - is_dynamic: "0", + is_dynamic: "1", enabled: 1, }, { @@ -427,7 +427,7 @@ export const placeholdersUtils = { // console.log(">>>>>>>>>> replacePlaceholders match: " + JSON.stringify(match)); // console.log(">>>>>>>>>> replacePlaceholders p1: " + JSON.stringify(p1)); // p1 contains the key inside {% %} - if (skip_additional_text && (p1 === 'additional_text')) { + if (skip_additional_text && ((p1 === 'additional_text') || (p1.startsWith('additional_text:')))) { return match; } const currPlaceholder = defaultPlaceholders.find(ph => (ph.id === p1) || (ph.is_dynamic == 1 && p1.startsWith(ph.id + ':'))); @@ -436,7 +436,7 @@ export const placeholdersUtils = { return match; } // Replace if found, otherwise keep the original or substitute with default value - return replacements[p1] || (use_default_value ? currPlaceholder.default_value : match); + return replacements[p1] || replacements[currPlaceholder.id] || (use_default_value ? currPlaceholder.default_value : match); }); }, @@ -459,7 +459,7 @@ export const placeholdersUtils = { // If a specific placeholder is provided, we search for it if (placeholder !== "") { // Dynamically build the regex for the specific placeholder - regex = new RegExp(`{%\s*${placeholder}\s*%}`); + regex = new RegExp(`{%\s*${placeholder}(:.*?)?\s*%}`); } else { // Otherwise, we search for any placeholder in the format {% ... %} regex = /{%\s*(.*?)\s*%}/; @@ -485,6 +485,19 @@ export const placeholdersUtils = { return regex.test(text); }, + getPlaceholdersAdditionalTextArray(prompt_text){ + const regex = /{%\s*additional_text(?::(.*?))?\s*%}/g; + let matches = []; + let match; + while ((match = regex.exec(prompt_text)) !== null) { + matches.push({ + placeholder: match[0], + info: match[1] ? match[1].trim() : "" + }); + } + return matches; + }, + async getPlaceholdersValues(args) { const { prompt_text = "", diff --git a/js/mzta-utils-prompt.js b/js/mzta-utils-prompt.js index c19499f8..28978662 100644 --- a/js/mzta-utils-prompt.js +++ b/js/mzta-utils-prompt.js @@ -59,6 +59,13 @@ export const taPromptUtils = { if(placeholdersUtils.hasCustomPlaceholder(curr_prompt.text)){ curr_prompt.text = await placeholdersUtils.replaceCustomPlaceholders(curr_prompt.text); } + + // Replace all {%additional_text%} with {%additional_text:N%} + let additionalTextCounter = 1; + curr_prompt.text = curr_prompt.text.replace(/{%\s*additional_text\s*%}/g, () => { + return `{%additional_text:#${additionalTextCounter++}%}`; + }); + let finalSubs = await placeholdersUtils.getPlaceholdersValues({ prompt_text: curr_prompt.text, curr_message: curr_message, diff --git a/mzta-background.js b/mzta-background.js index b0eb1f13..ea2473fd 100644 --- a/mzta-background.js +++ b/mzta-background.js @@ -515,7 +515,7 @@ async function openChatGPT(promptText, action, curr_tabId, prompt_name = '', do_ let mailMessageId = -1; if(mailMessage) mailMessageId = mailMessage.id; promptText = convertNewlinesToParagraphs(promptText); - browser.tabs.sendMessage(createdTab.id, { command: "chatgpt_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId}); + browser.tabs.sendMessage(createdTab.id, { command: "chatgpt_send", prompt: promptText, action: action, tabId: curr_tabId, mailMessageId: mailMessageId, prompt_info: prompt_info}); taLog.log('[ChatGPT Web] Connection succeded!'); taLog.log("[ThunderAI] ChatGPT Web script injected successfully"); browser.runtime.onMessage.removeListener(listener); diff --git a/pages/customprompts/mzta-custom-prompts.js b/pages/customprompts/mzta-custom-prompts.js index 55824f0d..8e45ac8c 100644 --- a/pages/customprompts/mzta-custom-prompts.js +++ b/pages/customprompts/mzta-custom-prompts.js @@ -1417,7 +1417,7 @@ async function checkPromptsConfigForPlaceholders(textarea){ // check additional_text and selected_text placeholders presence and the corrispondent checkboxes let tr_ancestor = textarea.closest('tr'); let need_custom_text_element = tr_ancestor.querySelector('.need_custom_text') || tr_ancestor.querySelector('.need_custom_text_new'); - if(String(curr_text).indexOf('{%additional_text%}') != -1){ + if(/{%\s*additional_text(?::.*?)?\s*%}/.test(String(curr_text))){ if(!need_custom_text_element.checked){ need_custom_text_element.closest('.need_custom_text_span').style.border = '2px solid red'; }else{