enhanced ui and personality configuration

app.py

@@ -196,7 +196,8 @@ class Gpt4AllWebUI(GPT4AllAPI):
             json.dumps(
                 {
                     "type": "input_message_infos",
-                    "sender": self.personality["name"],
+                    "bot": self.personality["name"],
+                    "user": self.personality["user_name"],
                     "message": message,
                     "id": message_id,
                     "response_id": response_id,

personalities/gpt4all_chatbot.yaml

@@ -9,6 +9,9 @@
 # Name of the personality
 name: gpt4all
 
+# Name of the user
+user_name: user
+
 # Language (see the list of supported languages here : https://github.com/ParisNeo/GPT4All_Personalities/blob/main/README.md)
 language: "en_XX"
 

static/js/chat.js

@@ -1,15 +1,26 @@
 // Dirty fix for disabling speech synth for firefox browsers :()
 const userAgent = navigator.userAgent;
 
+async function copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      console.log('Text copied to clipboard');
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+}
+
 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.id = id
     //messageElement.classList.add(sender);
     messageElement.setAttribute('id', id);
 
@@ -27,6 +38,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
 
     messageElement.appendChild(senderElement);
     messageElement.appendChild(messageTextElement);
+
     if (can_edit) {
         // Create buttons container
         const buttonsContainer = document.createElement('div');
@@ -39,7 +51,19 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         // Set the width and height of the container to 100%
         buttonsContainer.style.width = '100%';
         buttonsContainer.style.height = '100%';
-
+        const clipboardButton = document.createElement('button');
+        clipboardButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
+        clipboardButton.style.float = 'right'; // set the float property to right    
+        clipboardButton.style.display = 'inline-block'
+        clipboardButton.innerHTML = '';
+        const clipboardImg = document.createElement('img');
+        clipboardImg.src = "/static/images/copy.png";
+        clipboardImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
+        clipboardButton.title = "clipboard message";
+        clipboardButton.appendChild(clipboardImg)
+        clipboardButton.addEventListener('click', () => {
+            copyToClipboard(messageTextElement.innerText)
+        })
         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    
@@ -65,13 +89,15 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
             let messageTextElement_ = undefined
             let hiddenElement_ = undefined
 
+            elements = addMessage("", "", 0, 0, can_edit = true);
+
             fetch("/run_to", {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
-                    id: id,
+                    id: messageElement.id,
                     message: message
                 })
             })
@@ -113,7 +139,8 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
                             if (entry_counter == 0) {
                                 // We parse it and
                                 infos = JSON.parse(text)
-                                elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit = true);
+                                elements.id = infos.response_id
+                                elements.setSender(infos.sender)
                                 messageTextElement_ = elements['messageTextElement'];
                                 hiddenElement_ = elements['hiddenElement'];
                                 entry_counter++;
@@ -305,7 +332,9 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
                     console.error('There was a problem updating the message:', error);
                 });
         });
+        
         buttonsContainer.appendChild(editButton);
+        buttonsContainer.appendChild(clipboardButton);
         buttonsContainer.appendChild(resendButton);
         buttonsContainer.appendChild(deleteButton);
 
@@ -335,7 +364,10 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
             thumbUpBadge.display = `none`
             thumbDownBadge.display = 'none'
         }
-
+        chatWindow.buttonsContainer = buttonsContainer
+    }
+    else{
+        chatWindow.buttonsContainer = undefined
     }
     chatWindow.appendChild(messageElement);
     chatWindow.appendChild(hiddenElement);
@@ -344,9 +376,21 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
     // scroll to bottom of chat window
     chatWindow.scrollTop = chatWindow.scrollHeight;
 
-    // Return all needed stuff
+    messageElement.hiddenElement        = hiddenElement
-    return {
+    messageElement.senderElement        = senderElement
-        'messageTextElement': messageTextElement,
+    messageElement.messageTextElement   = messageTextElement
-        'hiddenElement': hiddenElement
+    messageElement.id                   = id
+
+    messageElement.setID=(id)=>{
+        messageElement.id = id
     }
+    messageElement.setSender=(sender)=>{
+        messageElement.senderElement.innerHTML = sender
+    }
+    messageElement.setMessage=(message)=>{
+        messageElement.messageTextElement.innerHTML = message
+    }
+    // Return all needed stuff
+    return messageElement
+    
 }

static/js/discussions.js

@@ -1,5 +1,7 @@
 
 function load_discussion(discussion=0){
+  var container = document.getElementById('chat-window');
+
   if(discussion)
   {
     console.log(discussion.id)
@@ -22,7 +24,6 @@ function load_discussion(discussion=0){
         const messages = JSON.parse(data);
         console.log(messages)
         // process messages
-        var container = document.getElementById('chat-window');
         container.innerHTML = '';
         messages.forEach(message => {
           console.log(`Adding message ${message.type}`)

static/js/main.js

@@ -21,6 +21,9 @@ function update_main(){
       let hiddenElement = undefined
       let messageTextElement = undefined
 
+      user_msg = addMessage('',message, 0, 0, can_edit=true);
+      bot_msg = addMessage('', '', 0, 0, can_edit=true);
+
       fetch('/bot', {
           method: 'POST',
           headers: {
@@ -63,10 +66,13 @@ function update_main(){
                   {
                     // We parse it and
                     infos = JSON.parse(text)
-                    addMessage('User', infos.message, infos.id, 0, can_edit=true);
+                    user_msg.setSender(infos.user)
-                    elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit=true);
+                    user_msg.setID(infos.id)
-                    messageTextElement=elements['messageTextElement'];
+                    bot_msg.setSender(infos.bot)
-                    hiddenElement=elements['hiddenElement'];
+                    bot_msg.setID(infos.response_id)
+                    
+                    messageTextElement=elements.messageTextElement;
+                    hiddenElement=elements.hiddenElement;
                     entry_counter ++;
                   }
                   else{