feat: AI对话系统 v1.0.0 - 网页端和Matrix端实时同步
This commit is contained in:
@@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI对话系统 - 后台管理</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #202123;
|
||||
color: #fff;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-links a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 24px auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 12px 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: #10a37f;
|
||||
color: #fff;
|
||||
border-color: #10a37f;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.config-form {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.config-form input, .config-form textarea {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.config-form input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.config-form textarea {
|
||||
width: 300px;
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.config-form button {
|
||||
padding: 12px 24px;
|
||||
background: #10a37f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.config-form button:hover {
|
||||
background: #0d8c6d;
|
||||
}
|
||||
|
||||
.config-list {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.config-item .key {
|
||||
font-weight: 600;
|
||||
width: 200px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.config-item .value {
|
||||
flex: 1;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.config-item .desc {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge.web {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.badge.matrix {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.badge.active {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.badge.inactive {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.message-preview {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>🤖 AI对话系统 - 后台管理</h1>
|
||||
<div class="header-links">
|
||||
<a href="/">← 返回聊天</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="stats-grid" id="statsGrid">
|
||||
<div class="stat-card">
|
||||
<h3>总用户数</h3>
|
||||
<div class="value" id="totalUsers">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>总对话数</h3>
|
||||
<div class="value" id="totalConversations">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>总消息数</h3>
|
||||
<div class="value" id="totalMessages">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('users')">用户管理</button>
|
||||
<button class="tab-btn" onclick="switchTab('conversations')">对话记录</button>
|
||||
<button class="tab-btn" onclick="switchTab('config')">系统配置</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- 用户管理 -->
|
||||
<div class="tab-panel active" id="usersPanel">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户ID</th>
|
||||
<th>显示名称</th>
|
||||
<th>类型</th>
|
||||
<th>创建时间</th>
|
||||
<th>最后活跃</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersTableBody">
|
||||
<tr><td colspan="6">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 对话记录 -->
|
||||
<div class="tab-panel" id="conversationsPanel">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>会话ID</th>
|
||||
<th>用户</th>
|
||||
<th>标题</th>
|
||||
<th>消息数</th>
|
||||
<th>创建时间</th>
|
||||
<th>最后更新</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="conversationsTableBody">
|
||||
<tr><td colspan="7">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 系统配置 -->
|
||||
<div class="tab-panel" id="configPanel">
|
||||
<div class="config-form">
|
||||
<input type="text" id="configKey" placeholder="配置键名">
|
||||
<textarea id="configValue" placeholder="配置值"></textarea>
|
||||
<input type="text" id="configDesc" placeholder="描述（可选）">
|
||||
<button onclick="saveConfig()">保存</button>
|
||||
</div>
|
||||
|
||||
<div class="config-list" id="configList">
|
||||
<!-- 配置列表 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadStats();
|
||||
loadUsers();
|
||||
loadConversations();
|
||||
loadConfig();
|
||||
});
|
||||
|
||||
// 切换标签页
|
||||
function switchTab(tabName) {
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
|
||||
|
||||
document.querySelector(`.tab-btn[onclick="switchTab('${tabName}')"]`).classList.add('active');
|
||||
document.getElementById(`${tabName}Panel`).classList.add('active');
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/stats');
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('totalUsers').textContent = data.total_users;
|
||||
document.getElementById('totalConversations').textContent = data.total_conversations;
|
||||
document.getElementById('totalMessages').textContent = data.total_messages;
|
||||
} catch (error) {
|
||||
console.error('加载统计失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户列表
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/users');
|
||||
const data = await response.json();
|
||||
|
||||
const tbody = document.getElementById('usersTableBody');
|
||||
|
||||
if (data.users.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6">暂无用户</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = data.users.map(user => `
|
||||
<tr>
|
||||
<td>${user.user_id}</td>
|
||||
<td>${user.display_name || '-'}</td>
|
||||
<td><span class="badge ${user.user_type}">${user.user_type}</span></td>
|
||||
<td>${formatDate(user.created_at)}</td>
|
||||
<td>${formatDate(user.last_active_at)}</td>
|
||||
<td><span class="badge ${user.is_active ? 'active' : 'inactive'}">${user.is_active ? '活跃' : '禁用'}</span></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('加载用户失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载对话列表
|
||||
async function loadConversations() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/conversations');
|
||||
const data = await response.json();
|
||||
|
||||
const tbody = document.getElementById('conversationsTableBody');
|
||||
|
||||
if (data.conversations.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7">暂无对话</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = data.conversations.map(conv => `
|
||||
<tr>
|
||||
<td>${conv.conversation_id}</td>
|
||||
<td>${conv.user_id || '-'}</td>
|
||||
<td class="message-preview">${conv.title || '新对话'}</td>
|
||||
<td>${conv.message_count}</td>
|
||||
<td>${formatDate(conv.created_at)}</td>
|
||||
<td>${formatDate(conv.updated_at)}</td>
|
||||
<td><span class="badge ${conv.is_active ? 'active' : 'inactive'}">${conv.is_active ? '活跃' : '已删除'}</span></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('加载对话失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载配置
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/config');
|
||||
const data = await response.json();
|
||||
|
||||
const container = document.getElementById('configList');
|
||||
|
||||
if (data.configs.length === 0) {
|
||||
container.innerHTML = '<p>暂无配置</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.configs.map(config => `
|
||||
<div class="config-item">
|
||||
<div class="key">${config.key}</div>
|
||||
<div class="value">${config.value}</div>
|
||||
<div class="desc">${config.description || ''}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('加载配置失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
async function saveConfig() {
|
||||
const key = document.getElementById('configKey').value.trim();
|
||||
const value = document.getElementById('configValue').value.trim();
|
||||
const desc = document.getElementById('configDesc').value.trim();
|
||||
|
||||
if (!key || !value) {
|
||||
alert('请填写配置键名和值');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({key, value, description: desc})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert('配置已保存');
|
||||
document.getElementById('configKey').value = '';
|
||||
document.getElementById('configValue').value = '';
|
||||
document.getElementById('configDesc').value = '';
|
||||
loadConfig();
|
||||
} else {
|
||||
alert('保存失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存配置失败:', error);
|
||||
alert('保存失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// 定时刷新
|
||||
setInterval(() => {
|
||||
loadStats();
|
||||
if (document.getElementById('usersPanel').classList.contains('active')) {
|
||||
loadUsers();
|
||||
}
|
||||
if (document.getElementById('conversationsPanel').classList.contains('active')) {
|
||||
loadConversations();
|
||||
}
|
||||
}, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,590 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 对话系统</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: #202123;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #4d4d4f;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid #4d4d4f;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.new-chat-btn:hover {
|
||||
background: #2a2b32;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
color: #ececf1;
|
||||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background: #2a2b32;
|
||||
}
|
||||
|
||||
.conversation-item.active {
|
||||
background: #343541;
|
||||
}
|
||||
|
||||
.conversation-item .title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conversation-item .delete-btn {
|
||||
opacity: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.conversation-item:hover .delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-header h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-id-display {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f0f0f0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.message.user .message-avatar {
|
||||
background: #5436da;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message.assistant .message-avatar {
|
||||
background: #19c37d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.message-content pre {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.message-content code {
|
||||
background: #f0f0f0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.message-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
padding: 24px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.input-wrapper textarea {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.input-wrapper textarea:focus {
|
||||
border-color: #10a37f;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: #10a37f;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background: #0d8c6d;
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.welcome h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.welcome p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
animation: dots 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0%, 20% { content: '.'; }
|
||||
40% { content: '..'; }
|
||||
60%, 100% { content: '...'; }
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a1a1a1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<button class="new-chat-btn" onclick="createNewConversation()">
|
||||
<i class="ri-add-line"></i>
|
||||
新对话
|
||||
</button>
|
||||
</div>
|
||||
<div class="conversation-list" id="conversationList">
|
||||
<div class="empty-state">暂无对话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="chat-header">
|
||||
<h1>AI 对话</h1>
|
||||
<div class="user-id-display" id="userIdDisplay">用户: 加载中...</div>
|
||||
</div>
|
||||
|
||||
<div class="messages-container" id="messagesContainer">
|
||||
<div class="welcome">
|
||||
<h2>👋 欢迎使用 AI 对话系统</h2>
|
||||
<p>开始一段新对话吧</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
id="messageInput"
|
||||
placeholder="输入消息... (Shift+Enter换行, Enter发送)"
|
||||
rows="1"
|
||||
></textarea>
|
||||
<button class="send-btn" id="sendBtn" onclick="sendMessage()">
|
||||
<i class="ri-send-plane-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全局变量
|
||||
let ws = null;
|
||||
let userId = 'web_' + Math.random().toString(36).substr(2, 9);
|
||||
let currentConversationId = null;
|
||||
let conversations = [];
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('userIdDisplay').textContent = `用户: ${userId}`;
|
||||
connectWebSocket();
|
||||
loadConversations();
|
||||
setupTextarea();
|
||||
});
|
||||
|
||||
// WebSocket连接
|
||||
function connectWebSocket() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
ws = new WebSocket(`${protocol}//${window.location.host}/ws/${userId}`);
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log('WebSocket已连接');
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
handleWebSocketMessage(data);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log('WebSocket已断开，3秒后重连...');
|
||||
setTimeout(connectWebSocket, 3000);
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error('WebSocket错误:', error);
|
||||
};
|
||||
}
|
||||
|
||||
// 处理WebSocket消息
|
||||
function handleWebSocketMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'history':
|
||||
displayHistory(data.messages);
|
||||
break;
|
||||
|
||||
case 'conversation_created':
|
||||
currentConversationId = data.conversation_id;
|
||||
loadConversations();
|
||||
break;
|
||||
|
||||
case 'user_message':
|
||||
appendMessage('user', data.message.content, data.message.source);
|
||||
break;
|
||||
|
||||
case 'assistant_message':
|
||||
appendMessage('assistant', data.message.content, data.message.source);
|
||||
document.getElementById('sendBtn').disabled = false;
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
alert(data.message);
|
||||
document.getElementById('sendBtn').disabled = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示历史消息
|
||||
function displayHistory(messages) {
|
||||
const container = document.getElementById('messagesContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
messages.forEach(msg => {
|
||||
appendMessage(msg.role, msg.content, msg.source);
|
||||
});
|
||||
}
|
||||
|
||||
// 添加消息到界面
|
||||
function appendMessage(role, content, source = 'web') {
|
||||
const container = document.getElementById('messagesContainer');
|
||||
|
||||
// 移除欢迎界面
|
||||
const welcome = container.querySelector('.welcome');
|
||||
if (welcome) welcome.remove();
|
||||
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `message ${role}`;
|
||||
|
||||
const avatar = role === 'user' ? '👤' : '🤖';
|
||||
const sourceLabel = source === 'matrix' ? ' [Matrix]' : '';
|
||||
|
||||
messageDiv.innerHTML = `
|
||||
<div class="message-avatar">${avatar}</div>
|
||||
<div class="message-content">${formatContent(content)}${sourceLabel}</div>
|
||||
`;
|
||||
|
||||
container.appendChild(messageDiv);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
// 格式化消息内容（简单的Markdown支持）
|
||||
function formatContent(content) {
|
||||
return content
|
||||
.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
|
||||
.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||||
.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// 加载会话列表
|
||||
async function loadConversations() {
|
||||
try {
|
||||
const response = await fetch('/api/conversations?user_id=' + userId);
|
||||
const data = await response.json();
|
||||
conversations = data.conversations;
|
||||
renderConversations();
|
||||
} catch (error) {
|
||||
console.error('加载会话失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染会话列表
|
||||
function renderConversations() {
|
||||
const container = document.getElementById('conversationList');
|
||||
|
||||
if (conversations.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state">暂无对话</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = conversations.map(conv => `
|
||||
<div class="conversation-item ${conv.id === currentConversationId ? 'active' : ''}"
|
||||
onclick="selectConversation('${conv.id}')">
|
||||
<span class="title">${conv.title}</span>
|
||||
<button class="delete-btn" onclick="deleteConversation('${conv.id}', event)">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 选择会话
|
||||
function selectConversation(conversationId) {
|
||||
currentConversationId = conversationId;
|
||||
renderConversations();
|
||||
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({
|
||||
action: 'select_conversation',
|
||||
conversation_id: conversationId
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新会话
|
||||
async function createNewConversation() {
|
||||
try {
|
||||
const response = await fetch('/api/conversations?user_id=' + userId, {
|
||||
method: 'POST'
|
||||
});
|
||||
const data = await response.json();
|
||||
currentConversationId = data.id;
|
||||
|
||||
// 清空消息区域
|
||||
const container = document.getElementById('messagesContainer');
|
||||
container.innerHTML = `
|
||||
<div class="welcome">
|
||||
<h2>👋 开始新对话</h2>
|
||||
<p>输入您的问题开始对话</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
loadConversations();
|
||||
} catch (error) {
|
||||
console.error('创建会话失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除会话
|
||||
async function deleteConversation(conversationId, event) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (!confirm('确定删除这个对话？')) return;
|
||||
|
||||
try {
|
||||
await fetch(`/api/conversations/${conversationId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (conversationId === currentConversationId) {
|
||||
currentConversationId = null;
|
||||
const container = document.getElementById('messagesContainer');
|
||||
container.innerHTML = `
|
||||
<div class="welcome">
|
||||
<h2>👋 欢迎使用 AI 对话系统</h2>
|
||||
<p>开始一段新对话吧</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
loadConversations();
|
||||
} catch (error) {
|
||||
console.error('删除会话失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
function sendMessage() {
|
||||
const input = document.getElementById('messageInput');
|
||||
const message = input.value.trim();
|
||||
|
||||
if (!message) return;
|
||||
|
||||
// 禁用发送按钮
|
||||
document.getElementById('sendBtn').disabled = true;
|
||||
|
||||
// 清空输入框
|
||||
input.value = '';
|
||||
input.style.height = 'auto';
|
||||
|
||||
// 发送WebSocket消息
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({
|
||||
action: 'chat',
|
||||
message: message,
|
||||
conversation_id: currentConversationId
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// 设置文本框
|
||||
function setupTextarea() {
|
||||
const textarea = document.getElementById('messageInput');
|
||||
|
||||
textarea.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
textarea.addEventListener('input', () => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user