diff --git a/docs/changelog/update.md b/docs/changelog/update.md
index 94a813c9..c3b9efdb 100644
--- a/docs/changelog/update.md
+++ b/docs/changelog/update.md
@@ -28,6 +28,7 @@
 
 - [ ] 使用其他的聊天记录管理方法（现在是基于 LangGraph 的 Memory 实现的）
 - [ ] 添加测试脚本，覆盖最常见的功能
+- [ ] 添加数据库迁移的脚本
 - [ ] 封装现有工具为 mcp（stdio）调用
 - [ ] 支持额外 mcp 配置（代码端）
 - [ ] 添加用户日志与用户反馈模块，可以在 AgentView 中查看信息
diff --git a/web/src/apis/base.js b/web/src/apis/base.js
index 81732927..16f3d178 100644
--- a/web/src/apis/base.js
+++ b/web/src/apis/base.js
@@ -181,7 +181,7 @@ export function apiSuperAdminPut(url, data = {}, options = {}) {
  * @param {boolean} requiresAuth - 是否需要认证
  * @returns {Promise} - 请求结果
  */
-export function apiDelete(url, options = {}, requiresAuth = false) {
+export function apiDelete(url, options = {}, requiresAuth = true) {
   return apiRequest(url, { method: 'DELETE', ...options }, requiresAuth)
 }
 
diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index 11b11bde..e2153af4 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -41,6 +41,8 @@
 
 
   --main-color: #016179;
+  /* 鲜艳一点的 */
+  --main-bright: #0188a6;
   --secondry-color: #4e616d;
   --error-color: #ba1a1a;
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index c60a6f0d..104f46d9 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -33,11 +33,11 @@
             <MessageSquarePlus size="20" color="var(--gray-800)"/> <span class="text" :class="{'hide-text': isMediumContainer}">新对话</span>
           </div>
         </div>
-        <div class="header__center" @mouseenter="showRenameButton = true" @mouseleave="showRenameButton = false">
+        <div class="header__center" @mouseenter="uiState.showRenameButton = true" @mouseleave="uiState.showRenameButton = false">
           <div @click="console.log(agentStore.currentThread)" class="center-title">
             {{ agentStore.currentThread?.title }}
           </div>
-          <div class="rename-button" v-if="currentChatId" :class="{ 'visible': showRenameButton }" @click="handleRenameChat">
+          <div class="rename-button" v-if="currentChatId" :class="{ 'visible': uiState.showRenameButton }" @click="handleRenameChat">
             <EditOutlined style="font-size: 14px; color: var(--gray-600);"/>
           </div>
           <slot name="header-center"></slot>
@@ -59,15 +59,15 @@
         <span>正在加载历史记录...</span>
       </div>
 
-      <div v-else-if="convs.length === 0 && !onGoingConv.messages.length" class="chat-examples">
+      <div v-else-if="!conversations.length" class="chat-examples">
         <h1>{{ currentAgent ? currentAgent.name : '请选择一个智能体开始对话' }}</h1>
         <p>{{ currentAgent ? currentAgent.description : '不同的智能体有不同的专长和能力' }}</p>
         <div class="inputer-init">
           <MessageInputComponent
             v-model="userInput"
-            :is-loading="state.isProcessingRequest"
+            :is-loading="isProcessing"
             :disabled="!currentAgent"
-            :send-button-disabled="!userInput || !currentAgent || state.isProcessingRequest"
+            :send-button-disabled="!userInput || !currentAgent || isProcessing"
             :placeholder="'输入问题...'"
             @send="handleSendMessage"
             @keydown="handleKeyDown"
@@ -75,12 +75,12 @@
         </div>
       </div>
       <div class="chat-box" ref="messagesContainer">
-        <div class="conv-box" v-for="(conv, index) in convs" :key="index">
+        <div class="conv-box" v-for="(conv, index) in conversations" :key="index">
           <AgentMessageComponent
-            v-for="(message, index) in conv.messages"
+            v-for="(message, msgIndex) in conv.messages"
             :message="message"
-            :key="index"
-            :is-processing="state.isProcessingRequest"
+            :key="msgIndex"
+            :is-processing="isProcessing && conv.status === 'streaming' && msgIndex === conv.messages.length - 1"
             :debug-mode="state.debug_mode"
             :show-refs="showMsgRefs(message)"
             @retry="retryMessage(message)"
@@ -88,27 +88,15 @@
           </AgentMessageComponent>
           <!-- 显示对话最后一个消息使用的模型 -->
           <RefsComponent
-            v-if="getLastMessage(conv)"
+            v-if="getLastMessage(conv) && conv.status !== 'streaming'"
             :message="getLastMessage(conv)"
             :show-refs="['model', 'copy']"
             :is-latest-message="false"
           />
         </div>
-        <div class="conv-box" v-if="onGoingConv.messages.length > 0">
-          <AgentMessageComponent
-            v-for="(message, index) in onGoingConv.messages"
-            :message="message"
-            :key="index"
-            :is-processing="state.isProcessingRequest"
-            :debug-mode="state.debug_mode"
-            :show-refs="showMsgRefs(message)"
-            @retry="retryMessage(message)"
-          >
-          </AgentMessageComponent>
-        </div>
 
         <!-- 生成中的加载状态 -->
-        <div class="generating-status" v-if="state.isProcessingRequest && !state.waitingServerResponse">
+        <div class="generating-status" v-if="isProcessing && conversations.length > 0">
           <div class="generating-indicator">
             <div class="loading-dots">
               <div></div>
@@ -120,18 +108,18 @@
         </div>
       </div>
       <div class="bottom">
-        <div class="message-input-wrapper" v-if="convs.length > 0 || onGoingConv.messages.length > 0">
+        <div class="message-input-wrapper" v-if="conversations.length > 0">
           <MessageInputComponent
             v-model="userInput"
-            :is-loading="state.isProcessingRequest"
+            :is-loading="isProcessing"
             :disabled="!currentAgent"
-            :send-button-disabled="!userInput || !currentAgent || state.isProcessingRequest"
+            :send-button-disabled="!userInput || !currentAgent || isProcessing"
             :placeholder="'输入问题...'"
             @send="handleSendMessage"
             @keydown="handleKeyDown"
           />
           <div class="bottom-actions">
-            <p class="note" @click="getAgentHistory">请注意辨别内容的可靠性</p>
+            <p class="note">请注意辨别内容的可靠性</p>
           </div>
         </div>
       </div>
@@ -140,7 +128,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick, computed, onUnmounted, toRaw, h } from 'vue';
+import { ref, reactive, onMounted, watch, nextTick, computed, onUnmounted, h } from 'vue';
 import { ShareAltOutlined, LoadingOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { message, Modal } from 'ant-design-vue';
 import MessageInputComponent from '@/components/MessageInputComponent.vue'
@@ -148,281 +136,151 @@ import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
 import { PanelLeftOpen, MessageSquarePlus } from 'lucide-vue-next';
+import { ChatExporter } from '@/utils/chatExporter';
+import { ErrorHandler, handleChatError, handleValidationError } from '@/utils/errorHandler';
+import { ScrollController } from '@/utils/scrollController';
+import { AgentValidator } from '@/utils/agentValidator';
 import { useAgentStore } from '@/stores/agent';
 import { storeToRefs } from 'pinia';
 
-// 新增props属性，允许父组件传入agentId
+// ==================== PROPS & EMITS ====================
 const props = defineProps({
-  state: {
-    type: Object,
-    default: () => ({})
-  },
-  singleMode: {
-    type: Boolean,
-    default: true
-  }
+  state: { type: Object, default: () => ({}) },
+  singleMode: { type: Boolean, default: true }
 });
-
 const emit = defineEmits(['open-config', 'open-agent-modal']);
 
-// ==================== Store 管理 ====================
+// ==================== STORE MANAGEMENT ====================
 const agentStore = useAgentStore();
 const {
   agents,
   currentAgentThreads,
   currentThread,
-  currentThreadMessages,
   isLoadingThreads,
   isLoadingMessages,
-  selectedAgent,
-  configSchema
+  conversations, // New getter from store
+  isStreaming,   // New state from store
 } = storeToRefs(agentStore);
 
-// ==================== 状态管理 ====================
-
-// UI状态
+// ==================== LOCAL UI STATE ====================
+const userInput = ref('');
 const state = reactive({
   ...props.state,
   debug_mode: computed(() => props.state.debug_mode ?? false),
   isSidebarOpen: localStorage.getItem('chat_sidebar_open', 'true') === 'true',
-  waitingServerResponse: false,
-  isProcessingRequest: false,
   creatingNewChat: false,
   isInitialRender: true
 });
 
-// 重命名按钮显示状态
-const showRenameButton = ref(false);
+const uiState = reactive({
+  showRenameButton: false,
+  containerWidth: 0,
+});
 
-// 容器宽度检测
+// ==================== COMPUTED PROPERTIES ====================
+const currentAgent = computed(() => agentStore.selectedAgent);
+const currentChatId = computed(() => agentStore.currentThreadId);
+const chatsList = computed(() => currentAgentThreads.value || []);
+const isProcessing = computed(() => isStreaming.value || state.creatingNewChat);
+const isSmallContainer = computed(() => uiState.containerWidth <= 520);
+const isMediumContainer = computed(() => uiState.containerWidth <= 768);
+
+// ==================== SCROLL & RESIZE HANDLING ====================
 const chatContainerRef = ref(null);
-const containerWidth = ref(0);
-const isSmallContainer = computed(() => containerWidth.value <= 520);
-const isMediumContainer = computed(() => containerWidth.value <= 768);
+const scrollController = new ScrollController('.chat');
 let resizeObserver = null;
 
-// 滚动控制相关
-const shouldAutoScroll = ref(true);  // 是否应该自动滚动
-const isUserScrolling = ref(false);  // 用户是否正在滚动
-let scrollTimer = null;
-
-// 监听容器大小变化和滚动事件
 onMounted(() => {
-  // 初始计算容器宽度
   nextTick(() => {
     if (chatContainerRef.value) {
-      // 初始时测量容器宽度
-      containerWidth.value = chatContainerRef.value.offsetWidth;
-
+      uiState.containerWidth = chatContainerRef.value.offsetWidth;
       resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
-          containerWidth.value = entry.contentRect.width;
+          uiState.containerWidth = entry.contentRect.width;
         }
       });
-
       resizeObserver.observe(chatContainerRef.value);
     }
-
-    // 添加滚动监听
     const chatContainer = document.querySelector('.chat');
     if (chatContainer) {
-      chatContainer.addEventListener('scroll', handleScroll, { passive: true });
+      chatContainer.addEventListener('scroll', scrollController.handleScroll, { passive: true });
     }
   });
-
-  // 延迟移除初始渲染标记，防止切换动画
-  setTimeout(() => {
-  state.isInitialRender = false;
-  }, 300);
+  setTimeout(() => { state.isInitialRender = false; }, 300);
 });
 
 onUnmounted(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-  }
-
-  // 清理滚动监听器
-  const chatContainer = document.querySelector('.chat');
-  if (chatContainer) {
-    chatContainer.removeEventListener('scroll', handleScroll);
-  }
-
-  if (scrollTimer) {
-    clearTimeout(scrollTimer);
-  }
+  if (resizeObserver) resizeObserver.disconnect();
+  scrollController.cleanup();
 });
 
-const showMsgRefs = (msg) => {
-  if (msg.isLast) {
-    return ['copy']
-  }
-  return false
-}
+// ==================== CHAT ACTIONS (DELEGATE TO STORE) ====================
 
-// 获取对话的最后一个消息
-const getLastMessage = (conv) => {
-  if (!conv || !conv.messages || conv.messages.length === 0) {
-    return null;
-  }
-  // 查找最后一个AI消息
-  for (let i = conv.messages.length - 1; i >= 0; i--) {
-    const message = conv.messages[i];
-    if (message.type === 'ai') {
-      return message;
-    }
-  }
-  return null;
-}
-
-// DOM引用
-const messagesContainer = ref(null);
-
-// 数据状态
-const userInput = ref('');             // 用户输入
-
-const convs = ref([]);
-const currentAgent = computed(() => {
-  if (!agentStore.selectedAgentId || !agents.value) return null;
-  return agents.value[agentStore.selectedAgentId];
-});
-
-// 使用 agentStore 的线程相关计算属性
-const currentChatId = computed(() => agentStore.currentThreadId);
-const chatsList = computed(() => currentAgentThreads.value || []);
-
-const onGoingConv = reactive({
-  msgChunks: {},
-  messages: computed(() => {
-    const msgs = Object.values(onGoingConv.msgChunks).map(msgs => {
-      return mergeMessageChunk(msgs)
-    })
-    return msgs.length > 0
-      ? convertToolResultToMessages(msgs).filter(msg => msg.type !== 'tool')
-      : []
-  })
-})
-const lastConv = computed(() => convs.value[convs.value.length - 1]);
-const lastConvMessages = computed(() => lastConv.value.messages[lastConv.value.messages.length - 1]);
-
-// ==================== 工具调用相关 ====================
-
-// 工具调用相关
-const toolCalls = ref([]);             // 工具调用列表
-const currentToolCallId = ref(null);   // 当前工具调用ID
-const currentRunId = ref(null);        // 当前运行ID
-const expandedToolCalls = ref(new Set()); // 展开的工具调用集合
-
-
-// 创建新对话
 const createNewChat = async () => {
-  // 确保有AgentID
-  if (!agentStore.selectedAgentId) {
-    console.warn("未指定AgentID，无法创建对话");
-    return;
-  }
-
-  // 如果当前对话正在创建，则不创建新对话
-  if (state.creatingNewChat || state.isProcessingRequest) {
-    console.warn("正在创建新对话或处理请求，无法创建新对话");
-    return;
-  }
-
-  if (currentChatId.value && convs.value.length === 0) {
-    return;
-  }
+  if (!AgentValidator.validateAgentId(agentStore.selectedAgentId, '创建对话') || isProcessing.value) return;
+  if (currentChatId.value && conversations.value.length === 0) return;
 
+  state.creatingNewChat = true;
   try {
-    // 使用 agentStore 创建新对话
-    state.creatingNewChat = true;
-    const thread = await agentStore.createThread(agentStore.selectedAgentId, '新的对话');
-    if (!thread || !thread.id) {
-      throw new Error('创建对话失败');
-    }
-
-    // 重置线程状态
-    resetThread();
+    await agentStore.createThread(agentStore.selectedAgentId, '新的对话');
   } catch (error) {
-    console.error('创建对话失败:', error);
-    message.error('创建对话失败');
+    handleChatError(error, 'create');
   } finally {
     state.creatingNewChat = false;
   }
 };
 
-// 选择已有对话
 const selectChat = async (chatId) => {
-  // 确保有AgentID
-  if (!agentStore.selectedAgentId) {
-    console.warn("未指定AgentID，无法选择对话");
-    return;
-  }
-
-  console.log("选择对话:", chatId);
-
-  // 使用 agentStore 选择线程
+  if (!AgentValidator.validateAgentIdWithError(agentStore.selectedAgentId, '选择对话', handleValidationError)) return;
   agentStore.selectThread(chatId);
-  await getAgentHistory();
+  await agentStore.fetchThreadMessages(chatId);
 };
 
-// 删除对话
 const deleteChat = async (chatId) => {
-  if (!agentStore.selectedAgentId) {
-    console.warn("未指定AgentID，无法删除对话");
-    return;
-  }
-
+  if (!AgentValidator.validateAgentIdWithError(agentStore.selectedAgentId, '删除对话', handleValidationError)) return;
   try {
-    // 使用 agentStore 删除对话
     await agentStore.deleteThread(chatId);
-
-    // 如果删除的是当前对话，重置状态
-    if (chatId === currentChatId.value) {
-      resetThread();
-    }
   } catch (error) {
-    console.error('删除对话失败:', error);
-    message.error('删除对话失败');
+    handleChatError(error, 'delete');
   }
 };
 
-// 重命名对话
 const renameChat = async (data) => {
   let { chatId, title } = data;
-
-  if (!chatId || !title) {
-    console.warn("未指定对话ID或标题，无法重命名对话");
-    return;
-  }
-
-  // 确保有AgentID
-  if (!agentStore.selectedAgentId) {
-    console.warn("未指定AgentID，无法重命名对话");
-    return;
-  }
-
-  // 最长 30个字符，自动截断
-  if (title.length > 30) {
-    title = title.slice(0, 30);
-  }
-
+  if (!AgentValidator.validateRenameOperation(chatId, title, agentStore.selectedAgentId, handleValidationError)) return;
+  if (title.length > 30) title = title.slice(0, 30);
   try {
-    // 使用 agentStore 更新对话
     await agentStore.updateThread(chatId, title);
   } catch (error) {
-    console.error('重命名对话失败:', error);
-    message.error('重命名对话失败');
+    handleChatError(error, 'rename');
   }
 };
 
-// 处理重命名对话点击事件
+const handleSendMessage = async () => {
+  const text = userInput.value.trim();
+  if (!text || !currentAgent.value || isProcessing.value) return;
+
+  userInput.value = '';
+  // Enable auto scroll before sending message to ensure proper scrolling during streaming
+  scrollController.enableAutoScroll();
+  await nextTick();
+  await scrollController.scrollToBottom(true);
+
+  try {
+    await agentStore.sendMessage(text);
+  } catch (error) {
+    // Error is already handled in the store, but you could add UI feedback here if needed
+  }
+};
+
+// ==================== UI HANDLERS ====================
+
 const handleRenameChat = () => {
   if (!currentChatId.value || !currentThread.value) {
-    message.warning('请先选择对话');
+    handleValidationError('请先选择对话');
     return;
   }
-
   let newTitle = currentThread.value.title;
-
   Modal.confirm({
     title: '重命名对话',
     content: h('div', { style: { marginTop: '12px' } }, [
@@ -434,929 +292,98 @@ const handleRenameChat = () => {
     ]),
     okText: '确认',
     cancelText: '取消',
-    onOk: () => {
-      if (!newTitle.trim()) {
-        message.warning('标题不能为空');
-        return Promise.reject();
-      }
-      renameChat({ chatId: currentChatId.value, title: newTitle });
-    },
-    onCancel: () => {}
+    onOk: () => renameChat({ chatId: currentChatId.value, title: newTitle }),
   });
 };
 
-// ==================== 状态管理函数 ====================
-
-// 重试消息
-const retryMessage = (msg) => {
-  message.info("重试消息开发中");
-  return
+const handleKeyDown = (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    handleSendMessage();
+  }
 };
 
-// 分享对话
-const shareChat = () => {
-  if (!currentChatId.value || !currentAgent.value) {
-    message.warning('请先选择对话');
-    return;
-  }
-
+const shareChat = async () => {
+  if (!AgentValidator.validateShareOperation(currentChatId.value, currentAgent.value, handleValidationError)) return;
   try {
-    // 生成HTML内容
-    const htmlContent = generateChatHTML();
-
-    // 创建下载链接
-    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-
-    // 生成文件名
-    const chatTitle = currentThread.value?.title || '新对话';
-    const timestamp = new Date().toLocaleString('zh-CN').replace(/[:/\s]/g, '-');
-    const filename = `${chatTitle}-${timestamp}.html`;
-
-    link.href = url;
-    link.download = filename;
-    link.style.display = 'none';
-
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-
-    // 清理URL对象
-    URL.revokeObjectURL(url);
-
-    message.success('对话已导出为HTML文件');
-  } catch (error) {
-    console.error('导出对话失败:', error);
-    message.error('导出对话失败');
-  }
-};
-
-// 生成对话的HTML内容
-const generateChatHTML = () => {
-  const chatTitle = agentStore.currentThread.value?.title || '新对话';
-  const agentName = currentAgent.value?.name || '智能助手';
-  const agentDescription = currentAgent.value?.description || '';
-  const exportTime = new Date().toLocaleString('zh-CN');
-
-  // 获取所有对话消息
-  const allMessages = [];
-
-  // 添加历史对话消息
-  convs.value.forEach(conv => {
-    conv.messages.forEach(msg => {
-      allMessages.push(msg);
+    const result = await ChatExporter.exportToHTML({
+      chatTitle: agentStore.currentThread?.title || '新对话',
+      agentName: currentAgent.value?.name || '智能助手',
+      agentDescription: currentAgent.value?.description || '',
+      messages: conversations.value, // Use the getter from store
+      onGoingMessages: [] // This is now part of conversations
     });
-  });
-
-  // 添加当前进行中的对话消息
-  onGoingConv.messages.forEach(msg => {
-    allMessages.push(msg);
-  });
-
-  if (allMessages.length === 0) {
-    throw new Error('没有可导出的对话内容');
-  }
-
-  // 生成HTML内容
-  let messagesHTML = '';
-
-  allMessages.forEach((msg, index) => {
-    const isUser = msg.type === 'human';
-    const avatar = isUser ? '👤' : '🤖';
-    const senderName = isUser ? '用户' : agentName;
-    const messageClass = isUser ? 'user-message' : 'ai-message';
-
-    // 处理消息内容
-    let content = msg.content.trim() || '';
-
-    // 处理换行
-    content = content.replace(/\n/g, '<br>');
-
-    // 处理思考过程
-    let reasoningHTML = '';
-    if (!isUser && (msg.additional_kwargs?.reasoning_content || msg.reasoning_content)) {
-      const reasoningContent = (msg.additional_kwargs?.reasoning_content || msg.reasoning_content).trim().replace(/\n/g, '<br>');
-      reasoningHTML = `
-        <div class="reasoning-section">
-          <div class="reasoning-header">💭 思考过程</div>
-          <div class="reasoning-content">${reasoningContent}</div>
-        </div>
-      `;
-    }
-
-    // 处理工具调用
-    let toolCallsHTML = '';
-    if (msg.tool_calls && msg.tool_calls.length > 0) {
-      toolCallsHTML = '<div class="tool-calls">';
-      msg.tool_calls.forEach(toolCall => {
-        console.log(toolCall)
-        const args = toolCall.function?.arguments ? JSON.parse(toolCall.function?.arguments) : toolCall?.args || '{}'
-        toolCallsHTML += `
-          <div class="tool-call">
-            <div class="tool-call-header">
-              <strong>🔧 ${toolCall.function?.name || '工具调用'}</strong>
-            </div>
-            <div class="tool-call-args">
-              <pre>${JSON.stringify(args, null, 2)}</pre>
-            </div>
-            ${toolCall.tool_call_result ? `
-              <div class="tool-call-result">
-                <div class="tool-result-header">执行结果:</div>
-                <div class="tool-result-content">${toolCall.tool_call_result.content || ''}</div>
-              </div>
-            ` : ''}
-          </div>
-        `;
-      });
-      toolCallsHTML += '</div>';
-    }
-
-    messagesHTML += `
-      <div class="message ${messageClass}">
-        <div class="message-header">
-          <span class="avatar">${avatar}</span>
-          <span class="sender">${senderName}</span>
-          <span class="time">${new Date().toLocaleString('zh-CN')}</span>
-        </div>
-        <div class="message-content">
-          ${reasoningHTML}
-          ${content}
-          ${toolCallsHTML}
-        </div>
-      </div>
-    `;
-  });
-
-  // 完整的HTML模板
-  return `
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${chatTitle} - 对话导出</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            background-color: white;
-            margin: 0;
-            padding: 0;
-        }
-
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-            background: white;
-            min-height: 100vh;
-        }
-
-        .header {
-            background: #f8f9fa;
-            border-bottom: 2px solid #e9ecef;
-            padding: 24px;
-            text-align: center;
-        }
-
-        .header h1 {
-            font-size: 24px;
-            margin-bottom: 8px;
-            color: #212529;
-            font-weight: 600;
-        }
-
-        .header .agent-info {
-            font-size: 14px;
-            color: #6c757d;
-            margin-bottom: 12px;
-        }
-
-        .header .export-info {
-            font-size: 12px;
-            color: #868e96;
-            padding-top: 12px;
-            border-top: 1px solid #dee2e6;
-        }
-
-        .messages {
-            padding: 32px 48px;
-            max-width: 100%;
-        }
-
-        .message {
-            margin-bottom: 32px;
-            max-width: 100%;
-        }
-
-        .message:last-child {
-            margin-bottom: 0;
-        }
-
-        .message-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 12px;
-            font-size: 14px;
-            color: #666;
-        }
-
-        .avatar {
-            font-size: 16px;
-            margin-right: 8px;
-        }
-
-        .sender {
-            font-weight: 600;
-            margin-right: 12px;
-        }
-
-        .time {
-            font-size: 12px;
-            color: #999;
-        }
-
-        .message-content {
-            padding: 16px 20px;
-            border-radius: 8px;
-            width: 100%;
-            max-width: 100%;
-        }
-
-        .user-message .message-content {
-            color: white;
-            background: #1C6586;
-            border: 1px solid #1C6586;
-            width: fit-content;
-        }
-
-        .ai-message .message-content {
-            background: white;
-            border: 1px solid #e9ecef;
-        }
-
-        .reasoning-section {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 6px;
-            padding: 12px;
-            margin-bottom: 16px;
-        }
-
-        .reasoning-header {
-            font-size: 13px;
-            font-weight: 600;
-            color: #495057;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-        }
-
-        .reasoning-content {
-            font-size: 14px;
-            color: #6c757d;
-            font-style: italic;
-            line-height: 1.5;
-        }
-
-        .tool-calls {
-            margin-top: 16px;
-            padding-top: 16px;
-            border-top: 1px solid #e9ecef;
-        }
-
-        .tool-call {
-            background: #fff8e1;
-            border: 1px solid #ffe082;
-            border-radius: 6px;
-            padding: 12px;
-            margin-bottom: 12px;
-        }
-
-        .tool-call:last-child {
-            margin-bottom: 0;
-        }
-
-        .tool-call-header {
-            font-size: 14px;
-            color: #f57f17;
-            margin-bottom: 8px;
-            font-weight: 600;
-        }
-
-        .tool-call-args {
-            background: rgba(0,0,0,0.04);
-            border-radius: 4px;
-            padding: 8px;
-            margin-bottom: 8px;
-        }
-
-        .tool-call-args pre {
-            font-size: 12px;
-            color: #666;
-            white-space: pre-wrap;
-            word-break: break-all;
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-        }
-
-        .tool-call-result {
-            background: #e8f5e8;
-            border: 1px solid #c8e6c9;
-            border-radius: 4px;
-            padding: 8px;
-            word-break: break-all;
-        }
-
-        .tool-result-header {
-            font-size: 12px;
-            color: #2e7d32;
-            font-weight: 600;
-            margin-bottom: 4px;
-        }
-
-        .tool-result-content {
-            font-size: 13px;
-            color: #388e3c;
-        }
-
-        .footer {
-            background: #f8f9fa;
-            text-align: center;
-            padding: 16px;
-            font-size: 12px;
-            color: #666;
-            border-top: 1px solid #e9ecef;
-        }
-
-        .footer a {
-            color: #007bff;
-            text-decoration: none;
-        }
-
-        @media (max-width: 768px) {
-            .messages {
-                padding: 24px 16px;
-            }
-
-            .header {
-                padding: 16px;
-            }
-
-            .user-message .message-content {
-                margin-left: 10%;
-            }
-
-            .ai-message .message-content {
-                margin-right: 10%;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .user-message .message-content,
-            .ai-message .message-content {
-                margin-left: 0;
-                margin-right: 0;
-            }
-        }
-
-        @media print {
-            body {
-                background: white;
-                margin: 0;
-                padding: 0;
-            }
-
-            .container {
-                box-shadow: none;
-                border-radius: 0;
-                max-width: 100%;
-            }
-
-            .header {
-                background: #f8f9fa !important;
-                -webkit-print-color-adjust: exact;
-            }
-
-            .messages {
-                padding: 20px;
-            }
-
-            .user-message .message-content {
-                background: #e3f2fd !important;
-                -webkit-print-color-adjust: exact;
-            }
-
-            .reasoning-section {
-                background: #f8f9fa !important;
-                -webkit-print-color-adjust: exact;
-            }
-
-            .tool-call {
-                background: #fff8e1 !important;
-                -webkit-print-color-adjust: exact;
-            }
-
-            .tool-call-result {
-                background: #e8f5e8 !important;
-                -webkit-print-color-adjust: exact;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>${chatTitle}</h1>
-            <div class="agent-info">
-                智能体: ${agentName}
-                ${agentDescription ? ` | ${agentDescription}` : ''}
-            </div>
-            <div class="export-info">
-                导出时间: ${exportTime} | 共 ${allMessages.length} 条消息
-            </div>
-        </div>
-
-        <div class="messages">
-            ${messagesHTML}
-        </div>
-
-        <div class="footer">
-            本对话由 Yuxi-Know 智能对话系统导出 | <a href="#">了解更多</a>
-        </div>
-    </div>
-</body>
-</html>
-  `;
-};
-
-// 重置线程
-const resetThread = () => {
-  convs.value = [];
-  toolCalls.value = [];
-  currentToolCallId.value = null;
-  currentRunId.value = null;
-  expandedToolCalls.value.clear();
-};
-
-// ==================== 消息处理 ====================
-
-// 发送消息
-const handleSendMessage = () => {
-  if (!userInput.value || !currentAgent.value || state.isProcessingRequest) return;
-  const tempUserInput = userInput.value;
-  userInput.value = ''; // 立即清空输入框
-  // 确保UI更新后再发送消息
-  nextTick(() => {
-    sendMessageToServer(tempUserInput);
-  });
-};
-
-// 使用文本发送消息
-const sendMessageToServer = async (text) => {
-  if (!text || !currentAgent.value || state.isProcessingRequest) return;
-
-  // 如果是第一条消息，以消息内容重命名对话
-  if (convs.value.length === 0) {
-    renameChat({'chatId': currentChatId.value, 'title': text})
-  }
-
-  // 发送消息时启用自动滚动
-  shouldAutoScroll.value = true;
-  state.isProcessingRequest = true;
-  await scrollToBottom();
-
-  // 设置请求参数
-  const requestData = {
-    query: text.trim(),
-    config: {
-      ...agentStore.agentConfig,
-      thread_id: currentChatId.value
-    },
-    meta: {
-      request_id: currentAgent.value.id + '-' + new Date().getTime()
-    }
-  };
-
-  try {
-    state.waitingServerResponse = true;
-
-    const response = await agentStore.sendMessage(currentAgent.value.id, requestData);
-    if (!response.ok) {
-      throw new Error('请求失败');
-    }
-    await handleStreamResponse(response);
+    message.success(`对话已导出为HTML文件: ${result.filename}`);
   } catch (error) {
-    handleSendMessageToServerError(error)
-  } finally {
-    state.waitingServerResponse = false;
-    state.isProcessingRequest = false;
-    await scrollToBottom();
+    handleChatError(error, 'export');
   }
 };
 
-const handleSendMessageToServerError = (error) => {
-  console.error('发送消息错误:', error);
-  return
-}
-
-// 处理流式响应
-const handleStreamResponse = async (response) => {
-  try {
-    const reader = response.body.getReader();
-    let buffer = '';
-    const decoder = new TextDecoder();
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split('\n');
-      buffer = lines.pop() || ''; // 保留最后一行可能不完整的内容
-
-      for (const line of lines) {
-        if (line.trim()) {
-          try {
-            const data = JSON.parse(line.trim());
-            await processResponseChunk(data);
-          } catch (e) {
-            console.debug('解析JSON出错:', e.message);
-          }
-        }
-      }
-      await scrollToBottom();
-    }
-    // 处理缓冲区中可能剩余的内容
-    if (buffer.trim()) {
-      try {
-        const data = JSON.parse(buffer.trim());
-        await processResponseChunk(data);
-      } catch (e) {
-        console.warn('最终缓冲区内容无法解析:', buffer);
-      }
-    }
-  } catch (error) {
-    handleStreamResponseError(error)
-  } finally {
-    state.isProcessingRequest = false;
-    // await scrollToBottom();
-  }
-};
-
-const handleStreamResponseError = (error) => {
-  console.error('流式处理出错:', error);
-  return
-}
-
-// 处理流数据
-const processResponseChunk = async (data) => {
-  // console.log("处理流数据:", data.msg);
-  // if (data.msg.additional_kwargs?.tool_calls) {
-  //   console.log("tool_calls", data.msg.additional_kwargs.tool_calls);
-  // }
-  if (data.status === 'init') {
-    // 代表服务端收到请求并返回第一个响应
-    state.waitingServerResponse = false;
-    console.log("处理流数据:", data.msg);
-    onGoingConv.msgChunks[data.request_id] = [data.msg];
-
-  } else if (data.status === 'loading') {
-    if (data.msg.id) {
-      if (!onGoingConv.msgChunks[data.msg.id]) {
-        onGoingConv.msgChunks[data.msg.id] = []
-      }
-      onGoingConv.msgChunks[data.msg.id].push(data.msg)
-    }
-  } else if (data.status === 'error') {
-    console.error("流式处理出错:", data.message);
-    message.error(data.message);
-  } else if (data.status === 'finished') {
-    await getAgentHistory();
-  }
-  // await scrollToBottom();
-};
-
-// 初始化所有数据
-const initAll = async () => {
-  try {
-    // 使用 agentStore 的加载状态
-    // 初始化agent store（如果还未初始化）
-    if (!agentStore.agents || Object.keys(agentStore.agents).length === 0) {
-      await agentStore.initialize();
-    }
-    // 加载对话列表以及对话历史
-    setTimeout(async () => {
-      await loadChatsList();
-    }, 100);
-
-  } catch (error) {
-    console.error("组件挂载出错:", error);
-    message.error(`加载数据失败: ${error}`);
-  }
-}
-
-// 从服务器对话列表
-const loadChatsList = async () => {
-  try {
-    if (!agentStore.selectedAgentId) {
-      console.warn("未指定AgentID，无法加载状态");
-      return;
-    }
-
-    // 使用 agentStore 获取对话列表
-    await agentStore.fetchThreads(agentStore.selectedAgentId);
-
-    if (currentAgentThreads.value && currentAgentThreads.value.length > 0) {
-      // 如果有对话，则选择最近的一个
-      await agentStore.selectThread(currentAgentThreads.value[0].id);
-      await getAgentHistory();
-    } else {
-      // 如果没有对话，创建新对话
-      await createNewChat();
-    }
-  } catch (error) {
-    console.error('从服务器加载状态出错:', error);
-  }
-};
-
-// 获取智能体历史记录
-const getAgentHistory = async () => {
-  if (!agentStore.selectedAgentId || !currentChatId.value) {
-    console.warn('未选择智能体或对话ID');
-    return;
-  }
-
-  try {
-    console.debug(`正在获取智能体[${agentStore.selectedAgentId}]的历史记录，对话ID: ${currentChatId.value}`);
-
-
-    // 使用 agentStore 获取线程消息
-    await agentStore.fetchThreadMessages(currentChatId.value);
-    // 从 store 获取消息并转换格式
-    if (currentThreadMessages.value && Array.isArray(currentThreadMessages.value)) {
-      // 将服务器格式的历史记录转换为组件格式
-      onGoingConv.msgChunks = {};
-      convs.value = convertServerHistoryToMessages(currentThreadMessages.value);
-
-      // 加载历史记录后，启用自动滚动并滚动到底部
-      shouldAutoScroll.value = true;
-      await nextTick();
-      await scrollToBottom();
-    } else {
-      message.warning('未找到历史记录或格式不正确');
-    }
-  } catch (error) {
-    console.error('获取智能体历史记录出错:', error);
-    message.error('获取历史记录失败');
-  }
-};
-
-const convertToolResultToMessages = (msgs) => {
-  const toolResponseMap = new Map();
-  for (const item of msgs) {
-    if (item.type === 'tool' && item.tool_call_id) {
-      toolResponseMap.set(item.tool_call_id, item);
-    }
-  }
-
-  const convertedMsgs = msgs.map(item => {
-    if (item.type === 'ai' && item.tool_calls && item.tool_calls.length > 0) {
-      return {
-        ...item,
-        tool_calls: item.tool_calls.map(toolCall => {
-          const toolResponse = toolResponseMap.get(toolCall.id);
-          return {
-            ...toolCall,
-            tool_call_result: toolResponse || null
-          };
-        })
-      };
-    }
-    return item;
-  });
-
-  // console.log("convertedMsgs", convertedMsgs);
-  return convertedMsgs;
-}
-
-const convertServerHistoryToMessages = (serverHistory) => {
-  // 第一步：将所有tool消息与对应的tool call合并
-  const mergedHistory = convertToolResultToMessages(serverHistory);
-
-  // 第三步：按照对话分组
-  const conversations = [];
-  let currentConv = null;
-
-  for (const item of mergedHistory) {
-    if (item.type === 'human') {
-      currentConv = {
-        messages: [item],
-        status: 'loading'
-      };
-      conversations.push(currentConv);
-    } else if (item.type === 'ai' && currentConv) {
-      currentConv.messages.push(item);
-
-      if (item.response_metadata?.finish_reason === 'stop') {
-        item.isLast = true;
-        currentConv.status = 'finished';
-        currentConv = null;
-      }
-    }
-  }
-
-  console.debug("conversations", conversations);
-  return conversations;
-};
-
-// 组件挂载时加载状态
-onMounted(async () => {
-  // 独立页面模式的时候从这里加载，在AgentView页面可能会重复加载
-  await initAll();
-});
-
-
-// 监听agentId变化
-onMounted(() => {
-  watch(() => agentStore.selectedAgentId, async (newAgentId, oldAgentId) => {
-    try {
-      console.debug("智能体ID变化", oldAgentId, "->", newAgentId);
-
-      // 如果变化了，重置会话并加载新数据
-      if (newAgentId !== oldAgentId) {
-        await initAll();
-      }
-    } catch (error) {
-      console.error('智能体ID变化处理出错:', error);
-      isLoading.value = false;
-    }
-  });
-});
-
-// 监听消息变化自动滚动
-watch([convs, () => onGoingConv.messages], () => {
-  scrollToBottom();
-}, { deep: true });
-
-// ==================== 用户交互处理 ====================
-
-// 检查是否在底部（允许一定误差）
-const isAtBottom = () => {
-  const container = document.querySelector('.chat');
-  if (!container) return false;
-
-  const threshold = 100; // 距离底部100px内认为是在底部
-  const isBottom = container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
-  return isBottom;
-};
-
-// 处理滚动事件
-const handleScroll = () => {
-  if (scrollTimer) {
-    clearTimeout(scrollTimer);
-  }
-
-  // 标记用户正在滚动
-  isUserScrolling.value = true;
-
-  // 检查是否在底部
-  const atBottom = isAtBottom();
-  shouldAutoScroll.value = atBottom;
-
-  // 滚动结束后一段时间重置用户滚动状态
-  scrollTimer = setTimeout(() => {
-    isUserScrolling.value = false;
-  }, 150);
-};
-
-// 智能滚动到底部
-const scrollToBottom = async () => {
-  await nextTick();
-
-  // 只有在应该自动滚动时才执行
-  if (!shouldAutoScroll.value) return;
-
-  const container = document.querySelector('.chat');
-  if (!container) return;
-
-  const scrollOptions = { top: container.scrollHeight, behavior: 'smooth' };
-
-  // 多次尝试滚动以确保成功
-  container.scrollTo(scrollOptions);
-  setTimeout(() => {
-    if (shouldAutoScroll.value) {
-      container.scrollTo(scrollOptions);
-    }
-  }, 50);
-  setTimeout(() => {
-    if (shouldAutoScroll.value) {
-      container.scrollTo(scrollOptions);
-    }
-  }, 150);
-  setTimeout(() => {
-    if (shouldAutoScroll.value) {
-      container.scrollTo({ top: container.scrollHeight, behavior: 'auto' });
-    }
-  }, 300);
-};
-
+const retryMessage = (msg) => { /* TODO */ };
 
 const toggleSidebar = () => {
   state.isSidebarOpen = !state.isSidebarOpen;
   localStorage.setItem('chat_sidebar_open', state.isSidebarOpen);
-  console.log("toggleSidebar", state.isSidebarOpen);
-}
+};
 
-const openAgentModal = () => {
-  // 发送事件给父组件，让父组件处理打开智能体选择弹窗的逻辑
-  emit('open-agent-modal');
-}
+const openAgentModal = () => emit('open-agent-modal');
 
-// 处理键盘事件
-const handleKeyDown = (e) => {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    // 只有在满足条件时才发送
-    if (userInput.value.trim() && currentAgent.value && !state.isProcessingRequest) {
-      const tempUserInput = userInput.value;
-      userInput.value = ''; // 立即清空输入框
-      // 使用异步调用确保清空先发生
-      setTimeout(() => {
-        sendMessageToServer(tempUserInput);
-      }, 0);
+// ==================== HELPER FUNCTIONS ====================
+
+const getLastMessage = (conv) => {
+  if (!conv?.messages?.length) return null;
+  for (let i = conv.messages.length - 1; i >= 0; i--) {
+    if (conv.messages[i].type === 'ai') return conv.messages[i];
+  }
+  return null;
+};
+
+const showMsgRefs = (msg) => {
+  if (msg.isLast) return ['copy'];
+  return false;
+};
+
+// ==================== LIFECYCLE & WATCHERS ====================
+
+const initAll = async () => {
+  try {
+    if (!agentStore.isInitialized) {
+      await agentStore.initialize();
     }
+    await loadChatsList();
+  } catch (error) {
+    handleChatError(error, 'load');
   }
 };
 
-const mergeMessageChunk = (chunks) => {
-  if (chunks.length === 0) return null;
+const loadChatsList = async () => {
+  try {
+    if (!AgentValidator.validateLoadOperation(agentStore.selectedAgentId, '加载对话列表')) return;
+    await agentStore.fetchThreads(agentStore.selectedAgentId);
 
-  // 以第一个chunk为基础
-  // for (const c of chunks) {
-  //   if (c.additional_kwargs?.tool_calls) {
-  //     console.warn("chunks", toRaw(c))
-  //     break;
-  //   }
-  // }
-  // 深拷贝第一个chunk作为结果
-  const result = JSON.parse(JSON.stringify(chunks[0]));
-  // console.debug("result", toRaw(result))
-
-  result.content = result.content || '';
-  result.additional_kwargs = result.additional_kwargs || {};
-  result.additional_kwargs.reasoning_content = result.additional_kwargs?.reasoning_content || '';
-
-  // 合并其他chunks
-  for (let i = 1; i < chunks.length; i++) {
-    const chunk = chunks[i];
-
-    // 合并content
-    result.content += chunk.content || '';
-    result.additional_kwargs.reasoning_content += chunk.additional_kwargs?.reasoning_content || '';
-
-    // 如果是当前chunk没有的 key, value, 或者当前 result[key] 为空，则添加到result中
-    for (const key in chunk) {
-      if (!result[key]) {
-        result[key] = JSON.parse(JSON.stringify(chunk[key]));
-      }
-    }
-
-    // 合并tool_calls (如果存在)
-    if (chunk.additional_kwargs?.tool_calls) {
-      if (!result.additional_kwargs) result.additional_kwargs = {};
-      if (!result.additional_kwargs.tool_calls) result.additional_kwargs.tool_calls = [];
-
-      for (const toolCall of chunk.additional_kwargs.tool_calls) {
-        const existingToolCall = result.additional_kwargs.tool_calls.find(
-          t => (t.id === toolCall.id || t.index === toolCall.index)
-        );
-
-        if (existingToolCall) {
-          // 合并相同ID的tool call
-          existingToolCall.function.arguments += toolCall.function.arguments;
-        } else {
-          // 添加新的tool call
-          result.additional_kwargs.tool_calls.push(JSON.parse(JSON.stringify(toolCall)));
-        }
-      }
+    if (currentAgentThreads.value && currentAgentThreads.value.length > 0) {
+      const threadToSelect = currentAgentThreads.value[0].id;
+      agentStore.selectThread(threadToSelect);
+      await agentStore.fetchThreadMessages(threadToSelect);
+    } else {
+      await createNewChat();
     }
+  } catch (error) {
+    handleChatError(error, 'load');
   }
+};
 
-  if (result.type === 'AIMessageChunk') {
-    result.type = 'ai'
-    if (result.additional_kwargs?.tool_calls) {
-      result.tool_calls = result.additional_kwargs.tool_calls;
+onMounted(async () => {
+  await initAll();
+  watch(() => agentStore.selectedAgentId, (newAgentId, oldAgentId) => {
+    if (newAgentId && newAgentId !== oldAgentId) {
+      initAll();
     }
-  }
-  return result;
-}
+  });
+  watch(conversations, () => {
+    scrollController.scrollToBottom();
+  }, { deep: true });
+});
 
 </script>
 
@@ -1517,7 +544,7 @@ const mergeMessageChunk = (chunks) => {
 
   .inputer-init {
     margin: 40px auto;
-    width: 80%;
+    width: 90%;
     max-width: 800px;
   }
 }
@@ -1848,4 +875,4 @@ const mergeMessageChunk = (chunks) => {
 .hide-text {
   display: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
index f577451e..0d15bd37 100644
--- a/web/src/components/AgentConfigSidebar.vue
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -4,7 +4,7 @@
     <div class="sidebar-header">
       <div class="sidebar-title">
         <SettingOutlined class="title-icon" />
-        <span>智能体配置</span>
+        <span>{{ selectedAgent.name || '未选择智能体' }} 配置</span>
       </div>
       <a-button
         type="text"
@@ -20,13 +20,12 @@
     <div class="sidebar-content">
       <div class="agent-info" v-if="selectedAgent">
         <div class="agent-basic-info">
-          <h4>{{ selectedAgent.name || '未选择智能体' }}</h4>
           <p class="agent-description">{{ selectedAgent.description }}</p>
-          <div class="debug-toggle" v-if="selectedAgent.name">
+          <!-- <div class="debug-toggle" v-if="selectedAgent.name">
             <span class="debug-text">调试信息</span>
             <a-switch v-model:checked="debugMode" size="small" />
           </div>
-          <pre v-if="debugMode && selectedAgent.name" class="debug-info">{{ selectedAgent }}</pre>
+          <pre v-if="debugMode && selectedAgent.name" class="debug-info">{{ selectedAgent }}</pre> -->
         </div>
 
         <a-divider />
@@ -72,7 +71,7 @@
                   v-else-if="key === 'system_prompt'"
                   :value="agentConfig[key]"
                   @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
-                  :rows="3"
+                  :rows="10"
                   :placeholder="getPlaceholder(key, value)"
                   class="system-prompt-input"
                 />
@@ -209,9 +208,10 @@
           <a-button type="primary" @click="saveConfig" class="save-btn">
             保存配置
           </a-button>
-          <a-button @click="resetConfig" class="reset-btn">
+          <!-- TODO：BUG 目前有 bug 暂时不展示 -->
+          <!-- <a-button @click="resetConfig" class="reset-btn">
             重置
-          </a-button>
+          </a-button> -->
         </div>
       </div>
     </div>
@@ -581,14 +581,6 @@ watch(() => props.isOpen, (newVal) => {
 
     .agent-info {
       .agent-basic-info {
-        margin-bottom: 16px;
-
-        h4 {
-          margin: 0 0 8px 0;
-          font-size: 18px;
-          font-weight: 600;
-          color: var(--gray-900);
-        }
 
         .agent-description {
           margin: 0 0 12px 0;
@@ -688,6 +680,13 @@ watch(() => props.isOpen, (newVal) => {
 
           .system-prompt-input {
             resize: vertical;
+            background: var(--gray-50);
+            border: 1px solid var(--gray-200);
+            padding: 8px 12px;
+
+            &:focus {
+              outline: none;
+            }
           }
 
           .config-select,
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 2bab6940..029cd338 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -5,28 +5,28 @@
 
     <!-- 助手消息 -->
     <div v-else-if="message.type === 'ai'" class="assistant-message">
-      <div v-if="parsedMessage.reasoning_content" class="reasoning-box">
+      <div v-if="parsedData.reasoning_content" class="reasoning-box">
         <a-collapse v-model:activeKey="reasoningActiveKey" :bordered="false">
           <template #expandIcon="{ isActive }">
             <caret-right-outlined :rotate="isActive ? 90 : 0" />
           </template>
           <a-collapse-panel key="show" :header="message.status=='reasoning' ? '正在思考...' : '推理过程'" class="reasoning-header">
-            <p class="reasoning-content">{{ parsedMessage.reasoning_content.trim() }}</p>
+            <p class="reasoning-content">{{ parsedData.reasoning_content }}</p>
           </a-collapse-panel>
         </a-collapse>
       </div>
 
       <!-- 消息内容 -->
       <!-- <div v-else-if="message.content" v-html="renderMarkdown(message)" class="message-md"></div> -->
-      <MdPreview v-if="parsedMessage.content" ref="editorRef"
+      <MdPreview v-if="parsedData.content" ref="editorRef"
         editorId="preview-only"
         previewTheme="github"
         :showCodeRowNumber="false"
-        :modelValue="parsedMessage.content"
+        :modelValue="parsedData.content"
         :key="message.id"
         class="message-md"/>
 
-      <div v-else-if="parsedMessage.reasoning_content"  class="empty-block"></div>
+      <div v-else-if="parsedData.reasoning_content"  class="empty-block"></div>
 
       <div v-if="message.tool_calls && Object.keys(message.tool_calls).length > 0" class="tool-calls-container">
         <div v-for="(toolCall, index) in message.tool_calls || {}" :key="index" class="tool-call-container">
@@ -132,14 +132,6 @@ const emit = defineEmits(['retry', 'retryStoppedMessage', 'openRefs']);
 const reasoningActiveKey = ref(['show']);
 const expandedToolCalls = ref(new Set()); // 展开的工具调用集合
 
-
-// 计算属性：内容为空且正在加载
-const isEmptyAndLoading = computed(() => {
-  const isEmpty = !props.message.content || props.message.content.length === 0;
-  const isLoading = props.message.status === 'init' && props.isProcessing
-  return isEmpty && isLoading;
-});
-
 // 引入智能体 store
 const agentStore = useAgentStore();
 const { availableTools } = storeToRefs(agentStore);
@@ -152,25 +144,26 @@ const getToolNameByToolCall = (toolCall) => {
   return tool ? tool.name : toolId;
 };
 
-const parsedMessage = computed(() => {
-  const message = props.message;
-  if (message.content) {
-    // 匹配完整的 <think>...</think> 标签
-    const thinkContent = message.content.match(/<think>(.*?)<\/think>/s);
-    if (thinkContent) {
-      message.reasoning_content = thinkContent[1];
-      message.content = message.content.replace(/<think>(.*?)<\/think>/s, '');
-    } else {
-      // 匹配未闭合的 <think> 标签，处理加载中的情况
-      const incompleteThinkContent = message.content.match(/<think>(.*?)$/s);
-      if (incompleteThinkContent) {
-        message.reasoning_content = incompleteThinkContent[1];
-        message.content = message.content.replace(/<think>(.*?)$/s, '');
-      }
-    }
+const parsedData = computed(() => {
+  // Start with default values from the prop to avoid mutation.
+  let content = props.message.content || '';
+  let reasoning_content = props.message.additional_kwargs?.reasoning_content || '';
+
+  // Regex to find <think>...</think> or an unclosed <think>... at the end of the string.
+  const thinkRegex = /<think>(.*?)<\/think>|<think>(.*?)$/s;
+  const thinkMatch = content.match(thinkRegex);
+
+  if (thinkMatch) {
+    // The captured reasoning is in either group 1 (closed tag) or 2 (unclosed tag).
+    reasoning_content = (thinkMatch[1] || thinkMatch[2] || '').trim();
+    // Remove the entire matched <think> block from the original content.
+    content = content.replace(thinkMatch[0], '').trim();
   }
-  message.reasoning_content = message.reasoning_content || message.additional_kwargs?.reasoning_content || '';
-  return message;
+
+  return {
+    content,
+    reasoning_content,
+  };
 });
 
 const toggleToolCall = (toolCallId) => {
@@ -503,12 +496,12 @@ const toggleToolCall = (toolCallId) => {
 }
 </style>
 
-<style lang="less">
-.message-md {
+<style lang="less" scoped>
+:deep(.message-md) {
   margin: 8px 0;
 }
 
-.message-md .md-editor-preview-wrapper {
+:deep(.message-md .md-editor-preview-wrapper) {
   max-width: 100%;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
@@ -516,7 +509,7 @@ const toggleToolCall = (toolCallId) => {
   #preview-only-preview {
     font-size: 1rem;
     line-height: 1.75;
-    color: var(--gray-2000);
+    color: var(--gray-1000);
   }
 
 
@@ -533,15 +526,19 @@ const toggleToolCall = (toolCallId) => {
   }
 
   strong {
-    font-weight: 600;
+    font-weight: 500;
   }
 
   li > p, ol > p, ul > p {
     margin: 0.25rem 0;
   }
 
-  ol, ul {
-    padding-left: 1.2rem;
+  ol li::marker {
+    color: var(--main-color);
+  }
+
+  ul li::marker {
+    color: var(--main-bright);
   }
 
   cite {
@@ -572,7 +569,7 @@ const toggleToolCall = (toolCallId) => {
   }
 }
 
-.chat-box.font-smaller #preview-only-preview {
+:deep(.chat-box.font-smaller #preview-only-preview) {
   font-size: 14px;
 
   h1, h2 {
@@ -584,7 +581,7 @@ const toggleToolCall = (toolCallId) => {
   }
 }
 
-.chat-box.font-larger #preview-only-preview {
+:deep(.chat-box.font-larger #preview-only-preview) {
   font-size: 16px;
 
   h1, h2 {
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index b14bea8c..f166d610 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -284,7 +284,7 @@ const openAgentModal = () => {
       gap: 8px;
 
       &:hover {
-        background-color: var(--main-100);
+        background-color: var(--gray-100);
       }
     }
   }
@@ -415,11 +415,11 @@ const openAgentModal = () => {
   justify-content: center;
   align-items: center;
   border-radius: 8px;
-  color: var(--gray-900);
-  padding: 0.5rem;
+  color: var(--gray-500);
+  // padding: 0.5rem;
   transition: background-color 0.3s;
   &:hover {
-    background-color: var(--gray-100);
+    color: var(--main-color);
   }
 }
 
diff --git a/web/src/components/DatabaseHeader.vue b/web/src/components/DatabaseHeader.vue
index 21b6b7ef..8cc11072 100644
--- a/web/src/components/DatabaseHeader.vue
+++ b/web/src/components/DatabaseHeader.vue
@@ -5,9 +5,7 @@
     class="database-info-header"
   >
     <template #left>
-      <a-button @click="backToDatabase">
-        <LeftOutlined />
-      </a-button>
+      <a-button @click="backToDatabase" shape="circle" :icon="h(LeftOutlined)" type="text"></a-button>
     </template>
     <template #behind-title>
       <a-button type="link" @click="showEditModal" :style="{ padding: '0px', color: 'inherit' }">
@@ -64,6 +62,7 @@ import {
   DeleteOutlined,
 } from '@ant-design/icons-vue';
 import HeaderComponent from '@/components/HeaderComponent.vue';
+import { h } from 'vue';
 
 const router = useRouter();
 const store = useDatabaseStore();
@@ -111,7 +110,7 @@ const deleteDatabase = () => {
 
 <style scoped>
 .database-info-header {
-  padding: 8px 16px 6px 16px;
+  padding: 8px;
   height: 50px;
 }
 
diff --git a/web/src/components/FileTable.vue b/web/src/components/FileTable.vue
index b40c184a..4117dc0d 100644
--- a/web/src/components/FileTable.vue
+++ b/web/src/components/FileTable.vue
@@ -310,6 +310,15 @@ import { getFileIcon, getFileIconColor, formatRelativeTime } from '@/utils/file_
 .search-container {
   display: flex;
   align-items: center;
+
+  button {
+    padding: 0 8px;
+  }
+
+  button:hover {
+    background-color: var(--gray-50);
+    color: var(--main-color);
+  }
 }
 
 .panel-actions {
diff --git a/web/src/components/MessageInputComponent.vue b/web/src/components/MessageInputComponent.vue
index 117272f8..13c6c46b 100644
--- a/web/src/components/MessageInputComponent.vue
+++ b/web/src/components/MessageInputComponent.vue
@@ -269,7 +269,7 @@ onBeforeUnmount(() => {
   display: grid;
   width: 100%;
   margin: 0 auto;
-  border: 2px solid var(--gray-200);
+  border: 1px solid var(--gray-200);
   border-radius: 0.8rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
@@ -290,11 +290,11 @@ onBeforeUnmount(() => {
     justify-self: end;
   }
 
-  &:focus-within {
-    border-color: var(--main-500);
-    background: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  }
+  // &:focus-within {
+  //   border-color: var(--main-500);
+  //   background: white;
+  //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  // }
 
   &.single-line {
     padding: 0.75rem 0.75rem;
diff --git a/web/src/stores/agent.js b/web/src/stores/agent.js
index 65480caf..a7e0da9a 100644
--- a/web/src/stores/agent.js
+++ b/web/src/stores/agent.js
@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia';
 import { agentApi, threadApi } from '@/apis/agent';
+import { MessageProcessor } from '@/utils/messageProcessor';
+import { handleChatError } from '@/utils/errorHandler';
 
 export const useAgentStore = defineStore('agent', {
   state: () => ({
@@ -20,6 +22,10 @@ export const useAgentStore = defineStore('agent', {
     currentThreadId: null, // 当前选中的线程ID
     threadMessages: {}, // 以线程ID为键的消息列表
 
+    // 对话状态
+    onGoingConv: { msgChunks: {} }, // 正在进行的对话（流式）
+    isStreaming: false, // 是否正在接收流式响应
+
     // 加载状态
     isLoadingAgents: false,
     isLoadingConfig: false,
@@ -35,75 +41,61 @@ export const useAgentStore = defineStore('agent', {
   }),
 
   getters: {
-    // 获取当前选中的智能体
-    selectedAgent() {
-      return this.selectedAgentId ? this.agents[this.selectedAgentId] : null;
-    },
-
-    // 获取默认智能体，默认取第一个
-    defaultAgent() {
-      return this.defaultAgentId ? this.agents[this.defaultAgentId] : this.agents[Object.keys(this.agents)[0]];
-    },
-
-    // 获取智能体列表（数组形式）
-    agentsList() {
-      return Object.values(this.agents);
-    },
-
-    // 判断当前智能体是否为默认智能体
-    isDefaultAgent() {
-      return this.selectedAgentId === this.defaultAgentId;
-    },
-
-    // 获取当前智能体的配置schema
-    configSchema() {
-      const agent = this.selectedAgentId ? this.agents[this.selectedAgentId] : null;
+    // --- 智能体相关 Getters ---
+    selectedAgent: (state) => state.selectedAgentId ? state.agents[state.selectedAgentId] : null,
+    defaultAgent: (state) => state.defaultAgentId ? state.agents[state.defaultAgentId] : state.agents[Object.keys(state.agents)[0]],
+    agentsList: (state) => Object.values(state.agents),
+    isDefaultAgent: (state) => state.selectedAgentId === state.defaultAgentId,
+    configSchema: (state) => {
+      const agent = state.selectedAgentId ? state.agents[state.selectedAgentId] : null;
       return agent?.config_schema || {};
     },
-
-    // 获取可配置项（处理x_oap_ui_config）
-    configurableItems() {
-      const schema = this.configSchema || {};
+    configurableItems: (state) => {
+      const schema = state.configSchema || {};
       if (!schema || !schema.configurable_items) return {};
-
       const items = { ...schema.configurable_items };
-
-      // 处理x_oap_ui_config，将其提升到上一层
       Object.keys(items).forEach(key => {
         const item = items[key];
         if (item && item.x_oap_ui_config) {
-          items[key] = {
-            ...item,
-            ...item.x_oap_ui_config
-          };
+          items[key] = { ...item, ...item.x_oap_ui_config };
           delete items[key].x_oap_ui_config;
         }
       });
-
       return items;
     },
+    hasConfigChanges: (state) => JSON.stringify(state.agentConfig) !== JSON.stringify(state.originalAgentConfig),
 
-    // 检查配置是否有变更
-    hasConfigChanges() {
-      return JSON.stringify(this.agentConfig) !== JSON.stringify(this.originalAgentConfig);
+    // --- 线程与消息相关 Getters ---
+    currentAgentThreads: (state) => state.selectedAgentId ? (state.threads[state.selectedAgentId] || []) : [],
+    currentThread: (state) => {
+      if (!state.currentThreadId || !state.selectedAgentId) return null;
+      const agentThreads = state.threads[state.selectedAgentId] || [];
+      return agentThreads.find(thread => thread.id === state.currentThreadId);
     },
+    currentThreadMessages: (state) => state.currentThreadId ? (state.threadMessages[state.currentThreadId] || []) : [],
 
-    // 获取当前智能体的线程列表
-    currentAgentThreads() {
-      return this.selectedAgentId ? (this.threads[this.selectedAgentId] || []) : [];
+    // --- 对话UI Getters ---
+    onGoingConvMessages: (state) => {
+      const msgs = Object.values(state.onGoingConv.msgChunks).map(MessageProcessor.mergeMessageChunk);
+      return msgs.length > 0
+        ? MessageProcessor.convertToolResultToMessages(msgs).filter(msg => msg.type !== 'tool')
+        : [];
     },
+    conversations: (state) => {
+      const historyConvs = MessageProcessor.convertServerHistoryToMessages(state.currentThreadMessages);
+      // Access onGoingConvMessages getter through state
+      const onGoingMessages = state.onGoingConvMessages;
 
-    // 获取当前线程
-    currentThread() {
-      if (!this.currentThreadId || !this.selectedAgentId) return null;
-      const agentThreads = this.threads[this.selectedAgentId] || [];
-      return agentThreads.find(thread => thread.id === this.currentThreadId);
+      if (onGoingMessages.length > 0) {
+        // Create a new conversation object for the ongoing messages
+        const onGoingConv = {
+          messages: onGoingMessages,
+          status: 'streaming'
+        };
+        return [...historyConvs, onGoingConv];
+      }
+      return historyConvs;
     },
-
-    // 获取当前线程的消息
-    currentThreadMessages() {
-      return this.currentThreadId ? (this.threadMessages[this.currentThreadId] || []) : [];
-    }
   },
 
   actions: {
@@ -355,6 +347,7 @@ export const useAgentStore = defineStore('agent', {
     // 选择线程
     selectThread(threadId) {
       this.currentThreadId = threadId;
+      this.resetOnGoingConv();
 
       // 如果没有该线程的消息，初始化空数组
       if (threadId && !this.threadMessages[threadId]) {
@@ -368,30 +361,110 @@ export const useAgentStore = defineStore('agent', {
 
       this.isLoadingMessages = true;
       this.error = null;
+      this.resetOnGoingConv();
 
       try {
         const response = await agentApi.getAgentHistory(this.selectedAgentId, threadId);
         this.threadMessages[threadId] = response.history || [];
       } catch (error) {
-        console.error('Failed to fetch thread messages:', error);
-        this.error = error.message;
+        handleChatError(error, 'load');
         throw error;
       } finally {
         this.isLoadingMessages = false;
       }
     },
 
-    // 发送消息
-    async sendMessage(agentId, requestData) {
-      if (!agentId) return null;
+    // --- 流式对话 Actions ---
+
+    resetOnGoingConv() {
+      this.onGoingConv = { msgChunks: {} };
+    },
+
+    _processStreamChunk(chunk) {
+      const { status, msg, request_id, message } = chunk;
+      switch (status) {
+        case 'init':
+          this.onGoingConv.msgChunks[request_id] = [msg];
+          break;
+        case 'loading':
+          if (msg.id) {
+            if (!this.onGoingConv.msgChunks[msg.id]) {
+              this.onGoingConv.msgChunks[msg.id] = [];
+            }
+            this.onGoingConv.msgChunks[msg.id].push(msg);
+          }
+          break;
+        case 'error':
+          handleChatError({ message }, 'stream');
+          break;
+        case 'finished':
+          this.fetchThreadMessages(this.currentThreadId);
+          break;
+      }
+    },
+
+    // 发送消息并处理流式响应
+    async sendMessage(text) {
+      if (!this.selectedAgentId || !this.currentThreadId || !text) {
+        handleChatError({ message: "Missing agent, thread, or message text" }, 'send');
+        return;
+      }
+
+      this.isStreaming = true;
+      this.resetOnGoingConv();
+
+      // 如果是新对话，用消息内容作为标题
+      if (this.currentThreadMessages.length === 0) {
+        this.updateThread(this.currentThreadId, text);
+      }
+
+      const requestData = {
+        query: text,
+        config: {
+          thread_id: this.currentThreadId,
+        },
+      };
 
       try {
-        const response = await agentApi.sendAgentMessage(agentId, requestData);
-        return response;
+        const response = await agentApi.sendAgentMessage(this.selectedAgentId, requestData);
+        
+        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 });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
+
+          for (const line of lines) {
+            if (line.trim()) {
+              try {
+                const chunk = JSON.parse(line.trim());
+                this._processStreamChunk(chunk);
+              } catch (e) {
+                console.warn('Failed to parse stream chunk JSON:', e);
+              }
+            }
+          }
+        }
+        // Process any remaining data in the buffer
+        if (buffer.trim()) {
+          try {
+            const chunk = JSON.parse(buffer.trim());
+            this._processStreamChunk(chunk);
+          } catch (e) {
+            console.warn('Failed to parse final stream chunk JSON:', e);
+          }
+        }
+
       } catch (error) {
-        console.error('Failed to send message:', error);
-        this.error = error.message;
-        throw error;
+        handleChatError(error, 'send');
+      } finally {
+        this.isStreaming = false;
       }
     },
 
diff --git a/web/src/utils/agentValidator.js b/web/src/utils/agentValidator.js
new file mode 100644
index 00000000..8b71a26d
--- /dev/null
+++ b/web/src/utils/agentValidator.js
@@ -0,0 +1,126 @@
+/**
+ * AgentID验证工具类
+ * 统一处理AgentID相关的验证逻辑
+ */
+export class AgentValidator {
+  /**
+   * 验证AgentID是否存在
+   * @param {string} agentId - 要验证的AgentID
+   * @param {string} operation - 操作名称，用于错误提示
+   * @returns {boolean} 验证是否通过
+   */
+  static validateAgentId(agentId, operation = '操作') {
+    if (!agentId) {
+      console.warn(`未指定AgentID，无法${operation}`);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 验证AgentID并显示错误提示
+   * @param {string} agentId - 要验证的AgentID
+   * @param {string} operation - 操作名称
+   * @param {Function} errorHandler - 错误处理函数
+   * @returns {boolean} 验证是否通过
+   */
+  static validateAgentIdWithError(agentId, operation, errorHandler) {
+    if (!agentId) {
+      const message = `未指定AgentID，无法${operation}`;
+      if (errorHandler) {
+        errorHandler(message);
+      }
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 验证对话相关操作的前置条件
+   * @param {string} agentId - AgentID
+   * @param {string} chatId - 对话ID（可选）
+   * @param {string} operation - 操作名称
+   * @param {Function} errorHandler - 错误处理函数
+   * @returns {boolean} 验证是否通过
+   */
+  static validateChatOperation(agentId, chatId, operation, errorHandler) {
+    // 验证AgentID
+    if (!this.validateAgentIdWithError(agentId, operation, errorHandler)) {
+      return false;
+    }
+
+    // 如果需要验证chatId
+    if (chatId !== undefined && !chatId) {
+      const message = `请先选择对话`;
+      if (errorHandler) {
+        errorHandler(message);
+      }
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * 验证重命名操作的参数
+   * @param {string} chatId - 对话ID
+   * @param {string} title - 新标题
+   * @param {string} agentId - AgentID
+   * @param {Function} errorHandler - 错误处理函数
+   * @returns {boolean} 验证是否通过
+   */
+  static validateRenameOperation(chatId, title, agentId, errorHandler) {
+    // 验证基本参数
+    if (!chatId || !title) {
+      const message = '未指定对话ID或标题，无法重命名对话';
+      if (errorHandler) {
+        errorHandler(message);
+      }
+      return false;
+    }
+
+    // 验证标题不为空
+    if (!title.trim()) {
+      const message = '标题不能为空';
+      if (errorHandler) {
+        errorHandler(message);
+      }
+      return false;
+    }
+
+    // 验证AgentID
+    return this.validateAgentIdWithError(agentId, '重命名对话', errorHandler);
+  }
+
+  /**
+   * 验证分享操作的前置条件
+   * @param {string} chatId - 对话ID
+   * @param {Object} agent - 当前智能体对象
+   * @param {Function} errorHandler - 错误处理函数
+   * @returns {boolean} 验证是否通过
+   */
+  static validateShareOperation(chatId, agent, errorHandler) {
+    if (!chatId || !agent) {
+      const message = '请先选择对话';
+      if (errorHandler) {
+        errorHandler(message);
+      }
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 验证加载操作的前置条件
+   * @param {string} agentId - AgentID
+   * @param {string} operation - 操作名称
+   * @returns {boolean} 验证是否通过
+   */
+  static validateLoadOperation(agentId, operation = '加载状态') {
+    if (!agentId) {
+      console.warn(`未指定AgentID，无法${operation}`);
+      return false;
+    }
+    return true;
+  }
+}
\ No newline at end of file
diff --git a/web/src/utils/chatExporter.js b/web/src/utils/chatExporter.js
new file mode 100644
index 00000000..2f5edac7
--- /dev/null
+++ b/web/src/utils/chatExporter.js
@@ -0,0 +1,522 @@
+/**
+ * 聊天对话HTML导出工具类
+ * 用于将聊天对话导出为HTML文件
+ */
+
+export class ChatExporter {
+  /**
+   * 导出聊天对话为HTML文件
+   * @param {Object} options 导出选项
+   * @param {string} options.chatTitle 对话标题
+   * @param {string} options.agentName 智能体名称
+   * @param {string} options.agentDescription 智能体描述
+   * @param {Array} options.messages 消息列表
+   * @param {Array} options.onGoingMessages 进行中的消息列表
+   */
+  static async exportToHTML(options) {
+    const {
+      chatTitle = '新对话',
+      agentName = '智能助手',
+      agentDescription = '',
+      messages = [],
+      onGoingMessages = []
+    } = options;
+
+    try {
+      // 生成HTML内容
+      const htmlContent = this.generateHTML({
+        chatTitle,
+        agentName,
+        agentDescription,
+        messages,
+        onGoingMessages
+      });
+
+      // 创建下载链接
+      const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+
+      // 生成文件名
+      const timestamp = new Date().toLocaleString('zh-CN').replace(/[:/\s]/g, '-');
+      const filename = `${chatTitle}-${timestamp}.html`;
+
+      link.href = url;
+      link.download = filename;
+      link.style.display = 'none';
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      // 清理URL对象
+      URL.revokeObjectURL(url);
+
+      return { success: true, filename };
+    } catch (error) {
+      console.error('导出对话失败:', error);
+      throw new Error(`导出失败: ${error.message}`);
+    }
+  }
+
+  /**
+   * 生成HTML内容
+   * @param {Object} options 生成选项
+   * @returns {string} HTML内容
+   */
+  static generateHTML(options) {
+    const {
+      chatTitle,
+      agentName,
+      agentDescription,
+      messages,
+      onGoingMessages
+    } = options;
+
+    const exportTime = new Date().toLocaleString('zh-CN');
+
+    // 合并所有消息
+    const allMessages = [];
+
+    // 添加历史对话消息
+    messages.forEach(conv => {
+      if (conv.messages) {
+        conv.messages.forEach(msg => {
+          allMessages.push(msg);
+        });
+      }
+    });
+
+    // 添加当前进行中的对话消息
+    onGoingMessages.forEach(msg => {
+      allMessages.push(msg);
+    });
+
+    if (allMessages.length === 0) {
+      throw new Error('没有可导出的对话内容');
+    }
+
+    // 生成消息HTML
+    const messagesHTML = this.generateMessagesHTML(allMessages, agentName);
+
+    // 返回完整的HTML文档
+    return this.generateHTMLTemplate({
+      chatTitle,
+      agentName,
+      agentDescription,
+      exportTime,
+      messagesHTML
+    });
+  }
+
+  /**
+   * 生成消息HTML
+   * @param {Array} messages 消息列表
+   * @param {string} agentName 智能体名称
+   * @returns {string} 消息HTML
+   */
+  static generateMessagesHTML(messages, agentName) {
+    return messages.map((msg, index) => {
+      const isUser = msg.type === 'human';
+      const avatar = isUser ? '👤' : '🤖';
+      const senderName = isUser ? '用户' : agentName;
+      const messageClass = isUser ? 'user-message' : 'ai-message';
+
+      // 处理消息内容
+      let content = (msg.content || '').trim();
+      content = content.replace(/\n/g, '<br>');
+
+      // 处理思考过程
+      const reasoningHTML = this.generateReasoningHTML(msg, isUser);
+
+      // 处理工具调用
+      const toolCallsHTML = this.generateToolCallsHTML(msg);
+
+      return `
+        <div class="message ${messageClass}">
+          <div class="message-header">
+            <span class="avatar">${avatar}</span>
+            <span class="sender">${senderName}</span>
+            <span class="time">${new Date().toLocaleString('zh-CN')}</span>
+          </div>
+          <div class="message-content">
+            ${reasoningHTML}
+            ${content}
+            ${toolCallsHTML}
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  /**
+   * 生成思考过程HTML
+   * @param {Object} msg 消息对象
+   * @param {boolean} isUser 是否为用户消息
+   * @returns {string} 思考过程HTML
+   */
+  static generateReasoningHTML(msg, isUser) {
+    if (isUser) return '';
+
+    const reasoningContent = msg.additional_kwargs?.reasoning_content || msg.reasoning_content;
+    if (!reasoningContent) return '';
+
+    const content = reasoningContent.trim().replace(/\n/g, '<br>');
+    return `
+      <div class="reasoning-section">
+        <div class="reasoning-header">💭 思考过程</div>
+        <div class="reasoning-content">${content}</div>
+      </div>
+    `;
+  }
+
+  /**
+   * 生成工具调用HTML
+   * @param {Object} msg 消息对象
+   * @returns {string} 工具调用HTML
+   */
+  static generateToolCallsHTML(msg) {
+    if (!msg.tool_calls || msg.tool_calls.length === 0) return '';
+
+    let toolCallsHTML = '<div class="tool-calls">';
+    
+    msg.tool_calls.forEach(toolCall => {
+      const args = toolCall.function?.arguments 
+        ? JSON.parse(toolCall.function.arguments) 
+        : toolCall?.args || '{}';
+      
+      toolCallsHTML += `
+        <div class="tool-call">
+          <div class="tool-call-header">
+            <strong>🔧 ${toolCall.function?.name || '工具调用'}</strong>
+          </div>
+          <div class="tool-call-args">
+            <pre>${JSON.stringify(args, null, 2)}</pre>
+          </div>
+          ${toolCall.tool_call_result ? `
+            <div class="tool-call-result">
+              <div class="tool-result-header">执行结果:</div>
+              <div class="tool-result-content">${toolCall.tool_call_result.content || ''}</div>
+            </div>
+          ` : ''}
+        </div>
+      `;
+    });
+    
+    toolCallsHTML += '</div>';
+    return toolCallsHTML;
+  }
+
+  /**
+   * 生成完整的HTML模板
+   * @param {Object} options 模板选项
+   * @returns {string} 完整的HTML文档
+   */
+  static generateHTMLTemplate(options) {
+    const { chatTitle, agentName, agentDescription, exportTime, messagesHTML } = options;
+
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${chatTitle} - 对话导出</title>
+    <style>
+        ${this.getCSS()}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>${chatTitle}</h1>
+            <div class="agent-info">
+                <strong>智能体:</strong> ${agentName}
+                ${agentDescription ? `<br><strong>描述:</strong> ${agentDescription}` : ''}
+            </div>
+            <div class="export-info">
+                导出时间: ${exportTime}
+            </div>
+        </div>
+        <div class="messages">
+            ${messagesHTML}
+        </div>
+        <div class="footer">
+            <p>此对话由 <a href="#" target="_blank">智能助手平台</a> 导出</p>
+        </div>
+    </div>
+</body>
+</html>`;
+  }
+
+  /**
+   * 获取CSS样式
+   * @returns {string} CSS样式字符串
+   */
+  static getCSS() {
+    return `
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: white;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            min-height: 100vh;
+        }
+
+        .header {
+            background: #f8f9fa;
+            border-bottom: 2px solid #e9ecef;
+            padding: 24px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 24px;
+            margin-bottom: 8px;
+            color: #212529;
+            font-weight: 600;
+        }
+
+        .header .agent-info {
+            font-size: 14px;
+            color: #6c757d;
+            margin-bottom: 12px;
+        }
+
+        .header .export-info {
+            font-size: 12px;
+            color: #868e96;
+            padding-top: 12px;
+            border-top: 1px solid #dee2e6;
+        }
+
+        .messages {
+            padding: 32px 48px;
+            max-width: 100%;
+        }
+
+        .message {
+            margin-bottom: 32px;
+            max-width: 100%;
+        }
+
+        .message:last-child {
+            margin-bottom: 0;
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .avatar {
+            font-size: 16px;
+            margin-right: 8px;
+        }
+
+        .sender {
+            font-weight: 600;
+            margin-right: 12px;
+        }
+
+        .time {
+            font-size: 12px;
+            color: #999;
+        }
+
+        .message-content {
+            padding: 16px 20px;
+            border-radius: 8px;
+            width: 100%;
+            max-width: 100%;
+        }
+
+        .user-message .message-content {
+            color: white;
+            background: #1C6586;
+            border: 1px solid #1C6586;
+            width: fit-content;
+        }
+
+        .ai-message .message-content {
+            background: white;
+            border: 1px solid #e9ecef;
+        }
+
+        .reasoning-section {
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 6px;
+            padding: 12px;
+            margin-bottom: 16px;
+        }
+
+        .reasoning-header {
+            font-size: 13px;
+            font-weight: 600;
+            color: #495057;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+        }
+
+        .reasoning-content {
+            font-size: 14px;
+            color: #6c757d;
+            font-style: italic;
+            line-height: 1.5;
+        }
+
+        .tool-calls {
+            margin-top: 16px;
+            padding-top: 16px;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .tool-call {
+            background: #fff8e1;
+            border: 1px solid #ffe082;
+            border-radius: 6px;
+            padding: 12px;
+            margin-bottom: 12px;
+        }
+
+        .tool-call:last-child {
+            margin-bottom: 0;
+        }
+
+        .tool-call-header {
+            font-size: 14px;
+            color: #f57f17;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        .tool-call-args {
+            background: rgba(0,0,0,0.04);
+            border-radius: 4px;
+            padding: 8px;
+            margin-bottom: 8px;
+        }
+
+        .tool-call-args pre {
+            font-size: 12px;
+            color: #666;
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+
+        .tool-call-result {
+            background: #e8f5e8;
+            border: 1px solid #c8e6c9;
+            border-radius: 4px;
+            padding: 8px;
+            word-break: break-all;
+        }
+
+        .tool-result-header {
+            font-size: 12px;
+            color: #2e7d32;
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        .tool-result-content {
+            font-size: 13px;
+            color: #388e3c;
+        }
+
+        .footer {
+            background: #f8f9fa;
+            text-align: center;
+            padding: 16px;
+            font-size: 12px;
+            color: #666;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .footer a {
+            color: #007bff;
+            text-decoration: none;
+        }
+
+        @media (max-width: 768px) {
+            .messages {
+                padding: 24px 16px;
+            }
+
+            .header {
+                padding: 16px;
+            }
+
+            .user-message .message-content {
+                margin-left: 10%;
+            }
+
+            .ai-message .message-content {
+                margin-right: 10%;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .user-message .message-content,
+            .ai-message .message-content {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
+        @media print {
+            body {
+                background: white;
+                margin: 0;
+                padding: 0;
+            }
+
+            .container {
+                box-shadow: none;
+                border-radius: 0;
+                max-width: 100%;
+            }
+
+            .header {
+                background: #f8f9fa !important;
+                -webkit-print-color-adjust: exact;
+            }
+
+            .messages {
+                padding: 20px;
+            }
+
+            .user-message .message-content {
+                background: #e3f2fd !important;
+                -webkit-print-color-adjust: exact;
+            }
+
+            .reasoning-section {
+                background: #f8f9fa !important;
+                -webkit-print-color-adjust: exact;
+            }
+        }
+    `;
+  }
+}
+
+export default ChatExporter;
\ No newline at end of file
diff --git a/web/src/utils/errorHandler.js b/web/src/utils/errorHandler.js
new file mode 100644
index 00000000..53f653ec
--- /dev/null
+++ b/web/src/utils/errorHandler.js
@@ -0,0 +1,148 @@
+import { message } from 'ant-design-vue';
+
+/**
+ * 统一错误处理工具类
+ */
+export class ErrorHandler {
+  /**
+   * 处理通用错误
+   * @param {Error} error - 错误对象
+   * @param {string} context - 错误上下文
+   * @param {Object} options - 配置选项
+   */
+  static handleError(error, context = '操作', options = {}) {
+    const {
+      showMessage = true,
+      logToConsole = true,
+      customMessage = null,
+      severity = 'error'
+    } = options;
+
+    // 控制台日志
+    if (logToConsole) {
+      console.error(`${context}失败:`, error);
+    }
+
+    // 用户提示
+    if (showMessage) {
+      const displayMessage = customMessage || this.getErrorMessage(error, context);
+      
+      switch (severity) {
+        case 'warning':
+          message.warning(displayMessage);
+          break;
+        case 'info':
+          message.info(displayMessage);
+          break;
+        case 'error':
+        default:
+          message.error(displayMessage);
+          break;
+      }
+    }
+
+    return error;
+  }
+
+  /**
+   * 获取错误消息
+   * @param {Error} error - 错误对象
+   * @param {string} context - 错误上下文
+   * @returns {string} 错误消息
+   */
+  static getErrorMessage(error, context) {
+    if (error?.message) {
+      return `${context}失败: ${error.message}`;
+    }
+    return `${context}失败`;
+  }
+
+  /**
+   * 处理网络请求错误
+   * @param {Error} error - 错误对象
+   * @param {string} context - 错误上下文
+   */
+  static handleNetworkError(error, context = '网络请求') {
+    let customMessage = null;
+    
+    if (error?.code === 'NETWORK_ERROR') {
+      customMessage = '网络连接失败，请检查网络设置';
+    } else if (error?.status === 401) {
+      customMessage = '认证失败，请重新登录';
+    } else if (error?.status === 403) {
+      customMessage = '权限不足，无法执行此操作';
+    } else if (error?.status === 404) {
+      customMessage = '请求的资源不存在';
+    } else if (error?.status >= 500) {
+      customMessage = '服务器错误，请稍后重试';
+    }
+
+    return this.handleError(error, context, { customMessage });
+  }
+
+  /**
+   * 处理聊天相关错误
+   * @param {Error} error - 错误对象
+   * @param {string} operation - 操作类型
+   */
+  static handleChatError(error, operation) {
+    const contextMap = {
+      'send': '发送消息',
+      'create': '创建对话',
+      'delete': '删除对话',
+      'rename': '重命名对话',
+      'load': '加载对话',
+      'export': '导出对话',
+      'stream': '流式处理'
+    };
+
+    const context = contextMap[operation] || operation;
+    return this.handleError(error, context);
+  }
+
+  /**
+   * 处理验证错误
+   * @param {string} message - 验证错误消息
+   */
+  static handleValidationError(message) {
+    return this.handleError(
+      new Error(message), 
+      '输入验证', 
+      { severity: 'warning', customMessage: message }
+    );
+  }
+
+  /**
+   * 处理异步操作错误
+   * @param {Function} asyncFn - 异步函数
+   * @param {string} context - 错误上下文
+   * @param {Object} options - 配置选项
+   */
+  static async handleAsync(asyncFn, context, options = {}) {
+    try {
+      return await asyncFn();
+    } catch (error) {
+      this.handleError(error, context, options);
+      throw error;
+    }
+  }
+
+  /**
+   * 创建错误处理装饰器
+   * @param {string} context - 错误上下文
+   * @param {Object} options - 配置选项
+   */
+  static createHandler(context, options = {}) {
+    return (error) => this.handleError(error, context, options);
+  }
+}
+
+/**
+ * 快捷方法
+ */
+export const handleChatError = ErrorHandler.handleChatError.bind(ErrorHandler);
+export const handleNetworkError = ErrorHandler.handleNetworkError.bind(ErrorHandler);
+export const handleValidationError = ErrorHandler.handleValidationError.bind(ErrorHandler);
+export const handleAsync = ErrorHandler.handleAsync.bind(ErrorHandler);
+
+export default ErrorHandler;
\ No newline at end of file
diff --git a/web/src/utils/messageProcessor.js b/web/src/utils/messageProcessor.js
new file mode 100644
index 00000000..cff0e453
--- /dev/null
+++ b/web/src/utils/messageProcessor.js
@@ -0,0 +1,248 @@
+/**
+ * 消息处理工具类
+ */
+export class MessageProcessor {
+  /**
+   * 将工具结果与消息合并
+   * @param {Array} msgs - 消息数组
+   * @returns {Array} 合并后的消息数组
+   */
+  static convertToolResultToMessages(msgs) {
+    const toolResponseMap = new Map();
+    
+    // 构建工具响应映射
+    for (const item of msgs) {
+      if (item.type === 'tool' && item.tool_call_id) {
+        toolResponseMap.set(item.tool_call_id, item);
+      }
+    }
+
+    // 合并工具调用和响应
+    const convertedMsgs = msgs.map(item => {
+      if (item.type === 'ai' && item.tool_calls && item.tool_calls.length > 0) {
+        return {
+          ...item,
+          tool_calls: item.tool_calls.map(toolCall => {
+            const toolResponse = toolResponseMap.get(toolCall.id);
+            return {
+              ...toolCall,
+              tool_call_result: toolResponse || null
+            };
+          })
+        };
+      }
+      return item;
+    });
+
+    return convertedMsgs;
+  }
+
+  /**
+   * 将服务器历史记录转换为对话格式
+   * @param {Array} serverHistory - 服务器历史记录
+   * @returns {Array} 对话数组
+   */
+  static convertServerHistoryToMessages(serverHistory) {
+    // 第一步：将所有tool消息与对应的tool call合并
+    const mergedHistory = this.convertToolResultToMessages(serverHistory);
+
+    // 第二步：按照对话分组
+    const conversations = [];
+    let currentConv = null;
+
+    for (const item of mergedHistory) {
+      if (item.type === 'human') {
+        currentConv = {
+          messages: [item],
+          status: 'loading'
+        };
+        conversations.push(currentConv);
+      } else if (item.type === 'ai' && currentConv) {
+        currentConv.messages.push(item);
+
+        if (item.response_metadata?.finish_reason === 'stop') {
+          item.isLast = true;
+          currentConv.status = 'finished';
+          currentConv = null;
+        }
+      }
+    }
+
+    return conversations;
+  }
+
+  /**
+   * 合并消息块
+   * @param {Array} chunks - 消息块数组
+   * @returns {Object|null} 合并后的消息
+   */
+  static mergeMessageChunk(chunks) {
+    if (chunks.length === 0) return null;
+
+    // 深拷贝第一个chunk作为结果
+    const result = JSON.parse(JSON.stringify(chunks[0]));
+    result.content = result.content || '';
+
+    // 合并后续chunks
+    for (let i = 1; i < chunks.length; i++) {
+      const chunk = chunks[i];
+      
+      // 合并内容
+      if (chunk.content) {
+        result.content += chunk.content;
+      }
+
+      // 合并reasoning_content
+      if (chunk.reasoning_content) {
+        if (!result.reasoning_content) {
+          result.reasoning_content = '';
+        }
+        result.reasoning_content += chunk.reasoning_content;
+      }
+
+      // 合并additional_kwargs中的reasoning_content
+      if (chunk.additional_kwargs?.reasoning_content) {
+        if (!result.additional_kwargs) result.additional_kwargs = {};
+        if (!result.additional_kwargs.reasoning_content) {
+          result.additional_kwargs.reasoning_content = '';
+        }
+        result.additional_kwargs.reasoning_content += chunk.additional_kwargs.reasoning_content;
+      }
+
+      // 合并tool_calls
+      MessageProcessor._mergeToolCalls(result, chunk);
+    }
+
+    // 处理AIMessageChunk类型
+    if (result.type === 'AIMessageChunk') {
+      result.type = 'ai';
+      if (result.additional_kwargs?.tool_calls) {
+        result.tool_calls = result.additional_kwargs.tool_calls;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * 合并工具调用
+   * @private
+   * @param {Object} result - 结果对象
+   * @param {Object} chunk - 当前块
+   */
+  static _mergeToolCalls(result, chunk) {
+    if (chunk.additional_kwargs?.tool_calls) {
+      if (!result.additional_kwargs) result.additional_kwargs = {};
+      if (!result.additional_kwargs.tool_calls) result.additional_kwargs.tool_calls = [];
+
+      for (const toolCall of chunk.additional_kwargs.tool_calls) {
+        const existingToolCall = result.additional_kwargs.tool_calls.find(
+          t => (t.id === toolCall.id || t.index === toolCall.index)
+        );
+
+        if (existingToolCall) {
+          // 合并相同ID的tool call
+          if (existingToolCall.function && toolCall.function) {
+            existingToolCall.function.arguments += toolCall.function.arguments;
+          }
+        } else {
+          // 添加新的tool call
+          result.additional_kwargs.tool_calls.push(JSON.parse(JSON.stringify(toolCall)));
+        }
+      }
+    }
+  }
+
+  /**
+   * 处理流式响应数据块
+   * @param {Object} data - 响应数据
+   * @param {Object} onGoingConv - 进行中的对话对象
+   * @param {Object} state - 状态对象
+   * @param {Function} getAgentHistory - 获取历史记录函数
+   * @param {Function} handleError - 错误处理函数
+   */
+  static async processResponseChunk(data, onGoingConv, state, getAgentHistory, handleError) {
+    try {
+      switch (data.status) {
+        case 'init':
+          // 代表服务端收到请求并返回第一个响应
+          state.waitingServerResponse = false;
+          onGoingConv.msgChunks[data.request_id] = [data.msg];
+          break;
+
+        case 'loading':
+          if (data.msg.id) {
+            if (!onGoingConv.msgChunks[data.msg.id]) {
+              onGoingConv.msgChunks[data.msg.id] = [];
+            }
+            onGoingConv.msgChunks[data.msg.id].push(data.msg);
+          }
+          break;
+
+        case 'error':
+          console.error("流式处理出错:", data.message);
+          handleError(new Error(data.message), 'stream');
+          break;
+
+        case 'finished':
+          await getAgentHistory();
+          break;
+
+        default:
+          console.warn('未知的响应状态:', data.status);
+      }
+    } catch (error) {
+      handleError(error, 'stream');
+    }
+  }
+
+  /**
+   * 处理流式响应
+   * @param {Response} response - 响应对象
+   * @param {Function} processChunk - 处理块的函数
+   * @param {Function} scrollToBottom - 滚动到底部函数
+   * @param {Function} handleError - 错误处理函数
+   */
+  static async handleStreamResponse(response, processChunk, scrollToBottom, handleError) {
+    try {
+      const reader = response.body.getReader();
+      let buffer = '';
+      const decoder = new TextDecoder();
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || ''; // 保留最后一行可能不完整的内容
+
+        for (const line of lines) {
+          if (line.trim()) {
+            try {
+              const data = JSON.parse(line.trim());
+              await processChunk(data);
+            } catch (e) {
+              console.debug('解析JSON出错:', e.message);
+            }
+          }
+        }
+        await scrollToBottom();
+      }
+
+      // 处理缓冲区中可能剩余的内容
+      if (buffer.trim()) {
+        try {
+          const data = JSON.parse(buffer.trim());
+          await processChunk(data);
+        } catch (e) {
+          console.warn('最终缓冲区内容无法解析:', buffer);
+        }
+      }
+    } catch (error) {
+      handleError(error, 'stream');
+    }
+  }
+}
+
+export default MessageProcessor;
\ No newline at end of file
diff --git a/web/src/utils/scrollController.js b/web/src/utils/scrollController.js
new file mode 100644
index 00000000..002d4d55
--- /dev/null
+++ b/web/src/utils/scrollController.js
@@ -0,0 +1,152 @@
+import { nextTick } from 'vue';
+
+/**
+ * 滚动控制工具类
+ */
+export class ScrollController {
+  constructor(containerSelector = '.chat', options = {}) {
+    this.containerSelector = containerSelector;
+    this.options = {
+      threshold: 100,
+      scrollDelay: 150,
+      retryDelays: [50, 150, 300],
+      ...options
+    };
+    
+    this.scrollTimer = null;
+    this.isUserScrolling = false;
+    this.shouldAutoScroll = true;
+
+    // Bind the context of 'this' for the event handler
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  /**
+   * 获取滚动容器
+   * @returns {Element|null}
+   */
+  getContainer() {
+    return document.querySelector(this.containerSelector);
+  }
+
+  /**
+   * 检查是否在底部
+   * @returns {boolean}
+   */
+  isAtBottom() {
+    const container = this.getContainer();
+    if (!container) return false;
+
+    const { threshold } = this.options;
+    return container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
+  }
+
+  /**
+   * 处理滚动事件
+   */
+  handleScroll() {
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer);
+    }
+
+    // 标记用户正在滚动
+    this.isUserScrolling = true;
+
+    // 检查是否在底部
+    const atBottom = this.isAtBottom();
+    this.shouldAutoScroll = atBottom;
+
+    // 滚动结束后一段时间重置用户滚动状态
+    this.scrollTimer = setTimeout(() => {
+      this.isUserScrolling = false;
+    }, this.options.scrollDelay);
+  }
+
+  /**
+   * 智能滚动到底部
+   * @param {boolean} force - 是否强制滚动
+   */
+  async scrollToBottom(force = false) {
+    await nextTick();
+
+    // 只有在应该自动滚动时才执行（除非强制）
+    if (!force && !this.shouldAutoScroll) return;
+
+    const container = this.getContainer();
+    if (!container) return;
+
+    const scrollOptions = { 
+      top: container.scrollHeight, 
+      behavior: 'smooth' 
+    };
+
+    // 立即滚动
+    container.scrollTo(scrollOptions);
+
+    // 多次重试确保滚动成功
+    this.options.retryDelays.forEach((delay, index) => {
+      setTimeout(() => {
+        if (force || this.shouldAutoScroll) {
+          const behavior = index === this.options.retryDelays.length - 1 ? 'auto' : 'smooth';
+          container.scrollTo({ 
+            top: container.scrollHeight, 
+            behavior 
+          });
+        }
+      }, delay);
+    });
+  }
+
+  /**
+   * 启用自动滚动
+   */
+  enableAutoScroll() {
+    this.shouldAutoScroll = true;
+  }
+
+  /**
+   * 禁用自动滚动
+   */
+  disableAutoScroll() {
+    this.shouldAutoScroll = false;
+  }
+
+  /**
+   * 获取滚动状态
+   */
+  getScrollState() {
+    return {
+      isUserScrolling: this.isUserScrolling,
+      shouldAutoScroll: this.shouldAutoScroll,
+      isAtBottom: this.isAtBottom()
+    };
+  }
+
+  /**
+   * 清理定时器
+   */
+  cleanup() {
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer);
+      this.scrollTimer = null;
+    }
+  }
+
+  /**
+   * 重置滚动状态
+   */
+  reset() {
+    this.cleanup();
+    this.isUserScrolling = false;
+    this.shouldAutoScroll = true;
+  }
+}
+
+/**
+ * 创建默认的滚动控制器实例
+ */
+export const createScrollController = (containerSelector, options) => {
+  return new ScrollController(containerSelector, options);
+};
+
+export default ScrollController;
\ No newline at end of file
diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue
index f8d81f83..81b123cd 100644
--- a/web/src/views/GraphView.vue
+++ b/web/src/views/GraphView.vue
@@ -63,6 +63,9 @@
       ok-text="添加到图数据库" cancel-text="取消"
       :confirm-loading="state.processing">
       <div class="upload">
+        <div class="note">
+          <p>上传的文件内容参考 test/data/A_Dream_of_Red_Mansions_tiny.jsonl 中的格式：</p>
+        </div>
         <a-upload-dragger
           class="upload-dragger"
           v-model:fileList="fileList"