120 lines
5.3 KiB
HTML
120 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Knowledge Hub | Enterprise RAG</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- Login Screen -->
|
|
<div class="login-screen" id="login-screen">
|
|
<div class="login-card">
|
|
<div class="login-logo">
|
|
<div class="logo-icon"><i class="fas fa-brain"></i></div>
|
|
<h1>VibeCode AI</h1>
|
|
<p>Enterprise Knowledge Hub</p>
|
|
</div>
|
|
<form id="login-form">
|
|
<div class="input-group">
|
|
<i class="fas fa-envelope"></i>
|
|
<input type="email" id="login-email" placeholder="Nhập email của bạn" required>
|
|
</div>
|
|
<button type="submit" class="login-btn">
|
|
<i class="fas fa-sign-in-alt"></i> Đăng nhập
|
|
</button>
|
|
</form>
|
|
<div class="login-divider"><span>hoặc</span></div>
|
|
<button class="sso-btn" id="sso-btn">
|
|
<i class="fab fa-microsoft"></i> Đăng nhập Microsoft SSO
|
|
</button>
|
|
<p class="login-hint">Dùng tài khoản Microsoft 365 của công ty.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App (hidden until login) -->
|
|
<div class="app-container" id="app-container" style="display: none;">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="logo-area">
|
|
<div class="logo-icon"><i class="fas fa-brain"></i></div>
|
|
<h1>VibeCode AI</h1>
|
|
</div>
|
|
|
|
<nav class="side-nav">
|
|
<div class="nav-item active"><i class="fas fa-comments"></i> <span>Hỏi đáp RAG</span></div>
|
|
<button class="sync-btn" id="sync-btn"><i class="fas fa-sync-alt"></i> Đồng bộ SharePoint</button>
|
|
</nav>
|
|
|
|
<div class="sync-status" id="sync-status" style="display: none;">
|
|
<div class="sync-spinner"><i class="fas fa-spinner fa-spin"></i></div>
|
|
<span class="sync-text">Đang đồng bộ...</span>
|
|
</div>
|
|
|
|
<div class="system-status">
|
|
<div class="status-dot online"></div>
|
|
<div class="status-text">OpenSearch: Online</div>
|
|
</div>
|
|
|
|
<div class="user-info" id="user-info">
|
|
<div class="user-avatar"><i class="fas fa-user"></i></div>
|
|
<div class="user-details">
|
|
<span class="user-name" id="user-name">-</span>
|
|
<span class="user-role" id="user-role">-</span>
|
|
</div>
|
|
<button id="logout-btn" title="Đăng xuất"><i class="fas fa-sign-out-alt"></i></button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Chat Area -->
|
|
<main class="chat-main">
|
|
<header class="chat-header">
|
|
<div class="header-info">
|
|
<h2>SharePoint Intelligence</h2>
|
|
<p>Hỏi đáp dựa trên cơ sở dữ liệu nội bộ của bạn</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="clear-chat" title="Xoá lịch sử"><i class="fas fa-trash-alt"></i></button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="messages-container" id="chat-window">
|
|
<!-- Chào mừng -->
|
|
<div class="message ai greeting">
|
|
<div class="avatar"><i class="fas fa-robot"></i></div>
|
|
<div class="content">
|
|
<p>Xin chào! Tôi là trợ lý tri thức của bạn. Tôi đã sẵn sàng trả lời các câu hỏi dựa trên tài liệu từ SharePoint. Bạn muốn tìm hiểu điều gì hôm nay?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<footer class="chat-footer">
|
|
<div class="input-wrapper">
|
|
<textarea id="user-input" placeholder="Nhập câu hỏi của bạn tại đây..." rows="1"></textarea>
|
|
<button id="send-btn"><i class="fas fa-paper-plane"></i></button>
|
|
</div>
|
|
<p class="disclaimer">AI có thể đưa ra câu trả lời chưa chính xác. Vui lòng kiểm tra lại nguồn trích dẫn.</p>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- Source Sidebar (Hidden by default) -->
|
|
<section class="source-panel" id="source-panel">
|
|
<div class="panel-header">
|
|
<h3><i class="fas fa-book-open"></i> Nguồn trích dẫn</h3>
|
|
<button id="close-panel"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="source-list" id="source-list">
|
|
<!-- Nguồn sẽ được render ở đây -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|