This commit is contained in:
Adrien Bouvais 2024-05-31 12:15:28 +02:00
parent bf361851aa
commit 183244e07b
4 changed files with 50 additions and 18 deletions

19
Chat.go
View File

@ -808,7 +808,24 @@ func DeleteConversationHandler(c *fiber.Ctx) error {
panic(err) panic(err)
} }
return c.SendString(GenerateConversationPopoverHTML(true)) // Select the default conversation
err = edgeClient.Execute(edgeCtx, `
UPDATE Conversation
FILTER .user = global currentUser AND .name = 'Default'
SET {
selected := true
};
`)
if err != nil {
fmt.Println("Error selecting default conversation")
panic(err)
}
reloadChatTriggerHTML := `
<hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML" hx-target="#chat-container" style="display: none;"></hx>
`
return c.SendString(GenerateConversationPopoverHTML(true) + reloadChatTriggerHTML)
} }
func SelectConversationHandler(c *fiber.Ctx) error { func SelectConversationHandler(c *fiber.Ctx) error {

View File

@ -1,12 +1,14 @@
<div class="chat-container mt-5" style="padding-bottom: 155px;"> <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> <hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
{% if IsSubscribed or not IsLimiteReached %} {% if IsSubscribed or not IsLimiteReached %}
<div class="chat-input-container mb-5"> <div class="chat-input-container mb-5">
<div class="textarea-wrapper"> <div class="textarea-wrapper">
<textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size" <div class="control" id="textarea-control">
placeholder="Type your message here..." name="message" oninput="toggleSendButton()" <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
id="chat-input-textarea"></textarea> placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
id="chat-input-textarea"></textarea>
</div>
<div class="button-group"> <div class="button-group">
<hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx> <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="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
@ -39,6 +41,17 @@
</div> </div>
<script> <script>
var textareaControl = document.getElementById('textarea-control');
// Every 0.1s 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);
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');
for (var i = 0; i < buttons.length; i++) { for (var i = 0; i < buttons.length; i++) {

View File

@ -14,7 +14,7 @@
{% for Conversation in Conversations %} {% for Conversation in Conversations %}
<div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %} selected {% endif %}" <div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %} selected {% endif %}"
data-id="{{ Conversation.ID.String() }}" style="cursor: pointer;" data-id="{{ Conversation.ID.String() }}" style="cursor: pointer;"
onclick="toggleConversationSelection(this)" onclick="toggleConversationSelection(this, '{{ Conversation.Name }}')"
hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}" hx-swap="outerHTML" hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}" hx-swap="outerHTML"
hx-target="#chat-container"> hx-target="#chat-container">
<span>{{ Conversation.Name }}</span> <span>{{ Conversation.Name }}</span>
@ -61,22 +61,18 @@
return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id'); return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id');
} }
function toggleConversationSelection(element) { function toggleConversationSelection(element, name) {
const elements = Array.from(document.getElementsByClassName('icon-conv')); const elements = Array.from(document.getElementsByClassName('icon-conv'));
// If the conversation is already selected, keep it // If the conversation is already selected, keep it
if (element.classList.contains('selected')) { if (element.classList.contains('unselected')) {
// Do nothing
return;
} else if (element.classList.contains('unselected')) {
for (let i = 0; i < elements.length; i++) { for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected'); elements[i].classList.remove('selected');
elements[i].classList.add('unselected'); elements[i].classList.add('unselected');
} }
element.classList.remove('unselected'); element.classList.remove('unselected');
element.classList.add('selected'); element.classList.add('selected');
return; } else if (!element.classList.contains('selected')) {
} else {
// Otherwise, select it // Otherwise, select it
for (let i = 0; i < elements.length; i++) { for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected'); elements[i].classList.remove('selected');
@ -86,8 +82,7 @@
element.classList.add('selected'); element.classList.add('selected');
} }
// If the text inside the selected button is Default if (name === 'Default') {
if (element.textContent === 'Default') {
document.getElementById('delete-conversation-button').disabled = true; document.getElementById('delete-conversation-button').disabled = true;
} else { } else {
document.getElementById('delete-conversation-button').disabled = false; document.getElementById('delete-conversation-button').disabled = false;

View File

@ -50,9 +50,12 @@
{% for modelInfo in ModelInfos %} {% for modelInfo in ModelInfos %}
<option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option> <option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option>
{% endfor %} {% endfor %}
{% if IsSub %}<option value="custom">Inference Endpoints</option> {% endif %} <option value="{% if IsSub %}custom{% else %}none{% endif %}">Inference Endpoints</option>
</select> </select>
</div> </div>
<p class="is-hidden" style="color: red;" id="endpoint-error"></p>
<small>You can only use custom endpoint if you are a subscriber</small>
</p>
<input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input" <input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
placeholder="Model id" autocomplete="off"> placeholder="Model id" autocomplete="off">
<input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input" <input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input"
@ -103,8 +106,6 @@
} }
}); });
document.getElementById('model-name-input').addEventListener('input', function () { document.getElementById('model-name-input').addEventListener('input', function () {
document.getElementById('confirm-create-model-button').disabled = this.value === ''; document.getElementById('confirm-create-model-button').disabled = this.value === '';
}) })
@ -120,6 +121,12 @@
document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint); document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint); document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint); document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
if (this.value === 'none') {
document.getElementById('endpoint-error').classList.remove('is-hidden');
} else {
document.getElementById('endpoint-error').classList.add('is-hidden');
}
}); });
document.getElementById('temperature-slider').addEventListener('input', function () { document.getElementById('temperature-slider').addEventListener('input', function () {