Merge pull request #89 from andzejsp/main

Added titles to buttons
This commit is contained in:
Saifeddine ALOUI 2023-04-15 22:03:52 +01:00 committed by GitHub
commit 0401312071
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 3 deletions

View File

@ -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 = "🎤";

View File

@ -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 = '';

View File

@ -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');

View File

@ -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', () => {
});

View File

@ -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">