Skip to content

feat(scraps): Markdown component#115025

Merged
natemoo-re merged 39 commits into
masterfrom
nm/scraps/markdown
May 13, 2026
Merged

feat(scraps): Markdown component#115025
natemoo-re merged 39 commits into
masterfrom
nm/scraps/markdown

Conversation

@natemoo-re
Copy link
Copy Markdown
Member

@natemoo-re natemoo-re commented May 6, 2026

Introduces a new <Markdown /> primitive that extends our existing marked pipeline with a declarative interface that supports static text and optionally enables animations with variant="streaming".

The goal is to replace the imperative sentry/utils/marked uses throughout the app with this new primitive and upgrade agentic interactions to support streaming.

See Deploy Preview

Basic Usage

<Markdown raw={"# Hello world!"} />

<Markdown
  raw={"# Replace headings with bold text\n\nParagraphs stay the same"}
  components={{
    Heading: ({ children => <strong>{children}</strong>
  }}
/>

<Markdown variant="streaming" raw={statefulText} />
markdown-stream.mov

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 6, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

📊 Type Coverage Diff

Metric Before After Delta
Coverage 93.51% 93.51% ±0%
Typed 135,324 135,556 🟢 +232
Untyped 9,393 9,406 🔴 +13
🔍 13 new type safety issues introduced

any-typed symbols (6 new)

File Line Detail
static/app/components/core/markdown/token.tsx 134 TableComp (var)
static/app/components/core/markdown/token.tsx 135 Thead (var)
static/app/components/core/markdown/token.tsx 136 Tbody (var)
static/app/components/core/markdown/token.tsx 137 Tr (var)
static/app/components/core/markdown/token.tsx 138 Th (var)
static/app/components/core/markdown/token.tsx 139 Td (var)

Type assertions (as) (7 new)

File Line Detail
static/app/components/core/markdown/markdown.tsx 59 as MarkedTokentoken as MarkedToken
static/app/components/core/markdown/token.tsx 56 as MarkedTokentoken as MarkedToken
static/app/components/core/markdown/token.tsx 80 `as 1
static/app/components/core/markdown/useStreamingAnimation.ts 158 as Elementparent as Element
static/app/components/core/markdown/useStreamingAnimation.ts 257 as numberid as number
static/app/components/core/markdown/useStreamingAnimation.ts 268 as HTMLElementelement as HTMLElement
static/app/components/core/markdown/useStreamingAnimation.ts 278 as Textnode as Text

This is informational only and does not block the PR.

Comment thread static/app/components/core/markdown/markdown.tsx Outdated
Comment thread static/app/components/core/markdown/markdown.tsx Outdated
Comment thread static/app/components/core/markdown/renderToken.tsx Outdated
Comment thread static/app/components/core/markdown/token.tsx
Comment thread static/app/components/core/markdown/token.tsx Outdated
Comment thread static/app/components/core/markdown/defaultComponents.tsx Outdated
Comment thread static/app/components/core/markdown/defaultComponents.tsx
@natemoo-re natemoo-re disabled auto-merge May 13, 2026 22:12
Comment thread static/app/components/core/checkbox/checkbox.tsx
@natemoo-re natemoo-re enabled auto-merge (squash) May 13, 2026 22:40
@natemoo-re natemoo-re merged commit ea04759 into master May 13, 2026
70 checks passed
@natemoo-re natemoo-re deleted the nm/scraps/markdown branch May 13, 2026 22:44
natemoo-re added a commit that referenced this pull request May 21, 2026
Deep refactor of Seer Agent chat components.

- Replaces `MarkedText` renderer with the new `Markdown` component (see
#115025), unblocks streaming animation, component customizatin
  - Fixes table overflow state
  - Adds copy button to code blocks
- Consolidates state management, localize derived state from new
`BlockContext`.
- Splits the `blockComponents.tsx` into focused per-role modules
(`chat/assistant.tsx`, `chat/toolUse.tsx`, `chat/user.tsx`) that match
the actual data shapes from the backend
- Moves issue short-ID linkification from `postProcessLLMMarkdown` into
the `Markdown` Text component override
- Replaces `todosToMarkdown` in favor of a direct `TodoList` component
- Removes both `styled(MarkedText)` wrappers
- Removes bubbled onClick handler—interaction can now be handled by
`<Markdown component={{ }} />` overrides
- Removes `onMouseEnter`, `onMouseExit` callbacks—action buttons are
toggled via CSS and now support `:focus-within`

---------

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
priscilawebdev added a commit that referenced this pull request May 22, 2026
Replace the local `StyledMarkedText` wrapper (built on the legacy
`sentry/utils/marked` `MarkedText` component) with the new `<Markdown
/>` primitive from `@sentry/scraps/markdown` introduced in #115025.

This is the autofix surface rendered in the issue details sidebar and
the Seer drawer — the Solution card ("Plan"), Root Cause card, and the
streaming loading details. The `v3/styled.tsx` wrapper is no longer
needed and is removed.

No behavior change is intended. The new primitive renders each markdown
block via Scraps `Text`/`Heading`/`InlineCode`/etc. instead of
`dangerouslySetInnerHTML`, so visual rendering of the one-line summaries
and lists in `RootCauseCard` / `SolutionCard` may shift slightly —
please eyeball the cards in the sidebar and drawer during review.

Refs #115025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants