feat: chat

2026-08-29 03:49:58 +05:30
parent 3257efb06a
commit 523b6fa7e8
34 changed files with 5381 additions and 11 deletions
@@ -0,0 +1,184 @@
+"use client";
+
+/**
+ * Search for people and add them to a group.
+ *
+ * Search runs through the same-origin /api/search/users proxy the search page
+ * uses. It returns handles, which is exactly what the member API takes — no id
+ * plumbing needed.
+ */
+
+import { useEffect, useState } from "react";
+import { Check, Search, X } from "lucide-react";
+import { toast } from "sonner";
+import { useAuth } from "@/components/auth/auth-provider";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { Button } from "@/components/ui/button";
+import { chat } from "@/lib/chat";
+
+type Candidate = { handle: string; name: string; avatar_url: string | null };
+
+export function AddMembersDialog({
+  conversationId,
+  existing,
+  onClose,
+  onAdded,
+}: {
+  conversationId: string;
+  /** Handles already in the group. Filtered out of results entirely. */
+  existing: string[];
+  onClose: () => void;
+  onAdded: () => void;
+}) {
+  const { user } = useAuth();
+  const [query, setQuery] = useState("");
+  // Results are stored with the query they belong to, so what's displayed can
+  // be derived: a stale page from a previous query simply stops matching, and
+  // nothing has to be cleared from an effect.
+  const [results, setResults] = useState<{ q: string; rows: Candidate[] }>({
+    q: "",
+    rows: [],
+  });
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false);
+
+  const q = query.trim();
+  const searchable = q.length >= 2;
+  // Current members and the caller are dropped rather than shown greyed out:
+  // this list exists to answer "who can I add?", and anyone already here is
+  // not an answer to that.
+  const alreadyIn = new Set(existing);
+  const visible =
+    results.q === q
+      ? results.rows.filter(
+          (u) => u.handle !== user?.handle && !alreadyIn.has(u.handle),
+        )
+      : [];
+
+  useEffect(() => {
+    if (!searchable) return;
+    const timer = setTimeout(() => {
+      fetch(`/api/search/users?q=${encodeURIComponent(q)}&limit=15`)
+        .then((r) => r.json())
+        .then((data: { results?: Candidate[] }) =>
+          setResults({ q, rows: data.results ?? [] }),
+        )
+        .catch(() => setResults({ q, rows: [] }));
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [q, searchable]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const toggle = (handle: string) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(handle)) next.delete(handle);
+      else next.add(handle);
+      return next;
+    });
+
+  const submit = async () => {
+    if (picked.size === 0) return;
+    setBusy(true);
+    try {
+      await chat.addMembers(conversationId, [...picked]);
+      toast.success(
+        picked.size === 1 ? "Member added" : `${picked.size} members added`,
+      );
+      onAdded();
+      onClose();
+    } catch {
+      toast.error("Could not add members");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center">
+      <div className="absolute inset-0" onClick={onClose} aria-hidden />
+      <div className="relative z-10 flex max-h-[75vh] w-full max-w-md flex-col overflow-hidden rounded-t-2xl border border-border bg-background sm:rounded-2xl">
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <h2 className="text-sm font-semibold text-foreground">Add members</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="rounded-md p-1 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="border-b border-border p-3">
+          <div className="flex items-center gap-2 rounded-lg 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 by name or handle"
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {!searchable ? (
+            <p className="p-4 text-sm text-muted-foreground">
+              Type at least two characters to search.
+            </p>
+          ) : visible.length === 0 ? (
+            <p className="p-4 text-sm text-muted-foreground">No one found.</p>
+          ) : (
+            <ul className="divide-y divide-border">
+              {visible.map((u) => (
+                <li key={u.handle}>
+                  <button
+                    type="button"
+                    onClick={() => toggle(u.handle)}
+                    className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/60"
+                  >
+                    <UserAvatar
+                      src={u.avatar_url}
+                      name={u.name}
+                      className="size-9 shrink-0"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm text-foreground">
+                        {u.name}
+                      </p>
+                      <p className="truncate text-xs text-muted-foreground">
+                        @{u.handle}
+                      </p>
+                    </div>
+                    {picked.has(u.handle) && (
+                      <Check className="size-4 shrink-0 text-primary" />
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="border-t border-border p-3">
+          <Button
+            className="w-full"
+            disabled={picked.size === 0 || busy}
+            onClick={submit}
+          >
+            {picked.size === 0
+              ? "Select people to add"
+              : `Add ${picked.size} ${picked.size === 1 ? "person" : "people"}`}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}