{{ define "chat" }}
<label for="chat-checkbox">
    <div aria-label="Send message" id="start-chat">
        <svg class="chat-bubble" width="32" height="32" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
            fill="none" stroke="white" stroke-width="4">
            <path
                d="M4 12C4 7.58 8.03 4 13 4h38c4.97 0 9 3.58 9 8v24c0 4.42-4.03 8-9 8H22l-12 12v-12H13c-4.97 0-9-3.58-9-8V12z" />
        </svg>

    </div>
</label>
<input type="checkbox" name="chat-checkbox" id="chat-checkbox" class="chat-checkbox" />
<div class="chat" id="chat-box">
    <div id="chat-header">
        <p class="chat-title">System Design Assistant</p>
        <p class="powered-by">Powered by AI</p>
    </div>
    <section id="messages">
        <div class="loading-indicator" id="loading-indicator">
            <div class="loading-dots">
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
                <div class="loading-dot"></div>
            </div>
            <span>loading...</span>
        </div>
    </section>
    <footer>
        <textarea name="chat-message" placeholder="Type your message here..." disabled id="chat-message-box"></textarea>
        <button aria-label="Send message">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor">
                <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>
    </footer>
</div>


{{ end }}