QOL update
This commit is contained in:
+24
-3
@@ -4,12 +4,20 @@
|
||||
<div class="chat-input-container mb-5">
|
||||
<div class="textarea-wrapper">
|
||||
<textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea"
|
||||
placeholder="Type your message here..." name="message" oninput="toggleSendButton(this)"></textarea>
|
||||
placeholder="Type your message here..." name="message" oninput="toggleSendButton(this)"
|
||||
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="/loadKeys" 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="/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"
|
||||
onclick="clearTextArea()" id="clear-button" hx-post="/clearChat" hx-swap="outerHTML"
|
||||
hx-target="#chat-container">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-broom"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button disabled type="submit" class="send-button button is-primary is-small"
|
||||
hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
|
||||
id="chat-input-send-btn" class="chat-input" hx-include="[name='message'], [name^='model-check-']"
|
||||
@@ -24,6 +32,9 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const textarea = document.querySelector('.textarea');
|
||||
textarea.addEventListener('keydown', handleTextareaKeydown);
|
||||
|
||||
function toggleSendButton(textarea) {
|
||||
var sendButton = document.getElementById('chat-input-send-btn');
|
||||
sendButton.disabled = textarea.value.trim() === '';
|
||||
@@ -31,8 +42,18 @@
|
||||
|
||||
function clearTextArea() {
|
||||
setTimeout(function () {
|
||||
document.querySelector('.textarea').value = '';
|
||||
toggleSendButton(document.querySelector('.textarea'));
|
||||
textarea.value = '';
|
||||
toggleSendButton(textarea);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -8,9 +8,15 @@
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if IsPlaceholder %}
|
||||
<figure class="image is-48x48" style="flex-shrink: 0;">
|
||||
<img src="icons/bouvai2.png" alt="User Image">
|
||||
</figure>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="column" id="content-column">
|
||||
{% if not IsPlaceholder %}
|
||||
<div class="is-flex is-align-items-start">
|
||||
<div class="message-content" id="content-{{ ConversationAreaId }}">
|
||||
{% for message in Messages %}
|
||||
@@ -50,7 +56,7 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if IsPlaceholder %}
|
||||
{% elif IsPlaceholder %}
|
||||
<hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
|
||||
hx-target="#chat-container">
|
||||
</hx>
|
||||
|
||||
@@ -22,7 +22,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-justify-content mt-2">
|
||||
<button id="redo-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
|
||||
<button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}" hx-swap="outerHTML"
|
||||
hx-target="#chat-container" class="button is-small is-danger message-button is-outlined mr-5">
|
||||
<span class="icon">
|
||||
<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"
|
||||
hx-post="/redoMessage?id={{ ID }}" hx-swap="innerHTML settle:200ms" hx-target="next .message-bot"
|
||||
hx-include="[name^='model-check-']">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -33,12 +41,6 @@
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}" hx-swap="outerHTML"
|
||||
hx-target="#chat-container" class="button is-small is-danger message-button is-outlined mr-2">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<a class="button is-small is-info is-outlined mb-1" href="/signout">
|
||||
Log out
|
||||
</a>
|
||||
<a class="button is-small is-info is-outlined" href="https://artificialanalysis.ai/models"
|
||||
<a class="button is-small is-primary is-outlined mb-1" href="https://artificialanalysis.ai/models"
|
||||
target="_blank">
|
||||
Compare models
|
||||
</a>
|
||||
<a class="button is-small is-primary is-outlined mb-1" href="/signout">
|
||||
Log out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user