create-stackflow 1.0.5 → 1.0.8

package/src/generators/chat.js

@@ -0,0 +1,661 @@
+/** WhatsApp-style chat templates (chat requests + 1:1 messaging + Socket.IO). */
+
+export function chatBackendFiles(context, e, { im, imn, esm }) {
+  if (!context.socketio) return {};
+
+  const relImport = (names, path) => imn(names, path, true);
+  const defaultExport = (expr) => (esm ? `export default ${expr};` : `module.exports = ${expr};`);
+
+  return {
+    [`src/models/chatRequestModel.${e}`]: `${im("mongoose", "mongoose")}
+
+const chatRequestSchema = new mongoose.Schema({
+  from: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+  to: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+  status: { type: String, enum: ["pending", "accepted", "rejected"], default: "pending" }
+}, { timestamps: true });
+
+chatRequestSchema.index({ from: 1, to: 1 }, { unique: true });
+
+${esm ? "export const ChatRequest = mongoose.model(\"ChatRequest\", chatRequestSchema);" : "const ChatRequest = mongoose.model(\"ChatRequest\", chatRequestSchema);\nmodule.exports = { ChatRequest };"}
+`,
+    [`src/models/conversationModel.${e}`]: `${im("mongoose", "mongoose")}
+
+const conversationSchema = new mongoose.Schema({
+  participants: [{ type: mongoose.Schema.Types.ObjectId, ref: "User", required: true }],
+  lastMessageAt: { type: Date, default: Date.now }
+}, { timestamps: true });
+
+conversationSchema.index({ participants: 1 });
+
+${esm ? "export const Conversation = mongoose.model(\"Conversation\", conversationSchema);" : "const Conversation = mongoose.model(\"Conversation\", conversationSchema);\nmodule.exports = { Conversation };"}
+`,
+    [`src/models/messageModel.${e}`]: `${im("mongoose", "mongoose")}
+
+const messageSchema = new mongoose.Schema({
+  conversation: { type: mongoose.Schema.Types.ObjectId, ref: "Conversation", required: true },
+  sender: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+  text: { type: String, required: true, trim: true }
+}, { timestamps: true });
+
+messageSchema.index({ conversation: 1, createdAt: -1 });
+
+${esm ? "export const Message = mongoose.model(\"Message\", messageSchema);" : "const Message = mongoose.model(\"Message\", messageSchema);\nmodule.exports = { Message };"}
+`,
+    [`src/controllers/chatController.${e}`]: `${relImport("ChatRequest", "../models/chatRequestModel")}
+${relImport("Conversation", "../models/conversationModel")}
+${relImport("Message", "../models/messageModel")}
+${relImport("User", "../models/userModel")}
+
+function publicUser(user) {
+  return { id: user._id, name: user.name, email: user.email };
+}
+
+${esm ? "export" : ""} async function searchUsers(req, res, next) {
+  try {
+    const q = String(req.query.q || "").trim();
+    if (!q) return res.json({ data: [] });
+    const users = await User.find({
+      _id: { $ne: req.user._id },
+      $or: [{ name: new RegExp(q, "i") }, { email: new RegExp(q, "i") }]
+    }).select("name email").limit(20);
+    res.json({ data: users.map(publicUser) });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function sendChatRequest(req, res, next) {
+  try {
+    const { toUserId } = req.body;
+    if (!toUserId) return res.status(400).json({ message: "toUserId is required" });
+    if (String(toUserId) === String(req.user._id)) {
+      return res.status(400).json({ message: "Cannot send request to yourself" });
+    }
+    const target = await User.findById(toUserId);
+    if (!target) return res.status(404).json({ message: "User not found" });
+
+    const existing = await ChatRequest.findOne({
+      $or: [
+        { from: req.user._id, to: toUserId },
+        { from: toUserId, to: req.user._id }
+      ]
+    });
+    if (existing?.status === "accepted") {
+      return res.status(409).json({ message: "You can already chat with this user" });
+    }
+    if (existing?.status === "pending") {
+      return res.status(409).json({ message: "Chat request already pending" });
+    }
+    if (existing?.status === "rejected") {
+      existing.status = "pending";
+      existing.from = req.user._id;
+      existing.to = toUserId;
+      await existing.save();
+      return res.status(201).json({ data: existing });
+    }
+
+    const request = await ChatRequest.create({ from: req.user._id, to: toUserId });
+    res.status(201).json({ data: request });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function listIncomingRequests(req, res, next) {
+  try {
+    const requests = await ChatRequest.find({ to: req.user._id, status: "pending" })
+      .populate("from", "name email")
+      .sort({ createdAt: -1 });
+    res.json({ data: requests });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function listSentRequests(req, res, next) {
+  try {
+    const requests = await ChatRequest.find({ from: req.user._id, status: "pending" })
+      .populate("to", "name email")
+      .sort({ createdAt: -1 });
+    res.json({ data: requests });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function respondToRequest(req, res, next) {
+  try {
+    const { action } = req.body;
+    const request = await ChatRequest.findOne({ _id: req.params.id, to: req.user._id, status: "pending" });
+    if (!request) return res.status(404).json({ message: "Request not found" });
+
+    if (action === "reject") {
+      request.status = "rejected";
+      await request.save();
+      return res.json({ data: request });
+    }
+    if (action !== "accept") return res.status(400).json({ message: "action must be accept or reject" });
+
+    request.status = "accepted";
+    await request.save();
+
+    let conversation = await Conversation.findOne({
+      participants: { $all: [request.from, request.to], $size: 2 }
+    });
+    if (!conversation) {
+      conversation = await Conversation.create({
+        participants: [request.from, request.to]
+      });
+    }
+
+    res.json({ data: { request, conversationId: conversation._id } });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function listConversations(req, res, next) {
+  try {
+    const conversations = await Conversation.find({ participants: req.user._id })
+      .populate("participants", "name email")
+      .sort({ lastMessageAt: -1 });
+
+    const enriched = await Promise.all(conversations.map(async (conversation) => {
+      const lastMessage = await Message.findOne({ conversation: conversation._id })
+        .sort({ createdAt: -1 })
+        .populate("sender", "name");
+      const peer = conversation.participants.find(
+        (p) => String(p._id) !== String(req.user._id)
+      );
+      return {
+        _id: conversation._id,
+        peer: peer ? publicUser(peer) : null,
+        lastMessage: lastMessage
+          ? { text: lastMessage.text, senderId: lastMessage.sender._id, createdAt: lastMessage.createdAt }
+          : null
+      };
+    }));
+
+    res.json({ data: enriched });
+  } catch (error) {
+    next(error);
+  }
+}
+
+${esm ? "export" : ""} async function listMessages(req, res, next) {
+  try {
+    const conversation = await Conversation.findOne({
+      _id: req.params.conversationId,
+      participants: req.user._id
+    });
+    if (!conversation) return res.status(404).json({ message: "Conversation not found" });
+
+    const messages = await Message.find({ conversation: conversation._id })
+      .populate("sender", "name email")
+      .sort({ createdAt: 1 })
+      .limit(200);
+
+    res.json({ data: messages });
+  } catch (error) {
+    next(error);
+  }
+}
+${esm ? "" : `
+module.exports = {
+  searchUsers,
+  sendChatRequest,
+  listIncomingRequests,
+  listSentRequests,
+  respondToRequest,
+  listConversations,
+  listMessages
+};`}
+`,
+    [`src/routes/chatRoute.${e}`]: `${imn("Router", "express")}
+${relImport("protect", "../middleware/authMiddleware")}
+${relImport(
+  "searchUsers, sendChatRequest, listIncomingRequests, listSentRequests, respondToRequest, listConversations, listMessages",
+  "../controllers/chatController"
+)}
+
+const router = Router();
+
+router.use(protect);
+router.get("/users/search", searchUsers);
+router.post("/requests", sendChatRequest);
+router.get("/requests/incoming", listIncomingRequests);
+router.get("/requests/sent", listSentRequests);
+router.patch("/requests/:id", respondToRequest);
+router.get("/conversations", listConversations);
+router.get("/conversations/:conversationId/messages", listMessages);
+
+${defaultExport("router")}
+`,
+    [`src/socket/chatSocket.${e}`]: `${im("jwt", "jsonwebtoken")}
+${relImport("Conversation", "../models/conversationModel")}
+${relImport("Message", "../models/messageModel")}
+${relImport("User", "../models/userModel")}
+
+function getToken(socket) {
+  const auth = socket.handshake.auth?.token;
+  if (auth) return auth;
+  const header = socket.handshake.headers.authorization;
+  if (header?.startsWith("Bearer ")) return header.split(" ")[1];
+  return null;
+}
+
+${esm ? "export" : ""} function setupChatSocket(io) {
+  io.use(async (socket, next) => {
+    try {
+      const token = getToken(socket);
+      if (!token) return next(new Error("Authentication required"));
+      const decoded = jwt.verify(token, process.env.JWT_SECRET || "dev_secret");
+      const userId = typeof decoded === "object" && "userId" in decoded ? decoded.userId : null;
+      const user = await User.findById(userId).select("-password");
+      if (!user) return next(new Error("Invalid user"));
+      socket.data.user = user;
+      next();
+    } catch {
+      next(new Error("Invalid token"));
+    }
+  });
+
+  io.on("connection", (socket) => {
+    socket.join(\`user:\${socket.data.user._id}\`);
+
+    socket.on("conversation:join", async ({ conversationId }) => {
+      const conversation = await Conversation.findOne({
+        _id: conversationId,
+        participants: socket.data.user._id
+      });
+      if (!conversation) return;
+      socket.join(\`conversation:\${conversationId}\`);
+    });
+
+    socket.on("message:send", async ({ conversationId, text }) => {
+      const trimmed = String(text || "").trim();
+      if (!trimmed) return;
+
+      const conversation = await Conversation.findOne({
+        _id: conversationId,
+        participants: socket.data.user._id
+      });
+      if (!conversation) return;
+
+      const message = await Message.create({
+        conversation: conversationId,
+        sender: socket.data.user._id,
+        text: trimmed
+      });
+
+      conversation.lastMessageAt = new Date();
+      await conversation.save();
+
+      const payload = {
+        _id: message._id,
+        conversationId,
+        text: message.text,
+        createdAt: message.createdAt,
+        sender: {
+          id: socket.data.user._id,
+          name: socket.data.user.name,
+          email: socket.data.user.email
+        }
+      };
+
+      io.to(\`conversation:\${conversationId}\`).emit("message:new", payload);
+
+      const peerId = conversation.participants.find(
+        (id) => String(id) !== String(socket.data.user._id)
+      );
+      if (peerId) {
+        io.to(\`user:\${peerId}\`).emit("conversation:updated", {
+          conversationId,
+          lastMessage: { text: trimmed, createdAt: message.createdAt }
+        });
+      }
+    });
+  });
+}
+${esm ? "" : "\nmodule.exports = { setupChatSocket };"}
+`,
+  };
+}
+
+export function patchMainRouteForChat(mainRouteContent, context, e) {
+  if (!context.socketio) return mainRouteContent;
+  const chatImport = `import chatRoutes from "./chatRoute.js";`;
+  if (mainRouteContent.includes("chatRoutes")) return mainRouteContent;
+  return mainRouteContent
+    .replace(
+      `import todoRoutes from "./todoRoute.js";`,
+      `import todoRoutes from "./todoRoute.js";\n${chatImport}`,
+    )
+    .replace(
+      `router.use("/todos", todoRoutes);`,
+      `router.use("/todos", todoRoutes);\nrouter.use("/chat", chatRoutes);`,
+    );
+}
+
+export function chatServerSocketBlock(context, clientUrl, { imn }) {
+  if (!context.socketio) return "";
+  return `
+  const io = new Server(server, {
+    cors: {
+      origin: process.env.CLIENT_URL || "${clientUrl}",
+      credentials: true
+    }
+  });
+  ${imn("setupChatSocket", "./socket/chatSocket", true)}
+  setupChatSocket(io);
+`;
+}
+
+export function chatNextPages(context, x) {
+  if (!context.socketio || context.frontend !== "next") return {};
+
+  const page = `"use client";
+import { Chat } from "../../pages/Chat";
+
+export default function ChatPage() {
+  return <Chat />;
+}
+`;
+
+  return {
+    [`app/chat/page.${x}`]: page,
+    [`app/chat/[conversationId]/page.${x}`]: page,
+  };
+}
+
+export function chatFrontendFiles(context, x) {
+  if (!context.socketio) return {};
+
+  const isTs = context.language === "typescript";
+  const ext = isTs ? "ts" : "js";
+  const apiBase = context.frontend === "next"
+    ? "process.env.NEXT_PUBLIC_API_URL"
+    : "import.meta.env.VITE_API_URL";
+  const socketUrl = context.frontend === "next"
+    ? "process.env.NEXT_PUBLIC_SOCKET_URL"
+    : "import.meta.env.VITE_SOCKET_URL";
+
+  return {
+    [`lib/socket.${ext}`]: `import { io } from "socket.io-client";
+
+const SOCKET_URL = ${socketUrl} || "http://localhost:5000";
+
+export function createChatSocket() {
+  const token = typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null;
+  return io(SOCKET_URL, {
+    auth: { token },
+    transports: ["websocket", "polling"]
+  });
+}
+`,
+    [`features/chat/chatService.${ext}`]: `import { api } from "../../lib/api";
+
+export const chatService = {
+  searchUsers: (q) => api.get("/chat/users/search", { params: { q } }).then((r) => r.data.data),
+  sendRequest: (toUserId) => api.post("/chat/requests", { toUserId }).then((r) => r.data.data),
+  incomingRequests: () => api.get("/chat/requests/incoming").then((r) => r.data.data),
+  sentRequests: () => api.get("/chat/requests/sent").then((r) => r.data.data),
+  respondRequest: (id, action) => api.patch(\`/chat/requests/\${id}\`, { action }).then((r) => r.data.data),
+  conversations: () => api.get("/chat/conversations").then((r) => r.data.data),
+  messages: (conversationId) =>
+    api.get(\`/chat/conversations/\${conversationId}/messages\`).then((r) => r.data.data)
+};
+`,
+    [`pages/Chat.${x}`]: chatPageComponent(context),
+  };
+}
+
+function chatPageComponent(context) {
+  const next = context.frontend === "next";
+  const navImport = next
+    ? `import { useRouter, useParams } from "next/navigation";`
+    : `import { Link, useNavigate, useParams } from "react-router-dom";`;
+  const navHook = next ? "const router = useRouter();" : "const navigate = useNavigate();";
+  const logoutNav = next ? "router.push(\"/login\");" : "navigate(\"/login\");";
+  const authImport = context.state === "zustand"
+    ? `import { useAuthStore } from "${next ? "../store/auth" : "../store/auth"}";`
+    : context.state === "redux-toolkit"
+      ? `import { useDispatch } from "react-redux";\nimport { logout as reduxLogout } from "${next ? "../redux/slices/authSlice" : "../redux/slices/authSlice"}";`
+      : context.state === "context-api"
+        ? `import { useAuthContext } from "${next ? "../store/auth" : "../store/auth"}";`
+        : "";
+
+  return `"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+${navImport}
+import { Check, LogOut, MessageCircle, Search, Send, UserPlus, X } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "${next ? "../components/ui/button" : "../components/ui/button"}";
+import { Input } from "${next ? "../components/ui/input" : "../components/ui/input"}";
+import { chatService } from "${next ? "../features/chat/chatService" : "../features/chat/chatService"}";
+import { authService } from "${next ? "../features/auth/authService" : "../features/auth/authService"}";
+import { createChatSocket } from "${next ? "../lib/socket" : "../lib/socket"}";
+${authImport}
+
+export function Chat() {
+  ${navHook}
+  const params = useParams();
+  const activeConversationId = params?.conversationId || null;
+  ${context.state === "redux-toolkit" ? "const dispatch = useDispatch();" : ""}
+  const logoutStore = ${
+    context.state === "zustand"
+      ? "useAuthStore((s) => s.logout)"
+      : context.state === "redux-toolkit"
+        ? "() => dispatch(reduxLogout())"
+        : context.state === "context-api"
+          ? "useAuthContext().logout"
+          : "() => localStorage.removeItem(\"stackflow_token\")"
+  };
+
+  const [tab, setTab] = useState("chats");
+  const [query, setQuery] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+  const [incoming, setIncoming] = useState([]);
+  const [sent, setSent] = useState([]);
+  const [conversations, setConversations] = useState([]);
+  const [messages, setMessages] = useState([]);
+  const [draft, setDraft] = useState("");
+  const [myId, setMyId] = useState("");
+  const socketRef = useRef(null);
+
+  useEffect(() => {
+    authService.me().then((data) => setMyId(data.user.id)).catch(() => {});
+  }, []);
+
+  const activeConversation = useMemo(
+    () => conversations.find((c) => String(c._id) === String(activeConversationId)),
+    [conversations, activeConversationId]
+  );
+
+  async function refreshSidebar() {
+    const [conv, inc, out] = await Promise.all([
+      chatService.conversations(),
+      chatService.incomingRequests(),
+      chatService.sentRequests()
+    ]);
+    setConversations(conv);
+    setIncoming(inc);
+    setSent(out);
+  }
+
+  useEffect(() => {
+    refreshSidebar().catch(() => toast.error("Could not load chats"));
+  }, []);
+
+  useEffect(() => {
+    const socket = createChatSocket();
+    socketRef.current = socket;
+    socket.on("message:new", (message) => {
+      if (String(message.conversationId) === String(activeConversationId)) {
+        setMessages((prev) => [...prev, message]);
+      }
+      refreshSidebar();
+    });
+    socket.on("conversation:updated", () => refreshSidebar());
+    return () => socket.disconnect();
+  }, [activeConversationId]);
+
+  useEffect(() => {
+    if (!activeConversationId) {
+      setMessages([]);
+      return;
+    }
+    chatService.messages(activeConversationId).then(setMessages).catch(() => toast.error("Could not load messages"));
+    socketRef.current?.emit("conversation:join", { conversationId: activeConversationId });
+  }, [activeConversationId]);
+
+  async function onSearchUsers(value) {
+    setQuery(value);
+    if (!value.trim()) return setSearchResults([]);
+    const users = await chatService.searchUsers(value);
+    setSearchResults(users);
+  }
+
+  async function sendRequest(toUserId) {
+    await chatService.sendRequest(toUserId);
+    toast.success("Chat request sent");
+    setQuery("");
+    setSearchResults([]);
+    refreshSidebar();
+  }
+
+  async function respondRequest(id, action) {
+    const result = await chatService.respondRequest(id, action);
+    toast.success(action === "accept" ? "Request accepted" : "Request rejected");
+    await refreshSidebar();
+    if (action === "accept" && result?.conversationId) {
+      ${next ? "router.push(`/chat/${result.conversationId}`);" : "navigate(`/chat/${result.conversationId}`);"}
+    }
+  }
+
+  function openConversation(id) {
+    ${next ? "router.push(`/chat/${id}`);" : "navigate(`/chat/${id}`);"}
+  }
+
+  async function sendMessage(event) {
+    event.preventDefault();
+    const text = draft.trim();
+    if (!text || !activeConversationId) return;
+    socketRef.current?.emit("message:send", { conversationId: activeConversationId, text });
+    setDraft("");
+  }
+
+  function logout() {
+    logoutStore();
+    ${logoutNav}
+  }
+
+  return (
+    <main className="flex h-screen bg-slate-100 text-slate-950 dark:bg-slate-950 dark:text-white">
+      <aside className="flex w-full max-w-md flex-col border-r border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+        <header className="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-800">
+          <div className="flex items-center gap-2">
+            <MessageCircle size={20} />
+            <h1 className="font-semibold">StackFlow Chat</h1>
+          </div>
+          <Button variant="ghost" onClick={logout} aria-label="Logout"><LogOut size={18} /></Button>
+        </header>
+
+        <div className="border-b border-slate-200 p-3 dark:border-slate-800">
+          <div className="relative">
+            <Search className="absolute left-3 top-2.5 text-slate-400" size={16} />
+            <Input className="pl-9" placeholder="Search users by name or email" value={query} onChange={(e) => onSearchUsers(e.target.value)} />
+          </div>
+          {searchResults.length > 0 && (
+            <div className="mt-2 max-h-40 overflow-auto rounded-md border border-slate-200 dark:border-slate-700">
+              {searchResults.map((user) => (
+                <button key={user.id} type="button" className="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-slate-50 dark:hover:bg-slate-800" onClick={() => sendRequest(user.id)}>
+                  <span>{user.name} <span className="text-slate-500">({user.email})</span></span>
+                  <UserPlus size={16} />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex border-b border-slate-200 dark:border-slate-800">
+          <button type="button" className={\`flex-1 py-2 text-sm \${tab === "chats" ? "border-b-2 border-cyan-600 font-medium" : "text-slate-500"}\`} onClick={() => setTab("chats")}>Chats</button>
+          <button type="button" className={\`flex-1 py-2 text-sm \${tab === "requests" ? "border-b-2 border-cyan-600 font-medium" : "text-slate-500"}\`} onClick={() => setTab("requests")}>
+            Requests {incoming.length ? \`(\${incoming.length})\` : ""}
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-auto">
+          {tab === "chats" && conversations.map((conversation) => (
+            <button key={conversation._id} type="button" onClick={() => openConversation(conversation._id)} className={\`flex w-full flex-col gap-1 border-b border-slate-100 px-4 py-3 text-left hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800 \${String(conversation._id) === String(activeConversationId) ? "bg-slate-50 dark:bg-slate-800" : ""}\`}>
+              <p className="font-medium">{conversation.peer?.name || "Chat"}</p>
+              <p className="truncate text-xs text-slate-500">{conversation.lastMessage?.text || "No messages yet"}</p>
+            </button>
+          ))}
+          {tab === "chats" && !conversations.length && <p className="p-4 text-sm text-slate-500">No chats yet. Send a request to start.</p>}
+
+          {tab === "requests" && (
+            <div className="space-y-4 p-3">
+              <section>
+                <h3 className="mb-2 text-xs font-semibold uppercase text-slate-500">Incoming</h3>
+                {incoming.map((request) => (
+                  <div key={request._id} className="mb-2 flex items-center justify-between rounded-md border border-slate-200 p-2 dark:border-slate-700">
+                    <span className="text-sm">{request.from?.name || "User"}</span>
+                    <div className="flex gap-1">
+                      <Button variant="ghost" onClick={() => respondRequest(request._id, "accept")} aria-label="Accept"><Check size={16} /></Button>
+                      <Button variant="ghost" onClick={() => respondRequest(request._id, "reject")} aria-label="Reject"><X size={16} /></Button>
+                    </div>
+                  </div>
+                ))}
+                {!incoming.length && <p className="text-xs text-slate-500">No incoming requests</p>}
+              </section>
+              <section>
+                <h3 className="mb-2 text-xs font-semibold uppercase text-slate-500">Sent</h3>
+                {sent.map((request) => (
+                  <div key={request._id} className="mb-2 rounded-md border border-slate-200 p-2 text-sm dark:border-slate-700">
+                    {request.to?.name || "User"} — pending
+                  </div>
+                ))}
+                {!sent.length && <p className="text-xs text-slate-500">No sent requests</p>}
+              </section>
+            </div>
+          )}
+        </div>
+      </aside>
+
+      <section className="flex flex-1 flex-col bg-[#efeae2] dark:bg-slate-900">
+        {activeConversation ? (
+          <>
+            <header className="border-b border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
+              <p className="font-semibold">{activeConversation.peer?.name}</p>
+              <p className="text-xs text-slate-500">{activeConversation.peer?.email}</p>
+            </header>
+            <div className="flex-1 space-y-2 overflow-auto p-4">
+              {messages.map((message) => {
+                const mine = String(message.sender?.id || message.sender?._id) === String(myId);
+                return (
+                  <div key={message._id} className={\`flex \${mine ? "justify-end" : "justify-start"}\`}>
+                    <div className={\`max-w-[70%] rounded-lg px-3 py-2 text-sm \${mine ? "bg-cyan-600 text-white" : "bg-white dark:bg-slate-800"}\`}>
+                      {message.text}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <form onSubmit={sendMessage} className="flex gap-2 border-t border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">
+              <Input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Type a message" />
+              <Button type="submit" aria-label="Send"><Send size={18} /></Button>
+            </form>
+          </>
+        ) : (
+          <div className="grid flex-1 place-items-center text-slate-500">
+            <p>Select a chat or accept a request to start messaging</p>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}
+`;
+}