SekiDesu0
6f7987c3fe
modified: handlers/dashboard.go modified: main.go modified: services/openrouter.go modified: templates/dashboard.html
275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
{{ define "dashboard.html" }}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>SekiBot | Dashboard</title>
|
|
<style>
|
|
/* DISCORD-ISH THEME */
|
|
:root { --blurple: #5865F2; --bg-sidebar: #2f3136; --bg-chat: #36393f; --bg-input: #40444b; --text: #dcddde; --success: #43b581; --danger: #f04747; }
|
|
body { margin: 0; display: flex; height: 100vh; font-family: 'Segoe UI', sans-serif; background: var(--bg-chat); color: var(--text); }
|
|
|
|
/* SIDEBAR */
|
|
.sidebar { width: 260px; background: var(--bg-sidebar); display: flex; flex-direction: column; padding: 15px; border-right: 1px solid #202225; }
|
|
.chat-list { flex-grow: 1; overflow-y: auto; margin-top: 10px; }
|
|
.nav-item, .chat-item { padding: 10px; border-radius: 4px; cursor: pointer; margin-bottom: 5px; color: #8e9297; transition: 0.2s; }
|
|
.nav-item:hover, .chat-item:hover { background: rgba(79,84,92,0.4); color: var(--text); }
|
|
.nav-item.active, .chat-item.active { background: rgba(79,84,92,0.6); color: white; font-weight: bold; }
|
|
|
|
/* LAYOUT */
|
|
.main-content { flex-grow: 1; display: none; flex-direction: column; height: 100vh; }
|
|
.show { display: flex !important; }
|
|
|
|
/* CHAT AREA */
|
|
.messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; scroll-behavior: smooth; }
|
|
.msg { max-width: 80%; padding: 12px 16px; border-radius: 8px; line-height: 1.5; font-size: 0.95rem; white-space: pre-wrap;}
|
|
.user { align-self: flex-end; background: var(--blurple); color: white; border-bottom-right-radius: 0; }
|
|
.assistant { align-self: flex-start; background: var(--bg-input); border-bottom-left-radius: 0; }
|
|
|
|
.input-area { padding: 20px; background: var(--bg-chat); margin-bottom: 20px;}
|
|
#user-input { width: 95%; background: var(--bg-input); border: none; padding: 15px; border-radius: 8px; color: white; outline: none; font-size: 1rem; }
|
|
|
|
/* APPOINTMENTS AREA */
|
|
.panel-container { padding: 40px; overflow-y: auto; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--bg-sidebar); border-radius: 8px; overflow: hidden; }
|
|
th, td { padding: 15px; text-align: left; border-bottom: 1px solid var(--bg-input); }
|
|
th { background: #202225; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
|
|
input[type="text"], input[type="datetime-local"] { background: var(--bg-input); border: 1px solid #202225; color: white; padding: 8px; border-radius: 4px; }
|
|
|
|
button { cursor: pointer; border: none; padding: 8px 16px; border-radius: 4px; color: white; font-weight: bold; transition: 0.2s; }
|
|
.btn-primary { background: var(--blurple); width: 100%; padding: 12px; margin-bottom: 10px; }
|
|
.btn-success { background: var(--success); }
|
|
.btn-danger { background: var(--danger); }
|
|
|
|
.status-pill { background: #faa61a; color: black; padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sidebar">
|
|
<h2 style="color: white; margin-bottom: 20px;">🤖 SekiBot</h2>
|
|
|
|
<div class="nav-item active" onclick="switchPanel('chat')" id="nav-chat">💬 Conversations</div>
|
|
<div class="nav-item" onclick="switchPanel('appt')" id="nav-appt">📅 Appointments</div>
|
|
|
|
<hr style="border: 0; border-top: 1px solid #42454a; margin: 15px 0;">
|
|
|
|
<button class="btn-primary" onclick="createNewChat()">+ New Chat</button>
|
|
|
|
<div class="chat-list" id="chat-list-container">
|
|
{{range .Chats}}
|
|
<div class="chat-item" onclick="loadChat({{.ID}}, this)" id="chat-link-{{.ID}}">
|
|
# {{.Title}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content show" id="panel-chat">
|
|
<div class="messages" id="message-pane">
|
|
<div style="text-align: center; margin-top: 40vh; color: #72767d;">
|
|
<p>Select a chat from the sidebar to start.</p>
|
|
</div>
|
|
</div>
|
|
<div class="input-area">
|
|
<input type="text" id="user-input" placeholder="Message #general..." onkeypress="handleEnter(event)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content" id="panel-appt">
|
|
<div class="panel-container">
|
|
<h1>Appointments Manager</h1>
|
|
|
|
<div style="background: var(--bg-sidebar); padding: 20px; border-radius: 8px; margin: 20px 0;">
|
|
<h3 style="margin-top: 0;">Add Manual Appointment</h3>
|
|
<div style="display: flex; gap: 10px;">
|
|
<input type="text" id="m-phone" placeholder="+56 9 1234 5678" style="flex: 1;">
|
|
<input type="datetime-local" id="m-date" style="flex: 1;">
|
|
<button class="btn-success" onclick="createMockAppt()">Add</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Phone</th>
|
|
<th>Date (YYYY-MM-DD HH:MM)</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Appointments}}
|
|
<tr id="appt-{{.ID}}">
|
|
<td>#{{.ID}}</td>
|
|
<td><input type="text" value="{{.CustomerPhone}}" id="edit-phone-{{.ID}}"></td>
|
|
<td><input type="text" value="{{.Date}}" id="edit-date-{{.ID}}"></td>
|
|
<td><span class="status-pill">{{.Status}}</span></td>
|
|
<td>
|
|
<button class="btn-success" onclick="updateAppt({{.ID}})">💾</button>
|
|
<button class="btn-danger" onclick="deleteAppt({{.ID}})">🗑️</button>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentChatId = null;
|
|
|
|
// --- NAVIGATION ---
|
|
function switchPanel(panel) {
|
|
// Toggle Content
|
|
document.getElementById('panel-chat').classList.toggle('show', panel === 'chat');
|
|
document.getElementById('panel-appt').classList.toggle('show', panel === 'appt');
|
|
|
|
// Toggle Sidebar Active State
|
|
document.getElementById('nav-chat').classList.toggle('active', panel === 'chat');
|
|
document.getElementById('nav-appt').classList.toggle('active', panel === 'appt');
|
|
}
|
|
|
|
// --- CHAT LOGIC (RESTORED) ---
|
|
|
|
async function createNewChat() {
|
|
try {
|
|
const res = await fetch('/admin/chat', { method: 'POST' });
|
|
const data = await res.json();
|
|
if (data.id) {
|
|
location.reload(); // Simple reload to show new chat
|
|
}
|
|
} catch (e) {
|
|
alert("Error creating chat: " + e);
|
|
}
|
|
}
|
|
|
|
async function loadChat(id, el) {
|
|
currentChatId = id;
|
|
|
|
// UI Cleanup
|
|
document.querySelectorAll('.chat-item').forEach(i => i.classList.remove('active'));
|
|
if(el) el.classList.add('active');
|
|
|
|
const pane = document.getElementById('message-pane');
|
|
pane.innerHTML = '<p style="text-align:center; color:#72767d;">Loading messages...</p>';
|
|
|
|
// Fetch Messages
|
|
const res = await fetch(`/admin/chat/${id}/messages`);
|
|
const messages = await res.json();
|
|
|
|
pane.innerHTML = ''; // Clear loading
|
|
|
|
if (!messages || messages.length === 0) {
|
|
pane.innerHTML = '<p style="text-align:center; color:#72767d;">No messages yet. Say hi!</p>';
|
|
} else {
|
|
messages.forEach(msg => appendMessage(msg.role, msg.content));
|
|
}
|
|
scrollToBottom();
|
|
}
|
|
|
|
async function sendMessage() {
|
|
if (!currentChatId) return alert("Select a chat first!");
|
|
|
|
const input = document.getElementById('user-input');
|
|
const content = input.value.trim();
|
|
if (!content) return;
|
|
|
|
// 1. Show User Message
|
|
appendMessage('user', content);
|
|
input.value = '';
|
|
scrollToBottom();
|
|
|
|
// 2. Create a placeholder for the AI response
|
|
// We create the DOM element empty, then fill it as data arrives
|
|
const aiMsgDiv = document.createElement('div');
|
|
aiMsgDiv.className = 'msg assistant';
|
|
document.getElementById('message-pane').appendChild(aiMsgDiv);
|
|
scrollToBottom();
|
|
|
|
try {
|
|
const response = await fetch(`/admin/chat/${currentChatId}/message`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content })
|
|
});
|
|
|
|
// 3. Set up the stream reader
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
// Decode the chunk (Uint8Array) to string
|
|
const textChunk = decoder.decode(value, { stream: true });
|
|
|
|
// Append to the current message div
|
|
aiMsgDiv.innerText += textChunk;
|
|
scrollToBottom();
|
|
}
|
|
|
|
} catch (e) {
|
|
aiMsgDiv.innerText += "\n[Error: Connection lost]";
|
|
}
|
|
}
|
|
|
|
function appendMessage(role, text) {
|
|
const pane = document.getElementById('message-pane');
|
|
const div = document.createElement('div');
|
|
div.className = `msg ${role}`;
|
|
div.innerText = text;
|
|
pane.appendChild(div);
|
|
}
|
|
|
|
function scrollToBottom() {
|
|
const pane = document.getElementById('message-pane');
|
|
pane.scrollTop = pane.scrollHeight;
|
|
}
|
|
|
|
function handleEnter(e) {
|
|
if (e.key === 'Enter') sendMessage();
|
|
}
|
|
|
|
// --- APPOINTMENT LOGIC (KEPT) ---
|
|
|
|
async function createMockAppt() {
|
|
const phone = document.getElementById('m-phone').value;
|
|
const date = document.getElementById('m-date').value;
|
|
if(!phone || !date) return alert("Fill in fields, seki.");
|
|
|
|
await fetch('/admin/appointment', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({phone, date})
|
|
});
|
|
location.reload();
|
|
}
|
|
|
|
async function updateAppt(id) {
|
|
const phone = document.getElementById(`edit-phone-${id}`).value;
|
|
const date = document.getElementById(`edit-date-${id}`).value;
|
|
|
|
const res = await fetch(`/admin/appointment/${id}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({phone, date})
|
|
});
|
|
|
|
if(res.ok) alert("Updated successfully.");
|
|
else alert("Update failed.");
|
|
}
|
|
|
|
async function deleteAppt(id) {
|
|
if(!confirm("Are you sure you want to delete this appointment?")) return;
|
|
|
|
const res = await fetch(`/admin/appointment/${id}`, { method: 'DELETE' });
|
|
if(res.ok) {
|
|
document.getElementById(`appt-${id}`).remove();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{ end }} |