86 lines
3.9 KiB
HTML
86 lines
3.9 KiB
HTML
<div class="chat-container mt-5">
|
|
<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">
|
|
<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 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 settle:200ms" 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>
|
|
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() {
|
|
const sendButton = document.getElementById('chat-input-send-btn');
|
|
const selectedLLMIds = JSON.parse(getSelectedModelsIDs());
|
|
sendButton.disabled = textarea.value.trim() === '' || selectedLLMIds.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') {
|
|
// Check if the cursor is in the textarea
|
|
if (event.target === textarea) {
|
|
// Trigger the same action as the send button
|
|
document.getElementById('chat-input-send-btn').click();
|
|
}
|
|
}
|
|
}
|
|
</script> |