79 lines
5.0 KiB
HTML
79 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog RAG Chat</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Blog RAG</h2>
|
|
<div class="sidebar-actions">
|
|
<button class="btn-icon" id="btn-theme" title="Chế độ sáng/tối">
|
|
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</button>
|
|
<button class="btn-icon" id="btn-new-session" title="Phiên mới">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="session-list" id="session-list"></div>
|
|
<div class="sidebar-footer">
|
|
<div class="stats" id="stats"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main chat area -->
|
|
<main class="main">
|
|
<div class="chat-header" id="chat-header">
|
|
<button class="btn-icon btn-menu" id="btn-menu">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
</button>
|
|
<span class="chat-title" id="chat-title">Chọn hoặc tạo phiên mới</span>
|
|
<div class="chat-actions">
|
|
<button class="btn-icon" id="btn-clear" title="Xóa lịch sử phiên" style="display:none">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|
</button>
|
|
<button class="btn-icon btn-danger" id="btn-delete" title="Xóa phiên" style="display:none">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="messages" id="messages">
|
|
<div class="empty-state" id="empty-state">
|
|
<div class="empty-icon">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
</div>
|
|
<h3>Blog RAG Chat</h3>
|
|
<p>Hỏi bất cứ điều gì về nội dung blog</p>
|
|
<p class="hint">Nhấn <strong>+</strong> để tạo phiên mới</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-area" id="input-area" style="display:none">
|
|
<div class="input-wrapper">
|
|
<textarea id="input-message" placeholder="Nhập câu hỏi..." rows="1"></textarea>
|
|
<button class="btn-send" id="btn-send" title="Gửi">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="input-hint">Enter để gửi, Shift+Enter xuống dòng</div>
|
|
</div>
|
|
|
|
<footer class="app-footer">
|
|
Copyright © 2026 - Blog RAG Solution - <a href="https://ttaisolutions.com" target="_blank">TTAI Solutions Software</a>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|