diff --git a/package-lock.json b/package-lock.json
index 511fb68..166b1d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vscode-ai-chat-plugin",
       "version": "0.0.1",
       "dependencies": {
+        "@types/node": "^22.14.1",
         "ws": "^8.18.1"
       },
       "devDependencies": {
@@ -1016,10 +1017,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.14.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
-      "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
-      "dev": true,
+      "version": "22.14.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
+      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -11219,7 +11219,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
diff --git a/package.json b/package.json
index dbd2732..8c592ef 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "yo": "^4.3.1"
   },
   "dependencies": {
+    "@types/node": "^22.14.1",
     "ws": "^8.18.1"
   }
 }
diff --git a/src/components/ChatPanel.vue b/src/components/ChatPanel.vue
new file mode 100644
index 0000000..10bf487
--- /dev/null
+++ b/src/components/ChatPanel.vue
@@ -0,0 +1,108 @@
+  try {
+    // 设置加载状态
+    chatState.loading = true;
+    log('设置loading状态为true，准备发送到WebSocket');
+    
+    // 立即创建一个空的AI响应消息占位符，显示loading状态
+    const placeholderMessage: ChatMessage = {
+      id: currentGenerationId,
+      content: '',
+      role: 'assistant',
+      createAt: new Date()
+    };
+    chatState.messages.push(placeholderMessage);
+    log('添加了AI响应占位消息', placeholderMessage);
+    
+    // 再次滚动确保占位符可见
+    nextTick(() => {
+      scrollToBottom();
+      log('添加占位符后再次滚动到底部');
+    });
+    
+    // 设置自动超时处理
+    let loadingTimeout = setTimeout(() => {
+      if (chatState.loading) {
+        log('响应超时，自动重置loading状态');
+        chatState.loading = false;
+        
+        // 更新占位消息为超时提示
+        const timeoutIndex = chatState.messages.findIndex((m: ChatMessage) => m.id === currentGenerationId);
+        if (timeoutIndex !== -1) {
+          chatState.messages[timeoutIndex].content = '响应超时，请稍后再试或检查服务器状态';
+          log('更新占位消息为超时提示');
+        } else {
+          // 如果找不到占位消息，添加新的超时提示
+          const timeoutMessage: ChatMessage = {
+            id: `timeout-${Date.now()}`,
+            content: '响应超时，请稍后再试或检查服务器状态',
+            role: 'assistant',
+            createAt: new Date()
+          };
+          chatState.messages.push(timeoutMessage);
+          log('添加了超时提示消息');
+        }
+        
+        // 滚动到底部
+        nextTick(() => {
+          scrollToBottom();
+        });
+      }
+    }, 15000);
+
+    // 按照时间排序消息，确保按照正确的顺序处理
+    const sortedMessages = [...chatState.messages].sort((a: ChatMessage, b: ChatMessage) => 
+      a.createAt.getTime() - b.createAt.getTime()
+    );
+
+    // 找出最新的助手消息
+    const assistantMessages = sortedMessages.filter((m: ChatMessage) => m.role === 'assistant');
+    const latestAssistantMessage = assistantMessages.length > 0 
+      ? assistantMessages[assistantMessages.length - 1]
+      : null;
+
+    log('最新的助手消息:', latestAssistantMessage?.id);
+
+    // 用于跟踪已添加的用户消息内容
+    const userMessageContents = new Set();
+
+    // 处理每条消息
+    sortedMessages.forEach((message: ChatMessage) => {
+      const isAIMessage = message.role === 'assistant';
+      const isLatestAIMessage = isAIMessage && latestAssistantMessage && message.id === latestAssistantMessage.id;
+      
+      // 如果是完全空消息，跳过
+      if (message.content.trim() === '' && !isLatestAIMessage) {
+        return;
+      }
+      
+      // 专门针对用户消息进行内容去重
+      if (message.role === 'user') {
+        // 如果这个用户消息内容已经被添加过，跳过
+        if (userMessageContents.has(message.content)) {
+          log('跳过重复的用户消息:', message.content.substring(0, 20));
+          return;
+        }
+        
+        // 添加到已处理集合
+        userMessageContents.add(message.content);
+        
+        // 用户消息使用内容作为key，避免重复
+        const userKey = `user-${message.content}`;
+        
+        const bubbleMsg = {
+          key: message.id,
+          role: message.role as 'user' | 'assistant',
+          content: message.content || '',
+          loading: false,
+          timestamp: message.createAt ? message.createAt.toISOString() : new Date().toISOString()
+        };
+        
+        uniqueMessagesMap.set(userKey, bubbleMsg);
+        return;
+      }
+      
+      // ... existing code ...
+    });
+  } catch (error) {
+    console.error('发送消息时出错:', error);
+  } 
\ No newline at end of file
diff --git a/src/extension/ChatViewProvider.ts b/src/extension/ChatViewProvider.ts
index 4789cee..0706829 100644
--- a/src/extension/ChatViewProvider.ts
+++ b/src/extension/ChatViewProvider.ts
@@ -49,24 +49,32 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
           this._saveSettings(message.settings);
           break;
         case 'log':
-          // 为SettingsModal相关日志添加特殊标记
-          if (message.message && message.message.includes('SettingsModal')) {
-            this._logger(`【SettingsModal日志】: ${message.message}`);
-          }
-          // 为WebSocket连接相关日志添加更详细的输出
-          else if (message.message && (
-            message.message.includes('WebSocket') || 
-            message.message.includes('ChatStore') || 
-            message.message.includes('initWebSocketService')
-          )) {
-            this._logger(`WebSocket日志: ${message.message}`);
-          } 
-          // 为重要日志添加特殊标记
-          else if (message.message && message.message.includes('【重要】')) {
-            this._logger(`⚠️ ${message.message}`);
-          }
-          else {
-            this._logger(`WebView日志: ${message.message}`);
+          // 根据消息来源分类日志
+          if (message.message) {
+            // ChatPanel组件日志处理
+            if (message.message.includes('[ChatPanel]')) {
+              this._logger(`📱 ChatPanel日志: ${message.message}`);
+            }
+            // 为SettingsModal相关日志添加特殊标记
+            else if (message.message.includes('SettingsModal')) {
+              this._logger(`⚙️ SettingsModal日志: ${message.message}`);
+            }
+            // 为WebSocket连接相关日志添加更详细的输出
+            else if (message.message.includes('WebSocket') || 
+              message.message.includes('ChatStore') || 
+              message.message.includes('initWebSocketService')
+            ) {
+              this._logger(`🔌 WebSocket日志: ${message.message}`);
+            } 
+            // 为重要日志添加特殊标记
+            else if (message.message.includes('【重要】')) {
+              this._logger(`⚠️ ${message.message}`);
+            }
+            else {
+              this._logger(`WebView日志: ${message.message}`);
+            }
+          } else {
+            this._logger(`WebView日志: ${JSON.stringify(message)}`);
           }
           break;
         case 'error':
@@ -357,7 +365,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
         <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}';">
+          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src ws://localhost:8080; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}';">
           <title>AI Chat</title>
           <script nonce="${nonce}">
             const vscode = acquireVsCodeApi();
diff --git a/src/store/chat.ts b/src/store/chat.ts
new file mode 100644
index 0000000..e9df92e
--- /dev/null
+++ b/src/store/chat.ts
@@ -0,0 +1,487 @@
+// @ts-ignore - 在构建时忽略模块查找错误
+import { defineStore } from 'pinia';
+// @ts-ignore - 在构建时忽略模块查找错误
+import { ref, reactive, computed } from 'vue';
+
+// 使用正确的超时类型声明
+type TimeoutType = ReturnType<typeof setTimeout>;
+
+// 定义消息类型
+export interface ChatMessage {
+  id: string;
+  content: string;
+  role: 'user' | 'assistant' | 'system';
+  timestamp: number;
+}
+
+export interface SendMessageOptions {
+  messageId?: string;
+  model?: string;
+  [key: string]: any;
+}
+
+// WebSocket事件类型
+export enum WebSocketEvent {
+  CONNECTED = 'connected',
+  DISCONNECTED = 'disconnected',
+  MESSAGE = 'message',
+  ERROR = 'error',
+  MODEL_LIST = 'model_list'
+}
+
+// 定义VSCode API接口
+let vscode: any = undefined;
+
+// @ts-ignore
+try {
+  // @ts-ignore
+  vscode = acquireVsCodeApi();
+} catch (error) {
+  // 在开发环境下，可能没有VSCode API
+  console.warn('VSCode API不可用，可能是在浏览器开发环境中运行');
+}
+
+// WebSocket服务类 - 浏览器环境下实现
+export class WebSocketService {
+  private socket: WebSocket | null = null;
+  private requestMap = new Map<string, (response: any) => void>();
+  private nextRequestId = 1;
+  private reconnectAttempts = 0;
+  private reconnectTimer: TimeoutType | null = null;
+  private readonly MAX_RECONNECT_ATTEMPTS = 5;
+  private readonly RECONNECT_DELAY = 2000;
+  private isReconnecting = false;
+  private pingInterval: TimeoutType | null = null;
+  
+  public isConnected = false;
+  private eventListeners: Map<string, Array<(data?: any) => void>> = new Map();
+
+  constructor(private apiUrl: string, private apiKey: string, private logger: (message: string) => void = console.log) {}
+
+  /**
+   * 连接到WebSocket服务器
+   */
+  public connect(): void {
+    if (this.socket?.readyState === WebSocket.OPEN) {
+      this.logger("[WebSocketService] 已连接");
+      return;
+    }
+
+    try {
+      this.logger(`[WebSocketService] 尝试连接到: ${this.apiUrl}`);
+      
+      // 检查URL格式
+      let wsUrl = this.apiUrl;
+      
+      // 确保URL以/ws结尾，但避免重复
+      if (!wsUrl.endsWith('/ws')) {
+        if (wsUrl.endsWith('/')) {
+          wsUrl += 'ws';
+        } else {
+          wsUrl += '/ws';
+        }
+      }
+      
+      // 检查是否有API密钥，如果有则添加为查询参数
+      if (this.apiKey) {
+        const separator = wsUrl.includes('?') ? '&' : '?';
+        wsUrl += `${separator}api_key=${this.apiKey}`;
+      }
+      
+      this.logger(`[WebSocketService] 最终WebSocket URL: ${wsUrl}`);
+      this.socket = new WebSocket(wsUrl);
+      this.setupEventHandlers();
+    } catch (error) {
+      this.logger(`[WebSocketService] 连接失败: ${error}`);
+      this.emit(WebSocketEvent.ERROR, `连接失败: ${error}`);
+      this.scheduleReconnect();
+    }
+  }
+
+  /**
+   * 断开WebSocket连接
+   */
+  public disconnect(): void {
+    this.clearTimers();
+    
+    if (this.socket) {
+      try {
+        this.socket.close();
+      } catch (err) {
+        this.logger(`关闭WebSocket时出错: ${err}`);
+      }
+      this.socket = null;
+    }
+    
+    this.isConnected = false;
+    this.emit(WebSocketEvent.DISCONNECTED);
+  }
+
+  /**
+   * 监听事件
+   */
+  public on(event: WebSocketEvent, callback: (data?: any) => void): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, []);
+    }
+    
+    this.eventListeners.get(event)?.push(callback);
+  }
+
+  /**
+   * 移除事件监听
+   */
+  public off(event: WebSocketEvent, callback: (data?: any) => void): void {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+      if (index !== -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * 触发事件
+   */
+  private emit(event: WebSocketEvent, data?: any): void {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      listeners.forEach(callback => callback(data));
+    }
+  }
+
+  /**
+   * 发送聊天消息到websocket
+   * @param message 用户消息
+   * @param opts 发送选项
+   * @returns 返回一个Promise，解析为响应内容
+   */
+  sendChatMessage(message: string, opts: SendMessageOptions = {}): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+        this.logger('[WebSocketService] WebSocket not connected, cannot send message');
+        return reject('WebSocket未连接');
+      }
+
+      const requestId = Date.now().toString();
+      
+      // 创建符合API文档格式的请求
+      const request = {
+        cmd: 'exec_chat',
+        request_id: requestId,
+        msg: message,
+        model: opts.model || '',
+        stream: false // 目前不支持流式响应
+      };
+
+      this.logger(`[WebSocketService] Sending message: ${JSON.stringify(request)}`);
+      
+      // 注册请求处理函数
+      this.registerRequestHandler(requestId, (response) => {
+        if (response.error) {
+          this.logger(`[WebSocketService] Chat error: ${response.error}`);
+          reject(response.error);
+        } else if (response.reply !== undefined) {
+          // 发送AI回复到消息列表
+          this.emit(WebSocketEvent.MESSAGE, {
+            id: `ai-${Date.now()}`,
+            content: response.reply,
+            role: 'assistant',
+            timestamp: Date.now()
+          });
+          resolve(response.reply);
+        } else {
+          this.logger('[WebSocketService] Invalid chat response format');
+          reject('无效的聊天响应格式');
+        }
+      });
+      
+      // 发送请求
+      this.socket.send(JSON.stringify(request));
+      
+      // 发送用户消息到消息列表
+      this.emit(WebSocketEvent.MESSAGE, {
+        id: opts.messageId || `user-${Date.now()}`,
+        content: message,
+        role: 'user',
+        timestamp: Date.now()
+      });
+    });
+  }
+
+  /**
+   * 获取模型列表
+   * @returns 返回包含模型列表的Promise
+   */
+  getModelList(): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+        this.logger('[WebSocketService] WebSocket not connected, cannot get model list');
+        return reject('WebSocket未连接');
+      }
+
+      const requestId = Date.now().toString();
+      
+      // 创建符合API文档格式的请求
+      const request = {
+        cmd: 'list_model',
+        request_id: requestId
+      };
+
+      this.logger(`[WebSocketService] Requesting model list: ${JSON.stringify(request)}`);
+      
+      // 注册请求处理函数
+      this.registerRequestHandler(requestId, (response) => {
+        if (response.error) {
+          this.logger(`[WebSocketService] Model list error: ${response.error}`);
+          reject(response.error);
+        } else if (response.models && Array.isArray(response.models)) {
+          this.logger(`[WebSocketService] Got model list: ${response.models.join(', ')}`);
+          resolve(response.models);
+        } else {
+          this.logger('[WebSocketService] Invalid model list response format');
+          reject('无效的模型列表响应格式');
+        }
+      });
+      
+      // 发送请求
+      this.socket.send(JSON.stringify(request));
+    });
+  }
+
+  /**
+   * 安排重连
+   */
+  private scheduleReconnect(): void {
+    if (this.isReconnecting || this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
+      if (this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
+        this.logger(`达到最大重连尝试次数 (${this.MAX_RECONNECT_ATTEMPTS})，停止重连`);
+        this.emit(WebSocketEvent.ERROR, `连接失败：已尝试 ${this.MAX_RECONNECT_ATTEMPTS} 次重连，请检查网络或服务器状态后手动重连`);
+      }
+      return;
+    }
+    
+    this.isReconnecting = true;
+    this.reconnectAttempts++;
+    
+    this.reconnectTimer = setTimeout(() => {
+      this.isReconnecting = false;
+      this.connect();
+    }, 2000);
+  }
+
+  /**
+   * 清除所有定时器
+   */
+  private clearTimers(): void {
+    if (this.pingInterval !== null) {
+      clearInterval(this.pingInterval);
+      this.pingInterval = null;
+    }
+    
+    if (this.reconnectTimer !== null) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
+  /**
+   * 设置WebSocket事件处理器
+   */
+  private setupEventHandlers(): void {
+    if (!this.socket) {
+      this.logger('[WebSocketService] 无法设置事件处理器: socket为null');
+      return;
+    }
+
+    this.socket.onopen = () => {
+      this.logger('[WebSocketService] WebSocket连接已建立成功');
+      this.isConnected = true;
+      this.emit(WebSocketEvent.CONNECTED);
+    };
+    
+    this.socket.onmessage = (event) => {
+      this.logger(`[WebSocketService] 收到消息: ${event.data}`);
+      try {
+        const data = JSON.parse(event.data);
+        
+        // 检查是否有request_id
+        if (data.request_id) {
+          // 查找这个请求是否有注册的回调处理函数
+          const handler = this.requestMap.get(data.request_id);
+          if (handler) {
+            handler(data);
+            this.requestMap.delete(data.request_id);
+            return;
+          }
+        }
+        
+        // 如果没有request_id或没有找到对应的处理函数，才作为普通消息广播
+        // 防止重复处理消息
+        this.logger('[WebSocketService] 收到未处理的消息，作为通用消息广播');
+        this.emit(WebSocketEvent.MESSAGE, data);
+      } catch (error) {
+        console.error('解析WebSocket消息失败:', error);
+      }
+    };
+    
+    this.socket.onerror = () => {
+      this.logger('[WebSocketService] WebSocket错误');
+      this.emit(WebSocketEvent.ERROR, '连接错误');
+      this.scheduleReconnect();
+    };
+    
+    this.socket.onclose = () => {
+      this.logger('[WebSocketService] WebSocket连接关闭');
+      this.isConnected = false;
+      this.clearTimers();
+      this.emit(WebSocketEvent.DISCONNECTED);
+      this.scheduleReconnect();
+    };
+  }
+
+  /**
+   * 注册请求处理函数
+   * @param requestId 请求ID
+   * @param handler 回调函数
+   */
+  private registerRequestHandler(requestId: string, handler: (response: any) => void): void {
+    this.requestMap.set(requestId, handler);
+    
+    // 设置超时处理，避免请求没有响应导致内存泄漏
+    setTimeout(() => {
+      if (this.requestMap.has(requestId)) {
+        this.logger(`[WebSocketService] 请求 ${requestId} 超时，移除处理函数`);
+        this.requestMap.delete(requestId);
+      }
+    }, 30000); // 30秒超时
+  }
+}
+
+// 创建聊天状态管理
+export const useChatStore = defineStore('chat', () => {
+  // WebSocket服务实例
+  const wsService = ref<WebSocketService | null>(null);
+
+  // 聊天状态
+  const chatState = reactive({
+    messages: [] as ChatMessage[],
+    loading: false,
+    connectionStatus: 'disconnected' as 'connecting' | 'connected' | 'disconnected' | 'error',
+    errorMessage: '',
+    availableModels: [] as string[],
+    currentModel: '',
+    loadingModels: false
+  });
+
+  // 初始化WebSocket服务
+  function initWebSocketService(apiUrl: string, apiKey: string) {
+    if (wsService.value) {
+      wsService.value.disconnect();
+    }
+    wsService.value = new WebSocketService(apiUrl, apiKey);
+    
+    wsService.value.on(WebSocketEvent.CONNECTED, () => {
+      chatState.connectionStatus = 'connected';
+      chatState.errorMessage = '';
+      
+      // 当连接建立后，自动获取模型列表
+      refreshModels();
+    });
+    
+    wsService.value.on(WebSocketEvent.DISCONNECTED, () => {
+      chatState.connectionStatus = 'disconnected';
+    });
+    
+    wsService.value.on(WebSocketEvent.ERROR, (error: string) => {
+      chatState.errorMessage = error;
+      chatState.connectionStatus = 'error';
+    });
+    
+    wsService.value.on(WebSocketEvent.MESSAGE, (message: ChatMessage) => {
+      chatState.messages.push(message);
+      chatState.loading = false;
+    });
+    
+    chatState.connectionStatus = 'connecting';
+    wsService.value.connect();
+  }
+
+  // 发送消息
+  async function sendMessage(content: string): Promise<string> {
+    if (!wsService.value) {
+      throw new Error('WebSocket服务未初始化');
+    }
+    
+    if (!content.trim()) {
+      return '';
+    }
+    
+    chatState.loading = true;
+    
+    try {
+      // 不需要手动添加消息到聊天历史，WebSocketService会通过事件发送
+      const response = await wsService.value.sendChatMessage(content, { model: chatState.currentModel });
+      return response;
+    } catch (error) {
+      chatState.errorMessage = `发送消息失败: ${error}`;
+      throw error;
+    } finally {
+      chatState.loading = false;
+    }
+  }
+
+  // 刷新模型列表
+  async function refreshModels() {
+    if (!wsService.value) {
+      chatState.errorMessage = '无法获取模型列表：WebSocket服务未初始化';
+      return;
+    }
+
+    chatState.loadingModels = true;
+    
+    try {
+      const models = await wsService.value.getModelList();
+      chatState.availableModels = models;
+      
+      // 如果当前模型不在可用列表中，并且有可用模型，则设置为第一个可用模型
+      if (models.length > 0 && !models.includes(chatState.currentModel)) {
+        chatState.currentModel = models[0];
+      }
+    } catch (error) {
+      chatState.errorMessage = `获取模型列表失败: ${error}`;
+    } finally {
+      chatState.loadingModels = false;
+    }
+  }
+
+  // 设置当前模型
+  function setCurrentModel(model: string) {
+    chatState.currentModel = model;
+  }
+
+  // 清空消息
+  function clearMessages() {
+    chatState.messages = [];
+  }
+
+  // 手动重连
+  function reconnect() {
+    if (wsService.value) {
+      wsService.value.disconnect();
+      chatState.connectionStatus = 'connecting';
+      wsService.value.connect();
+    }
+  }
+
+  return {
+    chatState,
+    initWebSocketService,
+    sendMessage,
+    refreshModels,
+    setCurrentModel,
+    clearMessages,
+    reconnect
+  };
+}); 
\ No newline at end of file
diff --git a/webview/package-lock.json b/webview/package-lock.json
index 569afc9..0286c1a 100644
--- a/webview/package-lock.json
+++ b/webview/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@ant-design/icons-vue": "^7.0.1",
+        "@types/uuid": "^10.0.0",
         "ant-design-vue": "^4.2.6",
         "ant-design-x-vue": "^1.0.7",
         "axios": "^1.6.0",
@@ -18,6 +19,7 @@
         "marked": "^15.0.7",
         "pinia": "^2.1.0",
         "utf-8-validate": "^6.0.5",
+        "uuid": "^11.1.0",
         "vue": "^3.3.0",
         "vue-router": "^4.5.0"
       },
@@ -952,6 +954,12 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -2452,6 +2460,19 @@
         "node": ">=6.14.2"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.11.tgz",
diff --git a/webview/package.json b/webview/package.json
index 8aa4164..723af7d 100644
--- a/webview/package.json
+++ b/webview/package.json
@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@types/uuid": "^10.0.0",
     "ant-design-vue": "^4.2.6",
     "ant-design-x-vue": "^1.0.7",
     "axios": "^1.6.0",
@@ -20,6 +21,7 @@
     "marked": "^15.0.7",
     "pinia": "^2.1.0",
     "utf-8-validate": "^6.0.5",
+    "uuid": "^11.1.0",
     "vue": "^3.3.0",
     "vue-router": "^4.5.0"
   },
diff --git a/webview/src/components/ChatPanel.vue b/webview/src/components/ChatPanel.vue
index aaa0b8f..9c6c0ec 100644
--- a/webview/src/components/ChatPanel.vue
+++ b/webview/src/components/ChatPanel.vue
@@ -2,7 +2,7 @@
   <div :class="$style.chatPanel">
     <Header :class="$style.header" title="AI 聊天" />
     
-    <div :class="$style.conversationContainer">
+    <div :class="[$style.conversationContainer, 'conversationContainer']">
       <div v-if="chatState.connectionStatus === 'connecting'" :class="$style.statusMessage">
         <a-spin /> 正在连接AI服务...
       </div>
@@ -29,34 +29,43 @@
         </a-button>
       </div>
       
-      <a-x-conversations
-        v-model:messages="chatState.messages"
-        :class="$style.conversations"
-        :loading="chatState.loading"
-      >
-        <template #avatar="{ message }">
-          <a-avatar :class="$style.avatar">
-            <template #icon>
-              <user-outlined v-if="message.role === 'user'" />
-              <robot-outlined v-else />
-            </template>
-          </a-avatar>
-        </template>
-      </a-x-conversations>
+      <div v-else-if="chatState.messages.length === 0" :class="$style.emptyState">
+        <div :class="$style.emptyContent">
+          <robot-outlined :class="$style.emptyIcon" />
+          <div :class="$style.emptyTitle">开始新的对话</div>
+          <div :class="$style.emptyDescription">请在下方输入您的问题...</div>
+        </div>
+      </div>
+      
+      <div v-else :class="$style.bubbleContainer">
+        <div v-for="msg in chatMessagesForBubble" :key="msg.key" :class="$style.messageBubble">
+          <div :class="[
+            $style.messageWrapper, 
+            msg.role === 'user' ? $style.userMessage : $style.assistantMessage
+          ]">
+            <a-avatar 
+              :icon="bubbleRoles[msg.role].avatar.icon" 
+              :style="bubbleRoles[msg.role].avatar.style"
+              :class="$style.messageAvatar"
+            />
+            <div :class="$style.messageBubbleContent" 
+                 :data-loading="msg.loading" 
+                 v-html="formatMessage(msg.content)">
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     
     <div :class="$style.footer">
       <a-x-sender
-        v-model:value="inputValue"
         :placeholder="chatState.currentModel ? `使用 ${chatState.currentModel} 模型对话` : '请先选择AI模型'"
         :loading="chatState.loading"
         :disabled="chatState.loading || chatState.connectionStatus !== 'connected'"
-        send-button-text="发送"
-        :send-button-props="{ type: 'primary', shape: 'round' }"
-        :rows="3"
         :auto-size="{ minRows: 1, maxRows: 5 }"
-        @send="handleSend"
-        @keydown.enter.ctrl.prevent="handleSend(inputValue)"
+        submitType="enter"
+        @submit="onSendMessage"
+        @cancel="onCancelGeneration"
       />
       
       <div :class="$style.modelSelector">
@@ -88,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, computed, onBeforeUnmount, nextTick } from 'vue';
 import { 
   RobotOutlined,
   UserOutlined,
@@ -97,19 +106,468 @@ import {
 import Header from './Header.vue';
 import { useChatStore, ChatMessage } from '../store/chat';
 
+// 日志工具函数，确保同时发送到浏览器控制台和VS Code
+function log(message: string, ...args: any[]) {
+  // 打印到浏览器控制台
+  console.log(`[ChatPanel] ${message}`, ...args);
+  
+  // 发送到VS Code
+  try {
+    if (window.vscodeApi) {
+      window.vscodeApi.postMessage({
+        type: 'log',
+        message: `[ChatPanel] ${message} ${args.map(arg => JSON.stringify(arg)).join(' ')}`
+      });
+    } else if (vscode) {
+      vscode.postMessage({
+        type: 'log',
+        message: `[ChatPanel] ${message} ${args.map(arg => JSON.stringify(arg)).join(' ')}`
+      });
+    }
+  } catch (err) {
+    console.error('发送日志到VS Code失败:', err);
+  }
+}
+
 // 使用聊天状态管理
 const chatStore = useChatStore();
 const { chatState } = chatStore;
 
-// 输入框值
+// 当前生成任务的ID
+let currentGenerationId: string | null = null;
+
+// 输入框的值
 const inputValue = ref('');
 
+// 取消生成
+function onCancelGeneration() {
+  if (chatState.loading) {
+    console.log('用户取消了生成');
+    chatState.loading = false;
+    
+    // 这里可以添加取消流式生成的逻辑，但当前API似乎没有提供
+    // 所以我们只是在UI层面结束loading状态
+  }
+}
+
 // VSCode API
 const vscode = acquireVsCodeApiSafe();
 
+// 定义气泡角色
+const bubbleRoles: Record<string, {
+  placement: string,
+  avatar: { 
+    icon: any,
+    style: Record<string, string>
+  },
+  typing?: { step: number, interval: number }
+}> = {
+  user: {
+    placement: 'end',
+    avatar: { 
+      icon: UserOutlined, 
+      style: { background: '#87d068' } 
+    }
+  },
+  assistant: {
+    placement: 'start',
+    avatar: { 
+      icon: RobotOutlined, 
+      style: { background: '#1890ff' } 
+    },
+    typing: { step: 5, interval: 20 }
+  }
+};
+
+// 转换消息格式以供显示使用
+const chatMessagesForBubble = computed(() => {
+  log('当前消息列表:', chatState.messages, '加载状态:', chatState.loading);
+  
+  // 确保消息有内容
+  if (!chatState.messages || chatState.messages.length === 0) {
+    log('消息列表为空');
+    return [];
+  }
+  
+  // 使用Map以角色+消息ID为键进行去重
+  const uniqueMessagesMap = new Map();
+  
+  // 按照时间排序消息，确保按照正确的顺序处理
+  const sortedMessages = [...chatState.messages].sort((a, b) => 
+    a.createAt.getTime() - b.createAt.getTime()
+  );
+  
+  // 找出最新的助手消息
+  const assistantMessages = sortedMessages.filter(m => m.role === 'assistant');
+  const latestAssistantMessage = assistantMessages.length > 0 
+    ? assistantMessages[assistantMessages.length - 1]
+    : null;
+  
+  log('最新的助手消息:', latestAssistantMessage?.id);
+  
+  // 用于跟踪已添加的用户消息内容
+  const userMessageContents = new Set();
+  
+  // 处理每条消息
+  sortedMessages.forEach(message => {
+    const isAIMessage = message.role === 'assistant';
+    const isLatestAIMessage = isAIMessage && latestAssistantMessage && message.id === latestAssistantMessage.id;
+    
+    // 如果是完全空消息，跳过
+    if (message.content.trim() === '' && !isLatestAIMessage) {
+      return;
+    }
+    
+    // 专门针对用户消息进行内容去重
+    if (message.role === 'user') {
+      // 如果这个用户消息内容已经被添加过，跳过
+      if (userMessageContents.has(message.content)) {
+        log('跳过重复的用户消息:', message.content.substring(0, 20));
+        return;
+      }
+      
+      // 添加到已处理集合
+      userMessageContents.add(message.content);
+      
+      // 用户消息使用内容作为key，避免重复
+      const userKey = `user-${message.content}`;
+      
+      const bubbleMsg = {
+        key: message.id,
+        role: message.role as 'user' | 'assistant',
+        content: message.content || '',
+        loading: false,
+        timestamp: message.createAt ? message.createAt.toISOString() : new Date().toISOString()
+      };
+      
+      uniqueMessagesMap.set(userKey, bubbleMsg);
+      return;
+    }
+    
+    // 助手消息处理
+    // 提取基本消息ID用于去重
+    let baseId = '';
+    if (message.id.includes('-')) {
+      // 对于response-123-456这样的ID，我们只取前两部分
+      const parts = message.id.split('-');
+      if (parts.length >= 2) {
+        baseId = `${parts[0]}-${parts[1]}`; // 例如response-123
+      } else {
+        baseId = message.id;
+      }
+    } else {
+      baseId = message.id;
+    }
+    
+    const messageKey = `${message.role}-${baseId}`;
+    
+    // 创建UI显示用的消息对象
+    const bubbleMsg = {
+      key: message.id,
+      role: message.role as 'user' | 'assistant', // 确保角色类型正确
+      content: message.content || '',
+      // 仅对最新的AI消息显示loading状态
+      loading: chatState.loading && isLatestAIMessage,
+      // 添加时间戳供排序
+      timestamp: message.createAt ? message.createAt.toISOString() : new Date().toISOString()
+    };
+    
+    // 如果已存在相同key的消息，决定是否替换
+    const existingMsg = uniqueMessagesMap.get(messageKey);
+    if (!existingMsg) {
+      // 还没有此key的消息，直接添加
+      uniqueMessagesMap.set(messageKey, bubbleMsg);
+    } else if (bubbleMsg.content.length > existingMsg.content.length) {
+      // 新消息内容更长，替换旧消息
+      uniqueMessagesMap.set(messageKey, bubbleMsg);
+    } else if (isLatestAIMessage && chatState.loading) {
+      // 是最新AI消息且处于加载状态，替换以更新loading状态
+      uniqueMessagesMap.set(messageKey, bubbleMsg);
+    }
+  });
+  
+  // 转换为有序数组
+  const bubbleMessages = Array.from(uniqueMessagesMap.values());
+  
+  // 按时间戳排序
+  bubbleMessages.sort((a, b) => {
+    return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
+  });
+  
+  log('最终气泡消息列表:', bubbleMessages.length);
+  return bubbleMessages;
+});
+
+// 发送消息
+async function onSendMessage(content: string) {
+  log('onSendMessage调用', content);
+  if (!content.trim()) {
+    log('消息为空，不发送', { isEmpty: !content.trim() });
+    return;
+  }
+  
+  if (chatState.connectionStatus !== 'connected') {
+    log('WebSocket未连接', chatState.connectionStatus);
+    chatState.errorMessage = 'WebSocket未连接，请确保连接已建立';
+    chatState.connectionStatus = 'error';
+    return;
+  }
+  
+  // 检查是否有选择模型
+  if (!chatState.currentModel) {
+    log('未选择模型，无法发送消息');
+    chatState.errorMessage = '请先选择一个AI模型';
+    return;
+  }
+  
+  log('开始发送消息:', content);
+  log('使用模型:', chatState.currentModel);
+  
+  // 检查当前聊天列表
+  log('发送前聊天列表状态:', JSON.stringify(chatState.messages.map(m => ({
+    id: m.id,
+    role: m.role,
+    contentLength: m.content ? m.content.length : 0
+  }))));
+  
+  // 清空输入框
+  inputValue.value = '';
+  
+  // 清空现有的空占位符消息
+  chatState.messages = chatState.messages.filter(m => 
+    !(m.role === 'assistant' && (!m.content || m.content.trim() === ''))
+  );
+  
+  // 添加用户消息到聊天列表，确保不重复
+  const existingUserMsg = chatState.messages.find(m => 
+    m.role === 'user' && m.content === content
+  );
+  
+  if (!existingUserMsg) {
+    const userMessage: ChatMessage = {
+      id: `user-${Date.now()}`,
+      content: content,
+      role: 'user',
+      createAt: new Date()
+    };
+    chatState.messages.push(userMessage);
+    log('用户消息已添加到聊天列表', userMessage);
+  } else {
+    log('跳过添加已存在的用户消息', existingUserMsg);
+  }
+  
+  // 立即滚动到底部确保用户消息可见
+  nextTick(() => {
+    scrollToBottom();
+    log('用户消息后立即滚动到底部');
+  });
+  
+  // 初始AI消息ID
+  const messageStartTime = Date.now();
+  currentGenerationId = `response-${messageStartTime}`;
+  
+  try {
+    // 设置加载状态
+    chatState.loading = true;
+    log('设置loading状态为true，准备发送到WebSocket');
+    
+    // 立即创建一个空的AI响应消息占位符，显示loading状态
+    const placeholderMessage: ChatMessage = {
+      id: currentGenerationId,
+      content: '',
+      role: 'assistant',
+      createAt: new Date()
+    };
+    chatState.messages.push(placeholderMessage);
+    log('添加了AI响应占位消息', placeholderMessage);
+    
+    // 再次滚动确保占位符可见
+    nextTick(() => {
+      scrollToBottom();
+      log('添加占位符后再次滚动到底部');
+    });
+    
+    // 设置自动超时处理
+    let loadingTimeout = setTimeout(() => {
+      if (chatState.loading) {
+        log('响应超时，自动重置loading状态');
+        chatState.loading = false;
+        
+        // 更新占位消息为超时提示
+        const timeoutIndex = chatState.messages.findIndex(m => m.id === currentGenerationId);
+        if (timeoutIndex !== -1) {
+          chatState.messages[timeoutIndex].content = '响应超时，请稍后再试或检查服务器状态';
+          log('更新占位消息为超时提示');
+        } else {
+          // 如果找不到占位消息，添加新的超时提示
+          const timeoutMessage: ChatMessage = {
+            id: `timeout-${Date.now()}`,
+            content: '响应超时，请稍后再试或检查服务器状态',
+            role: 'assistant',
+            createAt: new Date()
+          };
+          chatState.messages.push(timeoutMessage);
+          log('添加了超时提示消息');
+        }
+        
+        // 滚动到底部
+        nextTick(() => {
+          scrollToBottom();
+        });
+      }
+    }, 15000);
+    
+    // 发送消息到服务器
+    log('调用chatStore.sendMessage发送消息，模型:', chatState.currentModel);
+    try {
+      const response = await chatStore.sendMessage(content);
+      log('消息发送完成，收到响应长度:', response ? response.length : 0);
+      
+      // 清除超时定时器
+      clearTimeout(loadingTimeout);
+      
+      if (response) {
+        log('响应前100个字符:', response.substring(0, 100));
+        
+        // 查找占位消息并更新内容 - 避免占位消息与WebSocket响应消息重复
+        const responseIndex = chatState.messages.findIndex(m => m.id === currentGenerationId);
+        
+        // 检查是否已有相同内容的响应
+        const existingResponse = chatState.messages.find(m => 
+          m.role === 'assistant' && 
+          m.id !== currentGenerationId && 
+          m.content === response
+        );
+        
+        if (responseIndex !== -1 && !existingResponse) {
+          // 更新占位消息内容
+          chatState.messages[responseIndex].content = response;
+          log('更新了占位消息的内容');
+        } else if (!existingResponse) {
+          // 如果找不到占位消息但有响应，且响应未被添加，则添加新消息
+          const assistantMessage: ChatMessage = {
+            id: `manual-${Date.now()}`,
+            content: response,
+            role: 'assistant',
+            createAt: new Date()
+          };
+          chatState.messages.push(assistantMessage);
+          log('没有找到占位消息，添加了新的AI响应');
+        } else {
+          log('占位消息已被WebSocket事件更新或响应已存在，跳过手动更新');
+        }
+      } else {
+        log('收到空响应');
+      }
+      
+      // 确保loading状态被重置
+      chatState.loading = false;
+      
+      // 再次滚动到底部确保所有内容可见
+      nextTick(() => {
+        scrollToBottom();
+        log('响应完成后滚动到底部');
+      });
+    } catch (error) {
+      console.error('消息发送失败:', error);
+      log('消息发送失败:', error);
+      
+      // 清除超时定时器
+      clearTimeout(loadingTimeout);
+      
+      // 查找占位消息并更新为错误信息
+      const responseIndex = chatState.messages.findIndex(m => m.id === currentGenerationId);
+      const errorContent = `发送失败: ${error instanceof Error ? error.message : '未知错误'}`;
+      
+      if (responseIndex !== -1) {
+        // 更新占位消息内容为错误信息
+        chatState.messages[responseIndex].content = errorContent;
+        log('更新了占位消息为错误信息');
+      } else {
+        // 如果找不到占位消息，添加新的错误消息
+        const errorMessage: ChatMessage = {
+          id: `error-${Date.now()}`,
+          content: errorContent,
+          role: 'assistant',
+          createAt: new Date()
+        };
+        chatState.messages.push(errorMessage);
+        log('添加了新的错误消息');
+      }
+      
+      chatState.loading = false;
+      
+      // 滚动到底部
+      nextTick(() => {
+        scrollToBottom();
+      });
+    }
+  } catch (error) {
+    console.error('消息发送失败:', error);
+    log('消息发送失败:', error);
+    
+    // 清除超时定时器
+    clearTimeout(loadingTimeout);
+    
+    // 查找占位消息并更新为错误信息
+    const responseIndex = chatState.messages.findIndex(m => m.id === currentGenerationId);
+    const errorContent = `发送失败: ${error instanceof Error ? error.message : '未知错误'}`;
+    
+    if (responseIndex !== -1) {
+      // 更新占位消息内容为错误信息
+      chatState.messages[responseIndex].content = errorContent;
+      log('更新了占位消息为错误信息');
+    } else {
+      // 如果找不到占位消息，添加新的错误消息
+      const errorMessage: ChatMessage = {
+        id: `error-${Date.now()}`,
+        content: errorContent,
+        role: 'assistant',
+        createAt: new Date()
+      };
+      chatState.messages.push(errorMessage);
+      log('添加了新的错误消息');
+    }
+    
+    chatState.loading = false;
+    
+    // 滚动到底部
+    nextTick(() => {
+      scrollToBottom();
+    });
+  }
+}
+
+// 辅助函数：滚动到底部
+const scrollToBottom = () => {
+  nextTick(() => {
+    const container = document.querySelector('.conversationContainer');
+    if (container) {
+      log('滚动容器找到，当前高度:', container.scrollHeight);
+      container.scrollTop = container.scrollHeight;
+    } else {
+      log('警告: 无法找到聊天容器元素(.conversationContainer)');
+      // 尝试直接使用元素选择器
+      const fallbackContainers = document.querySelectorAll('div[class*="conversationContainer"]');
+      if (fallbackContainers.length > 0) {
+        log('使用备用选择器找到容器数量:', fallbackContainers.length);
+        fallbackContainers.forEach(el => {
+          el.scrollTop = el.scrollHeight;
+        });
+      } else {
+        log('严重错误: 无法找到任何可滚动容器');
+      }
+    }
+  });
+};
+
 // 监听来自VSCode的消息
 onMounted(() => {
-  console.log('ChatPanel组件已挂载');
+  log('ChatPanel组件已挂载');
+  
+  // 检测是否在VS Code环境中运行
+  const isInVSCode = !!window.acquireVsCodeApi;
+  log('运行环境检测:', isInVSCode ? 'VS Code WebView' : '浏览器/开发环境');
   
   // 初始化聊天状态
   if (chatState.availableModels.length === 0) {
@@ -118,69 +576,137 @@ onMounted(() => {
       'deepseek-r1:32b', 
       'qwen2.5-coder:7b'
     ];
-    console.log('设置默认模型列表:', chatState.availableModels);
+    log('设置默认模型列表:', chatState.availableModels);
+  }
+  
+  // 确保选择了一个模型
+  if (!chatState.currentModel && chatState.availableModels.length > 0) {
+    chatState.currentModel = chatState.availableModels[0];
+    log('自动选择第一个模型:', chatState.currentModel);
   }
   
   // 从VSCode获取配置信息
   if (vscode) {
+    log('正在从VSCode获取配置信息');
     vscode.postMessage({
       type: 'getSettings'
     });
+  } else {
+    log('VSCode API不可用，无法获取配置');
+    
+    // 如果处于开发环境，尝试直接初始化WebSocket
+    if (process.env.NODE_ENV === 'development' || !isInVSCode) {
+      log('开发环境，使用默认配置初始化WebSocket');
+      const devConfig = {
+        apiHost: window.location.origin.replace(/^http/, 'ws') || 'ws://localhost:8080',
+        apiKey: 'dev_api_key'
+      };
+      log('开发环境配置:', devConfig);
+      chatStore.initWebSocketService(devConfig.apiHost, devConfig.apiKey);
+    }
   }
   
   // 监听来自VSCode的消息
-  window.addEventListener('message', event => {
-    const message = event.data;
-    
-    switch (message.type) {
-      case 'settings':
-        if (message.settings.apiHost && message.settings.apiKey) {
-          console.log('收到API配置，初始化WebSocket连接', message.settings);
-          // 初始化WebSocket服务
-          chatStore.initWebSocketService(message.settings.apiHost, message.settings.apiKey);
-          
-          // 检查连接状态
-          setTimeout(() => {
-            if (chatState.connectionStatus === 'connecting') {
-              console.log('连接正在进行中...');
-            } else if (chatState.connectionStatus === 'connected') {
-              console.log('WebSocket连接成功');
-            } else {
-              console.error('WebSocket连接失败:', chatState.errorMessage);
-            }
-          }, 2000); // 给2秒钟时间建立连接
-        } else {
-          console.warn('收到的API配置不完整，无法初始化WebSocket连接');
-        }
-        break;
-        
-      case 'connectionStatus':
-        // 这个消息现在由WebSocketService自己处理
-        break;
-        
-      case 'receiveMessage':
-        // 这个消息现在由WebSocketService自己处理
-        break;
-        
-      case 'clearMessages':
-        chatStore.clearMessages();
-        break;
-        
-      case 'models':
-        // 模型列表现在由WebSocketService自己获取和管理
-        break;
-        
-      case 'modelChanged':
-        if (message.model) {
-          chatStore.setCurrentModel(message.model);
-        }
-        break;
-        
-      case 'error':
-        // 错误现在由WebSocketService自己处理
-        break;
+  window.addEventListener('message', handleVSCodeMessage);
+  
+  // 添加消息监听，以自动滚动到底部
+  const messageObserver = new MutationObserver(mutations => {
+    // 检测到聊天消息变化时，滚动到底部
+    if (mutations.some(m => m.addedNodes.length > 0)) {
+      log('检测到DOM变化，自动滚动到底部');
+      scrollToBottom();
     }
   });
+  
+  // 延迟300ms，确保DOM已渲染
+  setTimeout(() => {
+    // 先尝试使用主选择器
+    const container = document.querySelector('.conversationContainer');
+    
+    if (container) {
+      log('找到消息容器，设置变化监听');
+      messageObserver.observe(container, { childList: true, subtree: true });
+      // 初始滚动
+      scrollToBottom();
+    } else {
+      // 尝试使用备用选择器
+      log('使用主选择器未找到容器，尝试备用选择器');
+      const fallbackContainers = document.querySelectorAll('div[class*="conversationContainer"]');
+      
+      if (fallbackContainers.length > 0) {
+        log('使用备用选择器找到容器，数量:', fallbackContainers.length);
+        // 对每个找到的容器都设置观察器
+        fallbackContainers.forEach(element => {
+          messageObserver.observe(element, { childList: true, subtree: true });
+        });
+        // 初始滚动
+        scrollToBottom();
+      } else {
+        log('错误: 无法找到任何消息容器，无法设置变化监听');
+      }
+    }
+  }, 300);
+  
+  // 每5秒检查一次WebSocket连接状态
+  const connectionCheckInterval = setInterval(() => {
+    log('定时检查连接状态:', chatState.connectionStatus);
+    if (chatState.connectionStatus === 'connected' && chatState.availableModels.length === 0) {
+      log('已连接但没有模型列表，尝试刷新模型列表');
+      refreshModels();
+    }
+  }, 25000);
+  
+  // 组件卸载时清除定时器
+  onBeforeUnmount(() => {
+    clearInterval(connectionCheckInterval);
+  });
+});
+
+// 处理VSCode消息
+function handleVSCodeMessage(event: MessageEvent) {
+  const message = event.data;
+  
+  log('收到VSCode消息:', message);
+  
+  switch (message.type) {
+    case 'settings':
+      if (message.settings.apiHost && message.settings.apiKey) {
+        // 创建设置配置的指纹，用于检测重复初始化
+        const configFingerprint = `${message.settings.apiHost}:${message.settings.apiKey}`;
+        
+        // 判断是否已经初始化过相同配置
+        if (chatState.lastInitializedConfig === configFingerprint) {
+          log('跳过重复的WebSocket初始化，配置完全相同');
+          return;
+        }
+        
+        log('收到API配置，初始化WebSocket连接', message.settings);
+        
+        // 初始化WebSocket服务
+        chatStore.initWebSocketService(message.settings.apiHost, message.settings.apiKey);
+        
+        // 存储当前配置指纹，用于下次检查
+        chatState.lastInitializedConfig = configFingerprint;
+      } else {
+        log('收到的API配置不完整，无法初始化WebSocket连接');
+      }
+      break;
+      
+    case 'clearMessages':
+      chatStore.clearMessages();
+      break;
+      
+    case 'modelChanged':
+      if (message.model) {
+        chatStore.setCurrentModel(message.model);
+      }
+      break;
+  }
+}
+
+// 卸载时清理事件监听
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleVSCodeMessage);
 });
 
 // 安全地获取vscode API
@@ -194,76 +720,11 @@ function acquireVsCodeApiSafe() {
   return null;
 }
 
-// 处理发送消息
-async function handleSend(content: string) {
-  console.log('发送消息触发:', content);
-  
-  // 检查连接状态
-  if (chatState.connectionStatus !== 'connected') {
-    console.error('WebSocket未连接，消息无法发送');
-    // 显示一个临时的错误消息
-    chatState.errorMessage = 'WebSocket未连接，请确保连接已建立';
-    chatState.connectionStatus = 'error';
-    return;
-  }
-  
-  // 如果内容为空或者正在加载，不处理
-  if (!content || !content.trim()) {
-    console.log('消息内容为空，不发送');
-    return;
-  }
-  
-  if (chatState.loading) {
-    console.log('正在加载中，不发送');
-    return;
-  }
-  
-  // 检查是否选择了模型
-  if (!chatState.currentModel) {
-    console.error('未选择AI模型，无法发送消息');
-    if (chatState.availableModels.length > 0) {
-      console.log('自动选择第一个可用模型:', chatState.availableModels[0]);
-      chatState.currentModel = chatState.availableModels[0];
-    } else {
-      console.error('没有可用模型，无法发送消息');
-      chatState.errorMessage = '未选择AI模型，且没有可用模型';
-      return;
-    }
-  }
-  
-  console.log(`开始发送消息，使用模型 ${chatState.currentModel}`);
-  
-  // 清空输入框
-  inputValue.value = '';
-  
-  try {
-    // 使用聊天存储发送消息
-    await chatStore.sendMessage(content);
-    console.log('消息发送成功');
-  } catch (error) {
-    console.error('消息发送失败:', error);
-    // 在聊天消息中显示错误
-    const errorMsg: ChatMessage = {
-      id: `error-${Date.now()}`,
-      role: 'assistant',
-      content: `消息发送失败: ${error instanceof Error ? error.message : '未知错误'}`,
-      createAt: new Date()
-    };
-    chatState.messages.push(errorMsg);
-    chatState.loading = false;
-  }
-}
-
 // 选择AI模型
 function selectModel(model: string) {
   chatStore.setCurrentModel(model);
 }
 
-// 清空对话
-function clearMessages() {
-  chatStore.clearMessages();
-}
-
 // 刷新模型列表
 function refreshModels() {
   chatStore.refreshModels();
@@ -271,7 +732,7 @@ function refreshModels() {
 
 // 下拉框展开时刷新模型列表
 function onDropdownVisibleChange(open: boolean) {
-  console.log('下拉框可见状态变更:', open);
+  log('下拉框可见状态变更:', open);
   if (open) {
     refreshModels();
   }
@@ -279,13 +740,92 @@ function onDropdownVisibleChange(open: boolean) {
 
 // 手动重连
 function reconnect() {
-  console.log('手动触发重连');
+  log('手动触发重连');
   chatStore.reconnect();
 }
+
+// 添加消息格式化函数
+function formatMessage(content: string): string {
+  if (!content) return '';
+  
+  // 确保是字符串
+  let text = String(content);
+  
+  // 移除JSON对象和控制字符
+  try {
+    // 移除常见的JSON对象模式
+    text = text.replace(/\{"request_id".*?"stream_seq_id".*?\}/g, '');
+    text = text.replace(/\{"request_id".*?"stream_finish".*?\}/g, '');
+    text = text.replace(/\{"stream_seq_id".*?\}/g, '');
+    text = text.replace(/\{"id".*?"role".*?"content".*?\}/g, '');
+    text = text.replace(/\{"key".*?"role".*?"content".*?\}/g, '');
+    
+    // 移除特定模式的重复内容
+    let prevText = '';
+    while (prevText !== text) {
+      prevText = text;
+      
+      // 移除完全相同的段落重复
+      const paragraphs = text.split('\n').filter(p => p.trim());
+      if (paragraphs.length > 1) {
+        const uniqueParagraphs = [];
+        for (let i = 0; i < paragraphs.length; i++) {
+          if (i === 0 || paragraphs[i] !== paragraphs[i-1]) {
+            uniqueParagraphs.push(paragraphs[i]);
+          }
+        }
+        text = uniqueParagraphs.join('\n');
+      }
+      
+      // 移除同一句话的重复
+      text = text.replace(/(.{20,})\s+\1/g, '$1');
+    }
+    
+    // 再尝试移除任何可能的JSON对象（嵌套情况）
+    text = text.replace(/\{(?:[^{}]|(?:\{[^{}]*\}))*\}/g, '');
+    
+    // 清理连续空白字符
+    text = text.replace(/\s{2,}/g, ' ');
+    
+    // 清理空行
+    text = text.replace(/^\s*[\r\n]/gm, '\n');
+    
+    // 移除特定重复文本模式
+    const commonResponses = [
+      '你好！有什么我可以帮忙的吗？',
+      '您好！有什么我能帮到您的？',
+      '我能为您做些什么？'
+    ];
+    
+    for (const response of commonResponses) {
+      const regex = new RegExp(`(${response})\\s*\\1+`, 'g');
+      text = text.replace(regex, '$1');
+    }
+    
+    // 清理开头和结尾的空白
+    text = text.trim();
+  } catch (e) {
+    console.error('格式化消息时出错:', e);
+    // 在出错的情况下保留原始内容
+  }
+  
+  // 转义HTML特殊字符
+  text = text.replace(/&/g, '&amp;')
+             .replace(/</g, '&lt;')
+             .replace(/>/g, '&gt;')
+             .replace(/"/g, '&quot;')
+             .replace(/'/g, '&#039;');
+  
+  // 替换换行符为<br>标签
+  text = text.replace(/\n/g, '<br>');
+  
+  if (!text) return '...'; // 如果内容为空，显示省略号
+  
+  return text;
+}
 </script>
 
 <style module lang="scss">
-// 定义变量
 $content-padding: 16px;
 
 .chatPanel {
@@ -304,15 +844,9 @@ $content-padding: 16px;
   overflow-y: auto;
   padding: 0;
   position: relative;
-}
-
-.conversations {
-  padding: $content-padding;
-}
-
-.avatar {
-  background-color: var(--vscode-button-background);
-  color: white;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
 }
 
 .footer {
@@ -326,46 +860,33 @@ $content-padding: 16px;
   margin-top: 10px;
   display: flex;
   align-items: center;
-  background: var(--vscode-editor-background);
-  padding: 2px 4px;
+  padding: 2px 8px;
   border-radius: 4px;
+  font-size: 12px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  
+  &:hover {
+    opacity: 1;
+  }
 }
 
 .modelSelector:before {
-  content: "选择模型:";
+  content: "使用";
   font-size: 12px;
   color: var(--vscode-descriptionForeground);
   margin-right: 6px;
   white-space: nowrap;
 }
 
-.inputFooter {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-top: 8px;
-}
-
-.inputTip {
-  color: var(--vscode-description-foreground);
-  font-size: 12px;
-}
-
-.actionButton {
-  display: flex;
-  align-items: center;
-  
-  :global(.anticon) {
-    margin-right: 4px;
-  }
-}
-
 .statusMessage {
   padding: $content-padding;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100px;
+  margin: auto 0;
 }
 
 .alertMessage {
@@ -376,4 +897,131 @@ $content-padding: 16px;
 .reconnectButton {
   margin-top: 10px;
 }
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding: $content-padding;
+  color: var(--vscode-description-foreground);
+}
+
+.emptyContent {
+  text-align: center;
+  max-width: 400px;
+}
+
+.emptyIcon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.emptyTitle {
+  font-size: 18px;
+  margin-bottom: 8px;
+  color: var(--vscode-foreground);
+}
+
+.emptyDescription {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.bubbleContainer {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.messageBubble {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.messageWrapper {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  max-width: 85%;
+}
+
+.userMessage {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.assistantMessage {
+  align-self: flex-start;
+  flex-direction: row;
+}
+
+.messageAvatar {
+  flex-shrink: 0;
+  margin: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.messageBubbleContent {
+  padding: 10px 14px;
+  border-radius: 8px;
+  background-color: var(--vscode-editorHoverWidget-background);
+  color: var(--vscode-foreground);
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  line-height: 1.6;
+  max-width: 100%;
+  overflow-x: auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+  &[data-loading="true"]::after {
+    content: '...';
+    display: inline-block;
+    animation: ellipsis 1.5s infinite;
+  }
+}
+
+.userMessage .messageBubbleContent {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+@keyframes ellipsis {
+  0% { content: '.'; }
+  33% { content: '..'; }
+  66% { content: '...'; }
+}
+
+:global(.message-content) {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+:global(.conversationContainer) {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
+}
+
+:global(.ant-avatar) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/webview/src/components/InputArea.vue b/webview/src/components/InputArea.vue
deleted file mode 100644
index 9d82077..0000000
--- a/webview/src/components/InputArea.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <div :class="$style.inputArea">
-    <div :class="$style.textareaContainer">
-      <textarea 
-        :class="$style.textarea" 
-        placeholder="发送消息给AI助手..." 
-        v-model="inputText"
-        @keydown.enter.prevent="handleSend"
-        ref="textareaRef"
-      ></textarea>
-    </div>
-    <div :class="$style.actions">
-      <div :class="$style.button">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M8 3.5C6.067 3.5 4.5 5.067 4.5 7C4.5 8.933 6.067 10.5 8 10.5C9.933 10.5 11.5 8.933 11.5 7C11.5 5.067 9.933 3.5 8 3.5ZM3.5 7C3.5 4.51472 5.51472 2.5 8 2.5C10.4853 2.5 12.5 4.51472 12.5 7C12.5 9.48528 10.4853 11.5 8 11.5C5.51472 11.5 3.5 9.48528 3.5 7Z" fill="currentColor"/>
-          <path d="M7.75 5C7.75 4.72386 7.97386 4.5 8.25 4.5H8.5C8.77614 4.5 9 4.72386 9 5C9 5.27614 8.77614 5.5 8.5 5.5H8.25C7.97386 5.5 7.75 5.27614 7.75 5Z" fill="currentColor"/>
-          <path d="M7.25 7C7.25 6.72386 7.47386 6.5 7.75 6.5H8.25C8.52614 6.5 8.75 6.72386 8.75 7V8.25C8.75 8.52614 8.52614 8.75 8.25 8.75C7.97386 8.75 7.75 8.52614 7.75 8.25V7.5H7.75C7.47386 7.5 7.25 7.27614 7.25 7Z" fill="currentColor"/>
-          <path d="M13.5 10.5C13.5 10.2239 13.7239 10 14 10C14.2761 10 14.5 10.2239 14.5 10.5V12C14.5 13.3807 13.3807 14.5 12 14.5H4C2.61929 14.5 1.5 13.3807 1.5 12V10.5C1.5 10.2239 1.72386 10 2 10C2.27614 10 2.5 10.2239 2.5 10.5V12C2.5 12.8284 3.17157 13.5 4 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V10.5Z" fill="currentColor"/>
-        </svg>
-      </div>
-      <button :class="$style.sendButton" @click="handleSend" :disabled="!inputText.trim()">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M14.6377 7.50843C14.8789 7.62568 15 7.88465 15 8.14286C15 8.40106 14.8789 8.66003 14.6377 8.77729L2.7558 14.7302C2.52264 14.8435 2.24207 14.841 2.01156 14.7239C1.78105 14.6067 1.63933 14.3889 1.64 14.1538L1.65522 1.88393C1.65589 1.64878 1.79856 1.43155 2.02963 1.31517C2.26069 1.19878 2.5415 1.19736 2.7737 1.3115L14.6377 7.50843ZM2.64063 2.48423L2.62752 13.5174L13.4075 8.14286L2.64063 2.48423Z" fill="currentColor"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const inputText = ref('');
-const textareaRef = ref<HTMLTextAreaElement | null>(null);
-
-const emit = defineEmits<{
-  (e: 'send', value: string): void
-}>();
-
-const handleSend = () => {
-  if (inputText.value.trim()) {
-    emit('send', inputText.value);
-    inputText.value = '';
-    // 重置文本框高度
-    if (textareaRef.value) {
-      textareaRef.value.style.height = 'auto';
-    }
-  }
-};
-</script>
-
-<style module lang="scss">
-@use "sass:color";
-
-.inputArea {
-  padding: 10px;
-  border-top: 1px solid var(--vscode-panel-border);
-  background-color: var(--vscode-editor-background);
-  display: flex;
-  align-items: flex-end;
-  gap: 10px;
-}
-
-.textareaContainer {
-  flex: 1;
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
-  background-color: var(--vscode-input-background);
-  min-height: 40px;
-  display: flex;
-}
-
-.textarea {
-  flex: 1;
-  border: none;
-  background: transparent;
-  resize: none;
-  padding: 10px;
-  color: var(--vscode-foreground);
-  font-size: 14px;
-  line-height: 20px;
-  max-height: 200px;
-  overflow-y: auto;
-  
-  &:focus {
-    outline: none;
-  }
-  
-  &::placeholder {
-    color: var(--vscode-description-foreground);
-  }
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-}
-
-.button {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--vscode-description-foreground);
-  cursor: pointer;
-  
-  &:hover {
-    background-color: var(--vscode-list-hover-background);
-    color: var(--vscode-foreground);
-  }
-}
-
-.sendButton {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-  border: none;
-  cursor: pointer;
-  
-  &:hover {
-    background-color: var(--vscode-button-hover-background);
-  }
-  
-  &:disabled {
-    background-color: var(--vscode-disabled-foreground);
-    color: var(--vscode-description-foreground);
-    cursor: not-allowed;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/webview/src/components/MessageItem.vue b/webview/src/components/MessageItem.vue
deleted file mode 100644
index eb554e1..0000000
--- a/webview/src/components/MessageItem.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div :class="[$style.messageItem, message.role === 'user' ? $style.userMessage : '']">
-    <div :class="$style.avatar">
-      <svg v-if="message.role === 'user'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 8C9.65685 8 11 6.65685 11 5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5C5 6.65685 6.34315 8 8 8Z" fill="currentColor"/>
-        <path d="M8 9C5.79086 9 4 10.7909 4 13V14H12V13C12 10.7909 10.2091 9 8 9Z" fill="currentColor"/>
-      </svg>
-      <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM8 13.8C4.79847 13.8 2.2 11.2015 2.2 8C2.2 4.79847 4.79847 2.2 8 2.2C11.2015 2.2 13.8 4.79847 13.8 8C13.8 11.2015 11.2015 13.8 8 13.8Z" fill="currentColor"/>
-        <path d="M5.5 6.5C5.5 5.67157 6.17157 5 7 5H9C9.82843 5 10.5 5.67157 10.5 6.5V7.5C10.5 8.32843 9.82843 9 9 9H7C6.17157 9 5.5 8.32843 5.5 7.5V6.5Z" fill="currentColor"/>
-        <path d="M4 10.5C4 10.2239 4.22386 10 4.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z" fill="currentColor"/>
-      </svg>
-    </div>
-    <div :class="$style.content">
-      {{ message.content }}
-      <div :class="$style.actions">
-        <div :class="$style.actionButton">复制</div>
-        <div :class="$style.actionButton">插入代码</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-defineProps<{
-  message: Message;
-}>();
-</script>
-
-<style module lang="scss">
-.messageItem {
-  display: flex;
-  padding: 16px;
-  gap: 10px;
-  border-bottom: 1px solid $border-color;
-}
-
-.userMessage {
-  background-color: $user-message-background;
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: $avatar-background;
-  flex-shrink: 0;
-}
-
-.content {
-  flex: 1;
-  font-size: 13px;
-  line-height: 20px;
-  overflow-wrap: break-word;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.actionButton {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: $dark-foreground-secondary;
-  
-  &:hover {
-    background-color: $hover-background;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/webview/src/components/MessageList.vue b/webview/src/components/MessageList.vue
deleted file mode 100644
index c576c46..0000000
--- a/webview/src/components/MessageList.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div :class="$style.messageList" ref="containerRef">
-    <MessageItem 
-      v-for="(message, index) in messages" 
-      :key="index" 
-      :message="message" 
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import MessageItem from './MessageItem.vue';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-const props = defineProps<{
-  messages: Message[];
-}>();
-
-const containerRef = ref<HTMLElement | null>(null);
-
-// 自动滚动到底部
-const scrollToBottom = () => {
-  if (containerRef.value) {
-    containerRef.value.scrollTop = containerRef.value.scrollHeight;
-  }
-};
-
-onMounted(() => {
-  scrollToBottom();
-});
-
-watch(() => props.messages.length, () => {
-  // 消息列表变化时，滚动到底部
-  setTimeout(scrollToBottom, 50); // 使用setTimeout确保DOM已更新
-});
-</script>
-
-<style module lang="scss">
-.messageList {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-</style> 
\ No newline at end of file
diff --git a/webview/src/components/SettingsModal.vue b/webview/src/components/SettingsModal.vue
index fa4fdf0..e6a0001 100644
--- a/webview/src/components/SettingsModal.vue
+++ b/webview/src/components/SettingsModal.vue
@@ -410,15 +410,46 @@ onMounted(() => {
             throw new Error('chatStore.initWebSocketService不是函数');
           }
           
-          // 调用WebSocket初始化
-          console.log('调用chatStore.initWebSocketService开始');
-          chatStore.initWebSocketService(formState.apiHost, formState.apiKey);
-          console.log('WebSocket服务初始化调用完成');
-          if (vscode) {
-            vscode.postMessage({
-              type: 'log',
-              message: 'WebSocket服务初始化调用完成'
-            });
+          // 防止重复初始化
+          const configFingerprint = `${formState.apiHost}:${formState.apiKey}`;
+          
+          // 从chatStore获取lastInitializedConfig
+          // 通过useChatStore()可以访问到存储在Pinia中的状态
+          const chatStateRef = chatStore.$state?.chatState || {};
+          const lastConfig = chatStateRef.lastInitializedConfig || '';
+          
+          if (lastConfig === configFingerprint) {
+            console.log('跳过重复的WebSocket初始化，配置完全相同');
+            if (vscode) {
+              vscode.postMessage({
+                type: 'log',
+                message: '跳过重复的WebSocket初始化，配置完全相同'
+              });
+            }
+          } else {
+            // 调用WebSocket初始化
+            console.log('调用chatStore.initWebSocketService开始');
+            chatStore.initWebSocketService(formState.apiHost, formState.apiKey);
+            console.log('WebSocket服务初始化调用完成');
+            if (vscode) {
+              vscode.postMessage({
+                type: 'log',
+                message: 'WebSocket服务初始化调用完成'
+              });
+            }
+            
+            // 尝试更新lastInitializedConfig
+            try {
+              // 需要使用$patch方法更新Pinia状态
+              chatStore.$patch((state) => {
+                if (state.chatState) {
+                  state.chatState.lastInitializedConfig = configFingerprint;
+                }
+              });
+              console.log('已更新lastInitializedConfig:', configFingerprint);
+            } catch (err) {
+              console.error('更新lastInitializedConfig失败:', err);
+            }
           }
           
           // 延时手动触发重连
diff --git a/webview/src/main.ts b/webview/src/main.ts
index e0fd92b..a25b498 100644
--- a/webview/src/main.ts
+++ b/webview/src/main.ts
@@ -23,11 +23,38 @@ let vscodeGlobal = window.vscodeApi; // 直接使用window.vscodeApi，它已经
 // 记录API状态
 if (vscodeGlobal) {
   console.log('main.ts: VSCode API已由扩展初始化，直接使用');
+  
+  // 发送初始化成功消息到VSCode
+  vscodeGlobal.postMessage({
+    type: 'log',
+    message: '[主程序] VSCode API初始化成功，WebView已加载完成'
+  });
+  
   window.__VSCODE_API_INITIALIZED__ = true;
 } else {
   console.warn('main.ts: VSCode API未在window中找到');
   window.__VSCODE_API_INITIALIZED__ = false;
   
+  // 尝试获取VSCode API
+  try {
+    if (typeof acquireVsCodeApi === 'function') {
+      window.vscodeApi = acquireVsCodeApi();
+      console.log('main.ts: 成功通过acquireVsCodeApi()获取VSCode API');
+      
+      // 发送到VSCode
+      window.vscodeApi.postMessage({
+        type: 'log',
+        message: '[主程序] 通过acquireVsCodeApi()成功获取VSCode API'
+      });
+      
+      window.__VSCODE_API_INITIALIZED__ = true;
+    } else {
+      console.error('main.ts: acquireVsCodeApi不是函数');
+    }
+  } catch (err) {
+    console.error('main.ts: 获取VSCode API失败', err);
+  }
+  
   // 处理情况：如果在dev环境中，提供一个虚拟的VSCode API
   // 警告：这只用于开发，不应该在生产环境使用
   if (process.env.NODE_ENV === 'development') {
@@ -65,9 +92,23 @@ if (vscodeGlobal) {
   }
 }
 
-// 每5秒检查一次VSCode API状态（调试用）
-setInterval(() => {
-  console.log('VSCode API状态:', window.vscodeApi ? '可用' : '不可用');
+// 每5秒检查一次VSCode API状态并通知VSCode（仅前3次）
+let checkCount = 0;
+const apiCheckInterval = setInterval(() => {
+  const isAvailable = !!window.vscodeApi;
+  console.log('VSCode API状态:', isAvailable ? '可用' : '不可用');
+  
+  if (isAvailable && window.vscodeApi) {
+    window.vscodeApi.postMessage({
+      type: 'log',
+      message: `[主程序] VSCode API状态检查 #${checkCount+1}: 可用`
+    });
+  }
+  
+  checkCount++;
+  if (checkCount >= 3) {
+    clearInterval(apiCheckInterval);
+  }
 }, 5000);
 
 // 创建Vue应用
diff --git a/webview/src/patch.js b/webview/src/patch.js
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/webview/src/patch.js
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/webview/src/store/chat.ts b/webview/src/store/chat.ts
index b871d3a..38b5e4b 100644
--- a/webview/src/store/chat.ts
+++ b/webview/src/store/chat.ts
@@ -1,12 +1,22 @@
 import { defineStore } from 'pinia';
 import { ref, reactive } from 'vue';
+import { v4 } from 'uuid';
 
 // 定义消息类型
 export interface ChatMessage {
   id: string;
   content: string;
-  role: 'user' | 'assistant';
-  createAt: Date;
+  role?: 'user' | 'assistant' | 'system';
+  timestamp?: number;
+  createAt?: Date;
+  pending?: boolean;
+  error?: boolean;
+}
+
+export interface SendMessageOptions {
+  messageId?: string;
+  model?: string;
+  [key: string]: any;
 }
 
 // WebSocket事件类型
@@ -15,7 +25,8 @@ export enum WebSocketEvent {
   DISCONNECTED = 'disconnected',
   MESSAGE = 'message',
   ERROR = 'error',
-  MODEL_LIST = 'model_list'
+  MODEL_LIST = 'model_list',
+  CHAT_UPDATE = 'chat_update'
 }
 
 // 定义VSCode API接口
@@ -28,25 +39,33 @@ try {
   console.warn('VSCode API不可用，可能是在浏览器开发环境中运行');
 }
 
-// WebSocket服务类 - 浏览器环境下实现
+// 添加常量定义
+const REQUEST_TIMEOUT = 5000; // 请求超时时间（毫秒）
+
+// WebSocket服务- 浏览器环境下实现
 export class WebSocketService {
   private socket: WebSocket | null = null;
-  private requestMap = new Map<number, (response: any) => void>();
+  private backoffTime = 1000;
   private nextRequestId = 1;
+  private requestHandlers: Map<number, (response: any) => void> = new Map();
   private reconnectAttempts = 0;
-  private reconnectTimer: number | null = null;
+  private reconnectTimer: NodeJS.Timeout | null = null;
   private readonly MAX_RECONNECT_ATTEMPTS = 5;
   private readonly RECONNECT_DELAY = 2000;
   private isReconnecting = false;
-  private pingInterval: number | null = null;
   
   public isConnected = false;
+  public isLoading = false;
+  public isWaitingForReply = false;
+  public lastError: Error | null = null;
+  public currentModel = ''; // 当前选择的模型
+  public messages: ChatMessage[] = []; // 聊天消息历史
   private eventListeners: Map<string, Array<(data?: any) => void>> = new Map();
 
   constructor(private apiUrl: string, private apiKey: string, private logger: (message: string) => void = console.log) {}
 
   /**
-   * 连接到WebSocket服务器
+   * 连接到WebSocket服务
    */
   public connect(): void {
     if (this.socket?.readyState === WebSocket.OPEN) {
@@ -55,12 +74,12 @@ export class WebSocketService {
     }
 
     try {
-      this.logger(`[WebSocketService] 尝试连接到: ${this.apiUrl}`);
+      this.logger(`[WebSocketService] 尝试连接 ${this.apiUrl}`);
       
       // 检查URL格式
       let wsUrl = this.apiUrl;
       
-      // 确保URL以/ws结尾，但避免重复
+      // 确保URL以ws结尾，但避免重复
       if (!wsUrl.endsWith('/ws')) {
         if (wsUrl.endsWith('/')) {
           wsUrl += 'ws';
@@ -76,7 +95,47 @@ export class WebSocketService {
       }
       
       this.logger(`[WebSocketService] 最终WebSocket URL: ${wsUrl}`);
+      
+      // 标记是否需要尝试使用127.0.0.1代替localhost
+      let shouldTryWithIP = false;
+      
+      // 检查是否使用了localhost
+      if (wsUrl.includes('localhost')) {
+        shouldTryWithIP = true;
+      }
+      
+      // 首先尝试原始URL连接
       this.socket = new WebSocket(wsUrl);
+      
+      // 设置连接超时，如果3秒内未连接成功，尝试备用方式
+      const connectionTimeout = window.setTimeout(() => {
+        // 检查连接状态
+        if (this.socket && this.socket.readyState !== WebSocket.OPEN) {
+          this.logger('[WebSocketService] 连接超时，尝试备用连接方式');
+          
+          // 关闭当前连接
+          try {
+            this.socket.close();
+          } catch (err) {
+            // 忽略关闭错误
+          }
+          
+          // 如果使用了localhost，尝试使用127.0.0.1替换
+          if (shouldTryWithIP) {
+            const ipUrl = wsUrl.replace('localhost', '127.0.0.1');
+            this.logger(`[WebSocketService] 尝试使用IP地址替代localhost: ${ipUrl}`);
+            
+            // 创建新的WebSocket连接
+            this.socket = new WebSocket(ipUrl);
+            this.setupEventHandlers();
+          }
+        }
+      }, 3000);
+      
+      // 保存连接超时处理器，以便在setupEventHandlers中清除
+      (this.socket as any)._connectionTimeout = connectionTimeout;
+      
+      // 设置事件处理器
       this.setupEventHandlers();
     } catch (error) {
       this.logger(`[WebSocketService] 连接失败: ${error}`);
@@ -143,10 +202,16 @@ export class WebSocketService {
    */
   private setupEventHandlers(): void {
     if (!this.socket) {
-      this.logger('[WebSocketService] 无法设置事件处理器: socket为null');
+      this.logger('[WebSocketService] 无法设置事件处理器 socket为null');
       return;
     }
     
+    // 清除连接超时
+    if ((this.socket as any)._connectionTimeout) {
+      window.clearTimeout((this.socket as any)._connectionTimeout);
+      delete (this.socket as any)._connectionTimeout;
+    }
+    
     // 记录连接建立时间
     let connectionEstablishedTime = 0;
     
@@ -159,14 +224,10 @@ export class WebSocketService {
       // 延迟重置重连计数器，确保连接稳定
       setTimeout(() => {
         if (this.isConnected) {
-          this.reconnectAttempts = 0;
           this.logger('[WebSocketService] 连接保持稳定，重置重连计数器');
         }
       }, 5000);
       
-      // 设置定时ping保持连接
-      this.setupPingInterval();
-      
       this.emit(WebSocketEvent.CONNECTED);
       this.logger('[WebSocketService] 已触发CONNECTED事件');
       
@@ -185,59 +246,183 @@ export class WebSocketService {
     this.socket.onmessage = (event: MessageEvent) => {
       try {
         const data = event.data;
+        
         // 检查是否是HTTP错误响应
         const stringData = typeof data === 'string' ? data : data.toString();
         
+        // 完整记录服务器响应，确保能看到全部内容
+        this.logger(`WebSocket完整响应原始数据(长度: ${stringData.length}):\n${stringData}`);
+        
         // 尝试解析JSON
         let response;
         try {
           response = JSON.parse(stringData);
+          this.logger(`成功解析WebSocket响应为JSON: ${JSON.stringify(response, null, 2)}`);
         } catch (jsonError) {
-          this.logger(`无法解析JSON响应: ${jsonError}, 原始消息: ${stringData.substring(0, 100)}`);
-          this.emit(WebSocketEvent.ERROR, `服务器返回的不是有效JSON: ${stringData.substring(0, 50)}...`);
+          this.logger(`无法解析JSON响应: ${jsonError}, 原始消息: ${stringData}`);
+          
+          // 尝试处理非JSON响应（如纯文本响应）
+          if (typeof stringData === 'string' && stringData.trim().length > 0) {
+            this.logger(`使用纯文本方式处理响应: ${stringData}`);
+            
+            // 查找最新的请求ID
+            if (this.requestHandlers.size > 0) {
+              // 使用最大的数字作为最新请求ID
+              const keys = Array.from(this.requestHandlers.keys());
+              let latestRequestId = keys[0];
+              for (const key of keys) {
+                if (key > latestRequestId) {
+                  latestRequestId = key;
+                }
+              }
+              
+              const callback = this.requestHandlers.get(latestRequestId);
+              if (callback) {
+                this.logger(`将纯文本响应传递给请求ID ${latestRequestId}`);
+                callback(stringData); // 直接将文本传递给回调
+                // 处理完成后删除处理器，避免重复
+                this.requestHandlers.delete(latestRequestId);
+              } else {
+                this.logger(`找到最新请求ID ${latestRequestId}，但没有相应的回调处理器`);
+              }
+            } else {
+              this.logger(`没有活跃的请求，无法处理纯文本响应`);
+              
+              // 尝试创建通用消息
+              const genericMessage: ChatMessage = {
+                id: `generic-${Date.now()}`,
+                content: stringData,
+                role: 'assistant',
+                timestamp: Date.now()
+              };
+              
+              // 发送通用消息
+              this.emit(WebSocketEvent.MESSAGE, genericMessage);
+            }
+            return;
+          }
+          
+          this.emit(WebSocketEvent.ERROR, `服务器返回的不是有效JSON: ${stringData}`);
           // 自动发送默认模型列表，避免前端卡住
           this.emit(WebSocketEvent.MODEL_LIST, this.getDefaultModels());
           return;
         }
         
-        this.logger(`收到WebSocket消息: ${JSON.stringify(response)}`);
+        // 处理错误响应
+        if (response.error) {
+          this.handleErrorResponse(response);
+          return;
+        }
         
         // 处理模型列表响应（特殊处理）
         if (response.models && Array.isArray(response.models)) {
+          this.logger(`收到模型列表响应: ${JSON.stringify(response.models)}`);
+          
           // 查找对应的模型列表请求
-          let modelRequestId = -1;
-          for (const [reqId, _] of this.requestMap.entries()) {
-            if (reqId < 100) { // 假设小ID是模型列表请求
+          let modelRequestId = 0;
+          for (const [reqId, _] of this.requestHandlers.entries()) {
+            // 尝试通过检查是否为较小的数字来猜测是模型列表请求
+            if (reqId < 100) {
               modelRequestId = reqId;
               break;
             }
           }
           
-          if (modelRequestId !== -1) {
-            const callback = this.requestMap.get(modelRequestId);
+          if (modelRequestId > 0) {
+            const callback = this.requestHandlers.get(modelRequestId);
             if (callback) {
+              this.logger(`调用模型列表请求处理器: ${modelRequestId}`);
               callback(response);
-              this.requestMap.delete(modelRequestId);
+              this.requestHandlers.delete(modelRequestId);
+            } else {
+              this.logger(`找到模型列表请求ID ${modelRequestId}，但没有相应的回调处理器`);
             }
+          } else {
+            this.logger(`收到模型列表，但没有找到对应的模型列表请求`);
           }
           
           // 无论找到对应请求与否，都通知模型列表更新
           this.emit(WebSocketEvent.MODEL_LIST, response.models);
+          return;
         }
-        // 处理常规请求响应
-        else if (response.request_id && this.requestMap.has(response.request_id)) {
-          const callback = this.requestMap.get(response.request_id);
-          if (callback) {
-            callback(response);
-            
-            // 如果不是流式响应或是最后一个包，清除请求
-            if (!response.stream_seq_id || response.stream_finsh) {
-              this.requestMap.delete(response.request_id);
+        
+        // 尝试查找响应中的任何文本内容
+        const hasTextContent = this.hasAnyTextContent(response);
+        if (hasTextContent) {
+          this.logger(`响应中包含文本内容`);
+        } else {
+          this.logger(`响应中不包含文本内容: ${JSON.stringify(response)}`);
+        }
+        
+        // 获取请求ID - 只使用标准格式 request_id
+        const requestId = response.request_id;
+        
+        // 处理消息命令的响应
+        if (requestId !== undefined) {
+          // 将请求ID转换为数字
+          const numRequestId = typeof requestId === 'string' ? parseInt(requestId, 10) : requestId;
+          
+          if (!isNaN(numRequestId) && this.requestHandlers.has(numRequestId)) {
+            const callback = this.requestHandlers.get(numRequestId);
+            if (callback) {
+              // 向处理器传递响应
+              this.logger(`调用请求${numRequestId}的回调处理器`);
+              callback(response);
+              
+              // 检查是否是流式响应的最后一个包
+              const isLastPacket = 
+                response.stream_finsh === true || // 文档中的拼写错误
+                response.stream_finish === true; // 可能的正确拼写
+              
+              if (isLastPacket) {
+                this.logger(`收到最后一个数据包，移除请求处理器: ${numRequestId}`);
+                this.requestHandlers.delete(numRequestId);
+              }
+            } else {
+              this.logger(`找到请求ID ${numRequestId}，但没有相应的回调处理器`);
             }
+            return;
           }
         }
+        
+        // 如果响应中有文本内容但没有请求ID，创建通用消息
+        if (hasTextContent) {
+          this.logger(`收到没有请求ID的响应，但包含文本内容，作为通用消息处理`);
+          
+          // 尝试从响应中提取任何有用的文本
+          let content = this.extractResponseContent(response);
+          
+          // 创建一个通用消息
+          const genericMessage: ChatMessage = {
+            id: `generic-${Date.now()}`,
+            content: content,
+            role: 'assistant',
+            timestamp: Date.now()
+          };
+          
+          // 发送通用消息
+          this.emit(WebSocketEvent.MESSAGE, genericMessage);
+          return;
+        }
+        
+        // 其他未识别的响应处理为通用消息
+        this.logger(`收到未知类型的WebSocket消息，作为通用消息处理: ${JSON.stringify(response)}`);
+        
+        // 尝试从响应中提取任何有用的文本
+        let content = this.extractResponseContent(response);
+        
+        // 创建一个通用消息
+        const genericMessage: ChatMessage = {
+          id: `generic-${Date.now()}`,
+          content: content,
+          role: 'assistant',
+          timestamp: Date.now()
+        };
+        
+        // 发送通用消息
+        this.emit(WebSocketEvent.MESSAGE, genericMessage);
       } catch (error) {
-        this.logger(`解析WebSocket消息失败: ${error}, 原始消息: ${typeof event.data === 'string' ? event.data.substring(0, 100) : '非文本数据'}`);
+        this.logger(`解析WebSocket消息失败: ${error}, 原始消息: ${typeof event.data === 'string' ? event.data : '非文本数据'}`);
         // 自动发送默认模型列表，避免前端卡住
         this.emit(WebSocketEvent.MODEL_LIST, this.getDefaultModels());
       }
@@ -249,14 +434,14 @@ export class WebSocketService {
       
       // 检查是否包含isTrusted属性
       if (event && 'isTrusted' in event && event.isTrusted) {
-        this.logger('[WebSocketService] 这是一个受信任的错误事件，可能是证书或安全设置导致的');
+        this.logger('[WebSocketService] 这是一个受信任的错误事件，可能是证书或安全设置导致');
         
         // 获取更多诊断信息
         let diagInfo = '';
         
         // 检查是否是localhost
         if (this.apiUrl.includes('localhost') || this.apiUrl.includes('127.0.0.1')) {
-          diagInfo += '本地连接(localhost)可能需要特殊权限; ';
+          diagInfo += '本地连接(localhost)可能需要特殊权限 ';
           
           // 建议使用127.0.0.1而不是localhost
           if (this.apiUrl.includes('localhost')) {
@@ -266,15 +451,15 @@ export class WebSocketService {
         
         // 检查是否使用了wss安全连接
         if (this.apiUrl.startsWith('wss://')) {
-          diagInfo += '使用了安全WebSocket连接，请确认服务器证书有效; ';
+          diagInfo += '使用了安全WebSocket连接，请确认服务器证书有效 ';
         } else {
           // 如果使用ws不安全连接，可能是混合内容问题
-          diagInfo += 'VS Code中使用不安全WebSocket(ws://)可能受到限制，建议使用安全连接(wss://); ';
+          diagInfo += 'VS Code中使用不安全WebSocket(ws://)可能受到限制，建议使用安全连接wss://); ';
         }
         
         // 检查WebView上下文
         if (typeof window !== 'undefined' && 'acquireVsCodeApi' in window) {
-          diagInfo += 'WebView环境中可能有额外的安全限制; ';
+          diagInfo += 'WebView环境中可能有额外的安全限制 ';
         }
         
         const errorMessage = `连接错误(isTrusted): ${diagInfo}请检查服务器配置和网络连接`;
@@ -315,164 +500,266 @@ export class WebSocketService {
   }
 
   /**
-   * 获取模型列表
+   * 生成唯一的请求ID
    */
-  public async getModelList(): Promise<string[]> {
-    try {
-      const requestId = this.nextRequestId++;
-      
-      // 按照API文档使用list_model命令
-      const request = {
-        request_id: requestId,
-        cmd: 'list_model'  // 使用文档中指定的命令
-      };
-      
-      this.logger(`请求模型列表 (ID: ${requestId})`);
-      
-      return new Promise<string[]>((resolve) => {
-        // 设置5秒超时，超时后返回默认模型
-        const timeout = setTimeout(() => {
-          if (this.requestMap.has(requestId)) {
-            this.logger(`模型列表请求超时 (ID: ${requestId})`);
-            this.requestMap.delete(requestId);
-            resolve(this.getDefaultModels());
-          }
-        }, 5000);
-        
-        // 设置响应处理器
-        this.requestMap.set(requestId, (response) => {
-          clearTimeout(timeout);
-          
-          if (response.error) {
-            this.logger(`获取模型列表错误: ${response.error}`);
-            resolve(this.getDefaultModels());
-          } else {
-            // 根据文档，应该使用models字段
-            const models = response.models || [];
-            this.logger(`获取到模型列表: ${JSON.stringify(models)}`);
-            
-            if (models.length === 0) {
-              resolve(this.getDefaultModels());
-            } else {
-              resolve(models);
-            }
-          }
-        });
-        
-        // 发送请求
-        this.sendRequest(request);
-      });
-    } catch (error) {
-      this.logger(`获取模型列表异常: ${error}`);
-      return this.getDefaultModels();
+  private generateRequestId(): number {
+    return this.nextRequestId++;
+  }
+
+  /**
+   * 将消息添加到消息列表
+   * @param message 聊天消息
+   */
+  private addMessageToList(message: ChatMessage) {
+    // 添加消息到列表
+    this.messages.push(message);
+    // 触发消息列表更新事件
+    this.emit(WebSocketEvent.CHAT_UPDATE);
+  }
+
+  /**
+   * 更新消息列表中的特定消息
+   * @param message 要更新的消息
+   */
+  public updateMessage(message: ChatMessage) {
+    const index = this.messages.findIndex(msg => msg.id === message.id);
+    if (index !== -1) {
+      // 更新消息
+      this.messages[index] = message;
+      // 触发消息列表更新事件
+      this.emit(WebSocketEvent.CHAT_UPDATE);
+    } else {
+      this.logger(`尝试更新不存在的消息: ${message.id}`);
     }
   }
 
   /**
-   * 发送聊天消息
+   * 添加请求处理器
+   * @param requestId 请求ID
+   * @param callback 回调函数
    */
-  public async sendChatMessage(message: string, model: string): Promise<string> {
-    if (!this.isConnected) {
-      this.logger('无法发送消息: WebSocket未连接');
+  private addRequest(requestId: number, callback: (response: any) => void): void {
+    this.requestHandlers.set(requestId, callback);
+    
+    // 设置超时处理
+    setTimeout(() => {
+      if (this.requestHandlers.has(requestId)) {
+        this.logger(`请求 ${requestId} 超时，移除处理器`);
+        this.requestHandlers.delete(requestId);
+        callback({ error: '请求超时' });
+      }
+    }, REQUEST_TIMEOUT);
+  }
+
+  /**
+   * 获取模型列表
+   */
+  public getModelList(): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      if (!this.isConnected || !this.socket) {
+        this.logger('尝试获取模型列表，但WebSocket未连接');
+        return reject(new Error('WebSocket未连接'));
+      }
+
+      const requestId = this.generateRequestId();
+      
+      // 创建符合API文档格式的请求
+      const request = {
+        cmd: 'list_model',
+        request_id: requestId
+      };
+
+      this.logger(`请求模型列表: ${JSON.stringify(request)}`);
+      
+      // 添加请求处理器
+      this.addRequest(requestId, (response) => {
+        if (response.error) {
+          this.logger(`获取模型列表失败: ${response.error}`);
+          return reject(new Error(`获取模型列表失败: ${response.error}`));
+        }
+        
+        // 确保模型列表存在且是数组
+        if (response.models && Array.isArray(response.models)) {
+          this.logger(`成功获取模型列表: ${response.models.join(', ')}`);
+          resolve(response.models);
+        } else {
+          this.logger('获取模型列表失败：返回格式不正确');
+          reject(new Error('获取模型列表失败：返回格式不正确'));
+        }
+      });
+
+      // 发送请求
+      this.socket.send(JSON.stringify(request));
+    });
+  }
+
+  /**
+   * 发送聊天消息
+   * @param content 消息内容
+   * @param modelId 模型ID
+   * @param conversationId 会话ID
+   * @returns 
+   */
+  public sendChatMessage(
+    content: string,
+    modelId?: string,
+    conversationId?: string
+  ): Promise<ChatMessage> {
+    return new Promise<ChatMessage>((resolve, reject) => {
+      // 创建用户消息对象
+      const userMsg: ChatMessage = {
+        id: v4(),
+        role: "user",
+        content,
+        createAt: new Date()
+      };
+
+      // 将用户消息添加到消息列表
+      this.addMessageToList(userMsg);
+
+      // 创建请求ID并实例化AI响应消息
+      const requestId = this.generateRequestId();
+      const aiMsg: ChatMessage = {
+        id: v4(),
+        role: "assistant",
+        content: "正在思考中...",
+        pending: true,
+        createAt: new Date()
+      };
+
+      // 将AI消息添加到消息列表
+      this.addMessageToList(aiMsg);
+
+      // 设置超时处理，如果10秒内没有收到真正的响应，重置loading状态
+      setTimeout(() => {
+        if (aiMsg.pending) {
+          this.logger(`10秒后未收到真正的AI响应，重置loading状态`);
+          aiMsg.pending = false;
+          aiMsg.content = "抱歉，未能及时获取到回复，请稍后再试。";
+          this.isLoading = false;
+          this.isWaitingForReply = false;
+          this.updateMessage(aiMsg);
+          this.emit(WebSocketEvent.CHAT_UPDATE);
+        }
+      }, 10000);
+
+      // 注册响应处理器
+      this.requestHandlers.set(requestId, (data: any) => {
+        try {
+          this.logger(`收到AI响应: ${JSON.stringify(data)}`);
+          
+          // 根据响应更新AI消息
+          const responseContent = data.msg || data.message || data.answer || data.content || "";
+          
+          // 确保响应内容不是用户输入的内容副本
+          if (responseContent !== content) {
+            aiMsg.content = responseContent;
+            aiMsg.pending = false;
+            
+            // 如果响应中包含时间戳，则更新createAt
+            if (data.timestamp) {
+              aiMsg.createAt = new Date(data.timestamp);
+            }
+            
+            // 更新消息列表
+            this.updateMessage(aiMsg);
+            
+            // 通知聊天视图刷新
+            this.emit(WebSocketEvent.CHAT_UPDATE);
+            
+            // 标记加载完成
+            this.isLoading = false;
+            this.isWaitingForReply = false;
+          } else {
+            // 如果响应内容与用户输入相同，保持"正在思考中..."状态
+            this.logger(`收到的响应内容与用户输入相同，等待真正的AI响应`);
+          }
+          
+          // 解决Promise
+          resolve(aiMsg);
+        } catch (error) {
+          this.logger(`处理AI响应时出错: ${error}`);
+          aiMsg.content = "处理响应时发生错误";
+          aiMsg.error = true;
+          aiMsg.pending = false;
+          this.updateMessage(aiMsg);
+          reject(error);
+        }
+      });
+
+      // 准备并发送请求
+      const request = {
+        cmd: "exec_chat",
+        request_id: requestId,
+        msg: content,
+        model: modelId,
+        stream: false
+      };
+      
+      this.logger(`发送聊天请求: ${JSON.stringify(request)}`);
+      this.sendRequest(request);
+    });
+  }
+  
+  /**
+   * 发送请求到WebSocket服务器
+   * @param request 请求对象
+   */
+  public sendRequest(request: any): void {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+      this.logger(`无法发送请求，WebSocket未连接: ${JSON.stringify(request)}`);
       throw new Error('WebSocket未连接');
     }
     
-    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
-      this.logger(`WebSocket状态异常: ${this.socket ? this.getReadyStateDescription(this.socket.readyState) : 'socket为null'}`);
-      throw new Error(`WebSocket未准备好: ${this.socket ? this.getReadyStateDescription(this.socket.readyState) : 'socket为null'}`);
+    try {
+      // 确保请求有正确的格式
+      if (!request.cmd) {
+        // 如果没有cmd字段，尝试添加
+        if (request.msg) {
+          request.cmd = 'exec_chat';
+        } else {
+          request.cmd = 'unknown';
+        }
+      }
+      
+      // 发送JSON格式化的请求
+      this.socket.send(JSON.stringify(request));
+      this.logger(`已发送请求: ${JSON.stringify(request)}`);
+    } catch (error) {
+      this.logger(`发送请求失败: ${error}, 请求: ${JSON.stringify(request)}`);
+      throw error;
+    }
+  }
+  
+  /**
+   * 从响应中提取内容
+   */
+  private extractResponseContent(response: any): string {
+    // 提取响应内容
+    let content = '';
+    
+    if (typeof response === 'string') {
+      content = response;
+    } else if (response && response.msg) {
+      content = response.msg;
+    } else if (response && response.content) {
+      content = response.content;
+    } else if (response && this.hasAnyTextContent(response)) {
+      // 检查常用文本字段
+      const textFields = ['msg', 'message', 'content', 'text', 'response'];
+      for (const field of textFields) {
+        if (typeof response[field] === 'string' && response[field].trim().length > 0) {
+          content = response[field];
+          break;
+        }
+      }
+    } else if (response) {
+      content = JSON.stringify(response);
+    } else {
+      content = '收到空响应';
     }
     
-    const requestId = this.nextRequestId++;
-    
-    // 按照API文档中的格式
-    const request = {
-      cmd: 'exec_chat',  // 使用exec_chat命令
-      request_id: requestId,
-      msg: message,      // 使用msg字段而不是content
-      model: model,
-      stream: true
-    };
-    
-    this.logger(`发送聊天消息 (ID: ${requestId}): ${message.substring(0, 50)}${message.length > 50 ? '...' : ''}`);
-    this.logger(`使用模型: ${model}`);
-    
-    // 创建用户消息
-    const userMessage: ChatMessage = {
-      id: `request-${requestId}`,
-      content: message,
-      role: 'user',
-      createAt: new Date()
-    };
-    
-    // 通知消息已创建
-    this.emit(WebSocketEvent.MESSAGE, userMessage);
-    
-    return new Promise<string>((resolve, reject) => {
-      let responseContent = '';
-      let responseStartTime: number | null = null;
-      let lastResponseTime: number | null = null;
-      
-      // 设置超时处理
-      const timeoutId = setTimeout(() => {
-        this.logger(`聊天消息响应超时 (ID: ${requestId})`);
-        this.requestMap.delete(requestId);
-        reject(new Error('服务器响应超时，请稍后重试'));
-      }, 60000); // 60秒超时
-      
-      this.requestMap.set(requestId, (response) => {
-        // 记录第一次收到响应的时间
-        if (responseStartTime === null) {
-          responseStartTime = Date.now();
-          this.logger(`收到第一个响应包 (ID: ${requestId}), 延迟: ${Date.now() - lastResponseTime!}ms`);
-        }
-        
-        // 更新最后响应时间
-        lastResponseTime = Date.now();
-        
-        if (response.error) {
-          clearTimeout(timeoutId);
-          this.logger(`聊天消息响应错误 (ID: ${requestId}): ${response.error}`);
-          reject(new Error(response.error));
-          return;
-        }
-        
-        // 处理消息内容 - 适配不同的响应字段名
-        if (response.msg) {
-          responseContent += response.msg;
-          
-          // 创建助手消息
-          const assistantMessage: ChatMessage = {
-            id: `response-${requestId}-${response.stream_seq_id || 0}`,
-            content: responseContent,
-            role: 'assistant',
-            createAt: new Date()
-          };
-          
-          // 通知有新消息
-          this.emit(WebSocketEvent.MESSAGE, assistantMessage);
-        }
-        
-        // 检查是否是最后一个响应包
-        if (!response.stream_seq_id || response.stream_finsh) {
-          clearTimeout(timeoutId);
-          const totalTime = Date.now() - responseStartTime!;
-          this.logger(`聊天消息完成 (ID: ${requestId}), 总耗时: ${totalTime}ms`);
-          resolve(responseContent);
-        }
-      });
-      
-      // 记录发送时间
-      lastResponseTime = Date.now();
-      
-      try {
-        this.sendRequest(request);
-      } catch (error) {
-        clearTimeout(timeoutId);
-        this.logger(`发送请求失败 (ID: ${requestId}): ${error}`);
-        this.requestMap.delete(requestId);
-        reject(error);
-      }
-    });
+    return content;
   }
 
   /**
@@ -483,42 +770,23 @@ export class WebSocketService {
       case WebSocket.CONNECTING:
         return '正在连接 (CONNECTING: 0)';
       case WebSocket.OPEN:
-        return '已连接 (OPEN: 1)';
+        return '已连接(OPEN: 1)';
       case WebSocket.CLOSING:
         return '正在关闭 (CLOSING: 2)';
       case WebSocket.CLOSED:
-        return '已关闭 (CLOSED: 3)';
+        return '已关闭(CLOSED: 3)';
       default:
         return `未知状态: ${state}`;
     }
   }
 
-  /**
-   * 设置心跳检测
-   */
-  private setupPingInterval(): void {
-    this.clearTimers();
-    
-    // 每30秒发送一次空消息以保持连接
-    this.pingInterval = window.setInterval(() => {
-      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-        try {
-          // 发送空心跳消息
-          this.socket.send(JSON.stringify({ type: 'ping' }));
-        } catch (error) {
-          this.logger(`发送心跳包失败: ${error}`);
-        }
-      }
-    }, 30000);
-  }
-
   /**
    * 安排重连
    */
   private scheduleReconnect(): void {
     if (this.isReconnecting || this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
       if (this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
-        this.logger(`达到最大重连尝试次数 (${this.MAX_RECONNECT_ATTEMPTS})，停止重连`);
+        this.logger(`达到最大重连尝试次数(${this.MAX_RECONNECT_ATTEMPTS})，停止重连`);
         this.emit(WebSocketEvent.ERROR, `连接失败：已尝试 ${this.MAX_RECONNECT_ATTEMPTS} 次重连，请检查网络或服务器状态后手动重连`);
       }
       return;
@@ -530,49 +798,26 @@ export class WebSocketService {
     // 使用指数退避策略和随机抖动
     const baseDelay = this.RECONNECT_DELAY * Math.pow(1.5, this.reconnectAttempts - 1);
     const jitter = Math.random() * 1000; // 添加最多1秒的随机抖动
-    const delay = Math.min(baseDelay + jitter, 30000); // 上限为30秒
+    const delay = Math.min(baseDelay + jitter, 30000); // 上限30秒
     
     this.logger(`尝试重新连接 (${this.reconnectAttempts}/${this.MAX_RECONNECT_ATTEMPTS}), 延迟 ${delay}ms`);
     
     this.reconnectTimer = window.setTimeout(() => {
       this.isReconnecting = false;
       this.connect();
-    }, delay);
+    }, delay) as unknown as NodeJS.Timeout;
   }
 
   /**
    * 清除所有定时器
    */
   private clearTimers(): void {
-    if (this.pingInterval !== null) {
-      window.clearInterval(this.pingInterval);
-      this.pingInterval = null;
-    }
-    
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
     }
   }
 
-  /**
-   * 发送WebSocket请求
-   */
-  private sendRequest(request: any): void {
-    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
-      this.logger('无法发送请求: WebSocket未连接');
-      throw new Error('WebSocket未连接');
-    }
-    
-    try {
-      const requestStr = JSON.stringify(request);
-      this.socket.send(requestStr);
-    } catch (error) {
-      this.logger(`发送WebSocket请求失败: ${error}`);
-      throw error;
-    }
-  }
-
   /**
    * 获取默认模型列表
    */
@@ -592,19 +837,120 @@ export class WebSocketService {
       1004: '保留',
       1005: '未提供状态码',
       1006: '异常关闭',
-      1007: '数据类型不一致',
+      1007: '数据类型不一致,',
       1008: '违反策略',
       1009: '消息太大',
-      1010: '必需的扩展缺失',
+      1010: '必需的扩展缺失,',
       1011: '内部错误',
       1012: '服务重启',
       1013: '临时错误',
-      1014: '服务器超载',
+      1014: '服务器超,',
       1015: 'TLS握手失败'
     };
     
     return explanations[code] || `未知代码: ${code}`;
   }
+
+  /**
+   * 检查响应是否包含任何文本内容
+   */
+  private hasAnyTextContent(response: any): boolean {
+    if (!response || typeof response !== 'object') {
+      return false;
+    }
+    
+    // 检查常用文本字段
+    const textFields = ['msg', 'message', 'content', 'text', 'response'];
+    for (const field of textFields) {
+      if (typeof response[field] === 'string' && response[field].trim().length > 0) {
+        return true;
+      }
+    }
+    
+    // 检查任何字符串属性
+    for (const key in response) {
+      if (typeof response[key] === 'string' && response[key].trim().length > 0) {
+        return true;
+      }
+    }
+    
+    return false;
+  }
+
+  // 处理错误响应
+  private handleErrorResponse(response: any): void {
+    // 创建格式化的错误消息
+    const formattedError = `服务器错误: ${response.error}`;
+    this.logger(formattedError);
+    
+    // 区分不同类型的错误，但保持连接状态
+    // 在文档中，错误通过error字段返回，我们需要区分严重错误和格式错误
+    if (response.error && (response.error === 'invalid request format' || response.error === 'unknown cmd')) {
+      // 对于请求格式错误，只记录但不改变连接状态
+      this.logger(`请求格式错误，但连接仍然有效: ${JSON.stringify(response)}`);
+    } else {
+      // 其他错误可能是服务器问题或连接问题，触发ERROR事件
+      this.emit(WebSocketEvent.ERROR, formattedError);
+    }
+    
+    // 对于模型相关错误，特别处理
+    if (response.error && (response.error.includes('model') || response.error.includes('unknown model'))) {
+      this.logger('检测到模型相关错误，通知前端');
+      
+      const errorMessage: ChatMessage = {
+        id: `error-model-${Date.now()}`,
+        content: `错误: 模型 "${response.model || '未知'}" 不可用或不存在，请尝试其他模型`,
+        role: 'assistant',
+        timestamp: Date.now()
+      };
+      
+      this.emit(WebSocketEvent.MESSAGE, errorMessage);
+    }
+    
+    // 对于请求相关的错误，将错误传递给请求处理器
+    if (response.request_id !== undefined) {
+      // 将请求ID转换为number类型
+      const numRequestId = typeof response.request_id === 'string' 
+        ? parseInt(response.request_id, 10) 
+        : response.request_id;
+      
+      if (!isNaN(numRequestId) && this.requestHandlers.has(numRequestId)) {
+        const callback = this.requestHandlers.get(numRequestId);
+        if (callback) {
+          this.logger(`将错误响应传递给请求处理器: ${numRequestId}`);
+          callback(response);
+          // 处理完成后移除处理器
+          this.requestHandlers.delete(numRequestId);
+        }
+      } else {
+        this.logger(`错误响应没有有效的请求ID或找不到对应的请求处理器`);
+        
+        // 创建一个通用错误消息
+        const errorMessage: ChatMessage = {
+          id: `error-${Date.now()}`,
+          content: `错误: ${response.error}`,
+          role: 'assistant',
+          timestamp: Date.now()
+        };
+        
+        // 发送错误消息
+        this.emit(WebSocketEvent.MESSAGE, errorMessage);
+      }
+    } else {
+      this.logger(`错误响应没有请求ID`);
+      
+      // 创建一个通用错误消息
+      const errorMessage: ChatMessage = {
+        id: `error-${Date.now()}`,
+        content: `错误: ${response.error}`,
+        role: 'assistant',
+        timestamp: Date.now()
+      };
+      
+      // 发送错误消息
+      this.emit(WebSocketEvent.MESSAGE, errorMessage);
+    }
+  }
 }
 
 // 创建聊天状态管理
@@ -635,12 +981,12 @@ export const useChatStore = defineStore('chat', () => {
           });
         }
       } catch (error) {
-        console.error('向VSCode发送日志失败:', error);
+        console.error('向VSCode发送日志失败', error);
       }
     };
     
-    logToVSCode(`初始化WebSocket服务开始: ${apiUrl}`);
-    console.log(`[ChatStore] 初始化WebSocket服务开始: ${apiUrl}`);
+    logToVSCode(`初始化WebSocket服务开始 ${apiUrl}`);
+    console.log(`[ChatStore] 初始化WebSocket服务开始 ${apiUrl}`);
     
     try {
       if (!apiUrl || !apiKey) {
@@ -666,11 +1012,20 @@ export const useChatStore = defineStore('chat', () => {
         // 确保日志同时发送到控制台和VSCode
         console.log(`[WebSocketService] ${message}`);
         
-        if (window.vscodeApi) {
-          window.vscodeApi.postMessage({
-            type: 'log',
-            message: `[WebSocketService] ${message}`
-          });
+        try {
+          if (window.vscodeApi) {
+            window.vscodeApi.postMessage({
+              type: 'log',
+              message: `[WebSocketService] ${message}`
+            });
+          } else if (vscode) {
+            vscode.postMessage({
+              type: 'log',
+              message: `[WebSocketService] ${message}`
+            });
+          }
+        } catch (err) {
+          console.error('向VSCode发送日志失败', err);
         }
       });
 
@@ -717,7 +1072,7 @@ export const useChatStore = defineStore('chat', () => {
   // 设置WebSocket事件监听
   function setupWebSocketEvents() {
     if (!wsService.value) {
-      console.error('[ChatStore] setupWebSocketEvents失败: wsService为null');
+      console.warn('[ChatStore] WebSocket服务未初始化，无法设置事件监听');
       return;
     }
     
@@ -743,19 +1098,95 @@ export const useChatStore = defineStore('chat', () => {
     });
     
     wsService.value.on(WebSocketEvent.MESSAGE, (message: ChatMessage) => {
-      console.log('[ChatStore] 收到WebSocket MESSAGE事件');
-      // 查找是否已存在具有相同ID的消息
-      const existingIndex = chatState.messages.findIndex(m => m.id === message.id);
+      console.log('[ChatStore] 收到WebSocket MESSAGE事件', message);
+      
+      // 检查是否是用户消息，如果是则需要检查是否已存在完全相同的内
+      if (message.role === 'user') {
+        // 对于用户消息，检查是否已经存在相同内容的用户消息
+        const existingSameUser = chatState.messages.find(m => 
+          m.role === 'user' && m.content === message.content
+        );
+        
+        if (existingSameUser) {
+          console.log('[ChatStore] 跳过添加已存在的用户消息', message.content);
+          return; // 直接退出，不处理重复的用户消息
+        }
+      }
+      
+      // 检查是否是助手的最终消息（包含stream_finish标记）
+      const isAssistantFinalMessage = 
+        message.role === 'assistant' && 
+        (message.content.includes('"stream_finish":true') || 
+         message.content.includes('"stream_finsh":true') ||
+         message.content.includes('无响应内容'));
+      
+      // 跟踪是否需要添加消息
+      let shouldAddMessage = true;
+      
+      // 查找是否已存在具有相同ID前缀的消息
+      const existingIndex = chatState.messages.findIndex(m => {
+        // 对于助手消息，我们只需要检查id的前缀部分（不包含流序列号）
+        if (message.role === 'assistant' && m.role === 'assistant') {
+          // 如果是响应消息，可能是response-123的形式
+          if (message.id.startsWith('response-') && m.id.startsWith('response-')) {
+            // 提取基本ID部分
+            const idParts = message.id.split('-');
+            const existingIdParts = m.id.split('-');
+            
+            // 如果基本格式相同(response-数字)，认为是同一消息的更新
+            if (idParts.length >= 2 && existingIdParts.length >= 2) {
+              return idParts[1] === existingIdParts[1];
+            }
+          }
+        }
+        
+        // 对于用户消息检查完整ID
+        return m.id === message.id;
+      });
+      
+      // 检查消息是否跟上一条消息内容相同
+      if (existingIndex === -1 && chatState.messages.length > 0) {
+        const lastMessage = chatState.messages[chatState.messages.length - 1];
+        
+        // 如果消息内容相同且角色相同，这可能是重复触发
+        if (lastMessage.role === message.role && lastMessage.content === message.content) {
+          console.log('[ChatStore] 跳过添加与上一条消息内容完全相同的消息');
+          shouldAddMessage = false;
+        }
+      }
+      
+      // 防止添加完全空白的消息
+      if (message.content.trim() === '' && message.role === 'assistant') {
+        // 仅当不是现有消息的更新时跳过
+        if (existingIndex === -1) {
+          console.log('[ChatStore] 跳过添加空内容的助手消息');
+          shouldAddMessage = false;
+        }
+      }
       
       if (existingIndex >= 0) {
         // 更新现有消息
-        chatState.messages[existingIndex] = message;
-      } else {
+        console.log('[ChatStore] 更新现有消息', { 
+          id: chatState.messages[existingIndex].id,
+          oldLength: chatState.messages[existingIndex].content.length,
+          newLength: message.content.length
+        });
+        
+        // 只有当新消息内容更长或是最终消息时才更新
+        if (message.content.length > chatState.messages[existingIndex].content.length || isAssistantFinalMessage) {
+          chatState.messages[existingIndex] = message;
+        }
+      } else if (shouldAddMessage) {
         // 添加新消息
+        console.log('[ChatStore] 添加新消息', message);
         chatState.messages.push(message);
       }
       
-      chatState.loading = false;
+      // 如果是助手的最终消息，重置加载状态
+      if (isAssistantFinalMessage) {
+        console.log('[ChatStore] 收到助手最终消息，重置加载状态');
+        chatState.loading = false;
+      }
     });
     
     wsService.value.on(WebSocketEvent.MODEL_LIST, (models: string[]) => {
@@ -772,35 +1203,82 @@ export const useChatStore = defineStore('chat', () => {
       }
     });
     
+    wsService.value.on(WebSocketEvent.CHAT_UPDATE, () => {
+      console.log('[ChatStore] 收到WebSocket CHAT_UPDATE事件');
+      
+      // 从WebSocketService中获取最新消息列表
+      if (wsService.value && wsService.value.messages.length > 0) {
+        chatState.messages = [...wsService.value.messages];
+        
+        // 检查最新的助手消息是否不再处于pending状态
+        const lastAssistantMsg = chatState.messages
+          .filter(msg => msg.role === 'assistant')
+          .pop();
+        
+        if (lastAssistantMsg && !lastAssistantMsg.pending) {
+          console.log('[ChatStore] 检测到助手消息非pending状态，重置loading状态');
+          chatState.loading = false;
+        }
+      }
+    });
+    
     console.log('[ChatStore] WebSocket事件监听器设置完成');
   }
 
   // 发送消息
-  async function sendMessage(content: string) {
-    console.log('Store: 开始发送消息', { content, connectionStatus: chatState.connectionStatus });
+  async function sendMessage(content: string): Promise<string> {
+    // 记录函数调用到VSCode日志
+    const logToVSCode = (message: string) => {
+      try {
+        if (window.vscodeApi) {
+          window.vscodeApi.postMessage({
+            type: 'log',
+            message: `[ChatStore] ${message}`
+          });
+        }
+      } catch (error) {
+        console.error('向VSCode发送日志失败', error);
+      }
+    };
     
-    if (!wsService.value || !wsService.value.isConnected) {
-      console.error('Store: WebSocket未连接，无法发送消息');
+    console.log('[ChatStore] 开始发送消息', { content, connectionStatus: chatState.connectionStatus });
+    logToVSCode(`开始发送消息 ${content.substring(0, 30)}... (连接状态 ${chatState.connectionStatus})`);
+    
+    if (!wsService.value) {
+      console.error('[ChatStore] WebSocket服务未初始化，无法发送消息');
+      logToVSCode('WebSocket服务未初始化，无法发送消息');
+      chatState.errorMessage = 'WebSocket服务未初始化，请刷新页面重试';
+      chatState.connectionStatus = 'error';
+      throw new Error('WebSocket服务未初始化');
+    }
+    
+    if (!wsService.value.isConnected) {
+      console.error('[ChatStore] WebSocket未连接，无法发送消息', wsService.value);
+      logToVSCode(`WebSocket未连接，无法发送消息(isConnected: ${wsService.value.isConnected})`);
       chatState.errorMessage = '未连接到AI服务，请先连接';
       chatState.connectionStatus = 'error';
       throw new Error('WebSocket未连接');
     }
     
-    if (!content.trim() || chatState.loading) {
-      console.log('Store: 消息为空或正在加载中，不发送');
-      return;
+    if (!content.trim()) {
+      console.log('[ChatStore] 消息为空，不发送');
+      logToVSCode('消息为空，不发送');
+      return '';
     }
     
     // 确保有当前模型
     if (!chatState.currentModel && chatState.availableModels.length > 0) {
-      console.log('Store: 自动选择模型', chatState.availableModels[0]);
+      console.log('[ChatStore] 自动选择模型', chatState.availableModels[0]);
+      logToVSCode(`自动选择模型: ${chatState.availableModels[0]}`);
       chatState.currentModel = chatState.availableModels[0];
     } else if (!chatState.currentModel) {
-      console.error('Store: 没有可用模型');
+      console.error('[ChatStore] 没有可用模型');
+      logToVSCode('没有可用模型');
       throw new Error('没有可用的AI模型');
     }
     
-    console.log(`Store: 准备发送消息到WebSocket，使用模型: ${chatState.currentModel}`);
+    console.log(`[ChatStore] 准备发送消息到WebSocket，使用模型 ${chatState.currentModel}`);
+    logToVSCode(`准备发送消息到WebSocket，使用模型 ${chatState.currentModel}`);
     chatState.loading = true;
     
     try {
@@ -808,16 +1286,32 @@ export const useChatStore = defineStore('chat', () => {
       const startTime = Date.now();
       
       // 直接发送消息到WebSocket服务
-      const response = await wsService.value.sendChatMessage(content, chatState.currentModel);
+      console.log('[ChatStore] 调用 wsService.sendChatMessage...');
+      logToVSCode('调用 wsService.sendChatMessage开始');
+      
+      if (typeof wsService.value.sendChatMessage !== 'function') {
+        console.error('[ChatStore] wsService.sendChatMessage不是一个函数', wsService.value);
+        logToVSCode(`wsService.sendChatMessage不是一个函数 ${JSON.stringify(wsService.value)}`);
+        throw new Error('WebSocket服务方法不可用');
+      }
+      
+      logToVSCode('调用sendChatMessage直接...');
+      wsService.value.sendChatMessage(content, chatState.currentModel);
+      logToVSCode('sendChatMessage调用完成，已发送消息');
+      
+      // 不立即重置loading状态，等待真正的响应通过事件更新
+      // 响应处理已经在WebSocketService中注册，会自动更新aiMsg
       
       // 计算响应时间
       const responseTime = Date.now() - startTime;
-      console.log(`Store: 收到WebSocket响应，耗时: ${responseTime}ms`);
+      console.log(`[ChatStore] 消息已发送，等待服务器响应，发送耗时: ${responseTime}ms`);
+      logToVSCode(`消息已发送，等待服务器响应，发送耗时: ${responseTime}ms，内容前50个字符 ${content.substring(0, 50)}`);
       
-      return response;
+      return content;
     } catch (error) {
-      console.error('Store: 发送消息失败:', error);
-      chatState.errorMessage = `发送消息失败: ${error instanceof Error ? error.message : '未知错误'}`;
+      console.error('[ChatStore] 发送消息失败', error);
+      logToVSCode(`发送消息失败 ${error instanceof Error ? error.message : '未知错误'}`);
+      chatState.errorMessage = `发送消息失败 ${error instanceof Error ? error.message : '未知错误'}`;
       chatState.connectionStatus = 'error';
       chatState.loading = false;
       throw error;
@@ -873,4 +1367,4 @@ export const useChatStore = defineStore('chat', () => {
     clearMessages,
     reconnect
   };
-}); 
\ No newline at end of file
+});