@bolloon/bolloon-agent 0.1.0

package/dist/web/components/p2p/p2p-messages.js

@@ -0,0 +1,186 @@
+/**
+ * P2P 消息管理
+ */
+import { MessageStatus } from './types.js';
+import { p2pStore } from './p2p-store-memory.js';
+export class P2PMessagesManager {
+    pendingMessages = new Map();
+    messageHandlers = [];
+    sseConnected = false;
+    eventSource = null;
+    maxRetries = 3;
+    // 发送消息
+    async send(content, targetNodeId) {
+        const messageId = crypto.randomUUID();
+        this.pendingMessages.set(messageId, {
+            status: MessageStatus.SENDING,
+            retries: 0,
+            createdAt: Date.now(),
+            content,
+            targetNodeId
+        });
+        try {
+            const res = await fetch('/api/message-p2p', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: messageId,
+                    type: 'chat',
+                    content,
+                    target: targetNodeId || 'broadcast',
+                    requireReceipt: true
+                })
+            });
+            if (res.ok) {
+                this.updateStatus(messageId, MessageStatus.SENT);
+                return { success: true, messageId };
+            }
+            else {
+                await this.queueMessage(content, targetNodeId);
+                this.updateStatus(messageId, MessageStatus.QUEUED);
+                return { success: false, messageId, queued: true };
+            }
+        }
+        catch (e) {
+            await this.queueMessage(content, targetNodeId);
+            this.updateStatus(messageId, MessageStatus.QUEUED);
+            return { success: false, messageId, queued: true };
+        }
+    }
+    async queueMessage(content, targetNodeId) {
+        await p2pStore.addToQueue({
+            targetDid: targetNodeId,
+            targetNodeId: targetNodeId,
+            type: 'chat',
+            content
+        });
+    }
+    // 重试失败的消息
+    async retry(messageId) {
+        const msg = this.pendingMessages.get(messageId);
+        if (!msg)
+            return { success: false, error: '消息不存在' };
+        if (msg.retries >= this.maxRetries) {
+            this.updateStatus(messageId, MessageStatus.FAILED);
+            return { success: false, error: '超过最大重试次数' };
+        }
+        const result = await this.send(msg.content, msg.targetNodeId);
+        return { success: result.success };
+    }
+    // 获取消息状态
+    getStatus(messageId) {
+        return this.pendingMessages.get(messageId);
+    }
+    updateStatus(messageId, status) {
+        const msg = this.pendingMessages.get(messageId);
+        if (msg) {
+            msg.status = status;
+            if (status === MessageStatus.SENT || status === MessageStatus.QUEUED) {
+                msg.retries++;
+            }
+        }
+    }
+    // 监听消息
+    onMessage(handler) {
+        this.messageHandlers.push(handler);
+    }
+    // 移除监听
+    offMessage(handler) {
+        const index = this.messageHandlers.indexOf(handler);
+        if (index > -1) {
+            this.messageHandlers.splice(index, 1);
+        }
+    }
+    // 启动 SSE 监听
+    startListening() {
+        if (this.sseConnected)
+            return;
+        this.eventSource = new EventSource('/events?channelId=p2p-global');
+        this.sseConnected = true;
+        this.eventSource.onmessage = (e) => {
+            try {
+                const data = JSON.parse(e.data);
+                if (data.type === 'p2p_message') {
+                    const content = typeof data.content === 'string'
+                        ? data.content
+                        : JSON.stringify(data.content);
+                    const msg = {
+                        id: crypto.randomUUID(),
+                        fromDid: data.from,
+                        fromName: data.fromName || 'Unknown',
+                        content: content,
+                        type: data.messageType || 'chat',
+                        timestamp: data.timestamp || Date.now(),
+                        status: MessageStatus.DELIVERED,
+                        isRead: false
+                    };
+                    // 保存到存储
+                    p2pStore.addMessage({
+                        fromDid: msg.fromDid,
+                        fromName: msg.fromName,
+                        content: msg.content,
+                        type: msg.type,
+                        timestamp: msg.timestamp,
+                        status: msg.status
+                    });
+                    // 更新连接历史
+                    p2pStore.getHistory().then(history => {
+                        const entry = history.find(h => h.did === msg.fromDid);
+                        if (entry) {
+                            p2pStore.updateHistory(entry.id, {
+                                lastMessageAt: msg.timestamp,
+                                totalMessages: (entry.totalMessages || 0) + 1
+                            });
+                        }
+                    });
+                    // 通知所有处理器
+                    this.messageHandlers.forEach(handler => {
+                        try {
+                            handler(msg);
+                        }
+                        catch (e) {
+                            console.error('[P2P Messages] 处理错误:', e);
+                        }
+                    });
+                }
+            }
+            catch { }
+        };
+        this.eventSource.onerror = () => {
+            console.log('[P2P Messages] SSE 断开，5秒后重连...');
+            this.sseConnected = false;
+            setTimeout(() => this.startListening(), 5000);
+        };
+    }
+    // 获取收到的消息
+    async getReceivedMessages() {
+        return p2pStore.getMessages();
+    }
+    // 获取未读数
+    getUnreadCount() {
+        return p2pStore.getUnreadCount();
+    }
+    // 标记消息已读
+    async markRead(id) {
+        await p2pStore.markRead(id);
+    }
+    // 标记全部已读
+    async markAllRead() {
+        await p2pStore.markAllRead();
+    }
+    // 获取离线队列
+    async getOfflineQueue() {
+        return p2pStore.getQueue();
+    }
+    // 销毁
+    destroy() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
+        this.sseConnected = false;
+        this.pendingMessages.clear();
+        this.messageHandlers = [];
+    }
+}
+export const p2pMessages = new P2PMessagesManager();

package/dist/web/components/p2p/p2p-store-memory.js

@@ -0,0 +1,129 @@
+/**
+ * P2P 内存存储 - 简化版，无 IndexedDB 依赖
+ */
+export class P2PStoreMemory {
+    history = [];
+    messages = [];
+    offlineQueue = [];
+    unreadCount = 0;
+    preferences = {
+        autoReconnect: true,
+        autoConnectOnStartup: true,
+        maxRetries: 3,
+        notifications: {
+            newMessage: true,
+            connectionEstablished: true
+        }
+    };
+    // ==================== 连接历史 ====================
+    async addToHistory(entry) {
+        const existingIndex = this.history.findIndex(h => h.did === entry.did);
+        if (existingIndex >= 0) {
+            this.history[existingIndex] = {
+                ...this.history[existingIndex],
+                ...entry,
+                lastConnectedAt: Date.now()
+            };
+            return this.history[existingIndex].id;
+        }
+        const id = crypto.randomUUID();
+        this.history.push({
+            ...entry,
+            id,
+            lastConnectedAt: Date.now()
+        });
+        return id;
+    }
+    async getHistory() {
+        return [...this.history].sort((a, b) => {
+            if (a.isPinned !== b.isPinned)
+                return a.isPinned ? -1 : 1;
+            return b.lastMessageAt - a.lastMessageAt;
+        });
+    }
+    async updateHistory(id, updates) {
+        const index = this.history.findIndex(h => h.id === id);
+        if (index >= 0) {
+            this.history[index] = { ...this.history[index], ...updates };
+        }
+    }
+    async deleteHistory(id) {
+        this.history = this.history.filter(h => h.id !== id);
+    }
+    // ==================== 消息 ====================
+    async addMessage(msg) {
+        this.messages.push({
+            ...msg,
+            id: crypto.randomUUID(),
+            isRead: false
+        });
+        this.unreadCount++;
+    }
+    async getMessages() {
+        return [...this.messages].sort((a, b) => b.timestamp - a.timestamp);
+    }
+    async markRead(id) {
+        const msg = this.messages.find(m => m.id === id);
+        if (msg && !msg.isRead) {
+            msg.isRead = true;
+            this.unreadCount = Math.max(0, this.unreadCount - 1);
+        }
+    }
+    async markAllRead() {
+        this.messages.forEach(m => m.isRead = true);
+        this.unreadCount = 0;
+    }
+    getUnreadCount() {
+        return this.unreadCount;
+    }
+    // ==================== 离线队列 ====================
+    async addToQueue(msg) {
+        const id = crypto.randomUUID();
+        this.offlineQueue.push({
+            ...msg,
+            id,
+            createdAt: Date.now(),
+            retryCount: 0,
+            status: 'pending'
+        });
+        return id;
+    }
+    async getQueue() {
+        return [...this.offlineQueue];
+    }
+    async updateQueueMessage(id, updates) {
+        const msg = this.offlineQueue.find(m => m.id === id);
+        if (msg) {
+            Object.assign(msg, updates);
+        }
+    }
+    async removeFromQueue(id) {
+        this.offlineQueue = this.offlineQueue.filter(m => m.id !== id);
+    }
+    async getQueueCount() {
+        return this.offlineQueue.length;
+    }
+    // ==================== 偏好设置 ====================
+    getPreferences() {
+        return { ...this.preferences };
+    }
+    setPreferences(prefs) {
+        this.preferences = { ...this.preferences, ...prefs };
+    }
+    // ==================== 导出/清除 ====================
+    exportData() {
+        return JSON.stringify({
+            history: this.history,
+            messages: this.messages,
+            preferences: this.preferences
+        }, null, 2);
+    }
+    clear() {
+        this.history = [];
+        this.messages = [];
+        this.offlineQueue = [];
+        this.unreadCount = 0;
+    }
+}
+// 全局单例
+export const p2pStore = new P2PStoreMemory();

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

@@ -0,0 +1,23 @@
+/**
+ * P2P 模块类型定义
+ */
+// 连接状态
+export var ConnectionStatus;
+(function (ConnectionStatus) {
+    ConnectionStatus["IDLE"] = "idle";
+    ConnectionStatus["CONNECTING"] = "connecting";
+    ConnectionStatus["CONNECTED"] = "connected";
+    ConnectionStatus["OFFLINE"] = "offline";
+    ConnectionStatus["ERROR"] = "error";
+})(ConnectionStatus || (ConnectionStatus = {}));
+// 消息状态
+export var MessageStatus;
+(function (MessageStatus) {
+    MessageStatus["PENDING"] = "pending";
+    MessageStatus["SENDING"] = "sending";
+    MessageStatus["SENT"] = "sent";
+    MessageStatus["DELIVERED"] = "delivered";
+    MessageStatus["READ"] = "read";
+    MessageStatus["FAILED"] = "failed";
+    MessageStatus["QUEUED"] = "queued";
+})(MessageStatus || (MessageStatus = {}));

package/dist/web/index.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bolloon Agent</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css">
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+</head>
+<body>
+  <div class="app-container">
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <button id="sidebar-toggle" class="sidebar-toggle" title="收起侧边栏">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+        <span class="sidebar-brand">
+          <span class="brand-icon">◈</span>
+          <span class="brand-text">Bolloon</span>
+        </span>
+        <button id="load-session-btn" class="sidebar-action" title="加载Session">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+          </svg>
+        </button>
+      </div>
+      <input type="file" id="session-file-input" accept=".json" style="display:none">
+
+      <div class="sidebar-section">
+        <div class="section-header">
+          <span class="section-title">频道</span>
+        </div>
+        <button id="new-channel-btn" class="section-action" title="新建频道">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          <span>新建</span>
+        </button>
+        <ul class="channel-list" id="channel-list"></ul>
+      </div>
+
+      <div class="sidebar-footer">
+        <div class="agent-status">
+          <span class="status-dot"></span>
+          <span class="status-text">已连接</span>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="header">
+        <div class="header-left">
+          <span class="channel-indicator" id="channel-indicator"></span>
+          <h1 id="channel-name">Bolloon Agent</h1>
+        </div>
+        <div class="header-right">
+          <button id="theme-toggle" class="theme-toggle" title="切换主题">
+            <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="5"></circle>
+              <line x1="12" y1="1" x2="12" y2="3"></line>
+              <line x1="12" y1="21" x2="12" y2="23"></line>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+              <line x1="1" y1="12" x2="3" y2="12"></line>
+              <line x1="21" y1="12" x2="23" y2="12"></line>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+            <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+          </button>
+          <button id="api-config-btn" class="header-action" title="API 配置">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+          </button>
+          <button id="p2p-network-btn" class="header-action" title="P2P 网络">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="5" r="3"></circle>
+              <circle cx="5" cy="19" r="3"></circle>
+              <circle cx="19" cy="19" r="3"></circle>
+              <line x1="12" y1="8" x2="5" y2="16"></line>
+              <line x1="12" y1="8" x2="19" y2="16"></line>
+            </svg>
+          </button>
+          <button id="task-queue-btn" class="header-action" title="任务队列">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"></path>
+              <rect x="9" y="3" width="6" height="4" rx="1"></rect>
+              <line x1="9" y1="12" x2="15" y2="12"></line>
+              <line x1="9" y1="16" x2="13" y2="16"></line>
+            </svg>
+            <span id="task-badge" class="task-badge" style="display:none;">0</span>
+          </button>
+        </div>
+      </header>
+
+      <!-- P2P Network Modal (React) -->
+      <div id="p2p-modal-root"></div>
+
+      <!-- Task Queue Modal -->
+      <div id="task-modal" class="modal">
+        <div class="modal-content modal-wide">
+          <div class="modal-header">
+            <h2>任务队列</h2>
+            <button id="task-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="task-toolbar">
+              <button id="task-add-btn" class="btn-primary btn-sm">+ 新建任务</button>
+              <button id="task-execute-next-btn" class="btn-secondary btn-sm">▶ 执行下一个</button>
+            </div>
+            <div id="task-list" class="task-list">
+              <div class="task-empty">暂无任务，点击上方按钮创建</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- Create Task Modal -->
+      <div id="create-task-modal" class="modal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2>新建任务</h2>
+            <button id="create-task-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>任务类型</label>
+              <select id="task-type">
+                <option value="chat">对话</option>
+                <option value="read">读取文档</option>
+                <option value="summarize">总结文档</option>
+                <option value="workflow">工作流</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>任务标题</label>
+              <input type="text" id="task-title" placeholder="输入任务标题">
+            </div>
+            <div class="form-group">
+              <label>任务描述</label>
+              <textarea id="task-desc" placeholder="输入任务描述或内容" rows="3"></textarea>
+            </div>
+            <div class="form-group workflow-steps" style="display:none;">
+              <label>工作流步骤（每行一个）</label>
+              <textarea id="task-steps" placeholder="步骤1&#10;步骤2&#10;步骤3" rows="4"></textarea>
+            </div>
+            <div class="btn-group">
+              <button id="task-cancel-btn" class="btn-secondary">取消</button>
+              <button id="task-create-btn" class="btn-primary">创建并执行</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="messages" id="messages">
+        <div class="message message-ai">
+          <div class="bubble bubble-ai">
+            <span class="loading-dots">加载中<span>.</span><span>.</span><span>.</span></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="input-area">
+        <div class="input-wrapper">
+          <input type="text" id="input" placeholder="输入消息..." autocomplete="off">
+          <button id="send" class="send-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <script type="module" src="/components/p2p/index.js"></script>
+  <script src="/client.js"></script>
+</body>
+</html>