112 lines
4.4 KiB
HTML
112 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Chat - CheddahBot{% endblock %}
|
|
{% block nav_chat_active %}active{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chat-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="chat-sidebar" id="chat-sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>Agents</h3>
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Close sidebar">✕</button>
|
|
</div>
|
|
<div class="agent-selector" id="agent-selector">
|
|
{% for agent in agents %}
|
|
<button
|
|
class="agent-btn {% if agent.name == default_agent %}active{% endif %}"
|
|
data-agent="{{ agent.name }}"
|
|
onclick="switchAgent('{{ agent.name }}')"
|
|
>{{ agent.display_name }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="sidebar-divider"></div>
|
|
|
|
<button
|
|
class="btn btn-new-chat"
|
|
hx-post="/chat/new"
|
|
hx-vals='{"agent_name": "{{ default_agent }}"}'
|
|
hx-target="#chat-messages"
|
|
hx-swap="innerHTML"
|
|
onclick="this.setAttribute('hx-vals', JSON.stringify({agent_name: getActiveAgent()}))"
|
|
>+ New Chat</button>
|
|
|
|
<h3>History</h3>
|
|
<div id="sidebar-conversations"
|
|
hx-get="/chat/conversations?agent_name={{ default_agent }}"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile sidebar toggle + overlay -->
|
|
<button class="sidebar-open-btn" onclick="toggleSidebar()" aria-label="Open sidebar">☰</button>
|
|
<div id="sidebar-overlay" class="sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Chat area -->
|
|
<div class="chat-main">
|
|
<!-- Status bar -->
|
|
<div class="status-bar">
|
|
<span class="status-item">Model: <strong>{{ chat_model }}</strong></span>
|
|
<span class="status-item">Exec: <strong class="{% if exec_available %}text-ok{% else %}text-err{% endif %}">{{ "OK" if exec_available else "N/A" }}</strong></span>
|
|
<span class="status-item">ClickUp: <strong class="{% if clickup_enabled %}text-ok{% else %}text-err{% endif %}">{{ "ON" if clickup_enabled else "OFF" }}</strong></span>
|
|
</div>
|
|
|
|
<!-- Notification banner (populated by SSE) -->
|
|
<div id="notification-banner" class="notification-banner" style="display:none;"></div>
|
|
|
|
<!-- Messages -->
|
|
<div class="chat-messages" id="chat-messages">
|
|
<!-- Messages loaded here -->
|
|
</div>
|
|
|
|
<!-- Input area -->
|
|
<form id="chat-form" class="chat-input-area"
|
|
hx-post="/chat/send"
|
|
hx-target="#chat-messages"
|
|
hx-swap="beforeend"
|
|
hx-encoding="multipart/form-data"
|
|
hx-on::after-request="afterSend(event)">
|
|
<input type="hidden" name="agent_name" id="input-agent-name" value="{{ default_agent }}">
|
|
<input type="hidden" name="conv_id" id="input-conv-id" value="">
|
|
<div class="input-row">
|
|
<label class="file-upload-btn" title="Attach files">
|
|
📎
|
|
<input type="file" name="files" multiple style="display:none;" onchange="showFileNames(this)">
|
|
</label>
|
|
<textarea name="text" id="chat-input" rows="1" placeholder="Type a message..."
|
|
onkeydown="handleKeydown(event)" oninput="autoResize(this)"></textarea>
|
|
<button type="submit" class="send-btn" title="Send">➤</button>
|
|
</div>
|
|
<div id="file-preview" class="file-preview" style="display:none;"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Initialize session state
|
|
const SESSION_KEY = 'cheddahbot_session';
|
|
let session = JSON.parse(localStorage.getItem(SESSION_KEY) || '{}');
|
|
if (!session.agent_name) session.agent_name = '{{ default_agent }}';
|
|
|
|
// Restore session on load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (session.agent_name) {
|
|
setActiveAgent(session.agent_name);
|
|
}
|
|
if (session.conv_id) {
|
|
loadConversation(session.conv_id);
|
|
}
|
|
// Load conversations for sidebar
|
|
refreshSidebar();
|
|
});
|
|
|
|
function saveSession() {
|
|
localStorage.setItem(SESSION_KEY, JSON.stringify(session));
|
|
}
|
|
</script>
|
|
{% endblock %}
|