dirty fix to disable speech for firefox users

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: []

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 = "";
         });
       }
     });
-  }
+  }
+}

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, "<br>")
+
+                            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, "<br>")
+                                    }
+
+                                    // 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
     }
 }

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);
+  });