Chat

See it live

Open /chat (sidebar → shadcn/ui → Chat). Pick a conversation, type a message, press Enter or Send.

Anatomy

• Conversation list: a search Input plus one button per conversation (avatar initials, name, last message, time). The active row is tinted with bg-accent.
• Thread: a header naming the contact, then a scrolling column of bubbles. Messages you send use the primary token and align right; the ones you receive use a bordered card and align left.
• Composer: an Input plus a primary Send. Enter sends; empty messages are blocked.

Data

type Msg = { id: number; from: "me" | "them"; text: string; time: string };
type Convo = {
  id: number;
  name: string;
  role: string;
  color: string;   // avatar bg (static Tailwind class)
  messages: Msg[];
};

Auto-scroll

A ref on the thread, plus an effect keyed on the message count, keeps the view pinned to the latest bubble.

React.useEffect(() => {
  const el = scrollRef.current;
  if (el) el.scrollTop = el.scrollHeight;
}, [active.messages.length, activeId]);