

<div class="w-full h-full  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">
        <!-- ROBOT -->
        <div class="w-full flex items-end gap-2">
            <div>
                <div
                    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">
                        <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="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.visitor.name %}Hello {{chat_room.chatroomguest.visitor.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>
            </div>
        </div>
        
        <div id="messages" class="w-full flex flex-col gap-5 pb-1">
            {% for message in chat_room_messages %}
            <!-- STAFF MESSAGE  -->
            {% if message.member %}
            <div class="w-full flex items-end justify-start gap-2">
                <div>
                    <div
                        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 %}
                        <img class="w-full h-full rounded-full"
                            src="{{domain}}{{message.member.staffprofile.image.url}}">
                        {% else %}
                        <p>{{message.member.first_name.0}}{{message.member.last_name.0}}</p>
                        {% endif %}
                    </div>
                </div>
                {% if not 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;">{{message.content}}</p>
                </div>
                {% else %}
                {% if 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="{{domain}}/{{message.chatmessageattachment.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.chatmessageattachment.file_name}}</span>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endif %}
            </div>

            <!-- GUEST MESSAGE  -->
            {% else %}
            {% if not message.chatmessageattachment %}
            <div class="w-full flex justify-end">
                <div
                    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 style="white-space: pre-line; overflow-wrap: anywhere;">{{message.content}}</p>
                </div>
            </div>
            {% else %}
            {% if 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="{{domain}}/{{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">{{message.chatmessageattachment.file_name}}</span>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            {% endif %}
            {% endif %}
            {% endfor %}


            <!-- REVIEW CONTAINER SENT BY THE BOTT -->
            <div id="reviewContainer">
                {% if not chat_room.chatroomreview %}
                <div class="w-full flex items-end gap-2">
                    <div>
                        <div
                            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">
                                <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-[80%] flex flex-col gap-3 bg-gray-50 px-4 py-3 rounded-r-3xl border-t-2 border-secondosiblue rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md">
                        <p class="text-center text-secondosiblue">Rate your conversation</p>

                        <div class="w-full flex justify-center items-center gap-3">
                            <button data-reaction="Happy" class="cursor-pointer hover:scale-105 duration-500 w-fit h-fit rounded-full reaction-button">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-9"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
                                    viewBox="0 0 999 961" style="enable-background:new 0 0 999 961;" xml:space="preserve">
                                    <style type="text/css">
                                        .st0 {
                                            fill: #D62B2B;
                                        }

                                        .st1 {
                                            fill: #FFFFFF;
                                        }

                                        .st2 {
                                            fill: #1A212D;
                                        }

                                        .st3 {
                                            fill: #962A2A;
                                        }

                                        .st4 {
                                            fill: #EFC029;
                                        }

                                        .st5 {
                                            fill: #B79430;
                                        }

                                        .st6 {
                                            fill: #8ACC36;
                                        }

                                        .st7 {
                                            fill: #5D891F;
                                        }
                                    </style>
                                    <g id="background">
                                    </g>
                                    <g id="objects">
                                        <g>
                                            <circle class="st6" cx="482" cy="485" r="470.3" />
                                            <g>
                                                <circle class="st1" cx="292.8" cy="418.6" r="124.3" />
                                                <circle class="st2" cx="302" cy="426.7" r="67.9" />
                                                <circle class="st1" cx="349.2" cy="387.6" r="24.2" />
                                            </g>
                                            <g>
                                                <circle class="st1" cx="671.2" cy="418.6" r="124.3" />
                                                <circle class="st2" cx="662" cy="426.7" r="67.9" />
                                                <circle class="st1" cx="705.8" cy="387.6" r="24.2" />
                                            </g>
                                            <path class="st7"
                                                d="M626.5,612c4.1,0,8.3,1.1,12.2,3.3c11.5,6.7,15.3,21.5,8.6,33c-0.6,1.1-16.2,27.4-45.7,53.3    C561.8,736.6,515,755,466.2,755s-95.6-18.5-135.4-53.4c-29.6-26-45.1-52.2-45.7-53.3c-6.7-11.5-2.9-26.3,8.6-33    c11.5-6.7,26.2-2.9,33,8.6c0.2,0.3,13,21.7,37.1,42.5c31,26.8,65.5,40.4,102.4,40.4s71.4-13.6,102.4-40.4    c24.1-20.9,37-42.3,37.1-42.5C610.2,616.2,618.3,612,626.5,612z" />
                                        </g>
                                    </g>
                                </svg>
                            </button>

                            <button data-reaction="Indifferent" class="cursor-pointer hover:scale-105 duration-500  w-fit h-fit rounded-full reaction-button">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" x="0px" y="0px" class="w-9" viewBox="0 0 999 961"
                                    style="enable-background:new 0 0 999 961;" xml:space="preserve">
                                    <style type="text/css">
                                        .st0 {
                                            fill: #D62B2B;
                                        }

                                        .st1 {
                                            fill: #FFFFFF;
                                        }

                                        .st2 {
                                            fill: #1A212D;
                                        }

                                        .st3 {
                                            fill: #962A2A;
                                        }

                                        .st4 {
                                            fill: #EFC029;
                                        }

                                        .st5 {
                                            fill: #B79430;
                                        }

                                        .st6 {
                                            fill: #8ACC36;
                                        }

                                        .st7 {
                                            fill: #5D891F;
                                        }
                                    </style>
                                    <g id="background">
                                    </g>
                                    <g id="objects">
                                        <g>
                                            <circle class="st4" cx="499.5" cy="480.5" r="470.3" />
                                            <g>
                                                <circle class="st1" cx="310.3" cy="414.1" r="124.3" />
                                                <circle class="st2" cx="319.5" cy="422.1" r="67.9" />
                                                <circle class="st1" cx="366.7" cy="383" r="24.2" />
                                            </g>
                                            <g>
                                                <circle class="st1" cx="688.7" cy="414.1" r="124.3" />
                                                <circle class="st2" cx="679.5" cy="422.1" r="67.9" />
                                                <circle class="st1" cx="723.2" cy="383" r="24.2" />
                                            </g>
                                            <rect x="309.9" y="646.4" class="st5" width="379.1" height="48.2" />
                                        </g>
                                    </g>
                                </svg>
                            </button>


                            <button data-reaction="Sad" class="cursor-pointer hover:scale-105 duration-500  w-fit h-fit rounded-full reaction-button">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" x="0px" y="0px" class="w-9" viewBox="0 0 999 961"
                                    style="enable-background:new 0 0 999 961;" xml:space="preserve">
                                    <style type="text/css">
                                        .st0 {
                                            fill: #D62B2B;
                                        }

                                        .st1 {
                                            fill: #FFFFFF;
                                        }

                                        .st2 {
                                            fill: #1A212D;
                                        }

                                        .st3 {
                                            fill: #962A2A;
                                        }

                                        .st4 {
                                            fill: #EFC029;
                                        }

                                        .st5 {
                                            fill: #B79430;
                                        }

                                        .st6 {
                                            fill: #8ACC36;
                                        }

                                        .st7 {
                                            fill: #5D891F;
                                        }
                                    </style>
                                    <g id="background">
                                    </g>
                                    <g id="objects">
                                        <g>
                                            <circle class="st0" cx="499.5" cy="480.5" r="470.3" />
                                            <g>
                                                <circle class="st1" cx="310.3" cy="414.1" r="124.3" />
                                                <circle class="st2" cx="319.5" cy="422.1" r="67.9" />
                                                <circle class="st1" cx="366.7" cy="383" r="24.2" />
                                            </g>
                                            <g>
                                                <circle class="st1" cx="688.7" cy="414.1" r="124.3" />
                                                <circle class="st2" cx="679.5" cy="422.1" r="67.9" />
                                                <circle class="st1" cx="723.2" cy="383" r="24.2" />
                                            </g>
                                            <path class="st3"
                                                d="M336.7,746.1c-4.1,0-8.3-1.1-12.2-3.3c-11.5-6.7-15.3-21.5-8.6-33c0.6-1.1,16.2-27.4,45.7-53.3    c39.8-34.9,86.6-53.4,135.4-53.4c48.8,0,95.6,18.5,135.4,53.4c29.6,26,45.1,52.2,45.7,53.3c6.7,11.5,2.9,26.3-8.6,33    c-11.5,6.7-26.2,2.9-33-8.6c-0.2-0.3-13-21.7-37.1-42.5c-31-26.8-65.5-40.4-102.4-40.4s-71.4,13.6-102.4,40.4    c-24.1,20.9-37,42.3-37.1,42.5C353.1,741.8,345,746.1,336.7,746.1z" />
                                        </g>
                                    </g>
                                </svg>
                            </button>
                        </div>


                        <form class="w-full relative" id="sendReview">
                            {% csrf_token %}
                            <div
                                class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
                                <input name="message" placeholder="Tell us more..." id="messageInputTag"
                                    class="w-full border-none rounded-md outline-none px-3 py-2 resize-none duration-500">

                                <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
                                    <button type="submit" id="submitButton" 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>
                </div>
                {% else %}
                {% include 'partials/submitted-review.html' %}
                {% endif %}
            </div>
        </div>
    </div>


    <div class="mt-5">
        <!-- NEW CONVERSATION BUTTON -->
        <div class="px-5">
            <button id="startNewConversation"
                class="w-full px-5 py-2 bg-osiblue border border-osiblue rounded-md text-white cursor-pointer hover:bg-white hover:text-osiblue duration-300">
                Start a new conversation
            </button>
        </div>


        <!-- FOOTER -->
        <div class="w-full rounded-b-md px-3 py-3 flex justify-center items-center gap-1 bg-white">
            <img src="{{domain}}/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>
        </div>
    </div>

</div>


{% block form %}

{% endblock form %}