Messaging

import { Chat } from "@/components/ui/chat";

import { Chat, type ChatMessage } from "@/components/ui/chat";

const messages: ChatMessage[] = [
  { id: "1", senderId: "them", senderName: "Priya", text: "Hey! 👋" },
  {
    id: "2",
    senderId: "me",
    senderName: "You",
    text: "Hi — got the files?",
    status: "read",
    replyTo: { id: "1", senderName: "Priya", text: "Hey! 👋" },
    reactions: [{ emoji: "👍", users: ["them"] }],
  },
];

export function Example() {
  return (
    <Chat
      currentUserId="me"
      messages={messages}
      onSend={({ text, attachments, replyToId }) => console.log(text, attachments, replyToId)}
      onReact={(messageId, emoji) => console.log(messageId, emoji)}
    />
  );
}

Chat                               (single flat component)
├── currentUserId="…"               (own-vs-other bubble alignment)
├── messages={ChatMessage[]}        (the single source of truth)
│     ├── { id, senderId, senderName, senderAvatar?, text?, timestamp?, status? }
│     ├── attachments?: [{ id, name, url?, size?, type? }]   (images preview inline)
│     ├── reactions?:   [{ emoji, users: string[] }]         (count = users.length)
│     └── replyTo?:     { id, senderName, text }             (quoted parent message)
├── onSend={({ text, attachments, replyToId }) => …}
├── onReact={(messageId, emoji) => …}
├── onTyping={(typing) => …}         (debounced from the composer)
├── typingUsers={[{ id, name }]}     (renders the animated indicator)
├── reactionChoices={["👍","❤️",…]}  (emoji palette in the reaction picker)
├── theme="default" | "lunar"
├── variant="card" | "flat"           (flat = no outline/bg/outer padding)
├── onEditMessage / onDeleteMessage   (own-message actions menu — UI only)
├── emptyState={<ReactNode>}          (default: built-in "No comments yet" Empty card)
└── feature toggles (all default true):
      allowAttachments · allowReactions · allowReplies · allowMessageActions
      showTimestamps · showAvatars
      showComposer · showTypingIndicator · autoScroll · scrollMask

Built-in behavior: drag-and-drop files onto the surface to attach, hover a
message for Reply / React actions (own messages also get an Edit / Delete
dropdown), the composer textarea auto-resizes, and a "jump to latest" FAB
with an unread count appears when scrolled up.

The hooks — useAutoScroll, useAutoResize, useTypingIndicator — are exported
from the same file for fully custom layouts.