223-template-240
/
blank
برگرفته از 137-template-113/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI MCP Web UI</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.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>

    <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;

        // 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) {
            const item = document.createElement('div');
            item.className = 'tool-call-item pending';
            item.id = `tool-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

            // 简化工具名称显示 - 去掉 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 item.id;
        }

        // 更新工具调用状态
        function updateToolCallStatus(itemId, status, result = null) {
            const item = document.getElementById(itemId);
            if (!item) 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 = '✅ 成功';

                if (result) {
                    const resultText = typeof result === 'string' ? result : JSON.stringify(result);
                    const truncatedResult = resultText.substring(0, 500) + (resultText.length > 500 ? '...' : '');

                    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">
                        <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');

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

            if (status === 'complete') {
                indicator.className = 'process-indicator success';
                indicator.innerHTML = `<span>✅ 完成 - ${totalCalls} 个工具调用</span>`;
            } 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 {
                const response = await fetch('/api/chat/stream', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    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 itemId = addToolCallItem(toolCallsContainer, toolName, params);
                        toolCallItems[data.tool_id || toolName] = itemId;
                        toolCallsCount++;
                        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':
                        // 工具执行完成
                        const toolId = data.tool_id || data.tool;
                        const itemId2 = toolCallItems[toolId];
                        if (itemId2) {
                            const result = data.result || '';
                            updateToolCallStatus(itemId2, 'success', result);
                        }
                        scrollToBottom();
                        break;

                    case 'tool_error':
                        // 工具执行错误
                        const errorItemId = toolCallItems[data.tool_id || data.tool];
                        if (errorItemId) {
                            updateToolCallStatus(errorItemId, 'error', data.error);
                        }
                        if (toolCallPanel) {
                            updateToolPanelStatus(toolCallPanel, 'error', toolCallsCount);
                        }
                        scrollToBottom();
                        break;

                    case 'complete':
                        // 完成
                        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 => `
                    <div class="mcp-server-tag ${server.enabled ? 'enabled' : 'disabled'}">
                        <span class="mcp-status-dot ${server.enabled ? 'online' : 'offline'}"></span>
                        <span class="font-medium">${server.name}</span>
                        ${server.auth_type === 'jwt' ? '<span>🔒</span>' : ''}
                    </div>
                `).join('');
            } catch (error) {
                console.error('Failed to load MCP servers:', error);
            }
        }

        // 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>