new

osinaweb/osichat/consumers.py

@@ -77,8 +77,9 @@ class OsitcomChatRooms(WebsocketConsumer):
                 When(last_update__isnull=True, then=F('date_created')),
                 default=F('last_update'),
                 output_field=DateTimeField(),)).order_by('-order_key')
-                
+
         user = get_object_or_404(User, id=self.user_id)
+
         for room in chat_rooms:
             room.number_of_unread = room.unread_messages(user)
             room.last_message = room.last_updated
@@ -87,7 +88,23 @@ class OsitcomChatRooms(WebsocketConsumer):
         }
 
         if self.client_type == 'mobile_admin':
-            chat_rooms_data = [model_to_dict(chat_room) for chat_room in chat_rooms]
+            chat_rooms_data = []
+            for chat_room in chat_rooms:
+                room_data = model_to_dict(chat_room)
+                room_data['number_of_unread'] = chat_room.unread_messages(user)
+                room_data['last_message'] = chat_room.last_updated
+                if hasattr(chat_room, 'chatroomguest') and chat_room.chatroomguest.visitor:
+                    visitor = chat_room.chatroomguest.visitor
+                    room_data['visitor'] = {
+                        'session_id': visitor.session_id,  
+                        'ip': visitor.ip_address,
+                        'country': visitor.country,
+                        'country_flag': visitor.flag_image_url,
+                        'name': visitor.name,
+                        'mobile_number': visitor.mobile_number,  
+                    }
+                chat_rooms_data.append(room_data)
+    
             self.send(text_data=json.dumps({
                 'event_type': 'get_chats',
                 'chat_rooms_data': chat_rooms_data,
@@ -131,7 +148,7 @@ class OsitcomChatRooms(WebsocketConsumer):
 
 class OsitcomChatRoom(WebsocketConsumer):
     def connect(self):
-        self.domain = 'http://192.168.1.109:8000'
+        self.domain = 'https://osina.ositcom.com'
         self.session_id = self.scope['url_route']['kwargs']['session_id']
         self.visitor = Visitor.objects.filter(session_id=self.session_id).last()
 

osinaweb/osichat/templates/chat-room.html

@@ -4,7 +4,7 @@
 <p id="chatRoomId" class="hidden">{{chat_room.id}}</p>
 
 <div class="w-full h-full md:h-[450px] lg:h-[550px] bg-white rounded-b-none md:rounded-b-md flex flex-col justify-end">
-    <div class="absolute right-0 bottom-32 bg-secondosiblue px-2 py-3 bg-white border border-gray-100 rounded-l-md z-10 flex flex-col gap-2 shadow-md hidden" id="newMessagesPopMessage">
+    <div class="absolute right-0 bottom-32 bg-secondosiblue px-2 py-3 bg-white border border-gray-100 rounded-l-md z-10 flex flex-col gap-2 shadow-md hidden cursor-pointer hover:bg-gray-100 duration-500" id="newMessagesPopMessage">
         <div class="w-[22px] h-[22px] rounded-full border border-secondosiblue flex justify-center items-center text-secondosiblue text-xs text-secondosiblue">
             <p id="newMessagesCounter">1</p>          
         </div>

osinaweb/static/js/osichat-admin/rooms.js

@@ -1,6 +1,6 @@
 let admin_chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
 let protocol = window.location.protocol === "https:" ? "https" : "http";
-let admin_chat_domain = "192.168.1.109:8000";
+let admin_chat_domain = "osina.ositcom.com";
 let userId = document.getElementById('userId').textContent.trim();
 let osichatroomsSocket;
 let osichatadminroomSocket;

osinaweb/static/js/osichat-admin/textarea.js

@@ -26,9 +26,9 @@
     // EVENT LISTENERS
     textarea.addEventListener('input', function () {
         // Adjust textarea and button
-        adjustTextAreaAndButton(dynamicTextarea, submitButton);
+        adjustTextAreaAndButton(textarea, submitButton);
         if (!isTyping){
-            chatWebSocket.send(JSON.stringify({ 
+            osichatadminroomSocket.send(JSON.stringify({ 
                 'event_type': 'typing',
                 'user_id': typingUserId,
                 'typing_status': 'typing' 
@@ -38,7 +38,7 @@
     
         clearTimeout(typingTimeout);
         typingTimeout = setTimeout(function() {
-            chatWebSocket.send(JSON.stringify({ 
+            osichatadminroomSocket.send(JSON.stringify({ 
                 'event_type': 'typing', 
                 'user_id': typingUserId,
                 'typing_status': 'stopped_typing' 

osinaweb/static/js/osichat/conversation.js

@@ -1,16 +1,45 @@
 const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
 const protocol = window.location.protocol === "https:" ? "https" : "http";
-const domain = "192.168.1.109:8000";
+const domain = "osina.ositcom.com";
 let osichatSocket;
 let isOpen = false;
 let chatLoaded = false;
 let newMessageCount = 0;
+let atBottom = true;
 
 
 function scrollBottom() {
     const conversationContainer = document.getElementById('conversation');
+
+    if (conversationContainer) {
+        conversationContainer.scrollTo({
+            top: conversationContainer.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+}
+
+
+function isScrolledToBottom(element) {
+    return element && (element.scrollHeight - element.scrollTop <= element.clientHeight + 200); 
+}
+
+
+
+function setupScrollEventListener() {
+    const conversationContainer = document.getElementById('conversation');
+
     if (conversationContainer) {
-        conversationContainer.scrollTop = conversationContainer.scrollHeight;
+        conversationContainer.addEventListener('scroll', () => {
+            if (isScrolledToBottom(conversationContainer)) {
+                if (!atBottom) {
+                    hideNewMessageNotification();
+                    atBottom = true; // Update flag when user scrolls to the bottom
+                }
+            } else {
+                atBottom = false; // Update flag if user is not at the bottom
+            }
+        });
     }
 }
 
@@ -20,7 +49,6 @@ function showNewMessageNotification(count) {
     if (newMessagesPopMessage && newMessagesCounter) {
         newMessagesCounter.textContent = count;
         newMessagesPopMessage.classList.remove('hidden');
-        console.log('popup displayed')
     }
 }
 
@@ -28,17 +56,39 @@ function hideNewMessageNotification() {
     const newMessagesPopMessage = document.getElementById('newMessagesPopMessage');
     if (newMessagesPopMessage) {
         newMessagesPopMessage.classList.add('hidden');
+        newMessageCount = 0;
+        const newMessagesCounter = document.getElementById('newMessagesCounter');
+        if (newMessagesCounter) {
+            newMessagesCounter.textContent = newMessageCount;
+        }
+        scrollBottom()
     }
 }
 
 
+function newMessageNotification() {
+    const notificationSound = document.getElementById('notification-sound');
+    notificationSound.play();
+
+    const conversationContainer = document.getElementById('conversation');
+
+    if (!isScrolledToBottom(conversationContainer)) {
+        let count = newMessageCount + 1;
+        newMessageCount = count;
+        showNewMessageNotification(count);
+    } else {
+        scrollBottom();
+    }
+    
+}
+
 
 // FUNCTION TO FETCH THE SESSION ID
 async function fetchSessionID() {
     let session_id = 'Unknown';
     while (session_id === 'Unknown') {
         try {
-            const response = await fetch('http://192.168.1.109:3000/get-client-session/');
+            const response = await fetch('https://ositcom.com/get-client-session/');
             const data = await response.json();
             if (data.session_id) {
                 session_id = data.session_id;
@@ -106,6 +156,7 @@ function handleLoadChatEvent(data, osichatSocket) {
     chatDiv.innerHTML = data.html;
     scrollBottom();
 
+
     if (isOpen) { // If 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' }));
     } else {
@@ -196,16 +247,16 @@ async function initializeChatWebSocket() {
                     osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' }));
                 }
                 messagesDiv.insertAdjacentHTML('beforeend', data.html);
+
+                const newMessagesPopMessage = document.getElementById('newMessagesPopMessage');
+                newMessagesPopMessage.addEventListener('click', hideNewMessageNotification);
+
                 if (data.user) { // If it is sent by an Osina user play a notification sound for the guest
-                    const notificationSound = document.getElementById('notification-sound');
-                    notificationSound.play();
                     if (typingDiv) {
                         typingDiv.remove();
                     }
-
-                    let count = newMessageCount + 1;
-                    newMessageCount = count;
-                    showNewMessageNotification(count);
+                    newMessageNotification();
+                    setupScrollEventListener();
                 }
                 break;
             case 'uploaded_file':
@@ -217,15 +268,19 @@ async function initializeChatWebSocket() {
                 const uploadingDiv = document.getElementById(`uploading-${data.file_name}`);
                 if (uploadingDiv) {
                     uploadingDiv.outerHTML = data.html;
-                    scrollBottom();
+                    if (!data.user) {
+                        scrollBottom();
+                    } else {
+                        newMessageNotification();
+                    }
                 }
                 else{
                     document.getElementById('messages').insertAdjacentHTML('beforeend', data.html);
-                    scrollBottom();
-                }
-                if (data.user) { // If it is sent by an Osina user play a notification sound for the guest
-                    const notificationSound = document.getElementById('notification-sound');
-                    notificationSound.play();
+                    if (!data.user) {
+                        scrollBottom();
+                    } else {
+                        newMessageNotification();
+                    }
                 }
                 break;
             case 'update_read_messages':  

osinaweb/static/js/osichat/upload-file.js

@@ -1,6 +1,4 @@
 (function () {
-    const imageDomain = "http://192.168.1.109:8000";
-
     // TO TRIGGER TEH FILE UPLOADER WHEN CLICKING ON THE UPLOAD FILE SVG
     document.getElementById('svgFileUpload').addEventListener('click', function () {
         document.getElementById('fileupload').click();
@@ -22,14 +20,14 @@
             }
 
             // Perform the upload
-            fetch(`${imageDomain}/chat-file-uploader/`, {
+            fetch(`${protocol}://${domain}/chat-file-uploader/`, {
                 method: 'POST',
                 body: formData,
             })
                 .then(response => response.json())
                 .then(data => {
                     if (data.data === 'Uploaded Successfully') {
-                        const fullPath = `${imageDomain}/${data.existingPath}`;
+                        const fullPath = `${protocol}://${domain}/${data.existingPath}`;
                         updateSelectTag(fullPath, file.name);
                         if (file.type.startsWith('image/')) {
                             osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file', 'path': data.existingPath, 'file_type': 'image', 'file_name': file.name }));

osinaweb/static/js/osichat/visitors.js

@@ -1,11 +1,11 @@
 const visitors_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const my_domain = "192.168.1.109:8000";
+const my_domain = "osina.ositcom.com";
 
 async function fetchClientData() {
     let clientData = { client_ip: 'Unknown', client_country: 'Unknown' };
     while (clientData.client_ip === 'Unknown') {
         try {
-            const response = await fetch('http://192.168.1.109:8000/get-client-ip/');
+            const response = await fetch('https://osina.ositcom.com/get-client-ip/');
             const data = await response.json();
             if (data.ip) {
                 clientData = {
@@ -25,7 +25,7 @@ async function fetchVisitorsSession() {
     let session_id = 'Unknown';
     while (session_id === 'Unknown') {
         try {
-            const response = await fetch('http://192.168.1.109:3000/get-client-session/');
+            const response = await fetch('https://ositcom.com/get-client-session/');
             const data = await response.json();
             if (data.session_id) {
                 session_id = data.session_id;