cant redo and edit message if no llm selected
This commit is contained in:
parent
64542a15aa
commit
b12c6d4ea4
Binary file not shown.
@ -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>
|
||||
@ -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].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].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() {
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user