Skip to content

Commit f140b28

Browse files
klieretklieret
committed
More compact messages
1 parent b55cd13 commit f140b28

3 files changed

Lines changed: 44 additions & 45 deletions

File tree

‎codeclash/viewer/static/css/style.css‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -262,14 +262,15 @@ body {
262262
.messages-container {
263263
display: flex;
264264
flex-direction: column;
265-
gap: 0.75rem;
265+
gap: 0.5rem;
266266
}
267267

268268
.message-block {
269269
border: 1px solid var(--border-color);
270270
border-radius: 0.5rem;
271-
overflow: hidden;
272271
background-color: var(--bg-primary);
272+
position: relative;
273+
padding: 0.5rem;
273274
}
274275

275276
.message-block.system {
@@ -284,34 +285,35 @@ body {
284285
border-left: 4px solid var(--success-color);
285286
}
286287

287-
.message-header {
288-
padding: 0.75rem 1rem;
289-
background-color: var(--bg-secondary);
290-
}
291-
292-
.message-role-inline {
288+
.message-role-badge {
289+
position: absolute;
290+
top: 0.25rem;
291+
right: 0.25rem;
293292
font-weight: 600;
294-
font-size: 0.875rem;
295-
color: var(--text-primary);
296-
text-transform: capitalize;
297-
display: inline-block;
298-
margin-bottom: 0.5rem;
293+
font-size: 0.75rem;
294+
color: var(--text-secondary);
295+
text-transform: uppercase;
296+
background-color: var(--bg-secondary);
297+
padding: 0.125rem 0.375rem;
298+
border-radius: 0.25rem;
299+
border: 1px solid var(--border-color);
300+
z-index: 1;
299301
}
300302

301-
.message-preview {
302-
margin-top: 0.5rem;
303+
.message-content {
304+
margin-top: 0.125rem;
303305
}
304306

305307
.message-preview-short,
306308
.message-content-full,
307309
.message-content-expanded {
308-
background-color: var(--bg-primary);
309-
border-radius: 0.375rem;
310-
padding: 0.75rem;
310+
background-color: transparent;
311+
padding: 0.25rem 0;
311312
}
312313

313314
.message-preview-short {
314-
border: 1px solid var(--border-color);
315+
background-color: transparent;
316+
padding: 0.25rem 0;
315317
}
316318

317319
.clickable-message {
@@ -321,9 +323,7 @@ body {
321323
}
322324

323325
.clickable-message:hover {
324-
background-color: var(--bg-tertiary);
325-
transform: translateY(-1px);
326-
box-shadow: var(--shadow);
326+
background-color: var(--bg-secondary);
327327
}
328328

329329
.clickable-message:active {
@@ -335,11 +335,12 @@ body {
335335
font-size: 0.75rem;
336336
color: var(--text-secondary);
337337
text-align: center;
338-
padding: 0.5rem;
339-
margin-top: 0.5rem;
338+
padding: 0.25rem;
339+
margin-top: 0.25rem;
340340
border-top: 1px solid var(--border-color);
341341
background-color: var(--bg-secondary);
342342
font-weight: 500;
343+
border-radius: 0 0 0.25rem 0.25rem;
343344
}
344345

345346
.clickable-message:hover .expand-indicator,

‎codeclash/viewer/static/js/app.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -275,10 +275,10 @@ function initializePerformanceMonitoring() {
275275

276276
// Message expand/collapse functionality
277277
function toggleMessageExpand(clickedElement) {
278-
const messageHeader = clickedElement.closest('.message-header');
279-
const previewShort = messageHeader.querySelector('.message-preview-short');
280-
const contentFull = messageHeader.querySelector('.message-content-full');
281-
const contentExpanded = messageHeader.querySelector('.message-content-expanded');
278+
const messageContent = clickedElement.closest('.message-content');
279+
const previewShort = messageContent.querySelector('.message-preview-short');
280+
const contentFull = messageContent.querySelector('.message-content-full');
281+
const contentExpanded = messageContent.querySelector('.message-content-expanded');
282282

283283
if (clickedElement.classList.contains('message-preview-short')) {
284284
// Expanding - hide preview, show full content
@@ -288,7 +288,7 @@ function toggleMessageExpand(clickedElement) {
288288

289289
// Smooth scroll to keep the content in view
290290
setTimeout(() => {
291-
messageHeader.scrollIntoView({
291+
messageContent.scrollIntoView({
292292
behavior: 'smooth',
293293
block: 'nearest'
294294
});
@@ -299,9 +299,9 @@ function toggleMessageExpand(clickedElement) {
299299
if (contentExpanded) contentExpanded.style.display = 'none';
300300
if (previewShort) previewShort.style.display = 'block';
301301

302-
// Smooth scroll to keep the header in view
302+
// Smooth scroll to keep the content in view
303303
setTimeout(() => {
304-
messageHeader.scrollIntoView({
304+
messageContent.scrollIntoView({
305305
behavior: 'smooth',
306306
block: 'nearest'
307307
});

‎codeclash/viewer/templates/trajectory.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,13 @@
2121
<div class="messages-container">
2222
{% for message in trajectory.messages %}
2323
<div class="message-block {{ message.role }}">
24-
<div class="message-header">
25-
<span class="message-role-inline">{{ message.role.title() }} #{{ loop.index }}</span>
26-
<div class="message-preview">
27-
{% if message.content is string %}
28-
{% set content_lines = message.content.split('\n') %}
29-
{% if content_lines|length <= 5 %}
30-
<!-- Show full content if 5 lines or less -->
31-
<div class="message-content-full">
24+
<span class="message-role-badge">{{ message.role.title() }} #{{ loop.index }}</span>
25+
<div class="message-content">
26+
{% if message.content is string %}
27+
{% set content_lines = message.content.split('\n') %}
28+
{% if content_lines|length <= 5 %}
29+
<!-- Show full content if 5 lines or less -->
30+
<div class="message-content-full">
3231
{% if message.role == 'assistant' and '```' in message.content %}
3332
<!-- Special handling for assistant messages with code blocks -->
3433
{% set parts = message.content.split('```') %}
@@ -51,16 +50,16 @@
5150
{% endif %}
5251
</div>
5352
{% else %}
54-
<!-- Show preview with expand button -->
55-
<div class="message-preview-short clickable-message" onclick="toggleMessageExpand(this)" title="Click to expand ({{ content_lines|length - 5 }} more lines)">
53+
<!-- Show preview with expand button -->
54+
<div class="message-preview-short clickable-message" onclick="toggleMessageExpand(this)" title="Click to expand ({{ content_lines|length - 5 }} more lines)">
5655
<div class="message-text">
5756
<pre>{{ content_lines[:5] | join('\n') }}</pre>
5857
</div>
5958
<div class="expand-indicator">
6059
▼ {{ content_lines|length - 5 }} more lines
6160
</div>
62-
</div>
63-
<div class="message-content-full clickable-message" style="display: none;" onclick="toggleMessageExpand(this)" title="Click to collapse">
61+
</div>
62+
<div class="message-content-full clickable-message" style="display: none;" onclick="toggleMessageExpand(this)" title="Click to collapse">
6463
{% if message.role == 'assistant' and '```' in message.content %}
6564
<!-- Special handling for assistant messages with code blocks -->
6665
{% set parts = message.content.split('```') %}
@@ -129,8 +128,7 @@
129128
<pre>{{ message.content | tojson(indent=2) }}</pre>
130129
</div>
131130
</div>
132-
{% endif %}
133-
</div>
131+
{% endif %}
134132
</div>
135133
</div>
136134
{% endfor %}

0 commit comments

Comments
 (0)