new

osinaweb/osichat/consumers.py

@@ -69,7 +69,10 @@ class OsitcomChatRoom(WebsocketConsumer):
 
         if  event_type == 'load_chat':
             self.client_type = text_data_json.get('client_type')
-            self.load_chat_handler()
+            event = {
+                'reconnecting' : text_data_json.get('reconnecting')
+            }
+            self.load_chat_handler(event)
     
         if event_type == 'start_conversation':
             chat_room = ChatRoom.objects.create(
@@ -91,6 +94,18 @@ class OsitcomChatRoom(WebsocketConsumer):
              self.session_id, event
             )
 
+        if event_type == 'typing':
+            print(text_data_json.get('typing_status'))
+            print(text_data_json.get('user_id'))
+            event = {
+                'type': 'typing_handler',
+                'user_id': text_data_json.get('user_id'),
+                'typing_status':  text_data_json.get('typing_status')
+            }
+            async_to_sync(self.channel_layer.group_send)(
+             self.session_id, event
+            )
+
         if event_type == 'send_message':
             if text_data_json.get('user_id'):
                 member = get_object_or_404(User, id=text_data_json.get('user_id'))
@@ -191,7 +206,9 @@ class OsitcomChatRoom(WebsocketConsumer):
 
 
 
-    def load_chat_handler(self):
+
+            
+    def load_chat_handler(self, event):
         if self.chat_room:
             chat_room = self.chat_room
             chat_room_messages = ChatMessage.objects.filter(room=chat_room).order_by('date_sent')
@@ -210,6 +227,7 @@ class OsitcomChatRoom(WebsocketConsumer):
                     'chat_room_data': chat_room_data,
                     'chat_room_messages_data': chat_room_messages_data
                 },cls=DjangoJSONEncoder))
+
         elif self.client_type == 'website_admin':
             html = render_to_string("chat_templates/chat-widget.html", context=context)
             self.send(text_data=json.dumps({
@@ -217,7 +235,13 @@ class OsitcomChatRoom(WebsocketConsumer):
                 'html': html,
             }))
         else:
+            if event.get('reconnecting') == 'False':
               html = render_to_string("chat-widget.html", context=context)
+            else:
+                if chat_room:
+                    html = render_to_string("chat-room.html", context=context)
+                else: 
+                    html = render_to_string("start-conversation.html", context=context)
             self.send(text_data=json.dumps({
                 'event_type': 'load_chat',
                 'html': html,
@@ -241,6 +265,26 @@ class OsitcomChatRoom(WebsocketConsumer):
                 'html': html,
             }))
 
+    def typing_handler(self, event):
+        if event.get('typing_status') == 'typing':
+            if event.get('user_id'):
+                member = get_object_or_404(User, id=event.get('user_id'))
+            else:
+                member = None
+            
+            context = {
+                'member': member,
+            }
+
+            html = render_to_string("partials/typing.html", context=context)
+            self.send(text_data=json.dumps({
+                'event_type': 'typing',
+                'html': html,
+            }))
+        else:
+            self.send(text_data=json.dumps({
+                'event_type': 'stopped_typing',
+            }))
 
     def send_message_handler(self, event):
         chat_message = get_object_or_404(ChatMessage, id=event['chat_message_id'])
@@ -280,7 +324,6 @@ class OsitcomChatRoom(WebsocketConsumer):
             'html': html,
         }))
 
-
     def update_read_messages_handler(self, event): 
         latest_unread_message_id = event.get('latest_unread_message_id')
         if latest_unread_message_id:

osinaweb/osichat/templates/chat-room.html

@@ -50,7 +50,7 @@
                                     class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
                                     {% if message.member.staffprofile.image %}
                                     <img class="w-full h-full rounded-full"
-                                        src="http://192.168.1.111:8000{{message.member.staffprofile.image.url}}">
+                                        src="http://192.168.1.106:8000{{message.member.staffprofile.image.url}}">
                                     {% else %}
                                     <p>{{message.member.first_name.0}}{{message.member.last_name.0}}</p>
                                     {% endif %}
@@ -95,7 +95,7 @@
                     {% else %}
                         {% if message.chatmessageattachment.is_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="http://192.168.1.111:8000/{{message.chatmessageattachment.attachment}}">
+                                <img src="http://192.168.1.106:8000/{{message.chatmessageattachment.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">
@@ -117,27 +117,15 @@
                 {% endif %}
             {% endfor %}
         </div>
-        <audio id="notification-sound" src="http://192.168.1.111:8000/static/notifications/osichat-notification.mp3" preload="auto"></audio>
+        <audio id="notification-sound" src="http://192.168.1.106:8000/static/notifications/osichat-notification.mp3" preload="auto"></audio>
 
 
-        <!-- INCLUDE TYPING HERE -->
-        <!-- <div class="mb-2 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">
-                    <p>nn</p>
-                </div>
-                <div
-                    class="w-fit rounded-r-3xl rounded-tl-3xl px-2 py-2 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
-                    <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
-                    <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
-                    <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;">
-                    </div>
+        <div id="typing">
         </div>
-            </div> -->
-        <!-- END TYPING -->
     </div>
 
 
+
     <form class="px-5 p-3 bg-transparent relative" id="sendMessage">
         {% csrf_token %}
         <div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
@@ -167,7 +155,7 @@
         </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]">
+            <img src="http://192.168.1.106: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>

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="http://192.168.1.111:8000/{{message_attachment.attachment}}">
+            <img src="http://192.168.1.106: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">
@@ -23,7 +23,7 @@
 {% else %}
     {% 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="http://192.168.1.111:8000/{{message_attachment.attachment}}">
+            <img src="http://192.168.1.106: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/message.html

@@ -5,7 +5,7 @@
             class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
             {% if chat_message.member.staffprofile.image %}
             <img class="w-full h-full rounded-full"
-                src="http://192.168.0.100:8000{{chat_message.member.staffprofile.image.url}}">
+                src="http://192.168.1.106:8000{{chat_message.member.staffprofile.image.url}}">
             {% else %}
             <p>{{chat_message.member.first_name.0}}{{chat_message.member.last_name.0}}</p>
             {% endif %}

osinaweb/osichat/templates/partials/typing.html

@@ -1,2 +1,18 @@
-{% load static %}
-
+<div class="mb-2 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 member.staffprofile.image %}
+            <img class="w-full h-full rounded-full"
+                src="http://192.168.1.106:8000{{member.staffprofile.image.url}}">
+            {% else %}
+            <p>{{member.first_name.0}}{{member.last_name.0}}</p>
+            {% endif %}
+    </div>
+    <div
+        class="w-fit rounded-r-3xl rounded-tl-3xl px-3 py-3 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
+        <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
+        <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
+        <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;">
+        </div>
+    </div>
+</div>

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

@@ -7,7 +7,7 @@
                     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}}">
+                        src="http://192.168.1.106: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 %}
@@ -45,7 +45,7 @@
             </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">
+                <img src="http://192.168.1.106:8000{{latest_unread_message.chatmessageattachment.attachment}}" class="w-full h-full object-cover rounded-md">
             </div> 
         {% endif %}
 

osinaweb/osichat/templates/start-chat.html

@@ -62,7 +62,7 @@
             </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]">
+                <img src="http://192.168.1.106: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>

osinaweb/osinacore/templates/chat_templates/chat-room.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <p id="sessionid" class="hidden">{{guest_session_id}}</p>
-<p id="chatRoomId" class="hidden">{{chat_room.id}}</p>
+<p id="userId" class="hidden">{{request.user.id}}</p>
 
 <div class="w-full h-full flex flex-col justify-between">
     <!-- HEADER -->
@@ -76,7 +76,6 @@
         <div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
             <textarea name="message" id="dynamicTextarea" placeholder="Write your message..."
                 class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
-            <input type="text" value="{{request.user.id}}" name="user_id" class="hidden">
             <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
                 <div class="relative">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

osinaweb/static/dist/output.css

@@ -1180,6 +1180,10 @@ video {
   height: 100vh;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .max-h-\[200px\] {
   max-height: 200px;
 }
@@ -1413,6 +1417,10 @@ video {
   width: 100%;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }

osinaweb/static/images/uploaded_chat_files/decorators.py

@@ -0,0 +1,15 @@
+
+from django.http import HttpResponseForbidden
+from functools import wraps
+def require_token(view_func):
+    @wraps(view_func)
+    def _wrapped_view(request, *args, **kwargs):
+        token = request.META.get('HTTP_AUTHORIZATION')
+        static_token = 'A3uLHUthhCTba5q62eVG4XSHghB5nmPqk!XZyHsHP'  # Replace with your static token.
+
+        if token == f'Token {static_token}':
+            return view_func(request, *args, **kwargs)
+        else:
+            return HttpResponseForbidden()
+
+    return _wrapped_view

osinaweb/static/images/uploaded_chat_files/decorators_1.py

@@ -0,0 +1,15 @@
+
+from django.http import HttpResponseForbidden
+from functools import wraps
+def require_token(view_func):
+    @wraps(view_func)
+    def _wrapped_view(request, *args, **kwargs):
+        token = request.META.get('HTTP_AUTHORIZATION')
+        static_token = 'A3uLHUthhCTba5q62eVG4XSHghB5nmPqk!XZyHsHP'  # Replace with your static token.
+
+        if token == f'Token {static_token}':
+            return view_func(request, *args, **kwargs)
+        else:
+            return HttpResponseForbidden()
+
+    return _wrapped_view

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

@@ -1,5 +1,5 @@
 const admin_chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const admin_chat_domain = "192.168.1.111:8000";
+const admin_chat_domain = "192.168.1.106:8000";
 let chatWebSocket = null;
 
 
@@ -9,8 +9,8 @@ function openConversation(chatId) {
         .then(html => {
             const conversationContainer = document.getElementById('inner-conversation')
             conversationContainer.innerHTML = html;
-            const guestSessionId = document.getElementById('sessionid').textContent;
-            const chatRoomId = document.getElementById('chatRoomId').textContent.trim();
+            const guestSessionId = document.getElementById('sessionid').textContent.trim();
+            const userId = document.getElementById('userId').textContent.trim();
             // Close the previous WebSocket connection if it exists
             if (chatWebSocket) {
                 chatWebSocket.close();
@@ -28,12 +28,11 @@ function openConversation(chatId) {
                 event.preventDefault();
 
                 const message = event.target.elements.message.value;
-                const user_id = event.target.elements.user_id.value;
 
                 const eventMessage = {
                     'event_type': 'send_message',
                     'message': message,
-                    'user_id': user_id
+                    'user_id': userId
                 };
 
                 chatWebSocket.send(JSON.stringify(eventMessage));
@@ -41,6 +40,8 @@ function openConversation(chatId) {
                 event.target.reset();
             });
 
+
+
             chatWebSocket.onclose = function () {
                 console.log('WebSocket connection to osichat closed');
             };

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

@@ -15,14 +15,35 @@
     }
 
     // INITIALIZE ELEMENTS
-    const chatRoomId = document.getElementById('chatRoomId').textContent.trim();
     const form = document.querySelector('#sendMessage');
     const textarea = document.querySelector('#dynamicTextarea');
     const conversationContainer = document.getElementById('conversation');
     const submitButton = document.getElementById('submitMessageButton');
+    const typingUserId = document.getElementById('userId').textContent.trim();
+    let typingTimeout;
 
     // EVENT LISTENERS
-    textarea.addEventListener('input', () => adjustTextAreaAndButton(textarea, submitButton));
+    textarea.addEventListener('input', function () {
+        // Adjust textarea and button
+        adjustTextAreaAndButton(dynamicTextarea, submitButton);
+        console.log(chatWebSocket);
+        chatWebSocket.send(JSON.stringify({ 
+            'event_type': 'typing', 
+            'user_id': typingUserId,
+            'typing_status': 'typing' 
+        }));
+    
+        clearTimeout(typingTimeout);
+        typingTimeout = setTimeout(function() {
+            chatWebSocket.send(JSON.stringify({ 
+                'event_type': 'typing', 
+                'user_id': typingUserId,
+                'typing_status': 'stopped_typing' 
+            }));
+        }, 3000); 
+    });
+    
+
 
     form.addEventListener('submit', (event) => {
         textarea.style.height = '50px';
@@ -33,5 +54,4 @@
         }, 100);
     });
 
-    console.log('hi from textarea script');
 })();

osinaweb/static/js/osichat/conversation.js

@@ -1,14 +1,18 @@
 const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const domain = "192.168.1.111:8000";
+const domain = "192.168.1.106:8000";
 let osichatSocket;
 let isOpen = false;
+let chatLoaded = false;
+
+
+
 
 // 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.111:3000/get-client-session/');
+            const response = await fetch('http://192.168.1.106:3000/get-client-session/');
             const data = await response.json();
             if (data.session_id) {
                 session_id = data.session_id;
@@ -20,6 +24,20 @@ async function fetchSessionID() {
     return session_id;
 }
 
+// FUNCTIONS TO SHOW & HIDE THE LOADER
+function showLoader() {
+    const osichatLoader = document.getElementById('osichatLoader');
+    if (osichatLoader) {
+        osichatLoader.classList.remove('hidden');
+    }
+}
+
+function hideLoader() {
+    const osichatLoader = document.getElementById('osichatLoader');
+    if (osichatLoader) {
+        osichatLoader.classList.add('hidden');
+    }
+}
 
 // FUNCTION TO APPEND THE TEXTAREA SCRIPT
 function appendTextAreaScript(domain, chatDiv) {
@@ -29,7 +47,6 @@ function appendTextAreaScript(domain, chatDiv) {
     chatDiv.appendChild(textareaScript);
 }
 
-
 // FUNCTION TO HANDLE FORM SUBMISSION
 function handleFormSubmission(form, eventType, osichatSocket) {
     form.addEventListener('submit', function (event) {
@@ -41,23 +58,23 @@ function handleFormSubmission(form, eventType, osichatSocket) {
         formData.forEach((value, key) => {
             eventMessage[key] = value;
         });
-
         osichatSocket.send(JSON.stringify(eventMessage));
         form.reset();
     });
 }
 
-
 // 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
+    chatLoaded = true;
+    hideLoader();
+    let chatDiv = document.getElementById('roomContainer'); // CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER
     if (!chatDiv) {
-        chatDiv = document.getElementById('osichat'); //CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT
+        chatDiv = document.getElementById('osichat'); // CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT
     }
+
     chatDiv.innerHTML = data.html;
 
+
     if (!document.querySelector('script[src="http://' + domain + '/static/js/osichat/chat-toggle.js"]')) {
         const script = document.createElement('script');
         script.type = 'text/javascript';
@@ -90,12 +107,16 @@ async function initializeChatWebSocket() {
     osichatSocket = new WebSocket(osichatSocketUrl);
 
     osichatSocket.onopen = () => {
-        console.log('WebSocket connection to osichat established');
-        osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest' }));
+        if(!chatLoaded){
+            osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'False'}));
+        }else{
+            osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'True'}));
+        }
     };
 
     osichatSocket.onmessage = function (e) {
         const data = JSON.parse(e.data);
+        const typingDiv = document.getElementById('typing');
         switch (data.event_type) {
             case 'load_chat':
                 handleLoadChatEvent(data, osichatSocket);
@@ -103,20 +124,23 @@ async function initializeChatWebSocket() {
             case 'start_conversation':
                 handleLoadChatEvent(data, osichatSocket);
                 break;
+            case 'typing': 
+                typingDiv.classList.remove('hidden');
+                typingDiv.innerHTML = data.html;
+                break;
+            case 'stopped_typing':
+                typingDiv.classList.add('hidden');
+                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
+                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' }));
-                    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
+                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;
@@ -128,15 +152,14 @@ async function initializeChatWebSocket() {
                 break;
             case 'update_read_messages':  
                 const unreadMessages = document.getElementById(`unreadMessages`);
-                if (!isOpen){   
-                    unreadMessages.classList.remove('hidden')
-                    console.log(unreadMessages)
+                if (!isOpen) {   
+                    unreadMessages.classList.remove('hidden');
                     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')
+                } else {
+                    unreadMessages.classList.add('hidden');
                 }
                 break;
             default:
@@ -146,13 +169,29 @@ async function initializeChatWebSocket() {
 
     osichatSocket.onclose = () => {
         console.log('WebSocket connection to osichat closed');
-        // osichatLoader.classList.remove('hidden');
+        showLoader();
+        setTimeout(() => {
+            console.log('Attempting to reconnect to WebSocket...');
+            initializeChatWebSocket();
+        }, 2000);
     };
 
     osichatSocket.onerror = (error) => {
         console.log('WebSocket error:', error);
-        // osichatLoader.classList.remove('hidden');
+        showLoader();
     };
 }
 
+
+window.addEventListener('offline', () => {
+    showLoader();
+    if (osichatSocket) {
+        osichatSocket.close();
+    }
+});
+
+// INITIALIZE CHAT WEB SOCKET
 initializeChatWebSocket();
+
+
+

osinaweb/static/js/osichat/textarea.js

@@ -1,3 +1,4 @@
+(function() {
 // FUNCTION TO ADJUST TEXTAREA HEIGHT AND SUBMIT BUTTON VISIBILITY
 function adjustTextAreaAndButton(textarea, submitButton) {
     // Adjust the height of the textarea
@@ -34,3 +35,5 @@ form.addEventListener('submit', (event) => {
         conversationContainer.scrollTop = conversationContainer.scrollHeight;
     }, 100);
 });
+
+})();

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

@@ -1,11 +1,12 @@
-const imageDomain = "http://192.168.1.111:8000";
+(function () {
+    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() {
+    // 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) {
+    document.getElementById('fileupload').addEventListener('change', function (event) {
         let files = event.target.files;
 
         for (let file of files) {
@@ -42,11 +43,11 @@ document.getElementById('fileupload').addEventListener('change', function(event)
                 .catch(error => console.error('Error:', error));
         }
         event.target.value = '';
-});
+    });
 
-function displayImageDuringUpload(file) {
+    function displayImageDuringUpload(file) {
         let reader = new FileReader();
-    reader.onload = function(event) {
+        reader.onload = function (event) {
             let outerDiv = document.createElement('div');
             outerDiv.id = 'uploading-' + file.name;
             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';
@@ -63,10 +64,10 @@ function displayImageDuringUpload(file) {
             document.getElementById('messages').appendChild(outerDiv);
         };
         reader.readAsDataURL(file);
-}
+    }
 
 
-function displayDocumentDuringUpload(file) {
+    function displayDocumentDuringUpload(file) {
         let outerDiv = document.createElement('div');
         outerDiv.id = 'uploading-' + file.name;
         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';
@@ -105,16 +106,17 @@ function displayDocumentDuringUpload(file) {
         outerDiv.appendChild(flexContainer);
 
         document.getElementById('messages').appendChild(outerDiv);
-}
+    }
 
 
 
 
-function updateSelectTag(path, fileName) {
+    function updateSelectTag(path, fileName) {
         let option = document.createElement('option');
         option.value = path;
         option.textContent = fileName;
         option.selected = true;
         document.getElementById('filePathInput').appendChild(option);
-}
+    }
 
+})();