From dc0d4339fbb89e9c903a939a74fdab724071c800 Mon Sep 17 00:00:00 2001 From: Mic Date: Wed, 16 Apr 2025 00:11:00 +0200 Subject: [PATCH] improved the additional text form when using an API connection. fixes #97 --- api_webchat/controller.js | 27 +++++++---- api_webchat/messageInput.js | 96 +++++++++++++++++++++++++++++++++---- mzta-background.js | 3 ++ 3 files changed, 108 insertions(+), 18 deletions(-) diff --git a/api_webchat/controller.js b/api_webchat/controller.js index ec23e569..1ba470cd 100644 --- a/api_webchat/controller.js +++ b/api_webchat/controller.js @@ -145,28 +145,37 @@ worker.onmessage = function(event) { browser.runtime.onMessage.addListener((message, sender, sendResponse) => { switch (message.command) { case "api_send": + promptData = message; //send the received prompt to the llm api if(message.do_custom_text=="1") { - let userInput = prompt(browser.i18n.getMessage("chatgpt_win_custom_text")); + messageInput._showCustomTextField(); + }else{ + sendPrompt(message); + } + break; + case 'api_send_custom_text': + let userInput = message.custom_text; if(userInput !== null) { - if(!placeholdersUtils.hasPlaceholder(message.prompt, 'additional_text')){ + if(!placeholdersUtils.hasPlaceholder(promptData.prompt, 'additional_text')){ // no additional_text placeholder, do as usual - message.prompt += " " + userInput; + promptData.prompt += " " + userInput; }else{ // we have the additional_text placeholder, do the magic! let finalSubs = {}; finalSubs["additional_text"] = userInput; - message.prompt = placeholdersUtils.replacePlaceholders(message.prompt, finalSubs, ph_def_val==='1') + promptData.prompt = placeholdersUtils.replacePlaceholders(promptData.prompt, finalSubs, ph_def_val==='1') } + sendPrompt(promptData); } - } - promptData = message; - messageInput._setMessageInputValue(message.prompt); - messageInput._handleNewChatMessage(); break; case "api_error": messagesArea.appendBotMessage(message.error,'error'); messageInput.enableInput(); break; } -}); \ No newline at end of file +}); + +function sendPrompt(message){ + messageInput._setMessageInputValue(message.prompt); + messageInput._handleNewChatMessage(); +} \ No newline at end of file diff --git a/api_webchat/messageInput.js b/api_webchat/messageInput.js index 15925640..5d726f09 100644 --- a/api_webchat/messageInput.js +++ b/api_webchat/messageInput.js @@ -23,7 +23,7 @@ const messageInputTemplate = document.createElement('template'); const messagesInputStyle = document.createElement('style'); -messagesInputStyle .textContent = ` +messagesInputStyle.textContent = ` :host { display: flex; justify-content: space-between; @@ -66,16 +66,49 @@ messagesInputStyle .textContent = ` padding: 5px; background: #F2F2F2; } + #mzta-custom_text{ + padding:10px; + width:auto; + max-width:80%; + height:auto; + max-height:80%; + border-radius:5px; + overflow:auto; + position:fixed; + top:50%; + left:50%; + display:none; + transform:translate(-50%,-50%); + text-align:center; + background:#333; + color:white; + border:3px solid white; + } + #mzta-custom_loading{ + height:50px;display:none; + } + #mzta-custom_textarea{ + color:black; + padding:1px; + font-size:15px; + width:100%; + } + #mzta-custom_info{ + text-align:center; + width:100%; + padding-bottom:10px; + font-size:15px; + } @media (prefers-color-scheme: dark) { - #messageInputField { - background-color: #303030; - color: #ffffff; + #messageInputField { + background-color: #303030; + color: #ffffff; + } + #statusLogger{ + background: #212121; + color: #ffffff; + } } - #statusLogger{ - background: #212121; - color: #ffffff; - } -} `; messageInputTemplate.content.appendChild(messagesInputStyle); @@ -135,6 +168,27 @@ statusLogger.textContent = ''; statusLogger.style.display = 'none'; messageInputTemplate.content.appendChild(statusLogger); +//div per custom text +const customDiv = document.createElement('div'); +customDiv.id = 'mzta-custom_text'; +const customInfo = document.createElement('div'); +customInfo.id = 'mzta-custom_info'; +customInfo.textContent = browser.i18n.getMessage("chatgpt_win_custom_text"); +customDiv.appendChild(customInfo); +const customTextArea = document.createElement('textarea'); +customTextArea.id = 'mzta-custom_textarea'; +customDiv.appendChild(customTextArea); +const customLoading = document.createElement('img'); +customLoading.src = browser.runtime.getURL("/images/loading.gif"); +customLoading.id = "mzta-custom_loading"; +customDiv.appendChild(customLoading); +const customBtn = document.createElement('button'); +customBtn.id = 'mzta-custom_btn'; +customBtn.textContent = browser.i18n.getMessage("chatgpt_win_send"); +customBtn.classList.add('mzta-btn'); +customDiv.appendChild(customBtn); +messageInputTemplate.content.appendChild(customDiv); + class MessageInput extends HTMLElement { model = ''; @@ -152,6 +206,13 @@ class MessageInput extends HTMLElement { this._messageInputField.addEventListener('keydown', this._handleKeyDown.bind(this)); this._sendButton.addEventListener('click', this._handleClick.bind(this)); this._stopButton.addEventListener('click', this._handleStopClick.bind(this)); + + this._customText = shadowRoot.querySelector('#mzta-custom_text'); + this._customTextArea = shadowRoot.querySelector('#mzta-custom_textarea'); + this._customLoading = shadowRoot.querySelector('#mzta-custom_loading'); + this._customBtn = shadowRoot.querySelector('#mzta-custom_btn'); + 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}) }); } connectedCallback() { @@ -243,6 +304,23 @@ class MessageInput extends HTMLElement { _setMessageInputValue(msg) { this._messageInputField.value = msg; } + + _showCustomTextField(){ + this._customText.style.display = 'block'; + this._customTextArea.focus(); + } + + async _customTextBtnClick(args) { console.log('>>>>>>>>> this in _customTextBtnClick:', this); + 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'; + } } customElements.define('message-input', MessageInput); \ No newline at end of file diff --git a/mzta-background.js b/mzta-background.js index e8bc0500..1b17e355 100644 --- a/mzta-background.js +++ b/mzta-background.js @@ -281,6 +281,9 @@ messenger.runtime.onMessage.addListener((message, sender, sendResponse) => { case 'assign_tags': return _assign_tags(message); break; + case 'api_send_custom_text': + browser.tabs.sendMessage(message.tabId, { command: "api_send_custom_text", custom_text: message.custom_text }); + break; default: break; }