new

osinaweb/osichat/consumers.py

@@ -123,7 +123,6 @@ class OsitcomChatRoom(WebsocketConsumer):
             message_attachment = ChatMessageAttachment.objects.create(
                 message = message,
                 attachment = text_data_json.get('path'),
-
             )
             event = {
                 'type': 'uploaded_file_handler',
@@ -135,6 +134,61 @@ class OsitcomChatRoom(WebsocketConsumer):
              self.session_id, event
             )
 
+        if event_type == 'update_read_messages' and self.chat_room:
+            latest_unread_message = None
+            number_of_unread = 0
+            if text_data_json.get('user_id'):
+                member = get_object_or_404(User, id=text_data_json.get('user_id'))
+                guest = None
+                if text_data_json.get('chat_state') == 'open':
+                    messages = ChatMessage.objects.filter(room=self.chat_room).exclude(member=member)
+                    for message in messages:
+                        seen_message = ChatMessageSeen.objects.filter(
+                            message=message,
+                            member=member
+                        ).exists()
+
+                        if not seen_message:
+                            ChatMessageSeen.objects.create(
+                                message=message,
+                                member=member,
+                                seen_date = datetime.now()
+                            )
+                    number_of_unread = 0
+                else:
+                    number_of_unread = ChatMessage.objects.filter(room=self.chat_room).exclude(member = member, chatmessageseen__member=member).count()
+                    latest_unread_message  = ChatMessage.objects.filter(room=self.chat_room).exclude(chatmessageseen__member=member).last()
+            else:
+                member = None
+                guest = self.chat_room.chatroomguest
+                if text_data_json.get('chat_state') == 'open':
+                    messages = ChatMessage.objects.filter(room=self.chat_room).exclude(member=None)
+                    for message in messages:
+                        seen_message = ChatMessageSeen.objects.filter(
+                            message=message,
+                            guest=guest
+                        ).exists()
+
+                        if not seen_message:
+                            ChatMessageSeen.objects.create(
+                                message=message,
+                                guest=guest,
+                                seen_date = datetime.now()
+                            )
+
+                    number_of_unread = 0
+                
+                else:
+                    number_of_unread = ChatMessage.objects.filter(room=self.chat_room, member__isnull=False).exclude(chatmessageseen__guest=guest).count()
+                    latest_unread_message = ChatMessage.objects.filter(room=self.chat_room).exclude(chatmessageseen__guest=guest).last()
+
+            event = {
+                'type': 'update_read_messages_handler',
+                'number_of_unread': number_of_unread,
+                'latest_unread_message_id': latest_unread_message.id if latest_unread_message else None
+            }
+            self.update_read_messages_handler(event)
+
 
 
     def load_chat_handler(self):
@@ -209,6 +263,7 @@ class OsitcomChatRoom(WebsocketConsumer):
             html = render_to_string("partials/message.html", context=context)
             self.send(text_data=json.dumps({
                 'event_type': 'send_message',
+                'user': chat_message.member.id if chat_message.member else None,
                 'html': html,
             }))
 
@@ -226,5 +281,23 @@ class OsitcomChatRoom(WebsocketConsumer):
         }))
 
 
+    def update_read_messages_handler(self, event): 
+        latest_unread_message_id = event.get('latest_unread_message_id')
+        if latest_unread_message_id:
+            latest_unread_message = get_object_or_404(ChatMessage, id=latest_unread_message_id)
+            context = {
+            'number_of_unread' : event['number_of_unread'],
+            'latest_unread_message': latest_unread_message
+            }
+            html = render_to_string("partials/unread-messages.html", context=context)
+            self.send(text_data=json.dumps({
+                'event_type': 'update_read_messages',
+                'html': html,
+            }))
+        else:
+            latest_unread_message = None
+
+
+
 
 

osinaweb/osichat/migrations/0015_chatmessageseen_guest_alter_chatmessageseen_member.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.5 on 2024-07-31 06:57
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('osichat', '0014_alter_chatmessageattachment_message'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chatmessageseen',
+            name='guest',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='osichat.chatroomguest'),
+        ),
+        migrations.AlterField(
+            model_name='chatmessageseen',
+            name='member',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
+        ),
+    ]

osinaweb/osichat/migrations/0016_chatmessageseen_seen_date.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2024-07-31 07:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0015_chatmessageseen_guest_alter_chatmessageseen_member'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chatmessageseen',
+            name='seen_date',
+            field=models.DateTimeField(null=True),
+        ),
+    ]

osinaweb/osichat/models.py

@@ -77,4 +77,6 @@ class ChatMessageReaction(models.Model):
 
 class ChatMessageSeen(models.Model):
     message = models.ForeignKey(ChatMessage, on_delete=models.CASCADE)
-    member = models.ForeignKey(User, on_delete=models.CASCADE)
+    member = models.ForeignKey(User, on_delete=models.CASCADE,  null=True, blank=True)
+    guest = models.ForeignKey(ChatRoomGuest, on_delete=models.CASCADE, null=True, blank=True)
+    seen_date = models.DateTimeField(null=True)

osinaweb/osichat/templates/chat-room.html

@@ -2,7 +2,7 @@
 
 <p id="chatRoomId" class="hidden">{{chat_room.id}}</p>
 
-<div class="w-full h-full md:h-[500px] bg-white rounded-b-none md:rounded-b-md flex flex-col justify-end">
+<div class="w-full h-full md:h-[550px] bg-white rounded-b-none md:rounded-b-md flex flex-col justify-end">
     <div class="overflow-y-auto flex flex-col gap-5 px-5 pt-3" id="conversation">
         <!-- ROBOT -->
         <div class="w-full flex items-end gap-2">
@@ -39,6 +39,7 @@
 
         <!-- USER MESSAGES -->
         <div id="messages" class="w-full flex flex-col gap-3">
+            
             {% for message in chat_room_messages %}
                 <!-- STAFF MESSAGE  -->
                 {% if message.member %}
@@ -116,6 +117,8 @@
                 {% endif %}
             {% endfor %}
         </div>
+        <audio id="notification-sound" src="http://192.168.1.111:8000/static/notifications/osichat-notification.mp3" preload="auto"></audio>
+
 
         <!-- INCLUDE TYPING HERE -->
         <!-- <div class="mb-2 flex justify-start items-center gap-2">
@@ -162,5 +165,12 @@
                 </button>
             </div>
         </div>
+
+        <div class="w-full rounded-b-md px-3 pt-3 flex justify-center items-center gap-1 bg-white">
+            <img src="http://192.168.1.111:8000/static/images/ositcom_logos/ositcom(o).png" class="w-[20px]">
+
+            <p class="text-xs text-secondosiblue">Osichat 2.0 by <a href="https://ositcom.com/" target="_blank"
+                    class="hover:text-gray-400 duration-500">Ositcom</a></p>
+        </div>
     </form>
 </div>

osinaweb/osichat/templates/chat-widget.html

@@ -1,7 +1,17 @@
 {% load static %}
 
+
 <div class="w-full h-full md:h-fit md:w-[400px] flex flex-col fixed z-50 right-0 md:right-5 bottom-0 md:bottom-24 shadow-md duration-500 hidden"
     id="chatWidget">
+    <div class="w-full h-full inset-0 absolute flex justify-center items-center p-2 bg-black z-20 bg-opacity-50 rounded-none md:rounded-md hidden" id="osichatLoader">
+        <div role="status">
+            <svg aria-hidden="true" class="w-14 h-14 text-gray-200 animate-spin fill-secondosiblue" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+            </svg>
+        </div>
+    </div>
+
     <!-- HEADER -->
     <div class="w-full rounded-t-none md:rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
         <div class="flex gap-3 items-center">
@@ -39,6 +49,12 @@
 </div>
 
 
+<!-- UNREAD MESSAGE POPUP -->
+<div id="unreadMessages">
+</div>
+
+
+<!-- OPEN WIDGET BUTTON -->
 <div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
     id="openChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
@@ -48,10 +64,12 @@
             d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
             stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
     </svg>
+
     <p>Chat with us</p>
 </div>
 
 
+<!-- CLOSE WIDGET BUTTON -->
 <div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
     id="closeChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">

osinaweb/osichat/templates/partials/message-attachment.html

@@ -1,7 +1,7 @@
 {% if message_attachment.message.member %}
     {% if file_type == 'image' %}
         <div class="'w-fit p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
-            <img src="{{message_attachment.attachment}}">
+            <img src="http://192.168.1.111:8000/{{message_attachment.attachment}}">
         </div>
     {% else %}
         <div class="w-full p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">

osinaweb/osichat/templates/partials/unread-messages.html

@@ -0,0 +1,63 @@
+
+<div class="w-full sm:w-fit fixed right-5 bottom-[80px] z-40 flex justify-end">
+    <div class="w-[80%] sm:w-[400px] rounded-3xl bg-white border border-gray-100 shadow-md flex flex-col gap-2 p-5">
+        <div class="flex justify-between">
+            <div class="flex justify-start items-center gap-2">
+                <div
+                    class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                    {% if latest_unread_message.member.staffprofile.image %}
+                    <img class="w-full h-full rounded-full"
+                        src="http://192.168.1.111:8000{{latest_unread_message.member.staffprofile.image.url}}">
+                    {% else %}
+                    <p>{{latest_unread_message.member.first_name.0}}{{latest_unread_message.member.last_name.0}}</p>
+                    {% endif %}
+                </div>
+                <p class="text-secondosiblue">{{latest_unread_message.member.first_name}} {{latest_unread_message.member.last_name.0}}. <span class="text-gray-400 text-sm">from Ositcom</span></p>
+            </div>
+
+            <div class="text-gray-500 cursor-pointer hover:text-secondosiblue duration-500" id="closeNewMesagePopup">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+            </div>
+        </div>
+
+
+        {% if not latest_unread_message.chatmessageattachment %}
+            <p class="text-gray-500">
+                {{latest_unread_message.content}}
+            </p>
+
+        {% elif latest_unread_message.chatmessageattachment and not latest_unread_message.chatmessageattachment.is_image %}
+            <div
+                class="w-full p-4 rounded-md text-white text-sm leading-6 bg-opacity-70 bg-osiblue flex items-center gap-2 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 text-white notFilledSvg">
+                    <path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                        stroke-linejoin="round"></path>
+                    <path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                        stroke-linejoin="round"></path>
+                    <path
+                        d="M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z"
+                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+                <p>{{latest_unread_message.chatmessageattachment.file_name}}</p>
+            </div>
+        {% else %}
+        <div class="w-fit bg-opacity-70 bg-osiblue px-3 py-2 rounded-md w-full h-[300px]">
+                <img src="http://192.168.1.111:8000/{{latest_unread_message.chatmessageattachment.attachment}}" class="w-full h-full object-cover rounded-md">
+            </div> 
+        {% endif %}
+
+
+        <div class="text-sm text-secondosiblue flex items-center gap-2 cursor-pointer hover:text-gray-400 duration-500"
+            id="openChatContainer2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+            </svg>
+
+            <p>See <span class="font-poppinsBold">{{number_of_unread}}</span> new message{% if not number_of_unread == 1 %}s{% endif %}</p>
+        </div>
+    </div>
+</div>

osinaweb/osichat/templates/start-chat.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="w-full h-full md:h-[500px] bg-white rounded-b-none md:rounded-b-md">
+<div class="w-full h-full md:h-[550px] bg-white rounded-b-none md:rounded-b-md">
     <form class="h-full flex flex-col justify-between" id="startChat">
         <div class="">
             <div class="p-5 flex flex-col gap-10">
@@ -45,7 +45,7 @@
         </div>
 
 
-        <div class="p-5">
+        <div class="p-3">
             <div class="w-full bg-gray-50 rounded-md p-3 flex flex-col gap-1 shadow-md border border-gray-100">
                 <p class="text-osiblue font-poppinsBold">We are online</p>
 
@@ -60,6 +60,13 @@
                     </svg>
                 </button>
             </div>
+
+            <div class="w-full rounded-b-md px-3 pt-3 flex justify-center items-center gap-1 bg-white">
+                <img src="http://192.168.1.111:8000/static/images/ositcom_logos/ositcom(o).png" class="w-[20px]">
+    
+                <p class="text-xs text-secondosiblue">Osichat 2.0 by <a href="https://ositcom.com/" target="_blank"
+                        class="hover:text-gray-400 duration-500">Ositcom</a></p>
+            </div>
         </div>
     </form>
 </div>

osinaweb/osinacore/api/views.py

@@ -22,6 +22,7 @@ def login_user(request):
                 future = datetime.utcnow() + datetime2.timedelta(days=183)
                 futuretime = calendar.timegm(future.timetuple())
                 encoded_jwt = jwt.encode({"username": username, "exp": futuretime, "is_superuser": serial.data['is_superuser'], "userid":serial.instance.id}, "ibiye4700", algorithm="HS256")
+                encoded_jwt = encoded_jwt.decode('utf-8')
                 return successRes(msg={"token": encoded_jwt,"first_name":user.first_name,"last_name":user.last_name,"email":user.email, "id":user.id})
         else:
             raise ValueError("Incorrect password!")

osinaweb/osinacore/templates/main.html

@@ -818,7 +818,6 @@
                                 stroke="currentColor" class="w-[20px]">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                             </svg>
-
                         </button>
                     </div>
                 </div>

osinaweb/static/dist/output.css

@@ -628,6 +628,18 @@ video {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -694,6 +706,18 @@ video {
   bottom: 0px;
 }
 
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
+.bottom-16 {
+  bottom: 4rem;
+}
+
+.bottom-20 {
+  bottom: 5rem;
+}
+
 .bottom-24 {
   bottom: 6rem;
 }
@@ -706,6 +730,10 @@ video {
   bottom: 1.25rem;
 }
 
+.bottom-\[80px\] {
+  bottom: 80px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -730,6 +758,18 @@ video {
   right: 0px;
 }
 
+.right-1 {
+  right: 0.25rem;
+}
+
+.right-10 {
+  right: 2.5rem;
+}
+
+.right-14 {
+  right: 3.5rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -746,6 +786,10 @@ video {
   right: 1.25rem;
 }
 
+.right-7 {
+  right: 1.75rem;
+}
+
 .right-9 {
   right: 2.25rem;
 }
@@ -810,6 +854,10 @@ video {
   z-index: 30;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -1369,6 +1417,18 @@ video {
   min-width: 100%;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1671,6 +1731,14 @@ video {
   word-break: break-all;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -2110,6 +2178,10 @@ video {
   fill: #374a7a;
 }
 
+.fill-blue-600 {
+  fill: #2563eb;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -3187,6 +3259,15 @@ video {
     display: none;
   }
 
+  .sm\:w-\[400px\] {
+    width: 400px;
+  }
+
+  .sm\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .sm\:text-\[17px\] {
     font-size: 17px;
   }
@@ -3416,6 +3497,14 @@ video {
     height: fit-content;
   }
 
+  .md\:h-\[50px\] {
+    height: 50px;
+  }
+
+  .md\:h-\[550px\] {
+    height: 550px;
+  }
+
   .md\:w-\[250px\] {
     width: 250px;
   }
@@ -3449,9 +3538,8 @@ video {
     align-items: center;
   }
 
-  .md\:rounded-b-md {
-    border-bottom-right-radius: 0.375rem;
-    border-bottom-left-radius: 0.375rem;
+  .md\:rounded-md {
+    border-radius: 0.375rem;
   }
 
   .md\:rounded-t-md {
@@ -3459,6 +3547,11 @@ video {
     border-top-right-radius: 0.375rem;
   }
 
+  .md\:rounded-b-md {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;

osinaweb/static/images/uploaded_chat_files/upload-file.js

@@ -0,0 +1,120 @@
+const imageDomain = "http://192.168.1.106:8000";
+
+// TO TRIGGER TEH FILE UPLOADER WHEN CLICKING ON THE UPLOAD FILE SVG
+document.getElementById('svgFileUpload').addEventListener('click', function() {
+    document.getElementById('fileupload').click();
+});
+
+document.getElementById('fileupload').addEventListener('change', function(event) {
+    let files = event.target.files;
+
+    for (let file of files) {
+        let formData = new FormData();
+        formData.append('file', file);
+        formData.append('filename', file.name);
+
+        // Display the file during upload
+        if (file.type.startsWith('image/')) {
+            displayImageDuringUpload(file);
+        } else {
+            displayDocumentDuringUpload(file);
+        }
+
+        // Perform the upload
+        fetch(`${imageDomain}/chat-file-uploader/`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.data === 'Uploaded Successfully') {
+                const fullPath = `${imageDomain}/${data.existingPath}`;
+                updateSelectTag(fullPath, file.name);
+                if (file.type.startsWith('image/')) {
+                    osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_image', 'fullPath': fullPath, 'type': 'image' }));
+                } else {
+                    osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file',  'fullPath': fullPath, 'type': 'document' }));
+                }
+            } else {
+                console.error('Upload failed');
+            }
+        })
+        .catch(error => console.error('Error:', error));
+    }
+});
+
+function displayImageDuringUpload(file) {
+    let reader = new FileReader();
+    reader.onload = function(event) {
+        let outerDiv = document.createElement('div');
+        outerDiv.className = 'w-fit p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue';
+        
+        let div = document.createElement('div');
+        div.id = 'uploading-' + file.name;
+        div.className = 'image-' + file.name;
+        
+        let img = document.createElement('img');
+        img.src = event.target.result;
+        img.style.opacity = '0.2';
+        
+        div.appendChild(img);
+        
+        outerDiv.appendChild(div);
+        
+        document.getElementById('messages').appendChild(outerDiv);
+    };
+    reader.readAsDataURL(file);
+}
+
+
+function displayDocumentDuringUpload(file) {
+    let outerDiv = document.createElement('div');
+    outerDiv.className = 'w-full p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue';
+
+    let flexContainer = document.createElement('div');
+    flexContainer.className = 'w-full flex items-center gap-1';
+
+    let svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 text-white notFilledSvg">
+            <path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+    `;
+
+    let svgDiv = document.createElement('div');
+    svgDiv.innerHTML = svg;
+
+    let textContainer = document.createElement('div');
+    textContainer.className = 'flex flex-col';
+
+    let uploadingText = document.createElement('span');
+    uploadingText.id = 'uploading-' + file.name;
+    uploadingText.textContent = 'Uploading...';
+
+    let fileNameDiv = document.createElement('div');
+    fileNameDiv.className = 'file-name';
+    fileNameDiv.textContent = file.name;
+
+    textContainer.appendChild(uploadingText);
+    textContainer.appendChild(fileNameDiv);
+
+    flexContainer.appendChild(svgDiv);
+    flexContainer.appendChild(textContainer);
+
+    outerDiv.appendChild(flexContainer);
+
+    document.getElementById('messages').appendChild(outerDiv);
+}
+
+
+
+
+function updateSelectTag(path, fileName) {
+    let option = document.createElement('option');
+    option.value = path;
+    option.textContent = fileName;
+    option.selected = true;
+    document.getElementById('filePathInput').appendChild(option);
+}
+

osinaweb/static/js/osichat/chat-toggle.js

@@ -1,9 +1,15 @@
+
+(function() {
     const openChatButton = document.getElementById('openChatContainer');
+    const openChatButton2 = document.getElementById('openChatContainer2');
     const chatWidget = document.getElementById('chatWidget');
     const closeChatButton = document.getElementById('closeChatContainer');
     const closeMobileChatButton = document.getElementById('closeMobileChatContainer');
     const conversation = document.getElementById('conversation');
 
+    const unreadMessages = document.getElementById('unreadMessages');
+    const closeNewMesagePopup = document.getElementById('closeNewMesagePopup');
+
     function scrollToBottom() {
         conversation.scrollTop = conversation.scrollHeight;
     }
@@ -27,15 +33,21 @@ function checkScreenSize() {
         }
     }
 
-openChatButton.addEventListener('click', function () {
+    function openChat() {
+        isOpen = true;
         chatWidget.classList.remove('hidden');
         openChatButton.classList.add('hidden');
         closeChatButton.classList.remove('hidden');
+        if (unreadMessages) {
+            unreadMessages.classList.add('hidden');
+        }
+        osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' }));
         scrollToBottom();
         checkScreenSize();
-});
+    }
 
     function closeChat() {
+        isOpen = false;
         chatWidget.classList.add('hidden');
         openChatButton.classList.remove('hidden');
         if (closeChatButton) {
@@ -46,9 +58,13 @@ function closeChat() {
         toggleBodyScroll(false);
     }
 
+    // Attach event listeners
+    openChatButton.addEventListener('click', openChat);
+    if (openChatButton2) {
+        openChatButton2.addEventListener('click', openChat);
+    }
     closeChatButton.addEventListener('click', closeChat);
     closeMobileChatButton.addEventListener('click', closeChat);
-
     window.addEventListener('resize', checkScreenSize);
 
     // CSS class to prevent scrolling
@@ -60,3 +76,12 @@ style.innerHTML = `
     `;
     document.head.appendChild(style);
 
+    // To close the unread messages popup
+    if (closeNewMesagePopup) {
+        closeNewMesagePopup.addEventListener('click', function() {
+            if (unreadMessages) {
+                unreadMessages.classList.add('hidden')
+            }
+        });
+    }
+})();

osinaweb/static/js/osichat/conversation.js

@@ -1,6 +1,7 @@
 const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
 const domain = "192.168.1.111:8000";
 let osichatSocket;
+let isOpen = false;
 
 // FUNCTION TO FETCH THE SESSION ID
 async function fetchSessionID() {
@@ -49,6 +50,7 @@ function handleFormSubmission(form, eventType, osichatSocket) {
 
 // FUNCTION TO HANDLE LOAD CHAT EVENT
 function handleLoadChatEvent(data, osichatSocket) {
+    const osichatLoader = document.getElementById('osichatLoader');
 
     let chatDiv = document.getElementById('roomContainer'); //CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER
     if (!chatDiv) {
@@ -84,7 +86,7 @@ function handleLoadChatEvent(data, osichatSocket) {
 // FUNCTION TO INITIALIZE WEB SOCKET CONNECTION
 async function initializeChatWebSocket() {
     const session_id = await fetchSessionID();
-    const osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/${session_id}/`;
+    let osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/${session_id}/`;
     osichatSocket = new WebSocket(osichatSocketUrl);
 
     osichatSocket.onopen = () => {
@@ -102,8 +104,21 @@ async function initializeChatWebSocket() {
                 handleLoadChatEvent(data, osichatSocket);
                 break;
             case 'send_message':
+                console.log('h')
+                console.log(isOpen)
+                if (isOpen) { // Id chat widget isOpen(declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages
+                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' }));
+                    console.log(isOpen)
+                } else {
+                    osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' }));
+                }
                 const messagesDiv = document.getElementById('messages');
                 messagesDiv.insertAdjacentHTML('beforeend', data.html);
+                if (data.user) { //If it is sent by an Osina user play a notification sound for the guest
+                    const notificationSound = document.getElementById('notification-sound');
+                    console.log(notificationSound)
+                    notificationSound.play();
+                }
                 break;
             case 'uploaded_file':
                 const uploadingDiv = document.getElementById(`uploading-${data.file_name}`);
@@ -111,6 +126,19 @@ async function initializeChatWebSocket() {
                     uploadingDiv.outerHTML = data.html;
                 }
                 break;
+            case 'update_read_messages':  
+                const unreadMessages = document.getElementById(`unreadMessages`);
+                if (!isOpen){   
+                    unreadMessages.classList.remove('hidden')
+                    console.log(unreadMessages)
+                    unreadMessages.innerHTML = data.html;
+                    const script = document.createElement('script');
+                    script.src = `http://${domain}/static/js/osichat/chat-toggle.js`; 
+                    document.body.appendChild(script);
+                } else{
+                    unreadMessages.classList.add('hidden')
+                }
+                break;
             default:
                 console.log('Unknown event type:', data.event_type);
         }
@@ -118,10 +146,12 @@ async function initializeChatWebSocket() {
 
     osichatSocket.onclose = () => {
         console.log('WebSocket connection to osichat closed');
+        // osichatLoader.classList.remove('hidden');
     };
 
     osichatSocket.onerror = (error) => {
         console.log('WebSocket error:', error);
+        // osichatLoader.classList.remove('hidden');
     };
 }