| 29 | |
| 30 | // 创建聊天容器 |
| 31 | createChatContainer() { |
| 32 | // 主聊天容器 |
| 33 | this.chatContainer = document.createElement('div'); |
| 34 | this.chatContainer.className = 'bella-chat-container'; |
| 35 | this.chatContainer.innerHTML = ` |
| 36 | <div class="bella-chat-header"> |
| 37 | <div class="bella-chat-title"> |
| 38 | <div class="bella-avatar">💝</div> |
| 39 | <div class="bella-title-text"> |
| 40 | <h3>贝拉</h3> |
| 41 | <span class="bella-status">在线</span> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="bella-chat-controls"> |
| 45 | <button class="bella-settings-btn" title="设置"> |
| 46 | <i class="fas fa-cog"></i> |
| 47 | </button> |
| 48 | <button class="bella-minimize-btn" title="最小化"> |
| 49 | <i class="fas fa-minus"></i> |
| 50 | </button> |
| 51 | </div> |
| 52 | </div> |
| 53 | <div class="bella-chat-messages"></div> |
| 54 | <div class="bella-chat-input-container"> |
| 55 | <div class="bella-input-wrapper"> |
| 56 | <input type="text" class="bella-message-input" placeholder="和贝拉聊聊天..." maxlength="500"> |
| 57 | <button class="bella-send-btn" title="发送"> |
| 58 | <i class="fas fa-paper-plane"></i> |
| 59 | </button> |
| 60 | </div> |
| 61 | <div class="bella-input-hint"> |
| 62 | 按 Enter 发送，Shift + Enter 换行 |
| 63 | </div> |
| 64 | </div> |
| 65 | `; |
| 66 | |
| 67 | // 获取关键元素引用 |
| 68 | this.messageContainer = this.chatContainer.querySelector('.bella-chat-messages'); |
| 69 | this.inputContainer = this.chatContainer.querySelector('.bella-chat-input-container'); |
| 70 | this.messageInput = this.chatContainer.querySelector('.bella-message-input'); |
| 71 | this.sendButton = this.chatContainer.querySelector('.bella-send-btn'); |
| 72 | |
| 73 | document.body.appendChild(this.chatContainer); |
| 74 | } |
| 75 | |
| 76 | // 创建切换按钮 |
| 77 | createToggleButton() { |