sidebar.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>派维斯智能体助手</title>
  6. <link rel="stylesheet" href="css/sidebar.css" />
  7. <link rel="stylesheet" href="css/chat.css" />
  8. <script src="./openis.js" type="module"></script>
  9. </head>
  10. <body>
  11. <div class="sidebar-header">
  12. <h1>派维斯智能体助手</h1>
  13. <button id="close-sidebar" class="close-btn">×</button>
  14. </div>
  15. <div class="chat-container">
  16. <!-- 聊天消息区域 -->
  17. <div class="chat-messages" id="chat-messages">
  18. <!-- 欢迎消息 -->
  19. <div class="message assistant">
  20. <div class="message-content">
  21. <p>你好!我是派维斯智能助手。</p>
  22. <p>使用说明:</p>
  23. <ul>
  24. <li>直接发送消息开始对话</li>
  25. <li>使用快捷指令快速操作</li>
  26. <li>可选:输入 /setapi YOUR_API_KEY 设置自定义API密钥</li>
  27. </ul>
  28. </div>
  29. </div>
  30. </div>
  31. <!-- 输入区域 -->
  32. <div class="page-info-card">
  33. <img class="page-favicon" src="" alt="网站图标" />
  34. <div class="page-title-container">
  35. <p class="page-title"></p>
  36. </div>
  37. <!-- <button class="summarize-button">总结</button> -->
  38. </div>
  39. <div class="chat-input-container">
  40. <!-- 工具栏 -->
  41. <div class="toolbar">
  42. <div class="toolbar-left">
  43. <button class="toolbar-button" id="prompt-button">
  44. <svg viewBox="0 0 24 24" fill="currentColor">
  45. <path
  46. d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"
  47. />
  48. <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
  49. </svg>
  50. 快捷指令
  51. </button>
  52. <button class="toolbar-button" id="tools-button">
  53. <svg viewBox="0 0 24 24" fill="currentColor">
  54. <path
  55. 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"
  56. />
  57. </svg>
  58. 常用工具
  59. </button>
  60. </div>
  61. <div class="toolbar-right">
  62. <!-- 这里可以添加右侧工具按钮 -->
  63. </div>
  64. </div>
  65. <!-- 快捷指令面板 -->
  66. <div class="prompt-panel" id="prompt-panel">
  67. <div class="prompt-header">
  68. <h3>快捷指令</h3>
  69. <button class="close-prompt">
  70. <svg viewBox="0 0 24 24" fill="currentColor">
  71. <path
  72. 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"
  73. />
  74. </svg>
  75. </button>
  76. </div>
  77. <div class="prompt-list">
  78. <button class="prompt-item">
  79. <svg viewBox="0 0 24 24" fill="currentColor">
  80. <path
  81. d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
  82. />
  83. </svg>
  84. 分析当前页面的主要观点和论据
  85. </button>
  86. <!-- 添加更多快捷指令 -->
  87. </div>
  88. </div>
  89. <!-- 工具箱面板 -->
  90. <div class="tools-panel" id="tools-panel">
  91. <div class="tools-header">
  92. <h3>工具箱</h3>
  93. <button class="close-tools">
  94. <svg viewBox="0 0 24 24" fill="currentColor">
  95. <path
  96. 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"
  97. />
  98. </svg>
  99. </button>
  100. </div>
  101. <div class="tools-content">
  102. <!-- 文本处理工具 -->
  103. <div class="tools-section">
  104. <h4>文本处理</h4>
  105. <div class="tools-grid">
  106. <button class="tool-item">
  107. <svg viewBox="0 0 24 24" fill="currentColor">
  108. <path
  109. d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"
  110. />
  111. </svg>
  112. <span>文本格式化</span>
  113. </button>
  114. <button class="tool-item">
  115. <svg viewBox="0 0 24 24" fill="currentColor">
  116. <path
  117. 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"
  118. />
  119. </svg>
  120. <span>摘要生成</span>
  121. </button>
  122. </div>
  123. </div>
  124. <!-- 代码工具 -->
  125. <div class="tools-section">
  126. <h4>代码工具</h4>
  127. <div class="tools-grid">
  128. <button class="tool-item">
  129. <svg viewBox="0 0 24 24" fill="currentColor">
  130. <path
  131. 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"
  132. />
  133. </svg>
  134. <span>代码格式化</span>
  135. </button>
  136. <button class="tool-item">
  137. <svg viewBox="0 0 24 24" fill="currentColor">
  138. <path
  139. 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"
  140. />
  141. </svg>
  142. <span>代码注释</span>
  143. </button>
  144. </div>
  145. </div>
  146. <!-- 翻译工具 -->
  147. <div class="tools-section">
  148. <h4>翻译工具</h4>
  149. <div class="tools-grid">
  150. <button class="tool-item">
  151. <svg viewBox="0 0 24 24" fill="currentColor">
  152. <path
  153. 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"
  154. />
  155. </svg>
  156. <span>中英互译</span>
  157. </button>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="input-wrapper">
  163. <textarea
  164. id="chat-input"
  165. placeholder="输入消息..."
  166. rows="1"
  167. autofocus
  168. ></textarea>
  169. <div class="input-buttons">
  170. <button id="upload-button" class="icon-button" title="上传文件">
  171. <svg viewBox="0 0 24 24" fill="currentColor">
  172. <path
  173. 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"
  174. />
  175. </svg>
  176. </button>
  177. <!-- 隐藏的文件输入框 -->
  178. <input type="file" id="file-input" style="display: none" multiple />
  179. <button id="send-button" class="icon-button" title="发送">
  180. <svg viewBox="0 0 24 24" width="20" height="20">
  181. <path
  182. fill="currentColor"
  183. d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
  184. />
  185. </svg>
  186. </button>
  187. <!-- 停止生成按钮 -->
  188. <button
  189. id="stop-button"
  190. class="icon-button stop-button"
  191. title="停止生成"
  192. style="display: none;"
  193. >
  194. <svg
  195. viewBox="0 0 24 24"
  196. fill="currentColor"
  197. width="20"
  198. height="20"
  199. >
  200. <path d="M6 6h12v12H6z" />
  201. </svg>
  202. </button>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <!-- 第三方库 -->
  208. <script src="js/libs/xlsx.full.min.js"></script>
  209. <!-- 应用脚本 -->
  210. <script src="js/config.js"></script>
  211. <script src="js/utils.js"></script>
  212. <script src="js/ai-service.js"></script>
  213. <script src="js/chat-ui.js"></script>
  214. <script src="js/sidebar.js"></script>
  215. </body>
  216. </html>