feat:新增复制点赞点踩功能

- 优化输入框占据不满整个大框的问题
- 优化点赞点踩复制的tooltip显示被遮挡的问题

src/views/webviewContent.ts

@@ -45,18 +45,103 @@ export function getWebviewContent(iconUri?: string): string {
     }
     .message {
       margin-bottom: 12px;
-      padding: 10px 15px;
-      border-radius: 8px;
-      max-width: 80%;
     }
     .user-message {
+      padding: 10px 15px;
+      border-radius: 8px;
       background: var(--vscode-button-secondaryBackground);
+      border: 1px solid var(--vscode-input-border);
       margin-left: auto;
+      width: fit-content;
+      max-width: 80%;
     }
     .bot-message {
-      background: var(--vscode-button-background);
+      padding: 0;
-      color: var(--vscode-button-foreground);
+      text-align: left;
-      margin-right: auto;
+      color: var(--vscode-foreground);
+      max-width: 100%;
+      position: relative;
+    }
+    .message-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+      margin-left: 10px;
+      opacity: 0.85;
+      transition: opacity 0.2s ease;
+    }
+    .message-actions:hover {
+      opacity: 1;
+    }
+    .action-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--vscode-foreground);
+      opacity: 0.9;
+      transition: opacity 0.2s ease;
+      position: relative;
+    }
+    .action-btn:hover {
+      opacity: 1;
+    }
+    .action-btn svg {
+      width: 14px;
+      height: 14px;
+    }
+    .action-btn.active {
+      color: var(--vscode-button-background);
+      opacity: 1;
+    }
+    .action-btn .action-tooltip {
+      visibility: hidden;
+      width: auto;
+      background: #1e1e1e;
+      color: #ffffff;
+      text-align: center;
+      border-radius: 4px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 4px 8px;
+      position: absolute;
+      z-index: 1000;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%) translateY(5px);
+      opacity: 0;
+      transition: all 0.2s ease;
+      font-size: 12px;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+    .action-btn .action-tooltip::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #1e1e1e transparent transparent transparent;
+    }
+    .action-btn .action-tooltip::before {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -6px;
+      border-width: 6px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
+      z-index: -1;
+    }
+    .action-btn:hover .action-tooltip {
+      visibility: visible;
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
     }
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
@@ -65,8 +150,8 @@ export function getWebviewContent(iconUri?: string): string {
     }
     .input-group {
       display: flex;
+      flex-direction: column;
       gap: 10px;
-      align-items: flex-end;
       background: var(--vscode-input-background);
       border: 1px solid var(--vscode-input-border);
       border-radius: 8px;
@@ -82,16 +167,27 @@ export function getWebviewContent(iconUri?: string): string {
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
     }
     .input-wrapper {
-      flex: 1;
       display: flex;
       flex-direction: column;
       gap: 8px;
+      width: 100%;
+    }
+    .input-bottom-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
     }
     .mode-selector {
       display: flex;
       align-items: center;
       position: relative;
     }
+    .input-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
     .mode-selector select {
       padding: 2px 4px;
       background: transparent;
@@ -140,7 +236,17 @@ export function getWebviewContent(iconUri?: string): string {
       border-width: 6px;
       border-style: solid;
       border-color: #1e1e1e transparent transparent transparent;
-      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
+    }
+    .tooltip .tooltiptext::before {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -7px;
+      border-width: 7px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
+      z-index: -1;
     }
     .tooltip:hover .tooltiptext {
       visibility: visible;
@@ -157,8 +263,25 @@ export function getWebviewContent(iconUri?: string): string {
       font-family: inherit;
       resize: none;
       min-height: 40px;
+      max-height: 200px;
       outline: none;
       box-sizing: border-box;
+      overflow-y: auto;
+      line-height: 1.5;
+    }
+    /* 简洁的滚动条样式 */
+    textarea::-webkit-scrollbar {
+      width: 8px;
+    }
+    textarea::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    textarea::-webkit-scrollbar-thumb {
+      background: rgba(128, 128, 128, 0.5);
+      border-radius: 4px;
+    }
+    textarea::-webkit-scrollbar-button {
+      display: none;
     }
     button {
       padding: 0 20px;
@@ -180,8 +303,6 @@ export function getWebviewContent(iconUri?: string): string {
       transition: opacity 0.2s ease;
       width: 32px;
       height: 32px;
-      align-self: flex-end;
-      margin-bottom: -6px;
     }
     .optimize-button:hover {
       opacity: 0.7;
@@ -299,8 +420,6 @@ export function getWebviewContent(iconUri?: string): string {
       flex-direction: column;
       align-items: center;
       position: relative;
-      align-self: flex-end;
-      margin-bottom: -10px;
     }
     .context-info {
       display: flex;
@@ -475,6 +594,7 @@ export function getWebviewContent(iconUri?: string): string {
             placeholder="输入您的问题..."
             onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
           ></textarea>
+          <div class="input-bottom-row">
             <div class="mode-selector">
               <div class="tooltip">
                 <select id="modeSelect">
@@ -485,8 +605,7 @@ export function getWebviewContent(iconUri?: string): string {
                 <span class="tooltiptext">切换模型</span>
               </div>
             </div>
-        </div>
+            <div class="input-actions">
-
               <!-- 上下文显示 -->
               <div class="context-display">
                 <div class="context-info" onclick="toggleContextPanel()">
@@ -535,6 +654,9 @@ export function getWebviewContent(iconUri?: string): string {
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
 
   <script>
     const vscode = acquireVsCodeApi();
@@ -560,6 +682,7 @@ export function getWebviewContent(iconUri?: string): string {
       addMessage(text, 'user');
       vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
       messageInput.value = '';
+      autoResizeTextarea(); // 重置输入框高度
       messageInput.focus();
 
       // 重置优化状态
@@ -661,11 +784,80 @@ export function getWebviewContent(iconUri?: string): string {
     function addMessage(text, sender) {
       const div = document.createElement('div');
       div.className = \`message \${sender}-message\`;
+
+      if (sender === 'bot') {
+        // 创建消息内容
+        const messageContent = document.createElement('div');
+        messageContent.textContent = text;
+        div.appendChild(messageContent);
+
+        // 创建操作按钮容器
+        const actionsDiv = document.createElement('div');
+        actionsDiv.className = 'message-actions';
+
+        // 复制按钮
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'action-btn';
+        copyBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M761.088 715.3152a38.7072 38.7072 0 0 1 0-77.4144 37.4272 37.4272 0 0 0 37.4272-37.4272V265.0112a37.4272 37.4272 0 0 0-37.4272-37.4272H425.6256a37.4272 37.4272 0 0 0-37.4272 37.4272 38.7072 38.7072 0 1 1-77.4144 0 115.0976 115.0976 0 0 1 114.8416-114.8416h335.4624a115.0976 115.0976 0 0 1 114.8416 114.8416v335.4624a115.0976 115.0976 0 0 1-114.8416 114.8416z" fill="currentColor"/><path d="M589.4656 883.0976H268.1856a121.1392 121.1392 0 0 1-121.2928-121.2928v-322.56a121.1392 121.1392 0 0 1 121.2928-121.344h321.28a121.1392 121.1392 0 0 1 121.2928 121.2928v322.56c1.28 67.1232-54.1696 121.344-121.2928 121.344zM268.1856 395.3152a43.52 43.52 0 0 0-43.8784 43.8784v322.56a43.52 43.52 0 0 0 43.8784 43.8784h321.28a43.52 43.52 0 0 0 43.8784-43.8784v-322.56a43.52 43.52 0 0 0-43.8784-43.8784z" fill="currentColor"/></svg><span class="action-tooltip">复制</span>\`;
+        copyBtn.onclick = () => copyMessage(text, copyBtn);
+
+        // 点赞按钮
+        const likeBtn = document.createElement('button');
+        likeBtn.className = 'action-btn';
+        likeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M923.5 411.2c-28.6-33.9-72.1-53-116.4-51.1h-68c6.4-31.6 10.1-63.9 11.2-96v-0.8c-0.5-60.9-18.7-112-51.2-144-22.6-22.2-50.8-33.7-81.5-33.3-38.3 0-69.1 11.5-91.7 34.2-26.5 26.5-39.9 66.8-39.8 119.6 0.1 40.1-19.4 83.4-52.1 115.9-32 31.8-71.7 49.3-111.8 49.3H295.6c-3 0-6 0.3-8.9 0.8v-1.2H140.8c-39.7 0-72.2 32.5-72.2 72.2v392.9c0 39.7 32.5 72.2 72.2 72.2h146.8v-0.6c2.9 0.4 5.9 0.7 8.9 0.7h464.7c33.3-0.8 65.6-13 91.1-34.4s43.1-51.1 49.6-83.8l52.3-289.1c9.4-43.4-2.1-89.6-30.7-123.5zM147.7 843.7v-344c0-9 7.3-16.3 16.3-16.3h70.4V860H164c-9 0-16.3-7.3-16.3-16.3z m726.4-324.9l-0.2 0.6-51.7 290.3c-6.7 29.1-32.3 50.2-62.2 51.3l-4.9 0.2-0.4 0.3h-440V486h7.3c61.4 0 121-25.7 168.1-72.4 48.6-48.2 76.5-111.7 76.5-174.2-0.1-31.5 4.9-51.8 15.3-62.2 7.4-7.4 18.7-10.8 35.8-10.8h0.2c9-0.1 17.4 3.6 24.9 11 16.3 16.2 25.7 47.3 25.8 85.4-1.2 41.8-7.9 83.3-19.9 123.4l-21.6 54.3h181.5c24.5-0.6 48.2 8.9 65.1 26.1 16.9 17.2 25.3 40.8 23 64.9z" fill="currentColor"/></svg><span class="action-tooltip">点赞</span>\`;
+        likeBtn.onclick = () => toggleLike(likeBtn);
+
+        // 点踩按钮
+        const dislikeBtn = document.createElement('button');
+        dislikeBtn.className = 'action-btn';
+        dislikeBtn.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M360 640c60.992 40.107 88 87.381 88 149.333 0 5.611 0.427 12.864 1.579 21.462a174.933 174.933 0 0 0 11.2 42.666c19.584 48.192 60.864 83.008 119.018 85.12 28.843 2.56 60.886-3.584 91.414-25.045 58.709-41.237 81.706-117.248 69.973-230.87h48.15V640v42.667c17.173 0 38.4-2.475 61.823-10.667 66.304-23.125 107.627-84.117 84.928-162.816l-53.674-254.55a213.333 213.333 0 0 0-208.747-169.3H207.019a85.333 85.333 0 0 0-85.078 78.783l-29.546 384A85.333 85.333 0 0 0 177.493 640H360z m-61.333-109.333v24H177.493l29.526-384h91.648v360z m85.333-360h289.664a128 128 0 0 1 125.227 101.589l54.442 258.07c21.334 67.007-64 67.007-64 67.007H640c64 277.334-54.613 256-54.613 256-52.054 0-52.054-64-52.054-64 0-92.8-43.264-167.082-129.77-222.805A42.667 42.667 0 0 1 384 530.667v-360z" fill="currentColor"/></svg><span class="action-tooltip">点踩</span>\`;
+        dislikeBtn.onclick = () => toggleDislike(dislikeBtn);
+
+        actionsDiv.appendChild(copyBtn);
+        actionsDiv.appendChild(likeBtn);
+        actionsDiv.appendChild(dislikeBtn);
+
+        div.appendChild(actionsDiv);
+      } else {
         div.textContent = text;
+      }
+
       messagesEl.appendChild(div);
       messagesEl.scrollTop = messagesEl.scrollHeight;
     }
 
+    function copyMessage(text, button) {
+      navigator.clipboard.writeText(text).then(() => {
+        const originalHTML = button.innerHTML;
+        button.innerHTML = \`<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474c-6.1-7.7-15.3-12.2-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1 0.4-12.8-6.3-12.8z" fill="currentColor"/></svg>\`;
+        setTimeout(() => {
+          button.innerHTML = originalHTML;
+        }, 2000);
+      });
+    }
+
+    function toggleLike(button) {
+      const isActive = button.classList.contains('active');
+      // 移除所有同级按钮的 active 状态
+      const parent = button.parentElement;
+      parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
+
+      if (!isActive) {
+        button.classList.add('active');
+      }
+    }
+
+    function toggleDislike(button) {
+      const isActive = button.classList.contains('active');
+      // 移除所有同级按钮的 active 状态
+      const parent = button.parentElement;
+      parent.querySelectorAll('.action-btn').forEach(btn => btn.classList.remove('active'));
+
+      if (!isActive) {
+        button.classList.add('active');
+      }
+    }
+
     function openFileEditor(filePath, content) {
       currentEditingFile = filePath;
       editingFileName.textContent = filePath;
@@ -787,6 +979,18 @@ export function getWebviewContent(iconUri?: string): string {
       }
     });
 
+    // 自动调整 textarea 高度
+    function autoResizeTextarea() {
+      messageInput.style.height = 'auto';
+      messageInput.style.height = messageInput.scrollHeight + 'px';
+    }
+
+    // 监听输入事件，自动调整高度
+    messageInput.addEventListener('input', autoResizeTextarea);
+
+    // 初始化时调整一次高度
+    autoResizeTextarea();
+
     messageInput.focus();
   </script>
 </body>