From 29dc3ff5b1fc782f0612e81945ec4c433e973899 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Sun, 9 Apr 2023 23:40:44 +0200
Subject: [PATCH] ui upgrade

---
 app.py              |  1 -
 static/js/chat.js   | 11 +++++++----
 templates/chat.html |  1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app.py b/app.py
index fe924bb5..0c6c8422 100644
--- a/app.py
+++ b/app.py
@@ -96,7 +96,6 @@ class Gpt4AllWebUI:
 
     def condition_chatbot(self, conditionning_message = """
 Instruction: Act as GPT4All. A kind and helpful AI bot built to help users solve problems.
-Start by welcoming the user then stop sending text.
 GPT4All:Welcome! I'm here to assist you with anything you need. What can I do for you today?"""
                           ):
         self.full_message += conditionning_message +"\n"
diff --git a/static/js/chat.js b/static/js/chat.js
index 982cd878..ae0ab951 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -89,8 +89,9 @@ chatForm.addEventListener('submit', event => {
 function addMessage(sender, message, id, can_edit=false) {
   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');
-  messageElement.classList.add(sender);
+  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');
@@ -110,7 +111,9 @@ function addMessage(sender, message, id, can_edit=false) {
   if(can_edit)
   {
     const editButton = document.createElement('button');
-    editButton.classList.add('bg-blue-500', 'hover:bg-blue-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'my-2');
+    editButton.classList.add('my-1','mx-1','outline-none','px-4','bg-accent','text-black','rounded-md','hover:bg-[#7ba0ea]','active:bg-[#3d73e1]','transition-colors','ease-in-out');
+    editButton.style.float = 'right'; // set the float property to right    
+    editButton.style.display='inline-block'
     editButton.innerHTML = 'Edit';
     editButton.addEventListener('click', () => {
         const inputField = document.createElement('input');
@@ -140,7 +143,7 @@ function addMessage(sender, message, id, can_edit=false) {
               .catch(error => {
                   console.error('There was a problem updating the message:', error);
               });
-            editButton.style.display="block"
+            editButton.style.display='inline-block'
             messageElement.replaceChild(messageTextElement, inputField);
             //messageElement.removeChild(inputField);
             messageElement.removeChild(saveButton);
diff --git a/templates/chat.html b/templates/chat.html
index 74f127dd..15bc0f91 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -38,6 +38,7 @@
                     <div class="mb-4">
                         <label class="block text-gray-700 font-bold mb-2" for="temp">Temperature</label>
                         <input class="bg-gray-700 slider absolute top-0 w-full h-full opacity-0" id="temp" type="range" min="0" max="1" step="0.1" value="0.1" name="temp">
+                        <p id="slider-value">0.1</p>
                     </div>
                     <div class="mb-4">
                         <label class="block text-gray-700 font-bold mb-2" for="n-predict">N Predict</label>