fix: persist media messages and improve realtime chat handling (NSOC'26)

backend/controllers/chat.controller.js

@@ -13,30 +13,32 @@ export const getMessages = async (req, res) => {
 
 export const sendMessage = async (req, res) => {
   try {
-    const { text, username } = req.body;
+    const { text, username, image, audio } = req.body;
 
-    console.log("Incoming:", text, username);
+    console.log("Incoming:", {
+      text,
+      username,
+      image,
+      audio,
+    });
 
-    if (!text || !username) {
-      return res.status(400).json({ error: "Text & username required" });
+    if ((!text && !image && !audio) || !username) {
+      return res.status(400).json({error: "Message content & username required",});
     }
 
     const { data, error } = await supabase
       .from("messages")
-      .insert([{ text, username, status: "sent" }])
+      .insert([{ text, username, image, audio, status: "sent" }])
       .select();
 
     if (error) {
       console.error("Supabase error:", error);
       return res.status(500).json({ error: error.message });
     }
-
     const io = req.app.get("io");
 
-    io.emit("newMessage", {
-      ...data[0],
-      status: "delivered",
-    });
+    io.emit("newMessage", data[0]);
+
 
     res.json(data);
   } catch (err) {

backend/routes/chat.routes.js

@@ -6,4 +6,5 @@ const router = express.Router();
 router.get("/", getMessages);
 router.post("/", sendMessage);
 
+
 export default router;

backend/server.js

@@ -23,7 +23,8 @@ const onlineUsers = new Map(); // socket.id -> username
 const reactionsStore = {};
 
 app.use(cors());
-app.use(express.json());
+app.use(express.json({ limit: "50mb" }));
+app.use(express.urlencoded({ limit: "50mb", extended: true }));
 
 app.get("/", (req, res) => {
   res.send("FlowForge Backend Running 🚀");

frontend/app/chat/page.tsx

@@ -31,16 +31,9 @@ export default function ChatPage() {
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [audioBlob, setAudioBlob] = useState<string | null>(null);
-
-  const [replyingTo, setReplyingTo] = useState<Message | null>(null);
+
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [filterType, setFilterType] = useState("all");
-  const [activeMessageId, setActiveMessageId] = useState<string | null>(null);
-  const matchedMessageRef = useRef<HTMLDivElement | null>(null);
-  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
-  const [editedText, setEditedText] = useState("");
 
   const socketRef = useRef<Socket | null>(null);
   const typingTimeoutRef = useRef<any>(null);
@@ -64,6 +57,8 @@ export default function ChatPage() {
           id: msg.id,
           user: msg.username,
           text: msg.text,
+          image: msg.image || undefined,
+          audio: msg.audio || undefined,
           time: new Date(msg.created_at).toLocaleTimeString(),
           status: msg.status || "sent",
         }));
@@ -72,19 +67,30 @@ export default function ChatPage() {
 
 // NEW MESSAGE
 socket.on("newMessage", (msg) => {
-  // prevent duplicate message for sender
-  if (msg.username === username) return;
-
-  setMessages((prev) => [
-    ...prev,
-    {
-      id: msg.id,
-      user: msg.username,
-      text: msg.text,
-      time: new Date(msg.created_at).toLocaleTimeString(),
-      status: msg.status,
-    },
-  ]);
+  setMessages((prev) => {
+    const alreadyExists = prev.some(
+      (m) =>
+        m.user === msg.username &&
+        m.text === msg.text &&
+        m.image === msg.image &&
+        m.audio === msg.audio
+    );
+
+    if (alreadyExists) return prev;
+
+    return [
+      ...prev,
+      {
+        id: msg.id,
+        user: msg.username,
+        text: msg.text,
+        image: msg.image || undefined,
+        audio: msg.audio || undefined,
+        time: new Date(msg.created_at).toLocaleTimeString(),
+        status: msg.status,
+      },
+    ];
+  });
 
   if (!isAtBottomRef.current) {
     setUnreadCount((prev) => prev + 1);
@@ -165,49 +171,22 @@ socket.on("newMessage", (msg) => {
   async function handleSend() {
   if ((!input.trim() && !selectedImage && !audioBlob) || !username.trim()) return;
 
-  const localMessage: Message = {
-    id: Date.now().toString(),
-    user: username,
-    text: input,
-    time: new Date().toLocaleTimeString(),
-    status: "sent",
-
-    replyTo: replyingTo
-      ? {
-        user: replyingTo.user,
-        text: replyingTo.text,
-      }
-    : undefined,
-
-   ...(selectedImage && { image: selectedImage }),
-   ...(audioBlob && { audio: audioBlob }),
-  };
 
+  const currentImage = selectedImage;
+  const currentAudio = audioBlob;
+  const localMessage: Message = {
+  id: Date.now().toString(),
+  user: username,
+  text: input,
+  time: new Date().toLocaleTimeString(),
+  status: "sent",
 
-  // EDIT EXISTING MESSAGE
-  if (editingMessageId) {
-    setMessages((prev) =>
-      prev.map((msg) =>
-        msg.id === editingMessageId
-          ? {
-              ...msg,
-              text: input,
-            }
-          : msg
-      )
-    );
 
-    setEditingMessageId(null);
-    setEditedText("");
-    setInput("");
+  ...(currentImage && { image: currentImage }),
+  ...(currentAudio && { audio: currentAudio }),
+};
 
-    return;
-  }
-
-  // ADD NEW MESSAGE
-  else {
-    setMessages((prev) => [...prev, localMessage]);
-  }
+
 
   // send text to backend
   await fetch("http://localhost:5000/api/chat", {
@@ -218,6 +197,8 @@ socket.on("newMessage", (msg) => {
     body: JSON.stringify({
       text: input,
       username,
+      image: currentImage,
+      audio: currentAudio,
     }),
   });
 
@@ -250,8 +231,13 @@ socket.on("newMessage", (msg) => {
 
     if (!file) return;
 
-        const imageUrl = URL.createObjectURL(file);
-        setSelectedImage(imageUrl);
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        setSelectedImage(reader.result as string);
+      };
+
+      reader.readAsDataURL(file);
   }
 
   async function startRecording() {
@@ -271,13 +257,17 @@ socket.on("newMessage", (msg) => {
     };
 
     mediaRecorder.onstop = () => {
-      const audioBlob = new Blob(audioChunksRef.current, {
+      const blob = new Blob(audioChunksRef.current, {
         type: "audio/webm",
       });
 
-      const audioUrl = URL.createObjectURL(audioBlob);
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        setAudioBlob(reader.result as string);
+      };
 
-      setAudioBlob(audioUrl);
+      reader.readAsDataURL(blob);
     };
 
     mediaRecorder.start();
@@ -536,12 +526,12 @@ return (
     )}
 
               {/* IMAGE */}
-              {msg.image && msg.image.startsWith("blob:") && (
+              {msg.image && (
                 <img src={msg.image} alt="Shared image" className="mt-3 max-h-52 max-w-[240px] rounded-xl object-cover"/>
               )}
 
               {/* AUDIO */}
-              {msg.audio && msg.audio.startsWith("blob:") && (
+              {msg.audio && (
                 <audio
                   controls
                   className="mt-3 w-[220px]"