{% extends base.html %}

{% block head %}
<link rel="stylesheet" href="{{_server_home}}/_static/css/base/common-dropdown.css?ts={{_ts}}"/>
<link rel="stylesheet" href="{{_server_home}}/_static/css/chatbot.css?ts={{_ts}}"/>
{% end %}

{% block body %}

<div class="card">
  {% include common/title/base_title.html %}
</div>

<div class="card">
  <div class="chat-container">
    <div class="chat-session-list">
      <a class="chat-session-item chat-session-new" href="{{_server_home}}/chatbot?action=new">+ 新建会话</a>
      <div id="session-list-inner">
        {% raw session_list_html %}
      </div>
    </div>

    <div class="chat-main">
      <div class="chat-message-list" id="message-list">
        {% if not current_session %}
        <div class="chat-empty-tip" id="chat-empty-tip">新会话, 发送第一条消息后自动创建</div>
        {% end %}
        {% for msg in message_list %}
        <div class="chat-message-row{% if msg.is_bot %} chat-message-bot{% else %} chat-message-user{% end %}">
          <div class="chat-message-bubble">{{msg.content}}</div>
          <div class="chat-message-time">{{msg.time_str}}</div>
        </div>
        {% end %}
      </div>

      <div class="chat-input-box">
          <textarea id="chat-input" class="chat-input" rows="3"
                  placeholder="输入消息, Enter 发送, Ctrl+Enter 换行"></textarea>
        <div class="chat-input-actions">
          <button id="chat-send-btn" class="btn btn-default">发送</button>
        </div>
      </div>
    </div>
  </div>
</div>

<input type="hidden" id="current-session-id" value="{{current_session_id}}"/>

<script type="text/javascript" src="{{_server_home}}/_static/js/chatbot/chatbot.js?ts={{_ts}}"></script>

{% end %}

{% block body_right %}
{% raw aside_html %}
{% end %}