223-template-240
/
blank
відгалужено від 137-template-113/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP 助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .chat-container {
            height: calc(100vh - 200px);
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .chat-container {
                height: calc(100vh - 180px);
            }

            /* 头部固定 */
            header {
                position: sticky;
                top: 0;
                z-index: 50;
            }

            /* 消息气泡宽度 */
            .message-bubble {
                max-width: 85vw !important;
            }

            /* 输入区域固定 */
            .input-area {
                position: sticky;
                bottom: 0;
                z-index: 50;
                background: white;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }

        /* 参数/结果可折叠区域 */
        .collapsible-section {
            margin-top: 6px;
        }

        .collapsible-header {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            color: #9ca3af;
            user-select: none;
        }

        .collapsible-header:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .collapsible-content.expanded {
            max-height: 300px;
            overflow-y: auto;
        }

        .collapsible-icon {
            transition: transform 0.3s;
            font-size: 10px;
        }

        .collapsible-icon.expanded {
            transform: rotate(90deg);
        }

        /* MCP 服务器横向滚动 */
        .mcp-servers-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
        }

        .mcp-servers-scroll::-webkit-scrollbar {
            height: 4px;
        }

        .mcp-servers-scroll::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }

        .mcp-server-tag {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
        }

        .mcp-server-tag.enabled {
            background: #d1fae5;
            color: #065f46;
        }

        .mcp-server-tag.disabled {
            background: #f3f4f6;
            color: #6b7280;
        }

        .mcp-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .mcp-status-dot.online {
            background: #10b981;
        }

        .mcp-status-dot.offline {
            background: #9ca3af;
        }
        .message-user {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .message-assistant {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .typing-indicator span {
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* 工具调用面板样式 */
        .tool-call-panel {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 8px;
            margin: 12px 0;
            overflow: hidden;
            border: 1px solid #3a3a5a;
        }

        .tool-panel-header {
            background: rgba(255, 255, 255, 0.05);
            padding: 10px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.2s;
        }

        .tool-panel-header:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .tool-panel-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #e0e0e0;
            font-size: 13px;
            font-weight: 500;
        }

        .tool-panel-content {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        }

        .tool-panel-content.collapsed {
            max-height: 0;
        }

        .tool-panel-content.expanded {
            max-height: 800px;
            padding: 12px;
            overflow-y: auto;
        }

        .tool-panel-content::-webkit-scrollbar {
            width: 6px;
        }

        .tool-panel-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .tool-panel-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        /* 工具调用项样式 */
        .tool-call-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border-left: 3px solid #555;
            transition: all 0.2s;
        }

        .tool-call-item:last-child {
            margin-bottom: 0;
        }

        .tool-call-item.pending {
            border-left-color: #f59e0b;
            animation: pulse-border 1.5s infinite;
        }

        .tool-call-item.success {
            border-left-color: #10b981;
        }

        .tool-call-item.error {
            border-left-color: #ef4444;
        }

        @keyframes pulse-border {
            0%, 100% { border-left-color: #f59e0b; }
            50% { border-left-color: #fbbf24; }
        }

        .tool-call-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .tool-name {
            color: #e0e0e0;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tool-status {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        .tool-status.pending {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .tool-status.success {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }

        .tool-status.error {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .tool-params {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            padding: 8px;
            margin-top: 6px;
            font-size: 11px;
            color: #9ca3af;
            overflow-x: auto;
        }

        .tool-params::-webkit-scrollbar {
            height: 4px;
        }

        .tool-params::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .tool-result {
            background: rgba(16, 185, 129, 0.1);
            border-radius: 4px;
            padding: 8px;
            margin-top: 6px;
            font-size: 11px;
            color: #6ee7b7;
        }

        .tool-result.error {
            background: rgba(239, 68, 68, 0.1);
            color: #fca5a5;
        }

        .tool-result-content {
            max-height: 100px;
            overflow-y: auto;
            word-break: break-all;
        }

        .tool-result-content::-webkit-scrollbar {
            width: 4px;
        }

        .tool-result-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        .expand-icon {
            transition: transform 0.3s;
        }

        .expand-icon.expanded {
            transform: rotate(180deg);
        }

        /* 加载动画 */
        .spinner {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(251, 191, 36, 0.3);
            border-top-color: #fbbf24;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 状态指示器 */
        .process-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 6px;
            font-size: 12px;
            color: #fbbf24;
        }

        .process-indicator.success {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
        }

        .process-indicator .spinner {
            width: 12px;
            height: 12px;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        code {
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-6 max-w-4xl">
        <!-- Header -->
        <header class="bg-white rounded-lg shadow-md p-4 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg flex items-center justify-center">
                        <span class="text-white font-bold">AI</span>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">AI MCP Web UI</h1>
                        <p class="text-sm text-gray-500">通用 MCP 服务器 Web 界面</p>
                    </div>
                </div>
                <div id="status-indicator" class="flex items-center space-x-2">
                    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                    <span class="text-sm text-gray-600">已连接</span>
                </div>
            </div>
        </header>

        <!-- Chat Container -->
        <div class="bg-white rounded-lg shadow-md">
            <!-- Messages -->
            <div id="chat-messages" class="chat-container overflow-y-auto p-4 space-y-4">
                <!-- Welcome Message -->
                <div class="flex justify-start">
                    <div class="message-assistant message-bubble rounded-lg p-4 max-w-[80%] shadow-sm">
                        <p class="text-gray-800">你好！我是 AI MCP Web UI 助手。我可以帮助你：</p>
                        <ul class="mt-2 text-gray-700 list-disc list-inside">
                            <li>与 Claude AI 进行对话</li>
                            <li>调用 MCP 服务器工具</li>
                            <li>自动化各种任务</li>
                        </ul>
                        <p class="mt-2 text-gray-600 text-sm">请问有什么可以帮助你的？</p>
                    </div>
                </div>
            </div>

            <!-- Input Area -->
            <div class="border-t border-gray-200 p-4 input-area">
                <form id="chat-form" class="flex space-x-3">
                    <input
                        type="text"
                        id="user-input"
                        placeholder="输入你的消息..."
                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                        style="font-size: 16px;"
                        autocomplete="off"
                    >
                    <button
                        type="submit"
                        id="send-button"
                        class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                        style="font-size: 16px;"
                    >
                        发送
                    </button>
                </form>
            </div>
        </div>

        <!-- MCP Servers Status -->
        <div class="mt-4 bg-white rounded-lg shadow-md p-4">
            <h2 class="text-sm font-semibold text-gray-800 mb-2">MCP 服务器</h2>
            <div id="mcp-servers" class="mcp-servers-scroll">
                <!-- MCP server tags will be inserted here -->
            </div>
        </div>
    </div>

    <!-- 登录对话框 -->
    <div id="login-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-bold text-gray-800" id="login-title">登录 Novel Platform</h3>
                <button id="login-close-x" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>
            <p id="login-description" class="text-sm text-gray-600 mb-4">请输入您的账号密码以访问需要认证的 MCP 工具</p>
            <form id="login-form">
                <div class="mb-3">
                    <label for="login-username" class="block text-sm font-medium text-gray-700 mb-1">用户名/邮箱</label>
                    <input type="text" id="login-username" placeholder="请输入用户名或邮箱" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <input type="password" id="login-password" placeholder="请输入密码" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                <p id="login-error" class="text-red-500 text-sm mb-3 hidden"></p>
                <div class="flex justify-end gap-2">
                    <button type="button" id="login-cancel" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" id="login-submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">登录</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // State
        let conversationHistory = [];
        let isTyping = false;

        // DOM Elements
        const chatMessages = document.getElementById('chat-messages');
        const chatForm = document.getElementById('chat-form');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        const mcpServers = document.getElementById('mcp-servers');
        const statusIndicator = document.getElementById('status-indicator');

        // API Base URL
        const API_BASE = window.location.origin;

        // ========== MCP 服务器配置 ==========
        const MCP_SERVERS = {
            "novel-translator": {
                "name": "Novel Translator MCP",
                "auth_type": "none"
            },
            "novel-platform-user": {
                "name": "Novel Platform User MCP",
                "url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun/mcp/",
                "auth_type": "jwt",
                "login_api": "/api/v1/auth/login",
                "base_url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun"
            },
            "novel-platform-admin": {
                "name": "Novel Platform Admin MCP",
                "url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun/mcp/",
                "auth_type": "jwt",
                "login_api": "/api/v1/auth/admin-login",
                "base_url": "https://d8d-ai-vscode-8080-223-238-template-6-group.dev.d8d.fun"
            }
        };

        // ========== Token 管理器 ==========
        const TokenManager = {
            // 保存 token
            saveToken(mcpType, token, username = null) {
                localStorage.setItem(`mcp_token_${mcpType}`, token);
                localStorage.setItem(`mcp_token_${mcpType}_time`, Date.now());
                if (username) {
                    localStorage.setItem(`mcp_username_${mcpType}`, username);
                }
            },

            // 获取 token
            getToken(mcpType) {
                return localStorage.getItem(`mcp_token_${mcpType}`);
            },

            // 获取用户名
            getUsername(mcpType) {
                return localStorage.getItem(`mcp_username_${mcpType}`);
            },

            // 清除 token
            clearToken(mcpType) {
                localStorage.removeItem(`mcp_token_${mcpType}`);
                localStorage.removeItem(`mcp_token_${mcpType}_time`);
                localStorage.removeItem(`mcp_username_${mcpType}`);
            },

            // 检查是否已登录
            isLoggedIn(mcpType) {
                return !!this.getToken(mcpType);
            },

            // 获取 token 存储时长（毫秒）
            getTokenAge(mcpType) {
                const time = localStorage.getItem(`mcp_token_${mcpType}_time`);
                return time ? (Date.now() - parseInt(time)) : null;
            }
        };

        // ========== 登录相关 ==========
        let currentLoginMcpType = null;
        const loginModal = document.getElementById('login-modal');
        const loginForm = document.getElementById('login-form');
        const loginUsername = document.getElementById('login-username');
        const loginPassword = document.getElementById('login-password');
        const loginError = document.getElementById('login-error');
        const loginTitle = document.getElementById('login-title');
        const loginSubmit = document.getElementById('login-submit');

        // 显示登录对话框
        function showLoginModal(mcpType) {
            currentLoginMcpType = mcpType;
            const config = MCP_SERVERS[mcpType];
            if (!config) return;

            loginTitle.textContent = `登录 ${config.name}`;
            loginUsername.value = '';
            loginPassword.value = '';
            loginError.classList.add('hidden');
            loginSubmit.disabled = false;
            loginModal.classList.remove('hidden');
            loginUsername.focus();
        }

        // 隐藏登录对话框
        function hideLoginModal() {
            loginModal.classList.add('hidden');
            currentLoginMcpType = null;
        }

        // 执行登录 - 使用本地后端代理避免 CORS 问题
        async function performLogin(mcpType, username, password) {
            const config = MCP_SERVERS[mcpType];
            if (!config || config.auth_type !== 'jwt') {
                return { success: false, error: '该 MCP 不需要登录' };
            }

            // 使用本地后端代理端点，避免直接调用外部 API 导致 CORS 错误
            const is_admin = mcpType === 'novel-platform-admin';
            const proxyUrl = is_admin ? '/api/auth/admin-login' : '/api/auth/login';

            try {
                const response = await fetch(proxyUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        email: username,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    const token = data.token;
                    TokenManager.saveToken(mcpType, token, data.username || username);
                    return { success: true, token, username: data.username || username };
                } else {
                    return { success: false, error: data.detail || data.error || '登录失败' };
                }
            } catch (e) {
                return { success: false, error: e.message };
            }
        }

        // 登录表单提交处理
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            if (!currentLoginMcpType) return;

            const username = loginUsername.value.trim();
            const password = loginPassword.value;

            if (!username || !password) {
                loginError.textContent = '请输入用户名和密码';
                loginError.classList.remove('hidden');
                return;
            }

            loginSubmit.disabled = true;
            loginError.classList.add('hidden');

            const result = await performLogin(currentLoginMcpType, username, password);

            if (result.success) {
                hideLoginModal();
                loadMCPServers(); // 刷新 MCP 服务器列表
            } else {
                loginError.textContent = result.error;
                loginError.classList.remove('hidden');
                loginSubmit.disabled = false;
            }
        });

        // 登录对话框事件绑定
        document.getElementById('login-cancel').addEventListener('click', hideLoginModal);
        document.getElementById('login-close-x').addEventListener('click', hideLoginModal);

        // 点击背景关闭
        loginModal.addEventListener('click', (e) => {
            if (e.target === loginModal) {
                hideLoginModal();
            }
        });

        // ========== Token 传递到后端 ==========
        // 为每个请求添加 Authorization header
        async function fetchWithAuth(url, options = {}) {
            // 检查 URL 路径，确定是哪个 MCP
            let mcpType = null;
            if (url.includes('/chat') || url.includes('/mcp')) {
                // 对于需要认证的 MCP，检查本地存储的 token
                for (const [type, config] of Object.entries(MCP_SERVERS)) {
                    if (config.auth_type === 'jwt' && TokenManager.isLoggedIn(type)) {
                        mcpType = type;
                        break;
                    }
                }
            }

            // 添加 token 到请求头
            if (mcpType) {
                const token = TokenManager.getToken(mcpType);
                if (token) {
                    options.headers = options.headers || {};
                    options.headers['X-MCP-Token'] = token;
                    options.headers['X-MCP-Type'] = mcpType;
                }
            }

            return fetch(url, options);
        }

        // ========== Format message content (handle code blocks, etc.) ==========
        function formatMessage(content) {
            // Simple markdown-like formatting
            let formatted = content
                .replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
                .replace(/`([^`]+)`/g, '<code class="bg-gray-200 px-1 rounded">$1</code>')
                .replace(/\n/g, '<br>');
            return formatted;
        }

        // Add message to chat
        function addMessage(role, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;

            const bubbleClass = role === 'user' ? 'message-user text-white' : 'message-assistant text-gray-800';
            messageDiv.innerHTML = `
                <div class="${bubbleClass} message-bubble rounded-lg p-4 max-w-[80%] shadow-sm">
                    <div>${formatMessage(content)}</div>
                </div>
            `;

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Add typing indicator
        function addTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.id = 'typing-indicator';
            typingDiv.className = 'flex justify-start';
            typingDiv.innerHTML = `
                <div class="message-assistant rounded-lg p-4 shadow-sm">
                    <div class="typing-indicator flex space-x-1">
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
                    </div>
                </div>
            `;
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Remove typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) indicator.remove();
        }

        // 创建工具调用面板
        function createToolCallPanel() {
            const panel = document.createElement('div');
            panel.className = 'tool-call-panel';
            panel.innerHTML = `
                <div class="tool-panel-header" onclick="toggleToolPanel(this)">
                    <div class="tool-panel-title">
                        <span class="expand-icon">▶</span>
                        <span>🔧 工具调用</span>
                        <span class="tool-count">(0)</span>
                    </div>
                    <div class="process-indicator">
                        <div class="spinner"></div>
                        <span>处理中...</span>
                    </div>
                </div>
                <div class="tool-panel-content">
                    <div class="tool-calls-container"></div>
                </div>
            `;
            return panel;
        }

        // 切换工具面板展开/收起
        function toggleToolPanel(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.expand-icon');
            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        }

        // 切换参数/结果折叠区域
        function toggleCollapsible(header) {
            const content = header.nextElementSibling;
            const icon = header.querySelector('.collapsible-icon');
            content.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        }

        // 添加工具调用项
        function addToolCallItem(container, toolName, params, toolUseId = null) {
            const item = document.createElement('div');
            item.className = 'tool-call-item pending';
            const uniqueId = `tool-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            item.id = uniqueId;

            // 存储 tool_use_id 和 tool_name 以便后续匹配
            if (toolUseId) {
                item.dataset.toolUseId = toolUseId;
            }
            item.dataset.toolName = toolName;

            console.log('[addToolCallItem] Created item:', { id: uniqueId, toolName, toolUseId });

            // 简化工具名称显示 - 去掉 mcp__ 前缀和下划线
            let displayName = toolName;
            if (toolName.startsWith('mcp__')) {
                displayName = toolName.replace('mcp__', '').replace(/_/g, ' ');
            }
            // 首字母大写
            displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1);

            const paramsStr = params ? JSON.stringify(params, null, 2) : '{}';
            const hasParams = params && Object.keys(params).length > 0;

            item.innerHTML = `
                <div class="tool-call-header">
                    <div class="tool-name">
                        <span>🔧</span>
                        <span>${escapeHtml(displayName)}</span>
                    </div>
                    <div class="tool-status pending">
                        <div class="spinner"></div>
                        <span>执行中</span>
                    </div>
                </div>
                ${hasParams ? `
                <div class="collapsible-section">
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看参数</span>
                    </div>
                    <div class="collapsible-content">
                        <div class="tool-params"><pre style="margin:0;padding:0;background:transparent;font-size:10px;">${escapeHtml(paramsStr)}</pre></div>
                    </div>
                </div>
                ` : ''}
            `;

            container.appendChild(item);
            return { id: uniqueId, toolUseId: toolUseId, toolName: toolName };
        }

        // 更新工具调用状态
        function updateToolCallStatus(itemId, status, result = null) {
            const item = document.getElementById(itemId);
            if (!item) {
                console.warn('[updateToolCallStatus] Item not found:', itemId);
                return;
            }

            const statusEl = item.querySelector('.tool-status');
            item.classList.remove('pending', 'success', 'error');

            if (status === 'success') {
                item.classList.add('success');
                statusEl.className = 'tool-status success';
                statusEl.innerHTML = '✅ 完成';

                // 总是显示结果区域（即使结果为空）
                const resultText = result ? (typeof result === 'string' ? result : JSON.stringify(result, null, 2)) : '';
                const displayResult = resultText || '(无返回结果)';
                const truncatedResult = displayResult.substring(0, 1000) + (displayResult.length > 1000 ? '...' : '');

                const resultDiv = document.createElement('div');
                resultDiv.className = 'collapsible-section';
                resultDiv.innerHTML = `
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看结果</span>
                    </div>
                    <div class="collapsible-content">
                        <div class="tool-result"><div class="tool-result-content">${escapeHtml(truncatedResult)}</div></div>
                    </div>
                `;
                item.appendChild(resultDiv);
            } else if (status === 'error') {
                item.classList.add('error');
                statusEl.className = 'tool-status error';
                statusEl.innerHTML = '❌ 失败';

                const errorDiv = document.createElement('div');
                errorDiv.className = 'collapsible-section';
                errorDiv.innerHTML = `
                    <div class="collapsible-header" onclick="toggleCollapsible(this)">
                        <span class="collapsible-icon">▶</span>
                        <span>查看错误</span>
                    </div>
                    <div class="collapsible-content expanded">
                        <div class="tool-result error">${escapeHtml(result || '未知错误')}</div>
                    </div>
                `;
                item.appendChild(errorDiv);
            }
        }

        // 更新工具面板状态
        function updateToolPanelStatus(panel, status, totalCalls = 0) {
            const indicator = panel.querySelector('.process-indicator');
            const countEl = panel.querySelector('.tool-count');
            const content = panel.querySelector('.tool-panel-content');
            const icon = panel.querySelector('.expand-icon');

            countEl.textContent = `(${totalCalls})`;

            if (status === 'running') {
                // 保持处理中状态，不改变
                indicator.className = 'process-indicator';
                indicator.innerHTML = `<div class="spinner"></div><span>处理中...</span>`;
            } else if (status === 'complete') {
                indicator.className = 'process-indicator success';
                indicator.innerHTML = `<span>✅ 完成 - ${totalCalls} 个工具调用</span>`;
                // 自动展开面板以便查看结果
                if (content && !content.classList.contains('expanded')) {
                    content.classList.add('expanded');
                    if (icon) icon.classList.add('expanded');
                }
            } else if (status === 'error') {
                indicator.className = 'process-indicator';
                indicator.style.background = 'rgba(239, 68, 68, 0.1)';
                indicator.style.color = '#f87171';
                indicator.innerHTML = `<span>❌ 部分失败</span>`;
            }
        }

        // HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // ========== 流式聊天功能 ==========

        async function chatStream(message, onEvent) {
            const events = [];

            try {
                // 收集所有已登录 MCP 的 tokens
                const mcpTokens = {};
                for (const [type, config] of Object.entries(MCP_SERVERS)) {
                    if (config.auth_type === 'jwt' && TokenManager.isLoggedIn(type)) {
                        mcpTokens[type] = TokenManager.getToken(type);
                    }
                }

                const headers = { 'Content-Type': 'application/json' };
                // 将 tokens 作为 JSON 字符串传递
                if (Object.keys(mcpTokens).length > 0) {
                    headers['X-MCP-Tokens'] = JSON.stringify(mcpTokens);
                }

                const response = await fetch('/api/chat/stream', {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({ message, history: conversationHistory })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    buffer += decoder.decode(value, { stream: true });

                    // 处理 SSE 格式: "event: xxx\ndata: {...}\n\n"
                    const lines = buffer.split('\n');
                    buffer = lines.pop() || '';  // 保留未完成的行

                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i].trim();
                        if (!line) continue;

                        if (line.startsWith('event:')) {
                            const eventType = line.substring(6).trim();
                            events.push({ type: eventType, data: null });
                        } else if (line.startsWith('data:')) {
                            const data = line.substring(5).trim();
                            if (events.length > 0) {
                                events[events.length - 1].data = data;
                            }
                        }

                        // 处理完整的事件
                        while (events.length > 0 && events[0].data) {
                            const event = events.shift();
                            try {
                                const data = JSON.parse(event.data);
                                onEvent(event.type, data);
                            } catch (e) {
                                console.error('Parse error:', e, event.data);
                            }
                        }
                    }
                }
            } catch (error) {
                onEvent('error', { error: error.message });
            }
        }

        async function sendMessageStream(message) {
            if (isTyping) return;

            isTyping = true;
            sendButton.disabled = true;

            // 添加用户消息
            addMessage('user', message);
            conversationHistory.push({ role: 'user', content: message });

            // 创建助手消息容器
            const assistantMsgDiv = document.createElement('div');
            assistantMsgDiv.className = 'flex justify-start';
            assistantMsgDiv.innerHTML = `
                <div class="message-assistant message-bubble rounded-lg p-4 shadow-sm">
                    <div class="response-content">
                        <div class="text" id="currentResponse"></div>
                    </div>
                    <div id="toolCallContainer"></div>
                </div>
            `;
            chatMessages.appendChild(assistantMsgDiv);

            const responseDiv = assistantMsgDiv.querySelector('#currentResponse');
            const toolContainer = assistantMsgDiv.querySelector('#toolCallContainer');

            let currentText = '';
            let toolCallsCount = 0;
            let toolCallItems = [];  // 改为数组存储，按索引匹配
            let finalResponse = '';
            let toolCallPanel = null;
            let toolCallsContainer = null;

            await chatStream(message, (eventType, data) => {
                switch (eventType) {
                    case 'start':
                        responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🤔 AI 正在思考...</span>';
                        break;

                    case 'token':
                        // 移除思考提示
                        if (currentText === '') {
                            responseDiv.innerHTML = '';
                        }
                        currentText += data.text || '';
                        responseDiv.innerHTML = formatMessage(currentText);
                        scrollToBottom();
                        break;

                    case 'tool_call':
                        // 首次工具调用时创建面板
                        if (!toolCallPanel) {
                            toolCallPanel = createToolCallPanel();
                            toolContainer.appendChild(toolCallPanel);
                            toolCallsContainer = toolCallPanel.querySelector('.tool-calls-container');

                            // 清空思考提示
                            if (currentText === '' || currentText.includes('正在思考')) {
                                responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🔧 正在调用工具...</span>';
                            }
                        }

                        // 添加工具调用项
                        const toolName = data.tool || 'unknown';
                        const params = data.args || data.params || null;
                        const toolUseId = data.tool_id || null;

                        console.log('[tool_call] Adding tool:', { toolName, toolUseId, params });

                        const itemInfo = addToolCallItem(toolCallsContainer, toolName, params, toolUseId);
                        toolCallItems.push(itemInfo);
                        toolCallsCount++;

                        console.log('[tool_call] Current toolCallItems:', toolCallItems);

                        updateToolPanelStatus(toolCallPanel, 'running', toolCallsCount);
                        scrollToBottom();
                        break;

                    case 'tools_start':
                        // 批量工具开始
                        if (!toolCallPanel) {
                            toolCallPanel = createToolCallPanel();
                            toolContainer.appendChild(toolCallPanel);
                            toolCallsContainer = toolCallPanel.querySelector('.tool-calls-container');
                        }
                        if (currentText === '' || currentText.includes('正在思考')) {
                            responseDiv.innerHTML = '<span style="color: #888; font-style: italic;">🔧 正在调用工具...</span>';
                        }
                        scrollToBottom();
                        break;

                    case 'tool_done':
                        // 工具执行完成 - 按 tool_use_id 或 tool_name 匹配
                        const doneToolUseId = data.tool_id;
                        const doneToolName = data.tool;
                        const doneResult = data.result;

                        console.log('[tool_done] Looking for tool:', { tool_id: doneToolUseId, tool: doneToolName });
                        console.log('[tool_done] Current toolCallItems:', toolCallItems);

                        // 查找匹配的工具调用项
                        const doneItem = toolCallItems.find(item =>
                            item.toolUseId === doneToolUseId || item.toolName === doneToolName
                        );

                        if (doneItem) {
                            console.log('[tool_done] Found item, updating status:', doneItem.id);
                            updateToolCallStatus(doneItem.id, 'success', doneResult);
                        } else {
                            console.warn('[tool_done] Tool item not found for:', { tool_id: doneToolUseId, tool: doneToolName });
                            // 如果找不到匹配项，尝试通过 DOM 查找
                            const fallbackItem = Array.from(document.querySelectorAll('.tool-call-item')).find(el => {
                                return el.dataset.toolUseId === doneToolUseId || el.dataset.toolName === doneToolName;
                            });
                            if (fallbackItem) {
                                console.log('[tool_done] Found via DOM fallback:', fallbackItem.id);
                                updateToolCallStatus(fallbackItem.id, 'success', doneResult);
                            }
                        }
                        scrollToBottom();
                        break;

                    case 'tool_error':
                        // 工具执行错误 - 按 tool_use_id 或 tool_name 匹配
                        const errorToolUseId = data.tool_id;
                        const errorToolName = data.tool;

                        const errorItem = toolCallItems.find(item =>
                            item.toolUseId === errorToolUseId || item.toolName === errorToolName
                        );

                        if (errorItem) {
                            updateToolCallStatus(errorItem.id, 'error', data.error);
                        }
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'error', toolCallsCount);
                        }
                        scrollToBottom();
                        break;

                    case 'complete':
                        // 完成
                        console.log('[complete] Tool calls finished, updating panel status');
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'complete', toolCallsCount);
                        }

                        // 清空临时提示并显示最终响应
                        if (data.response || currentText) {
                            finalResponse = data.response || currentText;
                            responseDiv.innerHTML = formatMessage(finalResponse);
                        }
                        conversationHistory.push({ role: 'assistant', content: finalResponse });
                        scrollToBottom();
                        break;

                    case 'error':
                        responseDiv.innerHTML = `<span style="color: #ef4444;">❌ 错误: ${escapeHtml(data.error || '未知错误')}</span>`;
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'error', toolCallsCount);
                        }
                        scrollToBottom();
                        break;
                }
            });

            // 重置状态
            isTyping = false;
            sendButton.disabled = false;
            userInput.focus();
        }

        // Load MCP servers
        async function loadMCPServers() {
            try {
                const response = await fetch(`${API_BASE}/api/mcp/servers`);
                const data = await response.json();

                mcpServers.innerHTML = data.servers.map(server => {
                    const mcpType = server.id;
                    const isLoggedIn = TokenManager.isLoggedIn(mcpType);
                    const username = TokenManager.getUsername(mcpType);

                    let authStatus = '';
                    let clickHandler = '';

                    if (server.auth_type === 'jwt') {
                        if (isLoggedIn) {
                            authStatus = `<span class="text-green-600 font-medium" title="已登录为 ${username}">✅ ${username || '已登录'}</span>`;
                            clickHandler = `onclick="handleMcpClick('${mcpType}', '${server.auth_type}')"`;
                        } else {
                            authStatus = '<span class="text-amber-600" title="需要登录">🔒 需要登录</span>';
                            clickHandler = `onclick="handleMcpClick('${mcpType}', '${server.auth_type}')"`;
                        }
                    } else {
                        authStatus = '<span class="text-gray-500">🔓 公开</span>';
                    }

                    return `
                        <div class="mcp-server-tag ${server.enabled ? 'enabled' : 'disabled'}" ${clickHandler} style="cursor: ${server.auth_type === 'jwt' ? 'pointer' : 'default'}">
                            <span class="mcp-status-dot ${server.enabled ? 'online' : 'offline'}"></span>
                            <span class="font-medium">${server.name}</span>
                            ${authStatus}
                        </div>
                    `;
                }).join('');
            } catch (error) {
                console.error('Failed to load MCP servers:', error);
            }
        }

        // 处理 MCP 服务器点击
        function handleMcpClick(mcpType, authType) {
            if (authType !== 'jwt') return;

            if (TokenManager.isLoggedIn(mcpType)) {
                // 已登录，询问是否登出
                const username = TokenManager.getUsername(mcpType);
                if (confirm(`当前已登录为 ${username}\n\n是否要登出？`)) {
                    TokenManager.clearToken(mcpType);
                    loadMCPServers();
                }
            } else {
                // 未登录，显示登录对话框
                showLoginModal(mcpType);
            }
        }

        // 将 handleMcpClick 暴露到全局作用域
        window.handleMcpClick = handleMcpClick;

        // Check health
        async function checkHealth() {
            try {
                const response = await fetch(`${API_BASE}/api/health`);
                if (response.ok) {
                    statusIndicator.innerHTML = `
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        <span class="text-sm text-gray-600">已连接</span>
                    `;
                } else {
                    throw new Error('Health check failed');
                }
            } catch (error) {
                statusIndicator.innerHTML = `
                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                    <span class="text-sm text-gray-600">连接失败</span>
                `;
            }
        }

        // Event listeners
        chatForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = userInput.value.trim();
            if (message) {
                sendMessageStream(message);
                userInput.value = '';
            }
        });

        // Initialize
        loadMCPServers();
        checkHealth();
        userInput.focus();

        // Make toggle functions global
        window.toggleToolPanel = toggleToolPanel;
        window.toggleCollapsible = toggleCollapsible;
    </script>
</body>
</html>