feat(vscode-ide-companion): refactor message components with modular architecture

Refactor UI message rendering by extracting message types into dedicated components. Add ChatHeader component for better session management interface. - Extract message components: UserMessage, AssistantMessage, ThinkingMessage, StreamingMessage, WaitingMessage - Add ChatHeader component with session selector and action buttons - Delete MessageContent.css and consolidate styles into App.scss - Update Tailwind config for component styling - Improve message rendering with proper TypeScript typing
2025-12-19 09:33:53 +00:00 · 2025-11-23 20:52:08 +08:00
parent c4bcd178a4
commit de8ea0678d
17 changed files with 901 additions and 535 deletions
--- a/packages/vscode-ide-companion/package.json
+++ b/packages/vscode-ide-companion/package.json
@@ -151,7 +151,7 @@
  "scripts": {
    "prepackage": "npm run generate:notices && npm run check-types && npm run lint && npm run build:prod",
    "build": "npm run build:dev",
-    "build:dev": "npm run check-types && npm run lint && node esbuild.js",
+    "build:dev": "node esbuild.js",
    "build:prod": "node esbuild.js --production",
    "generate:notices": "node ./scripts/generate-notices.js",
    "prepare1": "npm run generate:notices",
--- a/packages/vscode-ide-companion/src/WebViewProvider.ts
+++ b/packages/vscode-ide-companion/src/WebViewProvider.ts
@@ -43,9 +43,9 @@ export class WebViewProvider {
      (message) => this.sendMessageToWebView(message),
    );

-    // Set login handler for /login command
+    // Set login handler for /login command - force re-login
    this.messageHandler.setLoginHandler(async () => {
-      await this.initializeAgentConnection();
+      await this.forceReLogin();
    });

    // Setup agent callbacks
@@ -159,27 +159,105 @@ export class WebViewProvider {
    // Register panel dispose handler
    this.panelManager.registerDisposeHandler(this.disposables);

+    // Track last known editor state (to preserve when switching to webview)
+    const _lastEditorState: {
+      fileName: string | null;
+      filePath: string | null;
+      selection: {
+        startLine: number;
+        endLine: number;
+      } | null;
+    } | null = null;
+
    // Listen for active editor changes and notify WebView
    const editorChangeDisposable = vscode.window.onDidChangeActiveTextEditor(
      (editor) => {
-        const fileName = editor?.document.uri.fsPath
-          ? getFileName(editor.document.uri.fsPath)
-          : null;
+        // If switching to a non-text editor (like webview), keep the last state
+        if (!editor) {
+          // Don't update - keep previous state
+          return;
+        }
+
+        const filePath = editor.document.uri.fsPath || null;
+        const fileName = filePath ? getFileName(filePath) : null;
+
+        // Get selection info if there is any selected text
+        let selectionInfo = null;
+        if (editor && !editor.selection.isEmpty) {
+          const selection = editor.selection;
+          selectionInfo = {
+            startLine: selection.start.line + 1,
+            endLine: selection.end.line + 1,
+          };
+        }
+
+        // Update last known state
+        lastEditorState = { fileName, filePath, selection: selectionInfo };
+
        this.sendMessageToWebView({
          type: 'activeEditorChanged',
-          data: { fileName },
+          data: { fileName, filePath, selection: selectionInfo },
        });
      },
    );
    this.disposables.push(editorChangeDisposable);

-    // Don't auto-login; user must use /login command
-    // Just initialize empty conversation for the UI
+    // Listen for text selection changes
+    const selectionChangeDisposable =
+      vscode.window.onDidChangeTextEditorSelection((event) => {
+        const editor = event.textEditor;
+        if (editor === vscode.window.activeTextEditor) {
+          const filePath = editor.document.uri.fsPath || null;
+          const fileName = filePath ? getFileName(filePath) : null;
+
+          // Get selection info if there is any selected text
+          let selectionInfo = null;
+          if (!event.selections[0].isEmpty) {
+            const selection = event.selections[0];
+            selectionInfo = {
+              startLine: selection.start.line + 1,
+              endLine: selection.end.line + 1,
+            };
+          }
+
+          // Update last known state
+          lastEditorState = { fileName, filePath, selection: selectionInfo };
+
+          this.sendMessageToWebView({
+            type: 'activeEditorChanged',
+            data: { fileName, filePath, selection: selectionInfo },
+          });
+        }
+      });
+    this.disposables.push(selectionChangeDisposable);
+
+    // Check if we have valid auth cache and auto-reconnect
    if (!this.agentInitialized) {
-      console.log(
-        '[WebViewProvider] Agent not initialized, waiting for /login command',
+      const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
+      const workingDir = workspaceFolder?.uri.fsPath || process.cwd();
+      const config = vscode.workspace.getConfiguration('qwenCode');
+      const openaiApiKey = config.get<string>('openaiApiKey', '');
+      // Use the same authMethod logic as qwenConnectionHandler
+      const authMethod = openaiApiKey ? 'openai' : 'qwen-oauth';
+
+      // Check if we have valid cached auth
+      const hasValidAuth = await this.authStateManager.hasValidAuth(
+        workingDir,
+        authMethod,
      );
-      await this.initializeEmptyConversation();
+
+      if (hasValidAuth) {
+        console.log(
+          '[WebViewProvider] Found valid auth cache, auto-reconnecting...',
+        );
+        // Auto-reconnect using cached auth
+        await this.initializeAgentConnection();
+      } else {
+        console.log(
+          '[WebViewProvider] No valid auth cache, waiting for /login command',
+        );
+        await this.initializeEmptyConversation();
+      }
    } else {
      console.log(
        '[WebViewProvider] Agent already initialized, reusing existing connection',
@@ -259,6 +337,32 @@ export class WebViewProvider {
    }
  }

+  /**
+   * Force re-login by clearing auth cache and reconnecting
+   * Called when user explicitly uses /login command
+   */
+  async forceReLogin(): Promise<void> {
+    console.log('[WebViewProvider] Force re-login requested');
+
+    // Clear existing auth cache
+    await this.authStateManager.clearAuthState();
+    console.log('[WebViewProvider] Auth cache cleared');
+
+    // Disconnect existing connection if any
+    if (this.agentInitialized) {
+      try {
+        this.agentManager.disconnect();
+        console.log('[WebViewProvider] Existing connection disconnected');
+      } catch (error) {
+        console.log('[WebViewProvider] Error disconnecting:', error);
+      }
+      this.agentInitialized = false;
+    }
+
+    // Reinitialize connection (will trigger fresh authentication)
+    await this.initializeAgentConnection();
+  }
+
  /**
   * Load messages from current Qwen session
   * Creates a new ACP session for immediate message sending
@@ -373,15 +477,44 @@ export class WebViewProvider {
    // Register dispose handler
    this.panelManager.registerDisposeHandler(this.disposables);

+    // Track last known editor state (to preserve when switching to webview)
+    const _lastEditorState: {
+      fileName: string | null;
+      filePath: string | null;
+      selection: {
+        startLine: number;
+        endLine: number;
+      } | null;
+    } | null = null;
+
    // Listen for active editor changes and notify WebView
    const editorChangeDisposable = vscode.window.onDidChangeActiveTextEditor(
      (editor) => {
-        const fileName = editor?.document.uri.fsPath
-          ? getFileName(editor.document.uri.fsPath)
-          : null;
+        // If switching to a non-text editor (like webview), keep the last state
+        if (!editor) {
+          // Don't update - keep previous state
+          return;
+        }
+
+        const filePath = editor.document.uri.fsPath || null;
+        const fileName = filePath ? getFileName(filePath) : null;
+
+        // Get selection info if there is any selected text
+        let selectionInfo = null;
+        if (editor && !editor.selection.isEmpty) {
+          const selection = editor.selection;
+          selectionInfo = {
+            startLine: selection.start.line + 1,
+            endLine: selection.end.line + 1,
+          };
+        }
+
+        // Update last known state
+        lastEditorState = { fileName, filePath, selection: selectionInfo };
+
        this.sendMessageToWebView({
          type: 'activeEditorChanged',
-          data: { fileName },
+          data: { fileName, filePath, selection: selectionInfo },
        });
      },
    );
@@ -392,18 +525,38 @@ export class WebViewProvider {

    console.log('[WebViewProvider] Panel restored successfully');

-    // Don't auto-login on restore; user must use /login command
-    // Just initialize empty conversation for the UI
+    // Check if we have valid auth cache and auto-reconnect on restore
    if (!this.agentInitialized) {
-      console.log(
-        '[WebViewProvider] Agent not initialized after restore, waiting for /login command',
-      );
-      this.initializeEmptyConversation().catch((error) => {
-        console.error(
-          '[WebViewProvider] Failed to initialize empty conversation after restore:',
-          error,
-        );
-      });
+      const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
+      const workingDir = workspaceFolder?.uri.fsPath || process.cwd();
+      const config = vscode.workspace.getConfiguration('qwenCode');
+      const openaiApiKey = config.get<string>('openaiApiKey', '');
+      // Use the same authMethod logic as qwenConnectionHandler
+      const authMethod = openaiApiKey ? 'openai' : 'qwen-oauth';
+
+      // Check if we have valid cached auth
+      this.authStateManager
+        .hasValidAuth(workingDir, authMethod)
+        .then(async (hasValidAuth) => {
+          if (hasValidAuth) {
+            console.log(
+              '[WebViewProvider] Found valid auth cache on restore, auto-reconnecting...',
+            );
+            await this.initializeAgentConnection();
+          } else {
+            console.log(
+              '[WebViewProvider] No valid auth cache after restore, waiting for /login command',
+            );
+            await this.initializeEmptyConversation();
+          }
+        })
+        .catch((error) => {
+          console.error(
+            '[WebViewProvider] Failed to check auth cache after restore:',
+            error,
+          );
+          this.initializeEmptyConversation().catch(console.error);
+        });
    } else {
      console.log(
        '[WebViewProvider] Agent already initialized, loading current session...',
--- a/packages/vscode-ide-companion/src/agents/qwenConnectionHandler.ts
+++ b/packages/vscode-ide-companion/src/agents/qwenConnectionHandler.ts
@@ -101,6 +101,14 @@ export class QwenConnectionHandler {
            lastSession.sessionId,
          );
          sessionRestored = true;
+
+          // Save auth state after successful session restore
+          if (authStateManager) {
+            console.log(
+              '[QwenAgentManager] Saving auth state after successful session restore',
+            );
+            await authStateManager.saveAuthState(workingDir, authMethod);
+          }
        } catch (switchError) {
          console.log(
            '[QwenAgentManager] session/switch not supported or failed:',
--- a/packages/vscode-ide-companion/src/auth/authStateManager.ts
+++ b/packages/vscode-ide-companion/src/auth/authStateManager.ts
@@ -29,9 +29,20 @@ export class AuthStateManager {
    const state = await this.getAuthState();

    if (!state) {
+      console.log('[AuthStateManager] No cached auth state found');
      return false;
    }

+    console.log('[AuthStateManager] Found cached auth state:', {
+      workingDir: state.workingDir,
+      authMethod: state.authMethod,
+      timestamp: new Date(state.timestamp).toISOString(),
+    });
+    console.log('[AuthStateManager] Checking against:', {
+      workingDir,
+      authMethod,
+    });
+
    // Check if auth is still valid (within cache duration)
    const now = Date.now();
    const isExpired =
--- a/packages/vscode-ide-companion/src/webview/App.scss
+++ b/packages/vscode-ide-companion/src/webview/App.scss
@@ -137,113 +137,8 @@ button {
 }

 /* ===========================
-   Header Styles (from Claude Code .he)
+   Animations (used by message components)
   =========================== */
-.chat-header {
-  display: flex;
-  border-bottom: 1px solid var(--app-primary-border-color);
-  padding: 6px 10px;
-  gap: 4px;
-  background-color: var(--app-header-background);
-  justify-content: flex-start;
-  user-select: none;
-}
-
-/* Session Selector Dropdown - styled as button (from Claude Code .E) */
-.session-selector-dropdown {
-  flex: 1;
-  max-width: 300px;
-  display: flex;
-}
-
-.session-selector-dropdown select {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  background: transparent;
-  color: var(--app-primary-foreground);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  outline: none;
-  min-width: 0;
-  max-width: 300px;
-  overflow: hidden;
-  font-size: var(--vscode-chat-font-size, 13px);
-  font-family: var(--vscode-chat-font-family);
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-selector-dropdown select:hover,
-.session-selector-dropdown select:focus {
-  background: var(--app-ghost-button-hover-background);
-}
-
-/* New Session Button (from Claude Code .j) */
-.new-session-header-button {
-  flex: 0 0 auto;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  width: 24px;
-  height: 24px;
-  color: var(--app-primary-foreground);
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.new-session-header-button:hover,
-.new-session-header-button:focus {
-  background: var(--app-ghost-button-hover-background);
-}
-
-/* ===========================
-   Messages Container
-   =========================== */
-.messages-container {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 20px 20px 120px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--app-spacing-medium);
-  background-color: var(--app-primary-background);
-  position: relative;
-  min-width: 0;
-}
-
-.messages-container:focus {
-  outline: none;
-}
-
-/* ===========================
-   Message Styles
-   =========================== */
-.message {
-  color: var(--app-primary-foreground);
-  display: flex;
-  gap: 0;
-  align-items: flex-start;
-  padding: var(--app-spacing-medium) 0;
-  flex-direction: column;
-  position: relative;
-  animation: fadeIn 0.2s ease-in;
-}
-
@keyframes fadeIn {
  from {
    opacity: 0;
@@ -255,43 +150,6 @@ button {
  }
 }

-.message.user {
-  align-items: flex-end;
-  text-align: right;
-}
-
-.message.assistant {
-  align-items: flex-start;
-  text-align: left;
-}
-
-.message-content {
-  display: inline-block;
-  margin: 4px 0;
-  position: relative;
-  white-space: pre-wrap;
-  border: 1px solid var(--app-input-border);
-  border-radius: var(--corner-radius-medium);
-  background-color: var(--app-input-background);
-  padding: 4px 6px;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  user-select: text;
-  line-height: 1.5;
-}
-
-.message.streaming {
-  position: relative;
-}
-
-.streaming-indicator {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
@keyframes pulse {
  0%, 100% {
    opacity: 1;
@@ -301,93 +159,6 @@ button {
  }
 }

-/* Thinking message styles */
-.message.thinking {
-  background-color: rgba(100, 100, 255, 0.1);
-  border: 1px solid rgba(100, 100, 255, 0.3);
-  border-radius: var(--corner-radius-medium);
-  padding: var(--app-spacing-medium);
-}
-
-.thinking-message {
-  background-color: var(--app-list-hover-background, rgba(100, 100, 255, 0.1));
-  opacity: 0.8;
-  font-style: italic;
-  position: relative;
-  padding-left: 24px;
-}
-
-.thinking-message::before {
-  content: "💭";
-  position: absolute;
-  left: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.thinking-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: rgba(150, 150, 255, 1);
-  margin-bottom: var(--app-spacing-medium);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.thought-content {
-  font-style: italic;
-  opacity: 0.9;
-  color: rgba(200, 200, 255, 0.9);
-}
-
-/* Waiting message styles - similar to Claude Code thinking state */
-.message.waiting-message {
-  opacity: 0.85;
-}
-
-.waiting-message .message-content {
-  background-color: transparent;
-  border: none;
-  padding: 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Typing indicator for loading messages */
-.typing-indicator {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 0;
-  gap: 4px;
-}
-
-.typing-dot, .thinking-dot {
-  width: 6px;
-  height: 6px;
-  background-color: var(--app-secondary-foreground);
-  border-radius: 50%;
-  margin-right: 0;
-  opacity: 0.6;
-  animation: typingPulse 1.4s infinite ease-in-out;
-}
-
-.typing-dot:nth-child(1),
-.thinking-dot:nth-child(1) {
-  animation-delay: 0s;
-}
-
-.typing-dot:nth-child(2),
-.thinking-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-dot:nth-child(3),
-.thinking-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
@keyframes typingPulse {
  0%, 60%, 100% {
    transform: scale(0.7);
@@ -399,32 +170,6 @@ button {
  }
 }

-.loading-text {
-  opacity: 0.7;
-  font-style: italic;
-  color: var(--app-secondary-foreground);
-}
-
-/* ===========================
-   Scrollbar Styling
-   =========================== */
-.messages-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-.messages-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.messages-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: var(--corner-radius-small);
-}
-
-.messages-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
 /* ===========================
   Input Form Styles
   =========================== */
@@ -488,50 +233,6 @@ button {
  cursor: not-allowed;
 }

-/* ===========================
-   Claude Code Style Header Buttons
-   =========================== */
-.header-conversations-button {
-  flex: 0 0 auto;
-  padding: 4px 8px;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--corner-radius-small);
-  color: var(--app-primary-foreground);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  font-size: var(--vscode-chat-font-size, 13px);
-  font-weight: 500;
-  transition: background-color 0.2s;
-}
-
-.header-conversations-button:hover,
-.header-conversations-button:focus {
-  background-color: var(--app-ghost-button-hover-background);
-}
-
-.button-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.button-text {
-  font-size: var(--vscode-chat-font-size, 13px);
-}
-
-.dropdown-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.header-spacer {
-  flex: 1;
-}
-
 /* ===========================
   Claude Code Style Input Form (.Me > .u)
   =========================== */
--- a/packages/vscode-ide-companion/src/webview/App.tsx
+++ b/packages/vscode-ide-companion/src/webview/App.tsx
@@ -16,7 +16,6 @@ import { ToolCall, type ToolCallData } from './components/ToolCall.js';
 import { hasToolCallOutput } from './components/toolcalls/shared/utils.js';
 import { EmptyState } from './components/EmptyState.js';
 import { PlanDisplay, type PlanEntry } from './components/PlanDisplay.js';
-import { MessageContent } from './components/MessageContent.js';
 import {
  CompletionMenu,
  type CompletionItem,
@@ -24,6 +23,14 @@ import {
 import { useCompletionTrigger } from './hooks/useCompletionTrigger.js';
 import { SaveSessionDialog } from './components/SaveSessionDialog.js';
 import { InfoBanner } from './components/InfoBanner.js';
+import { ChatHeader } from './components/ui/ChatHeader.js';
+import {
+  UserMessage,
+  AssistantMessage,
+  ThinkingMessage,
+  StreamingMessage,
+  WaitingMessage,
+} from './components/messages/index.js';

 interface ToolCallUpdate {
  type: 'tool_call' | 'tool_call_update';
@@ -54,6 +61,12 @@ interface TextMessage {
  role: 'user' | 'assistant' | 'thinking';
  content: string;
  timestamp: number;
+  fileContext?: {
+    fileName: string;
+    filePath: string;
+    startLine?: number;
+    endLine?: number;
+  };
 }

 // Loading messages from Claude Code CLI
@@ -228,6 +241,11 @@ export const App: React.FC = () => {
  const [editMode, setEditMode] = useState<EditMode>('ask');
  const [thinkingEnabled, setThinkingEnabled] = useState(false);
  const [activeFileName, setActiveFileName] = useState<string | null>(null);
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+  const [activeSelection, setActiveSelection] = useState<{
+    startLine: number;
+    endLine: number;
+  } | null>(null);
  const [isComposing, setIsComposing] = useState(false);
  const [showSaveDialog, setShowSaveDialog] = useState(false);
  const [savedSessionTags, setSavedSessionTags] = useState<string[]>([]);
@@ -842,9 +860,16 @@ export const App: React.FC = () => {
        }

        case 'activeEditorChanged': {
-          // 从扩展接收当前激活编辑器的文件名
+          // 从扩展接收当前激活编辑器的文件名和选中的行号
          const fileName = message.data?.fileName as string | null;
+          const filePath = message.data?.filePath as string | null;
+          const selection = message.data?.selection as {
+            startLine: number;
+            endLine: number;
+          } | null;
          setActiveFileName(fileName);
+          setActiveFilePath(filePath);
+          setActiveSelection(selection);
          break;
        }

@@ -1035,7 +1060,13 @@ export const App: React.FC = () => {
    setLoadingMessage(getRandomLoadingMessage());

    // Parse @file references from input text
-    const context: Array<{ type: string; name: string; value: string }> = [];
+    const context: Array<{
+      type: string;
+      name: string;
+      value: string;
+      startLine?: number;
+      endLine?: number;
+    }> = [];
    const fileRefPattern = /@([^\s]+)/g;
    let match;

@@ -1052,11 +1083,43 @@ export const App: React.FC = () => {
      }
    }

+    // Add active file selection context if present
+    if (activeFilePath) {
+      const fileName = activeFileName || 'current file';
+      context.push({
+        type: 'file',
+        name: fileName,
+        value: activeFilePath,
+        startLine: activeSelection?.startLine,
+        endLine: activeSelection?.endLine,
+      });
+    }
+
+    // Build file context for the message
+    let fileContextForMessage:
+      | {
+          fileName: string;
+          filePath: string;
+          startLine?: number;
+          endLine?: number;
+        }
+      | undefined;
+
+    if (activeFilePath && activeFileName) {
+      fileContextForMessage = {
+        fileName: activeFileName,
+        filePath: activeFilePath,
+        startLine: activeSelection?.startLine,
+        endLine: activeSelection?.endLine,
+      };
+    }
+
    vscode.postMessage({
      type: 'sendMessage',
      data: {
        text: inputText,
        context: context.length > 0 ? context : undefined,
+        fileContext: fileContextForMessage,
      },
    });

@@ -1298,104 +1361,59 @@ export const App: React.FC = () => {
        </>
      )}

-      <div className="chat-header">
-        <button
-          className="header-conversations-button"
-          onClick={handleLoadQwenSessions}
-          title="Past conversations"
-        >
-          <span className="button-content">
-            <span className="button-text">{currentSessionTitle}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-              className="dropdown-icon"
-            >
-              <path
-                fillRule="evenodd"
-                d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-          </span>
-        </button>
-        <div className="header-spacer"></div>
-        <button
-          className="save-session-header-button"
-          onClick={() => setShowSaveDialog(true)}
-          title="Save Conversation"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-            data-slot="icon"
-            className="icon-svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75V8.25a.75.75 0 0 1 .217-.517l.083-.083a.75.75 0 0 1 1.061 0l2.239 2.239A.75.75 0 0 1 22 10.5v5.25a4.75 4.75 0 0 1-4.75 4.75H4.75A4.75 4.75 0 0 1 0 15.75V4.25A4.75 4.75 0 0 1 4.75 0h5a.75.75 0 0 1 0 1.5h-5ZM9.017 6.5a1.5 1.5 0 0 1 2.072.58l.43.862a1 1 0 0 0 .895.558h3.272a1.5 1.5 0 0 1 1.5 1.5v6.75a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-6.75a1.5 1.5 0 0 1 1.5-1.5h1.25a1 1 0 0 0 .895-.558l.43-.862a1.5 1.5 0 0 1 .511-.732ZM11.78 8.47a.75.75 0 0 0-1.06-1.06L8.75 9.379 7.78 8.41a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l2.5-2.5Z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
-        <button
-          className="new-session-header-button"
-          onClick={handleNewQwenSession}
-          title="New Session"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-            data-slot="icon"
-            className="icon-svg"
-          >
-            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"></path>
-          </svg>
-        </button>
-      </div>
+      <ChatHeader
+        currentSessionTitle={currentSessionTitle}
+        onLoadSessions={handleLoadQwenSessions}
+        onSaveSession={() => setShowSaveDialog(true)}
+        onNewSession={handleNewQwenSession}
+      />

-      <div className="messages-container">
+      <div
+        className="flex-1 overflow-y-auto overflow-x-hidden pt-5 pr-5 pl-5 pb-[120px] flex flex-col relative min-w-0 focus:outline-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-sm [&::-webkit-scrollbar-thumb:hover]:bg-white/30 [&>*]:flex [&>*]:gap-0 [&>*]:items-start [&>*]:text-left [&>*]:py-2 [&>*]:px-0 [&>*]:flex-col [&>*]:relative [&>*]:animate-[fadeIn_0.2s_ease-in]"
+        style={{ backgroundColor: 'var(--app-primary-background)' }}
+      >
        {!hasContent ? (
          <EmptyState />
        ) : (
          <>
            {messages.map((msg, index) => {
-              // Special styling for thinking messages (Claude Code style)
-              const messageClass =
-                msg.role === 'thinking'
-                  ? 'message assistant thinking-message'
-                  : `message ${msg.role}`;
+              const handleFileClick = (path: string) => {
+                vscode.postMessage({
+                  type: 'openFile',
+                  data: { path },
+                });
+              };
+
+              if (msg.role === 'thinking') {
+                return (
+                  <ThinkingMessage
+                    key={index}
+                    content={msg.content}
+                    timestamp={msg.timestamp}
+                    onFileClick={handleFileClick}
+                  />
+                );
+              }
+
+              if (msg.role === 'user') {
+                return (
+                  <UserMessage
+                    key={index}
+                    content={msg.content}
+                    timestamp={msg.timestamp}
+                    onFileClick={handleFileClick}
+                    fileContext={msg.fileContext}
+                  />
+                );
+              }

              return (
-                <div key={index} className={messageClass}>
-                  <div className="message-content">
-                    {msg.role === 'thinking' && (
-                      <span className="thinking-indicator">
-                        <span className="thinking-dot"></span>
-                        <span className="thinking-dot"></span>
-                        <span className="thinking-dot"></span>
-                      </span>
-                    )}
-                    <MessageContent
-                      content={msg.content}
-                      onFileClick={(path) => {
-                        vscode.postMessage({
-                          type: 'openFile',
-                          data: { path },
-                        });
-                      }}
-                    />
-                  </div>
-                  <div className="message-timestamp">
-                    {new Date(msg.timestamp).toLocaleTimeString()}
-                  </div>
-                </div>
+                <AssistantMessage
+                  key={index}
+                  content={msg.content}
+                  timestamp={msg.timestamp}
+                  onFileClick={handleFileClick}
+                />
              );
            })}

@@ -1411,16 +1429,7 @@ export const App: React.FC = () => {

            {/* Loading/Waiting Message - in message list */}
            {isWaitingForResponse && loadingMessage && (
-              <div className="message assistant waiting-message">
-                <div className="message-content">
-                  <span className="typing-indicator">
-                    <span className="typing-dot"></span>
-                    <span className="typing-dot"></span>
-                    <span className="typing-dot"></span>
-                  </span>
-                  <span className="loading-text">{loadingMessage}</span>
-                </div>
-              </div>
+              <WaitingMessage loadingMessage={loadingMessage} />
            )}

            {/* Not Logged In Message with Login Button - COMMENTED OUT */}
@@ -1442,20 +1451,15 @@ export const App: React.FC = () => {
            )} */}

            {isStreaming && currentStreamContent && (
-              <div className="message assistant streaming">
-                <div className="message-content">
-                  <MessageContent
-                    content={currentStreamContent}
-                    onFileClick={(path) => {
-                      vscode.postMessage({
-                        type: 'openFile',
-                        data: { path },
-                      });
-                    }}
-                  />
-                </div>
-                <div className="streaming-indicator">●</div>
-              </div>
+              <StreamingMessage
+                content={currentStreamContent}
+                onFileClick={(path) => {
+                  vscode.postMessage({
+                    type: 'openFile',
+                    data: { path },
+                  });
+                }}
+              />
            )}

            <div ref={messagesEndRef} />
@@ -1527,7 +1531,7 @@ export const App: React.FC = () => {
                <button
                  type="button"
                  className="action-button active-file-indicator"
-                  title={`Showing Qwen Code your current file selection: ${activeFileName}`}
+                  title={`Showing Qwen Code your current file selection: ${activeFileName}${activeSelection ? `#${activeSelection.startLine}-${activeSelection.endLine}` : ''}`}
                  onClick={() => {
                    // Request to focus/reveal the active file
                    vscode.postMessage({
@@ -1549,7 +1553,11 @@ export const App: React.FC = () => {
                      clipRule="evenodd"
                    ></path>
                  </svg>
-                  <span>{activeFileName}</span>
+                  <span>
+                    {activeFileName}
+                    {activeSelection &&
+                      ` #${activeSelection.startLine}${activeSelection.startLine !== activeSelection.endLine ? `-${activeSelection.endLine}` : ''}`}
+                  </span>
                </button>
              )}
              <div className="action-divider"></div>
--- a/packages/vscode-ide-companion/src/webview/MessageHandler.ts
+++ b/packages/vscode-ide-companion/src/webview/MessageHandler.ts
@@ -108,7 +108,26 @@ export class MessageHandler {

    switch (message.type) {
      case 'sendMessage':
-        await this.handleSendMessage((data?.text as string) || '');
+        await this.handleSendMessage(
+          (data?.text as string) || '',
+          data?.context as
+            | Array<{
+                type: string;
+                name: string;
+                value: string;
+                startLine?: number;
+                endLine?: number;
+              }>
+            | undefined,
+          data?.fileContext as
+            | {
+                fileName: string;
+                filePath: string;
+                startLine?: number;
+                endLine?: number;
+              }
+            | undefined,
+        );
        break;

      case 'permissionResponse':
@@ -142,14 +161,24 @@ export class MessageHandler {
        break;

      case 'getActiveEditor': {
-        // 发送当前激活编辑器的文件名给 WebView
+        // 发送当前激活编辑器的文件名和选中的行号给 WebView
        const editor = vscode.window.activeTextEditor;
-        const fileName = editor?.document.uri.fsPath
-          ? getFileName(editor.document.uri.fsPath)
-          : null;
+        const filePath = editor?.document.uri.fsPath || null;
+        const fileName = filePath ? getFileName(filePath) : null;
+
+        // Get selection info if there is any selected text
+        let selectionInfo = null;
+        if (editor && !editor.selection.isEmpty) {
+          const selection = editor.selection;
+          selectionInfo = {
+            startLine: selection.start.line + 1, // VSCode is 0-indexed, display as 1-indexed
+            endLine: selection.end.line + 1,
+          };
+        }
+
        this.sendToWebView({
          type: 'activeEditorChanged',
-          data: { fileName },
+          data: { fileName, filePath, selection: selectionInfo },
        });
        break;
      }
@@ -235,8 +264,42 @@ export class MessageHandler {
  /**
   * 处理发送消息请求
   */
-  private async handleSendMessage(text: string): Promise<void> {
+  private async handleSendMessage(
+    text: string,
+    context?: Array<{
+      type: string;
+      name: string;
+      value: string;
+      startLine?: number;
+      endLine?: number;
+    }>,
+    fileContext?: {
+      fileName: string;
+      filePath: string;
+      startLine?: number;
+      endLine?: number;
+    },
+  ): Promise<void> {
    console.log('[MessageHandler] handleSendMessage called with:', text);
+    console.log('[MessageHandler] Context:', context);
+    console.log('[MessageHandler] FileContext:', fileContext);
+
+    // Format message with file context if present
+    let formattedText = text;
+    if (context && context.length > 0) {
+      const contextParts = context
+        .map((ctx) => {
+          if (ctx.startLine && ctx.endLine) {
+            // Include line numbers in the file reference
+            return `${ctx.value}#${ctx.startLine}${ctx.startLine !== ctx.endLine ? `-${ctx.endLine}` : ''}`;
+          }
+          return ctx.value;
+        })
+        .join('\n');
+
+      // Prepend context to the message
+      formattedText = `${contextParts}\n\n${text}`;
+    }

    // Ensure we have an active conversation - create one if needed
    if (!this.currentConversationId) {
@@ -306,7 +369,7 @@ export class MessageHandler {
      });
    }

-    // Save user message
+    // Save user message (save original text, not formatted)
    const userMessage: ChatMessage = {
      role: 'user',
      content: text,
@@ -319,10 +382,10 @@ export class MessageHandler {
    );
    console.log('[MessageHandler] User message saved to store');

-    // Send to WebView
+    // Send to WebView (show original text with file context)
    this.sendToWebView({
      type: 'message',
-      data: userMessage,
+      data: { ...userMessage, fileContext },
    });
    console.log('[MessageHandler] User message sent to webview');

@@ -332,8 +395,8 @@ export class MessageHandler {
        '[MessageHandler] Agent is not connected, skipping AI response',
      );

-      // Save pending message for auto-retry after login
-      this.pendingMessage = text;
+      // Save pending message for auto-retry after login (save formatted text for AI)
+      this.pendingMessage = formattedText;
      console.log(
        '[MessageHandler] Saved pending message for retry after login',
      );
@@ -361,7 +424,7 @@ export class MessageHandler {
      return;
    }

-    // Send to agent
+    // Send to agent (use formatted text with file context)
    try {
      // Reset stream content
      this.resetStreamContent();
@@ -373,8 +436,8 @@ export class MessageHandler {
      });
      console.log('[MessageHandler] Stream start sent');

-      console.log('[MessageHandler] Sending to agent manager...');
-      await this.agentManager.sendMessage(text);
+      console.log('[MessageHandler] Sending to agent manager:', formattedText);
+      await this.agentManager.sendMessage(formattedText);
      console.log('[MessageHandler] Agent manager send complete');

      // Stream is complete - save assistant message
@@ -1038,9 +1101,9 @@ export class MessageHandler {
        console.log('[MessageHandler] Login completed successfully');

        // Show success notification
-        vscode.window.showInformationMessage(
-          'Successfully logged in to Qwen Code!',
-        );
+        // vscode.window.showInformationMessage(
+        //   'Successfully logged in to Qwen Code!',
+        // );

        // Auto-resend pending message if exists
        if (this.pendingMessage) {
--- a/packages/vscode-ide-companion/src/webview/components/MessageContent.css
+++ b/packages/vscode-ide-companion/src/webview/components/MessageContent.css
@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- *
- * MessageContent styles
- */
-
-/* Code block styles */
-.message-code-block {
-  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
-  border: 1px solid var(--app-primary-border-color);
-  border-radius: var(--corner-radius-small, 4px);
-  padding: 12px;
-  margin: 8px 0;
-  overflow-x: auto;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.message-code-block code {
-  background: none;
-  padding: 0;
-  font-family: inherit;
-  color: var(--app-primary-foreground);
-}
-
-/* Inline code styles */
-.message-inline-code {
-  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
-  border: 1px solid var(--app-primary-border-color);
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 0.9em;
-  color: var(--app-primary-foreground);
-  white-space: nowrap;
-}
-
-/* File path link styles */
-.message-file-path {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 0.95em;
-  color: var(--app-link-foreground, #007ACC);
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.message-file-path:hover {
-  color: var(--app-link-active-foreground, #005A9E);
-  text-decoration: underline;
-}
-
-.message-file-path:active {
-  color: var(--app-link-active-foreground, #005A9E);
-}
--- a/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
@@ -7,7 +7,6 @@
 */

 import type React from 'react';
-import './MessageContent.css';

 interface MessageContentProps {
  content: string;
@@ -19,6 +18,9 @@ interface MessageContentProps {
 */
 const FILE_PATH_REGEX =
  /([a-zA-Z]:)?([/\\][\w\-. ]+)+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)/gi;
+// Match file paths with optional line numbers like: path/file.ts#7-14 or path/file.ts#7
+const FILE_PATH_WITH_LINES_REGEX =
+  /([a-zA-Z]:)?([/\\][\w\-. ]+)+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)#(\d+)(?:-(\d+))?/gi;
 const CODE_BLOCK_REGEX = /```(\w+)?\n([\s\S]*?)```/g;
 const INLINE_CODE_REGEX = /`([^`]+)`/g;

@@ -51,10 +53,31 @@ export const MessageContent: React.FC<MessageContentProps> = ({
        matchIndex++;
      }

-      // Add code block
+      // Add code block with Tailwind CSS
      parts.push(
-        <pre key={`code-${matchIndex}`} className="message-code-block">
-          <code className={`language-${language || 'plaintext'}`}>{code}</code>
+        <pre
+          key={`code-${matchIndex}`}
+          className="my-2 overflow-x-auto rounded p-3 leading-[1.5]"
+          style={{
+            backgroundColor: 'var(--app-code-background, rgba(0, 0, 0, 0.05))',
+            border: '1px solid var(--app-primary-border-color)',
+            borderRadius: 'var(--corner-radius-small, 4px)',
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            fontSize: '13px',
+          }}
+        >
+          <code
+            className={`language-${language || 'plaintext'}`}
+            style={{
+              background: 'none',
+              padding: 0,
+              fontFamily: 'inherit',
+              color: 'var(--app-primary-foreground)',
+            }}
+          >
+            {code}
+          </code>
        </pre>,
      );
      matchIndex++;
@@ -107,9 +130,19 @@ export const MessageContent: React.FC<MessageContentProps> = ({
        matchIndex++;
      }

-      // Add inline code
+      // Add inline code with Tailwind CSS
      parts.push(
-        <code key={`inline-${matchIndex}`} className="message-inline-code">
+        <code
+          key={`inline-${matchIndex}`}
+          className="rounded px-1.5 py-0.5 whitespace-nowrap text-[0.9em]"
+          style={{
+            backgroundColor: 'var(--app-code-background, rgba(0, 0, 0, 0.05))',
+            border: '1px solid var(--app-primary-border-color)',
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-primary-foreground)',
+          }}
+        >
          {code}
        </code>,
      );
@@ -134,22 +167,99 @@ export const MessageContent: React.FC<MessageContentProps> = ({
    let lastIndex = 0;
    let matchIndex = startIndex;

-    const filePathMatches = Array.from(text.matchAll(FILE_PATH_REGEX));
+    // First, try to match file paths with line numbers
+    const filePathWithLinesMatches = Array.from(
+      text.matchAll(FILE_PATH_WITH_LINES_REGEX),
+    );
+    const processedRanges: Array<{ start: number; end: number }> = [];

-    filePathMatches.forEach((match) => {
+    filePathWithLinesMatches.forEach((match) => {
      const fullMatch = match[0];
      const startIdx = match.index!;
+      const filePath = fullMatch.split('#')[0]; // Get path without line numbers
+      const startLine = match[4]; // Capture group 4 is the start line
+      const endLine = match[5]; // Capture group 5 is the end line (optional)
+
+      processedRanges.push({
+        start: startIdx,
+        end: startIdx + fullMatch.length,
+      });

      // Add text before file path
      if (startIdx > lastIndex) {
        parts.push(text.slice(lastIndex, startIdx));
      }

-      // Add file path link
+      // Display text with line numbers
+      const displayText = endLine
+        ? `${filePath}#${startLine}-${endLine}`
+        : `${filePath}#${startLine}`;
+
+      // Add file path link with line numbers
      parts.push(
        <button
          key={`path-${matchIndex}`}
-          className="message-file-path"
+          className="bg-transparent border-0 p-0 underline cursor-pointer transition-colors text-[0.95em]"
+          style={{
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-link-foreground, #007ACC)',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color =
+              'var(--app-link-active-foreground, #005A9E)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--app-link-foreground, #007ACC)';
+          }}
+          onClick={() => onFileClick?.(filePath)}
+          title={`Open ${displayText}`}
+        >
+          {displayText}
+        </button>,
+      );
+
+      matchIndex++;
+      lastIndex = startIdx + fullMatch.length;
+    });
+
+    // Now match regular file paths (without line numbers) that weren't already matched
+    const filePathMatches = Array.from(text.matchAll(FILE_PATH_REGEX));
+
+    filePathMatches.forEach((match) => {
+      const fullMatch = match[0];
+      const startIdx = match.index!;
+
+      // Skip if this range was already processed as a path with line numbers
+      const isProcessed = processedRanges.some(
+        (range) => startIdx >= range.start && startIdx < range.end,
+      );
+      if (isProcessed) {
+        return;
+      }
+
+      // Add text before file path
+      if (startIdx > lastIndex) {
+        parts.push(text.slice(lastIndex, startIdx));
+      }
+
+      // Add file path link with Tailwind CSS
+      parts.push(
+        <button
+          key={`path-${matchIndex}`}
+          className="bg-transparent border-0 p-0 underline cursor-pointer transition-colors text-[0.95em]"
+          style={{
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-link-foreground, #007ACC)',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color =
+              'var(--app-link-active-foreground, #005A9E)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--app-link-foreground, #007ACC)';
+          }}
          onClick={() => onFileClick?.(fullMatch)}
          title={`Open ${fullMatch}`}
        >
--- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface AssistantMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+}
+
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        border: '1px solid var(--app-input-border)',
+        borderRadius: 'var(--corner-radius-medium)',
+        backgroundColor: 'var(--app-input-background)',
+        padding: '4px 6px',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    {/* Timestamp - temporarily hidden */}
+    {/* <div
+        className="text-xs opacity-60"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {new Date(timestamp).toLocaleTimeString()}
+      </div> */}
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface StreamingMessageProps {
+  content: string;
+  onFileClick?: (path: string) => void;
+}
+
+export const StreamingMessage: React.FC<StreamingMessageProps> = ({
+  content,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        border: '1px solid var(--app-input-border)',
+        borderRadius: 'var(--corner-radius-medium)',
+        backgroundColor: 'var(--app-input-background)',
+        padding: '4px 6px',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    <div
+      className="absolute right-3 bottom-3 animate-[pulse_1.5s_ease-in-out_infinite]"
+      style={{ color: 'var(--app-primary-foreground)' }}
+    >
+      ●
+    </div>
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/ThinkingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/ThinkingMessage.tsx
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface ThinkingMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+}
+
+export const ThinkingMessage: React.FC<ThinkingMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative opacity-80 italic pl-6 animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        backgroundColor:
+          'var(--app-list-hover-background, rgba(100, 100, 255, 0.1))',
+        border: '1px solid rgba(100, 100, 255, 0.3)',
+        borderRadius: 'var(--corner-radius-medium)',
+        padding: 'var(--app-spacing-medium)',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <span className="inline-flex items-center gap-1 mr-2">
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
+      </span>
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    {/* Timestamp - temporarily hidden */}
+    {/* <div
+        className="text-xs opacity-60"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {new Date(timestamp).toLocaleTimeString()}
+      </div> */}
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface FileContext {
+  fileName: string;
+  filePath: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+interface UserMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+  fileContext?: FileContext;
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+  fileContext,
+}) => {
+  // Generate display text for file context
+  const getFileContextDisplay = () => {
+    if (!fileContext) return null;
+    const { fileName, startLine, endLine } = fileContext;
+    if (startLine && endLine) {
+      return startLine === endLine
+        ? `${fileName}#${startLine}`
+        : `${fileName}#${startLine}-${endLine}`;
+    }
+    return fileName;
+  };
+
+  const fileContextDisplay = getFileContextDisplay();
+
+  return (
+    <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+      <div
+        className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+        style={{
+          border: '1px solid var(--app-input-border)',
+          borderRadius: 'var(--corner-radius-medium)',
+          backgroundColor: 'var(--app-input-background)',
+          padding: '4px 6px',
+          color: 'var(--app-primary-foreground)',
+        }}
+      >
+        <MessageContent content={content} onFileClick={onFileClick} />
+      </div>
+      {/* File context indicator */}
+      {fileContextDisplay && (
+        <div>
+          <div
+            role="button"
+            tabIndex={0}
+            className="mr"
+            onClick={() => fileContext && onFileClick?.(fileContext.filePath)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                fileContext && onFileClick?.(fileContext.filePath);
+              }
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <div
+              className="gr"
+              title={fileContextDisplay}
+              style={{
+                fontSize: '12px',
+                color: 'var(--app-secondary-foreground)',
+                opacity: 0.8,
+              }}
+            >
+              {fileContextDisplay}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
--- a/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface WaitingMessageProps {
+  loadingMessage: string;
+}
+
+export const WaitingMessage: React.FC<WaitingMessageProps> = ({
+  loadingMessage,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative opacity-85 animate-[fadeIn_0.2s_ease-in]">
+    <div className="bg-transparent border-0 py-2 flex items-center gap-2">
+      <span className="inline-flex items-center gap-1 mr-0">
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
+      </span>
+      <span
+        className="opacity-70 italic"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {loadingMessage}
+      </span>
+    </div>
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UserMessage } from './UserMessage.js';
+export { AssistantMessage } from './AssistantMessage.js';
+export { ThinkingMessage } from './ThinkingMessage.js';
+export { StreamingMessage } from './StreamingMessage.js';
+export { WaitingMessage } from './WaitingMessage.js';
--- a/packages/vscode-ide-companion/src/webview/components/ui/ChatHeader.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/ui/ChatHeader.tsx
@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface ChatHeaderProps {
+  currentSessionTitle: string;
+  onLoadSessions: () => void;
+  onSaveSession: () => void;
+  onNewSession: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({
+  currentSessionTitle,
+  onLoadSessions,
+  onSaveSession: _onSaveSession,
+  onNewSession,
+}) => (
+  <div
+    className="flex gap-1 select-none py-1.5 px-2.5"
+    style={{
+      borderBottom: '1px solid var(--app-primary-border-color)',
+      backgroundColor: 'var(--app-header-background)',
+    }}
+  >
+    {/* Past Conversations Button */}
+    <button
+      className="flex-none py-1 px-2 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none font-medium transition-colors duration-200 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+      style={{
+        borderRadius: 'var(--corner-radius-small)',
+        color: 'var(--app-primary-foreground)',
+        fontSize: 'var(--vscode-chat-font-size, 13px)',
+      }}
+      onClick={onLoadSessions}
+      title="Past conversations"
+    >
+      <span className="flex items-center gap-1">
+        <span style={{ fontSize: 'var(--vscode-chat-font-size, 13px)' }}>
+          {currentSessionTitle}
+        </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          className="w-3.5 h-3.5"
+        >
+          <path
+            fillRule="evenodd"
+            d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </span>
+    </button>
+
+    {/* Spacer */}
+    <div className="flex-1"></div>
+
+    {/* Save Session Button */}
+    {/* <button
+        className="flex-none p-0 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none w-6 h-6 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+        style={{
+          color: 'var(--app-primary-foreground)',
+        }}
+        onClick={onSaveSession}
+        title="Save Conversation"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          data-slot="icon"
+          className="w-4 h-4"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75V8.25a.75.75 0 0 1 .217-.517l.083-.083a.75.75 0 0 1 1.061 0l2.239 2.239A.75.75 0 0 1 22 10.5v5.25a4.75 4.75 0 0 1-4.75 4.75H4.75A4.75 4.75 0 0 1 0 15.75V4.25A4.75 4.75 0 0 1 4.75 0h5a.75.75 0 0 1 0 1.5h-5ZM9.017 6.5a1.5 1.5 0 0 1 2.072.58l.43.862a1 1 0 0 0 .895.558h3.272a1.5 1.5 0 0 1 1.5 1.5v6.75a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-6.75a1.5 1.5 0 0 1 1.5-1.5h1.25a1 1 0 0 0 .895-.558l.43-.862a1.5 1.5 0 0 1 .511-.732ZM11.78 8.47a.75.75 0 0 0-1.06-1.06L8.75 9.379 7.78 8.41a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l2.5-2.5Z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button> */}
+
+    {/* New Session Button */}
+    <button
+      className="flex-none p-0 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none w-6 h-6 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+      style={{
+        color: 'var(--app-primary-foreground)',
+      }}
+      onClick={onNewSession}
+      title="New Session"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+        data-slot="icon"
+        className="w-4 h-4"
+      >
+        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"></path>
+      </svg>
+    </button>
+  </div>
+);
--- a/packages/vscode-ide-companion/tailwind.config.js
+++ b/packages/vscode-ide-companion/tailwind.config.js
@@ -3,7 +3,11 @@
 module.exports = {
  content: [
    // 渐进式采用策略：只扫描新创建的Tailwind组件
+    './src/webview/App.tsx',
    './src/webview/components/ui/**/*.{js,jsx,ts,tsx}',
+    './src/webview/components/messages/**/*.{js,jsx,ts,tsx}',
+    './src/webview/components/MessageContent.tsx',
+    './src/webview/components/InfoBanner.tsx',
    // 当需要在更多组件中使用Tailwind时，可以逐步添加路径
    // "./src/webview/components/NewComponent/**/*.{js,jsx,ts,tsx}",
    // "./src/webview/pages/**/*.{js,jsx,ts,tsx}",