DEMO-AGENT/templates/home.html

{% extends "base.html" %}
{% load static %}

{% block title %}审核智能体 - DEMO-AGENT V2{% endblock %}
{% block body_class %}app-body{% endblock %}

{% block content %}
<main class="workspace" data-sidebar-state="open">
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-top">
      <button class="icon-button sidebar-toggle" type="button" id="sidebarToggle" aria-label="折叠侧边栏">
        <span></span>
        <span></span>
      </button>
      <div class="brand">
        <span class="brand-mark">审</span>
        <div class="brand-copy">
          <strong class="brand-text">审核智能体</strong>
          <span class="brand-subtitle">临床注册文件审核工作台</span>
        </div>
      </div>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="new_conversation">
        <button class="new-chat" type="submit">+ 新对话</button>
      </form>
      <form class="search-form" method="get">
        <label class="sr-only" for="conversationSearch">搜索会话</label>
        <input id="conversationSearch" type="text" name="q" value="{{ search_query }}" placeholder="搜索会话...">
      </form>
    </div>

    <div class="sidebar-group">
      <p class="sidebar-label">对话记录</p>
      <nav class="history-list" aria-label="对话历史">
        {% for conversation in conversations %}
          <a
            class="history-item{% if current_conversation and current_conversation.pk == conversation.pk %} active{% endif %}"
            href="/?conversation={{ conversation.pk }}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}"
          >
            <span class="history-title">{{ conversation.title|default:"新对话" }}</span>
            <span class="history-meta">{{ conversation.updated_at|date:"m月d日 H:i" }}</span>
          </a>
        {% empty %}
          <div class="history-empty">
            <p>暂无会话记录</p>
            <span>点击上方“新对话”开始审核。</span>
          </div>
        {% endfor %}
      </nav>
    </div>

  </aside>

  <section class="chat-shell">
    <header class="topbar">
      <div class="topbar-left">
        <button class="icon-button mobile-toggle" type="button" id="mobileSidebarToggle" aria-label="展开侧边栏">
          <span></span>
          <span></span>
        </button>
        <div class="tabbar" role="tablist" aria-label="页面切换">
          <button class="tab" type="button" role="tab" aria-selected="false">首页</button>
          <button class="tab" type="button" role="tab" aria-selected="false">知识库管理</button>
          <button class="tab active" type="button" role="tab" aria-selected="true">审核智能体</button>
          <button class="tab" type="button" role="tab" aria-selected="false">视频实时监测</button>
        </div>
      </div>

      <div class="topbar-right">
        <div class="user-menu" id="userMenu">
          <button class="user-menu-trigger" id="userMenuTrigger" type="button" aria-haspopup="menu" aria-expanded="false">
            <span class="avatar large">{{ request.user.username|slice:":1"|upper }}</span>
            <div class="user-copy">
              <strong>{{ request.user.username }}</strong>
              <span>当前登录用户</span>
            </div>
            <span class="caret"></span>
          </button>
          <div class="user-dropdown" id="userDropdown" role="menu">
            <div class="user-dropdown-section" role="none">
              <p class="user-dropdown-label">用户信息</p>
              <strong class="user-dropdown-name">{{ request.user.username }}</strong>
            </div>
            <a class="user-dropdown-link" href="{% url 'password_change' %}" role="menuitem">修改密码</a>
            <form action="{% url 'logout' %}" method="post" class="user-dropdown-form" role="none">
              {% csrf_token %}
              <button class="user-dropdown-link danger-link" type="submit" role="menuitem">退出登录</button>
            </form>
          </div>
        </div>
      </div>
    </header>

    <section class="chat-stage" data-stream-url="{% url 'chat_stream' %}">
      <div class="chat-scroll-wrap">
      <div class="chat-scroll" id="chatScroll">
        {% if current_conversation %}
          <div class="conversation-header" id="conversation-top" data-node-label="会话开始">
            <div>
              <p class="eyebrow">审核智能体</p>
              <h1>{{ current_conversation.title|default:"新对话" }}</h1>
            </div>
            <span class="conversation-meta">最后更新 {{ current_conversation.updated_at|date:"Y-m-d H:i" }}</span>
          </div>

          {% for message in messages %}
            <article
              class="message {{ message.role }}"
              id="message-{{ message.pk }}"
              data-node-label="{% if message.role == 'assistant' %}AI{% else %}用户{% endif %} {{ forloop.counter }}"
            >
              <div class="message-avatar{% if message.role == 'user' %} user-mark{% endif %}">
                {% if message.role == "assistant" %}AI{% else %}{{ request.user.username|slice:":1"|upper }}{% endif %}
              </div>
              <div class="message-bubble">
                <p>{{ message.content|linebreaksbr }}</p>
              </div>
            </article>
          {% endfor %}
        {% else %}
          <div class="empty-state">
            <p class="eyebrow">审核智能体</p>
            <h1>开始新的审核对话</h1>
            <p class="muted">输入资料疑点、法规条款、说明书问题或风险项，系统会为你保留真实会话记录。</p>
          </div>
        {% endif %}
      </div>
        <nav class="node-rail{% if not current_conversation %} hidden{% endif %}" id="nodeRail" aria-label="对话节点导航">
          <div class="node-rail-line"></div>
          {% if current_conversation %}
          {% for message in messages %}
            {% if message.role == "user" %}
            <a
              class="node-anchor{% if forloop.last %} latest{% endif %}"
              href="#message-{{ message.pk }}"
              data-target="message-{{ message.pk }}"
              title="用户 {{ forloop.counter }}"
            >
              <span class="node-dot"></span>
            </a>
            {% endif %}
          {% endfor %}
          {% endif %}
        </nav>
      </div>

      <div class="composer-wrap">
        <form class="composer" action="/" method="post" id="chatComposer">
          {% csrf_token %}
          <input type="hidden" name="action" value="send_message">
          <input type="hidden" name="conversation_id" id="conversationIdInput" value="{% if current_conversation %}{{ current_conversation.pk }}{% endif %}">
          <label class="sr-only" for="prompt">输入消息</label>
          <textarea id="prompt" name="prompt" rows="1" placeholder="输入审核问题、法规条款、说明书疑点或上传需求"></textarea>
          <div class="composer-actions">
            <div class="composer-tools">
              <span class="tool-chip passive-chip">法规核查</span>
              <span class="tool-chip passive-chip">说明书审核</span>
              <span class="tool-chip passive-chip">风险识别</span>
            </div>
            <button class="send-button" type="submit" id="sendButton">发送</button>
          </div>
        </form>
      </div>
    </section>
  </section>
</main>
{% endblock %}

{% block scripts %}
<script src="{% static 'js/app.js' %}"></script>
{% endblock %}