You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
5.3 KiB
HTML
97 lines
5.3 KiB
HTML
{% load static %}
|
|
|
|
<p id="sessionid" class="hidden">{{guest_session_id}}</p>
|
|
<p id="userId" class="hidden">{{request.user.id}}</p>
|
|
|
|
<div class="w-full h-full flex flex-col justify-end">
|
|
<!-- HEADER -->
|
|
<div class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px] text-secondosiblue">
|
|
<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" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p>{{chat_room.chatroomguest.name}}</p>
|
|
</div>
|
|
|
|
<!-- MESSAGES -->
|
|
<div class="flex-1 overflow-y-auto p-3 flex flex-col gap-4" id="messages_container">
|
|
{% for message in chat_messages %}
|
|
{% if message.member == request.user %}
|
|
<div class="w-full flex items-end justify-end gap-2">
|
|
<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>
|
|
|
|
<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>
|
|
{% else %}
|
|
<div class="w-full flex items-end justify-start gap-2">
|
|
<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" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="w-fit 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 class="break-all">{{message.content}}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
|
|
<!-- 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>
|
|
</div> -->
|
|
<!-- END TYPING -->
|
|
</div>
|
|
|
|
<!-- INPUT FORM -->
|
|
<form class="px-5 pb-5 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">
|
|
<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>
|
|
<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"
|
|
stroke="currentColor" class="w-5 notFilledSvg cursor-pointer" id="svgFileUpload">
|
|
<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>
|
|
<input type="file" id="fileupload" name="" placeholder="Select file" multiple class="hidden">
|
|
<select id="filePathInput" name="filePath" multiple hidden></select>
|
|
</div>
|
|
<button type="submit" id="submitMessageButton" 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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div> |