fix
This commit is contained in:
+2
-108
@@ -1,111 +1,5 @@
|
||||
<div class="chat-container mt-5" style="padding-bottom: 155px;" hx-indicator="#textarea-control">
|
||||
<hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
|
||||
|
||||
{% 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 {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
|
||||
class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
|
||||
hx-post="/clearChat" hx-swap="outerHTML" hx-target="#chat-container" title="Clear chat">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-broom"></i>
|
||||
</span>
|
||||
</button-->
|
||||
<!--button type="submit" class="button is-small" hx-get="/test" hx-swap="beforeend">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-vials"></i>
|
||||
</span>
|
||||
</button-->
|
||||
<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="clearTextArea()">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<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.classList.contains('htmx-request')) {
|
||||
textareaControl.classList.add('is-loading');
|
||||
} else {
|
||||
textareaControl.classList.remove('is-loading');
|
||||
}
|
||||
}, 10);
|
||||
|
||||
setInterval(function () {
|
||||
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');
|
||||
}
|
||||
} 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');
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
|
||||
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);
|
||||
|
||||
function toggleSendButton() {
|
||||
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0;
|
||||
}
|
||||
|
||||
function clearTextArea() {
|
||||
setTimeout(function () {
|
||||
textarea.value = '';
|
||||
toggleSendButton();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
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>
|
||||
<hx hx-get="/loadChatInput" hx-trigger="load once" hx-swap="outerHTML"></hx>
|
||||
</div>
|
||||
@@ -0,0 +1,109 @@
|
||||
{% 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 {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
|
||||
class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
|
||||
hx-post="/clearChat" hx-swap="outerHTML" hx-target="#chat-container" title="Clear chat">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-broom"></i>
|
||||
</span>
|
||||
</button-->
|
||||
<!--button type="submit" class="button is-small" hx-get="/test" hx-swap="beforeend">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-vials"></i>
|
||||
</span>
|
||||
</button-->
|
||||
<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="clearTextArea()">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% 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.classList.contains('htmx-request')) {
|
||||
textareaControl.classList.add('is-loading');
|
||||
} else {
|
||||
textareaControl.classList.remove('is-loading');
|
||||
}
|
||||
}, 10);
|
||||
|
||||
setInterval(function () {
|
||||
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 = ""
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
|
||||
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);
|
||||
|
||||
function toggleSendButton() {
|
||||
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0;
|
||||
}
|
||||
|
||||
function clearTextArea() {
|
||||
setTimeout(function () {
|
||||
textarea.value = '';
|
||||
toggleSendButton();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -62,7 +62,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons is-hidden" id="goose-field"
|
||||
title="GooseAI chat API soon to be available">
|
||||
title="GooseAI chat API will be available soon">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
|
||||
{%if not IsLogin %}disabled{% endif %} placeholder="Gooseai API key"
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<strong>Welcome to JADE, a chatbot that makes requests to various third-party APIs to provide information and
|
||||
services.</strong>
|
||||
|
||||
<p>No fancy stuff, easy to use, pay as you use, multi-models, work on low 3g...</p>
|
||||
|
||||
<p>To start using JADE, please login.</p>
|
||||
|
||||
<a class="button is-primary is-small" href="/signin">
|
||||
Log in
|
||||
</a>
|
||||
Reference in New Issue
Block a user