added the date time and proper conversation history

src/app/chat/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 import { useSocket, type ChatMessage, type RoomNotice } from "@/context/SocketContext";
-import { fetchConversations, createConversation, fetchAllUsers, ConversationType, addParticipant, removeParticipant } from "@/lib/api";
+import { fetchConversations, createConversation, fetchAllUsers, ConversationType, addParticipant, removeParticipant, fetchMessages } from "@/lib/api";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -14,23 +14,12 @@ import {
   Plus,
   LogOut,
   Loader2,
-  Hash,
-  Wifi,
-  WifiOff,
   Users,
   User as UserIcon,
   UserMinus,
   UserPlus,
+  ChevronDown,
 } from "lucide-react";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar";
-import { useDebounce } from "@/hooks/useDebounce";
-
-
-
 
 interface Room {
   id: string;
@@ -39,7 +28,6 @@ interface Room {
   participants: { _id: string; name: string }[];
 }
 
-
 export default function ChatPage() {
   const router = useRouter();
   const { user, isLoading: authLoading, logout } = useAuth();
@@ -56,21 +44,36 @@ export default function ChatPage() {
     setCurrentRoom,
     clearMessages,
     p2pReady,
+    setMessages,
     clearP2PReady,
   } = useSocket();
 
   const [text, setText] = useState("");
   const [roomSearch, setRoomSearch] = useState("");
   const [userSearch, setUserSearch] = useState("");
-  const [activeTab, setActiveTab] = useState<"rooms" | "users" | "create">("rooms");
+  const [activeTab, setActiveTab] = useState<"rooms" | "users">("rooms");
+  const [showCreateDropdown, setShowCreateDropdown] = useState(false);
   const [newRoomName, setNewRoomName] = useState("");
   const [rooms, setRooms] = useState<Room[]>([]);
   const [allUsers, setAllUsers] = useState<any[]>([]);
+  const [showManageDropdown, setShowManageDropdown] = useState(false);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const manageDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Debounce helper
+  const useDebounce = (value: string, delay: number) => {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+      const t = setTimeout(() => setDebounced(value), delay);
+      return () => clearTimeout(t);
+    }, [value, delay]);
+    return debounced;
+  };
 
   const debouncedRoomSearch = useDebounce(roomSearch, 300);
   const debouncedUserSearch = useDebounce(userSearch, 300);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const [managingRoom, setManagingRoom] = useState<Room | null>(null);
 
   // Auth guard
   useEffect(() => {
@@ -81,7 +84,6 @@ export default function ChatPage() {
 
   // Fetch rooms & Auto-join
   useEffect(() => {
-    // Guard: wait for everything needed
     if (!isConnected || !user?.userId || allUsers.length === 0) return;
 
     fetchConversations(user.userId)
@@ -89,33 +91,22 @@ export default function ChatPage() {
         const loadedRooms = Array.isArray(data)
           ? data.map((c) => {
             const isGroup = c.type === "group";
-
             let roomName = c.name;
 
-            // FIX: derive name for P2P
             if (!isGroup) {
               let otherUserName = "Unknown User";
-
-              // Case 1: participants are objects
               if (typeof c.participants?.[0] === "object") {
                 const otherUser = c.participants.find(
                   (p: any) => p._id !== user.userId
                 );
                 otherUserName = otherUser?.name || otherUserName;
-              }
+              } else {
-              // Case 2: participants are IDs
-              else {
                 const otherUserId = c.participants?.find(
                   (id: string) => id !== user.userId
                 );
-
+                const otherUser = allUsers.find((u) => u._id === otherUserId);
-                const otherUser = allUsers.find(
-                  (u) => u._id === otherUserId
-                );
-
                 otherUserName = otherUser?.name || otherUserName;
               }
-
               roomName = otherUserName;
             }
 
@@ -130,7 +121,6 @@ export default function ChatPage() {
 
         setRooms(loadedRooms);
 
-        // Auto-join first room (only once)
         if (!currentRoom && loadedRooms.length > 0) {
           const firstRoom = loadedRooms[0];
           setCurrentRoom(firstRoom.id);
@@ -142,7 +132,40 @@ export default function ChatPage() {
       });
   }, [isConnected, user, allUsers, currentRoom, joinRoom, setCurrentRoom]);
 
-  // Fetch all users for P2P tab
+
+
+
+
+
+  useEffect(() => {
+    if (!currentRoom) return;
+
+    fetchMessages(currentRoom)
+      .then((data) => {
+        const normalized = data.map((msg: any) => ({
+          _id: msg._id,
+          roomId: msg.conversationId,
+          senderId: msg.senderId._id,
+          username: msg.senderId.name,
+          text: msg.text,
+          createdAt: msg.createdAt,
+        }));
+
+        // Replace only this room's messages
+        setMessages((prev) => {
+          const others = prev.filter((m) => m.roomId !== currentRoom);
+          return [...others, ...normalized];
+        });
+      })
+      .catch((err) => {
+        console.error("Failed to fetch messages:", err);
+      });
+  }, [currentRoom, setMessages]);
+
+
+
+
+  // Fetch all users
   useEffect(() => {
     if (!user) return;
     fetchAllUsers()
@@ -154,30 +177,52 @@ export default function ChatPage() {
       .catch(console.error);
   }, [user]);
 
-  // ── React to P2P Ready event
+  // React to P2P Ready event
   useEffect(() => {
     if (!p2pReady) return;
-
     const targetUser = allUsers.find((u) => u._id === p2pReady.targetUserId);
     const roomName = targetUser?.name || "Direct Message";
 
-    // Add the new P2P room to sidebar if not already there
     setRooms((prev) => {
       if (prev.find((r) => r.id === p2pReady.roomId)) return prev;
-      return [...prev, { id: p2pReady.roomId, name: roomName, isGroup: false }];
+      return [
+        ...prev,
+        { id: p2pReady.roomId, name: roomName, isGroup: false, participants: [] },
+      ];
     });
 
-    // Switch to rooms tab
     setActiveTab("rooms");
     clearP2PReady();
   }, [p2pReady, allUsers, clearP2PReady]);
 
-  // ── Scroll to bottom on new messages
+  // Scroll to bottom on new messages
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, notices]);
 
-  // ── Filtered rooms
+  // Close create dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!dropdownRef.current) return;
+      if (dropdownRef.current.contains(e.target as Node)) return;
+      setShowCreateDropdown(false);
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Close manage dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!manageDropdownRef.current) return;
+      if (manageDropdownRef.current.contains(e.target as Node)) return;
+      setShowManageDropdown(false);
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Filtered rooms
   const filteredRooms = useMemo(() => {
     if (!debouncedRoomSearch.trim()) return rooms;
     return rooms.filter((r) =>
@@ -185,7 +230,7 @@ export default function ChatPage() {
     );
   }, [rooms, debouncedRoomSearch]);
 
-  // ── Messages for current room 
+  // Messages for current room
   const roomMessages = useMemo(
     () => messages.filter((m) => m.roomId === currentRoom),
     [messages, currentRoom]
@@ -196,17 +241,13 @@ export default function ChatPage() {
     [notices, currentRoom]
   );
 
-  // ── Handlers 
+  // Handlers
   const handleSelectRoom = (room: Room) => {
     if (currentRoom === room.id) return;
-
+    if (currentRoom) leaveRoom(currentRoom);
-    // Leave old room
-    if (currentRoom) {
-      leaveRoom(currentRoom);
-    }
-    // Join new room
     setCurrentRoom(room.id);
     joinRoom(room.id);
+    setShowManageDropdown(false);
   };
 
   const handleSend = () => {
@@ -225,12 +266,11 @@ export default function ChatPage() {
   const handleCreateRoom = async () => {
     const name = newRoomName.trim();
     if (!name) return;
-    console.log(user);
     try {
       const created = await createConversation({
         name,
         type: ConversationType.GROUP,
-        participants: [user!.userId], // send userId not username
+        participants: [user!.userId],
       });
       const newRoom: Room = {
         id: created._id || created.id,
@@ -238,8 +278,11 @@ export default function ChatPage() {
         isGroup: true,
         participants: created.participants || [],
       };
-      setRooms(prev => prev.find(r => r.id === newRoom.id) ? prev : [...prev, newRoom]);
+      setRooms((prev) =>
+        prev.find((r) => r.id === newRoom.id) ? prev : [...prev, newRoom]
+      );
       setNewRoomName("");
+      setShowCreateDropdown(false);
       setActiveTab("rooms");
       handleSelectRoom(newRoom);
     } catch (err) {
@@ -247,17 +290,30 @@ export default function ChatPage() {
     }
   };
 
-
   const handleAddParticipant = async (convId: string, userId: string) => {
     try {
       const updated = await addParticipant(convId, userId);
-      setRooms(prev => prev.map(r =>
+
-        r.id === convId
+      // Normalize participants: if they're plain ID strings, hydrate with names from allUsers
-          ? { ...r, participants: updated.participants || r.participants }
+      const rawParticipants: any[] = updated.participants || [];
-          : r
+      const hydrated = rawParticipants.map((p: any) => {
-      ));
+        if (typeof p === "string") {
-      // refresh managingRoom state
+          const found = allUsers.find((u) => u._id === p);
-      setManagingRoom(prev => prev?.id === convId ? { ...prev, participants: updated.participants || prev.participants } : prev);
+          return found ? { _id: found._id, name: found.name } : { _id: p, name: p };
+        }
+        // Already an object — but name might be missing, try to fill it in
+        if (!p.name) {
+          const found = allUsers.find((u) => u._id === (p._id ?? p));
+          return found ? { _id: found._id, name: found.name } : p;
+        }
+        return p;
+      });
+
+      setRooms((prev) =>
+        prev.map((r) =>
+          r.id === convId ? { ...r, participants: hydrated } : r
+        )
+      );
     } catch (err: any) {
       console.error("Add participant failed:", err.message);
     }
@@ -266,18 +322,53 @@ export default function ChatPage() {
   const handleRemoveParticipant = async (convId: string, userId: string) => {
     try {
       const updated = await removeParticipant(convId, userId);
-      setRooms(prev => prev.map(r =>
+
-        r.id === convId
+      const rawParticipants: any[] = updated.participants || [];
-          ? { ...r, participants: updated.participants || r.participants }
+      const hydrated = rawParticipants.map((p: any) => {
-          : r
+        if (typeof p === "string") {
-      ));
+          const found = allUsers.find((u) => u._id === p);
-      setManagingRoom(prev => prev?.id === convId ? { ...prev, participants: updated.participants || prev.participants } : prev);
+          return found ? { _id: found._id, name: found.name } : { _id: p, name: p };
+        }
+        if (!p.name) {
+          const found = allUsers.find((u) => u._id === (p._id ?? p));
+          return found ? { _id: found._id, name: found.name } : p;
+        }
+        return p;
+      });
+
+      setRooms((prev) =>
+        prev.map((r) =>
+          r.id === convId ? { ...r, participants: hydrated } : r
+        )
+      );
     } catch (err: any) {
       console.error("Remove participant failed:", err.message);
     }
   };
 
 
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const today = new Date();
+
+    const isToday = date.toDateString() === today.toDateString();
+    if (isToday) return "Today";
+
+    return date.toLocaleDateString([], {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    });
+  };
+
+  const formatTime = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
   const handleStartP2P = (targetUser: any) => {
     if (!targetUser?._id) return;
     startP2P(targetUser._id);
@@ -289,7 +380,7 @@ export default function ChatPage() {
     logout();
   };
 
-  // ── Loading / Auth guard ──────────────────────────────────────────
+  // Loading / Auth guard
   if (authLoading || !user) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background">
@@ -300,6 +391,12 @@ export default function ChatPage() {
 
   const selectedRoom = rooms.find((r) => r.id === currentRoom);
 
+  // Participants for manage dropdown (current selected group room)
+  const manageParticipants = selectedRoom?.participants ?? [];
+  const addableUsers = allUsers.filter(
+    (u) => !manageParticipants.some((p: any) => (p._id ?? p) === u._id)
+  );
+
   return (
     <div className="flex h-screen">
       {/* ================= LEFT SIDEBAR ================= */}
@@ -308,23 +405,44 @@ export default function ChatPage() {
         <div className="flex items-center justify-between p-4">
           <div className="flex items-center gap-2">
             <h2 className="text-xl font-semibold">Chats</h2>
-            {/* Connection indicator */}
-            {isConnected ? (
-              <Wifi className="w-4 h-4 text-green-500" />
-            ) : (
-              <WifiOff className="w-4 h-4 text-red-500" />
-            )}
           </div>
+
           <div className="flex items-center gap-1">
+            {/* Create Group Dropdown */}
+            <div className="relative" ref={dropdownRef}>
               <Button
                 size="icon"
                 variant="ghost"
                 className="rounded-full"
-              onClick={() => setActiveTab(activeTab === "create" ? "rooms" : "create")}
+                onClick={() => setShowCreateDropdown((prev) => !prev)}
-              title="Create room"
+                title="Create group"
               >
                 <Plus className="w-4 h-4" />
               </Button>
+
+              {showCreateDropdown && (
+                <div className="absolute right-0 mt-2 w-64 bg-background border rounded-xl shadow-lg p-3 space-y-2 z-50">
+                  <Input
+                    placeholder="Room name..."
+                    value={newRoomName}
+                    onChange={(e) => setNewRoomName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleCreateRoom();
+                    }}
+                    autoFocus
+                  />
+                  <Button
+                    onClick={handleCreateRoom}
+                    disabled={!newRoomName.trim()}
+                    className="w-full"
+                  >
+                    Create Group
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {/* Logout */}
             <Button
               size="icon"
               variant="ghost"
@@ -339,10 +457,11 @@ export default function ChatPage() {
 
         {/* USER INFO */}
         <div className="px-4 pb-2 text-sm text-muted-foreground">
-          Logged in as <span className="font-medium text-foreground">{user.username}</span>
+          Logged in as{" "}
+          <span className="font-medium text-foreground">{user.username}</span>
         </div>
 
-        {/* TABS */}
+        {/* TABS — only Chats & People */}
         <div className="flex gap-4 px-4 text-sm font-medium border-b pb-2">
           <button
             onClick={() => setActiveTab("rooms")}
@@ -362,38 +481,8 @@ export default function ChatPage() {
           >
             People
           </button>
-          <button
-            onClick={() => setActiveTab("create")}
-            className={`pb-1 ${activeTab === "create"
-              ? "text-primary border-b-2 border-primary"
-              : "text-muted-foreground"
-              }`}
-          >
-            Group
-          </button>
         </div>
 
-        {/* CREATE ROOM PANEL */}
-        {activeTab === "create" && (
-          <div className="p-4 space-y-3 border-b">
-            <Input
-              placeholder="Room name..."
-              value={newRoomName}
-              onChange={(e) => setNewRoomName(e.target.value)}
-              className="rounded-full bg-muted"
-              onKeyDown={(e) => e.key === "Enter" && handleCreateRoom()}
-            />
-            <Button
-              onClick={handleCreateRoom}
-              disabled={!newRoomName.trim()}
-              className="w-full rounded-full"
-            >
-              <Plus className="w-4 h-4 mr-2" />
-              Create Room
-            </Button>
-          </div>
-        )}
-
         {/* ROOM LIST */}
         {activeTab === "rooms" && (
           <div className="flex flex-col flex-1 min-h-0">
@@ -414,153 +503,43 @@ export default function ChatPage() {
 
               {filteredRooms.map((room) => {
                 const isActive = currentRoom === room.id;
-
                 return (
-                  <div key={room.id} className="flex items-center gap-1 pr-2">
                   <div
+                    key={room.id}
                     onClick={() => handleSelectRoom(room)}
-                      className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer transition flex-1 min-w-0
+                    className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer transition
-                        ${isActive
+                      ${isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`}
-                          ? "bg-primary text-primary-foreground"
-                          : "hover:bg-muted"
-                        }`}
                   >
                     <div
                       className={`w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-full ${isActive ? "bg-white/20" : "bg-primary/10"
                         }`}
                     >
                       {room.isGroup ? (
-                          <Users className={`w-5 h-5 ${isActive ? "text-white" : "text-primary"}`} />
+                        <Users
+                          className={`w-5 h-5 ${isActive ? "text-white" : "text-primary"}`}
+                        />
                       ) : (
-                          <UserIcon className={`w-5 h-5 ${isActive ? "text-white" : "text-primary"}`} />
+                        <UserIcon
+                          className={`w-5 h-5 ${isActive ? "text-white" : "text-primary"}`}
+                        />
                       )}
                     </div>
-
                     <div className="flex-1 overflow-hidden">
                       <h3 className="font-semibold truncate">{room.name}</h3>
                       <p className="text-xs opacity-70 truncate">
-                          {room.isGroup ? `${room.participants?.length ?? 0} members` : "Direct Message"}
+                        {room.isGroup
+                          ? `${room.participants?.length ?? 0} members`
+                          : "Direct Message"}
                       </p>
                     </div>
                   </div>
-
-                    {/* Manage button — group rooms only */}
-                    {room.isGroup && (
-                      <button
-                        onClick={() =>
-                          setManagingRoom(managingRoom?.id === room.id ? null : room)
-                        }
-                        className={`flex-shrink-0 p-2 rounded-lg transition ${managingRoom?.id === room.id
-                          ? "bg-primary/10 text-primary"
-                          : "text-muted-foreground hover:bg-muted"
-                          }`}
-                        title="Manage participants"
-                      >
-                        <Users className="w-4 h-4" />
-                      </button>
-                    )}
-                  </div>
                 );
               })}
             </div>
-
-            {/* ── Manage participants panel ── */}
-            {managingRoom && (
-              <div className="border-t mx-2 mb-2 rounded-xl bg-muted/40 p-3 space-y-3 max-h-72 overflow-y-auto">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-semibold truncate">
-                    {managingRoom.name}
-                  </p>
-                  <button
-                    onClick={() => setManagingRoom(null)}
-                    className="text-xs text-muted-foreground hover:text-foreground"
-                  >
-                    ✕
-                  </button>
-                </div>
-
-                {/* Current members */}
-                <div className="space-y-1">
-                  <p className="text-xs text-muted-foreground uppercase tracking-wide">
-                    Members ({managingRoom.participants?.length ?? 0})
-                  </p>
-                  {(managingRoom.participants ?? []).map((p: any) => {
-                    const pid = p._id ?? p;
-                    const pname = p.name ?? pid;
-                    const isSelf = pid === user?.userId;
-                    return (
-                      <div
-                        key={pid}
-                        className="flex items-center justify-between gap-2 py-1"
-                      >
-                        <div className="flex items-center gap-2 min-w-0">
-                          <div className="w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-full bg-primary/10">
-                            <UserIcon className="w-3.5 h-3.5 text-primary" />
-                          </div>
-                          <span className="text-sm truncate">
-                            {pname}
-                            {isSelf && (
-                              <span className="text-muted-foreground text-xs ml-1">(you)</span>
-                            )}
-                          </span>
-                        </div>
-                        {!isSelf && (
-                          <button
-                            onClick={() => handleRemoveParticipant(managingRoom.id, pid)}
-                            className="flex-shrink-0 p-1 rounded-md text-destructive hover:bg-destructive/10 transition"
-                            title={`Remove ${pname}`}
-                          >
-                            <UserMinus className="w-3.5 h-3.5" />
-                          </button>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-
-                {/* Add people */}
-                {(() => {
-                  const addable = allUsers.filter(
-                    (u) =>
-                      !(managingRoom.participants ?? []).some(
-                        (p: any) => (p._id ?? p) === u._id
-                      )
-                  );
-                  if (addable.length === 0) return null;
-                  return (
-                    <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground uppercase tracking-wide">
-                        Add people
-                      </p>
-                      {addable.map((u) => (
-                        <div
-                          key={u._id}
-                          className="flex items-center justify-between gap-2 py-1"
-                        >
-                          <div className="flex items-center gap-2 min-w-0">
-                            <div className="w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-full bg-primary/10">
-                              <UserIcon className="w-3.5 h-3.5 text-primary" />
-                            </div>
-                            <span className="text-sm truncate">{u.name}</span>
-                          </div>
-                          <button
-                            onClick={() => handleAddParticipant(managingRoom.id, u._id)}
-                            className="flex-shrink-0 p-1 rounded-md text-primary hover:bg-primary/10 transition"
-                            title={`Add ${u.name}`}
-                          >
-                            <UserPlus className="w-3.5 h-3.5" />
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  );
-                })()}
-              </div>
-            )}
           </div>
         )}
 
-        {/* USERS / PEOPLE LIST (for starting P2P) */}
+        {/* PEOPLE LIST */}
         {activeTab === "users" && (
           <div className="flex flex-col flex-1 min-h-0">
             <div className="p-4">
@@ -578,9 +557,12 @@ export default function ChatPage() {
                 </p>
               ) : (
                 allUsers
-                  .filter((u) =>
+                  .filter(
+                    (u) =>
                       !debouncedUserSearch.trim() ||
-                    u.name?.toLowerCase().includes(debouncedUserSearch.toLowerCase())
+                      u.name
+                        ?.toLowerCase()
+                        .includes(debouncedUserSearch.toLowerCase())
                   )
                   .map((u) => (
                     <div
@@ -593,7 +575,9 @@ export default function ChatPage() {
                       </div>
                       <div className="flex-1 overflow-hidden">
                         <h3 className="font-semibold truncate">{u.name}</h3>
-                        <p className="text-xs opacity-70 truncate">Click to chat</p>
+                        <p className="text-xs opacity-70 truncate">
+                          Click to chat
+                        </p>
                       </div>
                     </div>
                   ))
@@ -616,7 +600,9 @@ export default function ChatPage() {
               )}
             </div>
             <div>
-              <span className="text-lg">{selectedRoom?.name || "Select a room"}</span>
+              <span className="text-lg">
+                {selectedRoom?.name || "Select a room"}
+              </span>
               {selectedRoom && (
                 <p className="text-xs text-muted-foreground font-normal">
                   {selectedRoom.isGroup
@@ -628,7 +614,7 @@ export default function ChatPage() {
             </div>
           </div>
 
-          {/* Call Buttons */}
+          {/* Right-side action buttons */}
           <div className="flex items-center gap-2">
             <Button
               variant="ghost"
@@ -644,6 +630,103 @@ export default function ChatPage() {
             >
               <Video className="w-5 h-5" />
             </Button>
+
+            {/* Manage Participants — only for group rooms */}
+            {selectedRoom?.isGroup && (
+              <div className="relative" ref={manageDropdownRef}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setShowManageDropdown((prev) => !prev)}
+                  title="Manage participants"
+                  className={showManageDropdown ? "bg-muted" : ""}
+                >
+                  <UserPlus className="w-5 h-5" />
+                </Button>
+
+                {showManageDropdown && (
+                  <div className="absolute right-0 mt-2 w-72 bg-background border rounded-xl shadow-lg p-3 space-y-3 z-50 max-h-80 overflow-y-auto">
+                    <p className="text-sm font-semibold truncate">
+                      {selectedRoom.name}
+                    </p>
+
+                    {/* Current members */}
+                    <div className="space-y-1">
+                      <p className="text-xs text-muted-foreground uppercase tracking-wide">
+                        Members ({manageParticipants.length})
+                      </p>
+                      {manageParticipants.map((p: any) => {
+                        const pid = p._id ?? p;
+                        const pname = p.name ?? pid;
+                        const isSelf = pid === user?.userId;
+                        return (
+                          <div
+                            key={pid}
+                            className="flex items-center justify-between gap-2 py-1"
+                          >
+                            <div className="flex items-center gap-2 min-w-0">
+                              <div className="w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-full bg-primary/10">
+                                <UserIcon className="w-3.5 h-3.5 text-primary" />
+                              </div>
+                              <span className="text-sm truncate">
+                                {pname}
+                                {isSelf && (
+                                  <span className="text-muted-foreground text-xs ml-1">
+                                    (you)
+                                  </span>
+                                )}
+                              </span>
+                            </div>
+                            {!isSelf && (
+                              <button
+                                onClick={() =>
+                                  handleRemoveParticipant(selectedRoom.id, pid)
+                                }
+                                className="flex-shrink-0 p-1 rounded-md text-destructive hover:bg-destructive/10 transition"
+                                title={`Remove ${pname}`}
+                              >
+                                <UserMinus className="w-3.5 h-3.5" />
+                              </button>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+
+                    {/* Add people */}
+                    {addableUsers.length > 0 && (
+                      <div className="space-y-1">
+                        <p className="text-xs text-muted-foreground uppercase tracking-wide">
+                          Add people
+                        </p>
+                        {addableUsers.map((u) => (
+                          <div
+                            key={u._id}
+                            className="flex items-center justify-between gap-2 py-1"
+                          >
+                            <div className="flex items-center gap-2 min-w-0">
+                              <div className="w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-full bg-primary/10">
+                                <UserIcon className="w-3.5 h-3.5 text-primary" />
+                              </div>
+                              <span className="text-sm truncate">{u.name}</span>
+                            </div>
+                            <button
+                              onClick={() =>
+                                handleAddParticipant(selectedRoom.id, u._id)
+                              }
+                              className="flex-shrink-0 p-1 rounded-md text-primary hover:bg-primary/10 transition"
+                              title={`Add ${u.name}`}
+                            >
+                              <UserPlus className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
 
@@ -655,35 +738,65 @@ export default function ChatPage() {
             </div>
           )}
 
-          {currentRoom && roomMessages.length === 0 && roomNotices.length === 0 && (
+          {currentRoom &&
+            roomMessages.length === 0 &&
+            roomNotices.length === 0 && (
               <div className="flex items-center justify-center h-full text-muted-foreground">
                 No messages yet. Say something!
               </div>
             )}
 
-          {roomMessages.map((msg, idx) => {
+          {(() => {
-            const isMe = msg.senderId === mySocketId;
+            let lastDate = "";
+
+            return roomMessages.map((msg, idx) => {
+              const msgDate = formatDate(msg.createdAt!);
+              const showDate = msgDate !== lastDate;
+              lastDate = msgDate;
+
+              const isMe =
+                msg.senderId === user?.userId ||
+                msg.senderId === mySocketId;
+
               return (
-              <div
+                <div key={msg._id || idx}>
-                key={`msg-${idx}`}
+                  {/* DATE SEPARATOR */}
-                className={`flex ${isMe ? "justify-end" : "justify-start"}`}
+                  {showDate && (
-              >
+                    <div className="flex justify-center my-4">
+                      <span className="text-xs bg-muted px-3 py-1 rounded-full text-muted-foreground">
+                        {msgDate}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* MESSAGE */}
+                  <div className={`flex ${isMe ? "justify-end" : "justify-start"}`}>
                     <div className="flex flex-col max-w-xs">
                       {!isMe && (
                         <span className="text-xs text-muted-foreground mb-1 ml-1">
                           {msg.username}
                         </span>
                       )}
+
                       <div
-                    className={`px-4 py-2 rounded-xl ${isMe ? "bg-primary text-primary-foreground" : "bg-muted"
+                        className={`px-4 py-2 rounded-xl ${isMe
+                            ? "bg-primary text-primary-foreground"
+                            : "bg-muted"
                           }`}
                       >
-                    {msg.text}
+                        <div>{msg.text}</div>
+
+                        {/* TIME */}
+                        <div className="text-[10px] text-right opacity-70 mt-1">
+                          {formatTime(msg.createdAt!)}
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
               );
-          })}
+            });
+          })()}
 
           {roomNotices.map((notice, idx) => (
             <div key={`notice-${idx}`} className="flex justify-center">
@@ -703,7 +816,9 @@ export default function ChatPage() {
             onChange={(e) => setText(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={
-              currentRoom ? `Message ${selectedRoom?.name ?? ""}...` : "Select a room first..."
+              currentRoom
+                ? `Message ${selectedRoom?.name ?? ""}...`
+                : "Select a room first..."
             }
             disabled={!currentRoom || !isConnected}
           />

src/context/SocketContext.tsx

@@ -13,7 +13,9 @@ import { io, Socket } from "socket.io-client";
 import { useAuth } from "./AuthContext";
 import { API_BASE_URL } from "@/lib/api";
 
-// Shape of a chat message coming from the server
+//types
+
+// Chat message
 export interface ChatMessage {
   _id?: string;
   roomId: string;
@@ -23,76 +25,67 @@ export interface ChatMessage {
   createdAt?: string;
 }
 
-// System messages related to a room (join/leave/info)
+// System messages
 export interface RoomNotice {
   roomId: string;
   message: string;
 }
 
-// Data received when a P2P room is ready
+// P2P Ready
 export interface P2PReadyData {
   roomId: string;
   targetUserId: string;
   message: string;
 }
 
-// Everything that the socket context will provide to the app
+//context value
+
 interface SocketContextValue {
   socket: Socket | null;
   isConnected: boolean;
   mySocketId: string | null;
 
-  // join / leave / send chat messages
   joinRoom: (roomId: string) => void;
   leaveRoom: (roomId: string) => void;
   sendMessage: (roomId: string, text: string) => void;
   startP2P: (targetUserId: string) => void;
 
-  // chat state stored globally
   messages: ChatMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
   notices: RoomNotice[];
+
   currentRoom: string | null;
   setCurrentRoom: (roomId: string | null) => void;
+
   clearMessages: () => void;
 
-  // P2P readiness (chat page reacts to this)
   p2pReady: P2PReadyData | null;
   clearP2PReady: () => void;
 }
 
 //context
-// Create a global socket context
+
 const SocketContext = createContext<SocketContextValue | undefined>(undefined);
 
-/*  Provider   */
+//provider
 
 export function SocketProvider({ children }: { children: ReactNode }) {
   const { user } = useAuth();
 
-  // Keep socket instance in a ref so it persists without rerenders
   const socketRef = useRef<Socket | null>(null);
 
-  // Connection status
   const [isConnected, setIsConnected] = useState(false);
-
-  // Store current socket id assigned by server
   const [mySocketId, setMySocketId] = useState<string | null>(null);
 
-  // All chat messages received
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-
-  // System notices (join/leave/info messages)
   const [notices, setNotices] = useState<RoomNotice[]>([]);
-
   const [currentRoom, setCurrentRoom] = useState<string | null>(null);
-
-  // P2P ready event data — consumed by chat page
   const [p2pReady, setP2pReady] = useState<P2PReadyData | null>(null);
 
-  // Connect to socket when user logs in, disconnect when logged out
+  //socket connection
+
   useEffect(() => {
     if (!user?.token) {
-      // If user logs out, close socket connection
       if (socketRef.current) {
         socketRef.current.disconnect();
         socketRef.current = null;
@@ -102,10 +95,8 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    // If already connected, don't reconnect again
     if (socketRef.current?.connected) return;
 
-    // Create socket connection with auth token
     const socket = io(`${API_BASE_URL}/chat`, {
       auth: { token: `Bearer ${user.token}` },
       transports: ["websocket", "polling"],
@@ -113,75 +104,73 @@ export function SocketProvider({ children }: { children: ReactNode }) {
 
     socketRef.current = socket;
 
-    /* ---------------- Server Events ---------------- */
+    //connection events
 
-    // When connection is successfully established
     socket.on("connect", () => {
       setIsConnected(true);
     });
 
-    // When server confirms who you are
     socket.on(
       "connected",
       (data: { YourId: string; username: string; message: string }) => {
         setMySocketId(data.YourId);
         console.log("[Socket] Connected:", data.message);
-      },
+      }
     );
 
-    // When socket disconnects
     socket.on("disconnect", () => {
       setIsConnected(false);
       setMySocketId(null);
       console.log("[Socket] Disconnected");
     });
 
-    // If authentication fails
     socket.on("authError", (data: { mesage?: string }) => {
       console.error("[Socket] Auth error:", data.mesage);
       socket.disconnect();
     });
 
-    // General server messages
     socket.on("serverNotice", (message: string) => {
       console.log("[Socket] Server notice:", message);
     });
 
-    //- Room Events
+    //room event
 
-    // When you join a room
     socket.on("roomJoined", (data: { roomId: string; message: string }) => {
       console.log("[Socket] Room joined:", data.message);
     });
 
-    // When you leave a room
     socket.on("roomLeft", (data: { roomId: string }) => {
       console.log("[Socket] Room left:", data.roomId);
     });
 
-    // System messages inside a room
     socket.on("roomNotice", (data: RoomNotice) => {
       setNotices((prev) => [...prev, data]);
     });
 
-    // P2P room ready — backend already did server-side join
     socket.on("p2pReady", (data: P2PReadyData) => {
       console.log("[Socket] P2P Ready:", data.message);
       setP2pReady(data);
       setCurrentRoom(data.roomId);
     });
 
-    // New chat message received
+    //new message
+
     socket.on("roomMessage", (data: ChatMessage) => {
-      setMessages((prev) => [...prev, data]);
+      setMessages((prev) => {
+        // Prevent duplicate messages
+        if (data._id && prev.find((m) => m._id === data._id)) {
+          return prev;
+        }
+        return [...prev, data];
+      });
     });
 
-    // Room-related errors
     socket.on("roomError", (data: { message: string }) => {
       console.error("[Socket] Room error:", data.message);
     });
 
-    // Cleanup socket when component unmounts or token changes
+   
+
     return () => {
       socket.disconnect();
       socketRef.current = null;
@@ -190,40 +179,35 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     };
   }, [user?.token]);
 
-  // Actions you can call from UI
+  //actions
 
-  // Join a chat room
   const joinRoom = useCallback((roomId: string) => {
     socketRef.current?.emit("joinRoom", { roomId });
   }, []);
 
-  // Leave a chat room
   const leaveRoom = useCallback((roomId: string) => {
     socketRef.current?.emit("leaveRoom", { roomId });
   }, []);
 
-  // Send a message to a room
   const sendMessage = useCallback((roomId: string, text: string) => {
     socketRef.current?.emit("roomMessage", { roomId, text });
   }, []);
 
-  // Start a P2P conversation via socket
   const startP2P = useCallback((targetUserId: string) => {
-    console.log(targetUserId);
     socketRef.current?.emit("startP2P", { targetUserId });
   }, []);
 
-  // Clear all messages and notices
   const clearMessages = useCallback(() => {
     setMessages([]);
     setNotices([]);
   }, []);
 
-  // Clear p2pReady after chat page has consumed it
   const clearP2PReady = useCallback(() => {
     setP2pReady(null);
   }, []);
 
+  //provider
+
   return (
     <SocketContext.Provider
       value={{
@@ -235,6 +219,7 @@ export function SocketProvider({ children }: { children: ReactNode }) {
         sendMessage,
         startP2P,
         messages,
+        setMessages,
         notices,
         currentRoom,
         setCurrentRoom,
@@ -248,9 +233,8 @@ export function SocketProvider({ children }: { children: ReactNode }) {
   );
 }
 
-// Hook to use socket context
+//hook
 
-// Custom hook to access socket anywhere in app
 export function useSocket() {
   const ctx = useContext(SocketContext);
   if (!ctx) throw new Error("useSocket must be used inside <SocketProvider>");

src/lib/api.ts

@@ -77,9 +77,8 @@ export async function removeParticipant(convId: string, userId: string): Promise
   return res.json();
 }
 
-export async function fetchMessages(roomId: string): Promise<any[]> {
+export async function fetchMessages(convId: string): Promise<any[]> {
-  if (!roomId) return [];
+  const res = await fetch(`${API_BASE_URL}/messages/${convId}`);
-  const res = await fetch(`${API_BASE_URL}/messages?roomId=${roomId}`);
+  if (!res.ok) throw new Error("Failed to fetch messages");
-  if (!res.ok) return [];
   return res.json();
 }