Add message deletion functionality to chat interface, including delete buttons for sent messages and improved styling for consistency. Update backend to return message ID upon sending for proper deletion handling.

chat.html

@@ -126,7 +126,7 @@
             <li><a href="{% url 'chat_with_user' user.username %}">{{ user.username }}</a></li>
         {% endfor %}
         </ul>
-
+        <!--
         <hr class="my-5">
 
         <h3>Inbox</h3>
@@ -137,7 +137,7 @@
         <h3>Outbox</h3>
         <button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button>
         <ul id="outbox-messages" class="list-group"></ul>
-
+        -->
     </div>
 
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@@ -153,9 +153,6 @@
                         ul.append(`<li class="list-group-item">
                             <strong>${msg.sender}</strong>: ${msg.content}<br>
                             <small>${msg.timestamp}</small>
-                            <form action="/delete/${msg.id}/" method="post" style="display:inline;">
-                            <input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
-                            <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button>
                         </form>
                         </li>`);
                     });
@@ -173,7 +170,7 @@
                             <small>${msg.timestamp}</small>
                             <form action="/delete/${msg.id}/" method="post" style="display:inline;">
                                 <input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
-                                <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button>
+                                <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
                             </form>
                         </li>`);
                     });

chat_thread.html

@@ -93,8 +93,14 @@
         <div id="chat-log" style="flex: 1; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 15px;">
         {% for msg in messages %}
             <div style="margin: 10px 0; text-align: {% if msg.sender == request.user %}right{% else %}left{% endif %};">
-            <strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br>
+                <strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br>
-            <small>{{ msg.timestamp }}</small>
+                <small>{{ msg.timestamp }}</small>
+                {% if msg.sender == request.user %}
+                    <form action="/delete/{{ msg.id }}/" method="post" style="display:inline;">
+                        {% csrf_token %}
+                        <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
+                    </form>
+                {% endif %}
             </div>
         {% endfor %}
         </div>
@@ -159,14 +165,20 @@
       receiver: receiver,
       content: content,
       csrfmiddlewaretoken: csrfToken
-    }, function () {
+    }, function (response) {
       $('#message-content').val('');
 
       const now = new Date().toLocaleString();
+      const messageId = response.message_id;
+      
       $('#chat-log').append(`
         <div style="margin: 10px 0; text-align: right;">
           <strong>{{ request.user.username }}</strong>: ${content}<br>
           <small>${now}</small>
+          <form action="/delete/${messageId}/" method="post" style="display:inline;">
+            <input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">
+            <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
+          </form>
         </div>
       `);
 

eversyncc/views.py

@@ -510,8 +510,8 @@ def send_message(request):
         reciever_username = request.POST.get('receiver')
         content =  request.POST.get('content')
         receiver = User.objects.get(username=reciever_username)
-        Message.objects.create(sender=request.user, receiver=receiver, content=content)
+        message = Message.objects.create(sender=request.user, receiver=receiver, content=content)
-        return JsonResponse({"message": "sent"})
+        return JsonResponse({"message": "sent", "message_id": message.id})
     else:
         return JsonResponse({"message": "error"})
     
@@ -551,7 +551,8 @@ def delete_message(request, message_id):
     if request.method == "POST":
         message = get_object_or_404(Message, id=message_id, sender=request.user)
         message.delete()
-    return redirect('chat')
+        referer = request.META.get("HTTP_REFERER")
+    return redirect(referer)
 
 @login_required
 def music(request):