<form id="chat-form" class="chat-form" hx-post="/send_message" hx-swap="outerHTML">
    <div class="typing-indicator" id="typing-indicator"><span></span><span></span><span></span></div>
    <div id="progress-wheel-container" class="progress-wheel-container" style="display: none;">
        <div class="progress-wheel-card">
            <div class="progress-wheel-visual">
                <svg class="progress-circle" width="60" height="60">
                    <circle class="progress-circle-bg" cx="30" cy="30" r="24"></circle>
                    <circle class="progress-circle-fill" cx="30" cy="30" r="24"></circle>
                </svg>
                <div class="progress-text">
                    <span id="progress-numerator">0</span>/<span id="progress-denominator">0</span>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress-label" id="progress-label">Data Extraction</div>
                <div class="progress-description"></div>
            </div>
        </div>
    </div>
    <textarea rows="1" id="chat-input" name="text" class="chat-input" placeholder="Talk to ScienceAI..."
        style="display: none;" /></textarea>
    <button id="send-message" style="display: none;">Send</button>
</form>
