chatscope / chatscope/chat-ui-kit-react

Proposal: integrate Pretext for DOM-free text height measurement

Open
#177 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.8k
Forks
154
PR merge metrics
No merged PRs in 30d

Description

Looked through MessageList.jsx and noticed getBoundingClientRect()
is being called in two places, scrollToEnd and scroll anchoring, which triggers layout reflow on every new message.
There's a new library called Pretext (@chenglou/pretext) by Cheng Lou
(ex React core team) that calculates text height using pure JS math
instead of DOM measurements. It's sub-millisecond after the initial
prepare() call.
Two potential improvements here:
-cleaner scroll anchoring without waiting for DOM to settle
-groundwork for virtualization if that's ever on the roadmap
(virtualization needs heights before render, which is exactly
what Pretext provides)
Can start with a small proof of concept PR if you're open to it.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with MessageList.jsx and inspect the two getBoundingClientRect() call sites in scrollToEnd and scroll anchoring. Review Pretext's prepare() usage, then compare a proof of concept with the existing DOM measurements. Done would be a demonstrated integration that preserves scrolling behavior and establishes whether pre-render text heights are usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.