salim
/
newosinadjango
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new

Browse Source
main
emile 9 months ago
parent a75972e092
commit 034f07dc10
33 changed files with 244 additions and 139 deletions
Show Stats Download Patch File Download Diff File

BIN
osinaweb/db.sqlite3
View File

Binary file not shown.

BIN
osinaweb/osichat/__pycache__/consumers.cpython-310.pyc
View File

Binary file not shown.

2
osinaweb/osichat/consumers.py
Unescape Escape View File

@ -235,7 +235,7 @@ class OsitcomChatRoom(WebsocketConsumer):
'html': html, 'html': html,
})) }))
else: else:
if event.get('reconnecting') == 'False': if event.get('reconnecting') == 'False': #Connecting for the first time
html = render_to_string("chat-widget.html", context=context) html = render_to_string("chat-widget.html", context=context)
else: else:
if chat_room: if chat_room:

88
osinaweb/osichat/templates/chat-room.html
Unescape Escape View File

@ -2,13 +2,13 @@
<p id="chatRoomId" class="hidden">{{chat_room.id}}</p> <p id="chatRoomId" class="hidden">{{chat_room.id}}</p>
<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="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="overflow-y-auto flex flex-col gap-5 px-5 pt-3" id="conversation"> <div class="overflow-y-auto flex flex-col gap-5 px-5 pt-3" id="conversation">
<!-- ROBOT --> <!-- ROBOT -->
<div class="w-full flex items-end gap-2"> <div class="w-full flex items-end gap-2">
<div> <div>
<div <div
class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue"> class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" color="#000000" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" 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="white" <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="white"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@ -31,23 +31,22 @@
</div> </div>
</div> </div>
<div <div
class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100"> class="max-w-[80%] bg-gray-50 px-4 py-3 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
<p>{% if chat_room.chatroomguest.name %}Hello {{chat_room.chatroomguest.name}},{% else %}Hello,{% endif %} thank you for contacting us. Please bear with us while we <p>{% if chat_room.chatroomguest.name %}Hello {{chat_room.chatroomguest.name}},{% else %}Hello,{% endif %} thank you for contacting us. Please bear with us while we
connect you with the next available agent as soon as possible.</p> connect you with the next available agent as soon as possible.</p>
</div> </div>
</div> </div>
<!-- USER MESSAGES --> <!-- USER MESSAGES -->
<div id="messages" class="w-full flex flex-col gap-3"> <div id="messages" class="w-full flex flex-col gap-5 pb-1">
{% for message in chat_room_messages %} {% for message in chat_room_messages %}
<!-- STAFF MESSAGE --> <!-- STAFF MESSAGE -->
{% if message.member %} {% if message.member %}
{% if not message.chatmessageattachment %}
<div class="w-full flex items-end justify-start gap-2"> <div class="w-full flex items-end justify-start gap-2">
<div> <div>
<div <div
class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs"> class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
{% if message.member.staffprofile.image %} {% if message.member.staffprofile.image %}
<img class="w-full h-full rounded-full" <img class="w-full h-full rounded-full"
src="http://192.168.1.106:8000{{message.member.staffprofile.image.url}}"> src="http://192.168.1.106:8000{{message.member.staffprofile.image.url}}">
@ -56,72 +55,79 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div {% if not message.chatmessageattachment %}
class="w-fit bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100"> <div
<p class="break-all">{{message.content}}</p> class="max-w-[80%] bg-gray-50 px-4 py-3 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
</div> <p style="white-space: pre-line; overflow-wrap: anywhere;">{{message.content}}</p>
</div> </div>
{% else %} {% else %}
{% if message.chatmessageattachment.is_image %} {% 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"> <div
<img src="{{message.chatmessageattachment.attachment}}"> class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
</div> <img src="http://192.168.1.106:8000/{{message.chatmessageattachment.attachment}}" class="rounded-md">
{% 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">
<div class="w-full flex items-center gap-1">
<div>
<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>
</div> </div>
<div class="flex flex-col"> {% else %}
<span>{{message.chatmessageattachment.file_name}}</span> <div
class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<div class="w-full flex items-center gap-1">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-secondosiblue 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>
</div>
<div class="flex flex-col">
<span class="text-xs">{{message.chatmessageattachment.file_name}}</span>
</div>
</div>
</div> </div>
</div> {% endif %}
</div> {% endif %}
{% endif %} </div>
{% endif %}
<!-- GUEST MESSAGE --> <!-- GUEST MESSAGE -->
{% else %} {% else %}
{% if not message.chatmessageattachment %} {% if not message.chatmessageattachment %}
<div class="w-full flex justify-end"> <div class="w-full flex justify-end">
<div <div
class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue"> class="max-w-[80%] px-4 py-3 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
<p class="break-all">{{message.content}}</p> <p style="white-space: pre-line; overflow-wrap: anywhere;">{{message.content}}</p>
</div> </div>
</div> </div>
{% else %} {% else %}
{% if message.chatmessageattachment.is_image %} {% 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"> <div class="w-full flex justify-end">
<img src="http://192.168.1.106:8000/{{message.chatmessageattachment.attachment}}"> <div class="max-w-[80%] 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.106:8000/{{message.chatmessageattachment.attachment}}" class="rounded-md">
</div> </div>
</div>
{% else %} {% 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"> <div class="w-full flex justify-end">
<div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
<div class="w-full flex items-center gap-1"> <div class="w-full flex items-center gap-1">
<div> <div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 text-white notFilledSvg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-white notFilledSvg">
<path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <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="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> <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> </svg>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span>{{message.chatmessageattachment.file_name}}</span> <span class="text-xs">{{message.chatmessageattachment.file_name}}</span>
</div> </div>
</div> </div>
</div> </div>
</div>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
<audio id="notification-sound" src="http://192.168.1.106: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>
<div id="typing"> <div id="typing" class="hidden"></div>
</div>
</div> </div>

28
osinaweb/osichat/templates/chat-widget.html
Unescape Escape View File

@ -39,6 +39,34 @@
</div> </div>
<!-- CLOSE CHAT CONFIRMATION MESSAGE -->
<div class="w-full h-full absolute inset-0 rounded-none md:rounded-md bg-black bg-opacity-50 flex justify-center items-center p-5 z-20 hidden" id="confirmationMessageContainer">
<div class="w-full h-fit p-5 bg-white rounded-md shadow-md flex flex-col justify-center items-center gap-3 relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="closeConfirmationMessage" class="w-5 text-secondosiblue absolute top-3 right-3 hover:text-fifthosiblue duration-300 cursor-pointer">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
<p class="text-center text-secondosiblue mt-5">Are you sure you want to end this chat?</p>
<button class="rounded-md bg-red-500 border border-red-500 uppercase text-white px-5 py-2 shadow-md text-sm cursor-pointer hover:bg-white hover:text-red-500 duration-300">
End chat
</button>
</div>
</div>
<!-- ENDDDDDDD -->
<!-- SCRIPT -->
<!-- <script>
const closeConfirmationMessage = document.getElementById('closeConfirmationMessage')
closeConfirmationMessage.addEventListener("click", function() {
const confirmationMessageContainer = document.getElementById("confirmationMessageContainer");
if (confirmationMessageContainer) {
confirmationMessageContainer.classList.add("hidden");
}
});
</script> -->
<!-- SCRIPT -->
<div id="roomContainer" class="flex-l overflow-hidden h-full"> <div id="roomContainer" class="flex-l overflow-hidden h-full">
{% if chat_room %} {% if chat_room %}
{% include 'chat-room.html' %} {% include 'chat-room.html' %}

85
osinaweb/osichat/templates/partials/message-attachment.html
Unescape Escape View File

@ -1,42 +1,61 @@
{% if message_attachment.message.member %} {% if message_attachment.message.member %}
{% if file_type == 'image' %} <div class="w-full flex items-end justify-start gap-2">
<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"> <div>
<img src="http://192.168.1.106:8000/{{message_attachment.attachment}}"> <div
</div> class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
{% else %} {% if message_attachment.message.member.staffprofile.image %}
<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"> <img class="w-full h-full rounded-full"
<div class="w-full flex items-center gap-1"> src="http://192.168.1.106:8000{{message_attachment.message.member.staffprofile.image.url}}">
<div> {% else %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 text-white notFilledSvg"> <p>{{message_attachment.message.member.first_name.0}}{{message_attachment.message.member.last_name.0}}</p>
<path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> {% endif %}
<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>
</div>
<div class="flex flex-col">
<span>{{message_attachment.file_name}}</span>
</div>
</div> </div>
</div> </div>
{% endif %} {% if file_type == 'image' %}
<!-- GUEST MESSAGE --> <div
class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<img src="http://192.168.1.106:8000/{{message_attachment.attachment}}" class="rounded-md">
</div>
{% else %}
<div
class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<div class="w-full flex items-center gap-1">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-secondosiblue 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>
</div>
<div class="flex flex-col">
<span class="text-xs">{{message_attachment.file_name}}</span>
</div>
</div>
</div>
{% endif %}
</div>
<!-- GUEST ATTACHMENT -->
{% else %} {% else %}
{% if file_type == 'image' %} {% 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"> <div class="w-full flex justify-end">
<img src="http://192.168.1.106:8000/{{message_attachment.attachment}}"> <div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
</div> <img src="http://192.168.1.106:8000/{{message_attachment.attachment}}" class="rounded-md">
</div>
</div>
{% else %} {% 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"> <div class="w-full flex justify-end">
<div class="w-full flex items-center gap-1"> <div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
<div> <div class="w-full flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 text-white notFilledSvg"> <div>
<path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-white notFilledSvg">
<path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8 7L16 7" 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> <path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> <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>
</div> </svg>
<div class="flex flex-col"> </div>
<span>{{message_attachment.file_name}}</span> <div class="flex flex-col">
<span class="text-xs">{{message_attachment.file_name}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

106
osinaweb/osichat/templates/partials/message.html
Unescape Escape View File

@ -1,36 +1,80 @@
{% if chat_message.member %} {% if chat_message.member %}
<div class="w-full flex justify-start items-end gap-2 fade-in-up"> <div class="w-full flex items-end justify-start gap-2">
<div> <div>
<div <div
class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs"> class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
{% if chat_message.member.staffprofile.image %} {% if chat_message.member.staffprofile.image %}
<img class="w-full h-full rounded-full" <img class="w-full h-full rounded-full"
src="http://192.168.1.106: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 %}
</div>
</div>
{% if not chat_message.chatmessageattachment %}
<div
class="max-w-[80%] bg-gray-50 px-4 py-3 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<p style="white-space: pre-line; overflow-wrap: anywhere;">{{chat_message.content}}</p>
</div>
{% else %}
{% if chat_message.chatmessageattachment.is_image %}
<div
class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<img src="http://192.168.1.106:8000/{{chat_message.chatmessageattachment.attachment}}" class="rounded-md">
</div>
{% else %} {% else %}
<p>{{chat_message.member.first_name.0}}{{chat_message.member.last_name.0}}</p> <div
class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<div class="w-full flex items-center gap-1">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-secondosiblue 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>
</div>
<div class="flex flex-col">
<span class="text-xs">{{chat_message.chatmessageattachment.file_name}}</span>
</div>
</div>
</div>
{% endif %} {% endif %}
</div> {% endif %}
</div>
<div
class="w-fit bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
<p class="break-all">{{chat_message.content}}</p>
</div>
</div>
{% else %}
<div class="w-full flex justify-end">
<div
class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue fade-in-up">
<p class="break-all">{{chat_message.content}}</p>
</div> </div>
</div>
{% endif %}
<style> <!-- GUEST MESSAGE -->
@keyframes fadeInAndUp { {% else %}
from { opacity: 0; transform: translateY(12px); } {% if not chat_message.chatmessageattachment %}
to { opacity: 1; transform: translateY(0px); } <div class="w-full flex justify-end">
} <div
.fade-in-up { class="max-w-[80%] px-4 py-3 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
animation: fadeInAndUp 0.6s ease; <p style="white-space: pre-line; overflow-wrap: anywhere;">{{chat_message.content}}</p>
} </div>
</style> </div>
{% else %}
{% if chat_message.chatmessageattachment.is_image %}
<div class="w-full flex justify-end">
<div class="max-w-[80%] 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.106:8000/{{chat_message.chatmessageattachment.attachment}}" class="rounded-md">
</div>
</div>
{% else %}
<div class="w-full flex justify-end">
<div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
<div class="w-full flex items-center gap-1">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 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>
</div>
<div class="flex flex-col">
<span class="text-xs">{{chat_message.chatmessageattachment.file_name}}</span>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}

6
osinaweb/osichat/templates/partials/typing.html
Unescape Escape View File

@ -10,9 +10,9 @@
</div> </div>
<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"> 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-1.5 w-1.5 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-1.5 w-1.5 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 class="h-1.5 w-1.5 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;">
</div> </div>
</div> </div>
</div> </div>

2
osinaweb/osichat/templates/start-chat.html
Unescape Escape View File

@ -1,6 +1,6 @@
{% load static %} {% load static %}
<div class="w-full h-full md:h-[550px] bg-white rounded-b-none md:rounded-b-md"> <div class="w-full h-full md:h-[450px] lg:h-[550px] bg-white rounded-b-none md:rounded-b-md">
<form class="h-full flex flex-col justify-between" id="startChat"> <form class="h-full flex flex-col justify-between" id="startChat">
<div class=""> <div class="">
<div class="p-5 flex flex-col gap-10"> <div class="p-5 flex flex-col gap-10">

62
osinaweb/static/dist/output.css vendored
Unescape Escape View File

@ -991,6 +991,14 @@ video {
display: none; display: none;
} }
.h-1 {
height: 0.25rem;
}
.h-1\.5 {
height: 0.375rem;
}
.h-10 { .h-10 {
height: 2.5rem; height: 2.5rem;
} }
@ -1180,10 +1188,6 @@ video {
height: 100vh; height: 100vh;
} }
.h-1 {
height: 0.25rem;
}
.max-h-\[200px\] { .max-h-\[200px\] {
max-height: 200px; max-height: 200px;
} }
@ -1204,6 +1208,14 @@ video {
min-height: 500px; min-height: 500px;
} }
.w-1 {
width: 0.25rem;
}
.w-1\.5 {
width: 0.375rem;
}
.w-10 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }
@ -1417,10 +1429,6 @@ video {
width: 100%; width: 100%;
} }
.w-1 {
width: 0.25rem;
}
.min-w-full { .min-w-full {
min-width: 100%; min-width: 100%;
} }
@ -1433,6 +1441,10 @@ video {
max-width: 48rem; max-width: 48rem;
} }
.max-w-\[80\%\] {
max-width: 80%;
}
.max-w-full { .max-w-full {
max-width: 100%; max-width: 100%;
} }
@ -2178,6 +2190,10 @@ video {
--tw-gradient-to: #fff var(--tw-gradient-to-position); --tw-gradient-to: #fff var(--tw-gradient-to-position);
} }
.fill-blue-600 {
fill: #2563eb;
}
.fill-osiblue { .fill-osiblue {
fill: #20336b; fill: #20336b;
} }
@ -2186,10 +2202,6 @@ video {
fill: #374a7a; fill: #374a7a;
} }
.fill-blue-600 {
fill: #2563eb;
}
.object-cover { .object-cover {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
@ -3496,8 +3508,8 @@ video {
display: none; display: none;
} }
.md\:h-\[500px\] { .md\:h-\[450px\] {
height: 500px; height: 450px;
} }
.md\:h-fit { .md\:h-fit {
@ -3505,14 +3517,6 @@ video {
height: fit-content; height: fit-content;
} }
.md\:h-\[50px\] {
height: 50px;
}
.md\:h-\[550px\] {
height: 550px;
}
.md\:w-\[250px\] { .md\:w-\[250px\] {
width: 250px; width: 250px;
} }
@ -3550,16 +3554,16 @@ video {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
.md\:rounded-t-md {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.md\:rounded-b-md { .md\:rounded-b-md {
border-bottom-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
} }
.md\:rounded-t-md {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.md\:text-3xl { .md\:text-3xl {
font-size: 1.875rem; font-size: 1.875rem;
line-height: 2.25rem; line-height: 2.25rem;
@ -3635,6 +3639,10 @@ video {
display: none; display: none;
} }
.lg\:h-\[550px\] {
height: 550px;
}
.lg\:w-\[480px\] { .lg\:w-\[480px\] {
width: 480px; width: 480px;
} }

BIN
osinaweb/static/images/uploaded_chat_files/Classic-Car-Database-by-Teoalida-SAMPLE.xlsx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/IMG_3174.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-29 at 3.46.14 PM.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 10.10.29 AM_4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 10.10.29 AM_5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 10.10.29 AM_6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 12.54.43 PM_3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 12.54.43 PM_4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 12.54.43 PM_5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 12.54.43 PM_6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-07-31 at 12.54.43 PM_7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-08-01 at 3.28.50 PM.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
osinaweb/static/images/uploaded_chat_files/Screenshot 2024-08-01 at 3.28.59 PM.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_4.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_5.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_6.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_7.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_8.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/daralothman-family-tree_9.docx
View File

Binary file not shown.

BIN
osinaweb/static/images/uploaded_chat_files/image_picker_904A1F47-01E6-45A7-B92F-653F056E80C4-88858-00000094FBC3B8ED.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
osinaweb/static/images/uploaded_chat_files/image_picker_962BCFEF-6A5D-4986-994E-66B5AF874021-88858-000000990DFE88FF.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
osinaweb/static/images/uploaded_chat_files/osichat-notification_3.mp3
View File

Binary file not shown.

4
osinaweb/static/js/osichat/upload-file.js
Unescape Escape View File

@ -50,7 +50,7 @@
reader.onload = function (event) { reader.onload = function (event) {
let outerDiv = document.createElement('div'); let outerDiv = document.createElement('div');
outerDiv.id = 'uploading-' + file.name; 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'; outerDiv.className = 'max-w-[80%] 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'); let div = document.createElement('div');
let img = document.createElement('img'); let img = document.createElement('img');
@ -70,7 +70,7 @@
function displayDocumentDuringUpload(file) { function displayDocumentDuringUpload(file) {
let outerDiv = document.createElement('div'); let outerDiv = document.createElement('div');
outerDiv.id = 'uploading-' + file.name; 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'; outerDiv.className = 'max-w-[80%] 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'); let flexContainer = document.createElement('div');
flexContainer.className = 'w-full flex items-center gap-1'; flexContainer.className = 'w-full flex items-center gap-1';

Write Preview
Loading…
Cancel
Save