134 lines
5.3 KiB
HTML
134 lines
5.3 KiB
HTML
{% if IsLogin %}
|
|
{% if IsSubscribed or not IsLimiteReached %}
|
|
<div class="chat-input-container mb-5">
|
|
<div class="textarea-wrapper">
|
|
<div class="control" id="textarea-control">
|
|
<textarea {% if not IsLogin or not HaveKey %}disabled{% endif %}
|
|
class="textarea has-fixed-size"
|
|
placeholder="Type your message here..."
|
|
name="message"
|
|
oninput="toggleSendButton()"
|
|
id="chat-input-textarea"></textarea>
|
|
</div>
|
|
<div class="button-group">
|
|
<hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
|
|
<hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
|
|
<hx hx-get="/loadConversationSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
|
|
<hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
|
|
<button disabled
|
|
type="submit"
|
|
class="send-button button is-primary is-small"
|
|
hx-post="/generatePlaceholder"
|
|
hx-swap="beforeend"
|
|
hx-target="#chat-messages"
|
|
id="chat-input-send-btn"
|
|
class="chat-input"
|
|
hx-include="[name='message']"
|
|
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
|
|
onclick="onClickSendButton()">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<script>
|
|
var textareaControl = document.getElementById('textarea-control');
|
|
|
|
// Every 0.01s check if the text area have htmx-request class, if yes, add the class is-loading
|
|
setInterval(function () {
|
|
if (textareaControl === null) {
|
|
return;
|
|
}
|
|
if (textareaControl.classList.contains('htmx-request')) {
|
|
textareaControl.classList.add('is-loading');
|
|
} else {
|
|
textareaControl.classList.remove('is-loading');
|
|
}
|
|
}, 10);
|
|
|
|
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;";
|
|
}
|
|
} 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 = "";
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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');
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].style.opacity = 0.2;
|
|
}
|
|
});
|
|
|
|
document.getElementById('chat-input-textarea').addEventListener('blur', function () {
|
|
var buttons = document.getElementsByClassName('to-reduce-opacity');
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].style.opacity = 1;
|
|
}
|
|
});
|
|
|
|
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-"]');
|
|
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() {
|
|
// TODO: Add the message placeholder using WASM
|
|
messagesPlaceholderHTML = generatePlaceholder(textarea.value);
|
|
document.getElementById('chat-messages').insertAdjacentHTML('beforeend', messagesPlaceholderHTML);
|
|
|
|
setTimeout(function () {
|
|
textarea.value = '';
|
|
toggleSendButton();
|
|
}, 20);
|
|
}
|
|
|
|
function updateIcon(icon, ConversationAreaId) {
|
|
var selectedIcon = document.getElementById('selectedIcon-' + ConversationAreaId);
|
|
selectedIcon.src = icon;
|
|
}
|
|
|
|
function handleTextareaKeydown(event) {
|
|
if (event.metaKey && event.key === 'Enter' && event.target === textarea && textarea.value.trim() !== '' && document.getElementsByClassName('selected icon-llm').length !== 0) {
|
|
// Check if the cursor is in the textarea
|
|
// Trigger the same action as the send button
|
|
document.getElementById('chat-input-send-btn').click();
|
|
}
|
|
}
|
|
</script>
|