@bolloon/bolloon-agent 0.1.0 → 0.1.2

package/src/web/client.js

@@ -10,16 +10,20 @@ const newChannelInput = document.getElementById('new-channel-input');
 const channelNameEl = document.getElementById('channel-name');
 const loadSessionBtn = document.getElementById('load-session-btn');
 const sessionFileInput = document.getElementById('session-file-input');
+const newSessionBtn = document.getElementById('new-session-btn');
 
-let eventSource = null;
+let eventSources = new Map(); // channelId -> EventSource
 let currentChannelId = null;
 let currentAgentId = '';
 let channels = [];
 let isSidebarCollapsed = false;
-let reconnectAttempts = 0;
-let reconnectTimer = null; // 改进: 跟踪重连定时器
+let reconnectAttempts = new Map(); // channelId -> attempts
+let reconnectTimers = new Map(); // channelId -> timer
 let lastUserCommand = ''; // 防止用户消息重复显示
 let lastAiContent = ''; // 防止 AI 消息重复显示
+let messagesContainers = new Map(); // channelId -> messages container div
+let sessionMessages = new Map(); // channelId:sessionId -> messages array
+let currentSessionId = null; // 当前显示的 session ID
 
 function generateId() {
   return crypto.randomUUID();
@@ -149,6 +153,57 @@ async function deleteChannel(channelId, e) {
   }
 }
 
+async function createNewSession() {
+  if (!currentChannelId) {
+    console.log('[新会话] 没有选中的频道');
+    return;
+  }
+  try {
+    // 保存当前 session 的消息
+    const channel = channels.find(c => c.id === currentChannelId);
+    if (channel && currentSessionId) {
+      const container = messagesContainers.get(currentChannelId);
+      if (container) {
+        const messages = Array.from(container.querySelectorAll('.message')).map(msg => ({
+          type: msg.classList.contains('message-user') ? 'user' : 'ai',
+          content: msg.querySelector('.message-content')?.textContent || ''
+        }));
+        sessionMessages.set(`${currentChannelId}:${currentSessionId}`, messages);
+        console.log('[新会话] 保存旧 session 消息:', messages.length);
+      }
+    }
+
+    const res = await fetch(`/channels/${currentChannelId}/sessions`, {
+      method: 'POST'
+    });
+    const data = await res.json();
+    console.log('[新会话] 创建成功:', data);
+
+    // 更新本地频道数据
+    if (channel) {
+      if (!channel.sessions) channel.sessions = [];
+      channel.sessions.push(data.session);
+      channel.currentSessionId = data.currentSessionId;
+    }
+
+    // 切换到新 session
+    const oldSessionId = currentSessionId;
+    currentSessionId = data.currentSessionId;
+
+    // 清空容器并加载新 session
+    const container = messagesContainers.get(currentChannelId);
+    if (container) {
+      container.innerHTML = '';
+      showChannelView(currentChannelId);
+      addMessage('你好！新会话已开始，有什么我可以帮你的吗？', 'ai', false, container);
+    }
+
+    console.log('[新会话] 已切换到:', data.currentSessionId);
+  } catch (err) {
+    console.error('Failed to create new session:', err);
+  }
+}
+
 function renderChannels() {
   if (!channelList) return;
   channelList.innerHTML = '';
@@ -184,73 +239,131 @@ function renderCollapsedChannels() {
   return;
 }
 
+function ensureMessageContainer(channelId) {
+  if (!messagesContainers.has(channelId)) {
+    const container = document.createElement('div');
+    container.className = 'channel-messages';
+    container.id = `channel-messages-${channelId}`;
+    container.style.display = 'none';
+    messagesEl.appendChild(container);
+    messagesContainers.set(channelId, container);
+  }
+  return messagesContainers.get(channelId);
+}
+
+function showChannelView(channelId) {
+  // Hide all channel message containers
+  messagesContainers.forEach((container, cid) => {
+    container.style.display = 'none';
+  });
+  // Show the selected channel's container
+  const container = messagesContainers.get(channelId);
+  if (container) {
+    container.style.display = 'block';
+  }
+  // Update messagesEl reference for functions that use it directly
+  messagesEl.innerHTML = '';
+  if (container) {
+    messagesEl.appendChild(container);
+  }
+}
+
 async function selectChannel(channelId) {
   console.log('[selectChannel] 开始切换到:', channelId);
 
+  // 保存当前 session 的消息
+  if (currentChannelId && currentSessionId) {
+    const container = messagesContainers.get(currentChannelId);
+    if (container) {
+      const messages = Array.from(container.querySelectorAll('.message')).map(msg => ({
+        type: msg.classList.contains('message-user') ? 'user' : 'ai',
+        content: msg.querySelector('.message-content')?.textContent || ''
+      }));
+      if (messages.length > 0) {
+        sessionMessages.set(`${currentChannelId}:${currentSessionId}`, messages);
+        console.log('[selectChannel] 保存 session 消息:', messages.length);
+      }
+    }
+  }
+
   // 立即更新当前频道 ID
   currentChannelId = channelId;
-  reconnectAttempts = 0;
+  reconnectAttempts.set(channelId, 0);
 
-  // 找到当前频道
+  // 找到当前频道和 session
   const channel = channels.find(c => c.id === channelId);
-  if (channel && channelNameEl) {
-    channelNameEl.textContent = channel.name;
-    console.log('[selectChannel] 频道:', channel.name, 'DID:', channel.did || '无');
+  if (channel) {
+    if (channelNameEl) channelNameEl.textContent = channel.name;
+    currentSessionId = channel.currentSessionId || 'default';
+    console.log('[selectChannel] 频道:', channel.name, 'session:', currentSessionId);
   }
 
   renderChannels();
 
-  // 关闭旧 SSE 连接
-  if (eventSource) {
-    console.log('[selectChannel] 关闭旧 SSE 连接');
-    eventSource.close();
-    eventSource = null;
+  // 确保该频道有消息容器
+  const container = ensureMessageContainer(channelId);
+
+  // 切换到该频道的视图
+  showChannelView(channelId);
+
+  // 如果还没有 SSE 连接，建立连接
+  if (!eventSources.has(channelId)) {
+    console.log('[selectChannel] 建立 SSE 连接');
+    connect(channelId);
   }
 
-  // 清空消息区域
-  messagesEl.innerHTML = '';
+  // 检查是否有保存的 session 消息
+  const sessionKey = `${channelId}:${currentSessionId}`;
+  const savedMessages = sessionMessages.get(sessionKey);
 
-  // 加载 session
-  try {
-    const res = await fetch(`/sessions/${channelId}`);
-    const session = await res.json();
-    if (session.messages && session.messages.length > 0) {
-      session.messages.forEach(msg => {
-        addMessage(msg.content, msg.type, false);
-      });
-    } else {
-      addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false);
+  if (savedMessages && savedMessages.length > 0) {
+    console.log('[selectChannel] 加载已保存的 session 消息:', savedMessages.length);
+    container.innerHTML = '';
+    savedMessages.forEach(msg => {
+      addMessage(msg.content, msg.type, false, container);
+    });
+  } else if (container.innerHTML.trim() === '') {
+    // 如果容器是空的，加载 session
+    try {
+      const res = await fetch(`/sessions/${channelId}`);
+      const session = await res.json();
+      if (session.messages && session.messages.length > 0) {
+        session.messages.forEach(msg => {
+          addMessage(msg.content, msg.type, false, container);
+        });
+      } else {
+        addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
+      }
+    } catch (err) {
+      console.error('[selectChannel] 加载 session 失败:', err);
+      addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
     }
-  } catch (err) {
-    console.error('[selectChannel] 加载 session 失败:', err);
-    addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false);
   }
-
-  // 建立新 SSE 连接
-  console.log('[selectChannel] 建立 SSE 连接');
-  connect();
 }
 
 async function loadSession(channelId) {
+  const container = messagesContainers.get(channelId);
+  if (!container) return;
   try {
     const res = await fetch(`/sessions/${channelId}`);
     const session = await res.json();
-    messagesEl.innerHTML = '';
+    container.innerHTML = '';
     if (session.messages && session.messages.length > 0) {
       session.messages.forEach(msg => {
-        addMessage(msg.content, msg.type, false);
+        addMessage(msg.content, msg.type, false, container);
       });
     } else {
-      addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false);
+      addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
     }
   } catch (err) {
     console.error('Failed to load session:', err);
-    messagesEl.innerHTML = '';
-    addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false);
+    container.innerHTML = '';
+    addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
   }
 }
 
-function addMessage(content, type, save = true) {
+function addMessage(content, type, save = true, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   // 去重：只有 save=true 时（来自 SSE）才去重，save=false 时（来自 session 加载）直接显示
   if (save) {
     const lastContent = type === 'user' ? lastUserCommand : lastAiContent;
@@ -459,19 +572,20 @@ function addMessage(content, type, save = true) {
   }
 
   div.appendChild(time);
-  messagesEl.appendChild(div);
+  msgContainer.appendChild(div);
 
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
-function showTyping() {
+function showTyping(container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   hideTyping();
   const div = document.createElement('div');
   div.className = 'message message-ai';
   div.id = 'typing';
   div.innerHTML = '<div class="typing"><div class="typing-spinner"></div><span class="typing-text">思考中...</span></div>';
-  messagesEl.appendChild(div);
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  msgContainer.appendChild(div);
+  msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
 function hideTyping() {
@@ -482,7 +596,8 @@ function hideTyping() {
 
 let streamingMessageEl = null;
 
-function showStreaming() {
+function showStreaming(container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   hideStreaming();
   streamingMessageEl = document.createElement('div');
   streamingMessageEl.className = 'message message-ai';
@@ -490,8 +605,8 @@ function showStreaming() {
   const bubble = document.createElement('div');
   bubble.className = 'bubble bubble-ai streaming-content';
   streamingMessageEl.appendChild(bubble);
-  messagesEl.appendChild(streamingMessageEl);
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  msgContainer.appendChild(streamingMessageEl);
+  msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
 function hideStreaming() {
@@ -501,47 +616,57 @@ function hideStreaming() {
   }
 }
 
-function updateStreamingContent(content) {
+function updateStreamingContent(content, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   if (streamingMessageEl) {
     const bubble = streamingMessageEl.querySelector('.streaming-content');
     if (bubble) {
       bubble.textContent = content;
-      messagesEl.scrollTop = messagesEl.scrollHeight;
+      msgContainer.scrollTop = msgContainer.scrollHeight;
     }
   }
 }
 
-function handleStreamEvent(data) {
+function handleStreamEvent(data, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
+  // 始终确保有工作流显示区域
+  if (!workflowDisplayEl) {
+    workflowDisplayEl = createWorkflowDisplay();
+    msgContainer.appendChild(workflowDisplayEl);
+  }
+
   if (data.streamType === 'thinking') {
-    showStreaming();
-    updateStreamingContent(data.content || '思考中...');
+    showStreaming(msgContainer);
+    updateStreamingContent(data.content || '思考中...', msgContainer);
   } else if (data.streamType === 'token') {
-    showStreaming();
+    showStreaming(msgContainer);
     const current = streamingMessageEl?.querySelector('.streaming-content')?.textContent || '';
-    updateStreamingContent(current + data.content);
+    updateStreamingContent(current + data.content, msgContainer);
   }
 }
 
-function handleStatusEvent(data) {
+function handleStatusEvent(data, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   // 检查是否是工具调用结果
   const content = data.content || '';
   const isJsonResult = content.startsWith('{') && content.includes('"success"');
 
   if (isJsonResult) {
     // 工具结果：折叠显示
-    showToolResult(data.tool, content);
+    showToolResult(data.tool, content, msgContainer);
   } else {
     // 普通状态：流式显示
-    showStreaming();
+    showStreaming(msgContainer);
     const icon = data.tool ? `🔧 ${data.tool}: ` : '';
-    updateStreamingContent(icon + data.content);
+    updateStreamingContent(icon + data.content, msgContainer);
   }
 }
 
 // 显示工具调用结果（折叠）
 let toolResultContainer = null;
 
-function showToolResult(toolName, resultJson) {
+function showToolResult(toolName, resultJson, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   // 清理之前的流式显示
   hideStreaming();
 
@@ -549,7 +674,7 @@ function showToolResult(toolName, resultJson) {
   if (!toolResultContainer) {
     toolResultContainer = document.createElement('div');
     toolResultContainer.className = 'tool-results-container';
-    messagesEl.appendChild(toolResultContainer);
+    msgContainer.appendChild(toolResultContainer);
   }
 
   // 尝试解析并格式化 JSON
@@ -584,7 +709,7 @@ function showToolResult(toolName, resultJson) {
   resultEl.appendChild(headerEl);
   resultEl.appendChild(contentEl);
   toolResultContainer.appendChild(resultEl);
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
 // 格式化工具结果为易读格式
@@ -635,13 +760,14 @@ function createWorkflowDisplay() {
   return container;
 }
 
-function handleTaskStatusEvent(data) {
+function handleTaskStatusEvent(data, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   console.log('[工作流] 任务状态:', data);
 
   // 获取或创建工作流显示区域
   if (!workflowDisplayEl) {
     workflowDisplayEl = createWorkflowDisplay();
-    messagesEl.appendChild(workflowDisplayEl);
+    msgContainer.appendChild(workflowDisplayEl);
   }
 
   const stepsList = workflowDisplayEl.querySelector('.workflow-steps-list');
@@ -685,35 +811,58 @@ function handleTaskStatusEvent(data) {
   }
 }
 
-function handleWorkflowStepEvent(data) {
+function handleWorkflowStepEvent(data, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   console.log('[工作流] 步骤:', data);
+  console.log('[工作流] 步骤标签:', data.step, '内容:', data.content?.substring(0, 80));
 
+  // 获取或创建工作流显示区域
   if (!workflowDisplayEl) {
     workflowDisplayEl = createWorkflowDisplay();
-    messagesEl.appendChild(workflowDisplayEl);
+    msgContainer.appendChild(workflowDisplayEl);
   }
 
   const streamsDiv = workflowDisplayEl.querySelector('.workflow-streams');
+  const header = workflowDisplayEl.querySelector('.workflow-header');
+
+  // 更新工作流标题
+  if (data.step && data.step !== '系统' && data.step !== '状态') {
+    header.querySelector('.workflow-title').textContent = `执行: ${data.step}`;
+  }
 
   // 如果有步骤标签，显示步骤信息
-  if (data.step) {
+  if (data.step && data.content) {
     const stepEl = document.createElement('div');
     stepEl.className = 'workflow-step-stream';
+
+    // 根据内容类型选择不同样式
+    const isError = data.content.includes('❌') || data.content.includes('错误');
+    const isSuccess = data.content.includes('✅') || data.content.includes('成功');
+    const isLoop = data.content.includes('🔄') || data.content.includes('循环');
+
+    let icon = '🔧';
+    if (isError) icon = '❌';
+    else if (isSuccess) icon = '✅';
+    else if (isLoop) icon = '🔄';
+
     stepEl.innerHTML = `
-      <div class="step-label">🔧 ${data.step}</div>
-      <div class="step-content">${data.content || ''}</div>
+      <div class="step-label">${icon} ${data.step}</div>
+      <div class="step-content">${data.content}</div>
     `;
     streamsDiv.appendChild(stepEl);
-    messagesEl.scrollTop = messagesEl.scrollHeight;
+
+    // 自动滚动
+    msgContainer.scrollTop = msgContainer.scrollHeight;
   }
 }
 
-function handleWorkflowLoopEvent(data) {
+function handleWorkflowLoopEvent(data, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   console.log('[工作流] 循环:', data);
 
   if (!workflowDisplayEl) {
     workflowDisplayEl = createWorkflowDisplay();
-    messagesEl.appendChild(workflowDisplayEl);
+    msgContainer.appendChild(workflowDisplayEl);
   }
 
   const loopCount = workflowDisplayEl.querySelector('.workflow-loop-count');
@@ -738,16 +887,17 @@ function handleWorkflowLoopEvent(data) {
       <div class="loop-content">${data.content}</div>
     `;
     streamsDiv.appendChild(loopEl);
-    messagesEl.scrollTop = messagesEl.scrollHeight;
+    msgContainer.scrollTop = msgContainer.scrollHeight;
   }
 }
 
 // 用户命令可视化 - 当用户发送命令时调用
 let userCommandDisplayEl = null;
 
-function showUserCommand(command) {
+function showUserCommand(command, container) {
+  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   // 先移除之前的消息中的 user bubble（如果有重复的话）
-  const existingUserBubbles = messagesEl.querySelectorAll('.message-user');
+  const existingUserBubbles = msgContainer.querySelectorAll('.message-user');
   existingUserBubbles.forEach(el => el.remove());
 
   // 移除之前的命令显示
@@ -769,100 +919,110 @@ function showUserCommand(command) {
 
   // 在工作流显示之前插入
   if (workflowDisplayEl) {
-    messagesEl.insertBefore(userCommandDisplayEl, workflowDisplayEl);
+    msgContainer.insertBefore(userCommandDisplayEl, workflowDisplayEl);
   } else {
-    messagesEl.appendChild(userCommandDisplayEl);
+    msgContainer.appendChild(userCommandDisplayEl);
   }
 
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
-function connect() {
-  // 清除旧的重连定时器
-  if (reconnectTimer) {
-    clearTimeout(reconnectTimer);
-    reconnectTimer = null;
+function connect(channelId) {
+  const targetChannelId = channelId || currentChannelId;
+  if (!targetChannelId) return;
+
+  // 清除该频道的重连定时器
+  if (reconnectTimers.has(targetChannelId)) {
+    clearTimeout(reconnectTimers.get(targetChannelId));
+    reconnectTimers.delete(targetChannelId);
   }
 
-  // 关闭已有连接
-  if (eventSource) {
-    eventSource.close();
-    eventSource = null;
+  // 关闭该频道的旧连接
+  if (eventSources.has(targetChannelId)) {
+    eventSources.get(targetChannelId).close();
+    eventSources.delete(targetChannelId);
   }
 
-  const sseUrl = currentChannelId ? `/events?channelId=${encodeURIComponent(currentChannelId)}` : '/events';
+  const sseUrl = `/events?channelId=${encodeURIComponent(targetChannelId)}`;
   console.log('[connect] 创建 SSE 连接:', sseUrl);
 
-  eventSource = new EventSource(sseUrl);
+  const eventSource = new EventSource(sseUrl);
+  eventSources.set(targetChannelId, eventSource);
+
+  if (!reconnectAttempts.has(targetChannelId)) {
+    reconnectAttempts.set(targetChannelId, 0);
+  }
 
   eventSource.onopen = () => {
-    console.log('[SSE] 已连接');
-    reconnectAttempts = 0;
+    console.log('[SSE] 已连接 channelId:', targetChannelId);
+    reconnectAttempts.set(targetChannelId, 0);
   };
 
   eventSource.onerror = () => {
-    console.error('[SSE] 连接错误');
+    console.error('[SSE] 连接错误 channelId:', targetChannelId);
     eventSource.close();
-    eventSource = null;
-    reconnectAttempts++;
-    // 清除旧的重连定时器
-    if (reconnectTimer) clearTimeout(reconnectTimer);
-    reconnectTimer = setTimeout(connect, Math.min(5000 * reconnectAttempts, 30000));
+    eventSources.delete(targetChannelId);
+    const attempts = (reconnectAttempts.get(targetChannelId) || 0) + 1;
+    reconnectAttempts.set(targetChannelId, attempts);
+    const timer = setTimeout(() => connect(targetChannelId), Math.min(5000 * attempts, 30000));
+    reconnectTimers.set(targetChannelId, timer);
   };
 
   eventSource.onmessage = (e) => {
     try {
       const data = JSON.parse(e.data);
-      console.log('[SSE] 收到消息:', data.type, 'channelId:', data.channelId);
+      const msgChannelId = data.channelId || targetChannelId;
+      console.log('[SSE] 收到消息:', data.type, 'channelId:', msgChannelId);
 
-      // 只处理当前频道的消息
-      if (data.channelId && data.channelId !== currentChannelId) {
-        console.log('[SSE] 忽略非当前频道消息');
+      // 路由消息到正确的频道（即使该频道不是当前视图）
+      if (msgChannelId !== targetChannelId) {
+        console.log('[SSE] 忽略非目标频道消息');
         return;
       }
 
+      // 使用正确的消息容器
+      const container = messagesContainers.get(msgChannelId) || messagesEl;
+
       if (data.type === 'user') {
-        showUserCommand(data.content); // 用户命令可视化（已包含 message-user）
-        // 不再调用 addMessage，避免重复
+        showUserCommand(data.content, container);
       } else if (data.type === 'ai') {
-          addMessage(data.content, 'ai');
-        } else if (data.type === 'stream') {
-          handleStreamEvent(data);
-        } else if (data.type === 'regenerating') {
-          // 开始重新生成，清除最后一个 AI 消息
-          const messages = messagesEl.querySelectorAll('.message-ai');
-          if (messages.length > 0) {
-            const lastAiMsg = messages[messages.length - 1];
-            lastAiMsg.remove();
-          }
-          showTyping();
-        } else if (data.type === 'status') {
-          handleStatusEvent(data);
-        } else if (data.type === 'done') {
-          hideTyping();
-        } else if (data.type === 'renamed') {
-          const channel = channels.find(c => c.id === data.channelId);
-          if (channel) {
-            channel.name = data.newName;
-            renderChannels();
-            if (currentChannelId === data.channelId && channelNameEl) {
-              channelNameEl.textContent = data.newName;
-            }
+        addMessage(data.content, 'ai', true, container);
+      } else if (data.type === 'stream') {
+        handleStreamEvent(data, container);
+      } else if (data.type === 'regenerating') {
+        const messages = container.querySelectorAll('.message-ai');
+        if (messages.length > 0) {
+          const lastAiMsg = messages[messages.length - 1];
+          lastAiMsg.remove();
+        }
+        showTyping(container);
+      } else if (data.type === 'status') {
+        handleStatusEvent(data, container);
+      } else if (data.type === 'done') {
+        hideTyping();
+      } else if (data.type === 'renamed') {
+        const channel = channels.find(c => c.id === data.channelId);
+        if (channel) {
+          channel.name = data.newName;
+          renderChannels();
+          if (currentChannelId === data.channelId && channelNameEl) {
+            channelNameEl.textContent = data.newName;
           }
-        } else if (data.type === 'error') {
-          hideTyping();
-          addMessage('错误: ' + data.content, 'ai');
-        } else if (data.type === 'task_status') {
-          handleTaskStatusEvent(data);
-        } else if (data.type === 'workflow_step') {
-          handleWorkflowStepEvent(data);
-        } else if (data.type === 'workflow_loop') {
-          handleWorkflowLoopEvent(data);
         }
-      } catch (parseErr) {
-        console.error('[SSE] 解析错误', parseErr);
+      } else if (data.type === 'error') {
+        hideTyping();
+        addMessage('错误: ' + data.content, 'ai', true, container);
+      } else if (data.type === 'task_status') {
+        handleTaskStatusEvent(data, container);
+      } else if (data.type === 'workflow_step') {
+        handleWorkflowStepEvent(data, container);
+      } else if (data.type === 'workflow_loop') {
+        handleWorkflowLoopEvent(data, container);
       }
-    };
+    } catch (parseErr) {
+      console.error('[SSE] 解析错误', parseErr);
+    }
+  };
 }
 
 async function sendMessage() {
@@ -965,6 +1125,12 @@ if (newChannelBtn) {
   });
 }
 
+if (newSessionBtn) {
+  newSessionBtn.addEventListener('click', () => {
+    createNewSession();
+  });
+}
+
 if (newChannelInput) {
   newChannelInput.addEventListener('keydown', (e) => {
     if (e.key === 'Enter') {