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

improved the additional text form when using an API connection. fixes #97

Browse source
This commit is contained in:
Mic 2025-04-16 00:11:00 +02:00
parent cff81159b6
commit dc0d4339fb
3 changed files with 108 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
api_webchat/controller.js
View file

@ -145,28 +145,37 @@ worker.onmessage = function(event) {
browser.runtime.onMessage.addListener((message, sender, sendResponse) => { browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
switch (message.command) { switch (message.command) {
case "api_send": case "api_send":
promptData = message;
//send the received prompt to the llm api //send the received prompt to the llm api
if(message.do_custom_text=="1") { 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(userInput !== null) {
if(!placeholdersUtils.hasPlaceholder(message.prompt, 'additional_text')){ if(!placeholdersUtils.hasPlaceholder(promptData.prompt, 'additional_text')){
// no additional_text placeholder, do as usual // no additional_text placeholder, do as usual
message.prompt += " " + userInput; promptData.prompt += " " + userInput;
}else{ }else{
// we have the additional_text placeholder, do the magic! // we have the additional_text placeholder, do the magic!
let finalSubs = {}; let finalSubs = {};
finalSubs["additional_text"] = userInput; 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; break;
case "api_error": case "api_error":
messagesArea.appendBotMessage(message.error,'error'); messagesArea.appendBotMessage(message.error,'error');
messageInput.enableInput(); messageInput.enableInput();
break; break;
} }
}); });
function sendPrompt(message){
messageInput._setMessageInputValue(message.prompt);
messageInput._handleNewChatMessage();
}

96
api_webchat/messageInput.js
View file

@ -23,7 +23,7 @@
const messageInputTemplate = document.createElement('template'); const messageInputTemplate = document.createElement('template');
const messagesInputStyle = document.createElement('style'); const messagesInputStyle = document.createElement('style');
messagesInputStyle .textContent = ` messagesInputStyle.textContent = `
:host { :host {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -66,16 +66,49 @@ messagesInputStyle .textContent = `
padding: 5px; padding: 5px;
background: #F2F2F2; 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) { @media (prefers-color-scheme: dark) {
#messageInputField { #messageInputField {
background-color: #303030; background-color: #303030;
color: #ffffff; color: #ffffff;
}
#statusLogger{
background: #212121;
color: #ffffff;
}
} }
#statusLogger{
background: #212121;
color: #ffffff;
}
}
`; `;
messageInputTemplate.content.appendChild(messagesInputStyle); messageInputTemplate.content.appendChild(messagesInputStyle);
@ -135,6 +168,27 @@ statusLogger.textContent = '';
statusLogger.style.display = 'none'; statusLogger.style.display = 'none';
messageInputTemplate.content.appendChild(statusLogger); 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 { class MessageInput extends HTMLElement {
model = ''; model = '';
@ -152,6 +206,13 @@ class MessageInput extends HTMLElement {
this._messageInputField.addEventListener('keydown', this._handleKeyDown.bind(this)); this._messageInputField.addEventListener('keydown', this._handleKeyDown.bind(this));
this._sendButton.addEventListener('click', this._handleClick.bind(this)); this._sendButton.addEventListener('click', this._handleClick.bind(this));
this._stopButton.addEventListener('click', this._handleStopClick.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() { connectedCallback() {
@ -243,6 +304,23 @@ class MessageInput extends HTMLElement {
_setMessageInputValue(msg) { _setMessageInputValue(msg) {
this._messageInputField.value = 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); customElements.define('message-input', MessageInput);

3
mzta-background.js
View file

@ -281,6 +281,9 @@ messenger.runtime.onMessage.addListener((message, sender, sendResponse) => {
case 'assign_tags': case 'assign_tags':
return _assign_tags(message); return _assign_tags(message);
break; break;
case 'api_send_custom_text':
browser.tabs.sendMessage(message.tabId, { command: "api_send_custom_text", custom_text: message.custom_text });
break;
default: default:
break; break;
} }