ref(scraps): Add chat primitives (MessageRow, AssistantMessage, MessageActions)#120052
Conversation
github-actions
Bot
added
the
Scope: Frontend
Story previewsPreview the stories changed in this PR on the Vercel deployment:
Preview deployment: https://sentry-q3dqpayjb.sentry.dev |
Add presentation-only chat primitives to @sentry/scraps/chat (MessageRow, UserBubble, AssistantMessage, AssistantActions, ToolCallIndicator, Spinner) and adopt them in Seer Explorer. MessageRow positions a turn by role via a from prop; AssistantActions renders thumbs up/down and a copy button driven by flat copyText/onCopy. App-specific logic (markdown, analytics, feedback persistence) stays in the view. Each primitive ships with a story.
f0bc7fc to
63d50fe
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
AssistantMessage also applied padding=xl, so wrapping it in MessageRow double-padded the turn — which is why Seer Explorer omitted the row around assistant responses. Drop padding from AssistantMessage (like UserBubble, it now styles only its content) and wrap it in MessageRow in the view, so user and assistant turns share one consistent gutter.
As a flex item inside MessageRow, AssistantMessage shrink-wrapped to its content instead of filling the row, so min-width:100% content (markdown tables, code blocks) measured against the shrunk width. Add width=100% so it fills the turn as documented.
|
bugbot run |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 1de4c35. Configure here.
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Really nice abstractions and solid refactor, thanks for jumping on this! One small comment on aria-label but not blocking
| const isPositive = feedback === 'positive'; | ||
| return ( | ||
| <Button | ||
| aria-label={isPositive ? t('Feedback Thumbs Up') : t('Feedback Thumbs Down')} |
There was a problem hiding this comment.
Would prefer if we either match the tooltipProps.title text or drop the explicit aria-label and rely on the aria-labelledby (does tooltip do this automatically, I can't recall)
There was a problem hiding this comment.
the tooltip auto-wires a description, not a label, so it can't serve as the button's name.
sentry/static/app/utils/useHoverOverlay.tsx
Line 540 in faa6b86
The feedback and copy buttons in the shared AssistantActions primitive
had aria-labels that disagreed with their visible tooltips, and the copy
button carried Seer Explorer-specific wording ("Copy block content")
that is misleading on other chat surfaces.
Derive each feedback button's aria-label from the same string as its
tooltip title, and match the copy button's aria-label to its "Copy to
clipboard" tooltip. Update the seerExplorer chat specs that queried by
the old accessible names.
3123cbb to
8e9555c
Compare
priscilawebdev
removed
the
Scope: Backend
|
bugbot run |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 9f645ad. Configure here.
| aria-label={label} | ||
| icon={<IconThumb direction={isPositive ? 'up' : 'down'} />} | ||
| disabled={disabled} | ||
| tooltipProps={{title: label}} |
There was a problem hiding this comment.
Duplicate disabled feedback labels
Low Severity
When feedbackDisabled is set, both thumb buttons share the same aria-label and tooltip text (Feedback submitted). Previously each control kept a distinct accessible name while only the tooltip switched to the submitted state, so assistive tech could still tell the two buttons apart after a vote.
Reviewed by Cursor Bugbot for commit 9f645ad. Configure here.
3 participants
Adds a few small chat primitives to
@sentry/scraps/chatand uses them in Seer Explorer, so agent chat UIs share the same building blocks.The primitives are
MessageRow,AssistantMessageandAssistantActions(thumbs up/down plus copy).