feat: AI对话系统 v1.0.0 - 网页端和Matrix端实时同步
This commit is contained in:
590
templates/index.html
Normal file
590
templates/index.html
Normal file
@@ -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