Chat interface

1type Message = {2  clientId: string; serverId?: string; senderId: string; body: string;3  createdAt: string; sequence?: number;4  status: 'sending' | 'sent' | 'failed';5};6type ChatState = { messages: Message[]; connection: 'offline' | 'connecting' | 'online';7  nearBottom: boolean; unreadBelow: number; };

1import { useEffect, useLayoutEffect, useReducer, useRef, useState } from "react";2
3type Message = {4  clientId: string;5  serverId?: string;6  sequence?: number;   // server's canonical order, once confirmed7  senderId: string;8  body: string;9  createdAt: number;10  status: "sending" | "sent" | "failed";11};12type State = { messages: Message[] };13type Action =14  | { type: "optimistic"; message: Message }15  | { type: "acked"; clientId: string; serverId: string; sequence: number }16  | { type: "failed"; clientId: string }17  | { type: "retry"; clientId: string }18  | { type: "incoming"; message: Message };19
20// Confirmed messages order by server sequence; still-sending ones sit after, by creation time.21function bySortKey(a: Message, b: Message) {22  if (a.sequence != null && b.sequence != null) return a.sequence - b.sequence;23  if (a.sequence != null) return -1;24  if (b.sequence != null) return 1;25  return a.createdAt - b.createdAt;26}27
28function reducer(state: State, action: Action): State {29  switch (action.type) {30    case "optimistic":31      return { messages: [...state.messages, action.message] };32    case "acked":33      return {34        messages: state.messages.map((m) =>35          m.clientId === action.clientId36            ? { ...m, serverId: action.serverId, sequence: action.sequence, status: "sent" }37            : m,38        ),39      };40    case "failed":41      return { messages: state.messages.map((m) => m.clientId === action.clientId ? { ...m, status: "failed" } : m) };42    case "retry":43      return { messages: state.messages.map((m) => m.clientId === action.clientId ? { ...m, status: "sending" } : m) };44    case "incoming":45      // drop a server message we already have (our own echo, or a reconnect replay)46      if (state.messages.some((m) => m.serverId && m.serverId === action.message.serverId)) return state;47      return { messages: [...state.messages, action.message] };48  }49}50
51export function Chat({ me, send, subscribe }: {52  me: string;53  send: (mutationId: string, body: string) => Promise<{ serverId: string; sequence: number }>;54  subscribe: (onMessage: (m: Message) => void) => () => void;55}) {56  const [state, dispatch] = useReducer(reducer, { messages: [] });57  const [draft, setDraft] = useState("");58  const listRef = useRef<HTMLDivElement>(null);59  const wasNearBottom = useRef(true);60
61  useEffect(() => subscribe((m) => dispatch({ type: "incoming", message: m })), [subscribe]);62
63  function onScroll() {64    const el = listRef.current;65    if (el) wasNearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;66  }67
68  // After new messages render, jump to the bottom only if the user was already there.69  useLayoutEffect(() => {70    const el = listRef.current;71    if (el && wasNearBottom.current) el.scrollTop = el.scrollHeight;72  }, [state.messages]);73
74  const sorted = [...state.messages].sort(bySortKey);75
76  async function post(body: string, clientId?: string) {77    const id = clientId ?? crypto.randomUUID();78    dispatch(clientId79      ? { type: "retry", clientId: id }80      : { type: "optimistic", message: { clientId: id, senderId: me, body, createdAt: Date.now(), status: "sending" } });81    try {82      const ack = await send(id, body);83      dispatch({ type: "acked", clientId: id, ...ack });84    } catch {85      dispatch({ type: "failed", clientId: id });86    }87  }88
89  return (90    <div>91      <div92        ref={listRef}93        onScroll={onScroll}94        role="log"95        aria-live="polite"96        style={{ overflowY: "auto", maxHeight: 400 }}97      >98        {sorted.map((m) => (99          <p key={m.clientId} data-mine={m.senderId === me}>100            {m.body}101            {m.status === "sending" && " (sending\u2026)"}102            {m.status === "failed" && (103              <button type="button" onClick={() => post(m.body, m.clientId)}>Retry</button>104            )}105          </p>106        ))}107      </div>108      <form onSubmit={(e) => { e.preventDefault(); if (draft.trim()) { post(draft.trim()); setDraft(""); } }}>109        <input value={draft} onChange={(e) => setDraft(e.target.value)} aria-label="Message" />110        <button type="submit">Send</button>111      </form>112    </div>113  );114}