{open ? ( ) : null}

setText(e.target.value)}
          aria-label={label}
          role={open ? "combobox" : undefined}
          aria-expanded={open ? true : undefined}
          aria-controls={open ? `${id}-people` : undefined}
          aria-activedescendant={open ? `${id}-p-${matches[active]?.id}` : undefined}
          aria-describedby={`${id}-hint`}
          placeholder={placeholder}
          onKeyDown={(e) => {
            if (open) {
              if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                e.preventDefault()
                setActive((a) => (a + (e.key === "ArrowDown" ? 1 : -1) + matches.length) % matches.length)
                return
              }
              if (e.key === "Enter" || e.key === "Tab") {
                e.preventDefault()
                insert(matches[active] ?? matches[0]!)
                return
              }
            }
            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
              e.preventDefault()
              send()
            }
          }}
          className="placeholder:text-muted-foreground max-h-32 min-h-7 min-w-0 flex-1 resize-none bg-transparent py-1 text-sm outline-none [field-sizing:content]"
        />
        <Button size="icon-sm" aria-label="Send" onClick={send} disabled={!text.trim()}>
          <SendHorizontal aria-hidden="true" className="rtl:-scale-x-100" />
        </Button>
      </div>
      <p id={`${id}-hint`} className="sr-only">
        Enter sends, Shift and Enter adds a line. Type @ to mention someone.
      </p>
    </div>
  )
}

function Reactions({ m, onToggle }: { m: Chat1Message; onToggle: (emoji: string) => void }) {
  if (!m.reactions?.length) return null
  return (
    <div className="mt-1.5 flex flex-wrap items-center gap-1">
      {m.reactions.map((r) => (
        <button
          key={r.emoji}
          type="button"
          aria-pressed={!!r.mine}
          aria-label={`${r.emoji} ${r.count}${r.mine ? ", including you" : ""}`}
          onClick={() => onToggle(r.emoji)}
          className={cn("flex h-6 items-center gap-1 rounded-full border px-2 text-xs tabular-nums outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", r.mine ? "border-primary/40 bg-primary/10" : "hover:bg-accent")}
        >
          <span aria-hidden="true">{r.emoji}</span>
          <span aria-hidden="true">{r.count}</span>
        </button>
      ))}
    </div>
  )
}

/** One message, or a run of messages from the same person within the same day when `compact`. */
function Message({
  m,
  author,
  compact,
  meName,
  onReact,
  onReply,
  onRetry,
  inThread,
}: {
  m: Chat1Message
  author?: Chat1Person
  compact: boolean
  meName?: string
  onReact: (emoji: string, on: boolean) => void
  onReply?: () => void
  onRetry?: () => void
  inThread?: boolean
}) {
  const [picking, setPicking] = React.useState(false)
  const name = author?.name ?? "Someone"
  // mentions of the reader stand out, as they do in every team chat
  const parts = m.text.split(/(@[A-Z][\w]*(?: [A-Z][\w]*)?)/g)
  return (
    <article aria-label={`${name}, ${m.time}`} className={cn("group/msg hover:bg-accent/40 relative flex gap-3 rounded-lg px-3 focus-within:bg-accent/40", compact ? "py-0.5" : "pt-2 pb-0.5")}>
      <div className="w-8 shrink-0">
        {compact ? (
          <span className="text-muted-foreground hidden pt-0.5 text-[10px] tabular-nums group-hover/msg:block">{m.time}</span>
        ) : (
          <Avatar className="size-8" status={author?.status}>
            <AvatarFallback className="text-xs">{initials(name)}</AvatarFallback>
          </Avatar>
        )}
      </div>
      <div className="min-w-0 flex-1">
        {!compact ? (
          <p className="flex items-baseline gap-2">
            <span className="text-sm font-semibold">{name}</span>
            <span className="text-muted-foreground text-xs tabular-nums">{m.time}</span>
          </p>
        ) : null}
        <p className={cn("text-sm leading-relaxed break-words whitespace-pre-wrap", m.delivery === "sending" && "text-muted-foreground")}>
          {parts.map((p, i) =>
            p.startsWith("@") ? (
              <span key={i} className={cn("rounded px-0.5 font-medium", p.slice(1) === meName ? "bg-chart-3/25" : "text-primary")}>
                {p}
              </span>
            ) : (
              p
            )
          )}
        </p>
        {m.delivery ? (
          <p className={cn("mt-0.5 text-xs", m.delivery === "failed" ? "text-destructive" : "text-muted-foreground")} role={m.delivery === "failed" ? "alert" : undefined}>
            {m.delivery === "sending" ? "Sending…" : "Not sent."}{" "}
            {m.delivery === "failed" && onRetry ? (
              <button type="button" onClick={onRetry} className="rounded-sm font-medium underline underline-offset-2 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
                Retry
              </button>
            ) : null}
          </p>
        ) : null}
        <Reactions m={m} onToggle={(e) => onReact(e, !m.reactions?.find((r) => r.emoji === e)?.mine)} />
        {picking ? (
          <span role="group" aria-label="Add a reaction" className="mt-1 flex w-fit gap-0.5 rounded-full border px-1">
            {quick.map((e) => (
              <button
                key={e}
                type="button"
                aria-label={`React with ${e}`}
                onClick={() => {
                  setPicking(false)
                  onReact(e, true)
                }}
                className="hover:bg-accent size-7 rounded-full text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
              >
                {e}
              </button>
            ))}
          </span>
        ) : null}
        {!inThread && m.replies?.length ? (
          <button type="button" onClick={onReply} className="text-primary mt-1 flex items-center gap-1.5 rounded-sm text-xs font-medium outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50">
            <MessageSquare aria-hidden="true" className="size-3.5" />
            {m.replies.length === 1 ? "1 reply" : `${m.replies.length} replies`}
          </button>
        ) : null}
      </div>
      {!m.delivery ? (
        <div className="bg-background absolute -top-3 end-3 hidden gap-0.5 rounded-md border p-0.5 shadow-sm group-focus-within/msg:flex group-hover/msg:flex">
          <Button variant="ghost" size="icon-sm" className="size-7" aria-label={`Add a reaction to ${name}’s message`} aria-pressed={picking} onClick={() => setPicking((p) => !p)}>
            <SmilePlus aria-hidden="true" />
          </Button>
          {!inThread && onReply ? (
            <Button variant="ghost" size="icon-sm" className="size-7" aria-label={`Reply in thread to ${name}`} onClick={onReply}>
              <MessageSquare aria-hidden="true" />
            </Button>
          ) : null}
        </div>
      ) : null}
    </article>
  )
}

/**
 * A team chat: channels and direct messages with unread counts and presence, messages grouped by person and day with a New divider,
 * reactions, threads in a side panel, @mentions that suggest people, and messages that show while sending and offer Retry when they fail.
 */
function Chat1({
  people = samplePeople,
  meId = "me",
  channels = sampleChannels,
  messages: messagesProp = sampleMessages,
  defaultChannelId,
  defaultThreadId,
  firstUnread = { launch: "m4" },
  onSend,
  onReact,
  onChannelChange,
  state = "ready",
  onRetry,
  emptyState,
  errorState,
  className,
  ...props
}: Chat1Props) {
  const id = React.useId()
  const [channelId, setChannelId] = React.useState(defaultChannelId ?? channels[0]?.id ?? "")
  const [store, setStore] = React.useState(messagesProp)
  React.useEffect(() => setStore(messagesProp), [messagesProp])
  const [read, setRead] = React.useState<Record<string, boolean>>({})
  const [threadId, setThreadId] = React.useState<string | null>(defaultThreadId ?? null)
  const channel = channels.find((c) => c.id === channelId)
  const list = store[channelId] ?? []
  const thread = threadId ? list.find((m) => m.id === threadId) : undefined
  const person = (pid: string) => people.find((p) => p.id === pid)
  const me = person(meId)
  const logRef = React.useRef<HTMLDivElement>(null)
  const localId = React.useRef(0)

React.useEffect(() => {
    const el = logRef.current
    if (el) el.scrollTop = el.scrollHeight
  }, [channelId, list.length, state])

const update = (fn: (msgs: Chat1Message[]) => Chat1Message[], cid = channelId) => setStore((s) => ({ ...s, [cid]: fn(s[cid] ?? []) }))

function mapMessage(msgs: Chat1Message[], msgId: string, fn: (m: Chat1Message) => Chat1Message): Chat1Message[] {
    return msgs.map((m) => (m.id === msgId ? fn(m) : m.replies ? { ...m, replies: mapMessage(m.replies, msgId, fn) } : m))
  }

async function send(text: string, inThread?: string, retryId?: string) {
    const cid = channelId
    const mid = retryId ?? `local-${++localId.current}`
    const draft: Chat1Message = { id: mid, authorId: meId, text, day: "Today", time: "Now", delivery: "sending" }
    if (retryId) update((msgs) => mapMessage(msgs, mid, (m) => ({ ...m, delivery: "sending" })), cid)
    else if (inThread) update((msgs) => msgs.map((m) => (m.id === inThread ? { ...m, replies: [...(m.replies ?? []), draft] } : m)), cid)
    else update((msgs) => [...msgs, draft], cid)
    try {
      if (onSend) await onSend({ channelId: cid, text, threadId: inThread })
      else await new Promise((r) => setTimeout(r, 500))
      update((msgs) => mapMessage(msgs, mid, ({ delivery: _, ...m }) => m), cid)
    } catch {
      update((msgs) => mapMessage(msgs, mid, (m) => ({ ...m, delivery: "failed" })), cid)
    }
  }

function react(messageId: string, emoji: string, on: boolean) {
    update((msgs) =>
      mapMessage(msgs, messageId, (m) => {
        const existing = m.reactions?.find((r) => r.emoji === emoji)
        let reactions = m.reactions ?? []
        if (existing) reactions = reactions.map((r) => (r.emoji === emoji ? { ...r, mine: on, count: r.count + (on === !!r.mine ? 0 : on ? 1 : -1) } : r)).filter((r) => r.count > 0)
        else if (on) reactions = [...reactions, { emoji, count: 1, mine: true }]
        return { ...m, reactions }
      })
    )
    onReact?.({ channelId, messageId, emoji, on })
  }

const renderList = (msgs: Chat1Message[], inThread?: boolean) => {
    const out: React.ReactNode[] = []
    msgs.forEach((m, i) => {
      const prev = msgs[i - 1]
      if (!inThread && m.day !== prev?.day)
        out.push(
          <div key={`day-${m.day}-${m.id}`} role="separator" aria-label={m.day} className="flex items-center gap-3 px-3 py-2">
            <span className="bg-border h-px flex-1" />
            <span className="text-muted-foreground text-xs font-medium">{m.day}</span>
            <span className="bg-border h-px flex-1" />
          </div>
        )
      if (!inThread && firstUnread[channelId] === m.id && !read[channelId])
        out.push(
          <div key={`new-${m.id}`} role="separator" aria-label="New messages" className="flex items-center gap-3 px-3 py-1">
            <span className="bg-destructive/50 h-px flex-1" />
            <span className="text-destructive text-xs font-semibold">New</span>
          </div>
        )
      const compact = !!prev && prev.authorId === m.authorId && prev.day === m.day && firstUnread[channelId] !== m.id
      out.push(
        <Message
          key={m.id}
          m={m}
          author={person(m.authorId)}
          compact={compact}
          meName={me?.name}
          inThread={inThread}
          onReact={(e, on) => react(m.id, e, on)}
          onReply={() => setThreadId(m.id)}
          onRetry={() => send(m.text, inThread ? threadId ?? undefined : undefined, m.id)}
        />
      )
    })
    return out
  }

const chooseChannel = (cid: string) => {
    setRead((r) => ({ ...r, [channelId]: true }))
    setChannelId(cid)
    setThreadId(null)
    onChannelChange?.(cid)
  }

const channelItem = (c: Chat1Channel) => {
    const unread = !read[c.id] && c.id !== channelId ? c.unread : undefined
    const p = c.personId ? person(c.personId) : undefined
    return (
      <li key={c.id}>
        <button
          type="button"
          aria-current={c.id === channelId ? "page" : undefined}
          onClick={() => chooseChannel(c.id)}
          className={cn(
            "flex h-8 w-full items-center gap-2 rounded-md px-2 text-start text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
            c.id === channelId ? "bg-accent font-medium" : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
            unread && "text-foreground font-semibold"
          )}
        >
          {c.kind === "dm" ? (
            <Avatar className="size-6" status={p?.status}>
              <AvatarFallback className="text-[10px]">{initials(c.name)}</AvatarFallback>
            </Avatar>
          ) : c.private ? (
            <Lock aria-hidden="true" className="size-3.5 shrink-0" />
          ) : (
            <Hash aria-hidden="true" className="size-3.5 shrink-0" />
          )}
          <span className="min-w-0 flex-1 truncate">{c.name}</span>
          {c.private ? <span className="sr-only">(private)</span> : null}
          {unread ? (
            <span className="bg-primary text-primary-foreground rounded-full px-1.5 text-[10px] leading-4 font-semibold tabular-nums">
              {unread}
              {" "}<span className="sr-only">unread</span>
            </span>
          ) : null}
        </button>
      </li>
    )
  }

return (
    <section data-slot="chat-1" data-state={state} aria-label="Team chat" className={cn("bg-card relative mx-auto flex h-[38rem] w-full max-w-6xl overflow-hidden rounded-xl border", className)} {...frameProps(props)}>
      <nav aria-label="Channels" className="bg-muted/40 hidden w-56 shrink-0 flex-col gap-4 overflow-y-auto border-e p-3 md:flex">
        <div>
          <h2 className="text-muted-foreground px-2 pb-1 text-xs font-semibold">Channels</h2>
          <ul className="grid gap-0.5">{channels.filter((c) => c.kind !== "dm").map(channelItem)}</ul>
        </div>
        <div>
          <h2 className="text-muted-foreground px-2 pb-1 text-xs font-semibold">Direct messages</h2>
          <ul className="grid gap-0.5">{channels.filter((c) => c.kind === "dm").map(channelItem)}</ul>
        </div>
      </nav>

<div className="flex min-w-0 flex-1 flex-col">
        <header className="flex items-center gap-3 border-b px-4 py-2.5">
          <div className="min-w-0 flex-1">
            <h2 id={`${id}-channel`} className="flex items-center gap-1.5 text-sm font-semibold">
              {channel?.kind === "dm" ? null : channel?.private ? <Lock aria-hidden="true" className="size-3.5" /> : <Hash aria-hidden="true" className="size-3.5" />}
              {channel?.name}
            </h2>
            {channel?.topic ? <p className="text-muted-foreground truncate text-xs">{channel.topic}</p> : null}
          </div>
          <label className="sr-only" htmlFor={`${id}-switch`}>
            Channel
          </label>
          <select
            id={`${id}-switch`}
            value={channelId}
            onChange={(e) => chooseChannel(e.target.value)}
            className="border-input bg-background h-8 rounded-md border px-2 text-sm md:hidden"
          >
            {channels.map((c) => (
              <option key={c.id} value={c.id}>
                {c.kind === "dm" ? c.name : `# ${c.name}`}
              </option>
            ))}
          </select>
        </header>

<StateView
          state={state === "ready" && !list.length ? "empty" : state}
          onRetry={onRetry}
          bare
          label="Loading messages"
          loading={<MessagesSkeleton />}
          empty={{
            title: emptyState?.title ?? (channel?.kind === "dm" ? `This is the start of your conversation with ${channel.name}` : `This is the start of #${channel?.name ?? ""}`),
            description: emptyState?.description ?? "Say hello. Messages you send here are visible to everyone in it.",
            icon: emptyState?.icon ?? <MessagesSquare />,
            action: emptyState?.action,
          }}
          error={{ title: errorState?.title ?? "Messages could not be loaded", ...errorState }}
          className="min-h-0 flex-1"
        >
          <div ref={logRef} role="log" aria-labelledby={`${id}-channel`} className="h-full overflow-y-auto py-2">
            {renderList(list)}
          </div>
        </StateView>

<div className="p-3 pt-1">
          <Composer people={people.filter((p) => p.id !== meId)} label={`Message ${channel?.kind === "dm" ? channel.name : `#${channel?.name ?? ""}`}`} placeholder={`Message ${channel?.kind === "dm" ? channel.name : `#${channel?.name ?? ""}`}`} onSend={(t) => send(t)} />
        </div>
      </div>

{thread ? (
        <aside aria-label="Thread" className="absolute inset-0 z-20 flex flex-col border-s bg-card md:static md:w-80 md:shrink-0">
          <div className="flex items-center justify-between border-b px-4 py-2.5">
            <h3 className="text-sm font-semibold">Thread</h3>
            <Button variant="ghost" size="icon-sm" aria-label="Close thread" onClick={() => setThreadId(null)}>
              <X aria-hidden="true" />
            </Button>
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto py-2">
            <Message m={thread} author={person(thread.authorId)} compact={false} meName={me?.name} inThread onReact={(e, on) => react(thread.id, e, on)} />
            <div role="separator" aria-label="Replies" className="text-muted-foreground flex items-center gap-3 px-4 py-2 text-xs">
              {thread.replies?.length === 1 ? "1 reply" : `${thread.replies?.length ?? 0} replies`}
              <span className="bg-border h-px flex-1" />
            </div>
            {renderList(thread.replies ?? [], true)}
          </div>
          <div className="p-3 pt-1">
            <Composer people={people.filter((p) => p.id !== meId)} label="Reply in thread" placeholder="Reply…" onSend={(t) => send(t, thread.id)} />
          </div>
        </aside>
      ) : null}
    </section>
  )
}

export { Chat1, type Chat1Props, type Chat1Channel, type Chat1Message, type Chat1Person }
```