release: v0.1.0

- 添加常用工具功能
- 实现工具箱面板
- 添加文件上传功能
- 改进工具栏布局

CHANGELOG.md

@@ -1,5 +1,26 @@
 # 更新日志
 
+## [0.1.0] - 2024-03-xx
+
+### 新增
+
+- 添加常用工具功能
+  - 实现工具箱面板
+  - 添加文本处理工具
+  - 添加代码工具
+  - 添加翻译工具
+- 添加文件上传功能
+  - 支持多文件选择
+  - 优化上传按钮样式
+  - 添加文件处理基础结构
+
+### 优化
+
+- 改进工具栏布局
+  - 优化按钮排列方式
+  - 调整间距和对齐
+  - 改进交互体验
+
 ## [0.0.9] - 2024-03-xx
 
 ### 优化

css/chat.css

@@ -885,3 +885,145 @@
   width: 16px;
   height: 16px;
 }
+
+/* 工具箱面板 */
+.tools-panel {
+  position: absolute;
+  bottom: 100%;
+  left: 16px;
+  right: 16px;
+  margin-bottom: 8px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  max-height: 500px;
+  display: none;
+  overflow: hidden;
+}
+
+.tools-panel.show {
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.2s ease-out;
+}
+
+.tools-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #eee;
+  background: #f8f9fa;
+}
+
+.tools-header h3 {
+  margin: 0;
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.tools-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.tools-section {
+  margin-bottom: 20px;
+}
+
+.tools-section:last-child {
+  margin-bottom: 0;
+}
+
+.tools-section h4 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #666;
+  font-weight: 500;
+}
+
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+}
+
+.tool-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px;
+  border: none;
+  border-radius: 6px;
+  background: #f5f7fa;
+  color: #444;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tool-item:hover {
+  background: #edf2fc;
+  color: #1a73e8;
+}
+
+.tool-item svg {
+  width: 20px;
+  height: 20px;
+}
+
+.close-tools {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.close-tools:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.close-tools svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* 文件上传按钮样式 */
+#upload-button {
+  position: relative;
+  overflow: hidden;
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  color: #666;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+#upload-button:hover {
+  color: #1a73e8;
+  background: rgba(26, 115, 232, 0.08);
+}
+
+#upload-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* 文件上传按钮点击效果 */
+#upload-button:active {
+  transform: scale(0.95);
+}

js/chat-ui.js

@@ -142,6 +142,46 @@ class ChatUI {
         this.handleSummarize();
       });
     }
+
+    // 工具箱面板
+    const toolsButton = document.getElementById("tools-button");
+    const toolsPanel = document.getElementById("tools-panel");
+    const closeTools = document.querySelector(".close-tools");
+
+    toolsButton.addEventListener("click", () => {
+      toolsPanel.classList.toggle("show");
+      // 关闭其他面板
+      this.promptPanel.classList.remove("show");
+    });
+
+    closeTools.addEventListener("click", () => {
+      toolsPanel.classList.remove("show");
+    });
+
+    // 点击外部关闭工具箱面板
+    document.addEventListener("click", (e) => {
+      if (!toolsPanel.contains(e.target) && !toolsButton.contains(e.target)) {
+        toolsPanel.classList.remove("show");
+      }
+    });
+
+    // 文件上传功能
+    const uploadButton = document.getElementById("upload-button");
+    const fileInput = document.getElementById("file-input");
+
+    uploadButton.addEventListener("click", () => {
+      fileInput.click();
+    });
+
+    fileInput.addEventListener("change", (e) => {
+      const files = Array.from(e.target.files);
+      if (files.length > 0) {
+        // 处理文件上传
+        this.handleFileUpload(files);
+      }
+      // 清空文件输入框，以便可以重复选择同一文件
+      fileInput.value = "";
+    });
   }
 
   async handleSend() {
@@ -654,6 +694,16 @@ class ChatUI {
       this.setInputState(false);
     }
   }
+
+  /**
+   * 处理文件上传
+   * @param {File[]} files 上传的文件数组
+   */
+  async handleFileUpload(files) {
+    // 目前仅显示文件信息，后续可以添加实际的上传和处理逻辑
+    const fileNames = files.map((file) => file.name).join(", ");
+    this.addMessage(`已选择文件：${fileNames}`, "user", false);
+  }
 }
 
 // 等待DOM加载完成后再初始化

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "派维斯智能体助手",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "一个辅助用户处理业务流程的智能体助手",
   "author": "Paiwise Team",
   "permissions": [

sidebar.html

@@ -51,7 +51,14 @@
               </svg>
               快捷指令
             </button>
-            <!-- 这里可以添加更多左侧工具按钮 -->
+            <button class="toolbar-button" id="tools-button">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
+                />
+              </svg>
+              常用工具
+            </button>
           </div>
           <div class="toolbar-right">
             <!-- 这里可以添加右侧工具按钮 -->
@@ -83,6 +90,82 @@
           </div>
         </div>
 
+        <!-- 工具箱面板 -->
+        <div class="tools-panel" id="tools-panel">
+          <div class="tools-header">
+            <h3>工具箱</h3>
+            <button class="close-tools">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="tools-content">
+            <!-- 文本处理工具 -->
+            <div class="tools-section">
+              <h4>文本处理</h4>
+              <div class="tools-grid">
+                <button class="tool-item">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"
+                    />
+                  </svg>
+                  <span>文本格式化</span>
+                </button>
+                <button class="tool-item">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"
+                    />
+                  </svg>
+                  <span>摘要生成</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- 代码工具 -->
+            <div class="tools-section">
+              <h4>代码工具</h4>
+              <div class="tools-grid">
+                <button class="tool-item">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+                    />
+                  </svg>
+                  <span>代码格式化</span>
+                </button>
+                <button class="tool-item">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"
+                    />
+                  </svg>
+                  <span>代码注释</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- 翻译工具 -->
+            <div class="tools-section">
+              <h4>翻译工具</h4>
+              <div class="tools-grid">
+                <button class="tool-item">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
+                    />
+                  </svg>
+                  <span>中英互译</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="input-wrapper">
           <textarea
             id="chat-input"
@@ -91,6 +174,15 @@
             autofocus
           ></textarea>
           <div class="input-buttons">
+            <button id="upload-button" class="icon-button" title="上传文件">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z"
+                />
+              </svg>
+            </button>
+            <!-- 隐藏的文件输入框 -->
+            <input type="file" id="file-input" style="display: none" multiple />
             <button id="send-button" class="icon-button" title="发送">
               <svg viewBox="0 0 24 24" width="20" height="20">
                 <path