Improve chat ordering and scroll stability

[DexterStorey]

Motivation

• Fix messages arriving out-of-order when text is sent via the input and avoid transcript split/duplication during streaming.
• Prevent scroll jitter/overflow when many messages arrive and keep the transcript pinned when the user is at the bottom.
• Refresh chat visuals to be cleaner and more consistent with Lilac branding.

Description

• Anchor manual text entries to the current timeline by adding latestTimelineItemIdRef and using it in sendText so new messages attach to the latest visible item (changes in src/realtime/provider.tsx).
• Keep auto-scroll deterministic by replacing the bottom sentinel with a useLayoutEffect that sets el.scrollTop = el.scrollHeight when pinned and by using a transcriptCount dependency to satisfy exhaustive-deps (changes in src/app/(app)/ToggleRealtime.tsx).
• Polish transcript container and bubble/input styling (rounded radii, spacing, subtle gradients, scrollbarGutter, overscroll-contain) and add useLayoutEffect import; remove the unused bottom ref.
• Small refactors to maintain ordering via previousItemIdByIdRef and preserve existing transcript ordering logic using orderTranscriptsByPreviousItemId.

Testing

• Ran bun run format and fixed lint/format issues (succeeded).
• Ran bun run check (biome) to validate linting (succeeded).
• Ran bun x tsc --noEmit to verify TypeScript (succeeded).
• Ran bun run build (Next.js production build) to ensure compile and bundling (succeeded).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
lilac	Ready	Preview, Comment	Dec 26, 2025 2:50am