feat:代码变更diff可视化功能实现

src/views/inputArea.ts

@@ -34,6 +34,11 @@ import {
   getExampleShowcaseStyles,
   getExampleShowcaseScript,
 } from "./exampleShowcase";
+import {
+  getChangePanelContent,
+  getChangePanelStyles,
+  getChangePanelScript,
+} from "./changePanel";
 import { sendIconSvg, stopIconSvg } from "../constants/toolIcons";
 
 /**
@@ -49,6 +54,8 @@ export function getInputAreaContent(
     <div class="input-area centered" id="inputArea">
       <div class="input-group">
         <div class="input-wrapper">
+          <!-- 代码变更面板 -->
+          ${getChangePanelContent()}
           <!-- 顶部工具栏 -->
           <div class="input-top-toolbar">
             ${getContextButtonContent()}
@@ -94,6 +101,7 @@ export function getInputAreaStyles(): string {
     ${getContextCompressStyles()}
     ${getOptimizeButtonStyles()}
     ${getExampleShowcaseStyles()}
+    ${getChangePanelStyles()}
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
       padding-top: 15px;
@@ -300,6 +308,7 @@ export function getInputAreaScript(): string {
     ${getContextButtonScript()}
     ${getContextCompressScript()}
     ${getOptimizeButtonScript()}
+    ${getChangePanelScript()}
 
     // 对话状态管理
     let isConversationActive = false;