cant redo and edit message if no llm selected

This commit is contained in:
Adrien Bouvais 2024-06-16 17:25:36 +02:00
parent 64542a15aa
commit b12c6d4ea4
8 changed files with 25 additions and 130 deletions

Binary file not shown.

View File

@ -1,4 +1,4 @@
<div class="chat-container mt-5" style="padding-bottom: 155px;" hx-indicator="#textarea-control" hx-ext="sse">
<hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
<hx hx-get="/loadChatInput" hx-trigger="load once" hx-swap="outerHTML"></hx>
<hx hx-get="/loadChatInput" hx-trigger="load once" hx-swap="outerHTML" id="textarea-control"></hx>
</div>

View File

@ -41,23 +41,29 @@
}
}, 10);
setInterval(function () {
function updateIcons() {
if (window.innerWidth < 450) {
var elements = document.getElementsByClassName('message-icon');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('is-48x48');
elements[i].classList.add('is-32x32');
elements[i].parentElement.style = "padding-right: 0;"
elements[i].classList.remove('is-48x48');
elements[i].classList.add('is-32x32');
elements[i].parentElement.style = "padding-right: 0;";
}
} else {
var elements = document.getElementsByClassName('message-icon');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('is-32x32');
elements[i].classList.add('is-48x48');
elements[i].parentElement.style = ""
elements[i].classList.remove('is-32x32');
elements[i].classList.add('is-48x48');
elements[i].parentElement.style = "";
}
}
}, 300);
}
// Run when the element is added
document.addEventListener('htmx:afterSwap', updateIcons);
// Run every 0.01s
setInterval(updateIcons, 100);
document.getElementById('chat-input-textarea').addEventListener('focus', function () {
var buttons = document.getElementsByClassName('to-reduce-opacity');
@ -76,13 +82,19 @@
const textarea = document.querySelector('#chat-input-textarea');
textarea.addEventListener('keydown', handleTextareaKeydown);
document.addEventListener('htmx:afterSwap', toggleSendButton)
function toggleSendButton() {
// check if generate-multiple-messages exists
var generateMultipleMessages = document.getElementById('generate-multiple-messages');
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null;
// Do the same for all element with an id that start with redo-button- or edit-button-
const buttons = document.querySelectorAll('[id^="redo-button-"], [id^="edit-button-"]');
buttons.forEach(button => button.disabled = document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null);
if (document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null) {
buttons.forEach(button => button.classList.add('is-static'));
} else {
buttons.forEach(button => button.classList.remove('is-static'));
}
}
function onClickSendButton() {

View File

@ -1,30 +0,0 @@
<div class="message-bot mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content">
<div class='message-header'>
<p>
Waiting...
</p>
</div>
<div class="message-body">
<div class="content">
<br>
<img src="/puff.svg" />
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>

View File

@ -1,29 +0,0 @@
<div class="message-user mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto; width: 100%;">
{{ Content | safe }}
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>

View File

@ -28,7 +28,7 @@
<i class="fa-solid fa-trash"></i>
</span>
</button>
<button id="redo-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-1"
<button id="redo-button-{{ ID }}" class="button is-primary is-small message-button is-outlined mr-1 is-static"
hx-post="/redoMessage?id={{ ID }}" hx-swap="innerHTML settle:200ms" hx-target="next .message-bot"
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
<span class="icon">
@ -36,7 +36,7 @@
</span>
</button>
<button hx-get="/editMessageForm?id={{ ID }}" hx-target="closest .message-user"
id="edit-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-5">
id="edit-button-{{ ID }}" class="button is-primary is-small message-button is-outlined is-static mr-5">
<span class="icon">
<i class="fa-solid fa-pen"></i>
</span>

View File

@ -1,58 +0,0 @@
<div class="is-hidden" id="msg-placeholder">
<div class="message-user mt-3">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto; width: 100%;" id="content-placeholder">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style='height: 10px;'></div>
<div class="message-user mt-3">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
Waiting...
</p>
</div>
<div class="message-body">
<br>
<div class="content">
<img src="/puff.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -32,7 +32,7 @@
</span>
</button>
<button
class="button is-small is-info is-outlined {% if not SelectedIsDefault %} is-hidden {% endif %}"
class="button is-small is-primary is-outlined {% if not SelectedIsDefault %} is-hidden {% endif %}"
id="archive-default-conversation-button">
<span class="icon">
<i class="fa-solid fa-box-archive"></i>