308 lines
10 KiB
TypeScript
308 lines
10 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /chats — the chat inbox, split into two tabs:
|
|
*
|
|
* • "Chats" — DMs and groups.
|
|
* • "Kautilya" — threads with the AI study companion. The companion itself is
|
|
* still coming soon, so the tab renders its own empty state.
|
|
*
|
|
* Both tabs read the same endpoint with a different `tab` filter: server-side
|
|
* they are one pipeline over `conversations.kind`, not two implementations.
|
|
*
|
|
* New messages arrive as realtime `chat_activity` and highlight the affected
|
|
* row in place. They deliberately never reach the notification tray.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { MessageCircle, Search, Users, X } from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { useAuthGate } from "@/components/auth/auth-gate";
|
|
import { useNotifications } from "@/components/notifications/notifications-provider";
|
|
import { KautilyaIcon } from "@/components/selection-toolbar/shared";
|
|
import { ChatListItem } from "@/components/chat/chat-list-item";
|
|
import { NewGroupDialog } from "@/components/chat/new-group-dialog";
|
|
import {
|
|
chat,
|
|
conversationTitle,
|
|
type InboxItem,
|
|
type InboxTab,
|
|
} from "@/lib/chat";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** How long a row stays highlighted after a message lands. */
|
|
const HIGHLIGHT_MS = 4000;
|
|
|
|
export default function ChatsPage() {
|
|
const { user, loading } = useAuth();
|
|
const { requireAuth } = useAuthGate();
|
|
const { lastChatActivity } = useNotifications();
|
|
const router = useRouter();
|
|
|
|
const [tab, setTab] = useState<InboxTab>("chats");
|
|
const [searching, setSearching] = useState(false);
|
|
const [query, setQuery] = useState("");
|
|
|
|
// Closing clears the term too: leaving a filter applied behind a collapsed
|
|
// field is how a chat goes missing and looks like a bug.
|
|
const closeSearch = useCallback(() => {
|
|
setSearching(false);
|
|
setQuery("");
|
|
}, []);
|
|
const [items, setItems] = useState<InboxItem[]>([]);
|
|
const [state, setState] = useState<"loading" | "ready" | "error">("loading");
|
|
const [highlighted, setHighlighted] = useState<Set<string>>(new Set());
|
|
const [creatingGroup, setCreatingGroup] = useState(false);
|
|
const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
|
|
|
|
// Auth gate — same pattern as /notifications: offer the modal in place, and
|
|
// only leave the page if they dismiss it.
|
|
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]);
|
|
|
|
const load = useCallback(
|
|
(which: InboxTab) => {
|
|
if (!user) return;
|
|
setState("loading");
|
|
chat
|
|
.inbox(which)
|
|
.then((rows) => {
|
|
setItems(rows ?? []);
|
|
setState("ready");
|
|
})
|
|
.catch(() => setState("error"));
|
|
},
|
|
[user],
|
|
);
|
|
|
|
useEffect(() => {
|
|
load(tab);
|
|
}, [tab, load]);
|
|
|
|
// Clear pending highlight timers on unmount so they can't fire into an
|
|
// unmounted tree.
|
|
useEffect(() => {
|
|
const pending = timers.current;
|
|
return () => {
|
|
pending.forEach(clearTimeout);
|
|
pending.clear();
|
|
};
|
|
}, []);
|
|
|
|
// A message landed: refresh the list so its preview, order and unread count
|
|
// are authoritative, and flash the row it belongs to.
|
|
useEffect(() => {
|
|
if (!lastChatActivity) return;
|
|
const { conversation_id } = lastChatActivity;
|
|
|
|
load(tab);
|
|
|
|
setHighlighted((prev) => new Set(prev).add(conversation_id));
|
|
const existing = timers.current.get(conversation_id);
|
|
if (existing) clearTimeout(existing);
|
|
timers.current.set(
|
|
conversation_id,
|
|
setTimeout(() => {
|
|
setHighlighted((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(conversation_id);
|
|
return next;
|
|
});
|
|
timers.current.delete(conversation_id);
|
|
}, HIGHLIGHT_MS),
|
|
);
|
|
// `tab`/`load` are intentionally excluded: this should run when activity
|
|
// arrives, not when the tab changes (which reloads on its own).
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [lastChatActivity]);
|
|
|
|
if (loading || !user) {
|
|
return (
|
|
<main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6">
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
// Filtered here rather than on the server: the inbox is already loaded in
|
|
// full, so this is instant and keeps working offline. Matches the thread's
|
|
// name and, for a DM, the peer's handle — the two things you actually
|
|
// remember someone by.
|
|
const term = query.trim().toLowerCase();
|
|
const visible = term
|
|
? items.filter((item) => {
|
|
const title = conversationTitle(item).toLowerCase();
|
|
const handle = item.peer?.handle?.toLowerCase() ?? "";
|
|
return title.includes(term) || handle.includes(term);
|
|
})
|
|
: items;
|
|
|
|
return (
|
|
<main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
|
|
{searching ? (
|
|
// The search field REPLACES the header rather than sitting under it:
|
|
// the title and New group are not useful while filtering, and stacking
|
|
// a second row would push the list down every time it opens.
|
|
<div className="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
|
|
<Search className="size-4 shrink-0 text-muted-foreground" />
|
|
<input
|
|
autoFocus
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search chats"
|
|
className="flex-1 bg-transparent text-sm outline-none pointer-coarse:text-base placeholder:text-muted-foreground"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={closeSearch}
|
|
aria-label="Close search"
|
|
className="shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground">
|
|
Chats
|
|
</h1>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSearching(true)}
|
|
aria-label="Search chats"
|
|
className="inline-flex size-9 items-center justify-center rounded-lg border border-border text-foreground hover:bg-muted/60"
|
|
>
|
|
<Search className="size-4" />
|
|
</button>
|
|
{tab === "chats" && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setCreatingGroup(true)}
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted/60"
|
|
>
|
|
<Users className="size-4" /> New group
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-1 rounded-lg bg-muted p-1">
|
|
<TabButton active={tab === "chats"} onClick={() => setTab("chats")}>
|
|
Chats
|
|
</TabButton>
|
|
<TabButton
|
|
active={tab === "kautilya"}
|
|
onClick={() => setTab("kautilya")}
|
|
>
|
|
Kautilya
|
|
</TabButton>
|
|
</div>
|
|
|
|
{state === "error" ? (
|
|
<p className="text-sm text-destructive">
|
|
Could not load your chats. Please try again.
|
|
</p>
|
|
) : state === "loading" ? (
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
) : visible.length === 0 ? (
|
|
// A search that matches nothing is NOT an empty inbox: saying "no
|
|
// chats yet" there reads as data loss rather than a narrow filter.
|
|
term ? (
|
|
<Empty
|
|
icon={<Search className="size-8" />}
|
|
title="No matches"
|
|
text={`Nothing in ${tab === "kautilya" ? "Kautilya" : "your chats"} matches “${query.trim()}”.`}
|
|
/>
|
|
) : tab === "kautilya" ? (
|
|
<Empty
|
|
icon={<KautilyaIcon className="size-8" />}
|
|
title="Kautilya is coming soon"
|
|
text="An AI study companion tuned on Śrīla Prabhupāda's books, letters, and lectures."
|
|
/>
|
|
) : (
|
|
<Empty
|
|
icon={<MessageCircle className="size-8" />}
|
|
title="No chats yet"
|
|
text="Open someone's profile to start a conversation."
|
|
/>
|
|
)
|
|
) : (
|
|
<ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
|
|
{visible.map((item) => (
|
|
<ChatListItem
|
|
key={item.id}
|
|
item={item}
|
|
selfId={user.id}
|
|
highlighted={highlighted.has(item.id)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{creatingGroup && (
|
|
<NewGroupDialog onClose={() => setCreatingGroup(false)} />
|
|
)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function TabButton({
|
|
active,
|
|
onClick,
|
|
children,
|
|
}: {
|
|
active: boolean;
|
|
onClick: () => void;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={cn(
|
|
"flex-1 inline-flex items-center justify-center gap-2 h-9 rounded-md text-sm font-medium transition-colors",
|
|
active
|
|
? "bg-background text-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function Empty({
|
|
icon,
|
|
title,
|
|
text,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
text: string;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-3 py-16 text-center">
|
|
<span
|
|
aria-hidden
|
|
className="inline-flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary"
|
|
>
|
|
{icon}
|
|
</span>
|
|
<p className="text-base font-medium text-foreground">{title}</p>
|
|
<p className="max-w-sm text-sm text-muted-foreground">{text}</p>
|
|
</div>
|
|
);
|
|
}
|