nngo/LT_Janitorial_Quality_Control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jul 9 - Chat - fix chat bubbles size

Browse Source
This commit is contained in:
nngo
2026-07-09 13:48:21 -04:00
parent 5cf85c564b
commit e23142b270
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/support/_transcript.html
+18 -7
View File
@@ -1,16 +1,27 @@
{# Read-only chat transcript. Expects `messages` (list of SupportChatMessage). #}
<style>
.cbubble { max-width:80%; padding:.6rem .9rem; border-radius:1rem; font-size:.9rem;
line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; }
.cbubble-ai { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; }
.ctranscript { background:#f8f9fa; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.cbubble-row { display:flex; align-items:flex-start; }
.cbubble {
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>
<div class="p-3" style="background:#f8f9fa;">
<div class="ctranscript">
{% 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' }}">
{{ 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') }}
</div>
</div>