sidebar.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. <!-- 工具栏 -->
  40. <div class="toolbar">
  41. <div class="toolbar-left">
  42. <button class="toolbar-button" id="prompt-button">
  43. <svg viewBox="0 0 24 24" fill="currentColor">
  44. <path
  45. 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"
  46. />
  47. <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
  48. </svg>
  49. 快捷指令
  50. </button>
  51. <!-- 这里可以添加更多左侧工具按钮 -->
  52. </div>
  53. <div class="toolbar-right">
  54. <!-- 这里可以添加右侧工具按钮 -->
  55. </div>
  56. </div>
  57. <!-- 快捷指令面板 -->
  58. <div class="prompt-panel" id="prompt-panel">
  59. <div class="prompt-header">
  60. <h3>快捷指令</h3>
  61. <button class="close-prompt">
  62. <svg viewBox="0 0 24 24" fill="currentColor">
  63. <path
  64. 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"
  65. />
  66. </svg>
  67. </button>
  68. </div>
  69. <div class="prompt-list">
  70. <button class="prompt-item">
  71. <svg viewBox="0 0 24 24" fill="currentColor">
  72. <path
  73. d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
  74. />
  75. </svg>
  76. 分析当前页面的主要观点和论据
  77. </button>
  78. <!-- 添加更多快捷指令 -->
  79. </div>
  80. </div>
  81. <div class="input-wrapper">
  82. <textarea
  83. id="chat-input"
  84. placeholder="输入消息..."
  85. rows="1"
  86. autofocus
  87. ></textarea>
  88. <div class="input-buttons">
  89. <button id="send-button" class="icon-button" title="发送">
  90. <svg viewBox="0 0 24 24" width="20" height="20">
  91. <path
  92. fill="currentColor"
  93. d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
  94. />
  95. </svg>
  96. </button>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <script src="js/config.js"></script>
  102. <script src="js/utils.js"></script>
  103. <script src="js/ai-service.js"></script>
  104. <script src="js/chat-ui.js"></script>
  105. <script src="js/sidebar.js"></script>
  106. </body>
  107. </html>