templates/index.html

<!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>
        // 全局变量 - 使用固定主用户（与Matrix AI用户相同）
        let ws = null;
        let userId = 'main_user';  // 固定主用户ID
        let currentConversationId = null;
        let conversations = [];
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('userIdDisplay').textContent = '主用户模式';
            connectWebSocket();
            loadConversations();
            setupTextarea();
            
            // 监听最新会话更新
            setInterval(checkLatestConversation, 2000);
        });
        
        // 检查最新会话（用于Matrix同步）
        async function checkLatestConversation() {
            try {
                const response = await fetch('/api/conversations/latest');
                if (response.ok) {
                    const data = await response.json();
                    if (data.conversation && data.conversation.id !== currentConversationId) {
                        // 有新会话，自动切换
                        selectConversation(data.conversation.id);
                    }
                }
            } catch (error) {
                // 忽略错误
            }
        }
        
        // 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 'new_conversation':
                    // Matrix创建了新会话，自动切换
                    currentConversationId = data.conversation_id;
                    loadConversations();
                    // 清空消息区域
                    const container = document.getElementById('messagesContainer');
                    container.innerHTML = `
                        <div class="welcome">
                            <h2>👋 开始新对话</h2>
                            <p>输入您的问题开始对话</p>
                        </div>
                    `;
                    break;
                    
                case 'user_message':
                    appendMessage('user', data.message.content, data.message.source);
                    // 如果消息来自Matrix，切换到对应会话
                    if (data.message.source === 'matrix' && data.conversation_id) {
                        currentConversationId = data.conversation_id;
                        renderConversations();
                    }
                    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' ? '👤' : '🤖';
            
            messageDiv.innerHTML = `
                <div class="message-avatar">${avatar}</div>
                <div class="message-content">${formatContent(content)}</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');
                const data = await response.json();
                conversations = data.conversations;
                renderConversations();
                
                // 如果没有当前会话且有会话列表，自动选择最新的
                if (!currentConversationId && conversations.length > 0) {
                    selectConversation(conversations[0].id);
                }
            } 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', {
                    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>