jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-30 05:51:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align focus-mode chat bubble surfaces

Browse Source 
Co-authored-by: Rizz <302abe414ca6e3134763d2539bfcf145aea2a63fe5f8455204ed602fd40cf381@buzz.block.builderlab.xyz>

Signed-off-by: Rizz <302abe414ca6e3134763d2539bfcf145aea2a63fe5f8455204ed602fd40cf381@buzz.block.builderlab.xyz>
This commit is contained in:
Rizz
2026-08-25 15:49:31 -07:00
parent 62b9603bac
commit 07344db5d8
3 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx
View File

@@ -138,7 +138,7 @@ export function CompactMessageSummary({
<div className="flex min-w-0 flex-1 flex-col items-start gap-1">
<div
className={cn(
"w-full min-w-0 rounded-2xl border px-3 py-2 shadow-sm",
"w-full min-w-0 rounded-2xl border px-3 py-2",
isCompactPreview
? "text-xs leading-4"
: "text-sm leading-relaxed",

13
desktop/src/features/agents/ui/AgentSessionTranscriptList.conversation.test.mjs
View File

@@ -60,10 +60,10 @@ test("conversation renders the prompt as a filled right-aligned bubble with an a
'[data-testid="transcript-user-message"]',
);
assert.match(row.className, /justify-end/);
// berd's user-turn recipe: soft tint, no border, `px-4 py-2`, and a 12px
// radius (berd's `rounded-sm` on its own scale = Buzz's `rounded-xl`).
const bubble = row.querySelector(".rounded-xl");
assert.ok(bubble, "the prompt bubble should take berd's 12px radius");
// Keep Buzz's native 16px chat-bubble radius while adopting the focus view's
// soft tint, borderless surface, and `px-4 py-2` spacing.
const bubble = row.querySelector(".rounded-2xl");
assert.ok(bubble, "the prompt should match Buzz's chat-bubble radius");
assert.match(bubble.className, /bg-muted\/60/);
assert.match(bubble.className, /px-4/);
assert.match(bubble.className, /py-2(?!\.)/);
@@ -72,11 +72,6 @@ test("conversation renders the prompt as a filled right-aligned bubble with an a
/border-0/,
"berd never draws a border on the user turn",
);
assert.doesNotMatch(
bubble.className,
/rounded-2xl/,
"the old 16px pill radius should be gone",
);
// Focus mode shows the whole prompt rather than clamping it.
assert.doesNotMatch(bubble.className, /max-h-36/);
});

9
desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx
View File

@@ -179,14 +179,13 @@ export function UserMessageBubble({
"group/bubble cursor-pointer transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
isCompactPreview && "p-2 text-xs leading-4",
// berd's user-turn recipe (MessageBubble.tsx:990): a soft tint, no
// border at all, `px-4 py-2`, and a tighter radius than a chat
// "pill". berd's `rounded-sm` is 12px on its own scale
// (globals.css `--radius-sm: 12px`), NOT Tailwind's stock 2px —
// Buzz's `rounded-xl` is the exact 12px equivalent here.
// border at all and `px-4 py-2`. Keep Buzz's native chat-bubble
// `rounded-2xl` radius so prompts and sent-message bubbles share the
// same silhouette across the channel and focus views.
// `leading-normal` overrides the `leading-relaxed` base, as berd
// does, so the prompt sits tighter than the agent's prose.
isConversation &&
"rounded-xl border-0 bg-muted/60 px-4 py-2 leading-normal",
"rounded-2xl border-0 bg-muted/60 px-4 py-2 leading-normal",
bubbleClassName,
)}
ref={bubbleRef}