sidebar.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. </head>
  9. <body>
  10. <div class="sidebar-header">
  11. <h1>派维斯智能体助手</h1>
  12. <button id="close-sidebar" class="close-btn">×</button>
  13. </div>
  14. <div class="chat-container">
  15. <!-- 聊天消息区域 -->
  16. <div class="chat-messages" id="chat-messages">
  17. <!-- 欢迎消息 -->
  18. <div class="message assistant">
  19. <div class="message-content">
  20. <p>你好!我是派维斯智能助手。</p>
  21. <p>使用说明:</p>
  22. <ul>
  23. <li>直接发送消息开始对话</li>
  24. <li>使用快捷指令快速操作</li>
  25. <li>可选:输入 /setapi YOUR_API_KEY 设置自定义API密钥</li>
  26. </ul>
  27. </div>
  28. </div>
  29. </div>
  30. <!-- 输入区域 -->
  31. <div class="page-info-card">
  32. <img class="page-favicon" src="" alt="网站图标" />
  33. <div class="page-title-container">
  34. <p class="page-title"></p>
  35. </div>
  36. <button class="summarize-button">总结</button>
  37. </div>
  38. <div class="chat-input-container">
  39. <div class="input-wrapper">
  40. <textarea
  41. id="chat-input"
  42. placeholder="输入消息..."
  43. rows="1"
  44. autofocus
  45. ></textarea>
  46. <div class="input-buttons">
  47. <button id="prompt-button" class="icon-button" title="快捷指令">
  48. <svg viewBox="0 0 24 24" width="20" height="20">
  49. <path
  50. fill="currentColor"
  51. d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z"
  52. />
  53. </svg>
  54. </button>
  55. <button id="send-button" class="icon-button" title="发送">
  56. <svg viewBox="0 0 24 24" width="20" height="20">
  57. <path
  58. fill="currentColor"
  59. d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
  60. />
  61. </svg>
  62. </button>
  63. </div>
  64. </div>
  65. </div>
  66. <!-- 快捷指令面板 -->
  67. <div class="prompt-panel" id="prompt-panel">
  68. <div class="prompt-header">
  69. <h3>快捷指令</h3>
  70. <button class="close-prompt">×</button>
  71. </div>
  72. <div class="prompt-list">
  73. <button class="prompt-item">分析当前页面内容</button>
  74. <button class="prompt-item">总结主要观点</button>
  75. <button class="prompt-item">提取关键信息</button>
  76. <button class="prompt-item">翻译选中内容</button>
  77. </div>
  78. </div>
  79. </div>
  80. <script src="js/config.js"></script>
  81. <script src="js/utils.js"></script>
  82. <script src="js/ai-service.js"></script>
  83. <script src="js/chat-ui.js"></script>
  84. <script src="js/sidebar.js"></script>
  85. </body>
  86. </html>