Added titles to buttons

static/js/audio.js

@@ -82,6 +82,7 @@ if (!userAgent.match(/firefox|fxios/i)) {
       return;
     }
     const audio_out_button = document.createElement("button");
+    audio_out_button.title = "Listen to message";
     audio_out_button.id = "audio-out-button";
     audio_out_button.classList.add("audio_btn",'bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
     audio_out_button.innerHTML = "🕪";
@@ -155,6 +156,7 @@ if (!userAgent.match(/firefox|fxios/i)) {
 
       if (!found) {
         const audio_in_button = document.createElement("button");
+        audio_in_button.title = "Type with your voice";
         audio_in_button.id = "audio_in_tool";
         audio_in_button.classList.add("audio_btn");
         audio_in_button.innerHTML = "🎤";

static/js/chat.js

@@ -48,6 +48,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         const resendImg = document.createElement('img');
         resendImg.src = "/static/images/refresh.png";
         resendImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
+        resendButton.title = "Resend message";
         resendButton.appendChild(resendImg)
         resendButton.addEventListener('click', () => {
             // get user input and clear input field
@@ -145,6 +146,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         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.title = "Edit message";
         editButton.appendChild(editImg)
 
         editButton.addEventListener('click', () => {
@@ -194,6 +196,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         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.title = "Delete message";
         deleteButton.appendChild(deleteImg)
         deleteButton.addEventListener('click', () => {
             const url = `/delete_message?id=${id}`;
@@ -209,6 +212,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
         });
         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.title = "Upvote";
         rank_up.style.float = 'right'; // set the float property to right    
         rank_up.style.display = 'inline-block'
         rank_up.innerHTML = '';
@@ -253,6 +257,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
 
         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.title = "Downvote";
         rank_down.style.float = 'right'; // set the float property to right    
         rank_down.style.display = 'inline-block'
         rank_down.innerHTML = '';

static/js/db_export.js

@@ -1,6 +1,6 @@
 function db_export(){
     const exportButton = document.getElementById('export-button');
-
+    exportButton.title = "Export database";
     exportButton.addEventListener('click', () => {
         const messages = Array.from(chatWindow.querySelectorAll('.message')).map(messageElement => {
             const senderElement = messageElement.querySelector('.sender');

static/js/discussions.js

@@ -59,6 +59,7 @@ function populate_discussions_list()
         renameButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const renameImg = document.createElement('img');
         renameImg.src = "/static/images/edit_discussion.png";
+        renameButton.title = "Rename discussion";
         renameImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
         renameButton.appendChild(renameImg);
 
@@ -123,6 +124,7 @@ function populate_discussions_list()
         deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const deleteImg = document.createElement('img');
         deleteImg.src = "/static/images/delete_discussion.png";
+        deleteButton.title = "Delete discussion";
         deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
 
         deleteButton.addEventListener('click', () => {
@@ -155,6 +157,7 @@ function populate_discussions_list()
         const discussionButton = document.createElement('button');
         discussionButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
         discussionButton.textContent = discussion.title;
+        discussionButton.title = "Open discussion";
         discussionButton.addEventListener('click', () => {
           console.log(`Showing messages for discussion ${discussion.id}`);
           load_discussion(discussion);
@@ -177,7 +180,7 @@ function populate_discussions_list()
 function populate_menu(){
   // adding export discussion button
   const exportDiscussionButton = document.querySelector('#export-discussion-button');
-
+  exportDiscussionButton.title = "Export discussion to a file";
   exportDiscussionButton.addEventListener('click', () => {
     fetch(`/export_discussion`)
     .then(response => response.text())
@@ -201,7 +204,9 @@ function populate_menu(){
   actionBtns.appendChild(exportDiscussionButton);
 
   const newDiscussionBtn = document.querySelector('#new-discussion-btn');
+  newDiscussionBtn.title = "Create new discussion";
   const resetDBButton = document.querySelector('#reset-discussions-btn');
+  resetDBButton.title = "Reset all discussions/database";
   resetDBButton.addEventListener('click', () => {
 
   });

templates/chat.html

@@ -10,7 +10,7 @@
 </head>
 <body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900">
     <div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6">
-        <div class="w-12 h-12"><img src="{{ url_for('static', filename='images/icon.png') }}"></div>
+        <div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
         <h1>GPT4All - WEBUI</h1>
     </div>
     <div class="border-b border-gray-800 content-center items-center">