[LucasBassetti]

Description

Refreshes the default look of the chatbot and fixes the alignment of the messages. The props, the theme keys and the rsc-* class names don't change, so apps keep working, and a theme still overrides the colors and the font.

Alignment

The avatar column depended on the box-sizing of the host page, so in pages with a CSS reset (Tailwind, Starlight...) the second message of a group was shifted about 6px from the first. The avatar now has a fixed column, and every element sets its own box-sizing.

New look

• Typography: system font by default instead of monospace (the input inherits it too), 14px messages with a readable line height.
• Bubbles: grouped corners (smaller on the side of the author between messages of a group), better padding, long words and URLs wrap instead of overflowing, subtle entrance animation (disabled with prefers-reduced-motion).
• Avatars: 32px, round, centered on the first line of the message.
• Options: outlined quick-reply pills, aligned with the bot messages, filled on hover.
• Custom components: a card aligned with the bot messages.
• Typing indicator: animated dots instead of ....
• Footer: clean input, round send button in the accent color (gray when disabled, red when invalid), crisp send and mic icons (the old send icon was clipped by its viewBox).
• Header and floating button: semibold title with ellipsis, round close button, softer shadows.
• Accessibility: focus rings on the buttons, options and close button.

Auto-scroll fix

While testing, WebKit sometimes stopped following the conversation, ending up to ~20px above the last message:

• content that grows without a DOM change wasn't followed, so the chatbot now also observes the size of the messages (ResizeObserver);
• growing content was taken for the user scrolling up; now only scrolling up stops following;
• a smooth scroll requested many times in a row can stop early, so it is checked again when it should have finished;
• the scrollbar space is reserved (scrollbar-gutter: stable), so the messages don't wrap again when it appears.

Related issue

None.

Type of change

• feat: new feature
• fix: bug fix
• docs: documentation
• refactor / perf / test
• build / ci / chore
• Breaking change (the title has !, and the migration is described below)

How has this been tested?

Check	Result
Lint, typecheck, build, unit tests	✅ 86/86
End-to-end (Playwright) in Chromium, Firefox, WebKit, iPhone and Pixel emulation: conversation, theme, floating, controlled, cache, validator, auto-scroll, speech, extras, mobile	✅ 26/26, 3 runs in a row
Alignment measured in 3 browsers, with and without an aggressive CSS reset: bubbles of a group, options and custom cards aligned, 32px avatars centered on the first line, no overflow of long text, footer and send button sizes	✅ 9/9 checks × 6
WebKit auto-scroll: 30 runs of 15 fast messages with smooth scroll end at the bottom	✅ 30/30 (was failing ~1 in 4)
Docs site built with this version: the BMI example is aligned in dark and light mode	✅

A gallery of every state (grouped messages, user replies, options, custom card, long text, typing indicator, invalid input, custom theme, floating) was compared before and after.

Breaking changes

None in the API. It is a visual change: apps with custom CSS that depends on the old spacing or on the empty avatar container (now not rendered when the avatar is hidden) may need small adjustments. The default fontFamily of the theme is now a system font stack instead of monospace; pass fontFamily: 'monospace' in a theme to keep the old font.

Suggested release: 1.1.0.

Checklist

• The title follows Conventional Commits
• npm run lint, npm run typecheck and npm test pass
• Tests cover the change (end-to-end and alignment checks above)
• The README is updated when the public API changes (no API change)