Spaces:
Running
Running
| "use client"; | |
| import { | |
| useCallback, | |
| useEffect, | |
| useMemo, | |
| useRef, | |
| useState, | |
| } from "react"; | |
| import { trpc } from "@/lib/trpc"; | |
| import { useRealtime, type RealtimeFrame } from "@/hooks/useRealtime"; | |
| import { formatDistanceToNow } from "date-fns"; | |
| import { clsx } from "@/lib/utils"; | |
| export interface ChatPanelProps { | |
| workspaceId: string; | |
| conversationId: string; | |
| userId: string; | |
| /** Optional callback when a user attaches a media timestamp. */ | |
| onMediaTimestamp?: (seconds: number) => void; | |
| /** Optional callback to convert a message ID into a task. */ | |
| onConvertToTask?: (messageId: string, body: string) => void; | |
| /** Open / closed state. */ | |
| open: boolean; | |
| onClose: () => void; | |
| /** Render-time height customization for inline usage. */ | |
| className?: string; | |
| /** Optional inline styles applied to the root panel. */ | |
| style?: React.CSSProperties; | |
| } | |
| interface MessageRow { | |
| id: string; | |
| userId: string | null; | |
| body: string | null; | |
| eventType: string; | |
| metadata?: any; | |
| seq: number; | |
| createdAt: string; | |
| } | |
| function fmtTimestamp(seconds: number): string { | |
| const s = Math.max(0, Math.floor(seconds)); | |
| const h = Math.floor(s / 3600); | |
| const m = Math.floor((s % 3600) / 60); | |
| const sec = s % 60; | |
| const mm = String(m).padStart(2, "0"); | |
| const ss = String(sec).padStart(2, "0"); | |
| return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`; | |
| } | |
| /** | |
| * Slide-in chat panel for a single conversation. Renders the persisted | |
| * message log via tRPC, then attaches a WebSocket via `useRealtime` to | |
| * receive live messages / typing / reactions / system events. | |
| * | |
| * Messages can carry `metadata.episodeId` + `metadata.mediaTimestampSeconds` | |
| * to render a clickable "jump to 03:42" link. | |
| */ | |
| export function ChatPanel(props: ChatPanelProps) { | |
| const utils = trpc.useUtils(); | |
| const [messages, setMessages] = useState<MessageRow[]>([]); | |
| const [draft, setDraft] = useState(""); | |
| const [typingUsers, setTypingUsers] = useState<Record<string, number>>({}); | |
| const [presence, setPresence] = useState<any[]>([]); | |
| const [lastSeq, setLastSeq] = useState(0); | |
| const listRef = useRef<HTMLDivElement>(null); | |
| const typingTimersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({}); | |
| const initial = trpc.chat.listMessages.useQuery({ | |
| conversationId: props.conversationId, | |
| limit: 50, | |
| }); | |
| // Seed the message list from the persisted log. | |
| useEffect(() => { | |
| if (!initial.data) return; | |
| const timer = setTimeout(() => { | |
| const rows: MessageRow[] = initial.data.messages.map((m: any) => ({ | |
| id: m.id, | |
| userId: m.userId, | |
| body: m.body, | |
| eventType: m.eventType, | |
| metadata: m.metadata, | |
| seq: m.seq, | |
| createdAt: m.createdAt, | |
| })); | |
| setMessages(rows); | |
| setLastSeq( | |
| rows.reduce((acc, r) => Math.max(acc, r.seq), 0), | |
| ); | |
| }, 0); | |
| return () => clearTimeout(timer); | |
| }, [initial.data]); | |
| // Auto-scroll on new messages. | |
| useEffect(() => { | |
| const el = listRef.current; | |
| if (el) el.scrollTop = el.scrollHeight; | |
| }, [messages.length]); | |
| // Subscribe to live frames. | |
| const handleFrame = useCallback( | |
| (frame: RealtimeFrame) => { | |
| switch (frame.type) { | |
| case "snapshot": { | |
| const recent = ((frame as any).messages ?? []).map( | |
| (m: any) => ({ | |
| id: m.id ?? `${m.seq}`, | |
| userId: m.userId ?? null, | |
| body: m.body ?? null, | |
| eventType: m.eventType ?? "message", | |
| metadata: m.meta ?? m.metadata ?? {}, | |
| seq: m.seq, | |
| createdAt: m.at ?? new Date().toISOString(), | |
| }), | |
| ); | |
| setMessages(recent); | |
| setPresence((frame as any).presence ?? []); | |
| setLastSeq( | |
| recent.reduce( | |
| (acc: number, r: MessageRow) => | |
| Math.max(acc, r.seq), | |
| 0, | |
| ), | |
| ); | |
| break; | |
| } | |
| case "message": | |
| case "system": { | |
| const m = frame as any; | |
| const row: MessageRow = { | |
| id: m.id ?? `${m.seq}-${m.at}`, | |
| userId: m.userId ?? null, | |
| body: m.body ?? null, | |
| eventType: m.eventType ?? frame.type, | |
| metadata: m.meta ?? m.metadata ?? {}, | |
| seq: m.seq ?? Date.now(), | |
| createdAt: m.at ?? new Date().toISOString(), | |
| }; | |
| setMessages((prev) => | |
| prev.some((p) => p.id === row.id) | |
| ? prev | |
| : [...prev, row], | |
| ); | |
| setLastSeq((s) => Math.max(s, row.seq)); | |
| // Tell the server we read up to here. | |
| break; | |
| } | |
| case "typing": { | |
| const userId = (frame as any).userId as string; | |
| if (!userId || userId === props.userId) break; | |
| setTypingUsers((s) => ({ ...s, [userId]: Date.now() })); | |
| if (typingTimersRef.current[userId]) { | |
| clearTimeout(typingTimersRef.current[userId]); | |
| } | |
| typingTimersRef.current[userId] = setTimeout(() => { | |
| setTypingUsers((s) => { | |
| const c = { ...s }; | |
| delete c[userId]; | |
| return c; | |
| }); | |
| }, 3_000); | |
| break; | |
| } | |
| case "presence": { | |
| setPresence((frame as any).users ?? []); | |
| break; | |
| } | |
| case "reaction": { | |
| // We don't render reaction counts inline yet but | |
| // we DO invalidate the cached message list so a | |
| // refresh picks them up. | |
| utils.chat.listMessages.invalidate({ | |
| conversationId: props.conversationId, | |
| }); | |
| break; | |
| } | |
| default: | |
| break; | |
| } | |
| }, | |
| [props.conversationId, props.userId, utils.chat.listMessages], | |
| ); | |
| const { client, connected, authError } = useRealtime({ | |
| onFrame: handleFrame, | |
| }); | |
| // Subscribe + auto mark read on attach. | |
| useEffect(() => { | |
| if (!client) return; | |
| client.subscribe(props.conversationId); | |
| const interval = setInterval(() => { | |
| if (lastSeq > 0) client.sendRead(props.conversationId, lastSeq); | |
| }, 3_000); | |
| return () => { | |
| client.unsubscribe(props.conversationId); | |
| client.sendRead(props.conversationId, lastSeq); | |
| clearInterval(interval); | |
| }; | |
| }, [client, props.conversationId, lastSeq]); | |
| const sendDraft = useCallback(() => { | |
| const text = draft.trim(); | |
| if (!text || !client) return; | |
| client.sendMessage(props.conversationId, text, { | |
| workspaceId: props.workspaceId, | |
| senderId: props.userId, | |
| }); | |
| setDraft(""); | |
| }, [client, draft, props.conversationId, props.userId, props.workspaceId]); | |
| const onKeyDown = useCallback( | |
| (e: React.KeyboardEvent<HTMLTextAreaElement>) => { | |
| if (e.key === "Enter" && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendDraft(); | |
| } else if (client) { | |
| client.sendTyping(props.conversationId); | |
| } | |
| }, | |
| [client, sendDraft, props.conversationId], | |
| ); | |
| const typingList = useMemo(() => { | |
| return Object.entries(typingUsers) | |
| .map(([u]) => u) | |
| .filter((u) => u !== props.userId); | |
| }, [typingUsers, props.userId]); | |
| if (!props.open) return null; | |
| return ( | |
| <div | |
| className={clsx( | |
| "fixed right-0 top-0 z-50 flex h-screen w-[420px] flex-col border-l bg-white shadow-2xl", | |
| "dark:border-zinc-800 dark:bg-zinc-950", | |
| props.className, | |
| )} | |
| style={props.style} | |
| role="dialog" | |
| aria-label="Chat" | |
| > | |
| <header className="flex items-center justify-between border-b px-4 py-3 dark:border-zinc-800"> | |
| <div> | |
| <h2 className="text-sm font-semibold">Conversation</h2> | |
| <p className="text-xs text-zinc-500"> | |
| {connected ? ( | |
| <> | |
| <span className="mr-1 inline-block h-2 w-2 rounded-full bg-emerald-500" /> | |
| Live · {presence.length} online | |
| </> | |
| ) : authError ? ( | |
| <span className="text-amber-600">auth: {authError}</span> | |
| ) : ( | |
| <span className="text-zinc-500">connecting…</span> | |
| )} | |
| </p> | |
| </div> | |
| <button | |
| onClick={props.onClose} | |
| className="rounded p-1 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800" | |
| aria-label="Close chat" | |
| > | |
| ✕ | |
| </button> | |
| </header> | |
| <div | |
| ref={listRef} | |
| className="flex-1 space-y-3 overflow-y-auto px-4 py-3" | |
| > | |
| {messages.map((m) => ( | |
| <MessageRowView | |
| key={m.id} | |
| row={m} | |
| mine={m.userId === props.userId} | |
| onJump={(s) => props.onMediaTimestamp?.(s)} | |
| onConvertToTask={(id) => { | |
| if (m.body) props.onConvertToTask?.(id, m.body); | |
| }} | |
| /> | |
| ))} | |
| {typingList.length > 0 && ( | |
| <div className="text-xs italic text-zinc-400"> | |
| {typingList.length === 1 | |
| ? "Someone is typing…" | |
| : `${typingList.length} people are typing…`} | |
| </div> | |
| )} | |
| </div> | |
| <footer className="border-t p-3 dark:border-zinc-800"> | |
| <textarea | |
| value={draft} | |
| onChange={(e) => setDraft(e.target.value)} | |
| onKeyDown={onKeyDown} | |
| placeholder="Write a message…" | |
| rows={2} | |
| className="w-full resize-none rounded-md border bg-transparent p-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-800" | |
| /> | |
| <div className="mt-2 flex items-center justify-between"> | |
| <span className="text-xs text-zinc-400"> | |
| Press Enter to send · Shift+Enter for newline | |
| </span> | |
| <button | |
| onClick={sendDraft} | |
| disabled={!connected || !draft.trim()} | |
| className="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white disabled:cursor-not-allowed disabled:bg-zinc-300" | |
| > | |
| Send | |
| </button> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| } | |
| function MessageRowView({ | |
| row, | |
| mine, | |
| onJump, | |
| onConvertToTask, | |
| }: { | |
| row: MessageRow; | |
| mine: boolean; | |
| onJump: (seconds: number) => void; | |
| onConvertToTask: (id: string) => void; | |
| }) { | |
| const ts = | |
| row.metadata?.mediaTimestampSeconds ?? row.metadata?.timestampSeconds; | |
| const isSystem = row.eventType !== "message"; | |
| const when = useMemo(() => { | |
| try { | |
| return formatDistanceToNow(new Date(row.createdAt), { | |
| addSuffix: true, | |
| }); | |
| } catch { | |
| return row.createdAt; | |
| } | |
| }, [row.createdAt]); | |
| if (isSystem) { | |
| return ( | |
| <div className="my-2 text-center text-xs italic text-zinc-500"> | |
| {row.body ?? `[${row.eventType}]`} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div | |
| className={clsx( | |
| "group flex flex-col rounded-lg px-3 py-2 text-sm", | |
| mine | |
| ? "ml-12 bg-blue-50 dark:bg-blue-950/30" | |
| : "mr-12 bg-zinc-100 dark:bg-zinc-900", | |
| )} | |
| > | |
| <div className="flex items-center justify-between gap-2"> | |
| <span className="text-xs font-semibold"> | |
| {mine ? "You" : row.userId?.slice(0, 6) ?? "System"} | |
| </span> | |
| <span className="text-[10px] uppercase tracking-wide text-zinc-400"> | |
| {when} | |
| </span> | |
| </div> | |
| <div className="mt-1 whitespace-pre-wrap text-zinc-800 dark:text-zinc-200"> | |
| {row.body} | |
| </div> | |
| {typeof ts === "number" && ts >= 0 && ( | |
| <button | |
| onClick={() => onJump(ts)} | |
| className="mt-2 inline-flex items-center gap-1 self-start rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-200" | |
| > | |
| ▶ jump to {fmtTimestamp(ts)} | |
| </button> | |
| )} | |
| {!mine && row.id && ( | |
| <button | |
| onClick={() => onConvertToTask(row.id)} | |
| className="mt-1 self-start text-[10px] text-zinc-400 opacity-0 hover:underline group-hover:opacity-100" | |
| > | |
| + convert to task | |
| </button> | |
| )} | |
| </div> | |
| ); | |
| } | |