←Back to docs
Recipe

Message thread UX

Build a threaded conversation view with reply chains, timestamps, and real-time indicators — the foundation of any messaging surface.

JD
Jamie Doe2:14 PM

Hey team — just pushed the new auth flow. Can someone review the token refresh logic?

AK
Alex Kim2:18 PM

On it. The interceptor looks clean — one edge case around 401 retry storms though.

JD
Jamie Doe2:21 PM

Good catch. Added a debounce — retries cap at 3 with exponential backoff.

SM
Sarah M.2:30 PM

LGTM. Ship it.

Key patterns

  • •Thread indentation via border-l with consistent left margin — no nesting deeper than 2 levels.
  • •Avatar fallbacks use initials with brand-tinted backgrounds — violet for primary, pink for secondary.
  • •Timestamps are relative within the current day, absolute otherwise. Keep them subtle with text-zinc-500.
  • •The composer input lives at the bottom of the thread — fixed on mobile, inline on desktop. Always show a character count.