salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten message spacing and restyle reasoning blocks

Browse Source
This commit is contained in:
Shantur Rathore
2025-11-27 13:53:52 +00:00
parent c123714271
commit 18513939f7
3 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/components/message-stream-v2.tsx
View File

@@ -1006,9 +1006,10 @@ function ReasoningCard(props: ReasoningCardProps) {
<Show when={expanded()}> <Show when={expanded()}>
<div class="message-reasoning-expanded"> <div class="message-reasoning-expanded">
<div class="message-reasoning-divider" aria-hidden="true" />
<div class="message-reasoning-body"> <div class="message-reasoning-body">
<pre class="message-reasoning-text">{reasoningText() || ""}</pre> <div class="message-reasoning-output" role="region" aria-label="Reasoning details">
<pre class="message-reasoning-text">{reasoningText() || ""}</pre>
</div>
</div> </div>
</div> </div>
</Show> </Show>

32
packages/ui/src/styles/messaging/message-base.css
View File

@@ -11,20 +11,20 @@
} }
.message-item-base:not(.assistant-message) { .message-item-base:not(.assistant-message) {
margin-top: 0.25rem; margin-top: 0;
margin-bottom: 0.25rem; margin-bottom: 0;
} }
.message-step-start { .message-step-start {
background-color: var(--message-assistant-bg); background-color: var(--message-assistant-bg);
border-left: 4px solid var(--message-assistant-border); border-left: 4px solid var(--message-assistant-border);
margin-top: 0.125rem; margin-top: 0;
} }
.message-step-finish { .message-step-finish {
background-color: var(--message-assistant-bg); background-color: var(--message-assistant-bg);
border-left: 4px solid var(--message-assistant-border); border-left: 4px solid var(--message-assistant-border);
margin-bottom: 0.125rem; margin: 0;
} }
.message-step-finish-flush { .message-step-finish-flush {
@@ -276,21 +276,29 @@
gap: 0.35rem; gap: 0.35rem;
} }
.message-reasoning-divider { .message-reasoning-body {
width: 100%; padding: 0;
height: 1px; background-color: var(--surface-code);
background-color: var(--border-base); margin: 0.75rem;
} }
.message-reasoning-body { .message-reasoning-output {
padding: 0.25rem 0.6rem 0.4rem; @apply flex flex-col;
margin: 0;
padding: 0.75rem;
max-height: 30rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-base) transparent;
scrollbar-gutter: stable both-edges;
background-color: var(--surface-code);
} }
.message-reasoning-text { .message-reasoning-text {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
line-height: var(--line-height-tight); line-height: var(--line-height-tight);
color: var(--text-muted); color: var(--text-primary);
white-space: pre-wrap; white-space: pre-wrap;
margin: 0; margin: 0;
} }

4
packages/ui/src/styles/messaging/message-stream.css
View File

@@ -65,7 +65,7 @@
} }
.message-stream { .message-stream {
@apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1; @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-0.5;
background-color: var(--surface-base); background-color: var(--surface-base);
color: inherit; color: inherit;
} }
@@ -73,7 +73,7 @@
.message-stream-block { .message-stream-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.125rem; gap: 0.0625rem;
} }
.message-scroll-button-wrapper { .message-scroll-button-wrapper {