templates/chat.html

{% extends "base.html" %}
{% block content %}
<div class="chat-grid">
<section class="chat-panel">
<h2>Chat</h2>
<div id="chat-box" class="chat-box" aria-live="polite"></div>


<form id="chat-form" class="chat-form" autocomplete="off">
<input id="order_id" name="order_id" placeholder="Order ID (optional)" />
<div class="input-row">
<input id="user-input" name="user_input" placeholder="Type your message..." />
<button id="send-btn" type="submit">Send</button>
</div>
</form>


<div class="meta">
<div><strong>Category:</strong> <span id="category">—</span></div>
<div><strong>Sentiment:</strong> <span id="sentiment">—</span></div>
</div>
</section>


<aside class="side-panel">
<h3>Live Analytics</h3>
<canvas id="sentimentChart" height="140"></canvas>


<h3>Recent Negatives</h3>
<div id="negative-box" class="negative-box"></div>
</aside>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
{% endblock %}