99 lines
4.8 KiB
HTML
99 lines
4.8 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Request Details | MCP Slack Bridge{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container my-5 py-5">
|
|
<div class="row">
|
|
<div class="col-lg-10 mx-auto">
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'home' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item active text-secondary" aria-current="page">Request: {{ req.id|truncatechars:12 }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="card p-4 p-md-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-5">
|
|
<h2 class="text-white fw-bold mb-0">Tool Call Details</h2>
|
|
{% if req.status == 'SENT' %}
|
|
<span class="badge-online bg-opacity-25 bg-success text-success border border-success">SENT</span>
|
|
{% elif req.status == 'ERROR' %}
|
|
<span class="badge-error bg-opacity-25 bg-danger text-danger border border-danger">ERROR</span>
|
|
{% else %}
|
|
<span class="badge-pending bg-opacity-25 bg-warning text-warning border border-warning">PENDING</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<p class="small text-secondary fw-bold text-uppercase">Tool Name</p>
|
|
<h5 class="text-info">{{ req.tool_name }}</h5>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="small text-secondary fw-bold text-uppercase">Slack Channel</p>
|
|
<h5 class="text-white">#{{ req.slack_channel|default:"N/A" }}</h5>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="small text-secondary fw-bold text-uppercase">Slack Timestamp</p>
|
|
<h5 class="text-white">{{ req.slack_ts|default:"N/A" }}</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-5 border-secondary opacity-25">
|
|
|
|
<div class="mb-5">
|
|
<h5 class="text-white mb-4">Arguments</h5>
|
|
<pre class="small bg-dark p-4 rounded-3 text-info"><code>{{ req.arguments|json_script:"args-data" }}</code>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const data = JSON.parse(document.getElementById('args-data').textContent);
|
|
document.querySelector('pre code').textContent = JSON.stringify(data, null, 2);
|
|
});
|
|
</script></pre>
|
|
</div>
|
|
|
|
<div class="mb-5">
|
|
<h5 class="text-white mb-4">Slack API Response</h5>
|
|
<pre class="small bg-dark p-4 rounded-3 text-secondary"><code>{{ req.response_json|json_script:"resp-data" }}</code>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const data = JSON.parse(document.getElementById('resp-data').textContent);
|
|
document.querySelectorAll('pre code')[1].textContent = JSON.stringify(data, null, 2);
|
|
});
|
|
</script></pre>
|
|
</div>
|
|
|
|
<div class="responses-section">
|
|
<h5 class="text-white mb-4 d-flex align-items-center">
|
|
Human Responses
|
|
<span class="ms-3 badge rounded-pill bg-primary fs-6">{{ responses.count }}</span>
|
|
</h5>
|
|
|
|
{% for r in responses %}
|
|
<div class="card bg-opacity-10 bg-info border-info border-opacity-25 p-4 mb-3">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="fw-bold text-info">{{ r.user_name|default:"Human" }}</span>
|
|
<span class="small text-secondary">{{ r.created_at|date:"Y-m-d H:i" }}</span>
|
|
</div>
|
|
<p class="mb-0 text-white">{{ r.text }}</p>
|
|
{% if r.file_url %}
|
|
<div class="mt-3">
|
|
<a href="{{ r.file_url }}" target="_blank" class="btn btn-sm btn-outline-info">View Attachment</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center py-5 border border-dashed border-secondary rounded-3">
|
|
<p class="text-secondary italic mb-0">No responses recorded yet.</p>
|
|
<small class="text-secondary">AI agent can check for updates using <code>list_responses</code></small>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|