@bolloon/bolloon-agent 0.1.35 → 0.1.36

package/dist/web/components/p2p/P2PModal.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { p2pManager } from './p2p-manager.js';
+export function P2PModal({ visible, onClose }) {
+    const [activeTab, setActiveTab] = useState('identity');
+    const [initialized, setInitialized] = useState(false);
+    const [status, setStatus] = useState('idle');
+    const [statusText, setStatusText] = useState('未初始化');
+    const [identity, setIdentity] = useState(null);
+    const [connectInput, setConnectInput] = useState('');
+    const [progress, setProgress] = useState(null);
+    const [progressVisible, setProgressVisible] = useState(false);
+    const [connectResult, setConnectResult] = useState(null);
+    const [history, setHistory] = useState([]);
+    const [messages, setMessages] = useState([]);
+    const [unreadCount, setUnreadCount] = useState(0);
+    const [peers, setPeers] = useState([]);
+    const [persistentConnections, setPersistentConnections] = useState([]);
+    const [toast, setToast] = useState(null);
+    useEffect(() => {
+        if (visible && !initialized) {
+            console.log('[P2P Modal] visible=true, initialized=false, calling initP2P');
+            initP2P();
+        }
+        else if (visible && initialized && !identity) {
+            // 已初始化但没有identity，可能是首次未触发
+            console.log('[P2P Modal] visible=true, initialized=true, but no identity, calling initP2P again');
+            initP2P();
+        }
+    }, [visible, initialized]);
+    useEffect(() => {
+        if (visible) {
+            loadActiveTab();
+        }
+    }, [activeTab, visible]);
+    async function initP2P() {
+        setStatus('connecting');
+        setStatusText('初始化中...');
+        try {
+            const identity = await p2pManager.init();
+            setIdentity(identity);
+            setStatus('online');
+            setStatusText('已连接');
+            setInitialized(true);
+        }
+        catch (e) {
+            setStatus('error');
+            setStatusText('初始化失败');
+        }
+    }
+    async function loadActiveTab() {
+        switch (activeTab) {
+            case 'history':
+                await loadHistory();
+                break;
+            case 'messages':
+                await loadMessages();
+                break;
+            case 'connect':
+                loadPeers();
+                loadPersistentConnections();
+                break;
+        }
+    }
+    async function loadHistory() {
+        try {
+            const hist = await p2pManager.getHistory();
+            setHistory(hist);
+        }
+        catch (e) {
+            console.error('[P2P Modal] 加载历史失败:', e);
+        }
+    }
+    async function loadMessages() {
+        try {
+            const msgs = await p2pManager.getMessages();
+            setMessages(msgs);
+            const unread = p2pManager.getUnreadCount();
+            setUnreadCount(unread);
+        }
+        catch (e) {
+            console.error('[P2P Modal] 加载消息失败:', e);
+        }
+    }
+    function loadPeers() {
+        const connectedPeers = p2pManager.getConnectedPeers();
+        setPeers(connectedPeers);
+    }
+    async function loadPersistentConnections() {
+        try {
+            const connections = await p2pManager.getPersistentConnections();
+            setPersistentConnections(connections);
+        }
+        catch (e) {
+            console.error('[P2P Modal] 加载持久连接失败:', e);
+        }
+    }
+    async function handleToggleConnection(connection) {
+        const newStatus = connection.status === 'connected' ? 'disconnected' : 'connected';
+        const enable = newStatus === 'connected';
+        try {
+            const success = await p2pManager.toggleConnection(connection, enable);
+            if (success) {
+                await loadPersistentConnections();
+                loadPeers();
+                showToast(enable ? '正在连接...' : '已断开');
+            }
+            else {
+                showToast('操作失败');
+            }
+        }
+        catch (e) {
+            showToast('操作失败');
+        }
+    }
+    async function handleOpenChannel(channelId) {
+        showToast(`打开通道: ${channelId}`);
+        onClose();
+    }
+    async function handleConnect() {
+        if (!connectInput.trim())
+            return;
+        setProgressVisible(true);
+        setProgress({ stage: 'init', percent: 0, message: '验证输入格式...' });
+        setConnectResult(null);
+        try {
+            const result = await p2pManager.connectAndCreateChannel(connectInput, (p) => setProgress(p));
+            if (result.success) {
+                setConnectResult({ type: 'success', text: `已连接到 ${result.name || '节点'}` });
+                setConnectInput('');
+                await loadHistory();
+                loadPeers();
+                loadPersistentConnections();
+            }
+            else {
+                setConnectResult({ type: 'error', text: result.error || '连接失败' });
+            }
+        }
+        catch (e) {
+            setConnectResult({ type: 'error', text: e.message });
+        }
+        finally {
+            setTimeout(() => {
+                setProgressVisible(false);
+                setProgress(null);
+            }, 2000);
+        }
+    }
+    async function handleHistoryAction(action, item) {
+        if (action === 'connect') {
+            setConnectInput(item.cid);
+            setActiveTab('connect');
+        }
+        else if (action === 'pin') {
+            await p2pManager.updateHistory(item.id, { isPinned: !item.isPinned });
+            await loadHistory();
+        }
+        else if (action === 'delete') {
+            await p2pManager.deleteHistory(item.id);
+            await loadHistory();
+        }
+    }
+    async function handleMarkAllRead() {
+        await p2pManager.messages.markAllRead();
+        await loadMessages();
+    }
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text);
+        showToast('已复制');
+    }
+    function showToast(msg) {
+        setToast(msg);
+        setTimeout(() => setToast(null), 2000);
+    }
+    function handleCopyLink() {
+        if (identity) {
+            const link = `bolloon://connect?did=${encodeURIComponent(identity.did)}&cid=${encodeURIComponent(identity.cid)}`;
+            navigator.clipboard.writeText(link);
+            showToast('链接已复制');
+        }
+    }
+    function handleExportFile() {
+        p2pManager.identity.exportIdentityFile();
+    }
+    if (!visible)
+        return null;
+    return (_jsxs("div", { className: "p2p-modal-overlay", onClick: (e) => e.target === e.currentTarget && onClose(), children: [_jsxs("div", { className: "p2p-modal", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h2", { children: "P2P \u7F51\u7EDC" }), _jsx("button", { className: "modal-close", onClick: onClose, children: "\u00D7" })] }), _jsxs("div", { className: "tabs", children: [_jsx("button", { className: `tab ${activeTab === 'identity' ? 'active' : ''}`, onClick: () => setActiveTab('identity'), children: "\u6211\u7684\u8EAB\u4EFD" }), _jsx("button", { className: `tab ${activeTab === 'connect' ? 'active' : ''}`, onClick: () => setActiveTab('connect'), children: "\u8FDE\u63A5" }), _jsx("button", { className: `tab ${activeTab === 'history' ? 'active' : ''}`, onClick: () => setActiveTab('history'), children: "\u5386\u53F2\u8BB0\u5F55" }), _jsxs("button", { className: `tab ${activeTab === 'messages' ? 'active' : ''}`, onClick: () => setActiveTab('messages'), children: ["\u6D88\u606F ", unreadCount > 0 && _jsx("span", { className: "unread-badge", children: unreadCount })] })] }), activeTab === 'identity' && (_jsxs("div", { className: "tab-content active", children: [_jsxs("div", { className: "identity-card", children: [_jsxs("div", { className: "status-row", children: [_jsx("span", { className: `status-indicator ${status}` }), _jsx("span", { children: statusText })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "DID:" }), _jsx("code", { className: "info-value", children: identity?.did || '-' }), identity?.did && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.did), children: "\uD83D\uDCCB" })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "CID:" }), _jsx("code", { className: "info-value", children: identity?.cid || '-' }), identity?.cid && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.cid), children: "\uD83D\uDCCB" })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "Node ID:" }), _jsx("code", { className: "info-value", children: identity?.irohNodeId || '-' }), identity?.irohNodeId && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.irohNodeId), children: "\uD83D\uDCCB" })] })] }), !initialized && _jsx("button", { className: "btn-primary", onClick: initP2P, children: "\u521D\u59CB\u5316 P2P" }), identity && (_jsxs("div", { className: "share-panel", children: [_jsx("h4", { children: "\u5206\u4EAB\u7ED9\u597D\u53CB" }), _jsxs("div", { className: "share-actions", children: [_jsx("button", { className: "btn-secondary", onClick: handleCopyLink, children: "\uD83D\uDCCB \u590D\u5236\u94FE\u63A5" }), _jsx("button", { className: "btn-secondary", onClick: handleExportFile, children: "\uD83D\uDCC1 \u5BFC\u51FA\u6587\u4EF6" })] })] }))] })), activeTab === 'connect' && (_jsxs("div", { className: "tab-content active", children: [_jsxs("div", { className: "connect-form", children: [_jsx("input", { type: "text", placeholder: "\u7C98\u8D34 CID \u6216\u94FE\u63A5...", value: connectInput, onChange: (e) => setConnectInput(e.target.value), onKeyPress: (e) => e.key === 'Enter' && handleConnect() }), _jsx("button", { className: "btn-secondary", onClick: handleConnect, children: "\u8FDE\u63A5 \u25B6" })] }), progressVisible && progress && (_jsxs("div", { className: "progress show", children: [_jsx("div", { className: "progress-bar", children: _jsx("div", { className: "progress-fill", style: { width: `${progress.percent}%` } }) }), _jsx("span", { className: "progress-text", children: progress.message })] })), connectResult && (_jsx("div", { className: `connect-result ${connectResult.type} show`, children: connectResult.text })), _jsxs("div", { className: "persistent-peers-section", children: [_jsxs("h4", { children: ["\u6301\u4E45\u8FDE\u63A5 (", persistentConnections.length, ")"] }), persistentConnections.length === 0 ? (_jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u6301\u4E45\u8FDE\u63A5" })) : (persistentConnections.map((conn) => (_jsxs("div", { className: `persistent-peer-item ${conn.status}`, children: [_jsx("div", { className: "peer-status-indicator", children: _jsx("span", { className: `dot ${conn.status === 'connected' ? 'online' : 'offline'}` }) }), _jsxs("div", { className: "peer-info", children: [_jsxs("div", { className: "peer-name", children: [conn.peerName || 'Unknown', conn.isAutoConnect && _jsx("span", { className: "auto-badge", children: "\u81EA\u52A8" })] }), _jsxs("div", { className: "peer-meta", children: [_jsxs("span", { children: ["DID: ", conn.peerDid?.substring(0, 16), "..."] }), _jsxs("span", { children: ["\u72B6\u6001: ", conn.status === 'connected' ? '已连接' : '未连接'] })] })] }), _jsxs("div", { className: "peer-actions", children: [_jsx("button", { className: `btn-sm ${conn.status === 'connected' ? 'btn-danger' : 'btn-primary'}`, onClick: () => handleToggleConnection(conn), children: conn.status === 'connected' ? '断开' : '连接' }), conn.channelId && (_jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleOpenChannel(conn.channelId), children: "\u5BF9\u8BDD" }))] })] }, conn.id))))] }), _jsxs("div", { className: "peers-section", children: [_jsxs("h4", { children: ["\u5F53\u524D\u8FDE\u63A5 (", peers.length, ")"] }), _jsxs("div", { id: "p2p-peers-list", children: [peers.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u8FDE\u63A5" }), peers.map((peer, i) => (_jsxs("div", { className: "peer-item", children: [_jsx("div", { className: "peer-status", children: _jsx("span", { className: "dot online" }) }), _jsxs("div", { className: "peer-info", children: [_jsx("div", { className: "peer-name", children: peer.info?.name || 'Unknown' }), _jsxs("div", { className: "peer-meta", children: [(peer.nodeId || '').substring(0, 16), "..."] })] })] }, i)))] })] })] })), activeTab === 'history' && (_jsxs("div", { className: "tab-content active", children: [_jsx("div", { className: "toolbar", children: _jsx("button", { className: "btn-secondary btn-sm", onClick: loadHistory, children: "\uD83D\uDD04 \u5237\u65B0" }) }), _jsxs("div", { id: "p2p-history-list", children: [history.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u8FDE\u63A5\u5386\u53F2" }), history.map((item) => (_jsxs("div", { className: `history-item ${item.isPinned ? 'pinned' : ''}`, children: [_jsx("div", { className: "history-item-icon", children: "\uD83D\uDCAC" }), _jsxs("div", { className: "history-item-info", children: [_jsxs("div", { className: "history-item-name", children: [item.name || 'Unknown', item.isPinned && _jsx("span", { className: "pin-icon", children: "\uD83D\uDCCC" })] }), _jsxs("div", { className: "history-item-meta", children: [_jsxs("span", { children: ["\u4E0A\u6B21: ", new Date(item.lastConnectedAt).toLocaleString()] }), _jsxs("span", { children: ["\u6D88\u606F: ", item.totalMessages || 0] })] })] }), _jsxs("div", { className: "history-item-actions", children: [_jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('connect', item), children: "\u8FDE\u63A5" }), _jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('pin', item), children: item.isPinned ? '取消置顶' : '置顶' }), _jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('delete', item), children: "\u5220\u9664" })] })] }, item.id)))] })] })), activeTab === 'messages' && (_jsxs("div", { className: "tab-content active", children: [_jsx("div", { className: "toolbar", children: _jsx("button", { className: "btn-secondary btn-sm", onClick: handleMarkAllRead, children: "\u5168\u90E8\u5DF2\u8BFB" }) }), _jsxs("div", { id: "p2p-messages-list", children: [messages.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u6D88\u606F" }), messages.slice(-20).map((msg) => (_jsxs("div", { className: `message-item ${!msg.isRead ? 'unread' : ''}`, children: [_jsxs("div", { className: "message-header", children: [_jsx("span", { className: "message-sender", children: msg.fromName || msg.fromDid }), _jsx("span", { className: "message-time", children: new Date(msg.timestamp).toLocaleString() })] }), _jsx("div", { className: "message-content", children: msg.content.substring(0, 200) })] }, msg.id)))] })] }))] }), toast && _jsx("div", { className: "toast", children: toast })] }));
+}