adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved message model selection to botton

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-11 15:32:57 +02:00
parent dd5170e039
commit b30bc71da4
6 changed files with 54 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/icons/anthropic-outline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
static/icons/github.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
static/icons/mistral.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/icons/openai-outline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

101
views/partials/message-bot.html
View File

@ -1,35 +1,20 @@
<div class="message-bot mt-3">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<div class='rows'>
{% for message in Messages %}
<div class='row is-full mt-1'>
<a {% if not NotClickable %} href="#" hx-get="/messageContent?id={{ message.Id }}"
class="is-clickable" onclick="toggleGrayscale(this)"
hx-target="#content-{{ ConversationAreaId }}" {% endif %}>
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/{{ message.Icon }}.png" alt="User Image" {% if message.Hidden %}
style="filter: grayscale(100%);" {% endif %} title="{{ message.Name }}">
</figure>
</a>
</div>
{% endfor %}
{% if IsPlaceholder %}
<div class='row is-full mt-1'>
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
{% endif %}
</div>
{% for message in Messages %}
{% if not message.Hidden %}
<figure class="image is-48x48" style="flex-shrink: 0;">
<img id="selectedIcon-{{ ConversationAreaId }}" src="icons/{{ message.Icon }}.png" alt="User Image">
</figure>
{% endif %}
{% endfor %}
</div>
<div class="column" id="content-column">
<div class="is-flex">
{% for message in Messages %}
{% if not message.Hidden %}
<!-- Name of the model as title -->
<div class="is-flex is-align-items-start">
<div class="message-content" id="content-{{ ConversationAreaId }}">
{% for message in Messages %}
{% if not message.Hidden %}
<div class="message-header">
<p>
{{ message.Name }}
@ -40,42 +25,52 @@
{{ message.Content | safe }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<div class="is-flex is-justify-content mt-2">
<button class="button is-small is-primary message-button is-outlined mr-1">
<span class="icon">
<i class="fa-solid fa-copy"></i>
</span>
</button>
<button class="button is-small is-primary message-button is-outlined mr-5">
<span class="icon">
<i class="fa-solid fa-copy"></i>
</span>
</button>
{% if not NotClickable %}
{% for message in Messages %}
<button class="button is-small is-primary message-button is-outlined mr-1"
hx-get="/messageContent?id={{ message.Id }}" hx-target="#content-{{ ConversationAreaId }}"
onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')">
<span class="icon is-small">
<img src="icons/{{ message.Icon }}.png" alt="{{ message.Name }}"
style="max-height: 100%; max-width: 100%;">
</span>
</button>
{% endfor %}
{% if IsPlaceholder %}
<hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
hx-target="#chat-container">
</hx>
<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
<div class="message-body">
<div class="content">
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<script>
function toggleGrayscale(link) {
var imgElement = link.querySelector('img');
var allImages = link.closest('.rows').querySelectorAll('img');
var rowElement = link.closest('.row');
<style>
.message-button {
opacity: 0;
transition: opacity 0.3s ease;
}
if (imgElement.style.filter === 'grayscale(100%)') {
imgElement.style.filter = 'none';
allImages.forEach(function (img) {
if (img !== imgElement) {
img.style.filter = 'grayscale(100%)';
}
});
rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
}
.message-bot:hover .message-button {
opacity: 1;
}
</style>
<script>
function updateIcon(icon, ConversationAreaId) {
var selectedIcon = document.getElementById('selectedIcon-' + ConversationAreaId);
selectedIcon.src = 'icons/' + icon + '.png';
}
</script>

12
views/partials/message-user.html
View File

@ -7,7 +7,7 @@
</div>
<div class="column" id="content-column">
<div class="is-flex is-align-items-start" style="position: relative; padding-right: 30px;">
<div class="is-flex is-align-items-start">
<div class="message-content">
<div class="message-header">
<p>
@ -22,18 +22,18 @@
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<button id="redo-button-{{ ID }}" class="button is-small is-primary delete-button is-outlined mr-2">
<button id="redo-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
<span class="icon">
<i class="fa-solid fa-arrows-rotate"></i>
</span>
</button>
<button id="edit-button-{{ ID }}" class="button is-small is-primary delete-button is-outlined mr-2">
<button id="edit-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
<span class="icon">
<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 delete-button is-outlined mr-2">
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>
@ -44,12 +44,12 @@
</div>
<style>
.delete-button {
.message-button {
opacity: 0;
transition: opacity 0.3s ease;
}
.message-user:hover .delete-button {
.message-user:hover .message-button {
opacity: 1;
}
</style>