From 121ae6c9b69eff9be7ad93e5c25ae8a4fc10356b Mon Sep 17 00:00:00 2001 From: andzejsp Date: Fri, 14 Apr 2023 21:56:56 +0300 Subject: [PATCH] dirty fix to disable speech for firefox users --- personalities/gpt4all_chatbot.yaml | 4 +- static/js/audio.js | 257 ++++++------- static/js/chat.js | 578 +++++++++++++++-------------- static/js/tabs.js | 77 ++-- 4 files changed, 464 insertions(+), 452 deletions(-) diff --git a/personalities/gpt4all_chatbot.yaml b/personalities/gpt4all_chatbot.yaml index 195461c5..b42afa06 100644 --- a/personalities/gpt4all_chatbot.yaml +++ b/personalities/gpt4all_chatbot.yaml @@ -27,10 +27,10 @@ personality_conditionning: | welcome_message: "Welcome! I am GPT4All A free and open discussion AI. What can I do for you today?" # This prefix is added at the beginning of any message input by the user -message_prefix: "\nuser: " +message_prefix: "\nuser:" # This suffix is added at the end of any message input by the user -message_suffix: "\ngpt4all: " +message_suffix: "\ngpt4all:" # Here is the list of extensions this personality requires dependencies: [] diff --git a/static/js/audio.js b/static/js/audio.js index cd17a0bf..eb19041d 100644 --- a/static/js/audio.js +++ b/static/js/audio.js @@ -1,143 +1,145 @@ -isStarted = false; -isSpeaking = false; -const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; -const recognition = new SpeechRecognition(); -const synth = window.speechSynthesis || webkitspeechSynthesis; -var voices = synth.getVoices(); -function prepre_audio(){ +// Dirty fix for disabling speech synth for firefox browsers :() +if (!userAgent.match(/firefox|fxios/i)) { + isStarted = false; + isSpeaking = false; + const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; + const recognition = new SpeechRecognition(); + const synth = window.speechSynthesis || webkitspeechSynthesis; + var voices = synth.getVoices(); + function prepre_audio() { recognition.continuous = true; recognition.interimResults = true; recognition.maxAlternatives = 10; language_select = document.getElementById("language") -} -voices = []; -function populateVoicesList() { - voices = synth.getVoices(); - voice_select = document.getElementById("voice") - voice_select.innerHTML=""; - for (let i = 0; i < voices.length; i++) { - if ( - voices[i].lang.startsWith( - language_select.value.substring(0, 2) - ) - ) { - const option = document.createElement("option"); - option.textContent = `${voices[i].name} (${voices[i].lang})`; - - if (voices[i].default) { - option.textContent += " — DEFAULT"; - } - - option.setAttribute("data-lang", voices[i].lang); - option.setAttribute("data-name", voices[i].name); - voice_select.appendChild(option); - } } - voice_select.addEventListener("change", function () { - }); -} -// Audio code -function splitString(string, maxLength) { - const sentences = string.match(/[^.!?]+[.!?]/g); - const strings = []; - let currentString = ""; + voices = []; + function populateVoicesList() { + voices = synth.getVoices(); + voice_select = document.getElementById("voice") + voice_select.innerHTML = ""; + for (let i = 0; i < voices.length; i++) { + if ( + voices[i].lang.startsWith( + language_select.value.substring(0, 2) + ) + ) { + const option = document.createElement("option"); + option.textContent = `${voices[i].name} (${voices[i].lang})`; - if (sentences) { - for (const sentence of sentences) { - if (currentString.length + sentence.length > maxLength) { - strings.push(currentString); - currentString = ""; - } - - currentString += `${sentence} `; - } - } else { - strings.push(string); - } - - if (currentString) { - strings.push(currentString); - } - - return strings; -} -function addListeners(button, utterThis) { - utterThis.onstart = (event) => { - isSpeaking = true; - button.style.backgroundColor = "red"; - button.style.boxShadow = "2px 2px 0.5px #808080"; - }; - - utterThis.onend = (event) => { - isSpeaking = false; - button.style.backgroundColor = ""; - button.style.boxShadow = ""; - }; -} - -function attachAudio_modules(div) { - if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) { - return; - } - const audio_out_button = document.createElement("button"); - audio_out_button.id = "audio-out-button"; - audio_out_button.classList.add("audio_btn"); - audio_out_button.innerHTML = "🕪"; - div.classList.add("flex-1"); - audio_out_button.classList.add("audio-out-button"); - div.appendChild(audio_out_button); - - function play_audio() { - if (isSpeaking) { - - audio_out_button.style.backgroundColor = ""; - audio_out_button.style.boxShadow = ""; - synth.cancel(); - isSpeaking = false; - } else { - isSpeaking = true; - text = audio_out_button.previousSibling.textContent; - - const selectedOption = - voice_select.selectedOptions[0].getAttribute("data-name"); - var selectedVoice = null; - for (let i = 0; i < voices.length; i++) { - if (voices[i].name === selectedOption) { - selectedVoice = voices[i]; + if (voices[i].default) { + option.textContent += " — DEFAULT"; } + + option.setAttribute("data-lang", voices[i].lang); + option.setAttribute("data-name", voices[i].name); + voice_select.appendChild(option); } - if (selectedVoice && selectedVoice.voiceURI === "native") { - const utterThis = new SpeechSynthesisUtterance(text); - utterThis.voice = selectedVoice; - addListeners(audio_out_button, utterThis); - synth.speak(utterThis); + } + voice_select.addEventListener("change", function () { + }); + } + // Audio code + function splitString(string, maxLength) { + const sentences = string.match(/[^.!?]+[.!?]/g); + const strings = []; + let currentString = ""; + + if (sentences) { + for (const sentence of sentences) { + if (currentString.length + sentence.length > maxLength) { + strings.push(currentString); + currentString = ""; + } + + currentString += `${sentence} `; + } + } else { + strings.push(string); + } + + if (currentString) { + strings.push(currentString); + } + + return strings; + } + function addListeners(button, utterThis) { + utterThis.onstart = (event) => { + isSpeaking = true; + button.style.backgroundColor = "red"; + button.style.boxShadow = "2px 2px 0.5px #808080"; + }; + + utterThis.onend = (event) => { + isSpeaking = false; + button.style.backgroundColor = ""; + button.style.boxShadow = ""; + }; + } + + function attachAudio_modules(div) { + if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) { + return; + } + const audio_out_button = document.createElement("button"); + audio_out_button.id = "audio-out-button"; + audio_out_button.classList.add("audio_btn"); + audio_out_button.innerHTML = "🕪"; + div.classList.add("flex-1"); + audio_out_button.classList.add("audio-out-button"); + div.appendChild(audio_out_button); + + function play_audio() { + if (isSpeaking) { + + audio_out_button.style.backgroundColor = ""; + audio_out_button.style.boxShadow = ""; + synth.cancel(); + isSpeaking = false; } else { - texts = splitString(text, 200); - texts.forEach((text) => { + isSpeaking = true; + text = audio_out_button.previousSibling.textContent; + + const selectedOption = + voice_select.selectedOptions[0].getAttribute("data-name"); + var selectedVoice = null; + for (let i = 0; i < voices.length; i++) { + if (voices[i].name === selectedOption) { + selectedVoice = voices[i]; + } + } + if (selectedVoice && selectedVoice.voiceURI === "native") { const utterThis = new SpeechSynthesisUtterance(text); utterThis.voice = selectedVoice; addListeners(audio_out_button, utterThis); synth.speak(utterThis); - }); + } else { + texts = splitString(text, 200); + texts.forEach((text) => { + const utterThis = new SpeechSynthesisUtterance(text); + utterThis.voice = selectedVoice; + addListeners(audio_out_button, utterThis); + synth.speak(utterThis); + }); + } } } + audio_out_button.addEventListener("click", () => { + play_audio(); + }); + // TODO : activate using configuration file + //if (global["auto_audio"]) { + // play_audio(); + //} } - audio_out_button.addEventListener("click", () => { - play_audio(); - }); - // TODO : activate using configuration file - //if (global["auto_audio"]) { - // play_audio(); - //} -} -function add_audio_in_ui() { + function add_audio_in_ui() { const inputs = document.querySelectorAll("#user-input"); inputs.forEach((input) => { // const wrapper = document.createElement("div"); // wrapper.classList.add("flex", "items-center"); var btn = document.querySelectorAll("#audio_in_tool"); - + var found = false; // Iterate through the children for (var i = 0; i < btn.length; i++) { @@ -147,25 +149,25 @@ function add_audio_in_ui() { found = true; } } - - + + if (!found) { const audio_in_button = document.createElement("button"); audio_in_button.id = "audio_in_tool"; audio_in_button.classList.add("audio_btn"); audio_in_button.innerHTML = "🎤"; - + input.parentNode.parentNode.appendChild( audio_in_button ); - + input.classList.add("flex-1"); audio_in_button.classList.add("ml-2"); //wrapper.appendChild(audio_in_button); //input.parentNode.parentNode.insertBefore(wrapper, input); //input.parentNode.removeChild(input); //wrapper.appendChild(input); - + audio_in_button.addEventListener("click", () => { if (isStarted) { recognition.stop(); @@ -176,7 +178,7 @@ function add_audio_in_ui() { isStarted = true; } }); - + recognition.addEventListener("result", (event) => { let transcript = ""; for (const result of event.results) { @@ -186,16 +188,17 @@ function add_audio_in_ui() { input.value = transcript; } }); - + recognition.addEventListener("start", () => { audio_in_button.style.backgroundColor = "red"; audio_in_button.style.boxShadow = "2px 2px 0.5px #808080"; }); - + recognition.addEventListener("end", () => { audio_in_button.style.backgroundColor = ""; audio_in_button.style.boxShadow = ""; }); } }); - } \ No newline at end of file + } +} diff --git a/static/js/chat.js b/static/js/chat.js index 83884e9e..603147c2 100644 --- a/static/js/chat.js +++ b/static/js/chat.js @@ -1,333 +1,337 @@ -function addMessage(sender, message, id, rank=0, can_edit=false) { +// Dirty fix for disabling speech synth for firefox browsers :() +const userAgent = navigator.userAgent; + +function addMessage(sender, message, id, rank = 0, can_edit = false) { const chatWindow = document.getElementById('chat-window'); const chatForm = document.getElementById('chat-form'); const userInput = document.getElementById('user-input'); - + console.log(id) const messageElement = document.createElement('div'); messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300'); - + //messageElement.classList.add(sender); messageElement.setAttribute('id', id); - + const senderElement = document.createElement('div'); senderElement.classList.add('font-normal', 'underline', 'text-sm'); senderElement.innerHTML = sender; - + const messageTextElement = document.createElement('div'); messageTextElement.classList.add('font-medium', 'text-md'); messageTextElement.innerText = message; // Create a hidden div element needed to buffer responses before commiting them to the visible message const hiddenElement = document.createElement('div'); hiddenElement.style.display = 'none'; - hiddenElement.innerHTML = ''; - + hiddenElement.innerHTML = ''; + messageElement.appendChild(senderElement); messageElement.appendChild(messageTextElement); - if(can_edit) - { - // Create buttons container - const buttonsContainer = document.createElement('div'); - // Add the 'flex' class to the div - buttonsContainer.classList.add('flex'); - - // Add the 'justify-end' class to the div - buttonsContainer.classList.add('justify-end'); - - // Set the width and height of the container to 100% - buttonsContainer.style.width = '100%'; - buttonsContainer.style.height = '100%'; + if (can_edit) { + // Create buttons container + const buttonsContainer = document.createElement('div'); + // Add the 'flex' class to the div + buttonsContainer.classList.add('flex'); - const resendButton = document.createElement('button'); - resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); - resendButton.style.float = 'right'; // set the float property to right - resendButton.style.display='inline-block' - resendButton.innerHTML = ''; - const resendImg = document.createElement('img'); - resendImg.src = "/static/images/refresh.png"; - resendImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10'); - resendButton.appendChild(resendImg) - resendButton.addEventListener('click', () => { - // get user input and clear input field - message = userInput.value; - userInput.value = ''; - - // add user message to chat window - const sendbtn = document.querySelector("#submit-input") - const waitAnimation = document.querySelector("#wait-animation") - sendbtn.style.display="none"; - waitAnimation.style.display="block"; + // Add the 'justify-end' class to the div + buttonsContainer.classList.add('justify-end'); - fetch("/run_to", { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - id: id, - message: message + // Set the width and height of the container to 100% + buttonsContainer.style.width = '100%'; + buttonsContainer.style.height = '100%'; + + const resendButton = document.createElement('button'); + resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + resendButton.style.float = 'right'; // set the float property to right + resendButton.style.display = 'inline-block' + resendButton.innerHTML = ''; + const resendImg = document.createElement('img'); + resendImg.src = "/static/images/refresh.png"; + resendImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10'); + resendButton.appendChild(resendImg) + resendButton.addEventListener('click', () => { + // get user input and clear input field + message = userInput.value; + userInput.value = ''; + + // add user message to chat window + const sendbtn = document.querySelector("#submit-input") + const waitAnimation = document.querySelector("#wait-animation") + sendbtn.style.display = "none"; + waitAnimation.style.display = "block"; + + fetch("/run_to", { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + id: id, + message: message + }) }) - }) - .then(function(response) { - const stream = new ReadableStream({ - start(controller) { - const reader = response.body.getReader(); - function push() { - reader.read().then(function(result) { + .then(function (response) { + const stream = new ReadableStream({ + start(controller) { + const reader = response.body.getReader(); + function push() { + reader.read().then(function (result) { + if (result.done) { + sendbtn.style.display = "block"; + waitAnimation.style.display = "none"; + controller.close(); + return; + } + controller.enqueue(result.value); + push(); + }) + } + push(); + } + }); + const textDecoder = new TextDecoder(); + const readableStreamDefaultReader = stream.getReader(); + let entry_counter = 0 + function readStream() { + readableStreamDefaultReader.read().then(function (result) { if (result.done) { - sendbtn.style.display="block"; - waitAnimation.style.display="none"; - controller.close(); return; } - controller.enqueue(result.value); - push(); - }) - } - push(); - } - }); - const textDecoder = new TextDecoder(); - const readableStreamDefaultReader = stream.getReader(); - let entry_counter = 0 - function readStream() { - readableStreamDefaultReader.read().then(function(result) { - if (result.done) { - return; - } - - text = textDecoder.decode(result.value); - - // The server will first send a json containing information about the message just sent - if(entry_counter==0) - { - // We parse it and - infos = JSON.parse(text) - console.log(infos) - addMessage('User', infos.message, infos.id, 0, can_edit=true); - elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit=true); - messageTextElement=elements['messageTextElement']; - hiddenElement=elements['hiddenElement']; - entry_counter ++; - } - else{ - // For the other enrtries, these are just the text of the chatbot - for (const char of text) { - txt = hiddenElement.innerHTML; - if (char != '\f') { - txt += char - hiddenElement.innerHTML = txt - messageTextElement.innerHTML = txt.replace(/\n/g, "
") + + text = textDecoder.decode(result.value); + + // The server will first send a json containing information about the message just sent + if (entry_counter == 0) { + // We parse it and + infos = JSON.parse(text) + console.log(infos) + addMessage('User', infos.message, infos.id, 0, can_edit = true); + elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit = true); + messageTextElement = elements['messageTextElement']; + hiddenElement = elements['hiddenElement']; + entry_counter++; } - - // scroll to bottom of chat window - chatWindow.scrollTop = chatWindow.scrollHeight; - } - entry_counter ++; + else { + // For the other enrtries, these are just the text of the chatbot + for (const char of text) { + txt = hiddenElement.innerHTML; + if (char != '\f') { + txt += char + hiddenElement.innerHTML = txt + messageTextElement.innerHTML = txt.replace(/\n/g, "
") + } + + // scroll to bottom of chat window + chatWindow.scrollTop = chatWindow.scrollHeight; + } + entry_counter++; + } + + readStream(); + }); } - readStream(); }); - } - readStream(); - }); - }); + }); - const editButton = document.createElement('button'); - editButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); - editButton.style.float = 'right'; // set the float property to right - editButton.style.display='inline-block' - editButton.innerHTML = ''; - const editImg = document.createElement('img'); - editImg.src = "/static/images/edit_discussion.png"; - editImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10'); - editButton.appendChild(editImg) - - editButton.addEventListener('click', () => { - const inputField = document.createElement('input'); - inputField.type = 'text'; - inputField.classList.add('font-medium', 'text-md', 'border', 'border-gray-300', 'p-1'); - inputField.value = messageTextElement.innerHTML; - - buttonsContainer.style.display="none" - - const saveButton = document.createElement('button'); - saveButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'my-2', 'ml-2'); - saveButton.innerHTML = 'Save'; - saveButton.addEventListener('click', () => { - const newText = inputField.value; - messageTextElement.innerHTML = newText; - // make request to update message - const url = `/update_message?id=${id}&message=${newText}`; - fetch(url) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); + const editButton = document.createElement('button'); + editButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + editButton.style.float = 'right'; // set the float property to right + editButton.style.display = 'inline-block' + editButton.innerHTML = ''; + const editImg = document.createElement('img'); + editImg.src = "/static/images/edit_discussion.png"; + editImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10'); + editButton.appendChild(editImg) + + editButton.addEventListener('click', () => { + const inputField = document.createElement('input'); + inputField.type = 'text'; + inputField.classList.add('font-medium', 'text-md', 'border', 'border-gray-300', 'p-1'); + inputField.value = messageTextElement.innerHTML; + + buttonsContainer.style.display = "none" + + const saveButton = document.createElement('button'); + saveButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'my-2', 'ml-2'); + saveButton.innerHTML = 'Save'; + saveButton.addEventListener('click', () => { + const newText = inputField.value; + messageTextElement.innerHTML = newText; + // make request to update message + const url = `/update_message?id=${id}&message=${newText}`; + fetch(url) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + else { + console.log("Updated") + } + }) + .catch(error => { + console.error('There was a problem updating the message:', error); + }); + buttonsContainer.style.display = 'inline-block' + messageElement.replaceChild(messageTextElement, inputField); + //messageElement.removeChild(inputField); + messageElement.removeChild(saveButton); + }); + + messageElement.replaceChild(inputField, messageTextElement); + messageElement.appendChild(saveButton); + inputField.focus(); + }); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + deleteButton.style.float = 'right'; // set the float property to right + deleteButton.style.display = 'inline-block' + deleteButton.innerHTML = ''; + const deleteImg = document.createElement('img'); + deleteImg.src = "/static/images/delete_discussion.png"; + deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); + deleteButton.appendChild(deleteImg) + deleteButton.addEventListener('click', () => { + const url = `/delete_message?id=${id}`; + fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data.new_rank) + messageElement.style.display = "none" + }) + .catch(error => { + console.error('There was a problem updating the message:', error); + }); + }); + const rank_up = document.createElement('button'); + rank_up.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + rank_up.style.float = 'right'; // set the float property to right + rank_up.style.display = 'inline-block' + rank_up.innerHTML = ''; + const thumbUpImg = document.createElement('img'); + thumbUpImg.src = "/static/images/thumb_up.png"; + thumbUpImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); + rank_up.appendChild(thumbUpImg) + const thumbUpBadge = document.createElement('span'); + thumbUpBadge.innerText = ""; + thumbUpBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0'); + rank_up.appendChild(thumbUpBadge) + + rank_up.addEventListener('click', () => { + const url = `/message_rank_up?id=${id}`; + fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data.new_rank) + if (data.new_rank > 0) { + thumbUpBadge.innerText = `${data.new_rank}` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `block` + thumbDownBadge.display = 'none' } - else{ - console.log("Updated") + else if (data.new_rank < 0) { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `${data.new_rank}` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'block' + } + else { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'none' } }) .catch(error => { console.error('There was a problem updating the message:', error); }); - buttonsContainer.style.display='inline-block' - messageElement.replaceChild(messageTextElement, inputField); - //messageElement.removeChild(inputField); - messageElement.removeChild(saveButton); - }); - - messageElement.replaceChild(inputField, messageTextElement); - messageElement.appendChild(saveButton); - inputField.focus(); - }); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); - deleteButton.style.float = 'right'; // set the float property to right - deleteButton.style.display='inline-block' - deleteButton.innerHTML = ''; - const deleteImg = document.createElement('img'); - deleteImg.src = "/static/images/delete_discussion.png"; - deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); - deleteButton.appendChild(deleteImg) - deleteButton.addEventListener('click', () => { - const url = `/delete_message?id=${id}`; - fetch(url) - .then(response => response.json()) - .then(data => { - console.log(data.new_rank) - messageElement.style.display="none" - }) - .catch(error => { - console.error('There was a problem updating the message:', error); - }); - }); - const rank_up = document.createElement('button'); - rank_up.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); - rank_up.style.float = 'right'; // set the float property to right - rank_up.style.display='inline-block' - rank_up.innerHTML = ''; - const thumbUpImg = document.createElement('img'); - thumbUpImg.src = "/static/images/thumb_up.png"; - thumbUpImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); - rank_up.appendChild(thumbUpImg) - const thumbUpBadge = document.createElement('span'); - thumbUpBadge.innerText = ""; - thumbUpBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0'); - rank_up.appendChild(thumbUpBadge) - - rank_up.addEventListener('click', () => { - const url = `/message_rank_up?id=${id}`; - fetch(url) - .then(response => response.json()) - .then(data => { - console.log(data.new_rank) - if(data.new_rank>0){ - thumbUpBadge.innerText=`${data.new_rank}` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`block` - thumbDownBadge.display='none' - } - else if(data.new_rank<0){ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`${data.new_rank}` - thumbUpBadge.display=`none` - thumbDownBadge.display='block' - } - else{ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`none` - thumbDownBadge.display='none' - } - }) - .catch(error => { - console.error('There was a problem updating the message:', error); - }); - }); - - const rank_down = document.createElement('button'); - rank_down.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); - rank_down.style.float = 'right'; // set the float property to right - rank_down.style.display='inline-block' - rank_down.innerHTML = ''; - const thumbDownImg = document.createElement('img'); - thumbDownImg.src = "/static/images/thumb_down.png"; - thumbDownImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); - rank_down.appendChild(thumbDownImg) - const thumbDownBadge = document.createElement('span'); - thumbDownBadge.innerText = ""; - thumbDownBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0'); - rank_down.appendChild(thumbDownBadge) - - rank_down.addEventListener('click', () => { - const url = `/message_rank_down?id=${id}`; - fetch(url) - .then(response => response.json()) - .then(data => { - console.log(data) - if(data.new_rank>0){ - thumbUpBadge.innerText=`${data.new_rank}` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`block` - thumbDownBadge.display='none' - } - else if(data.new_rank<0){ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`${data.new_rank}` - thumbUpBadge.display=`none` - thumbDownBadge.display='block' - } - else{ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`none` - thumbDownBadge.display='none' - } - }) - .catch(error => { - console.error('There was a problem updating the message:', error); - }); - }); - buttonsContainer.appendChild(editButton); - buttonsContainer.appendChild(resendButton); - buttonsContainer.appendChild(deleteButton); - - buttonsContainer.appendChild(rank_up); - buttonsContainer.appendChild(rank_down); - messageElement.appendChild(buttonsContainer); - if(rank>0){ - thumbUpBadge.innerText=`${rank}` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`block` - thumbDownBadge.display='none' - } - else if(rank<0){ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`${rank}` - thumbUpBadge.display=`none` - thumbDownBadge.display='block' - } - else{ - thumbUpBadge.innerText=`` - thumbDownBadge.innerText=`` - thumbUpBadge.display=`none` - thumbDownBadge.display='none' - } - + }); + + const rank_down = document.createElement('button'); + rank_down.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + rank_down.style.float = 'right'; // set the float property to right + rank_down.style.display = 'inline-block' + rank_down.innerHTML = ''; + const thumbDownImg = document.createElement('img'); + thumbDownImg.src = "/static/images/thumb_down.png"; + thumbDownImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); + rank_down.appendChild(thumbDownImg) + const thumbDownBadge = document.createElement('span'); + thumbDownBadge.innerText = ""; + thumbDownBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0'); + rank_down.appendChild(thumbDownBadge) + + rank_down.addEventListener('click', () => { + const url = `/message_rank_down?id=${id}`; + fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data) + if (data.new_rank > 0) { + thumbUpBadge.innerText = `${data.new_rank}` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `block` + thumbDownBadge.display = 'none' + } + else if (data.new_rank < 0) { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `${data.new_rank}` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'block' + } + else { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'none' + } + }) + .catch(error => { + console.error('There was a problem updating the message:', error); + }); + }); + buttonsContainer.appendChild(editButton); + buttonsContainer.appendChild(resendButton); + buttonsContainer.appendChild(deleteButton); + + buttonsContainer.appendChild(rank_up); + buttonsContainer.appendChild(rank_down); + messageElement.appendChild(buttonsContainer); + if (rank > 0) { + thumbUpBadge.innerText = `${rank}` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `block` + thumbDownBadge.display = 'none' + } + else if (rank < 0) { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `${rank}` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'block' + } + else { + thumbUpBadge.innerText = `` + thumbDownBadge.innerText = `` + thumbUpBadge.display = `none` + thumbDownBadge.display = 'none' + } + } chatWindow.appendChild(messageElement); chatWindow.appendChild(hiddenElement); - attachAudio_modules(messageTextElement); - + // Dirty fix for disabling speech synth for firefox browsers :() + if (!userAgent.match(/firefox|fxios/i)) { + attachAudio_modules(messageTextElement); + } + // scroll to bottom of chat window chatWindow.scrollTop = chatWindow.scrollHeight; - + // Return all needed stuff return { - 'messageTextElement':messageTextElement, - 'hiddenElement':hiddenElement + 'messageTextElement': messageTextElement, + 'hiddenElement': hiddenElement } } \ No newline at end of file diff --git a/static/js/tabs.js b/static/js/tabs.js index c1fae21f..05f648c7 100644 --- a/static/js/tabs.js +++ b/static/js/tabs.js @@ -1,43 +1,48 @@ function showTab(tabId) { - // hide all tabs - var tabs = document.getElementsByClassName('tab-pane'); - for (var i = 0; i < tabs.length; i++) { - tabs[i].style.display = 'none'; - } - // show the selected tab - console.log(tabId) - var tab = document.getElementById(tabId); - tab.style.display = 'block'; + // hide all tabs + var tabs = document.getElementsByClassName('tab-pane'); + for (var i = 0; i < tabs.length; i++) { + tabs[i].style.display = 'none'; } + // show the selected tab + console.log(tabId) + var tab = document.getElementById(tabId); + tab.style.display = 'block'; +} - // show the main tab by default - showTab('main'); - // add event listeners to the tab links - var tabLinks = document.getElementsByTagName('a'); - for (var i = 0; i < tabLinks.length; i++) { - tabLinks[i].addEventListener('click', function(event) { - event.preventDefault(); - var tabId = this.getAttribute('href').substring(1); - showTab(tabId); - }); +// show the main tab by default +showTab('main'); +// add event listeners to the tab links +var tabLinks = document.getElementsByTagName('a'); +for (var i = 0; i < tabLinks.length; i++) { + tabLinks[i].addEventListener('click', function (event) { + event.preventDefault(); + var tabId = this.getAttribute('href').substring(1); + showTab(tabId); + }); } fetch('/main') -.then(response => response.text()) -.then(html => { - document.getElementById('main').innerHTML = html; - // First time we populate the discussions list - populate_discussions_list() - populate_menu(); - load_discussion(); - update_main(); - db_export(); - prepre_audio(); - add_audio_in_ui(); - populateVoicesList(); - populate_models() + .then(response => response.text()) + .then(html => { + document.getElementById('main').innerHTML = html; + // First time we populate the discussions list + populate_discussions_list() + populate_menu(); + load_discussion(); + update_main(); + db_export(); -}) -.catch(error => { - console.error('Error loading main page:', error); -}); + // Dirty fix for disabling speech synth for firefox browsers :() + if (!userAgent.match(/firefox|fxios/i)) { + prepre_audio(); + add_audio_in_ui(); + populateVoicesList(); + } + + populate_models() + + }) + .catch(error => { + console.error('Error loading main page:', error); + });