ref(scraps): Add MessageRow chat primitive#119709
Closed
priscilawebdev wants to merge 15 commits into
Closed
Conversation
…llStatusIcon) First step of extracting Seer Explorer's chat block components into reusable building blocks so Dashboards AI, Autofix, and other agent surfaces can share them instead of importing straight from seerExplorer. This adds the presentational, dependency-free primitives under @sentry/scraps/chat: - Spinner: small inline activity spinner (distinct from the full-width IndeterminateLoader) with a size prop and reduced-motion handling. - ChatMessageBubble: a single message bubble for the sender's own messages, presentation only (caller handles alignment). - ToolCallStatusIcon: status -> icon/spinner + tooltip for a group of tool calls, with default labels and an override. These carry no analytics, feature flags, markdown renderer, or seerExplorer utils/types; that behavior is injected by the composite layer in a follow-up. Each primitive ships an MDX story. The action-bar shell is intentionally left out of scraps since it composes from the existing RevealOnHover + ButtonBar. Co-Authored-By: Claude <noreply@anthropic.com>
Prefer the Container layout primitive over a hand-rolled styled div, per the design-system convention. Background, border, radius, padding, max-width, min-width, and white-space now come from Container props; only overflow-wrap and the text color token remain in a minimal css escape hatch since Container does not expose them. Co-Authored-By: Claude <noreply@anthropic.com>
Add a dedicated "Chat" story category so ChatMessageBubble, Spinner, and ToolCallStatusIcon group together instead of scattering across Display and Status, mirroring how MUI/Chakra give the chat kit its own section. Also strip the (Seer Explorer, Dashboards AI, Autofix, …) product enumeration from the primitives' docs and JSDoc. The primitives are product-agnostic and should not name the surfaces that consume them; the enumeration was also copy-pasted across files and would drift. Co-Authored-By: Claude <noreply@anthropic.com>
Stop exporting Spinner and drop its story. It stays as ToolCallStatusIcon's running-state helper, but is no longer a public primitive. The general small-spinner vs LoadingIndicator consolidation is a separate, already-designed effort (Loading States patterns doc); shipping a public Spinner here would front-run it and risk the exact "which one?" ambiguity we want that work to resolve. Co-Authored-By: Claude <noreply@anthropic.com>
…cator Drop the redundant "Chat" prefix (the components are already namespaced under @sentry/scraps/chat) and use an *Indicator suffix instead of *Icon, since the component renders a spinner or an icon depending on state. Mirrors MUI X Chat's naming. No behavior change; the ToolCallStatus type name is unchanged. Co-Authored-By: Claude <noreply@anthropic.com>
Pass variant directly to the status icons instead of wrapping them in Text. The warning icon now uses the icon system's brighter graphics.warning.vibrant token (which the Text path skipped in favor of the darker content.warning that design engineering flagged as too dark for icons). Also drops three Text wrappers and the now-unused import. Co-Authored-By: Claude <noreply@anthropic.com>
…ble story Co-Authored-By: Claude <noreply@anthropic.com>
The ToolCallStatus type has no consumers yet (stories use string literals), so knip flagged its re-export. Tag the entry-point exports @public—the repo's convention for intentional API surface—matching how other core components export their prop types. Co-Authored-By: Claude <noreply@anthropic.com>
Wire the new primitives into the code they were extracted from so they have real production consumers (previously story-only, which failed knip:prod under --production): - seerExplorer UserBlock renders UserBubble instead of a local styled div - seerExplorer tool-call rows render ToolCallIndicator instead of the local BlockStatusIndicator (identical tooltips/labels; warning icon now uses the icon system's brighter token) Also rename MessageBubble -> UserBubble: the component only carries the user's own-message styling, so the generic name over-promised. The now internal-only seerExplorer Spinner is de-exported. No behavior change. Co-Authored-By: Claude <noreply@anthropic.com>
Delete the duplicate BlockStatus type in seerExplorer; getBlockStatus and the tool-call rows now use the exported ToolCallStatus. That gives the type a real consumer, so the @public knip tags on the chat barrel are no longer needed and are removed. Also inline UserBubble's wrapStyles css block into the css prop. No behavior change. Co-Authored-By: Claude <noreply@anthropic.com>
github-actions
Bot
added
the
Scope: Frontend
Contributor
Story previewsPreview the stories changed in this PR on the Vercel deployment: Preview deployment: https://sentry-rg2odx1fg.sentry.dev |
…ssage-row # Conflicts: # static/app/components/core/chat/index.tsx # static/app/components/core/chat/spinner.tsx # static/app/components/core/chat/toolCallIndicator.mdx # static/app/components/core/chat/toolCallIndicator.tsx # static/app/views/seerExplorer/components/chat/shared.tsx # static/app/views/seerExplorer/components/chat/user.tsx
Member
Author
|
closing in favour of #120052 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
MessageRowto thecore/chatprimitives — the full-width row that aligns a single message turn (user on the right, agent on the left) with a consistent gutter. It's the placement counterpart toUserBubble.Adopts it in the Seer Explorer chat surface (
user.tsx,shared.tsx), replacing the hand-rolled alignmentFlex. Each consumer keeps its exact look via prop overrides, so there's no visual change.Targets
seer/chat-scraps-primitives-layer-a; rebase ontomasteronce that merges.