new

osinaweb/osichat/admin.py

@@ -3,9 +3,10 @@ from .models import *
 # Register your models here.
 
 admin.site.register(ChatRoom)
+admin.site.register(ChatRoomGuest)
 admin.site.register(ChatMember)
 admin.site.register(ChatProject)
 admin.site.register(ChatMessage)
 admin.site.register(ChatMessageAttachment)
 admin.site.register(ChatMessageReaction)
-admin.site.register(ChatMessageSeen)
+admin.site.register(ChatMessageSeen)

osinaweb/osichat/consumers.py

@@ -3,38 +3,113 @@ from .models import *
 import json
 from django.template.loader import render_to_string
 from asgiref.sync import async_to_sync
+from django.shortcuts import  get_object_or_404
 
 
 
 class OsitcomChatRoom(WebsocketConsumer):
     def connect(self):
+        self.session_id = self.scope['url_route']['kwargs']['session_id']
         async_to_sync(self.channel_layer.group_add)(
-            'ositcom_chat', self.channel_name
+            self.session_id, self.channel_name
         )
         self.accept()
-        self.send_template()
+        self.load_chat()
 
     def disconnect(self, close_code):
         async_to_sync(self.channel_layer.group_discard)(
-            "ositcom_chat",
-            self.channel_name
+            self.session_id, self.channel_name
         )
 
-    def send_template(self):
+
+    def load_chat(self): 
         event = {
-            'type': 'send_template_handler',
+            'type': 'load_chat_handler',
         }
         async_to_sync(self.channel_layer.group_send)(
-            'ositcom_chat', event
+            self.session_id, event
         )
 
-    def send_template_handler(self, event):
+    def receive(self, text_data): 
+        text_data_json = json.loads(text_data)
+        event_type = text_data_json.get('event_type')
+    
+        if event_type == 'start_conversation':
+            event = {
+                'type': 'start_conversation_handler',
+                'guest_name': text_data_json.get('guest_name'),
+                'guest_mobile_number': text_data_json.get('guest_mobile_number'),
+            }
+            async_to_sync(self.channel_layer.group_send)(
+             self.session_id, event
+            )
+
+        if event_type == 'send_message':
+            event = {
+                'type': 'send_message_handler',
+                'body': text_data_json['message']
+            }
+            async_to_sync(self.channel_layer.group_send)(
+             self.session_id, event
+            )
+
+
+
+    def load_chat_handler(self, event):
+        chat_room = None
+        chat_room_messages = None
+        chat_room_guest = ChatRoomGuest.objects.filter(session_id=self.session_id).last()
+        if chat_room_guest:
+            chat_room = chat_room_guest.room
+            self.chat_room = chat_room
+            chat_room_messages = ChatMessage.objects.filter(room=chat_room).order_by('date_sent')
+        context = {
+            'chat_room': chat_room,
+            'chat_room_messages': chat_room_messages,
+        }
+        html = render_to_string("chat-widget.html", context=context)
+        self.send(text_data=json.dumps({
+            'event_type': 'load_chat',
+            'html': html,
+        }))
+
+
+    def start_conversation_handler(self, event):
+        chat_room = ChatRoom.objects.create(
+            name=f"Support: {self.session_id}",
+            date_created = datetime.now()
+        )
+        chat_room_guest = ChatRoomGuest.objects.create(
+            room=chat_room,
+            name=event['guest_name'],
+            mobile_number= event['guest_mobile_number'],
+            session_id=self.session_id
+        )
         context = {
+            'chat_room': chat_room,
+            'session_id':self.session_id
+        }
+        html = render_to_string("conversation.html", context=context)
+        self.send(text_data=json.dumps({
+            'event_type': 'start_conversation',
+            'html': html,
+        }))
+
 
+    def send_message_handler(self, event):
+        chat_message = ChatMessage.objects.create(
+            room = self.chat_room,
+            content=event['body'],
+            date_sent = datetime.now()
+        )
+        context = {
+            'chat_message': chat_message,
         }
-        html = render_to_string("test.html", context=context)
+        print('lokf')
+        html = render_to_string("partials/message.html", context=context)
         self.send(text_data=json.dumps({
-            'event_type': 'chat',
+            'event_type': 'send_message',
             'html': html,
         }))
 
+

osinaweb/osichat/migrations/0002_chatroom_guest_session_alter_chatroom_created_by_and_more.py

@@ -0,0 +1,31 @@
+# Generated by Django 4.2.5 on 2024-07-20 08:19
+
+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', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chatroom',
+            name='guest_session',
+            field=models.CharField(blank=True, max_length=300, null=True),
+        ),
+        migrations.AlterField(
+            model_name='chatroom',
+            name='created_by',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL),
+        ),
+        migrations.AlterField(
+            model_name='chatroom',
+            name='name',
+            field=models.CharField(max_length=300),
+        ),
+    ]

osinaweb/osichat/migrations/0003_chatroomguest_remove_chatroom_guest_session.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.5 on 2024-07-20 08:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0002_chatroom_guest_session_alter_chatroom_created_by_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ChatRoomGuest',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=300)),
+                ('mobile_number', models.CharField(max_length=100)),
+                ('session_id', models.CharField(max_length=300)),
+            ],
+        ),
+        migrations.RemoveField(
+            model_name='chatroom',
+            name='guest_session',
+        ),
+    ]

osinaweb/osichat/migrations/0004_chatroomguest_room.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-07-20 08:29
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0003_chatroomguest_remove_chatroom_guest_session'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chatroomguest',
+            name='room',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.CASCADE, to='osichat.chatroom'),
+        ),
+    ]

osinaweb/osichat/migrations/0005_alter_chatmessage_member.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.5 on 2024-07-20 12:36
+
+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', '0004_chatroomguest_room'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='chatmessage',
+            name='member',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL),
+        ),
+    ]

osinaweb/osichat/migrations/0006_alter_chatmessage_content.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2024-07-20 12:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0005_alter_chatmessage_member'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='chatmessage',
+            name='content',
+            field=models.TextField(blank=True, null=True),
+        ),
+    ]

osinaweb/osichat/migrations/0007_chatmessage_room.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-07-20 13:04
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0006_alter_chatmessage_content'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chatmessage',
+            name='room',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.CASCADE, to='osichat.chatroom'),
+        ),
+    ]

osinaweb/osichat/migrations/0008_alter_chatmessage_room.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-07-20 13:44
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0007_chatmessage_room'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='chatmessage',
+            name='room',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='osichat.chatroom'),
+        ),
+    ]

osinaweb/osichat/migrations/0009_visitor.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.5 on 2024-07-21 16:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0008_alter_chatmessage_room'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Visitor',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('session_id', models.CharField(max_length=300)),
+                ('ip_address', models.CharField(max_length=300)),
+                ('url', models.URLField()),
+                ('reference', models.URLField()),
+            ],
+        ),
+    ]

osinaweb/osichat/migrations/0010_visitor_left_date_visitor_visit_date.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.5 on 2024-07-21 16:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osichat', '0009_visitor'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='visitor',
+            name='left_date',
+            field=models.DateTimeField(null=True),
+        ),
+        migrations.AddField(
+            model_name='visitor',
+            name='visit_date',
+            field=models.DateTimeField(null=True),
+        ),
+    ]

osinaweb/osichat/models.py

@@ -2,12 +2,28 @@ from django.db import models
 from osinacore.models import *
 # Create your models here.
 
+class Visitor(models.Model):
+    session_id = models.CharField(max_length=300)
+    ip_address = models.CharField(max_length=300)
+    url = models.URLField()
+    reference = models.URLField()
+    visit_date = models.DateTimeField(null=True)
+    left_date = models.DateTimeField(null=True)
+
 class ChatRoom(models.Model):
-    name = models.CharField(max_length=50)
-    created_by = models.ForeignKey(User, null=True, on_delete=models.SET_NULL)
+    name = models.CharField(max_length=300)
+    created_by = models.ForeignKey(User, null=True, on_delete=models.SET_NULL, blank=True)
     date_created = models.DateTimeField()
 
 
+class ChatRoomGuest(models.Model):
+    room = models.OneToOneField(ChatRoom, on_delete=models.CASCADE, null=True)
+    name = models.CharField(max_length=300)
+    mobile_number = models.CharField(max_length=100)
+    session_id = models.CharField(max_length=300)
+
+
+
 class ChatMember(models.Model):
     member = models.ForeignKey(User, on_delete=models.CASCADE)
     room = models.ForeignKey(ChatRoom, on_delete=models.CASCADE)
@@ -21,8 +37,9 @@ class ChatProject(models.Model):
 
 
 class ChatMessage(models.Model):
-    member = models.ForeignKey(User, null=True, on_delete=models.SET_NULL)
-    content = models.TimeField(null=True, blank=True)
+    room = models.ForeignKey(ChatRoom, on_delete=models.CASCADE, null=True)
+    member = models.ForeignKey(User, null=True, on_delete=models.SET_NULL, blank=True)
+    content = models.TextField(null=True, blank=True)
     date_sent = models.DateTimeField()
 
 

osinaweb/osichat/routing.py

@@ -2,6 +2,6 @@ from django.urls import path
 from .consumers import *
 
 websocket_urlpatterns = [
-    path("ws/osichat/", OsitcomChatRoom.as_asgi()),
+    path("ws/osichat/<str:session_id>/", OsitcomChatRoom.as_asgi()),
 
 ]

osinaweb/osichat/templates/chat-widget.html

@@ -0,0 +1,28 @@
+<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="chatContainer">
+    {% if chat_room %}
+      {% include 'conversation.html' %}
+    {% else %}
+        {% include 'start-conversation.html' %}
+    {% endif %}
+</div>
+
+
+
+<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" id="opsenChatContainer">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+    <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path
+        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>
+
+<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" id="closeChatContainer">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+        <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</div>

osinaweb/osichat/templates/conversation.html

@@ -0,0 +1,73 @@
+{%load static%}
+<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="chatContainer">
+    <div class="w-ful h-full flex flex-col justify-between p-5">
+        <div class="w-full flex flex-col gap-5">
+
+            <div class="flex items-end gap-2">
+                <div>
+                    <div
+                        class="w-[40px] h-[40px] rounded-full shadow-md text-white flex justify-center items-center bg-secondosiblue">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
+                            <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M7 7L7 4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                            <path d="M17 7L17 4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                            <circle cx="7" cy="3" r="1" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                            <circle cx="17" cy="3" r="1" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                            <path d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                            <path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M9.00896 11H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M15.009 11H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg> 
+
+                    </div>
+                </div>
+                <div
+                    class="w-full bg-gray-50 p-2 rounded-md text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
+                    <p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
+                </div>
+            </div>
+
+            <div id="messages">
+                {% for message in chat_room_messages %}
+                <div class="w-full bg-osiblue bg-opacity-80 p-2 rounded-md text-white shadow-md text-sm leading-7">
+                    <p>{{message.content}}</p>
+                </div>
+                {% endfor %}
+            </div>
+
+        </div>
+
+        <form class="flex gap-1" id="sendMessage">
+                <input type="text" name="message" class="w-full border border-gray-300 rounded-md px-3 py-3 outline-none" placeholder="Write your message...">
+                <button class="w-[50px] rounded-md p-1 flex justify-center items-center bg-osiblue">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 text-white notFilledSvg">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+                    </svg>
+                </button>
+        </form>
+
+    
+    </div>
+</div>
+
+<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" id="openChatContainer">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+    <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path
+        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>
+
+<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" id="closeChatContainer">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+        <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</div>
+
+

osinaweb/osichat/templates/partials/message.html

@@ -0,0 +1,13 @@
+<div class="w-full bg-osiblue bg-opacity-80 p-2 rounded-md text-white shadow-md text-sm leading-7 fade-in-up">
+    <p>{{chat_message.content}}</p>
+</div>
+
+<style>
+    @keyframes fadeInAndUp {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0px); }
+    }
+    .fade-in-up {
+        animation: fadeInAndUp 0.6s ease;
+    }
+</style>

osinaweb/osichat/templates/start-conversation.html

@@ -0,0 +1,66 @@
+{% load static %}
+<div id="startChatContainer">
+    <form 
+    class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="startChat">
+
+    <div  class="">
+        <div class="w-full rounded-t-md bg-osiblue flex gap-3 items-center px-5 py-3">
+            <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
+            <p class="text-white">Welcome to Ositcom</p>
+        </div>
+
+        <div class="p-5 flex flex-col gap-10">
+            <p class="text-gray-500">
+                We are here 24/7/365 to help with sales or support queries. To start your conversation enter your
+                name
+                and mobile number below.
+            </p>
+
+            <div class="w-full flex flex-col gap-3">
+                <input name="guest_name" type="text" placeholder="Name"
+                    class="w-full border border-gray-300 px-3 py-3 outline-none rounded-md">
+                <input name="guest_mobile_number" type="number" placeholder="Mobile Number"
+                    class="w-full border border-gray-300 px-3 py-3 outline-none rounded-md">
+            </div>
+        </div>
+    </div>
+
+    <div class="p-5">
+        <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>
+
+            <p class="text-gray-500 text-sm">Typically replies in a few minutes</p>
+
+            <button type="submit"
+                class="flex justify-start items-center gap-1 text-secondosiblue cursor-pointer hover:text-gray-400 duration-300">
+                <p class="">Start Conversation</p>
+                <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>
+            </button>
+        </div>
+    </div> 
+    </form>
+</div>
+
+
+
+<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" id="openChatContainer">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+    <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path
+        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>
+
+<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" id="closeChatContainer">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+        <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</div>

osinaweb/osichat/templates/test.html

@@ -1,3 +0,0 @@
-<div>
-    Hiiii
-</div>

osinaweb/osinacore/templates/index.html

@@ -361,27 +361,6 @@
 
 
 
-<script>
-    // WebSocket connection for new tickets
-    const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-    const osichatSocketUrl = `${chat_ws_scheme}://${window.location.host}/ws/osichat/`;
-    const osichatSocket = new WebSocket(osichatSocketUrl);
-
-    osichatSocket.onopen = () => {
-        console.log('WebSocket connection to osichat established');
-    };
-
-    osichatSocket.onclose = () => {
-        console.log('WebSocket connection to osichat closed');
-    };
-
-    osichatSocket.onerror = (error) => {
-        console.log('WebSocket error:', error);
-    };
-
-</script>
-
-
 
 
     

osinaweb/osinaweb/settings.py

@@ -79,7 +79,6 @@ TEMPLATES = [
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
-            
                 'osinacore.custom_context.utilities',
                 'customercore.custom_context.utilities',
                 'django.template.context_processors.debug',

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

@@ -0,0 +1,18 @@
+console.log('toggle me');
+document.addEventListener('DOMContentLoaded', function() {
+    const openChatButton = document.getElementById('openChatContainer');
+    const chatContainer = document.getElementById('chatContainer');
+    const closeChatButton = document.getElementById('closeChatContainer');
+
+    openChatButton.addEventListener('click', function() {
+        chatContainer.classList.remove('hidden');
+        openChatButton.classList.add('hidden');
+        closeChatButton.classList.remove('hidden');
+    });
+
+    closeChatButton.addEventListener('click', function() {
+        chatContainer.classList.add('hidden');
+        openChatButton.classList.remove('hidden');
+        closeChatButton.classList.add('hidden');
+    });
+})

osinaweb/static/js/osichat/conversation.js

@@ -0,0 +1,87 @@
+
+const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
+const domain = "192.168.1.111:8000";
+const sessionId = document.getElementById('session_id').textContent.trim();
+console.log(sessionId);
+const osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/${sessionId}/`;
+const osichatSocket = new WebSocket(osichatSocketUrl);
+
+
+osichatSocket.onopen = () => {
+    console.log('WebSocket connection to osichat established');
+};
+    
+osichatSocket.onmessage = function(e) {
+    const data = JSON.parse(e.data);
+    if  (data.event_type === 'load_chat') {
+        const chatDiv = document.getElementById('osichat');
+        const html = data.html;
+        chatDiv.innerHTML = html;
+    
+        // Append the toggle tag
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = `http://${domain}/static/js/osichat/chat-toggle.js`;
+        chatDiv.appendChild(script);
+
+        const startChatContainer = document.getElementById('startChat');
+        // If this container exists then the template returned was start-conversation.html, no conversation yet.
+        if (startChatContainer) { 
+            startChatContainer.addEventListener('submit', function(event) {
+                event.preventDefault();
+                
+                const guestName = event.target.elements.guest_name.value;
+                const guestMobileNumber = event.target.elements.guest_mobile_number.value;
+                
+                const eventMessage = {
+                    'event_type': 'start_conversation',
+                    'guest_name': guestName,
+                    'guest_mobile_number': guestMobileNumber,
+                };
+                
+                osichatSocket.send(JSON.stringify(eventMessage));
+                
+                event.target.reset();
+            });
+        }
+
+        const sendMessageContainer = document.getElementById('sendMessage');
+        if (sendMessageContainer) { 
+            sendMessageContainer.addEventListener('submit', function(event) {
+                event.preventDefault();
+                
+                const message = event.target.elements.message.value;
+                
+                const eventMessage = {
+                    'event_type': 'send_message',
+                    'message': message,
+
+                };
+            
+                osichatSocket.send(JSON.stringify(eventMessage));
+                
+                event.target.reset();
+            });
+        }
+
+    } else if (data.event_type === 'start_conversation') {
+        const chatDiv = document.getElementById('startChatContainer');
+        const html = data.html;
+        chatDiv.innerHTML = html;
+
+    } else if (data.event_type === 'send_message') {
+        const messagesDiv = document.getElementById('messages');
+        const html = data.html;
+        messagesDiv.insertAdjacentHTML('beforeend', html);
+
+    }
+};
+
+osichatSocket.onclose = () => {
+    console.log('WebSocket connection to osichat closed');
+};
+
+osichatSocket.onerror = (error) => {
+    console.log('WebSocket error:', error);
+};
+