Skip to content

feat: add scrollable code blocks and tables with auto-scroll during streaming#444

Open
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:feature/scrollable-code-blocks-tables
Open

feat: add scrollable code blocks and tables with auto-scroll during streaming#444
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:feature/scrollable-code-blocks-tables

Conversation

@sleitor
Copy link
Contributor

@sleitor sleitor commented Mar 8, 2026

Fixes #442

Summary

Adds codeBlockMaxHeight (default: 400px) and tableMaxHeight (default: 300px) props to constrain long code blocks and tables with vertical scrolling.

During streaming (isAnimating={true}), containers auto-scroll to the bottom as new content appears. If the user scrolls up to read earlier content, auto-scroll pauses and re-engages only when the user scrolls back to the bottom.

Changes

  • Added codeBlockMaxHeight and tableMaxHeight props to <Streamdown>
  • Code block body: max-height + overflow-y-auto + auto-scroll during streaming
  • Table: max-height on inner scroll div + auto-scroll during streaming
  • Auto-scroll uses passive scroll listeners and instant scrollTo for performance
  • Props accept number (px) or string (any CSS value like '50vh')
  • Set to 0 or Infinity to disable

Testing

  • Added tests for scroll behavior, auto-scroll pin/unpin, and prop threading

@vercel
Copy link
Contributor

vercel bot commented Mar 8, 2026

Someone is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

}, [maxHeightStyle]);

useEffect(() => {
const el = scrollRef.current;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Table auto-scroll useEffect dependency array missing children, so scroll-to-bottom only fires once when streaming begins, not when new rows arrive.

Fix on Vercel

useEffect(() => {
const el = scrollRef.current;
if (!(el && maxHeightStyle && isAnimating && pinnedRef.current)) {
return;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auto-scroll useEffect in CodeBlockBody and Table components has incomplete dependency arrays, causing scroll-to-bottom to only fire once during streaming instead of on each content update.

Fix on Vercel

@sleitor sleitor force-pushed the feature/scrollable-code-blocks-tables branch 3 times, most recently from 1c9e1cd to 2860d91 Compare March 18, 2026 22:29
@sleitor sleitor force-pushed the feature/scrollable-code-blocks-tables branch from 2860d91 to 541d906 Compare March 18, 2026 22:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Scrollable code blocks & tables with auto-scroll during streaming

1 participant