Pretext Chat Bubble

Message bubble with Pretext shrinkwrap that finds the tightest width for the same line count, eliminating dead space CSS fit-content leaves behind.

@chenglou/pretext

Installation

$ shadcn add @jalco/chat-bubble

Usage

import { ChatBubble, ChatThread } from "@/components/chat-bubble"

<ChatThread messages={messages} />

Client component. Each bubble uses Pretext to binary-search the tightest width that produces the same line count as fit-content, then sets that as the bubble width. Zero DOM reflow.

Examples

Shrinkwrap comparison

Side-by-side showing CSS fit-content (dead space on short last lines) vs Pretext shrinkwrap (pixel-tight).

Single bubble

API Reference

ChatBubble

PropType

ChatThread

PropType

Notes

Pretext-powered. Uses @chenglou/pretext for pure-arithmetic text measurement — no DOM reflow.
Font matching. The font prop must match the CSS font of the rendered bubble text. Defaults to 15px ui-sans-serif, system-ui, sans-serif.
CJK and emoji. Pretext handles CJK, Arabic, mixed bidi, grapheme clusters, and emoji correctly.