590 lines
19 KiB
TypeScript
590 lines
19 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /chats/[id] — a single thread.
|
|
*
|
|
* History pages upward from the newest message using `before_seq` (a keyset
|
|
* cursor, not an offset), so paging stays stable while new messages keep
|
|
* arriving at the top.
|
|
*
|
|
* Live updates come from the thread's own private channel. Subscribing is
|
|
* gated by the BFF: it only signs `private-conversation.{id}` for an actual
|
|
* participant, so an unauthorised subscription is refused at the server.
|
|
*
|
|
* Composer, attachments and the message context menu land in later phases —
|
|
* this screen is read + receipts.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { ArrowLeft, BellOff } from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { useAuthGate } from "@/components/auth/auth-gate";
|
|
import { UserAvatar } from "@/components/ui/user-avatar";
|
|
import { KautilyaIcon } from "@/components/selection-toolbar/shared";
|
|
import { MessageList } from "@/components/chat/message-list";
|
|
import { ChatComposer } from "@/components/chat/chat-composer";
|
|
import {
|
|
MessageMenu,
|
|
type MenuPoint,
|
|
} from "@/components/chat/message-menu";
|
|
import { ForwardDialog } from "@/components/chat/forward-dialog";
|
|
import { toast } from "sonner";
|
|
import { channelAuthorizer } from "@/lib/realtime";
|
|
import { cn } from "@/lib/utils";
|
|
import { useVisualViewport } from "@/lib/use-visual-viewport";
|
|
import {
|
|
chat,
|
|
conversationTitle,
|
|
groupAvatarUrl,
|
|
isMuted,
|
|
senderName,
|
|
type ChatMessage,
|
|
type ConversationDetail,
|
|
type Receipts,
|
|
type UploadedAttachment,
|
|
} from "@/lib/chat";
|
|
|
|
const PAGE_SIZE = 30;
|
|
|
|
export default function ChatThreadPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const { user, loading } = useAuth();
|
|
const { requireAuth } = useAuthGate();
|
|
const router = useRouter();
|
|
|
|
const [meta, setMeta] = useState<ConversationDetail | null>(null);
|
|
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
|
const [receipts, setReceipts] = useState<Receipts | null>(null);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [state, setState] = useState<"loading" | "ready" | "error">("loading");
|
|
const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);
|
|
const [menu, setMenu] = useState<{ message: ChatMessage; point: MenuPoint } | null>(null);
|
|
const [forwarding, setForwarding] = useState<ChatMessage | null>(null);
|
|
const [starredIds, setStarredIds] = useState<Set<string>>(new Set());
|
|
|
|
// While the keyboard is up the thread is sized from the visual viewport
|
|
// instead of dvh — see useVisualViewport for why dvh can't do this on iOS.
|
|
// Declared with the other hooks: the early return below means anything
|
|
// placed after it would run conditionally.
|
|
const viewport = useVisualViewport();
|
|
const keyboardOpen = viewport?.keyboardOpen ?? false;
|
|
// Guards against two loads racing (scroll handler + the short-page effect).
|
|
const loadingRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (loading || user) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
const ok = await requireAuth();
|
|
if (!ok && !cancelled) router.replace("/");
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [loading, user, requireAuth, router]);
|
|
|
|
/** Newest page first; messages are held ascending for rendering. */
|
|
const loadNewest = useCallback(async () => {
|
|
try {
|
|
const page = await chat.messages(id, 0, PAGE_SIZE);
|
|
setMessages([...page].reverse());
|
|
setHasMore(page.length === PAGE_SIZE);
|
|
setState("ready");
|
|
} catch {
|
|
setState("error");
|
|
}
|
|
}, [id]);
|
|
|
|
const loadOlder = useCallback(async () => {
|
|
if (loadingRef.current || !hasMore) return;
|
|
const oldest = messages[0]?.seq;
|
|
if (!oldest) return;
|
|
loadingRef.current = true;
|
|
setLoadingMore(true);
|
|
try {
|
|
const page = await chat.messages(id, oldest, PAGE_SIZE);
|
|
if (page.length > 0) {
|
|
setMessages((prev) => [...[...page].reverse(), ...prev]);
|
|
}
|
|
setHasMore(page.length === PAGE_SIZE);
|
|
} catch {
|
|
// Leave hasMore alone — a transient failure shouldn't permanently end
|
|
// history; the next scroll retries.
|
|
} finally {
|
|
loadingRef.current = false;
|
|
setLoadingMore(false);
|
|
}
|
|
}, [id, hasMore, messages]);
|
|
|
|
// One request for the thread: title, avatar, mute state, and the
|
|
// participant list the reply banner and quoted lines need to name people.
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
let cancelled = false;
|
|
chat
|
|
.detail(id)
|
|
.then((d) => {
|
|
if (!cancelled) setMeta(d);
|
|
})
|
|
.catch(() => {
|
|
/* the message list surfaces the failure */
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [id, user]);
|
|
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
void loadNewest();
|
|
chat.receipts(id).then(setReceipts).catch(() => {});
|
|
}, [id, user, loadNewest]);
|
|
|
|
/**
|
|
* Send optimistically: the bubble appears immediately keyed by a
|
|
* client-generated id, then the server's version replaces it. That id is
|
|
* also what makes a retry idempotent server-side, so a flaky connection
|
|
* can't produce two bubbles.
|
|
*/
|
|
const sendMessage = useCallback(
|
|
(
|
|
body: string,
|
|
replyToId?: string,
|
|
previewUrl?: string,
|
|
attachments?: UploadedAttachment[],
|
|
) => {
|
|
const clientMsgId = crypto.randomUUID();
|
|
const optimistic: ChatMessage = {
|
|
id: clientMsgId,
|
|
conversation_id: id,
|
|
seq: Number.MAX_SAFE_INTEGER,
|
|
sender_id: user?.id ?? null,
|
|
kind: "text",
|
|
body,
|
|
entities: [],
|
|
client_msg_id: clientMsgId,
|
|
reply_to_id: replyToId ?? null,
|
|
attachments: [],
|
|
created_at: new Date().toISOString(),
|
|
pending: true,
|
|
};
|
|
setMessages((prev) => [...prev, optimistic]);
|
|
|
|
chat
|
|
.send(id, body, { clientMsgId, replyToId, previewUrl, attachments })
|
|
.then((saved) => {
|
|
setMessages((prev) => {
|
|
// Drop the placeholder and any realtime echo of the same message.
|
|
const without = prev.filter(
|
|
(m) => m.id !== clientMsgId && m.id !== saved.id,
|
|
);
|
|
return [...without, saved];
|
|
});
|
|
})
|
|
.catch(() => {
|
|
// Keep the bubble and its text — discarding it loses what the user
|
|
// wrote. Marking it failed offers a retry instead.
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === clientMsgId ? { ...m, pending: false, failed: true } : m,
|
|
),
|
|
);
|
|
});
|
|
},
|
|
[id, user?.id],
|
|
);
|
|
|
|
/**
|
|
* Retry a failed send, REUSING its client_msg_id. If the original actually
|
|
* reached the server and only the response was lost, the server returns the
|
|
* stored message instead of writing a second one.
|
|
*/
|
|
const retryMessage = useCallback(
|
|
(failed: ChatMessage) => {
|
|
const clientMsgId = failed.client_msg_id ?? failed.id;
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === failed.id ? { ...m, pending: true, failed: false } : m,
|
|
),
|
|
);
|
|
chat
|
|
.send(id, failed.body, {
|
|
clientMsgId,
|
|
replyToId: failed.reply_to_id ?? undefined,
|
|
})
|
|
.then((saved) => {
|
|
setMessages((prev) => [
|
|
...prev.filter((m) => m.id !== failed.id && m.id !== saved.id),
|
|
saved,
|
|
]);
|
|
})
|
|
.catch(() => {
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.id === failed.id ? { ...m, pending: false, failed: true } : m,
|
|
),
|
|
);
|
|
});
|
|
},
|
|
[id],
|
|
);
|
|
|
|
// Which messages the caller has starred, so bubbles can show it.
|
|
const loadStars = useCallback(() => {
|
|
chat
|
|
.starred(id)
|
|
.then((rows) => setStarredIds(new Set((rows ?? []).map((m) => m.id))))
|
|
.catch(() => {});
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
loadStars();
|
|
}, [user, loadStars]);
|
|
|
|
const toggleStar = useCallback(
|
|
async (m: ChatMessage) => {
|
|
const starred = starredIds.has(m.id);
|
|
try {
|
|
await chat.setStar(id, m.id, !starred);
|
|
setStarredIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (starred) next.delete(m.id);
|
|
else next.add(m.id);
|
|
return next;
|
|
});
|
|
} catch {
|
|
toast.error("Could not update the star");
|
|
}
|
|
},
|
|
[id, starredIds],
|
|
);
|
|
|
|
const copyMessage = useCallback((m: ChatMessage) => {
|
|
// The stored body is clean text — no markers, no markup — so this is
|
|
// exactly what the reader sees.
|
|
navigator.clipboard
|
|
.writeText(m.body)
|
|
.then(() => toast.success("Copied"))
|
|
.catch(() => toast.error("Could not copy"));
|
|
}, []);
|
|
|
|
const deleteMessage = useCallback(
|
|
async (m: ChatMessage, scope: "me" | "everyone") => {
|
|
if (
|
|
scope === "everyone" &&
|
|
!window.confirm("Delete this message for everyone?")
|
|
) {
|
|
return;
|
|
}
|
|
try {
|
|
await chat.deleteMessage(id, m.id, scope);
|
|
if (scope === "me") {
|
|
setMessages((prev) => prev.filter((x) => x.id !== m.id));
|
|
} else {
|
|
// Tombstone in place — the realtime event does the same for others.
|
|
setMessages((prev) =>
|
|
prev.map((x) =>
|
|
x.id === m.id
|
|
? { ...x, deleted_at: new Date().toISOString(), body: "", attachments: [] }
|
|
: x,
|
|
),
|
|
);
|
|
}
|
|
} catch {
|
|
toast.error("Could not delete the message");
|
|
}
|
|
},
|
|
[id],
|
|
);
|
|
|
|
const reportMessage = useCallback(
|
|
async (m: ChatMessage) => {
|
|
const reason = window.prompt(
|
|
"Report this message. What's wrong with it?",
|
|
"",
|
|
);
|
|
if (reason === null) return;
|
|
try {
|
|
await chat.report(id, m.id, "abuse", reason);
|
|
toast.success("Reported. Our moderators will review it.");
|
|
} catch {
|
|
toast.error("Could not send the report");
|
|
}
|
|
},
|
|
[id],
|
|
);
|
|
|
|
/** Mark everything visible as read, so the sender's ticks turn blue. */
|
|
const markRead = useCallback(
|
|
(seq: number) => {
|
|
if (!seq) return;
|
|
chat.markRead(id, seq).catch(() => {});
|
|
},
|
|
[id],
|
|
);
|
|
|
|
useEffect(() => {
|
|
// Skip the optimistic sentinel — only a real server seq is worth acking.
|
|
const real = messages.filter((m) => !m.pending && !m.failed);
|
|
const newest = real[real.length - 1]?.seq;
|
|
if (newest) markRead(newest);
|
|
}, [messages, markRead]);
|
|
|
|
// Live thread updates.
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
const key = process.env.NEXT_PUBLIC_SOKETI_KEY;
|
|
const host = process.env.NEXT_PUBLIC_SOKETI_HOST;
|
|
if (!key || !host) return;
|
|
|
|
const port = Number(process.env.NEXT_PUBLIC_SOKETI_PORT || "443");
|
|
const forceTLS =
|
|
(process.env.NEXT_PUBLIC_SOKETI_FORCE_TLS ?? "true") !== "false";
|
|
const channelName = `private-conversation.${id}`;
|
|
|
|
let cancelled = false;
|
|
let cleanup: (() => void) | undefined;
|
|
|
|
void import("pusher-js").then(({ default: Pusher }) => {
|
|
if (cancelled) return;
|
|
const pusher = new Pusher(key, {
|
|
wsHost: host,
|
|
wsPort: port,
|
|
wssPort: port,
|
|
forceTLS,
|
|
enabledTransports: ["ws", "wss"],
|
|
disableStats: true,
|
|
cluster: "",
|
|
channelAuthorization: { customHandler: channelAuthorizer },
|
|
});
|
|
const channel = pusher.subscribe(channelName);
|
|
|
|
channel.bind("message", (m: ChatMessage) => {
|
|
setMessages((prev) => {
|
|
// The echo of our own send may arrive before or after the HTTP
|
|
// response, so match on both ids: the server's and the one we
|
|
// generated for the optimistic bubble.
|
|
if (
|
|
prev.some(
|
|
(x) => x.id === m.id || (!!m.client_msg_id && x.id === m.client_msg_id),
|
|
)
|
|
) {
|
|
return prev.map((x) =>
|
|
m.client_msg_id && x.id === m.client_msg_id ? m : x,
|
|
);
|
|
}
|
|
return [...prev, m];
|
|
});
|
|
});
|
|
channel.bind("message_deleted", ({ message_id }: { message_id: string }) => {
|
|
setMessages((prev) =>
|
|
prev.map((x) =>
|
|
x.id === message_id
|
|
? { ...x, deleted_at: new Date().toISOString(), body: "", attachments: [] }
|
|
: x,
|
|
),
|
|
);
|
|
});
|
|
channel.bind("receipt", () => {
|
|
chat.receipts(id).then(setReceipts).catch(() => {});
|
|
});
|
|
|
|
cleanup = () => {
|
|
channel.unbind_all();
|
|
pusher.unsubscribe(channelName);
|
|
pusher.disconnect();
|
|
};
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
cleanup?.();
|
|
};
|
|
}, [id, user]);
|
|
|
|
if (loading || !user) {
|
|
return (
|
|
<main className="flex-1 px-4 py-6">
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const nameFor = (senderId: string | null | undefined) =>
|
|
senderName(senderId, meta?.participants ?? [], user.id);
|
|
const title = meta ? conversationTitle(meta) : "Chat";
|
|
const muted = meta ? isMuted(meta) : false;
|
|
|
|
return (
|
|
<main
|
|
className={cn(
|
|
// Match the inbox and profile widths — a thread stretched across a
|
|
// desktop monitor gives bubbles an unreadable line length, and the
|
|
// eye has to travel between the avatar and the timestamp.
|
|
"mx-auto flex w-full max-w-2xl flex-col",
|
|
// Side rules so the narrower column reads as a panel rather than
|
|
// text floating in space.
|
|
"md:border-x md:border-border",
|
|
// Fill the viewport MINUS the chrome around it: a sticky h-12/sm:h-14
|
|
// header above, and on small screens the h-16 bottom nav the app
|
|
// layout reserves with pb-16. Plain 100dvh ignores both and pushes the
|
|
// composer below the fold.
|
|
// NB: the underscores are load-bearing. Tailwind turns `_` into a
|
|
// space, and calc() requires whitespace around a binary `-` — written
|
|
// without it the whole declaration is invalid and dropped, which
|
|
// collapses this to height:auto.
|
|
// Only while the keyboard is closed; otherwise the inline style below
|
|
// takes over and these would fight it.
|
|
!keyboardOpen &&
|
|
"h-[calc(100dvh_-_3rem_-_4rem)] sm:h-[calc(100dvh_-_3.5rem_-_4rem)] md:h-[calc(100dvh_-_3.5rem)]",
|
|
)}
|
|
style={
|
|
keyboardOpen && viewport
|
|
? {
|
|
// Pinned to the visible strip above the keyboard. Fixed rather
|
|
// than in-flow because iOS scrolls the layout viewport instead
|
|
// of resizing it, so an in-flow column keeps its old height and
|
|
// hides the composer underneath. left/right 0 with the existing
|
|
// mx-auto keeps the desktop column centred.
|
|
position: "fixed",
|
|
top: viewport.offsetTop,
|
|
left: 0,
|
|
right: 0,
|
|
height: viewport.height,
|
|
// Above the app's fixed bottom nav (z-40) so the composer can
|
|
// never be painted over by it.
|
|
zIndex: 50,
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
<header className="flex items-center gap-3 border-b border-border px-4 py-3">
|
|
<Link
|
|
href="/chats"
|
|
aria-label="Back to chats"
|
|
className="-ml-1 rounded-md p-1 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<ArrowLeft className="size-5" />
|
|
</Link>
|
|
|
|
{meta?.kind === "ai" ? (
|
|
<span
|
|
aria-hidden
|
|
className="inline-flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary"
|
|
>
|
|
<KautilyaIcon className="size-4" />
|
|
</span>
|
|
) : (
|
|
<UserAvatar
|
|
src={
|
|
meta?.kind === "group"
|
|
? groupAvatarUrl(id, meta?.avatar_key)
|
|
: meta?.peer?.avatar_url
|
|
}
|
|
name={title}
|
|
className="size-9"
|
|
/>
|
|
)}
|
|
|
|
<Link
|
|
href={`/chats/${id}/profile`}
|
|
className="flex min-w-0 flex-1 flex-col text-left hover:opacity-80"
|
|
aria-label="Chat details"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="truncate text-sm font-semibold text-foreground">
|
|
{title}
|
|
</h1>
|
|
{muted && (
|
|
<BellOff
|
|
className="size-3.5 text-muted-foreground"
|
|
aria-label="Muted"
|
|
/>
|
|
)}
|
|
</div>
|
|
{meta?.peer?.handle && (
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
@{meta.peer.handle}
|
|
</p>
|
|
)}
|
|
</Link>
|
|
</header>
|
|
|
|
{state === "error" ? (
|
|
<p className="p-4 text-sm text-destructive">
|
|
Could not load this conversation.
|
|
</p>
|
|
) : state === "loading" ? (
|
|
<p className="p-4 text-sm text-muted-foreground">Loading…</p>
|
|
) : (
|
|
<MessageList
|
|
messages={messages}
|
|
selfId={user.id}
|
|
peer={meta?.peer}
|
|
receipts={receipts}
|
|
isGroup={meta?.kind === "group"}
|
|
hasMore={hasMore}
|
|
loadingMore={loadingMore}
|
|
onLoadMore={loadOlder}
|
|
onReply={setReplyTo}
|
|
onMenu={(message, point) => setMenu({ message, point })}
|
|
starredIds={starredIds}
|
|
onRetry={retryMessage}
|
|
nameFor={nameFor}
|
|
/>
|
|
)}
|
|
|
|
{meta?.kind === "ai" ? (
|
|
<div className="border-t border-border px-4 py-3 text-center text-xs text-muted-foreground">
|
|
Kautilya is coming soon.
|
|
</div>
|
|
) : (
|
|
<ChatComposer
|
|
conversationId={id}
|
|
replyTo={replyTo}
|
|
replyToName={nameFor(replyTo?.sender_id)}
|
|
onCancelReply={() => setReplyTo(null)}
|
|
onSend={sendMessage}
|
|
disabled={state !== "ready"}
|
|
/>
|
|
)}
|
|
|
|
{menu && (
|
|
<MessageMenu
|
|
point={menu.point}
|
|
starred={starredIds.has(menu.message.id)}
|
|
onClose={() => setMenu(null)}
|
|
actions={{
|
|
onReply: () => setReplyTo(menu.message),
|
|
onCopy: () => copyMessage(menu.message),
|
|
onStar: () => void toggleStar(menu.message),
|
|
onForward: () => setForwarding(menu.message),
|
|
onDeleteForMe: () => void deleteMessage(menu.message, "me"),
|
|
// Only the sender may erase a message for everyone.
|
|
onDeleteForEveryone:
|
|
menu.message.sender_id === user.id
|
|
? () => void deleteMessage(menu.message, "everyone")
|
|
: undefined,
|
|
// Reporting your own message is meaningless.
|
|
onReport:
|
|
menu.message.sender_id === user.id
|
|
? undefined
|
|
: () => void reportMessage(menu.message),
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{forwarding && (
|
|
<ForwardDialog
|
|
message={forwarding}
|
|
onClose={() => setForwarding(null)}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|