{# task_execution.html :contentReference[oaicite:6]{index=6}​:contentReference[oaicite:7]{index=7} #}
{% extends "base.html" %}
{% block content %}
  <div class="container mt-4 d-flex flex-column">
    <div id="chatWindow" class="flex-grow-1 overflow-auto p-3 mb-3 rounded">
      {% for msg in chat_history %}
        {% if msg.role=='user' %}
          <div class="d-flex justify-content-end mb-2">
            <div class="chat-bubble user">{{ msg.content }}</div>
          </div>
        {% else %}
          <div class="d-flex justify-content-start mb-2">
            <div class="chat-bubble bot">{{ msg.content }}</div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    <form method="POST" class="input-group">
      <textarea name="task" class="form-control" rows="1"
                placeholder="Type your message..." required autofocus></textarea>
      <button class="btn btn-primary" type="submit">Send</button>
    </form>
  </div>
  <script>
    // auto-scroll to bottom
    const cw = document.getElementById('chatWindow');
    if (cw) cw.scrollTop = cw.scrollHeight;
  </script>
{% endblock %}