feat:新增会话历史列表样式 + 新开会话功能

- 还优化了页面的样式，删除了读取文件的以及没用的文本

src/panels/ICHelperPanel.ts

@@ -13,12 +13,12 @@ import { VCDViewerPanel } from "./VCDViewerPanel";
 /**
  * 创建并显示 IC 助手面板
  */
-export function showICHelperPanel(context: vscode.ExtensionContext) {
+export function showICHelperPanel(context: vscode.ExtensionContext, viewColumn?: vscode.ViewColumn) {
   // 创建WebView面板
   const panel = vscode.window.createWebviewPanel(
     "icCoder", // 面板ID
     "IC Coder", // 面板标题
-    vscode.ViewColumn.Beside, // 显示在旁边
+    viewColumn || vscode.ViewColumn.Beside, // 默认显示在旁边，但可以指定
     {
       enableScripts: true,
       retainContextWhenHidden: true,
@@ -74,6 +74,20 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
             getVCDFileInfo(panel, message.vcdFilePath, message.containerId);
           }
           break;
+        case "createNewConversation":
+          // 创建新会话 - 在当前编辑器组中打开新标签页
+          showICHelperPanel(context, panel.viewColumn);
+          break;
+        case "loadConversationHistory":
+          // 加载会话历史（暂未实现）
+          panel.webview.postMessage({
+            command: 'conversationHistory',
+            history: []
+          });
+          break;
+        case "selectConversation":
+          // 选择会话（暂未实现）
+          break;
       }
     },
     undefined,

src/views/conversationHistoryBar.ts

@@ -0,0 +1,308 @@
+/**
+ * 获取会话历史栏的 HTML 内容
+ */
+export function getConversationHistoryBarContent(): string {
+  return `
+    <div class="conversation-history-bar">
+      <div class="history-dropdown-container">
+        <button class="history-dropdown-button" onclick="toggleHistoryDropdown()">
+          <span class="dropdown-label">Past Conversations</span>
+          <svg class="dropdown-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" fill="currentColor"/>
+          </svg>
+        </button>
+
+        <div class="history-dropdown-menu" id="historyDropdownMenu">
+          <div class="history-list" id="historyList">
+            <!-- 会话历史列表将在这里动态生成 -->
+          </div>
+        </div>
+      </div>
+
+      <button class="new-conversation-button" onclick="createNewConversation()" title="新建对话">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+  `;
+}
+
+/**
+ * 获取会话历史栏的 CSS 样式
+ */
+export function getConversationHistoryBarStyles(): string {
+  return `
+    .conversation-history-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 16px;
+      background: var(--vscode-tab-activeBackground);
+      border-bottom: 1px solid var(--vscode-panel-border);
+      flex-shrink: 0;
+      min-height: 35px;
+    }
+
+    .history-dropdown-container {
+      position: relative;
+      flex: 1;
+    }
+
+    .history-dropdown-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 12px;
+      background: transparent;
+      color: var(--vscode-input-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s ease;
+    }
+
+    .history-dropdown-button:hover {
+      opacity: 0.8;
+    }
+
+    .dropdown-label {
+      white-space: nowrap;
+    }
+
+    .dropdown-icon {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .history-dropdown-button.active .dropdown-icon {
+      transform: rotate(180deg);
+    }
+
+    .history-dropdown-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      min-width: 300px;
+      max-height: 400px;
+      background: var(--vscode-dropdown-background);
+      border: 1px solid var(--vscode-dropdown-border);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      max-height: 400px;
+      overflow-y: auto;
+      z-index: 1000;
+      display: none;
+    }
+
+    .history-dropdown-menu.active {
+      display: block;
+    }
+
+    .history-list {
+      padding: 4px 0;
+    }
+
+    .history-item {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      border-bottom: 1px solid var(--vscode-panel-border);
+    }
+
+    .history-item:last-child {
+      border-bottom: none;
+    }
+
+    .history-item:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+
+    .history-item-title {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .history-item-time {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+
+    .history-empty {
+      padding: 20px;
+      text-align: center;
+      color: var(--vscode-descriptionForeground);
+      font-size: 14px;
+    }
+
+    .new-conversation-button {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      background: transparent;
+      color: var(--vscode-foreground);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .new-conversation-button:hover {
+      opacity: 0.7;
+    }
+
+    .new-conversation-button:active {
+      opacity: 0.5;
+    }
+
+    .new-conversation-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* 滚动条样式 */
+    .history-dropdown-menu::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-thumb {
+      background: rgba(128, 128, 128, 0.5);
+      border-radius: 4px;
+    }
+
+    .history-dropdown-menu::-webkit-scrollbar-thumb:hover {
+      background: rgba(128, 128, 128, 0.7);
+    }
+  `;
+}
+
+/**
+ * 获取会话历史栏的 JavaScript 脚本
+ */
+export function getConversationHistoryBarScript(): string {
+  return `
+    // 会话历史相关变量
+    let conversationHistory = [];
+    let currentConversationId = null;
+
+    // 切换历史记录下拉菜单
+    function toggleHistoryDropdown() {
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+
+      if (menu.classList.contains('active')) {
+        menu.classList.remove('active');
+        button.classList.remove('active');
+      } else {
+        menu.classList.add('active');
+        button.classList.add('active');
+        // 加载会话历史
+        loadConversationHistory();
+      }
+    }
+
+    // 加载会话历史
+    function loadConversationHistory() {
+      vscode.postMessage({ command: 'loadConversationHistory' });
+    }
+
+    // 渲染会话历史列表
+    function renderConversationHistory(history) {
+      conversationHistory = history;
+      const historyList = document.getElementById('historyList');
+
+      if (!history || history.length === 0) {
+        historyList.innerHTML = '<div class="history-empty">暂无会话历史</div>';
+        return;
+      }
+
+      historyList.innerHTML = history.map(item => \`
+        <div class="history-item"
+             onclick="selectConversation('\${item.id}')">
+          <div class="history-item-title">\${item.title || '未命名会话'}</div>
+          <div class="history-item-time">\${formatTime(item.timestamp)}</div>
+        </div>
+      \`).join('');
+    }
+
+    // 选择会话
+    function selectConversation(conversationId) {
+      currentConversationId = conversationId;
+      vscode.postMessage({
+        command: 'selectConversation',
+        conversationId: conversationId
+      });
+
+      // 关闭下拉菜单
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+      menu.classList.remove('active');
+      button.classList.remove('active');
+    }
+
+    // 创建新会话
+    function createNewConversation() {
+      vscode.postMessage({ command: 'createNewConversation' });
+    }
+
+    // 格式化时间
+    function formatTime(timestamp) {
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diff = now - date;
+
+      // 小于1分钟
+      if (diff < 60000) {
+        return '刚刚';
+      }
+      // 小于1小时
+      if (diff < 3600000) {
+        return Math.floor(diff / 60000) + '分钟前';
+      }
+      // 小于1天
+      if (diff < 86400000) {
+        return Math.floor(diff / 3600000) + '小时前';
+      }
+      // 小于7天
+      if (diff < 604800000) {
+        return Math.floor(diff / 86400000) + '天前';
+      }
+
+      // 超过7天显示具体日期
+      return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      });
+    }
+
+    // 点击外部关闭下拉菜单
+    document.addEventListener('click', (event) => {
+      const container = document.querySelector('.history-dropdown-container');
+      const menu = document.getElementById('historyDropdownMenu');
+      const button = document.querySelector('.history-dropdown-button');
+
+      if (menu && menu.classList.contains('active')) {
+        if (!container.contains(event.target)) {
+          menu.classList.remove('active');
+          button.classList.remove('active');
+        }
+      }
+    });
+  `;
+}

src/views/webviewContent.ts

@@ -1,4 +1,12 @@
-import { getWaveformPreviewContent, getWaveformPreviewScript } from './waveformPreviewContent';
+import {
+  getWaveformPreviewContent,
+  getWaveformPreviewScript,
+} from "./waveformPreviewContent";
+import {
+  getConversationHistoryBarContent,
+  getConversationHistoryBarStyles,
+  getConversationHistoryBarScript,
+} from "./conversationHistoryBar";
 
 /**
  * 获取 WebView 面板的 HTML 内容
@@ -16,7 +24,7 @@ export function getWebviewContent(iconUri?: string): string {
       background: var(--vscode-editor-background);
       color: var(--vscode-foreground);
       margin: 0;
-      padding: 20px;
+      padding: 0;
       height: 100vh;
       box-sizing: border-box;
       display: flex;
@@ -24,9 +32,16 @@ export function getWebviewContent(iconUri?: string): string {
     }
     .header {
       text-align: center;
-      margin-bottom: 20px;
-      padding-bottom: 15px;
-      border-bottom: 1px solid var(--vscode-panel-border);
+      padding: 20px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+    }
+    .header.hidden {
+      display: none;
     }
     .header h1 {
       color: var(--vscode-button-background);
@@ -38,6 +53,7 @@ export function getWebviewContent(iconUri?: string): string {
       flex-direction: column;
       min-height: 0;
       overflow: hidden;
+      padding: 0 20px 20px 20px;
     }
     .messages {
       flex: 1;
@@ -384,6 +400,7 @@ export function getWebviewContent(iconUri?: string): string {
       margin-top: 10px;
     }
     ${getWaveformPreviewContent()}
+    ${getConversationHistoryBarStyles()}
     .file-editor-section {
       margin-bottom: 15px;
       padding: 15px;
@@ -544,6 +561,7 @@ export function getWebviewContent(iconUri?: string): string {
   </style>
 </head>
 <body>
+  ${getConversationHistoryBarContent()}
   <div class="header">
     <div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
       <img src="${iconUri}" alt="IC Coder" style="width: 28px; height: 28px;" />
@@ -553,35 +571,7 @@ export function getWebviewContent(iconUri?: string): string {
   </div>
 
   <div class="chat-container">
-    <div class="file-reader-section">
-      <h3>📁 文件读取</h3>
-      <div class="file-input-group">
-        <input
-          type="text"
-          id="filePathInput"
-          placeholder="输入文件路径（相对或绝对路径）..."
-        />
-        <button onclick="readFile()">读取文件</button>
-      </div>
-      <div id="fileContent" class="file-content empty">
-        文件内容将在这里显示...
-      </div>
-      <div id="errorMessage" style="display: none;"></div>
-    </div>
-
-    <div id="fileEditorSection" class="file-editor-section">
-      <h3>✏️ 编辑文件: <span id="editingFileName"></span></h3>
-      <textarea id="fileEditorTextarea" class="file-editor-textarea"></textarea>
-      <div class="editor-actions">
-        <button onclick="saveFile()">保存修改</button>
-        <button onclick="cancelEdit()" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);">取消</button>
-      </div>
-    </div>
-    <div id="messages" class="messages">
-      <div class="message bot-message">
-        👋 你好！我是 IC Coder 助手，可以帮你生成代码、回答问题。
-      </div>
-    </div>
+    <div id="messages" class="messages"></div>
 
     <div class="quick-actions">
       <button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
@@ -823,10 +813,20 @@ export function getWebviewContent(iconUri?: string): string {
         div.appendChild(actionsDiv);
       } else {
         div.textContent = text;
+        // 当添加用户消息时，隐藏 header
+        hideHeaderIfNeeded();
       }
 
       messagesEl.appendChild(div);
       messagesEl.scrollTop = messagesEl.scrollHeight;
+
+      // 添加消息后检查 header 显示状态
+      checkHeaderVisibility();
+    }
+
+    // 检查是否需要隐藏 header
+    function hideHeaderIfNeeded() {
+      checkHeaderVisibility();
     }
 
     function copyMessage(text, button) {
@@ -995,6 +995,32 @@ export function getWebviewContent(iconUri?: string): string {
             renderWaveformInfo(message.containerId, message.vcdInfo);
           }
           break;
+        case 'conversationHistory':
+          // 接收到会话历史数据
+          if (message.history) {
+            renderConversationHistory(message.history);
+          }
+          break;
+        case 'conversationLoaded':
+          // 会话加载成功，清空当前消息并显示历史消息
+          messagesEl.innerHTML = '';
+          if (message.messages && message.messages.length > 0) {
+            message.messages.forEach(msg => {
+              addMessage(msg.text, msg.sender);
+            });
+          }
+          currentConversationId = message.conversationId;
+          break;
+        case 'newConversationCreated':
+          // 新会话创建成功，清空消息区域
+          messagesEl.innerHTML = '';
+          currentConversationId = message.conversationId;
+          // 显示 header
+          const header = document.querySelector('.header');
+          if (header) {
+            header.classList.remove('hidden');
+          }
+          break;
       }
     });
 
@@ -1017,9 +1043,24 @@ export function getWebviewContent(iconUri?: string): string {
     // 初始化时调整一次高度
     autoResizeTextarea();
 
+    // 初始化时检查是否需要显示 header
+    checkHeaderVisibility();
+
     messageInput.focus();
 
+    // 检查 header 显示状态
+    function checkHeaderVisibility() {
+      const allMessages = messagesEl.querySelectorAll('.message');
+      const header = document.querySelector('.header');
+      if (allMessages.length > 0 && header) {
+        header.classList.add('hidden');
+      } else if (header) {
+        header.classList.remove('hidden');
+      }
+    }
+
     ${getWaveformPreviewScript()}
+    ${getConversationHistoryBarScript()}
   </script>
 </body>
 </html>`;