new

osinaweb/static/js/tickets/tickets-room.js

@@ -33,7 +33,8 @@ function app(socket) {
         sendTypingEvent: function () {
             if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                 clearTimeout(this.typingTimeout);
-                const data = { event_type: 'typing' };
+                const userId = document.getElementById('userId').textContent.trim();
+                const data = { event_type: 'typing', user_id: userId};
                 this.socket.send(JSON.stringify(data));
 
                 this.typingTimeout = setTimeout(() => {
@@ -63,7 +64,8 @@ function app(socket) {
 
 function initializeWebSocket() {
     const ticketId = document.getElementById('ticketId').textContent.trim();
-    const wsUrl = `wss://${window.location.host}/ws/ticketroom/${ticketId}/`;
+    const wsScheme = window.location.protocol === "https:" ? "wss" : "ws";
+    const wsUrl = `${wsScheme}://${window.location.host}/ws/ticketroom/${ticketId}/`;;
     const socket = new WebSocket(wsUrl);
 
     socket.onopen = () => {

osinaweb/support/consumers.py

@@ -58,6 +58,7 @@ class TicketRoomConsumer(WebsocketConsumer):
         if event_type == 'typing':
             event = {
                 'type': 'typing_handler',
+                'user_id': text_data_json.get('user_id')
             }
             async_to_sync(self.channel_layer.group_send)(
                 self.ticket_number, event
@@ -119,8 +120,10 @@ class TicketRoomConsumer(WebsocketConsumer):
         }))
 
     def typing_handler(self, event):
+        user_id = event['user_id']
+        typing_user = get_object_or_404(User, id=user_id)
         context = {
-            'typing_user': self.scope['user']
+            'typing_user': typing_user
         }
         html = render_to_string("details_templates/partials/typing-message.html", context=context)
         self.send(text_data=json.dumps({

osinaweb/support/templates/details_templates/partials/typing-message.html

@@ -11,8 +11,8 @@
                 {{ typing_user.first_name.0 }}{{ typing_user.last_name.0 }}
             </div>
             {% endif %}
-            {% elif user.staffprofile %}
-            {% if user.staffprofile.image %}
+            {% elif typing_user.staffprofile %}
+            {% if typing_user.staffprofile.image %}
             <img src="{{typing_user.staffprofile.image.url}}"
                 class="w-full h-full rounded-full object-cover">
             {% else %}

osinaweb/support/templates/details_templates/ticket-room.html

@@ -15,7 +15,7 @@
 
 
 <p id="ticketId" class="hidden">{{ticket.id}}</p>
-
+<p id="userId" class="hidden">{{request.user.id}}</p>
 
 <div class="{% if request.user.customerprofile %} w-full {% else %}w-full xxlg1:w-[75%] {% endif %} bg-white h-fit rounded-md shadow-md p-5 relative">
     <div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3" id="ticketHeader">