New changes.
parent
e9245d7849
commit
02186ac4cb
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,99 +1,131 @@
|
|||||||
{%load static%}
|
{%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-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between"
|
||||||
<div class="w-ful h-full flex flex-col justify-between">
|
id="chatContainer">
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
|
||||||
|
<div class="flex gap-3 items-center">
|
||||||
|
<img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<p class="text-white">Ositcom</p>
|
||||||
|
<p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||||
|
class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
|
||||||
|
<path
|
||||||
|
d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21"
|
||||||
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||||
|
<path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5"
|
||||||
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="w-full flex flex-col gap-5">
|
|
||||||
<!-- HEADER -->
|
|
||||||
<div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
|
|
||||||
<div class="flex gap-3 items-center">
|
|
||||||
<img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<p class="text-white">Ositcom</p>
|
|
||||||
<p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
|
<div class="flex-l overflow-y-auto flex flex-col gap-5 px-5 relative py-5" id="conversation">
|
||||||
<path d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
<!-- ROBOT -->
|
||||||
<path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
<div class="flex items-end gap-2">
|
||||||
</svg>
|
<div>
|
||||||
|
<div
|
||||||
|
class="w-[30px] h-[30px] 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">
|
||||||
|
<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" />
|
||||||
|
<path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5"
|
||||||
|
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
||||||
|
<path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
||||||
|
<circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
||||||
|
<circle cx="17" cy="3" r="1" stroke="white" 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="white" 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="#20336b" stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
<path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div class="max-h-[430px] overflow-y-auto flex flex-col gap-5 px-5">
|
<!-- USER MESSAGES -->
|
||||||
<!-- ROBOT -->
|
<div id="messages" class="w-full flex flex-col items-end gap-3">
|
||||||
<div class="flex items-end gap-2">
|
{% for message in chat_room_messages %}
|
||||||
<div>
|
{% if message.member %}
|
||||||
<div
|
<div class="flex items-end gap-2">
|
||||||
class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
|
<div>
|
||||||
<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" 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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
|
||||||
<path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
|
||||||
<circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
|
|
||||||
<circle cx="17" cy="3" r="1" stroke="white" 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="white" 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="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
</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="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
|
||||||
<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>
|
{% 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}}">
|
||||||
|
{% else %}
|
||||||
|
<p>nn</p>
|
||||||
|
{% endif %}
|
||||||
</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-6 bg-opacity-50 shadow-md border border-gray-100">
|
||||||
<!-- USER MESSAGES -->
|
<p class="break-all">{{message.content}}</p>
|
||||||
<div id="messages" class="w-full flex flex-col items-end gap-3">
|
|
||||||
{% for message in chat_room_messages %}
|
|
||||||
{% if message.member %}
|
|
||||||
<div class="flex items-end gap-2">
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
|
|
||||||
{% 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}}">
|
|
||||||
{% else %}
|
|
||||||
jh
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
|
|
||||||
</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">
|
|
||||||
<p>{{message.content}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-7 bg-opacity-70 bg-osiblue ">
|
|
||||||
<p>{{message.content}}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<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 ">
|
||||||
|
<p class="break-all">{{message.content}}</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form class="p-5" id="sendMessage">
|
|
||||||
<div class="relative w-full h-fit">
|
|
||||||
<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 type="submit" class="absolute h-full top-0 right-0 flex justify-center items-center px-3 rounded-md text-osiblue">
|
<form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
|
<!-- INCLUDE TYPING HERE -->
|
||||||
<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" />
|
<div class="mb-2 flex justify-start items-center gap-2 absolute -top-11">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<!-- END TYPING -->
|
||||||
|
|
||||||
|
<div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
|
||||||
|
<textarea name="message" id="dynamicTextarea" onkeyup="adjustTextHeight(this);"
|
||||||
|
placeholder="Write your message..."
|
||||||
|
class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
|
||||||
|
<div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||||
|
stroke="currentColor" class="w-5 notFilledSvg">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="hidden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||||
|
stroke="currentColor" class="w-5 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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
{% load static %}
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,27 @@
|
|||||||
|
function adjustTextHeight(textarea) {
|
||||||
|
// MAKE THE TEXTAREA'S HEIGHT ADJUSTABLE
|
||||||
|
if (textarea.value.trim() === '') {
|
||||||
|
textarea.style.height = '50px';
|
||||||
|
} else {
|
||||||
|
textarea.style.height = textarea.scrollHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// DISPLAY AND HIDE THE SUBMIT BUTTON
|
||||||
|
const submitButton = document.querySelector('#sendMessage button[type="submit"]');
|
||||||
|
if (textarea.value.trim() === '') {
|
||||||
|
submitButton.classList.add('hidden');
|
||||||
|
} else {
|
||||||
|
submitButton.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = document.querySelector('#sendMessage');
|
||||||
|
const textarea = document.querySelector('#dynamicTextarea');
|
||||||
|
const conversationContainer = document.getElementById('conversation');
|
||||||
|
|
||||||
|
form.addEventListener('submit', (event) => {
|
||||||
|
textarea.style.height = '50px';
|
||||||
|
setTimeout(() => {
|
||||||
|
conversationContainer.scrollTop = conversationContainer.scrollHeight;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue