Changed HTML to use djlint
This commit is contained in:
+108
-98
@@ -1,114 +1,124 @@
|
||||
<div class="message-bot mt-3" id="msg-{{ ConversationAreaId }}">
|
||||
<div class="columns is-mobile">
|
||||
{% if not DontShowName %}
|
||||
<div class="column is-narrow" id="icon-column">
|
||||
<!-- Left column with the icon -->
|
||||
{% if IsPlaceholder %}
|
||||
<div class="columns is-mobile">
|
||||
{% if not DontShowName %}
|
||||
<div class="column is-narrow" id="icon-column">
|
||||
<!-- Left column with the icon -->
|
||||
{% if IsPlaceholder %}
|
||||
|
||||
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;"
|
||||
sse-swap="swapIcon-{{ ConversationAreaId }}">
|
||||
<img src="icons/bouvai2.png" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
|
||||
</figure>
|
||||
<figure class="image is-48x48 message-icon"
|
||||
style="flex-shrink: 0"
|
||||
sse-swap="swapIcon-{{ ConversationAreaId }}">
|
||||
<img src="icons/bouvai2.png"
|
||||
alt="User Image"
|
||||
id="selectedIcon-{{ ConversationAreaId }}">
|
||||
</figure>
|
||||
|
||||
{% else %}
|
||||
{% else %}
|
||||
|
||||
{% for message in Messages %}
|
||||
{% if not message.Hidden %}
|
||||
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
||||
<img src="{{ message.Icon }}"
|
||||
alt="User Image"
|
||||
id="selectedIcon-{{ ConversationAreaId }}">
|
||||
</figure>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="column" id="content-column" style="width: 100px;">
|
||||
{% if not IsPlaceholder %}
|
||||
<div class="{% if not notFlex %} is-flex {% endif %} is-align-items-start">
|
||||
<div class="message-content"
|
||||
style="width: 100%;
|
||||
overflow-y: hidden"
|
||||
id="content-{{ ConversationAreaId }}">
|
||||
{% for message in Messages %}
|
||||
{% if not message.Hidden %}
|
||||
{% if not DontShowName %}
|
||||
<div class="message-header">
|
||||
<p>
|
||||
<strong>{{ message.Name }}</strong> <small>{{ message.ModelID }}</small>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="message-body">
|
||||
<div class="content" style="overflow-x: auto; width: 100%;">{{ message.Content | safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-justify-content mt-2">
|
||||
{% if not NotClickable %}
|
||||
<button class="button is-small is-primary message-button is-outlined mr-5"
|
||||
onclick="copyToClipboard(this)">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{% for message in Messages %}
|
||||
{% if not message.Hidden %}
|
||||
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
||||
<img src="{{ message.Icon }}" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
|
||||
</figure>
|
||||
{% endif %}
|
||||
<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 }}')"
|
||||
title="{{ message.Name }}">
|
||||
<span class="icon is-small">
|
||||
<img src="{{ message.Icon }}"
|
||||
alt="{{ message.Name }}"
|
||||
style="max-height: 100%;
|
||||
max-width: 100%">
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="column" id="content-column" style="width: 100px;">
|
||||
{% if not IsPlaceholder %}
|
||||
<div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
|
||||
<div class="message-content" style="width: 100%; overflow-y: hidden;"
|
||||
id="content-{{ ConversationAreaId }}">
|
||||
{% for message in Messages %}
|
||||
{% if not message.Hidden %}
|
||||
{% if not DontShowName %}
|
||||
<div class="message-header">
|
||||
<p>
|
||||
<strong>{{ message.Name }}</strong> <small>{{ message.ModelID }}</small>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="message-body">
|
||||
<div class="content" style="overflow-x: auto; width: 100%;">
|
||||
{{ message.Content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elif IsPlaceholder %}
|
||||
<div class="is-flex is-align-items-start">
|
||||
<div class="message-content"
|
||||
id="content-{{ ConversationAreaId }}"
|
||||
sse-swap="swapContent-{{ ConversationAreaId }}">
|
||||
<hx hx-trigger="load" hx-get="/generateMultipleMessages" id="generate-multiple-messages"></hx>
|
||||
<div class='message-header'>
|
||||
<p>Waiting...</p>
|
||||
</div>
|
||||
<div class="is-flex is-justify-content mt-2">
|
||||
{% if not NotClickable %}
|
||||
<button class="button is-small is-primary message-button is-outlined mr-5"
|
||||
onclick="copyToClipboard(this)">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{% 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 }}')" title="{{ message.Name }}">
|
||||
<span class="icon is-small">
|
||||
<img src="{{ message.Icon }}" alt="{{ message.Name }}"
|
||||
style="max-height: 100%; max-width: 100%;">
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<br>
|
||||
<img src="/puff.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif IsPlaceholder %}
|
||||
<div class="is-flex is-align-items-start">
|
||||
<div class="message-content" id="content-{{ ConversationAreaId }}"
|
||||
sse-swap="swapContent-{{ ConversationAreaId }}">
|
||||
<hx hx-trigger="load" hx-get="/generateMultipleMessages" id="generate-multiple-messages"></hx>
|
||||
<div class='message-header'>
|
||||
<p>
|
||||
Waiting...
|
||||
</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<br>
|
||||
<img src="/puff.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-justify-content mt-2">
|
||||
<button class="button is-small is-primary message-button is-outlined mr-5"
|
||||
onclick="copyToClipboard(this)">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="is-flex is-justify-content mt-2">
|
||||
<button class="button is-small is-primary message-button is-outlined mr-5"
|
||||
onclick="copyToClipboard(this)">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{% for selectedLLM in SelectedLLMs %}
|
||||
<button disable class="button is-small is-primary message-button is-outlined mr-1"
|
||||
sse-swap="swapSelectionBtn-{{ selectedLLM.ID.String() }}" hx-swap="outerHTML"
|
||||
{% for selectedLLM in SelectedLLMs %}
|
||||
<button disable
|
||||
class="button is-small is-primary message-button is-outlined mr-1"
|
||||
sse-swap="swapSelectionBtn-{{ selectedLLM.ID.String() }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="this">
|
||||
<span class="icon is-small">
|
||||
<!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
|
||||
<span class="icon is-small">
|
||||
<!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
|
||||
style="max-height: 100%; max-width: 100%;"-->
|
||||
<img src="/puff.svg" />
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img src="/puff.svg" />
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user