feat: improve chat system, profile pictures, and rewrite README

- Chat list now built from messages table (shows all chats with messages, sorted by most recent)
- Deduplicate contacts with multiple JIDs (lid/pn) to avoid duplicate entries
- Infinite scroll pagination (20 chats at a time with IntersectionObserver)
- Lazy-loaded profile pictures via new API endpoint (/api/whatsapp/[id]/profile-picture)
- Fix hydration mismatch in AudioPlayer by replacing Math.random() with seeded PRNG
- Add border to incoming messages for better visibility in dark mode
- Add disappearingMessagesInChat: false to prevent "old version" warning
- Rewrite README with use cases, architecture diagrams, API docs, and setup guide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: EijunnN

README.md

@@ -0,0 +1,67 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { getSocket } from "@/lib/whatsapp";
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/db";
+import { whatsappTable } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Verify ownership
+  const wa = await db.query.whatsappTable.findFirst({
+    where: and(
+      eq(whatsappTable.id, id),
+      eq(whatsappTable.userId, session.user.id)
+    ),
+  });
+
+  if (!wa) {
+    return NextResponse.json({ error: "Not Found" }, { status: 404 });
+  }
+
+  const jid = req.nextUrl.searchParams.get("jid");
+  if (!jid) {
+    return NextResponse.json(
+      { error: "Missing jid query parameter" },
+      { status: 400 }
+    );
+  }
+
+  const sock = getSocket(id);
+  if (!sock) {
+    return NextResponse.json(
+      { error: "WhatsApp instance not connected" },
+      { status: 503 }
+    );
+  }
+
+  let url: string | null = null;
+  try {
+    const result = await sock.profilePictureUrl(jid, "preview");
+    url = result ?? null;
+  } catch {
+    // profilePictureUrl throws when there is no profile picture set
+    url = null;
+  }
+
+  return NextResponse.json(
+    { url },
+    {
+      headers: {
+        "Cache-Control": "public, max-age=3600",
+      },
+    }
+  );
+}

src/app/api/whatsapp/[id]/profile-picture/route.ts

@@ -30,7 +30,7 @@ export async function sendMessageAction(
     throw new Error("WhatsApp is not connected");
   }
 
-  const result = await sock.sendMessage(chatId, { text: message });
+  const result = await sock.sendMessage(chatId, { text: message, disappearingMessagesInChat: false });
 
   // Save message to database with tracking
   if (result?.key?.id) {
@@ -125,6 +125,7 @@ export async function sendMediaMessageAction(
     };
   }
 
+  (messageContent as Record<string, unknown>).disappearingMessagesInChat = false;
   const result = await sock.sendMessage(chatId, messageContent as never);
 
   // Save message to database with tracking

src/app/whatsapp/[slug]/chats/[chatId]/actions.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { Play, Pause, Download } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -17,6 +17,20 @@ function formatTime(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
+// Deterministic pseudo-random based on a seed string (avoids hydration mismatch)
+function seededRandom(seed: string): () => number {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) {
+    h = Math.imul(31, h) + seed.charCodeAt(i) | 0;
+  }
+  return () => {
+    h = Math.imul(h ^ (h >>> 16), 0x45d9f3b);
+    h = Math.imul(h ^ (h >>> 13), 0x45d9f3b);
+    h = (h ^ (h >>> 16)) >>> 0;
+    return (h % 1000) / 1000;
+  };
+}
+
 export function AudioPlayer({ src, fileName, fromMe }: AudioPlayerProps) {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -77,6 +91,12 @@ export function AudioPlayer({ src, fileName, fromMe }: AudioPlayerProps) {
 
   const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
 
+  // Generate deterministic waveform bars based on src URL
+  const waveformBars = useMemo(() => {
+    const rand = seededRandom(src);
+    return Array.from({ length: 30 }, (_, i) => 20 + Math.sin(i * 0.5) * 15 + rand() * 10);
+  }, [src]);
+
   return (
     <div className="flex items-center gap-2 min-w-[200px] max-w-[280px]">
       <audio ref={audioRef} src={src} preload="metadata" />
@@ -110,8 +130,7 @@ export function AudioPlayer({ src, fileName, fromMe }: AudioPlayerProps) {
         >
           {/* Fake waveform bars */}
           <div className="absolute inset-0 flex items-center justify-around px-1 gap-[2px]">
-            {Array.from({ length: 30 }).map((_, i) => {
-              const height = 20 + Math.sin(i * 0.5) * 15 + Math.random() * 10;
+            {waveformBars.map((height, i) => {
               const isPlayed = (i / 30) * 100 <= progress;
               return (
                 <div

src/app/whatsapp/[slug]/chats/[chatId]/audio-player.tsx

@@ -193,7 +193,7 @@ export function ChatMessages({ initialMessages, chatId, slug, senderNames = {},
                 "group relative w-fit max-w-[85%] md:max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm break-words [overflow-wrap:anywhere]",
                 msg.fromMe
                   ? "ml-auto bg-primary text-primary-foreground"
-                  : "bg-muted"
+                  : "bg-card border border-border"
               )}
             >
               {/* Sender Name for Group Messages */}

src/app/whatsapp/[slug]/chats/[chatId]/chat-messages.tsx

@@ -2,13 +2,13 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import { useRef, useState, useEffect, useMemo } from "react";
-import { Search } from "lucide-react";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { Search, Loader2 } from "lucide-react";
 
 interface Chat {
   id: string;
@@ -27,6 +27,7 @@ interface Chat {
 interface ChatListProps {
   chats: Chat[];
   slug: string;
+  whatsappId: string;
 }
 
 function formatMessageTime(timestamp: number | null | undefined): string {
@@ -94,7 +95,44 @@ function MarqueeText({ text, className }: { text: string; className?: string })
   );
 }
 
-export function ChatList({ chats, slug }: ChatListProps) {
+function useProfilePictures(whatsappId: string, visibleIdentifiers: string[]) {
+  const [picUrls, setPicUrls] = useState<Map<string, string | null>>(new Map());
+  const fetchingRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    const toFetch = visibleIdentifiers.filter(
+      (id) => !picUrls.has(id) && !fetchingRef.current.has(id)
+    );
+    if (toFetch.length === 0) return;
+
+    for (const jid of toFetch) {
+      fetchingRef.current.add(jid);
+      fetch(`/api/whatsapp/${whatsappId}/profile-picture?jid=${encodeURIComponent(jid)}`)
+        .then((res) => res.json())
+        .then((data: { url: string | null }) => {
+          setPicUrls((prev) => {
+            const next = new Map(prev);
+            next.set(jid, data.url);
+            return next;
+          });
+        })
+        .catch(() => {
+          setPicUrls((prev) => {
+            const next = new Map(prev);
+            next.set(jid, null);
+            return next;
+          });
+        })
+        .finally(() => {
+          fetchingRef.current.delete(jid);
+        });
+    }
+  }, [whatsappId, visibleIdentifiers, picUrls]);
+
+  return picUrls;
+}
+
+export function ChatList({ chats, slug, whatsappId }: ChatListProps) {
   const pathname = usePathname();
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -121,6 +159,88 @@ export function ChatList({ chats, slug }: ChatListProps) {
     });
   }, [chats, searchQuery]);
 
+  // All chats come from messages table, already sorted by most recent
+  const displayChats = filteredChats;
+
+  const PAGE_SIZE = 20;
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  // Reset visible count when search query changes
+  useEffect(() => {
+    setVisibleCount(PAGE_SIZE);
+  }, [searchQuery]);
+
+
+  const isSearching = searchQuery.trim().length > 0;
+  const paginatedChats = isSearching ? displayChats : displayChats.slice(0, visibleCount);
+  const hasMore = !isSearching && visibleCount < displayChats.length;
+
+  // Track which chat items are visible on screen for lazy profile picture loading
+  const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
+  const chatItemRefs = useRef<Map<string, HTMLElement>>(new Map());
+  const visibilityObserverRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    visibilityObserverRef.current = new IntersectionObserver(
+      (entries) => {
+        setVisibleIds((prev) => {
+          const next = new Set(prev);
+          let changed = false;
+          for (const entry of entries) {
+            const id = (entry.target as HTMLElement).dataset.chatIdentifier;
+            if (!id) continue;
+            if (entry.isIntersecting && !next.has(id)) {
+              next.add(id);
+              changed = true;
+            }
+          }
+          return changed ? next : prev;
+        });
+      },
+      { rootMargin: '100px' }
+    );
+
+    // Observe all currently registered refs
+    for (const el of chatItemRefs.current.values()) {
+      visibilityObserverRef.current.observe(el);
+    }
+
+    return () => visibilityObserverRef.current?.disconnect();
+  }, [paginatedChats]);
+
+  const chatItemRef = useCallback((identifier: string, el: HTMLElement | null) => {
+    if (el) {
+      chatItemRefs.current.set(identifier, el);
+      visibilityObserverRef.current?.observe(el);
+    } else {
+      const prev = chatItemRefs.current.get(identifier);
+      if (prev) visibilityObserverRef.current?.unobserve(prev);
+      chatItemRefs.current.delete(identifier);
+    }
+  }, []);
+
+  const visibleIdentifiers = useMemo(() => Array.from(visibleIds), [visibleIds]);
+  const profilePicUrls = useProfilePictures(whatsappId, visibleIdentifiers);
+
+  // IntersectionObserver to load more chats when sentinel is visible
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isSearching) {
+          setVisibleCount((prev) => Math.min(prev + PAGE_SIZE, displayChats.length));
+        }
+      },
+      { rootMargin: '200px' }
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [displayChats.length, isSearching]);
+
   return (
     <div className="flex flex-col flex-1 min-h-0">
       {/* Sticky Search Header */}
@@ -138,11 +258,11 @@ export function ChatList({ chats, slug }: ChatListProps) {
 
       <ScrollArea className="flex-1 min-h-0 overflow-auto max-w-full">
         <div className="flex flex-col gap-1 p-2">
-          {filteredChats.length === 0 ? (
+          {paginatedChats.length === 0 ? (
             <div className="text-center text-muted-foreground py-8 text-sm">
               No se encontraron conversaciones
             </div>
-          ) : filteredChats.map((chat) => {
+          ) : paginatedChats.map((chat) => {
           const chatPath = `/whatsapp/${slug}/chats/${encodeURIComponent(chat.identifier)}`;
           const isActive = pathname === chatPath || pathname === decodeURIComponent(chatPath);
 
@@ -151,24 +271,32 @@ export function ChatList({ chats, slug }: ChatListProps) {
           const isValidName = rawName && rawName.trim().length > 1 && rawName !== '.';
           const phoneNumber = chat.pn?.split('@')[0] || chat.lid?.split('@')[0];
           const displayName = isValidName ? rawName : (phoneNumber || chat.identifier || '?');
+          const profilePicUrl = profilePicUrls.get(chat.identifier);
 
           return (
             <Link
               key={chat.id}
               href={chatPath}
+              ref={(el) => chatItemRef(chat.identifier, el)}
+              data-chat-identifier={chat.identifier}
               className={cn(
                 "flex items-center gap-3 p-3 rounded-lg transition-colors text-left max-w-[300px]",
                 isActive ? "bg-accent" : "hover:bg-accent"
               )}
             >
-              <Avatar>
-                <AvatarFallback suppressHydrationWarning>{displayName.slice(0, 2).toUpperCase()}</AvatarFallback>
-              </Avatar>
+              <div className="relative shrink-0">
+                <Avatar>
+                  {profilePicUrl && (
+                    <AvatarImage src={profilePicUrl} alt={displayName} />
+                  )}
+                  <AvatarFallback suppressHydrationWarning>{displayName.slice(0, 2).toUpperCase()}</AvatarFallback>
+                </Avatar>
+              </div>
               <div className="flex-1 overflow-hidden min-w-0 w-full">
                 <div className="flex items-center justify-between gap-2">
-                  <MarqueeText text={displayName} className="font-medium flex-1 min-w-0" />
+                  <MarqueeText text={displayName} className="flex-1 min-w-0 font-semibold" />
                   <div className="flex items-center gap-1 shrink-0">
-                    {chat.type === 'group' && <Badge variant="secondary" className="text-[10px] h-4 px-1">Grupo</Badge>}
+                    {chat.type === 'group' && <Badge variant="secondary" className="text-[10px] h-4 px-1 rounded-full">Grupo</Badge>}
                     {chat.lastMessageAt && (
                       <span className="text-[10px] text-muted-foreground" suppressHydrationWarning>
                         {formatMessageTime(chat.lastMessageAt)}
@@ -183,6 +311,16 @@ export function ChatList({ chats, slug }: ChatListProps) {
             </Link>
           );
         })}
+
+          {/* Sentinel for infinite scroll */}
+          <div ref={sentinelRef} className="h-1" />
+          {hasMore && (
+            <div className="flex items-center justify-center gap-2 py-3 text-xs text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              Cargando más...
+            </div>
+          )}
+
         </div>
       </ScrollArea>
     </div>