From d1e5a1e284cb6bc1fe0f0f04540ce170f3935c87 Mon Sep 17 00:00:00 2001
From: rudy3333 <mmax3163@gmail.com>
Date: Sat, 31 May 2025 13:41:57 +0200
Subject: [PATCH] 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          |  9 +++------
 chat_thread.html   | 18 +++++++++++++++---
 eversyncc/views.py |  7 ++++---
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/chat.html b/chat.html
index bfc398a..0522b6e 100644
--- a/chat.html
+++ b/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>`);
                     });
diff --git a/chat_thread.html b/chat_thread.html
index 6a6e653..0f5a3d3 100644
--- a/chat_thread.html
+++ b/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>
-            <small>{{ msg.timestamp }}</small>
+                <strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br>
+                <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>
       `);
 
diff --git a/eversyncc/views.py b/eversyncc/views.py
index 4ce8ffe..1ffccbe 100644
--- a/eversyncc/views.py
+++ b/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)
-        return JsonResponse({"message": "sent"})
+        message = Message.objects.create(sender=request.user, receiver=receiver, content=content)
+        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):