diff --git a/src/views/contextButton.ts b/src/views/contextButton.ts
new file mode 100644
index 0000000..b1d6fed
--- /dev/null
+++ b/src/views/contextButton.ts
@@ -0,0 +1,71 @@
+/**
+ * 添加上下文按钮组件
+ */
+
+/**
+ * 获取添加上下文按钮的 HTML 内容
+ */
+export function getContextButtonContent(): string {
+  return `
+    <div class="tooltip">
+      <button class="add-context-button" onclick="handleAddContext()">
+        <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200">
+          <path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path>
+        </svg>
+        <span class="add-context-label">添加上下文</span>
+      </button>
+      <span class="tooltiptext">添加文件或代码片段作为上下文</span>
+    </div>
+  `;
+}
+
+/**
+ * 获取添加上下文按钮的样式
+ */
+export function getContextButtonStyles(): string {
+  return `
+    /* 添加上下文按钮样式 */
+    .add-context-button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: rgba(128, 128, 128, 0.2);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 6px;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    .add-context-button:hover {
+      background: rgba(128, 128, 128, 0.3);
+      border-color: var(--vscode-focusBorder);
+    }
+
+    .add-context-button svg {
+      width: 16px;
+      height: 16px;
+      color: #409eff;
+    }
+
+    .add-context-label {
+      white-space: nowrap;
+    }
+  `;
+}
+
+/**
+ * 获取添加上下文按钮的脚本
+ */
+export function getContextButtonScript(): string {
+  return `
+    // 添加上下文处理函数
+    function handleAddContext() {
+      // 发送添加上下文请求到扩展
+      vscode.postMessage({ command: 'addContext' });
+    }
+  `;
+}
diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
index bdc3bbe..8c9ba5c 100644
--- a/src/views/inputArea.ts
+++ b/src/views/inputArea.ts
@@ -4,6 +4,11 @@ import {
   getModelSelectorStyles,
   getModelSelectorScript
 } from "./modelSelector";
+import {
+  getContextButtonContent,
+  getContextButtonStyles,
+  getContextButtonScript
+} from "./contextButton";
 
 /**
  * 获取输入区域的 HTML 内容
@@ -15,14 +20,7 @@ export function getInputAreaContent(): string {
         <div class="input-wrapper">
           <!-- 顶部工具栏 -->
           <div class="input-top-toolbar">
-            <!-- 添加上下文按钮 -->
-            <div class="tooltip">
-              <button class="add-context-button" onclick="handleAddContext()">
-                <svg t="1766915545722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" width="200" height="200"><path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#8a8a8a" p-id="4995"></path></svg>
-                <span class="add-context-label">添加上下文</span>
-              </button>
-              <span class="tooltiptext">添加文件或代码片段作为上下文</span>
-            </div>
+            ${getContextButtonContent()}
 
             <!-- Plan 开关 -->
             <div class="tooltip">
@@ -121,6 +119,7 @@ export function getInputAreaContent(): string {
 export function getInputAreaStyles(): string {
   return `
     ${getModelSelectorStyles()}
+    ${getContextButtonStyles()}
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
       padding-top: 15px;
@@ -158,37 +157,6 @@ export function getInputAreaStyles(): string {
       margin-bottom: 8px;
       gap: 12px;
     }
-
-    /* 添加上下文按钮样式 */
-    .add-context-button {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      background: rgba(128, 128, 128, 0.2);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 6px;
-      color: var(--vscode-foreground);
-      cursor: pointer;
-      transition: all 0.2s ease;
-      font-size: 13px;
-      font-weight: 500;
-    }
-
-    .add-context-button:hover {
-      background: rgba(128, 128, 128, 0.3);
-      border-color: var(--vscode-focusBorder);
-    }
-
-    .add-context-button svg {
-      width: 16px;
-      height: 16px;
-      color: #409eff;
-    }
-
-    .add-context-label {
-      white-space: nowrap;
-    }
     .plan-toggle {
       display: flex;
       align-items: center;
@@ -562,6 +530,7 @@ export function getInputAreaStyles(): string {
 export function getInputAreaScript(): string {
   return `
     ${getModelSelectorScript()}
+    ${getContextButtonScript()}
 
     // 自动调整 textarea 高度
     function autoResizeTextarea() {
@@ -649,12 +618,6 @@ export function getInputAreaScript(): string {
       resetOptimizeButton();
     }
 
-    // 添加上下文处理函数
-    function handleAddContext() {
-      // 发送添加上下文请求到扩展
-      vscode.postMessage({ command: 'addContext' });
-    }
-
     // Plan 开关处理函数
     function handlePlanToggle() {
       const planToggle = document.getElementById('planToggle');