DEMO-AGENT/templates/chat/index.html

{% extends "base.html" %}

{% block title %}{{ scenario.name|default:"Agent 审核工作台" }}{% endblock %}

{% block content %}
  {% if error %}
    <section class="notice notice-error">{{ error }}</section>
  {% endif %}

  {% if scenario %}
    <section class="page-header">
      <span class="eyebrow">Workspace</span>
      <h1 class="page-title">{{ scenario.name }}</h1>
      <p class="page-lead">左侧输入问题和选择文档，右侧查看执行结果。</p>
      <div class="badge-row">
        <span class="pill pill-accent">已入库文档：{{ document_count }}</span>
        <span class="pill">输出：{{ scenario.output.type }}</span>
      </div>
    </section>

    <section class="workspace-grid">
      <div class="stack">
        <article class="panel">
          <div class="section-heading">
            <div>
              <h2 class="section-title">任务输入与资料范围</h2>
              <p class="section-copy">左侧突出受控输入：先描述审核目标，再限定本轮使用的文档范围。</p>
            </div>
          </div>
          <form method="post" class="stack">
            {% csrf_token %}
            <div>
              {{ form.message.label_tag }}
              {{ form.message }}
              {% if form.message.errors %}
                <p class="notice notice-error">{{ form.message.errors|join:" " }}</p>
              {% endif %}
            </div>
            <div>
              {{ form.document_ids.label_tag }}
              <p class="help-text">不勾选时默认使用全部已入库文档。</p>
              <div class="checkbox-list">
                {% for checkbox in form.document_ids %}
                  <label class="checkbox-item">
                    {{ checkbox.tag }}
                    <span>{{ checkbox.choice_label }}</span>
                  </label>
                {% empty %}
                  <div class="notice">当前场景还没有已入库文档，系统将仅依赖工具和模型能力生成结果。</div>
                {% endfor %}
              </div>
              {% if form.document_ids.errors %}
                <p class="notice notice-error">{{ form.document_ids.errors|join:" " }}</p>
              {% endif %}
            </div>
            <div class="button-row">
              <button type="submit">提交问题并执行 Agent</button>
            </div>
          </form>
        </article>

        <article class="panel">
          <h2 class="section-title">快捷示例</h2>
          <ul class="detail-list">
            <li class="detail-item">检查当前资料是否存在缺失项</li>
            <li class="detail-item">抽取说明书中的关键字段</li>
            <li class="detail-item">比较两份文档中的产品名称是否一致</li>
          </ul>
        </article>
      </div>

      <div class="stack">
        <article class="panel">
          <h2 class="section-title">结果</h2>
          {% if result %}
            <ul class="meta-list">
              <li class="meta-badge">模型：{{ result.model_name }}</li>
              <li class="meta-badge {% if result.status == 'success' %}status-success{% else %}status-failed{% endif %}">状态：{{ result.status }}</li>
              <li class="meta-badge">耗时：{{ result.latency_ms }} ms</li>
            </ul>
            <div class="detail-item" style="margin-top: 16px;">
              <strong>主回答</strong>
              <div>{{ result.answer|linebreaksbr }}</div>
            </div>
          {% else %}
            <div class="notice">提交任务后，这里会展示 Agent 的执行状态、主回答和过程摘要。</div>
          {% endif %}
        </article>

        {% if result %}
          <article class="panel">
            <h2 class="section-title">证据引用与工具调用</h2>
            <p class="muted" style="margin-bottom: 14px;">引用片段与工具调用用于支撑结果可解释性。</p>
            {% if result.references %}
              <h3 style="margin-top: 0;">引用片段</h3>
              <ul class="detail-list" style="margin-bottom: 16px;">
                {% for reference in result.references %}
                  <li class="detail-item">
                    <strong>{{ reference.source }}</strong>
                    <div>{{ reference.content|default:"无正文内容"|linebreaksbr }}</div>
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <div class="notice" style="margin-bottom: 16px;">当前回答没有引用知识库片段。</div>
            {% endif %}

            {% if result.tool_calls %}
              <h3>工具调用</h3>
              <ul class="detail-list">
                {% for tool_call in result.tool_calls %}
                  <li class="detail-item">
                    <strong>{{ tool_call.tool_name }}</strong>
                    <p class="muted">执行状态：{{ tool_call.success }}</p>
                    {% if tool_call.error %}
                      <p class="notice notice-error">{{ tool_call.error }}</p>
                    {% endif %}
                    <pre class="code-block">{{ tool_call.result }}</pre>
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <div class="notice">当前场景没有声明工具，或本次执行无需调用工具。</div>
            {% endif %}
          </article>

          {% if result.error %}
            <article class="panel">
              <h2 class="section-title">错误信息</h2>
              <pre class="code-block">{{ result.error }}</pre>
            </article>
          {% endif %}
        {% endif %}
      </div>

      <div class="stack">
        <article class="panel">
          <div class="section-heading">
            <div>
              <h2 class="section-title">结构化审核结果</h2>
              <p class="section-copy">右侧结果舱用于展示缺失项、冲突项、字段池结果或风险清单。</p>
            </div>
          </div>
          {% if result %}
            <table class="kv-table">
              <caption style="text-align:left; padding-bottom:12px; color:var(--ink-soft);">结构化结果</caption>
              <tbody>
                {% for key, value in result.structured_output.items %}
                  <tr>
                    <th>{{ key }}</th>
                    <td>
                      {% if key == "answer" or key == "summary" or key == "reply" %}
                        {{ value|linebreaksbr }}
                      {% else %}
                        <pre class="code-block">{{ value }}</pre>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% else %}
            <div class="notice">执行任务后，这里会展示结构化审核结果和回填准备信息。</div>
          {% endif %}
        </article>

        <article class="panel">
          <h2 class="section-title">引用与审计</h2>
          <ul class="detail-list">
            <li class="detail-item">可查看引用片段、工具调用和本次审计日志。</li>
          </ul>
          {% if audit_log %}
            <div class="button-row" style="margin-top: 16px;">
              <a class="button" href="{% url 'audit:detail' audit_log.id %}">查看本次审计日志</a>
            </div>
          {% endif %}
        </article>
      </div>
    </section>
  {% endif %}
{% endblock %}