Jul 9 - Chat - fix chat bubbles size
This commit is contained in:
@@ -1,16 +1,27 @@
|
|||||||
{# Read-only chat transcript. Expects `messages` (list of SupportChatMessage). #}
|
{# Read-only chat transcript. Expects `messages` (list of SupportChatMessage). #}
|
||||||
<style>
|
<style>
|
||||||
.cbubble { max-width:80%; padding:.6rem .9rem; border-radius:1rem; font-size:.9rem;
|
.ctranscript { background:#f8f9fa; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
|
||||||
line-height:1.5; white-space:pre-wrap; word-break:break-word; }
|
.cbubble-row { display:flex; align-items:flex-start; }
|
||||||
.cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; }
|
.cbubble {
|
||||||
.cbubble-ai { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; }
|
max-width:72%;
|
||||||
|
width:fit-content;
|
||||||
|
padding:.45rem .7rem;
|
||||||
|
border-radius:.9rem;
|
||||||
|
font-size:.85rem;
|
||||||
|
line-height:1.45;
|
||||||
|
white-space:pre-wrap;
|
||||||
|
word-break:break-word;
|
||||||
|
}
|
||||||
|
.cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.2rem; }
|
||||||
|
.cbubble-ai { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.2rem; }
|
||||||
|
.cbubble-meta { font-size:.66rem; opacity:.55; margin-top:.2rem; }
|
||||||
</style>
|
</style>
|
||||||
<div class="p-3" style="background:#f8f9fa;">
|
<div class="ctranscript">
|
||||||
{% for m in messages %}
|
{% for m in messages %}
|
||||||
<div class="d-flex mb-2 {{ 'justify-content-end' if m.role == 'user' else 'justify-content-start' }}">
|
<div class="cbubble-row {{ 'justify-content-end' if m.role == 'user' else 'justify-content-start' }}">
|
||||||
<div class="cbubble {{ 'cbubble-user' if m.role == 'user' else 'cbubble-ai' }}">
|
<div class="cbubble {{ 'cbubble-user' if m.role == 'user' else 'cbubble-ai' }}">
|
||||||
{{ m.content }}
|
{{ m.content }}
|
||||||
<div class="mt-1" style="font-size:.7rem;opacity:.6;">
|
<div class="cbubble-meta">
|
||||||
{{ 'You' if m.role == 'user' else 'JQC Assistant' }} · {{ m.created_at.strftime('%b %d, %I:%M %p') }}
|
{{ 'You' if m.role == 'user' else 'JQC Assistant' }} · {{ m.created_at.strftime('%b %d, %I:%M %p') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user