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">
|
<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="/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>
|
</div>
|
||||||
@ -41,23 +41,29 @@
|
|||||||
}
|
}
|
||||||
}, 10);
|
}, 10);
|
||||||
|
|
||||||
setInterval(function () {
|
function updateIcons() {
|
||||||
if (window.innerWidth < 450) {
|
if (window.innerWidth < 450) {
|
||||||
var elements = document.getElementsByClassName('message-icon');
|
var elements = document.getElementsByClassName('message-icon');
|
||||||
for (var i = 0; i < elements.length; i++) {
|
for (var i = 0; i < elements.length; i++) {
|
||||||
elements[i].classList.remove('is-48x48');
|
elements[i].classList.remove('is-48x48');
|
||||||
elements[i].classList.add('is-32x32');
|
elements[i].classList.add('is-32x32');
|
||||||
elements[i].parentElement.style = "padding-right: 0;"
|
elements[i].parentElement.style = "padding-right: 0;";
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
var elements = document.getElementsByClassName('message-icon');
|
var elements = document.getElementsByClassName('message-icon');
|
||||||
for (var i = 0; i < elements.length; i++) {
|
for (var i = 0; i < elements.length; i++) {
|
||||||
elements[i].classList.remove('is-32x32');
|
elements[i].classList.remove('is-32x32');
|
||||||
elements[i].classList.add('is-48x48');
|
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 () {
|
document.getElementById('chat-input-textarea').addEventListener('focus', function () {
|
||||||
var buttons = document.getElementsByClassName('to-reduce-opacity');
|
var buttons = document.getElementsByClassName('to-reduce-opacity');
|
||||||
@ -76,13 +82,19 @@
|
|||||||
const textarea = document.querySelector('#chat-input-textarea');
|
const textarea = document.querySelector('#chat-input-textarea');
|
||||||
textarea.addEventListener('keydown', handleTextareaKeydown);
|
textarea.addEventListener('keydown', handleTextareaKeydown);
|
||||||
|
|
||||||
|
document.addEventListener('htmx:afterSwap', toggleSendButton)
|
||||||
|
|
||||||
function toggleSendButton() {
|
function toggleSendButton() {
|
||||||
// check if generate-multiple-messages exists
|
// check if generate-multiple-messages exists
|
||||||
var generateMultipleMessages = document.getElementById('generate-multiple-messages');
|
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;
|
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-
|
// 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-"]');
|
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() {
|
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>
|
<i class="fa-solid fa-trash"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</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-post="/redoMessage?id={{ ID }}" hx-swap="innerHTML settle:200ms" hx-target="next .message-bot"
|
||||||
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
|
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
@ -36,7 +36,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button hx-get="/editMessageForm?id={{ ID }}" hx-target="closest .message-user"
|
<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">
|
<span class="icon">
|
||||||
<i class="fa-solid fa-pen"></i>
|
<i class="fa-solid fa-pen"></i>
|
||||||
</span>
|
</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>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<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">
|
id="archive-default-conversation-button">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa-solid fa-box-archive"></i>
|
<i class="fa-solid fa-box-archive"></i>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user