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 %}
    <header class="page-header">
      <span class="eyebrow">Agent 对话</span>
      <h1 class="page-title">{{ scenario.name }}</h1>
      <p class="page-lead">{{ scenario.description }}</p>
      <ul class="meta-list">
        <li class="meta-badge">角色：{{ scenario.agent.role }}</li>
        <li class="meta-badge">目标：{{ scenario.agent.goal }}</li>
        <li class="meta-badge">已入库文档：{{ document_count }}</li>
        <li class="meta-badge">输出类型：{{ scenario.output.type }}</li>
      </ul>
    </header>

    <section class="layout-two-columns">
      <div class="stack">
        <article class="panel">
          <h2 class="section-title">提问面板</h2>
          <p class="muted">可以直接提问，也可以勾选部分已入库文档作为当前上下文范围。</p>
          <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>
              <button type="submit">提交问题并执行 Agent</button>
            </div>
          </form>
        </article>

        <article class="panel">
          <h2 class="section-title">执行说明</h2>
          <ul class="detail-list">
            <li class="detail-item">
              <strong>1. 场景配置</strong>
              系统会先读取当前 YAML 场景配置，确定角色、目标、工具和输出结构。
            </li>
            <li class="detail-item">
              <strong>2. RAG 与工具</strong>
              如果场景启用了知识库检索，系统会根据你的问题召回相关片段，并执行声明式工具。
            </li>
            <li class="detail-item">
              <strong>3. 结构化结果</strong>
              Agent Core 会优先解析 JSON 输出，解析失败时回退为稳定的展示结构。
            </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>
            {% if audit_log %}
              <p style="margin-top: 14px;">
                <a class="button" href="{% url 'audit:detail' audit_log.id %}">查看本次审计日志</a>
              </p>
            {% endif %}
          {% else %}
            <div class="notice">提交问题后，这里会展示 Agent 的主回答、模型信息和执行状态。</div>
          {% endif %}
        </article>

        {% if result %}
          <article class="panel">
            <h2 class="section-title">结构化结果</h2>
            <table class="kv-table">
              <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>
          </article>

          <article class="panel">
            <h2 class="section-title">引用片段</h2>
            {% if result.references %}
              <ul class="detail-list">
                {% 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">当前回答没有引用知识库片段。</div>
            {% endif %}
          </article>

          <article class="panel">
            <h2 class="section-title">工具调用</h2>
            {% if result.tool_calls %}
              <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>
    </section>
  {% endif %}
{% endblock %}