added reply-to-message feature

Author: M-Abdoon

chat-app/backEnd/server.js

@@ -33,7 +33,7 @@ app.get("/getMessages", (req, res) => {
 });
 
 app.post("/sendMessage", (req, res) => {
-  const { message, sender } = req.body;
+  const { message, sender, replyTo } = req.body;
   if (message && sender) {
     const timestamp = Date.now();
     messages.push({
@@ -43,6 +43,7 @@ app.post("/sendMessage", (req, res) => {
       timestamp,
       likes: 0,
       dislikes: 0,
+      replyTo: replyTo || null,
     });
 
     res.status(200).json({ success: true });

chat-app/frontEnd/index.html

@@ -21,6 +21,10 @@
 		</div>
 
 		<form class="chat-input-area">
+			<div class="reply-preview hidden" id="replyPreview">
+				<span class="reply-preview-text" id="replyPreviewText"></span>
+				<button type="button" id="cancelReplyButton">Cancel</button>
+			</div>
 			<input type="text" id="messageText" placeholder="Type a message..." />
 			<button type="submit" id="submitMessage">Send</button>
 		</form>

chat-app/frontEnd/script.js

@@ -5,31 +5,45 @@ const appServerURL = "http://localhost:3000/";
 const currentUser = prompt("Enter your name:") || "Unknown";
 let lastTimestamp = 0;
 let displayedMessages = [];
+let replyToMessage = null;
 
 async function setup() {
   await renderMessages();
 
   const messageText = document.getElementById("messageText");
   const submitMessage = document.getElementById("submitMessage");
   const messagesContainer = document.querySelector(".chat-messages");
+  const cancelReplyButton = document.getElementById("cancelReplyButton");
 
   submitMessage.addEventListener("click", async (e) => {
     e.preventDefault();
     const message = messageText.value.trim();
     if (message) {
-      const success = await sendMessage(message);
+      const success = await sendMessage(message, replyToMessage?.id);
       if (success) {
         messageText.value = "";
+        clearReplyPreview();
         await renderMessages();
       } else {
         alert("Failed to send message. Please try again.");
       }
     }
   });
 
+  cancelReplyButton.addEventListener("click", () => {
+    clearReplyPreview();
+  });
+
   messagesContainer.addEventListener("click", async (e) => {
     const likeButton = e.target.closest(".like-button");
     const dislikeButton = e.target.closest(".dislike-button");
+    const replyButton = e.target.closest(".reply-button");
+
+    if (replyButton) {
+      const messageId = replyButton.dataset.id;
+      handleReplyClick(messageId);
+      return;
+    }
 
     if (likeButton || dislikeButton) {
       const button = likeButton || dislikeButton;
@@ -74,12 +88,27 @@ function appendMessages(messages) {
     senderName.className = "sender-name";
     senderName.textContent = message.sender;
 
+    if (message.replyTo) {
+      const originalMessage = displayedMessages.find((m) => String(m.id) === String(message.replyTo));
+      const replyPreview = document.createElement("div");
+      replyPreview.className = "message-reply";
+      replyPreview.textContent = originalMessage
+        ? `${originalMessage.sender}: ${originalMessage.message}`
+        : "Replied to a message";
+      div.append(replyPreview);
+    }
+
     const text = document.createElement("p");
     text.textContent = message.message;
 
     const reactionRow = document.createElement("div");
     reactionRow.className = "reaction-row";
 
+    const replyButton = document.createElement("button");
+    replyButton.className = "reply-button";
+    replyButton.dataset.id = message.id;
+    replyButton.textContent = "Reply";
+
     const likeButton = document.createElement("button");
     likeButton.className = "reaction-button like-button";
     likeButton.dataset.id = message.id;
@@ -90,7 +119,11 @@ function appendMessages(messages) {
     dislikeButton.dataset.id = message.id;
     dislikeButton.textContent = `👎 ${message.dislikes || 0}`;
 
+    if (role === "received") {
+      reactionRow.append(replyButton);
+    }
     reactionRow.append(likeButton, dislikeButton);
+
     div.append(senderName, text, reactionRow);
     messagesContainer.appendChild(div);
   });
@@ -110,12 +143,12 @@ async function fetchMessages(lastTimestamp = 0) {
   }
 }
 
-async function sendMessage(message) {
+async function sendMessage(message, replyTo = null) {
   try {
     const response = await fetch(`${appServerURL}sendMessage`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message, sender: currentUser }),
+      body: JSON.stringify({ message, sender: currentUser, replyTo }),
     });
     const data = await response.json();
     return data.success;
@@ -124,6 +157,35 @@ async function sendMessage(message) {
   }
 }
 
+function handleReplyClick(messageId) {
+  const message = displayedMessages.find((m) => String(m.id) === String(messageId));
+  if (!message) {
+    return;
+  }
+
+  replyToMessage = message;
+  renderReplyPreview();
+}
+
+function renderReplyPreview() {
+  const replyPreview = document.getElementById("replyPreview");
+  const replyPreviewText = document.getElementById("replyPreviewText");
+
+  if (!replyToMessage) {
+    replyPreview.classList.add("hidden");
+    replyPreviewText.textContent = "";
+    return;
+  }
+
+  replyPreviewText.textContent = `${replyToMessage.sender}: ${replyToMessage.message}`;
+  replyPreview.classList.remove("hidden");
+}
+
+function clearReplyPreview() {
+  replyToMessage = null;
+  renderReplyPreview();
+}
+
 async function reactToMessage(id, reaction) {
   try {
     const response = await fetch(`${appServerURL}reactMessage`, {

chat-app/frontEnd/style.css

@@ -88,6 +88,59 @@ body {
   transform: translateY(-1px);
 }
 
+.reply-button {
+  border: none;
+  border-radius: 999px;
+  padding: 7px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+
+.message-reply {
+  border-left: 3px solid rgba(255, 255, 255, 0.35);
+  padding-left: 10px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  opacity: 0.9;
+  max-height: 4.2em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.reply-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.reply-preview.hidden {
+  display: none;
+}
+
+.reply-preview-text {
+  flex: 1;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#cancelReplyButton {
+  border: none;
+  background: transparent;
+  color: #ffbaba;
+  cursor: pointer;
+}
+
 .like-button {
   background-color: rgba(255, 255, 255, 0.12);
   color: #c8f0ff;
@@ -100,6 +153,7 @@ body {
 
 .chat-input-area {
   display: flex;
+  flex-direction: column;
   padding: 10px;
   background-color: #2a2a2a;
 }