2 | 
3 |
6 |
7 | 
2 |
3 |
6 |
7 | 
62 |
69 |
109 |
110 |
111 |
112 |
170 |
113 |
118 | API 设置
119 |
120 |
121 |
122 |
168 |
169 |
171 |
196 |
172 |
177 | 对话列表
178 |
179 |
180 |
181 |
194 |
195 |
197 |
206 |
207 |
208 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "Cerebr",
4 | "version": "2.3.34",
5 | "description": "Cerebr - 智能AI聊天助手",
6 | "content_security_policy": {
7 | "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
8 | },
9 | "icons": {
10 | "16": "icons/icon16.png",
11 | "48": "icons/icon48.png",
12 | "128": "icons/icon128.png"
13 | },
14 | "permissions": [
15 | "storage",
16 | "commands",
17 | "scripting",
18 | "activeTab",
19 | "tabs",
20 | "webRequest",
21 | "unlimitedStorage"
22 | ],
23 | "host_permissions": ["
198 | ![预览图片]()
199 |
204 |
205 | 转换为\n 265 | let message = messageInput.innerHTML 266 | .replace(/
<\/div>/g, '\n') // 处理换行后的空行 267 | .replace(/
/g, '\n') // 处理换行后的新行开始
268 | .replace(/<\/div>/g, '') // 处理换行后的新行结束
269 | .replace(//g, '\n') // 处理单个换行
270 | .replace(/ /g, ' '); // 处理空格
271 |
272 | // 将HTML实体转换回实际字符
273 | const tempDiv = document.createElement('div');
274 | tempDiv.innerHTML = message;
275 | message = tempDiv.textContent;
276 |
277 | // 获取图片标签
278 | const imageTags = messageInput.querySelectorAll('.image-tag');
279 |
280 | return { message, imageTags };
281 | }
282 |
283 | /**
284 | * 构建消息内容对象（文本+图片）
285 | * @param {string} message - 消息文本
286 | * @param {NodeList} imageTags - 图片标签节点列表
287 | * @returns {string|Array} 格式化后的消息内容
288 | */
289 | export function buildMessageContent(message, imageTags) {
290 | if (imageTags.length > 0) {
291 | const content = [];
292 | if (message.trim()) {
293 | content.push({
294 | type: "text",
295 | text: message
296 | });
297 | }
298 | imageTags.forEach(tag => {
299 | const base64Data = tag.getAttribute('data-image');
300 | if (base64Data) {
301 | content.push({
302 | type: "image_url",
303 | image_url: {
304 | url: base64Data
305 | }
306 | });
307 | }
308 | });
309 | return content;
310 | } else {
311 | return message;
312 | }
313 | }
314 |
315 | /**
316 | * 清空输入框
317 | * @param {HTMLElement} messageInput - 消息输入框元素
318 | * @param {Object} config - UI配置
319 | */
320 | export function clearMessageInput(messageInput, config) {
321 | messageInput.innerHTML = '';
322 | adjustTextareaHeight({
323 | textarea: messageInput,
324 | config: config.textarea
325 | });
326 | }
327 |
328 | /**
329 | * 将光标移动到元素末尾
330 | * @param {HTMLElement} element - 要操作的元素
331 | */
332 | function moveCaretToEnd(element) {
333 | const range = document.createRange();
334 | range.selectNodeContents(element);
335 | range.collapse(false);
336 | const selection = window.getSelection();
337 | selection.removeAllRanges();
338 | selection.addRange(range);
339 | }
340 |
341 | /**
342 | * 处理消息输入组件的窗口消息
343 | * @param {MessageEvent} event - 消息事件对象
344 | * @param {Object} config - 配置对象
345 | */
346 | export function handleWindowMessage(event, config) {
347 | const { messageInput, newChatButton, uiConfig } = config;
348 |
349 | if (event.data.type === 'DROP_IMAGE') {
350 | const imageData = event.data.imageData;
351 | if (imageData && imageData.data) {
352 | // 确保base64数据格式正确
353 | const base64Data = imageData.data.startsWith('data:') ? imageData.data : `data:image/png;base64,${imageData.data}`;
354 | const imageTag = createImageTag({
355 | base64Data: base64Data,
356 | fileName: imageData.name,
357 | config: uiConfig.imageTag
358 | });
359 |
360 | // 确保输入框有焦点
361 | messageInput.focus();
362 |
363 | // 获取或创建选区
364 | const selection = window.getSelection();
365 | let range;
366 |
367 | // 检查是否有现有选区
368 | if (selection.rangeCount > 0) {
369 | range = selection.getRangeAt(0);
370 | } else {
371 | // 创建新的选区
372 | range = document.createRange();
373 | // 将选区设置到输入框的末尾
374 | range.selectNodeContents(messageInput);
375 | range.collapse(false);
376 | selection.removeAllRanges();
377 | selection.addRange(range);
378 | }
379 |
380 | // 插入图片标签
381 | range.deleteContents();
382 | range.insertNode(imageTag);
383 |
384 | // 移动光标到图片标签后面
385 | const newRange = document.createRange();
386 | newRange.setStartAfter(imageTag);
387 | newRange.collapse(true);
388 | selection.removeAllRanges();
389 | selection.addRange(newRange);
390 |
391 | // 触发输入事件以调整高度
392 | messageInput.dispatchEvent(new Event('input'));
393 | }
394 | } else if (event.data.type === 'FOCUS_INPUT') {
395 | messageInput.focus();
396 | const range = document.createRange();
397 | range.selectNodeContents(messageInput);
398 | range.collapse(false);
399 | const selection = window.getSelection();
400 | selection.removeAllRanges();
401 | selection.addRange(range);
402 | } else if (event.data.type === 'UPDATE_PLACEHOLDER') {
403 | setPlaceholder({
404 | messageInput,
405 | placeholder: event.data.placeholder,
406 | timeout: event.data.timeout
407 | });
408 | } else if (event.data.type === 'NEW_CHAT') {
409 | // 模拟点击新对话按钮
410 | newChatButton.click();
411 | messageInput.focus();
412 | }
413 | }
--------------------------------------------------------------------------------
/src/handlers/message-handler.js:
--------------------------------------------------------------------------------
1 | import { chatManager } from '../utils/chat-manager.js';
2 | import { showImagePreview, createImageTag } from '../utils/ui.js';
3 | import { processMathAndMarkdown, renderMathInElement } from '../../htmd/latex.js';
4 |
5 | /**
6 | * 消息接口
7 | * @typedef {Object} Message
8 | * @property {string} role - 消息角色 ("user" | "assistant")
9 | * @property {string | Array<{type: string, text?: string, image_url?: {url: string}}>} content - 消息内容
10 | */
11 |
12 | /**
13 | * 添加消息到聊天界面
14 | * @param {Object} params - 参数对象
15 | * @param {Object|string} params.text - 消息文本内容，可以是字符串或包含content和reasoning_content的对象
16 | * @param {string} params.sender - 发送者类型 ("user" | "assistant")
17 | * @param {HTMLElement} params.chatContainer - 聊天容器元素
18 | * @param {boolean} [params.skipHistory=false] - 是否跳过历史记录
19 | * @param {DocumentFragment} [params.fragment=null] - 文档片段（用于批量加载）
20 | * @returns {HTMLElement} 创建的消息元素
21 | */
22 | export async function appendMessage({
23 | text,
24 | sender,
25 | chatContainer,
26 | skipHistory = false,
27 | fragment = null
28 | }) {
29 | const messageDiv = document.createElement('div');
30 | messageDiv.className = `message ${sender}-message`;
31 |
32 | // 如果是批量加载，添加特殊类名
33 | if (fragment) {
34 | messageDiv.classList.add('batch-load');
35 | }
36 |
37 | // 处理文本内容
38 | let textContent = typeof text === 'string' ? text : text.content;
39 |
40 | const previewModal = document.querySelector('.image-preview-modal');
41 | const previewImage = previewModal.querySelector('img');
42 | const messageInput = document.getElementById('message-input');
43 |
44 | let messageHtml = '';
45 | if (Array.isArray(textContent)) {
46 | textContent.forEach(item => {
47 | if (item.type === "text") {
48 | messageHtml += item.text;
49 | textContent = item.text;
50 | } else if (item.type === "image_url") {
51 | const imageTag = createImageTag({
52 | base64Data: item.image_url.url,
53 | config: {
54 | onImageClick: (base64Data) => {
55 | showImagePreview({
56 | base64Data,
57 | config: {
58 | previewModal,
59 | previewImage
60 | }
61 | });
62 | },
63 | onDeleteClick: (container) => {
64 | container.remove();
65 | messageInput.dispatchEvent(new Event('input'));
66 | }
67 | }
68 | });
69 | messageHtml += imageTag.outerHTML;
70 | }
71 | });
72 | } else {
73 | messageHtml = textContent;
74 | }
75 |
76 | // 如果是用户消息，且当前对话只有这一条消息，则更新对话标题
77 | if (sender === 'user' && !skipHistory) {
78 | const currentChat = chatManager.getCurrentChat();
79 | if (currentChat && currentChat.messages.length === 0) {
80 | currentChat.title = textContent;
81 | chatManager.saveChats();
82 | }
83 | }
84 |
85 | const reasoningContent = typeof text === 'string' ? null : text.reasoning_content;
86 |
87 | // 存储原始文本用于复制
88 | messageDiv.setAttribute('data-original-text', textContent);
89 |
90 | // 如果有思考内容，添加思考模块
91 | if (reasoningContent) {
92 | const reasoningWrapper = document.createElement('div');
93 | reasoningWrapper.className = 'reasoning-wrapper';
94 |
95 | const reasoningDiv = document.createElement('div');
96 | reasoningDiv.className = 'reasoning-content';
97 |
98 | // 添加占位文本容器
99 | const placeholderDiv = document.createElement('div');
100 | placeholderDiv.className = 'reasoning-placeholder';
101 | placeholderDiv.textContent = '深度思考';
102 | reasoningDiv.appendChild(placeholderDiv);
103 |
104 | // 添加文本容器
105 | const reasoningTextDiv = document.createElement('div');
106 | reasoningTextDiv.className = 'reasoning-text';
107 | reasoningTextDiv.innerHTML = processMathAndMarkdown(reasoningContent).trim();
108 | reasoningDiv.appendChild(reasoningTextDiv);
109 |
110 | // 添加点击事件处理折叠/展开
111 | reasoningDiv.onclick = function() {
112 | this.classList.toggle('collapsed');
113 | };
114 |
115 | reasoningWrapper.appendChild(reasoningDiv);
116 | messageDiv.appendChild(reasoningWrapper);
117 | }
118 |
119 | // 添加主要内容
120 | const mainContent = document.createElement('div');
121 | mainContent.className = 'main-content';
122 | mainContent.innerHTML = processMathAndMarkdown(messageHtml);
123 | messageDiv.appendChild(mainContent);
124 |
125 | // 渲染 LaTeX 公式
126 | try {
127 | await renderMathInElement(messageDiv);
128 | } catch (err) {
129 | console.error('渲染LaTeX公式失败:', err);
130 | }
131 |
132 | // 处理消息中的链接
133 | messageDiv.querySelectorAll('a').forEach(link => {
134 | link.target = '_blank';
135 | link.rel = 'noopener noreferrer';
136 | });
137 |
138 | // 处理消息中的图片标签
139 | messageDiv.querySelectorAll('.image-tag').forEach(tag => {
140 | const img = tag.querySelector('img');
141 | const base64Data = tag.getAttribute('data-image');
142 | if (img && base64Data) {
143 | img.addEventListener('click', (e) => {
144 | e.preventDefault();
145 | e.stopPropagation();
146 | showImagePreview({
147 | base64Data,
148 | config: {
149 | previewModal,
150 | previewImage
151 | }
152 | });
153 | });
154 | }
155 | });
156 |
157 | // 如果提供了文档片段，添加到片段中；否则直接添加到聊天容器
158 | if (fragment) {
159 | fragment.appendChild(messageDiv);
160 | } else {
161 | chatContainer.appendChild(messageDiv);
162 | // 只在发送新消息时自动滚动（不是加载历史记录）
163 | if (sender === 'user' && !skipHistory) {
164 | requestAnimationFrame(() => {
165 | chatContainer.scrollTo({
166 | top: chatContainer.scrollHeight,
167 | behavior: 'smooth'
168 | });
169 | });
170 | }
171 | }
172 |
173 | // 只有在不跳过历史记录时才添加到历史记录
174 | if (!skipHistory) {
175 | if (sender === 'ai') {
176 | messageDiv.classList.add('updating');
177 | }
178 | }
179 |
180 | return messageDiv;
181 | }
182 |
183 | /**
184 | * 更新AI消息内容
185 | * @param {Object} params - 参数对象
186 | * @param {Object} params.text - 新的消息文本对象，包含content和reasoningContent
187 | * @param {string} params.text.content - 主要消息内容
188 | * @param {string|null} params.text.reasoning_content - 深度思考内容
189 | * @param {HTMLElement} params.chatContainer - 聊天容器元素
190 | * @returns {Promise} 返回是否成功更新了消息
191 | */
192 | export async function updateAIMessage({
193 | text,
194 | chatContainer
195 | }) {
196 | let lastMessage = chatContainer.querySelector('.message:last-child');
197 | const currentText = lastMessage.getAttribute('data-original-text') || '';
198 |
199 |
200 | // 处理文本内容
201 | const textContent = typeof text === 'string' ? text : text.content;
202 | const reasoningContent = typeof text === 'string' ? null : text.reasoning_content;
203 |
204 | // 如果新文本的开头与当前文本不一致，则认为消息不连续，置空lastMessage
205 | if (!textContent.startsWith(currentText) && currentText !== '') {
206 | lastMessage = null;
207 | }
208 |
209 | if (lastMessage && lastMessage.classList.contains('ai-message')) {
210 | // 获取当前显示的文本
211 | // 如果新文本比当前文本长，说有新内容需要更新
212 | if (textContent.length > currentText.length || reasoningContent) {
213 | // 更新原始文本属性
214 | lastMessage.setAttribute('data-original-text', textContent);
215 |
216 | // 处理深度思考内容
217 | let reasoningDiv = lastMessage.querySelector('.reasoning-content');
218 | if (reasoningContent) {
219 | if (!reasoningDiv) {
220 | const reasoningWrapper = document.createElement('div');
221 | reasoningWrapper.className = 'reasoning-wrapper';
222 |
223 | reasoningDiv = document.createElement('div');
224 | reasoningDiv.className = 'reasoning-content';
225 |
226 | // 添加占位文本容器
227 | const placeholderDiv = document.createElement('div');
228 | placeholderDiv.className = 'reasoning-placeholder';
229 | placeholderDiv.textContent = '深度思考';
230 | reasoningDiv.appendChild(placeholderDiv);
231 |
232 | // 添加文本容器
233 | const reasoningTextDiv = document.createElement('div');
234 | reasoningTextDiv.className = 'reasoning-text';
235 | reasoningDiv.appendChild(reasoningTextDiv);
236 |
237 | // 添加点击事件处理折叠/展开
238 | reasoningDiv.onclick = function() {
239 | this.classList.toggle('collapsed');
240 | };
241 |
242 | reasoningWrapper.appendChild(reasoningDiv);
243 |
244 | // 确保深度思考模块在最上方
245 | if (lastMessage.firstChild) {
246 | lastMessage.insertBefore(reasoningWrapper, lastMessage.firstChild);
247 | } else {
248 | lastMessage.appendChild(reasoningWrapper);
249 | }
250 | }
251 |
252 | // 获取或创建文本容器
253 | let reasoningTextDiv = reasoningDiv.querySelector('.reasoning-text');
254 | if (!reasoningTextDiv) {
255 | reasoningTextDiv = document.createElement('div');
256 | reasoningTextDiv.className = 'reasoning-text';
257 | reasoningDiv.appendChild(reasoningTextDiv);
258 | }
259 |
260 | // 获取当前显示的文本
261 | const currentReasoningText = reasoningTextDiv.getAttribute('data-original-text') || '';
262 |
263 | // 如果新文本比当前文本长，说明有新内容需要更新
264 | if (reasoningContent.length > currentReasoningText.length) {
265 | // 更新原始文本属性
266 | reasoningTextDiv.setAttribute('data-original-text', reasoningContent);
267 | // 更新显示内容
268 | reasoningTextDiv.innerHTML = processMathAndMarkdown(reasoningContent).trim();
269 | await renderMathInElement(reasoningTextDiv);
270 | }
271 | }
272 |
273 | // 处理主要内容
274 | const mainContent = document.createElement('div');
275 | mainContent.className = 'main-content';
276 | mainContent.innerHTML = processMathAndMarkdown(textContent);
277 |
278 | // 清除原有的主要内容
279 | Array.from(lastMessage.children).forEach(child => {
280 | if (!child.classList.contains('reasoning-wrapper')) {
281 | child.remove();
282 | }
283 | });
284 |
285 | // 将主要内容添加到深度思考模块之后
286 | const reasoningWrapper = lastMessage.querySelector('.reasoning-wrapper');
287 | if (reasoningWrapper) {
288 | lastMessage.insertBefore(mainContent, reasoningWrapper.nextSibling);
289 | } else {
290 | lastMessage.appendChild(mainContent);
291 | }
292 |
293 | // 渲染LaTeX公式
294 | await renderMathInElement(mainContent);
295 |
296 | // 处理新染的链接
297 | lastMessage.querySelectorAll('a').forEach(link => {
298 | link.target = '_blank';
299 | link.rel = 'noopener noreferrer';
300 | });
301 |
302 | return true;
303 | }
304 | return true; // 如果文本没有变长，也认为是成功的
305 | } else {
306 | // 创建新消息时也需要包含思考内容
307 | // console.log('updateAIMessage');
308 | await appendMessage({
309 | text: {
310 | content: textContent,
311 | reasoning_content: reasoningContent
312 | },
313 | sender: 'ai',
314 | chatContainer
315 | });
316 | return true;
317 | }
318 | }
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { setTheme } from './utils/theme.js';
2 | import { callAPI } from './services/chat.js';
3 | import { chatManager } from './utils/chat-manager.js';
4 | import { appendMessage } from './handlers/message-handler.js';
5 | import { hideContextMenu } from './components/context-menu.js';
6 | import { initChatContainer } from './components/chat-container.js';
7 | import { showImagePreview, hideImagePreview } from './utils/ui.js';
8 | import { renderAPICards, createCardCallbacks, selectCard } from './components/api-card.js';
9 | import { storageAdapter, syncStorageAdapter, browserAdapter, isExtensionEnvironment } from './utils/storage-adapter.js';
10 | import { initMessageInput, getFormattedMessageContent, buildMessageContent, clearMessageInput, handleWindowMessage } from './components/message-input.js';
11 | import './utils/viewport.js';
12 | import {
13 | hideChatList,
14 | initChatListEvents,
15 | loadChatContent,
16 | initializeChatList,
17 | renderChatList
18 | } from './components/chat-list.js';
19 |
20 | // 存储用户的问题历史
21 | let userQuestions = [];
22 |
23 | document.addEventListener('DOMContentLoaded', async () => {
24 | const chatContainer = document.getElementById('chat-container');
25 | const messageInput = document.getElementById('message-input');
26 | const contextMenu = document.getElementById('context-menu');
27 | const copyMessageButton = document.getElementById('copy-message');
28 | const copyCodeButton = document.getElementById('copy-code');
29 | const stopUpdateButton = document.getElementById('stop-update');
30 | const settingsButton = document.getElementById('settings-button');
31 | const settingsMenu = document.getElementById('settings-menu');
32 | const feedbackButton = document.getElementById('feedback-button');
33 | const previewModal = document.querySelector('.image-preview-modal');
34 | const previewImage = previewModal.querySelector('img');
35 | const chatListPage = document.getElementById('chat-list-page');
36 | const newChatButton = document.getElementById('new-chat');
37 | const chatListButton = document.getElementById('chat-list');
38 | const apiSettings = document.getElementById('api-settings');
39 | const deleteMessageButton = document.getElementById('delete-message');
40 | const webpageSwitch = document.getElementById('webpage-switch');
41 |
42 | // 修改: 创建一个对象引用来保存当前控制器
43 | const abortControllerRef = { current: null };
44 | let currentController = null;
45 |
46 | // 创建UI工具配置
47 | const uiConfig = {
48 | textarea: {
49 | maxHeight: 200
50 | },
51 | imagePreview: {
52 | previewModal,
53 | previewImage
54 | },
55 | imageTag: {
56 | onImageClick: (base64Data) => {
57 | showImagePreview({
58 | base64Data,
59 | config: uiConfig.imagePreview
60 | });
61 | },
62 | onDeleteClick: (container) => {
63 | container.remove();
64 | messageInput.dispatchEvent(new Event('input'));
65 | }
66 | }
67 | };
68 |
69 | // 添加反馈按钮点击事件
70 | feedbackButton.addEventListener('click', () => {
71 | const newIssueUrl = 'https://github.com/yym68686/Cerebr/issues/new';
72 | window.open(newIssueUrl, '_blank');
73 | settingsMenu.classList.remove('visible'); // 使用 classList 来正确切换菜单状态
74 | });
75 |
76 | // 初始化聊天容器
77 | const chatContainerManager = initChatContainer({
78 | chatContainer,
79 | messageInput,
80 | contextMenu,
81 | userQuestions,
82 | chatManager
83 | });
84 |
85 | // 设置按钮事件处理
86 | chatContainerManager.setupButtonHandlers({
87 | copyMessageButton,
88 | copyCodeButton,
89 | stopUpdateButton,
90 | deleteMessageButton,
91 | abortController: abortControllerRef
92 | });
93 |
94 | // 初始化消息输入组件
95 | initMessageInput({
96 | messageInput,
97 | sendMessage,
98 | userQuestions,
99 | contextMenu,
100 | hideContextMenu: hideContextMenu.bind(null, {
101 | contextMenu,
102 | onMessageElementReset: () => { /* 清空引用 */ }
103 | }),
104 | uiConfig,
105 | settingsMenu
106 | });
107 |
108 | // 初始化ChatManager
109 | await chatManager.initialize();
110 |
111 | // 初始化用户问题历史
112 | chatContainerManager.initializeUserQuestions();
113 |
114 | // 初始化对话列表组件
115 | initChatListEvents({
116 | chatListPage,
117 | chatCards: chatListPage.querySelector('.chat-cards'),
118 | chatManager,
119 | loadChatContent: (chat) => loadChatContent(chat, chatContainer),
120 | onHide: hideChatList.bind(null, chatListPage)
121 | });
122 |
123 | // 初始化聊天列表功能
124 | initializeChatList({
125 | chatListPage,
126 | chatManager,
127 | newChatButton,
128 | chatListButton,
129 | settingsMenu,
130 | apiSettings,
131 | loadChatContent: (chat) => loadChatContent(chat, chatContainer)
132 | });
133 |
134 | // 加载当前对话内容
135 | const currentChat = chatManager.getCurrentChat();
136 | if (currentChat) {
137 | await loadChatContent(currentChat, chatContainer);
138 | }
139 |
140 | // 网答功能
141 | const webpageQAContainer = document.getElementById('webpage-qa');
142 |
143 | // 如果不是扩展环境，隐藏网页问答功能
144 | if (!isExtensionEnvironment) {
145 | webpageQAContainer.style.display = 'none';
146 | }
147 |
148 | let pageContent = null;
149 |
150 | // 获取网页内容
151 | async function getPageContent(skipWaitContent = false) {
152 | try {
153 | // console.log('getPageContent 发送获取网页内容请求');
154 | const response = await browserAdapter.sendMessage({
155 | type: 'GET_PAGE_CONTENT_FROM_SIDEBAR',
156 | skipWaitContent: skipWaitContent // 传递是否跳过等待内容加载的参数
157 | });
158 | return response;
159 | } catch (error) {
160 | console.error('获取网页内容失败:', error);
161 | return null;
162 | }
163 | }
164 |
165 | // 修改 saveWebpageSwitch 函数，改进存储和错误处理
166 | async function saveWebpageSwitch(domain, enabled) {
167 | console.log('开始保存网页问答开关状态:', domain, enabled);
168 |
169 | try {
170 | const result = await storageAdapter.get('webpageSwitchDomains');
171 | let domains = result.webpageSwitchDomains || {};
172 |
173 | // 只在状态发生变化时才更新
174 | if (domains[domain] !== enabled) {
175 | domains[domain] = enabled;
176 | await storageAdapter.set({ webpageSwitchDomains: domains });
177 | console.log('网页问答状态已保存:', domain, enabled);
178 | }
179 | } catch (error) {
180 | console.error('保存网页问答状态失败:', error, domain, enabled);
181 | }
182 | }
183 |
184 | // 获取当前域名
185 | async function getCurrentDomain() {
186 | try {
187 | const tab = await browserAdapter.getCurrentTab();
188 | if (!tab) return null;
189 |
190 | // 如果是本地文件，直接返回hostname
191 | if (tab.hostname === 'local_pdf') {
192 | return tab.hostname;
193 | }
194 |
195 | // 处理普通URL
196 | const hostname = tab.hostname;
197 | // 规范化域名
198 | const normalizedDomain = hostname
199 | .replace(/^www\./, '') // 移除www前缀
200 | .toLowerCase(); // 转换为小写
201 |
202 | // console.log('规范化域名:', hostname, '->', normalizedDomain);
203 | return normalizedDomain;
204 | } catch (error) {
205 | // console.error('获取当前域名失败:', error);
206 | return null;
207 | }
208 | }
209 |
210 | // 修改网页问答开关监听器
211 | webpageSwitch.addEventListener('change', async () => {
212 | try {
213 | const domain = await getCurrentDomain();
214 | console.log('网页问答开关状态改变后，获取当前域名:', domain);
215 |
216 | if (!domain) {
217 | console.log('无法获取域名，保持开关状态不变');
218 | webpageSwitch.checked = !webpageSwitch.checked; // 恢复开关状态
219 | return;
220 | }
221 |
222 | console.log('网页问答开关状态改变后，获取网页问答开关状态:', webpageSwitch.checked);
223 |
224 | if (webpageSwitch.checked) {
225 | document.body.classList.add('loading-content');
226 |
227 | try {
228 | const content = await getPageContent();
229 | if (content) {
230 | pageContent = content;
231 | await saveWebpageSwitch(domain, true);
232 | console.log('修改网页问答为已开启');
233 | } else {
234 | console.error('获取网页内容失败。');
235 | }
236 | } catch (error) {
237 | console.error('获取网页内容失败:', error);
238 | } finally {
239 | document.body.classList.remove('loading-content');
240 | }
241 | } else {
242 | pageContent = null;
243 | await saveWebpageSwitch(domain, false);
244 | console.log('修改网页问答为已关闭');
245 | }
246 | } catch (error) {
247 | console.error('处理网页问答开关变化失败:', error);
248 | webpageSwitch.checked = !webpageSwitch.checked; // 恢复开关状态
249 | }
250 | });
251 |
252 | // 监听来自 content script 的消息
253 | window.addEventListener('message', (event) => {
254 | // 使用消息输入组件的窗口消息处理函数
255 | handleWindowMessage(event, {
256 | messageInput,
257 | newChatButton,
258 | uiConfig
259 | });
260 |
261 | // 处理URL变化事件，因为这涉及到网页问答功能，保留在main.js中
262 | if (event.data.type === 'URL_CHANGED') {
263 | console.log('sidebar.js [收到URL变化]', event.data.url);
264 | if (webpageSwitch.checked) {
265 | console.log('[网页问答] URL变化，重新获取页面内容');
266 | document.body.classList.add('loading-content');
267 |
268 | getPageContent()
269 | .then(async content => {
270 | if (content) {
271 | pageContent = content;
272 | const domain = await getCurrentDomain();
273 | if (domain) {
274 | await saveWebpageSwitch(domain, true);
275 | }
276 | } else {
277 | console.error('URL_CHANGED 无法获取网页内容');
278 | }
279 | })
280 | .catch(async error => {
281 | console.error('URL_CHANGED 获取网页内容失败:', error);
282 | })
283 | .finally(() => {
284 | document.body.classList.remove('loading-content');
285 | });
286 | }
287 | }
288 | });
289 |
290 | // 修改 loadWebpageSwitch 函数
291 | async function loadWebpageSwitch(call_name = 'loadWebpageSwitch') {
292 | // console.log(`loadWebpageSwitch 从 ${call_name} 调用`);
293 |
294 | try {
295 | const domain = await getCurrentDomain();
296 | // console.log('刷新后 网页问答 获取当前域名:', domain);
297 | if (!domain) return;
298 |
299 | const result = await storageAdapter.get('webpageSwitchDomains');
300 | const domains = result.webpageSwitchDomains || {};
301 | // console.log('刷新后 网页问答存储中获取域名:', domains);
302 |
303 | // 只在开关状态不一致时才更新
304 | if (domains[domain]) {
305 | webpageSwitch.checked = domains[domain];
306 | // 检查当前标签页是否活跃
307 | const isTabActive = await browserAdapter.sendMessage({
308 | type: 'CHECK_TAB_ACTIVE'
309 | });
310 |
311 | if (isTabActive) {
312 | setTimeout(async () => {
313 | try {
314 | const content = await getPageContent();
315 | if (content) {
316 | pageContent = content;
317 | }
318 | } catch (error) {
319 | console.error('loadWebpageSwitch 获取网页内容失败:', error);
320 | }
321 | }, 0);
322 | }
323 | } else {
324 | webpageSwitch.checked = false;
325 | // console.log('loadWebpageSwitch 域名不在存储中:', domain);
326 | }
327 | } catch (error) {
328 | console.error('加载网页问答状态失败:', error);
329 | }
330 | }
331 |
332 | // 在 DOMContentLoaded 事件处理程序中添加加载网页问答状态
333 | await loadWebpageSwitch();
334 |
335 | async function sendMessage() {
336 | // 如果有正在更新的AI消息，停止它
337 | const updatingMessage = chatContainer.querySelector('.ai-message.updating');
338 | if (updatingMessage && currentController) {
339 | currentController.abort();
340 | currentController = null;
341 | abortControllerRef.current = null; // 同步更新引用对象
342 | updatingMessage.classList.remove('updating');
343 | }
344 |
345 | // 获取格式化后的消息内容
346 | const { message, imageTags } = getFormattedMessageContent(messageInput);
347 |
348 | if (!message.trim() && imageTags.length === 0) return;
349 |
350 | try {
351 | // 如果网页问答功能开启，重新获取页面内容，不等待内容加载
352 | if (webpageSwitch.checked) {
353 | // console.log('发送消息时网页问答已打开，重新获取页面内容');
354 | try {
355 | const content = await getPageContent(true); // 跳过等待内容加载
356 | if (content) {
357 | pageContent = content;
358 | console.log('成功更新 pageContent 内容');
359 | }
360 | } catch (error) {
361 | console.error('发送消息时获取页面内容失败:', error);
362 | }
363 | }
364 |
365 | // 构建消息内容
366 | const content = buildMessageContent(message, imageTags);
367 |
368 | // 构建用户消息
369 | const userMessage = {
370 | role: "user",
371 | content: content
372 | };
373 |
374 | // 先添加用户消息到界面和历史记录
375 | appendMessage({
376 | text: userMessage,
377 | sender: 'user',
378 | chatContainer,
379 | });
380 |
381 | // 清空输入框并调整高度
382 | clearMessageInput(messageInput, uiConfig);
383 |
384 | // 构建消息数组
385 | const currentChat = chatManager.getCurrentChat();
386 | const messages = currentChat ? [...currentChat.messages] : []; // 从chatManager获取消息历史
387 | messages.push(userMessage);
388 | chatManager.addMessageToCurrentChat(userMessage);
389 |
390 | // 准备API调用参数
391 | const apiParams = {
392 | messages,
393 | apiConfig: apiConfigs[selectedConfigIndex],
394 | userLanguage: navigator.language,
395 | webpageInfo: webpageSwitch.checked ? pageContent : null
396 | };
397 |
398 | // 调用 API
399 | const { processStream, controller } = await callAPI(apiParams, chatManager, currentChat.id, chatContainerManager.syncMessage);
400 | currentController = controller;
401 | abortControllerRef.current = controller; // 同步更新引用对象
402 |
403 | // 处理流式响应
404 | await processStream();
405 |
406 | } catch (error) {
407 | if (error.name === 'AbortError') {
408 | console.log('用户手动停止更新');
409 | return;
410 | }
411 | console.error('发送消息失败:', error);
412 | appendMessage({
413 | text: '发送失败: ' + error.message,
414 | sender: 'ai',
415 | chatContainer,
416 | skipHistory: true,
417 | });
418 | // 从 chatHistory 中移除最后一条记录（用户的问题）
419 | const currentChat = chatManager.getCurrentChat();
420 | const messages = currentChat ? [...currentChat.messages] : [];
421 | if (messages.length > 0) {
422 | if (messages[messages.length - 1].role === 'assistant') {
423 | chatManager.popMessage();
424 | chatManager.popMessage();
425 | } else {
426 | chatManager.popMessage();
427 | }
428 | }
429 | } finally {
430 | const lastMessage = chatContainer.querySelector('.ai-message:last-child');
431 | if (lastMessage) {
432 | lastMessage.classList.remove('updating');
433 | }
434 | }
435 | }
436 |
437 | // 修改点击事件监听器
438 | document.addEventListener('click', (e) => {
439 | // 如果点击的不是设置按钮本身和设置菜单，就关闭菜单
440 | if (!settingsButton.contains(e.target) && !settingsMenu.contains(e.target)) {
441 | settingsMenu.classList.remove('visible');
442 | }
443 | });
444 |
445 | // 确保设置按钮的点击事件在文档点击事件之前处理
446 | settingsButton.addEventListener('click', (e) => {
447 | e.stopPropagation();
448 | settingsMenu.classList.toggle('visible');
449 | });
450 |
451 | // 主题切换
452 | const themeSwitch = document.getElementById('theme-switch');
453 |
454 | // 创建主题配置对象
455 | const themeConfig = {
456 | root: document.documentElement,
457 | themeSwitch,
458 | saveTheme: async (theme) => await syncStorageAdapter.set({ theme })
459 | };
460 |
461 | // 初始化主题
462 | async function initTheme() {
463 | try {
464 | const result = await syncStorageAdapter.get('theme');
465 | const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
466 | const isDark = result.theme === 'dark' || (!result.theme && prefersDark);
467 | setTheme(isDark, themeConfig);
468 | } catch (error) {
469 | console.error('初始化主题失败:', error);
470 | // 如果出错，使用系统主题
471 | setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches, themeConfig);
472 | }
473 | }
474 |
475 | // 监听主题切换
476 | themeSwitch.addEventListener('change', () => {
477 | setTheme(themeSwitch.checked, themeConfig);
478 | });
479 |
480 | // 监听系统主题变化
481 | window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async (e) => {
482 | const data = await syncStorageAdapter.get('theme');
483 | if (!data.theme) { // 只有在用户没有手动设置主题时才跟随系统
484 | setTheme(e.matches, themeConfig);
485 | }
486 | });
487 |
488 | // 初始化主题
489 | await initTheme();
490 |
491 | // API 设置功能
492 | const apiSettingsToggle = document.getElementById('api-settings-toggle');
493 | const backButton = document.querySelector('.back-button');
494 | const apiCards = document.querySelector('.api-cards');
495 |
496 | // 加载保存的 API 配置
497 | let apiConfigs = [];
498 | let selectedConfigIndex = 0;
499 |
500 | // 使用新的selectCard函数
501 | const handleCardSelect = (template, index) => {
502 | selectCard({
503 | template,
504 | index,
505 | onIndexChange: (newIndex) => {
506 | selectedConfigIndex = newIndex;
507 | },
508 | onSave: saveAPIConfigs,
509 | cardSelector: '.api-card',
510 | onSelect: () => {
511 | // 关闭API设置面板
512 | apiSettings.classList.remove('visible');
513 | }
514 | });
515 | };
516 |
517 | // 创建渲染API卡片的辅助函数
518 | const renderAPICardsWithCallbacks = () => {
519 | renderAPICards({
520 | apiConfigs,
521 | apiCardsContainer: apiCards,
522 | templateCard: document.querySelector('.api-card.template'),
523 | ...createCardCallbacks({
524 | selectCard: handleCardSelect,
525 | apiConfigs,
526 | selectedConfigIndex,
527 | saveAPIConfigs,
528 | renderAPICardsWithCallbacks
529 | }),
530 | selectedIndex: selectedConfigIndex
531 | });
532 | };
533 |
534 | // 从存储加载配置
535 | async function loadAPIConfigs() {
536 | try {
537 | // 统一使用 syncStorageAdapter 来实现配置同步
538 | const result = await syncStorageAdapter.get(['apiConfigs', 'selectedConfigIndex']);
539 |
540 | // 分别检查每个配置项
541 | if (result.apiConfigs) {
542 | apiConfigs = result.apiConfigs;
543 | } else {
544 | apiConfigs = [{
545 | apiKey: '',
546 | baseUrl: 'https://api.openai.com/v1/chat/completions',
547 | modelName: 'gpt-4o'
548 | }];
549 | // 只有在没有任何配置的情况下才保存默认配置
550 | await saveAPIConfigs();
551 | }
552 |
553 | // 只有当 selectedConfigIndex 为 undefined 或 null 时才使用默认值 0
554 | selectedConfigIndex = result.selectedConfigIndex ?? 0;
555 |
556 | // 确保一定会渲染卡片
557 | renderAPICardsWithCallbacks();
558 | } catch (error) {
559 | console.error('加载 API 配置失败:', error);
560 | // 只有在出错的情况下才使用默认值
561 | apiConfigs = [{
562 | apiKey: '',
563 | baseUrl: 'https://api.openai.com/v1/chat/completions',
564 | modelName: 'gpt-4o'
565 | }];
566 | selectedConfigIndex = 0;
567 | renderAPICardsWithCallbacks();
568 | }
569 | }
570 |
571 | // 监听标签页切换
572 | browserAdapter.onTabActivated(async () => {
573 | // console.log('标签页切换，重新加载API配置');
574 | await loadWebpageSwitch();
575 | // 同步API配置
576 | await loadAPIConfigs();
577 | renderAPICardsWithCallbacks();
578 |
579 | // 同步对话列表
580 | await chatManager.initialize();
581 | await renderChatList(
582 | chatManager,
583 | chatListPage.querySelector('.chat-cards')
584 | );
585 | });
586 | // 保存配置到存储
587 | async function saveAPIConfigs() {
588 | try {
589 | // 统一使用 syncStorageAdapter 来实现配置同步
590 | await syncStorageAdapter.set({
591 | apiConfigs,
592 | selectedConfigIndex
593 | });
594 | } catch (error) {
595 | console.error('保存 API 配置失败:', error);
596 | }
597 | }
598 |
599 | // 等待 DOM 加载完成后再初始化
600 | await loadAPIConfigs();
601 |
602 | // 显示/隐藏 API 设置
603 | apiSettingsToggle.addEventListener('click', () => {
604 | apiSettings.classList.add('visible');
605 | settingsMenu.classList.remove('visible');
606 | // 确保每次打开设置时都重新渲染卡片
607 | renderAPICardsWithCallbacks();
608 | });
609 |
610 | // 返回聊天界面
611 | backButton.addEventListener('click', () => {
612 | apiSettings.classList.remove('visible');
613 | });
614 |
615 | // 图片预览功能
616 | const closeButton = previewModal.querySelector('.image-preview-close');
617 |
618 | closeButton.addEventListener('click', () => {
619 | hideImagePreview({ config: uiConfig.imagePreview });
620 | });
621 |
622 | previewModal.addEventListener('click', (e) => {
623 | if (e.target === previewModal) {
624 | hideImagePreview({ config: uiConfig.imagePreview });
625 | }
626 | });
627 | });
--------------------------------------------------------------------------------
/src/services/chat.js:
--------------------------------------------------------------------------------
1 | /**
2 | * API配置接口
3 | * @typedef {Object} APIConfig
4 | * @property {string} baseUrl - API的基础URL
5 | * @property {string} apiKey - API密钥
6 | * @property {string} [modelName] - 模型名称，默认为 "gpt-4o"
7 | */
8 |
9 | /**
10 | * 网页信息接口
11 | * @typedef {Object} WebpageInfo
12 | * @property {string} title - 网页标题
13 | * @property {string} url - 网页URL
14 | * @property {string} content - 网页内容
15 | */
16 |
17 | /**
18 | * 消息接口
19 | * @typedef {Object} Message
20 | * @property {string} role - 消息角色 ("system" | "user" | "assistant")
21 | * @property {string | Array<{type: string, text?: string, image_url?: {url: string}}>} content - 消息内容
22 | */
23 |
24 | /**
25 | * API调用参数接口
26 | * @typedef {Object} APIParams
27 | * @property {Array} messages - 消息历史
28 | * @property {APIConfig} apiConfig - API配置
29 | * @property {string} userLanguage - 用户语言
30 | * @property {WebpageInfo} [webpageInfo] - 网页信息（可选）
31 | */
32 |
33 | /**
34 | * 调用API发送消息并处理响应
35 | * @param {APIParams} params - API调用参数
36 | * @param {Object} chatManager - 聊天管理器实例
37 | * @param {string} chatId - 当前聊天ID
38 | * @param {Function} onMessageUpdate - 消息更新回调函数
39 | * @returns {Promise<{processStream: () => Promise<{content: string, reasoning_content: string}>, controller: AbortController}>}
40 | */
41 | export async function callAPI({
42 | messages,
43 | apiConfig,
44 | userLanguage,
45 | webpageInfo = null,
46 | }, chatManager, chatId, onMessageUpdate) {
47 | if (!apiConfig?.baseUrl || !apiConfig?.apiKey) {
48 | throw new Error('API 配置不完整');
49 | }
50 |
51 | // 构建系统消息
52 | let systemPrompt = apiConfig.advancedSettings?.systemPrompt || '';
53 | systemPrompt = systemPrompt.replace(/\{\{userLanguage\}\}/gm, userLanguage)
54 |
55 | const systemMessage = {
56 | role: "system",
57 | content: `${systemPrompt}${
58 | webpageInfo ?
59 | `\n当前网页内容：\n标题：${webpageInfo.title}\nURL：${webpageInfo.url}\n内容：${webpageInfo.content}` :
60 | ''
61 | }`
62 | };
63 |
64 | // 确保消息数组中有系统消息
65 | // 删除消息列表中的reasoning_content字段
66 | const processedMessages = messages.map(msg => {
67 | const { reasoning_content, updating, ...rest } = msg;
68 | return rest;
69 | });
70 |
71 | if (systemMessage.content.trim() && (processedMessages.length === 0 || processedMessages[0].role !== "system")) {
72 | processedMessages.unshift(systemMessage);
73 | }
74 |
75 | const controller = new AbortController();
76 | const signal = controller.signal;
77 |
78 | const response = await fetch(apiConfig.baseUrl, {
79 | method: 'POST',
80 | headers: {
81 | 'Content-Type': 'application/json',
82 | 'Authorization': `Bearer ${apiConfig.apiKey}`
83 | },
84 | body: JSON.stringify({
85 | model: apiConfig.modelName || "gpt-4o",
86 | messages: processedMessages,
87 | stream: true,
88 | }),
89 | signal
90 | });
91 |
92 | if (!response.ok) {
93 | const error = await response.text();
94 | throw new Error(error);
95 | }
96 |
97 | // 处理流式响应
98 | const reader = response.body.getReader();
99 |
100 | const processStream = async () => {
101 | try {
102 | let buffer = '';
103 | let currentMessage = {
104 | content: '',
105 | reasoning_content: ''
106 | };
107 |
108 | while (true) {
109 | const { done, value } = await reader.read();
110 | if (done) break;
111 |
112 | const chunk = new TextDecoder().decode(value);
113 | buffer += chunk;
114 |
115 | let newlineIndex;
116 | while ((newlineIndex = buffer.indexOf('\n')) !== -1) {
117 | const line = buffer.slice(0, newlineIndex);
118 | buffer = buffer.slice(newlineIndex + 1);
119 |
120 | if (line.startsWith('data: ')) {
121 | const data = line.slice(6);
122 | if (data === '[DONE]') {
123 | continue;
124 | }
125 |
126 | try {
127 | const delta = JSON.parse(data).choices[0]?.delta;
128 | if (delta?.content) {
129 | currentMessage.content += delta.content;
130 | }
131 | if (delta?.reasoning_content) {
132 | currentMessage.reasoning_content += delta.reasoning_content;
133 | }
134 |
135 | // 直接更新 chatManager
136 | if (chatManager && chatId && (delta?.content || delta?.reasoning_content)) {
137 | // console.log('callAPI', chatId);
138 | chatManager.updateLastMessage(chatId, currentMessage);
139 | // 通知消息更新
140 | onMessageUpdate(chatId, currentMessage);
141 | }
142 | } catch (e) {
143 | console.error('解析数据时出错:', e);
144 | }
145 | }
146 | }
147 | }
148 |
149 | return currentMessage;
150 | } catch (error) {
151 | if (error.name === 'AbortError') {
152 | return;
153 | }
154 | throw error;
155 | }
156 | };
157 |
158 | return {
159 | processStream,
160 | controller
161 | };
162 | }
--------------------------------------------------------------------------------
/src/utils/chat-manager.js:
--------------------------------------------------------------------------------
1 | import { storageAdapter } from './storage-adapter.js';
2 |
3 | const CHATS_KEY = 'cerebr_chats';
4 | const CURRENT_CHAT_ID_KEY = 'cerebr_current_chat_id';
5 |
6 | export class ChatManager {
7 | constructor() {
8 | this.storage = storageAdapter;
9 | this.currentChatId = null;
10 | this.chats = new Map();
11 | this.initialize();
12 | }
13 |
14 | async initialize() {
15 | // 加载所有对话
16 | const result = await this.storage.get(CHATS_KEY);
17 | const savedChats = result[CHATS_KEY] || [];
18 | if (Array.isArray(savedChats)) {
19 | savedChats.forEach(chat => {
20 | this.chats.set(chat.id, chat);
21 | });
22 | }
23 |
24 | // 获取当前对话ID
25 | const currentChatResult = await this.storage.get(CURRENT_CHAT_ID_KEY);
26 | this.currentChatId = currentChatResult[CURRENT_CHAT_ID_KEY];
27 |
28 | // 如果没有当前对话，创建一个默认对话
29 | if (!this.currentChatId || !this.chats.has(this.currentChatId)) {
30 | const defaultChat = this.createNewChat('默认对话');
31 | this.currentChatId = defaultChat.id;
32 | await this.storage.set({ [CURRENT_CHAT_ID_KEY]: this.currentChatId });
33 | }
34 | }
35 |
36 | createNewChat(title = '新对话') {
37 | const chatId = Date.now().toString();
38 | const chat = {
39 | id: chatId,
40 | title: title,
41 | messages: [],
42 | createdAt: new Date().toISOString()
43 | };
44 | this.chats.set(chatId, chat);
45 | this.saveChats();
46 | return chat;
47 | }
48 |
49 | async switchChat(chatId) {
50 | if (!this.chats.has(chatId)) {
51 | throw new Error('对话不存在');
52 | }
53 | this.currentChatId = chatId;
54 | await this.storage.set({ [CURRENT_CHAT_ID_KEY]: chatId });
55 | return this.chats.get(chatId);
56 | }
57 |
58 | async deleteChat(chatId) {
59 | if (!this.chats.has(chatId)) {
60 | throw new Error('对话不存在');
61 | }
62 | this.chats.delete(chatId);
63 | await this.saveChats();
64 |
65 | // 如果删除的是当前对话，切换到其他对话
66 | if (chatId === this.currentChatId) {
67 | const nextChat = Array.from(this.chats.values()).pop();
68 | if (nextChat) {
69 | await this.switchChat(nextChat.id);
70 | this.currentChatId = nextChat.id;
71 | } else {
72 | const newChat = this.createNewChat('默认对话');
73 | await this.switchChat(newChat.id);
74 | this.currentChatId = newChat.id;
75 | }
76 | }
77 | }
78 |
79 | getCurrentChat() {
80 | return this.chats.get(this.currentChatId);
81 | }
82 |
83 | getAllChats() {
84 | return Array.from(this.chats.values()).sort((a, b) =>
85 | new Date(b.createdAt) - new Date(a.createdAt)
86 | );
87 | }
88 |
89 | async addMessageToCurrentChat(message) {
90 | const currentChat = this.getCurrentChat();
91 | if (!currentChat) {
92 | throw new Error('当前没有活动的对话');
93 | }
94 | currentChat.messages.push(message);
95 | await this.saveChats();
96 | }
97 |
98 | async updateLastMessage(chatId, message) {
99 | const currentChat = this.chats.get(chatId);
100 | if (!currentChat || currentChat.messages.length === 0) {
101 | // throw new Error('当前没有消息可以更新');
102 | return;
103 | }
104 | // console.log("updateLastMessage", JSON.stringify(currentChat.messages), JSON.stringify(message));
105 | if (currentChat.messages[currentChat.messages.length - 1].role === 'user') {
106 | currentChat.messages.push({
107 | role: 'assistant',
108 | updating: true
109 | });
110 | }
111 | if (message.content) {
112 | currentChat.messages[currentChat.messages.length - 1].content = message.content;
113 | }
114 | if (message.reasoning_content) {
115 | currentChat.messages[currentChat.messages.length - 1].reasoning_content = message.reasoning_content;
116 | }
117 | await this.saveChats();
118 | }
119 |
120 | async popMessage() {
121 | const currentChat = this.getCurrentChat();
122 | if (!currentChat) {
123 | throw new Error('对话不存在');
124 | }
125 | currentChat.messages.pop();
126 | await this.saveChats();
127 | }
128 |
129 | async saveChats() {
130 | await this.storage.set({ [CHATS_KEY]: Array.from(this.chats.values()) });
131 | }
132 |
133 | async clearCurrentChat() {
134 | const currentChat = this.getCurrentChat();
135 | if (currentChat) {
136 | currentChat.messages = [];
137 | await this.saveChats();
138 | }
139 | }
140 | }
141 |
142 | // 创建并导出单例实例
143 | export const chatManager = new ChatManager();
--------------------------------------------------------------------------------
/src/utils/image.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 处理图片拖放的通用函数
3 | * @param {DragEvent} e - 拖放事件对象
4 | * @param {Object} config - 配置对象
5 | * @param {HTMLElement} config.messageInput - 消息输入框元素
6 | * @param {Function} config.createImageTag - 创建图片标签的函数
7 | * @param {Function} config.onSuccess - 成功处理后的回调函数
8 | * @param {Function} config.onError - 错误处理的回调函数
9 | */
10 | export function handleImageDrop(e, config) {
11 | const {
12 | messageInput,
13 | createImageTag,
14 | onSuccess = () => {},
15 | onError = (error) => console.error('处理拖放事件失败:', error)
16 | } = config;
17 |
18 | e.preventDefault();
19 | e.stopPropagation();
20 |
21 | try {
22 | // 处理文件拖放
23 | if (e.dataTransfer.files.length > 0) {
24 | const file = e.dataTransfer.files[0];
25 | if (file.type.startsWith('image/')) {
26 | const reader = new FileReader();
27 | reader.onload = () => {
28 | try {
29 | insertImageToInput({
30 | messageInput,
31 | createImageTag,
32 | imageData: {
33 | base64Data: reader.result,
34 | fileName: file.name
35 | }
36 | });
37 | onSuccess();
38 | } catch (error) {
39 | onError(error);
40 | }
41 | };
42 | reader.readAsDataURL(file);
43 | return;
44 | }
45 | }
46 |
47 | // 处理网页图片拖放
48 | const data = e.dataTransfer.getData('text/plain');
49 | if (data) {
50 | try {
51 | const imageData = JSON.parse(data);
52 | if (imageData.type === 'image') {
53 | insertImageToInput({
54 | messageInput,
55 | createImageTag,
56 | imageData: {
57 | base64Data: imageData.data,
58 | fileName: imageData.name
59 | }
60 | });
61 | onSuccess();
62 | }
63 | } catch (error) {
64 | onError(error);
65 | }
66 | }
67 | } catch (error) {
68 | onError(error);
69 | }
70 | }
71 |
72 | /**
73 | * 在输入框中插入图片
74 | * @param {Object} params - 参数对象
75 | * @param {HTMLElement} params.messageInput - 消息输入框元素
76 | * @param {Function} params.createImageTag - 创建图片标签的函数
77 | * @param {Object} params.imageData - 图片数据
78 | * @param {string} params.imageData.base64Data - 图片的base64数据
79 | * @param {string} params.imageData.fileName - 图片文件名
80 | */
81 | function insertImageToInput({ messageInput, createImageTag, imageData }) {
82 | const imageTag = createImageTag({
83 | base64Data: imageData.base64Data,
84 | fileName: imageData.fileName
85 | });
86 |
87 | // 确保输入框有焦点
88 | messageInput.focus();
89 |
90 | // 获取或创建选区
91 | const selection = window.getSelection();
92 | let range;
93 |
94 | // 检查是否有现有选区
95 | if (selection.rangeCount > 0) {
96 | range = selection.getRangeAt(0);
97 | } else {
98 | // 创建新的选区
99 | range = document.createRange();
100 | // 将选区设置到输入框的末尾
101 | range.selectNodeContents(messageInput);
102 | range.collapse(false);
103 | selection.removeAllRanges();
104 | selection.addRange(range);
105 | }
106 |
107 | // 插入图片标签
108 | range.deleteContents();
109 | range.insertNode(imageTag);
110 |
111 | // 移动光标到图片标签后面
112 | const newRange = document.createRange();
113 | newRange.setStartAfter(imageTag);
114 | newRange.collapse(true);
115 | selection.removeAllRanges();
116 | selection.addRange(newRange);
117 |
118 | // 触发输入事件以调整高度
119 | messageInput.dispatchEvent(new Event('input'));
120 | }
--------------------------------------------------------------------------------
/src/utils/storage-adapter.js:
--------------------------------------------------------------------------------
1 | // 检测是否在Chrome扩展环境中
2 | export const isExtensionEnvironment = typeof chrome !== 'undefined' && chrome.runtime;
3 |
4 | const IDB_DB_NAME = 'CerebrData';
5 | const IDB_DB_VERSION = 1;
6 | const IDB_STORE_NAME = 'keyValueStore';
7 |
8 | let dbPromise = null;
9 |
10 | function getDb() {
11 | if (!isExtensionEnvironment && !dbPromise) { //仅在非插件环境且dbPromise未初始化时创建
12 | dbPromise = new Promise((resolve, reject) => {
13 | const request = indexedDB.open(IDB_DB_NAME, IDB_DB_VERSION);
14 |
15 | request.onupgradeneeded = (event) => {
16 | const db = event.target.result;
17 | if (!db.objectStoreNames.contains(IDB_STORE_NAME)) {
18 | db.createObjectStore(IDB_STORE_NAME);
19 | }
20 | };
21 |
22 | request.onsuccess = (event) => {
23 | resolve(event.target.result);
24 | };
25 |
26 | request.onerror = (event) => {
27 | console.error('IndexedDB database error:', event.target.error);
28 | reject(event.target.error);
29 | };
30 | });
31 | }
32 | return dbPromise;
33 | }
34 |
35 | // 存储适配器
36 | export const storageAdapter = {
37 | // 获取存储的数据
38 | async get(key) {
39 | if (isExtensionEnvironment) {
40 | return await chrome.storage.local.get(key);
41 | } else {
42 | try {
43 | const db = await getDb();
44 | if (!db) return { [key]: undefined }; // 如果数据库打开失败
45 |
46 | return new Promise((resolve, reject) => {
47 | const transaction = db.transaction([IDB_STORE_NAME], 'readonly');
48 | const store = transaction.objectStore(IDB_STORE_NAME);
49 | const request = store.get(key);
50 |
51 | request.onsuccess = () => {
52 | resolve({ [key]: request.result });
53 | };
54 | request.onerror = (event) => {
55 | console.error(`IndexedDB get error for key ${key}:`, event.target.error);
56 | reject(event.target.error);
57 | };
58 | });
59 | } catch (error) {
60 | console.error('Failed to get data from IndexedDB for key ' + key + ':', error);
61 | return { [key]: undefined };
62 | }
63 | }
64 | },
65 |
66 | // 设置存储的数据
67 | async set(data) {
68 | if (isExtensionEnvironment) {
69 | await chrome.storage.local.set(data);
70 | } else {
71 | try {
72 | const db = await getDb();
73 | if (!db) throw new Error("IndexedDB not available");
74 |
75 | // 假设 data 是一个对象，我们需要迭代它来存储每个键值对
76 | // 或者，如果 ChatManager 总是用一个固定的主键（如 'cerebr_chats'）来保存所有聊天，
77 | // 那么这里的逻辑可以简化。
78 | // 当前 ChatManager 的 saveChats 是 this.storage.set({ [CHATS_KEY]: Array.from(this.chats.values()) });
79 | // 所以 data 是 { 'cerebr_chats': [...] }
80 |
81 | const entries = Object.entries(data);
82 | if (entries.length === 0) return Promise.resolve();
83 |
84 | return new Promise((resolve, reject) => {
85 | const transaction = db.transaction([IDB_STORE_NAME], 'readwrite');
86 | const store = transaction.objectStore(IDB_STORE_NAME);
87 | let completedOperations = 0;
88 |
89 | entries.forEach(([key, value]) => {
90 | const request = store.put(value, key);
91 | request.onsuccess = () => {
92 | completedOperations++;
93 | if (completedOperations === entries.length) {
94 | // resolve(); // 事务完成后再 resolve
95 | }
96 | };
97 | request.onerror = (event) => {
98 | // 如果任何一个 put 失败，我们应该中止事务并 reject
99 | console.error(`IndexedDB set error for key ${key}:`, event.target.error);
100 | transaction.abort(); // 中止事务
101 | reject(event.target.error);
102 | };
103 | });
104 |
105 | transaction.oncomplete = () => {
106 | resolve();
107 | };
108 | transaction.onerror = (event) => {
109 | console.error('IndexedDB set transaction error:', event.target.error);
110 | reject(event.target.error);
111 | };
112 | transaction.onabort = (event) => {
113 | console.error('IndexedDB set transaction aborted:', event.target.error);
114 | reject(new Error('Transaction aborted, possibly due to an earlier error.'));
115 | };
116 | });
117 |
118 | } catch (error) {
119 | console.error('Failed to set data in IndexedDB:', error);
120 | // 根据应用的需要决定如何处理这个错误，例如向上抛出
121 | throw error;
122 | }
123 | }
124 | }
125 | };
126 |
127 | // 同步存储适配器
128 | export const syncStorageAdapter = {
129 | // 获取存储的数据
130 | async get(key) {
131 | if (isExtensionEnvironment) {
132 | return await chrome.storage.sync.get(key);
133 | } else {
134 | // 对于 sync，localStorage 可能是个更简单的回退，因为它本身容量就小
135 | // 或者您也可以为 sync 实现单独的 IndexedDB 存储（例如不同的 object store）
136 | // 这里暂时保持 localStorage 作为示例，但请注意其容量限制
137 | console.warn("Sync storage in web environment is using localStorage fallback, which has size limitations.");
138 | if (Array.isArray(key)) {
139 | const result = {};
140 | for (const k of key) {
141 | const value = localStorage.getItem(`sync_${k}`);
142 | if (value) {
143 | try {
144 | result[k] = JSON.parse(value);
145 | } catch (e) {
146 | console.error(`Error parsing sync_ ${k} from localStorage`, e);
147 | }
148 | }
149 | }
150 | return result;
151 | } else {
152 | const value = localStorage.getItem(`sync_${key}`);
153 | if (value) {
154 | try {
155 | return { [key]: JSON.parse(value) };
156 | } catch (e) {
157 | console.error(`Error parsing sync_ ${key} from localStorage`, e);
158 | }
159 | }
160 | return {};
161 | }
162 | }
163 | },
164 |
165 | // 设置存储的数据
166 | async set(data) {
167 | if (isExtensionEnvironment) {
168 | await chrome.storage.sync.set(data);
169 | } else {
170 | console.warn("Sync storage in web environment is using localStorage fallback, which has size limitations.");
171 | for (const [key, value] of Object.entries(data)) {
172 | try {
173 | localStorage.setItem(`sync_${key}`, JSON.stringify(value));
174 | } catch (e) {
175 | console.error(`Error setting sync_ ${key} to localStorage`, e);
176 | // 如果 localStorage 也满了，这里可能会抛出 QuotaExceededError
177 | throw e;
178 | }
179 | }
180 | }
181 | }
182 | };
183 |
184 | // 浏览器API适配器
185 | export const browserAdapter = {
186 | // 获取当前标签页信息
187 | async getCurrentTab() {
188 | if (isExtensionEnvironment) {
189 | const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
190 | if (!tab?.url) return null;
191 |
192 | // 处理本地文件
193 | if (tab.url.startsWith('file://')) {
194 | return {
195 | url: 'file://',
196 | title: 'Local PDF',
197 | hostname: 'local_pdf'
198 | };
199 | }
200 |
201 | const url = new URL(tab.url);
202 | return {
203 | url: tab.url,
204 | title: tab.title,
205 | hostname: url.hostname
206 | };
207 | } else {
208 | const url = window.location.href;
209 | // 处理本地文件
210 | if (url.startsWith('file://')) {
211 | return {
212 | url: 'file://',
213 | title: 'Local PDF',
214 | hostname: 'local_pdf'
215 | };
216 | }
217 | return {
218 | url: url,
219 | title: document.title,
220 | hostname: window.location.hostname
221 | };
222 | }
223 | },
224 |
225 | // 发送消息
226 | async sendMessage(message) {
227 | if (isExtensionEnvironment) {
228 | return await chrome.runtime.sendMessage(message);
229 | } else {
230 | console.warn('Message passing is not supported in web environment:', message);
231 | return null;
232 | }
233 | },
234 |
235 | // 添加标签页变化监听器
236 | onTabActivated(callback) {
237 | if (isExtensionEnvironment) {
238 | chrome.tabs.onActivated.addListener(callback);
239 | } else {
240 | // Web环境下不需要监听标签页变化
241 | console.info('Tab activation listening is not supported in web environment');
242 | }
243 | }
244 | };
245 |
246 | // 记录存储空间占用的函数
247 | function logStorageUsage() {
248 | if (isExtensionEnvironment) {
249 | if (chrome && chrome.storage && chrome.storage.local && typeof chrome.storage.local.getBytesInUse === 'function') {
250 | chrome.storage.local.getBytesInUse(null).then((bytesInUse) => {
251 | console.log("[Cerebr] 插件占用的本地存储空间: " + (bytesInUse / (1024 * 1024)).toFixed(2) + " MB");
252 | }).catch(error => {
253 | console.error("[Cerebr] 获取插件本地存储空间失败:", error);
254 | });
255 | } else {
256 | console.warn("[Cerebr] chrome.storage.local.getBytesInUse API 在插件环境中不可用或未正确初始化。");
257 | }
258 | } else {
259 | // 网页环境 - IndexedDB
260 | if (navigator.storage && navigator.storage.estimate) {
261 | navigator.storage.estimate().then(estimate => {
262 | console.log(`[Cerebr] 网页预估存储使用 (IndexedDB等): ${(estimate.usage / (1024 * 1024)).toFixed(2)} MB / 配额: ${(estimate.quota / (1024 * 1024)).toFixed(2)} MB`);
263 | }).catch(error => {
264 | console.warn("[Cerebr] 无法通过 navigator.storage.estimate() 获取网页存储信息:", error);
265 | console.log("[Cerebr] 网页环境使用 IndexedDB。具体大小请通过浏览器开发者工具查看。");
266 | });
267 | } else {
268 | console.log("[Cerebr] 网页环境使用 IndexedDB。具体大小请通过浏览器开发者工具查看。");
269 | }
270 | }
271 | }
272 |
273 | // 在模块加载时执行日志记录
274 | logStorageUsage();
--------------------------------------------------------------------------------
/src/utils/theme.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 设置主题的工具函数
3 | * @param {boolean} isDark - 是否为深色主题
4 | * @param {Object} config - 配置对象
5 | * @param {HTMLElement} config.root - 根元素（通常是document.documentElement）
6 | * @param {HTMLInputElement} config.themeSwitch - 主题切换开关元素
7 | * @param {Function} config.saveTheme - 保存主题的回调函数
8 | */
9 | export function setTheme(isDark, { root, themeSwitch, saveTheme }) {
10 | // 移除现有的主题类
11 | root.classList.remove('dark-theme', 'light-theme');
12 |
13 | // 添加新的主题类
14 | root.classList.add(isDark ? 'dark-theme' : 'light-theme');
15 |
16 | // 更新开关状态
17 | if (themeSwitch) {
18 | themeSwitch.checked = isDark;
19 | }
20 |
21 | // 保存主题设置
22 | if (saveTheme) {
23 | saveTheme(isDark ? 'dark' : 'light');
24 | }
25 |
26 | // 更新 Mermaid 主题并重新渲染
27 | if (window.mermaid) {
28 | window.mermaid.initialize({
29 | theme: isDark ? 'dark' : 'default'
30 | });
31 |
32 | // 重新渲染所有图表
33 | if (window.renderMermaidDiagrams) {
34 | window.renderMermaidDiagrams();
35 | }
36 | }
37 |
38 | // // 更新浏览器 UI 颜色
39 | // updateThemeColor(isDark);
40 | }
41 |
42 | // 更新主题颜色
43 | function updateThemeColor(isDark) {
44 | const themeColorMeta = document.getElementById('theme-color-meta');
45 | if (themeColorMeta) {
46 | if (isDark) {
47 | // 深色模式：移除 meta 标签的 content 属性，使用浏览器默认颜色
48 | themeColorMeta.removeAttribute('content');
49 | } else {
50 | // 浅色模式：设置自定义颜色
51 | themeColorMeta.content = '#ffffff';
52 | }
53 | }
54 | }
--------------------------------------------------------------------------------
/src/utils/ui.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 输入框配置接口
3 | * @typedef {Object} TextareaConfig
4 | * @property {number} maxHeight - 输入框最大高度
5 | */
6 |
7 | /**
8 | * 图片预览配置接口
9 | * @property {HTMLElement} previewModal - 预览模态框元素
10 | * @property {HTMLElement} previewImage - 预览图片元素
11 | */
12 |
13 | /**
14 | * 图片标签配置接口
15 | * @typedef {Object} ImageTagConfig
16 | * @property {function} onImageClick - 图片点击回调
17 | * @property {function} onDeleteClick - 删除按钮点击回调
18 | */
19 |
20 | /**
21 | * 调整输入框高度
22 | * @param {Object} params - 参数对象
23 | * @param {HTMLElement} params.textarea - 输入框元素
24 | * @param {TextareaConfig} params.config - 输入框配置
25 | */
26 | export function adjustTextareaHeight({
27 | textarea,
28 | config = { maxHeight: 200 }
29 | }) {
30 | textarea.style.height = 'auto';
31 | textarea.style.height = Math.min(textarea.scrollHeight, config.maxHeight) + 'px';
32 | if (textarea.scrollHeight > config.maxHeight) {
33 | textarea.style.overflowY = 'auto';
34 | } else {
35 | textarea.style.overflowY = 'hidden';
36 | }
37 | }
38 |
39 | /**
40 | * 显示图片预览
41 | * @param {Object} params - 参数对象
42 | * @param {string} params.base64Data - 图片base64数据
43 | */
44 | export function showImagePreview({
45 | base64Data,
46 | config
47 | }) {
48 | config.previewImage.src = base64Data;
49 | config.previewModal.classList.add('visible');
50 | }
51 |
52 | /**
53 | * 隐藏图片预览
54 | * @param {Object} params - 参数对象
55 | */
56 | export function hideImagePreview({
57 | config
58 | }) {
59 | config.previewModal.classList.remove('visible');
60 | config.previewImage.src = '';
61 | }
62 |
63 | /**
64 | * 创建图片标签
65 | * @param {Object} params - 参数对象
66 | * @param {string} params.base64Data - 图片base64数据
67 | * @param {string} [params.fileName] - 文件名（可选）
68 | * @param {ImageTagConfig} params.config - 图片标签配置
69 | * @returns {HTMLElement} 创建的图片标签元素
70 | */
71 | export function createImageTag({
72 | base64Data,
73 | fileName = '图片',
74 | config
75 | }) {
76 | const container = document.createElement('span');
77 | container.className = 'image-tag';
78 | container.contentEditable = false;
79 | container.setAttribute('data-image', base64Data);
80 | container.title = fileName;
81 |
82 | const thumbnail = document.createElement('img');
83 | thumbnail.src = base64Data.startsWith('data:') ? base64Data : `data:image/png;base64,${base64Data}`;
84 | thumbnail.alt = fileName;
85 |
86 | const deleteBtn = document.createElement('button');
87 | deleteBtn.className = 'delete-btn';
88 | deleteBtn.innerHTML = '';
89 | deleteBtn.title = '删除图片';
90 |
91 | // 点击删除按钮时删除整个标签
92 | deleteBtn.addEventListener('click', (e) => {
93 | e.preventDefault();
94 | e.stopPropagation();
95 | if (config.onDeleteClick) {
96 | config.onDeleteClick(container);
97 | }
98 | });
99 |
100 | container.appendChild(thumbnail);
101 | container.appendChild(deleteBtn);
102 |
103 | // 点击图片区域预览图片
104 | thumbnail.addEventListener('click', (e) => {
105 | e.preventDefault();
106 | e.stopPropagation();
107 | if (config.onImageClick) {
108 | config.onImageClick(base64Data);
109 | }
110 | });
111 |
112 | return container;
113 | }
--------------------------------------------------------------------------------
/src/utils/viewport.js:
--------------------------------------------------------------------------------
1 | // 用于存储原始视口高度
2 | let originalViewportHeight = window.innerHeight;
3 |
4 | // 设置视口高度变量
5 | function setViewportHeight() {
6 | // 获取实际视口高度
7 | const vh = window.innerHeight * 0.01;
8 | // 设置CSS变量
9 | document.documentElement.style.setProperty('--vh', `${vh}px`);
10 |
11 | // 计算输入法是否弹出
12 | const isKeyboardVisible = window.innerHeight < originalViewportHeight * 0.8;
13 |
14 | if (isKeyboardVisible) {
15 | // 输入法弹出时，调整聊天容器的高度和上边距
16 | const keyboardHeight = originalViewportHeight - window.innerHeight;
17 | document.documentElement.style.setProperty('--keyboard-height', `${keyboardHeight}px`);
18 | document.documentElement.style.setProperty('--chat-top-margin', `${keyboardHeight}px`);
19 | document.body.classList.add('keyboard-visible');
20 | } else {
21 | document.documentElement.style.setProperty('--keyboard-height', '0px');
22 | document.documentElement.style.setProperty('--chat-top-margin', '0px');
23 | document.body.classList.remove('keyboard-visible');
24 | // 更新原始视口高度
25 | originalViewportHeight = window.innerHeight;
26 | }
27 | }
28 |
29 | // 初始设置
30 | setViewportHeight();
31 |
32 | // 监听视口大小变化（包括输入法弹出）
33 | let resizeTimeout;
34 | window.addEventListener('resize', () => {
35 | // 使用防抖来优化性能
36 | clearTimeout(resizeTimeout);
37 | resizeTimeout = setTimeout(() => {
38 | setViewportHeight();
39 |
40 | // // 获取聊天容器
41 | // const chatContainer = document.getElementById('chat-container');
42 | // if (chatContainer) {
43 | // // 重新计算滚动位置
44 | // const scrollPosition = chatContainer.scrollTop;
45 | // const scrollHeight = chatContainer.scrollHeight;
46 | // const clientHeight = chatContainer.clientHeight;
47 |
48 | // // 如果之前滚动到底部，保持在底部
49 | // if (scrollHeight - scrollPosition <= clientHeight + 50) {
50 | // chatContainer.scrollTop = chatContainer.scrollHeight;
51 | // }
52 | // }
53 | }, 100);
54 | });
55 |
56 | // 监听输入框焦点事件
57 | document.addEventListener('DOMContentLoaded', () => {
58 | const input = document.getElementById('message-input');
59 | if (input) {
60 | input.addEventListener('focus', () => {
61 | // 给一点延迟，等待输入法完全展开
62 | setTimeout(() => {
63 | setViewportHeight();
64 | // 滚动到底部
65 | // const chatContainer = document.getElementById('chat-container');
66 | // if (chatContainer) {
67 | // chatContainer.scrollTop = chatContainer.scrollHeight;
68 | // }
69 | }, 300);
70 | });
71 |
72 | input.addEventListener('blur', () => {
73 | // 输入框失去焦点时，重置视口高度
74 | setTimeout(() => {
75 | setViewportHeight();
76 | }, 100);
77 | });
78 | }
79 | });
--------------------------------------------------------------------------------
/statics/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yym68686/Cerebr/ca1a3760e9ec0fdf441c2b051b4a3589dbfe693c/statics/image.png
--------------------------------------------------------------------------------
/styles/base/reset.css:
--------------------------------------------------------------------------------
1 | /* 基础样式 */
2 | body {
3 | margin: 0;
4 | padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
5 | height: 100vh;
6 | height: -webkit-fill-available;
7 | display: flex;
8 | flex-direction: column;
9 | background-color: var(--cerebr-bg-color);
10 | color: var(--cerebr-text-color);
11 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 | overflow: hidden;
13 | backdrop-filter: blur(var(--cerebr-blur-radius));
14 | -webkit-backdrop-filter: blur(var(--cerebr-blur-radius));
15 | position: fixed;
16 | top: 0;
17 | left: 0;
18 | right: 0;
19 | bottom: 0;
20 | }
--------------------------------------------------------------------------------
/styles/base/variables.css:
--------------------------------------------------------------------------------
1 | /* 根变量（默认浅色主题） */
2 | :root {
3 | --cerebr-bg-color: #ffffff;
4 | --cerebr-text-color: #333333;
5 | --cerebr-message-user-bg: #e6eaf0;
6 | --cerebr-message-ai-bg: #f8fafc;
7 | --cerebr-input-bg: #f8f8f8;
8 | --cerebr-icon-color: #666666;
9 | --cerebr-blur-radius: 12px;
10 | --cerebr-card-border-color: rgba(0, 0, 0, 0.15);
11 | --cerebr-highlight-border-color: rgba(0, 122, 255, 0.5);
12 | --cerebr-button-hover-bg: rgba(0, 0, 0, 0.1);
13 | --cerebr-focus-border-color: rgba(0, 122, 255, 0.3);
14 | --cerebr-inline-code-bg: rgba(175, 184, 193, 0.2);
15 | --cerebr-popup-shadow: rgba(0, 0, 0, 0.2);
16 | --cerebr-modal-overlay-bg: rgba(0, 0, 0, 0.8);
17 | --cerebr-close-button-bg: rgba(0, 0, 0, 0.6);
18 | --cerebr-image-tag-bg: rgba(0, 122, 255, 0.08);
19 | --cerebr-image-tag-border-color: rgba(0, 122, 255, 0.15);
20 | --cerebr-image-tag-shadow: rgba(0, 0, 0, 0.05);
21 | --cerebr-image-tag-hover-bg: rgba(0, 122, 255, 0.12);
22 | --cerebr-blockquote-text-color: rgba(0, 0, 0, 0.7);
23 | --cerebr-blockquote-border-color: rgba(0, 0, 0, 0.2);
24 | --cerebr-message-hover-shadow: rgba(0, 0, 0, 0.15);
25 | --cerebr-message-shadow: rgba(0, 0, 0, 0.1);
26 | --cerebr-link-color: #0366d6;
27 | --cerebr-toggle-hover-bg: rgba(0, 0, 0, 0.06);
28 | --cerebr-reasoning-bg: rgba(0, 0, 0, 0.03);
29 | --cerebr-reasoning-text-color: #666;
30 | --cerebr-reasoning-hover-bg: rgba(0, 0, 0, 0.05);
31 | --cerebr-toggle-bg-off: rgba(128, 128, 128, 0.3);
32 | --cerebr-toggle-bg-on: #34c759;
33 | --cerebr-input-border-color: rgba(0, 0, 0, 0.15);
34 | --cerebr-sidebar-box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
35 | }
36 |
37 | /* 深色主题变量 */
38 | :root.dark-theme {
39 | --cerebr-bg-color: #262B33;
40 | --cerebr-text-color: #d8dde6;
41 | --cerebr-message-user-bg: #3E4451;
42 | --cerebr-message-ai-bg: #2c313c;
43 | --cerebr-input-bg: #21252b;
44 | --cerebr-icon-color: #abb2bf;
45 | --cerebr-card-border-color: rgba(255, 255, 255, 0.1);
46 | --cerebr-highlight-border-color: rgba(0, 122, 255, 0.5);
47 | --cerebr-button-hover-bg: rgba(0, 0, 0, 0.25);
48 | --cerebr-focus-border-color: rgba(0, 122, 255, 0.3);
49 | --cerebr-inline-code-bg: rgba(99, 110, 123, 0.4);
50 | --cerebr-popup-shadow: rgba(0, 0, 0, 0.3);
51 | --cerebr-modal-overlay-bg: rgba(0, 0, 0, 0.8);
52 | --cerebr-close-button-bg: rgba(0, 0, 0, 0.6);
53 | --cerebr-image-tag-bg: rgba(10, 132, 255, 0.12);
54 | --cerebr-image-tag-border-color: rgba(10, 132, 255, 0.2);
55 | --cerebr-image-tag-shadow: rgba(0, 0, 0, 0.2);
56 | --cerebr-image-tag-hover-bg: rgba(10, 132, 255, 0.18);
57 | --cerebr-blockquote-text-color: rgba(255, 255, 255, 0.7);
58 | --cerebr-blockquote-border-color: rgba(255, 255, 255, 0.2);
59 | --cerebr-message-hover-shadow: rgba(0, 0, 0, 0.2);
60 | --cerebr-message-shadow: rgba(0, 0, 0, 0.15);
61 | --cerebr-link-color: #58a6ff;
62 | --cerebr-toggle-hover-bg: rgba(255, 255, 255, 0.08);
63 | --cerebr-reasoning-bg: rgba(255, 255, 255, 0.03);
64 | --cerebr-reasoning-text-color: #b3b3b3;
65 | --cerebr-reasoning-hover-bg: rgba(255, 255, 255, 0.05);
66 | --cerebr-toggle-bg-off: rgba(255, 255, 255, 0.15);
67 | --cerebr-toggle-bg-on: #32d74b;
68 | --cerebr-input-border-color: rgba(255, 255, 255, 0.15);
69 | --cerebr-sidebar-box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
70 | }
71 |
72 | /* 系统深色主题 */
73 | @media (prefers-color-scheme: dark) {
74 | :root:not(.light-theme) {
75 | --cerebr-bg-color: #262B33;
76 | --cerebr-text-color: #d8dde6;
77 | --cerebr-message-user-bg: #3E4451;
78 | --cerebr-message-ai-bg: #2c313c;
79 | --cerebr-input-bg: #21252b;
80 | --cerebr-icon-color: #abb2bf;
81 | --cerebr-card-border-color: rgba(255, 255, 255, 0.1);
82 | --cerebr-highlight-border-color: rgba(0, 122, 255, 0.5);
83 | --cerebr-button-hover-bg: rgba(0, 0, 0, 0.25);
84 | --cerebr-focus-border-color: rgba(0, 122, 255, 0.3);
85 | --cerebr-inline-code-bg: rgba(99, 110, 123, 0.4);
86 | --cerebr-popup-shadow: rgba(0, 0, 0, 0.3);
87 | --cerebr-modal-overlay-bg: rgba(0, 0, 0, 0.8);
88 | --cerebr-close-button-bg: rgba(0, 0, 0, 0.6);
89 | --cerebr-image-tag-bg: rgba(10, 132, 255, 0.12);
90 | --cerebr-image-tag-border-color: rgba(10, 132, 255, 0.2);
91 | --cerebr-image-tag-shadow: rgba(0, 0, 0, 0.2);
92 | --cerebr-image-tag-hover-bg: rgba(10, 132, 255, 0.18);
93 | --cerebr-blockquote-text-color: rgba(255, 255, 255, 0.7);
94 | --cerebr-blockquote-border-color: rgba(255, 255, 255, 0.2);
95 | --cerebr-message-hover-shadow: rgba(0, 0, 0, 0.2);
96 | --cerebr-message-shadow: rgba(0, 0, 0, 0.15);
97 | --cerebr-link-color: #58a6ff;
98 | --cerebr-toggle-hover-bg: rgba(255, 255, 255, 0.08);
99 | --cerebr-reasoning-bg: rgba(255, 255, 255, 0.03);
100 | --cerebr-reasoning-text-color: #b3b3b3;
101 | --cerebr-reasoning-hover-bg: rgba(255, 255, 255, 0.05);
102 | --cerebr-toggle-bg-off: rgba(255, 255, 255, 0.15);
103 | --cerebr-toggle-bg-on: #32d74b;
104 | --cerebr-input-border-color: rgba(255, 255, 255, 0.15);
105 | --cerebr-sidebar-box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
106 | }
107 | }
--------------------------------------------------------------------------------
/styles/components/api-settings.css:
--------------------------------------------------------------------------------
1 | /* API设置页面样式 */
2 | #api-settings {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 | z-index: 1000;
9 | display: none;
10 | overflow-y: auto;
11 | flex-direction: column;
12 | background: var(--cerebr-bg-color);
13 | }
14 |
15 | #api-settings.visible {
16 | display: flex;
17 | }
18 |
19 | .api-cards {
20 | padding: 16px;
21 | flex: 1;
22 | overflow-y: auto;
23 | }
24 |
25 | /* API卡片基础样式 */
26 | .api-card {
27 | outline: none;
28 | cursor: pointer;
29 | border-radius: 8px;
30 | position: relative;
31 | margin-bottom: 12px;
32 | background: var(--cerebr-message-ai-bg);
33 | border: 1px solid var(--cerebr-card-border-color);
34 | transition: transform 0.2s ease, box-shadow 0.2s ease;
35 | padding: 15px;
36 | }
37 |
38 | .settings-header {
39 | padding: 16px;
40 | display: flex;
41 | align-items: center;
42 | border-bottom: 1px solid var(--border-color);
43 | background-color: var(--cerebr-bg-color);
44 | position: sticky;
45 | top: 0;
46 | z-index: 1;
47 | }
48 |
49 | .back-button {
50 | background: none;
51 | border: none;
52 | padding: 8px;
53 | margin-right: 12px;
54 | cursor: pointer;
55 | color: var(--cerebr-text-color);
56 | display: flex;
57 | align-items: center;
58 | justify-content: center;
59 | border-radius: 6px;
60 | transition: background-color 0.2s ease;
61 | }
62 |
63 | .back-button:hover {
64 | background-color: var(--cerebr-message-user-bg);
65 | }
66 |
67 | .settings-title {
68 | font-size: 16px;
69 | font-weight: 500;
70 | color: var(--cerebr-text-color);
71 | }
72 |
73 | .api-card:hover,
74 | .api-card:focus {
75 | transform: translateY(-1px);
76 | box-shadow: 0 4px 12px var(--cerebr-card-border-color);
77 | }
78 |
79 | .api-card.selected {
80 | border-color: var(--cerebr-highlight-border-color);
81 | box-shadow: 0 0 0 1px var(--cerebr-highlight-border-color);
82 | }
83 |
84 | .api-card:focus:not(.selected) {
85 | border-color: var(--cerebr-focus-border-color);
86 | box-shadow: 0 0 0 1px var(--cerebr-focus-border-color);
87 | }
88 |
89 | .card-actions {
90 | display: flex;
91 | gap: 8px;
92 | z-index: 3;
93 | }
94 |
95 | .card-button {
96 | background: none;
97 | border: none;
98 | padding: 8px;
99 | cursor: pointer;
100 | color: var(--cerebr-text-color);
101 | opacity: 0.6;
102 | transition: opacity 0.2s, background-color 0.2s;
103 | display: flex;
104 | align-items: center;
105 | justify-content: center;
106 | width: 32px;
107 | height: 32px;
108 | border-radius: 4px;
109 | position: relative;
110 | }
111 |
112 | .card-button:hover {
113 | opacity: 1;
114 | background-color: var(--cerebr-button-hover-bg);
115 | }
116 |
117 | .card-button svg {
118 | width: 16px;
119 | height: 16px;
120 | pointer-events: none;
121 | stroke: currentColor;
122 | fill: none;
123 | stroke-width: 1.5;
124 | }
125 |
126 | .api-form {
127 | display: flex;
128 | flex-direction: column;
129 | gap: 12px;
130 | width: 100%;
131 | }
132 |
133 | .form-group {
134 | display: flex;
135 | flex-direction: column;
136 | gap: 4px;
137 | width: 100%;
138 | }
139 |
140 | .form-group input,
141 | .system-prompt {
142 | width: 100%;
143 | box-sizing: border-box;
144 | }
145 |
146 | .form-group-header {
147 | display: flex;
148 | justify-content: space-between;
149 | align-items: center;
150 | }
151 |
152 | .form-group label {
153 | font-size: 12px;
154 | opacity: 0.8;
155 | }
156 |
157 | .form-group input {
158 | background: var(--cerebr-message-ai-bg);
159 | border: 1px solid var(--cerebr-card-border-color);
160 | padding: 8px;
161 | border-radius: 4px;
162 | color: var(--cerebr-text-color);
163 | font-size: 14px;
164 | transition: border-color 0.2s ease;
165 | }
166 |
167 | .form-group input:focus {
168 | outline: none;
169 | border-color: var(--cerebr-highlight-border-color);
170 | box-shadow: 0 0 0 1px var(--cerebr-highlight-border-color);
171 | }
--------------------------------------------------------------------------------
/styles/components/chat-container.css:
--------------------------------------------------------------------------------
1 | /* 聊天容器样式 */
2 | #chat-container {
3 | flex: 1;
4 | overflow-y: scroll;
5 | padding: 15px;
6 | padding-top: calc(15px + env(safe-area-inset-top));
7 | padding-bottom: calc(60px + env(safe-area-inset-bottom));
8 | scrollbar-width: none;
9 | -ms-overflow-style: none;
10 | min-height: 100%;
11 | -webkit-overflow-scrolling: touch;
12 | transform: translateZ(0);
13 | scroll-behavior: smooth;
14 | overscroll-behavior-y: contain;
15 | position: relative;
16 | height: 100%;
17 | box-sizing: border-box;
18 | margin-top: var(--chat-top-margin, 0px);
19 | transition: margin-top 0.3s ease;
20 | }
21 |
22 | #chat-container::-webkit-scrollbar {
23 | display: none;
24 | }
25 |
26 | .keyboard-visible #chat-container {
27 | padding-bottom: calc(60px + env(safe-area-inset-bottom) + var(--keyboard-height, 0px));
28 | }
--------------------------------------------------------------------------------
/styles/components/chat-list.css:
--------------------------------------------------------------------------------
1 | /* 聊天列表页面样式 */
2 | #chat-list-page {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 | z-index: 1000;
9 | display: none;
10 | flex-direction: column;
11 | background: var(--cerebr-bg-color);
12 | }
13 |
14 | #chat-list-page.show {
15 | display: flex;
16 | }
17 |
18 | .chat-cards {
19 | padding: 16px;
20 | flex: 1;
21 | overflow-y: auto;
22 | }
23 |
24 | .chat-card {
25 | outline: none;
26 | cursor: pointer;
27 | border-radius: 8px;
28 | position: relative;
29 | margin-bottom: 12px;
30 | background: var(--cerebr-message-ai-bg);
31 | border: 1px solid var(--cerebr-card-border-color);
32 | transition: transform 0.2s ease, box-shadow 0.2s ease;
33 | }
34 |
35 | .chat-card:hover,
36 | .chat-card:focus {
37 | transform: translateY(-1px);
38 | box-shadow: 0 4px 12px var(--cerebr-card-border-color);
39 | }
40 |
41 | .chat-card.selected {
42 | border-color: var(--cerebr-highlight-border-color);
43 | box-shadow: 0 0 0 1px var(--cerebr-highlight-border-color);
44 | }
45 |
46 | .chat-card .card-content {
47 | display: flex;
48 | justify-content: space-between;
49 | align-items: center;
50 | padding: 15px;
51 | }
52 |
53 | .chat-card .chat-title {
54 | font-size: 14px;
55 | color: var(--cerebr-text-color);
56 | flex-grow: 1;
57 | margin-right: 12px;
58 | white-space: nowrap;
59 | overflow: hidden;
60 | text-overflow: ellipsis;
61 | }
62 |
63 | .chat-card .card-actions {
64 | display: flex;
65 | gap: 8px;
66 | z-index: 3;
67 | }
68 |
69 | .chat-card .card-button {
70 | background: none;
71 | border: none;
72 | padding: 8px;
73 | cursor: pointer;
74 | color: var(--cerebr-text-color);
75 | opacity: 0.6;
76 | transition: opacity 0.2s, background-color 0.2s;
77 | display: flex;
78 | align-items: center;
79 | justify-content: center;
80 | width: 32px;
81 | height: 32px;
82 | border-radius: 4px;
83 | position: relative;
84 | }
85 |
86 | .chat-card .card-button:hover {
87 | opacity: 1;
88 | background-color: var(--cerebr-button-hover-bg);
89 | }
90 |
91 | .chat-card .card-button svg {
92 | width: 16px;
93 | height: 16px;
94 | pointer-events: none;
95 | stroke: currentColor;
96 | fill: none;
97 | stroke-width: 1.5;
98 | }
--------------------------------------------------------------------------------
/styles/components/code.css:
--------------------------------------------------------------------------------
1 | @import '../../htmd/styles/code.css';
2 |
3 | /* 允许代码块内的文本选择 */
4 | .ai-message pre,
5 | .ai-message code {
6 | -webkit-touch-callout: text;
7 | -webkit-user-select: text;
8 | -khtml-user-select: text;
9 | -moz-user-select: text;
10 | -ms-user-select: text;
11 | user-select: text;
12 | }
--------------------------------------------------------------------------------
/styles/components/context-menu.css:
--------------------------------------------------------------------------------
1 | /* 右键菜单样式 */
2 | #context-menu {
3 | position: fixed;
4 | background: var(--cerebr-bg-color);
5 | border-radius: 8px;
6 | padding: 6px;
7 | min-width: 140px;
8 | box-shadow: 0 4px 20px var(--cerebr-popup-shadow);
9 | z-index: 2147483647;
10 | display: none;
11 | backdrop-filter: blur(var(--cerebr-blur-radius));
12 | -webkit-backdrop-filter: blur(var(--cerebr-blur-radius));
13 | border: 1px solid var(--cerebr-card-border-color);
14 | touch-action: none;
15 | }
16 |
17 | #context-menu.visible {
18 | display: block;
19 | }
20 |
21 | .context-menu-item {
22 | padding: 8px 12px;
23 | cursor: pointer;
24 | display: flex;
25 | align-items: center;
26 | gap: 8px;
27 | color: var(--cerebr-text-color);
28 | font-size: 13px;
29 | border-radius: 6px;
30 | margin: 2px 0;
31 | transition: background-color 0.2s ease;
32 | white-space: nowrap;
33 | }
34 |
35 | .context-menu-item:hover {
36 | background-color: var(--cerebr-message-user-bg);
37 | }
38 |
39 | .context-menu-item svg {
40 | width: 14px;
41 | height: 14px;
42 | fill: none;
43 | stroke: currentColor;
44 | stroke-width: 2;
45 | flex-shrink: 0;
46 | }
47 |
48 | #stop-update svg {
49 | fill: currentColor;
50 | stroke: none;
51 | }
52 |
53 | #stop-update:hover {
54 | background-color: var(--cerebr-message-user-bg);
55 | color: #ff4d4d;
56 | }
57 |
58 | #delete-message:hover {
59 | background-color: var(--cerebr-message-user-bg);
60 | color: #ff4d4d;
61 | }
--------------------------------------------------------------------------------
/styles/components/image-preview.css:
--------------------------------------------------------------------------------
1 | /* 图片预览模态框样式 */
2 | .image-preview-modal {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | right: 0;
7 | bottom: 0;
8 | background: var(--cerebr-modal-overlay-bg);
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | z-index: 10000;
13 | opacity: 0;
14 | visibility: hidden;
15 | transition: opacity 0.3s ease;
16 | backdrop-filter: blur(20px);
17 | -webkit-backdrop-filter: blur(20px);
18 | }
19 |
20 | .image-preview-modal.visible {
21 | opacity: 1;
22 | visibility: visible;
23 | }
24 |
25 | .image-preview-content {
26 | max-width: 90%;
27 | max-height: 90%;
28 | position: relative;
29 | border-radius: 8px;
30 | overflow: hidden;
31 | box-shadow: 0 4px 20px var(--cerebr-popup-shadow);
32 | }
33 |
34 | .image-preview-content img {
35 | max-width: 100%;
36 | max-height: 90vh;
37 | display: block;
38 | }
39 |
40 | .image-preview-close {
41 | position: absolute;
42 | top: 16px;
43 | right: 16px;
44 | width: 32px;
45 | height: 32px;
46 | background: var(--cerebr-close-button-bg);
47 | border: none;
48 | border-radius: 50%;
49 | color: white;
50 | cursor: pointer;
51 | display: flex;
52 | align-items: center;
53 | justify-content: center;
54 | transition: background-color 0.2s ease;
55 | }
56 |
57 | .image-preview-close:hover {
58 | background: var(--cerebr-modal-overlay-bg);
59 | }
60 |
61 | .image-preview-close svg {
62 | width: 20px;
63 | height: 20px;
64 | stroke: currentColor;
65 | stroke-width: 2;
66 | }
--------------------------------------------------------------------------------
/styles/components/image-tag.css:
--------------------------------------------------------------------------------
1 | /* 图片组件样式 */
2 | .image-tag {
3 | display: inline-flex;
4 | align-items: center;
5 | background: var(--cerebr-image-tag-bg);
6 | border: 1px solid var(--cerebr-image-tag-border-color);
7 | border-radius: 6px;
8 | padding: 4px 6px;
9 | margin: 0 4px;
10 | height: 24px;
11 | cursor: pointer;
12 | user-select: none;
13 | vertical-align: middle;
14 | transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
15 | gap: 6px;
16 | line-height: 1;
17 | box-sizing: border-box;
18 | box-shadow: 0 1px 2px var(--cerebr-image-tag-shadow);
19 | }
20 |
21 | .image-tag:hover {
22 | background: var(--cerebr-image-tag-hover-bg);
23 | transform: translateY(-1px);
24 | box-shadow: 0 2px 4px var(--cerebr-button-hover-bg);
25 | }
26 |
27 | .image-tag:active {
28 | transform: translateY(0);
29 | box-shadow: 0 1px 2px var(--cerebr-image-tag-shadow);
30 | }
31 |
32 | .image-tag img {
33 | width: 16px;
34 | height: 16px;
35 | object-fit: cover;
36 | border-radius: 4px;
37 | margin: 0;
38 | }
39 |
40 | .image-tag .delete-btn {
41 | width: 16px;
42 | height: 16px;
43 | display: flex;
44 | align-items: center;
45 | justify-content: center;
46 | border: none;
47 | background: none;
48 | padding: 0;
49 | margin: 0;
50 | cursor: pointer;
51 | color: var(--cerebr-text-color);
52 | opacity: 0.6;
53 | transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
54 | }
55 |
56 | .image-tag .delete-btn:hover {
57 | opacity: 1;
58 | transform: scale(1.1);
59 | }
60 |
61 | .image-tag .delete-btn:active {
62 | transform: scale(0.95);
63 | }
64 |
65 | .image-tag .delete-btn svg {
66 | width: 12px;
67 | height: 12px;
68 | stroke: currentColor;
69 | stroke-width: 2;
70 | }
--------------------------------------------------------------------------------
/styles/components/input.css:
--------------------------------------------------------------------------------
1 | /* 输入区域样式 */
2 | #input-container {
3 | padding: 0;
4 | background-color: var(--cerebr-input-bg);
5 | display: flex;
6 | align-items: flex-start;
7 | position: fixed;
8 | bottom: 0;
9 | left: 0;
10 | right: 0;
11 | flex-shrink: 0;
12 | padding-bottom: env(safe-area-inset-bottom);
13 | z-index: 100;
14 | min-height: 48px;
15 | }
16 |
17 | #message-input {
18 | flex: 1;
19 | padding: 12px;
20 | border: none;
21 | background-color: transparent;
22 | color: var(--cerebr-text-color);
23 | font-size: 14px;
24 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
25 | outline: none;
26 | resize: none;
27 | box-sizing: border-box;
28 | min-height: 24px;
29 | max-height: 200px;
30 | line-height: 1.5;
31 | white-space: pre-wrap;
32 | word-break: break-word;
33 | overflow-wrap: break-word;
34 | overflow-y: auto;
35 | }
36 |
37 | #message-input:empty::before {
38 | content: attr(placeholder);
39 | color: var(--cerebr-text-color);
40 | opacity: 0.5;
41 | cursor: text;
42 | font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
43 | }
44 |
45 | #message-input:focus {
46 | outline: none;
47 | }
48 |
49 | #message-input br {
50 | display: none;
51 | }
52 |
53 | #message-input br:first-child {
54 | display: block;
55 | }
--------------------------------------------------------------------------------
/styles/components/message.css:
--------------------------------------------------------------------------------
1 | /* 消息基础样式 */
2 | .message {
3 | margin: 8px 0;
4 | padding: 12px 16px;
5 | border-radius: 8px;
6 | width: fit-content;
7 | max-width: calc(100% - 32px);
8 | word-wrap: break-word;
9 | font-size: 14px;
10 | line-height: 1.5;
11 | position: relative;
12 | opacity: 0;
13 | transform: translateY(8px) scale(0.98) translateZ(0);
14 | animation: messageAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
15 | will-change: transform, opacity;
16 | box-shadow: 0 2px 6px var(--cerebr-message-shadow);
17 | transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
18 | box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
19 | -webkit-font-smoothing: antialiased;
20 | -moz-osx-font-smoothing: grayscale;
21 | backface-visibility: hidden;
22 | perspective: 1000px;
23 | }
24 |
25 | /* 消息中的图片样式 */
26 | .message img {
27 | display: block;
28 | max-width: 100%;
29 | height: auto;
30 | margin: 8px 0;
31 | border-radius: 6px;
32 | }
33 |
34 | /* 添加更新中的消息样式 */
35 | .message.updating {
36 | backface-visibility: hidden;
37 | -webkit-backface-visibility: hidden;
38 | -webkit-transform-style: preserve-3d;
39 | transform-style: preserve-3d;
40 | }
41 |
42 | .user-message {
43 | background-color: var(--cerebr-message-user-bg);
44 | margin-left: auto;
45 | margin-right: 0;
46 | border-bottom-right-radius: 4px;
47 | }
48 |
49 | .ai-message {
50 | background-color: var(--cerebr-message-ai-bg);
51 | margin-right: auto;
52 | margin-left: 0;
53 | border-bottom-left-radius: 4px;
54 | -webkit-touch-callout: none; /* iOS Safari */
55 | }
56 |
57 | .message p {
58 | margin: 0;
59 | line-height: 1.5;
60 | }
61 |
62 | .message p + p {
63 | margin-top: 0.5em;
64 | }
65 |
66 | .message ul, .message ol {
67 | margin: 0.5em 0;
68 | padding-left: 24px;
69 | }
70 |
71 | /* 链接样式 */
72 | .message a {
73 | color: var(--cerebr-link-color);
74 | text-decoration: none;
75 | }
76 |
77 | .message a:hover {
78 | text-decoration: underline;
79 | }
80 |
81 | .message blockquote {
82 | margin: 0.5em 0;
83 | padding-left: 12px;
84 | border-left: 4px solid var(--cerebr-blockquote-border-color);
85 | color: var(--cerebr-blockquote-text-color);
86 | }
87 |
88 | .message:hover {
89 | transform: translateY(-1px) translateZ(0);
90 | box-shadow: 0 4px 12px var(--cerebr-message-hover-shadow);
91 | }
92 |
93 | /* 批量加载时的消息样式 */
94 | .message.batch-load {
95 | animation: none;
96 | opacity: 0;
97 | transform: translateY(16px) scale(0.98);
98 | }
99 |
100 | .message.batch-load.show {
101 | opacity: 1;
102 | transform: translateY(0) scale(1);
103 | transition: opacity 0.3s ease, transform 0.3s ease;
104 | }
--------------------------------------------------------------------------------
/styles/components/reasoning.css:
--------------------------------------------------------------------------------
1 | /* 深度思考模块样式 */
2 | .reasoning-wrapper {
3 | margin: 0 0 12px 0;
4 | padding: 0;
5 | border: none;
6 | }
7 |
8 | .reasoning-toggle {
9 | cursor: pointer;
10 | background: transparent;
11 | color: var(--cerebr-reasoning-text-color);
12 | font-size: 0.9em;
13 | padding: 6px 12px;
14 | border: none;
15 | border-radius: 4px;
16 | user-select: none;
17 | transition: all 0.2s ease;
18 | width: auto;
19 | display: inline-block;
20 | }
21 |
22 | .reasoning-toggle:hover {
23 | background: var(--cerebr-toggle-hover-bg);
24 | color: #333;
25 | }
26 |
27 | .reasoning-content {
28 | cursor: pointer;
29 | background-color: var(--cerebr-reasoning-bg);
30 | border-radius: 6px;
31 | font-size: 0.95em;
32 | color: var(--cerebr-reasoning-text-color);
33 | line-height: 1.5;
34 | overflow: hidden;
35 | transition: all 0.2s ease;
36 | padding: 8px 12px;
37 | }
38 |
39 | .reasoning-content:hover {
40 | background-color: var(--cerebr-reasoning-hover-bg);
41 | }
42 |
43 | .reasoning-placeholder {
44 | display: none;
45 | font-size: 0.9em;
46 | color: var(--cerebr-reasoning-text-color);
47 | }
48 |
49 | .reasoning-text {
50 | word-break: break-word;
51 | transition: all 0.2s ease;
52 | }
53 |
54 | /* 折叠状态 */
55 | .reasoning-content.collapsed {
56 | padding: 6px 12px;
57 | }
58 |
59 | .reasoning-content.collapsed .reasoning-placeholder {
60 | display: block;
61 | }
62 |
63 | .reasoning-content.collapsed .reasoning-text {
64 | display: none;
65 | }
--------------------------------------------------------------------------------
/styles/components/settings.css:
--------------------------------------------------------------------------------
1 | /* 设置按钮和菜单样式 */
2 | #settings-button {
3 | padding: 12px;
4 | background: none;
5 | border: none;
6 | cursor: pointer;
7 | color: var(--cerebr-icon-color);
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | }
12 |
13 | #settings-button svg {
14 | width: 18px;
15 | height: 18px;
16 | fill: currentColor;
17 | opacity: 0.6;
18 | transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
19 | opacity 0.2s ease;
20 | }
21 |
22 | #settings-button:hover svg {
23 | transform: scale(1.25);
24 | opacity: 1;
25 | }
26 |
27 | #settings-button:active svg {
28 | transform: scale(0.95);
29 | opacity: 0.8;
30 | }
31 |
32 | #settings-menu {
33 | position: absolute;
34 | bottom: 100%;
35 | left: 8px;
36 | background-color: var(--cerebr-bg-color);
37 | border-radius: 8px;
38 | box-shadow: 0 4px 20px var(--cerebr-popup-shadow);
39 | padding: 8px;
40 | display: none;
41 | min-width: 180px;
42 | margin-bottom: 8px;
43 | transform-origin: bottom left;
44 | backdrop-filter: blur(var(--cerebr-blur-radius));
45 | -webkit-backdrop-filter: blur(var(--cerebr-blur-radius));
46 | }
47 |
48 | #settings-menu.visible {
49 | display: block;
50 | animation: menuAppear 0.2s ease;
51 | }
52 |
53 | .menu-item {
54 | padding: 8px 12px;
55 | cursor: pointer;
56 | display: flex;
57 | align-items: center;
58 | justify-content: space-between;
59 | color: var(--cerebr-text-color);
60 | border-radius: 6px;
61 | margin: 2px 0;
62 | }
63 |
64 | .menu-item:hover {
65 | background-color: var(--cerebr-message-user-bg);
66 | }
67 |
68 | /* 开关样式 */
69 | .switch {
70 | position: relative;
71 | display: inline-block;
72 | width: 36px;
73 | height: 20px;
74 | }
75 |
76 | .switch input {
77 | opacity: 0;
78 | width: 0;
79 | height: 0;
80 | }
81 |
82 | .slider {
83 | position: absolute;
84 | cursor: pointer;
85 | top: 0;
86 | left: 0;
87 | right: 0;
88 | bottom: 0;
89 | background-color: var(--cerebr-toggle-bg-off);
90 | transition: .3s;
91 | border-radius: 20px;
92 | }
93 |
94 | .slider:before {
95 | position: absolute;
96 | content: "";
97 | height: 16px;
98 | width: 16px;
99 | left: 2px;
100 | bottom: 2px;
101 | background-color: #fff;
102 | transition: .3s;
103 | border-radius: 50%;
104 | box-shadow: 0 1px 3px var(--cerebr-popup-shadow);
105 | }
106 |
107 | input:checked + .slider {
108 | background-color: var(--cerebr-toggle-bg-on);
109 | }
110 |
111 | input:checked + .slider:before {
112 | transform: translateX(16px);
113 | }
114 |
115 | /* 高级设置区域样式 */
116 | .advanced-settings {
117 | margin-top: 0;
118 | padding-top: 4px;
119 | }
120 |
121 | .advanced-settings-header {
122 | display: flex;
123 | justify-content: space-between;
124 | align-items: center;
125 | cursor: pointer;
126 | padding: 8px 12px;
127 | user-select: none;
128 | background: var(--cerebr-message-ai-bg);
129 | border-radius: 6px;
130 | transition: background-color 0.2s ease;
131 | }
132 |
133 | .advanced-settings-header:hover {
134 | opacity: 1;
135 | background: var(--cerebr-message-user-bg);
136 | }
137 |
138 | .toggle-icon {
139 | transition: transform 0.3s ease;
140 | font-size: 12px;
141 | color: var(--cerebr-text-color);
142 | opacity: 0.6;
143 | }
144 |
145 | .advanced-settings-content {
146 | overflow: hidden;
147 | transition: height 0.3s ease;
148 | width: 100%;
149 | box-sizing: border-box;
150 | }
151 |
152 | .setting-item {
153 | margin-top: 12px;
154 | }
155 |
156 | .setting-item label {
157 | display: block;
158 | font-size: 12px;
159 | margin-bottom: 4px;
160 | color: var(--cerebr-text-color);
161 | opacity: 0.8;
162 | }
163 |
164 | .system-prompt {
165 | width: 100%;
166 | min-height: 60px;
167 | padding: 8px;
168 | border: 1px solid var(--cerebr-input-border-color);
169 | border-radius: 4px;
170 | background: var(--cerebr-message-ai-bg);
171 | color: var(--cerebr-text-color);
172 | font-size: 14px;
173 | line-height: 1.5;
174 | resize: vertical;
175 | font-family: inherit;
176 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
177 | }
178 |
179 | .system-prompt:focus {
180 | outline: none;
181 | border-color: var(--cerebr-highlight-border-color);
182 | box-shadow: 0 0 0 1px var(--cerebr-highlight-border-color);
183 | }
--------------------------------------------------------------------------------
/styles/components/sidebar.css:
--------------------------------------------------------------------------------
1 | /* 侧边栏基础样式 */
2 | .cerebr-sidebar {
3 | position: fixed;
4 | top: 20px;
5 | right: -450px;
6 | width: 430px;
7 | height: calc(100vh - 40px);
8 | background: var(--cerebr-bg-color);
9 | color: var(--cerebr-text-color);
10 | box-shadow: var(--cerebr-sidebar-box-shadow);
11 | z-index: 2147483647;
12 | border-radius: 12px;
13 | margin-right: 20px;
14 | overflow: hidden;
15 | visibility: hidden;
16 | transform: translateX(0);
17 | pointer-events: none;
18 | contain: style layout size;
19 | isolation: isolate;
20 | }
21 |
22 | .cerebr-sidebar.initialized {
23 | visibility: visible;
24 | transition: transform 0.3s ease;
25 | pointer-events: auto;
26 | }
27 |
28 | .cerebr-sidebar.visible {
29 | transform: translateX(-450px);
30 | }
31 |
32 | /* 侧边栏组件样式 */
33 | .cerebr-sidebar__header {
34 | height: 40px;
35 | background: #f5f5f5;
36 | border-bottom: 1px solid #ddd;
37 | display: flex;
38 | align-items: center;
39 | padding: 0 15px;
40 | }
41 |
42 | .cerebr-sidebar__resizer {
43 | position: absolute;
44 | left: 0;
45 | top: 0;
46 | width: 5px;
47 | height: 100%;
48 | cursor: ew-resize;
49 | }
50 |
51 | .cerebr-sidebar__content {
52 | height: 100%;
53 | overflow: hidden;
54 | border-radius: 12px;
55 | contain: style layout size;
56 | }
57 |
58 | .cerebr-sidebar__iframe {
59 | width: 100%;
60 | height: 100%;
61 | border: none;
62 | background: var(--cerebr-bg-color);
63 | contain: strict;
64 | }
--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
1 | /* Base */
2 | @import './base/variables.css';
3 | @import './base/reset.css';
4 |
5 | /* Utils */
6 | @import './utils/animations.css';
7 |
8 | /* Components */
9 | @import './components/image-tag.css';
10 | @import './components/settings.css';
11 | @import './components/reasoning.css';
12 | @import './components/chat-list.css';
13 | @import './components/message.css';
14 | @import './components/code.css';
15 | @import './components/sidebar.css';
16 | @import './components/context-menu.css';
17 | @import './components/input.css';
18 | @import './components/image-preview.css';
19 | @import './components/api-settings.css';
20 | @import './components/chat-container.css';
21 |
22 | @import '../htmd/styles/math.css';
--------------------------------------------------------------------------------
/styles/utils/animations.css:
--------------------------------------------------------------------------------
1 | /* 动画 */
2 | @keyframes messageAppear {
3 | 0% {
4 | opacity: 0;
5 | transform: translateY(16px) scale(0.98);
6 | }
7 | 40% {
8 | opacity: 1;
9 | }
10 | 100% {
11 | opacity: 1;
12 | transform: translateY(0) scale(1);
13 | }
14 | }
15 |
16 | @keyframes menuAppear {
17 | from {
18 | opacity: 0;
19 | transform: translateY(4px);
20 | }
21 | to {
22 | opacity: 1;
23 | transform: translateY(0);
24 | }
25 | }
26 |
27 | /* 加载状态样式 */
28 | .loading-content #webpage-switch:checked {
29 | opacity: 0;
30 | }
31 |
32 | .loading-content #webpage-switch:checked + .slider {
33 | background-color: var(--cerebr-toggle-bg-off);
34 | }
35 |
36 | .loading-content #webpage-switch:checked + .slider:before {
37 | display: none;
38 | }
39 |
40 | .loading-content #webpage-switch:checked + .slider:after {
41 | content: '';
42 | position: absolute;
43 | width: 16px;
44 | height: 16px;
45 | border: 2px solid transparent;
46 | border-top-color: var(--cerebr-text-color);
47 | border-radius: 50%;
48 | animation: loading-spinner 0.8s linear infinite;
49 | left: 50%;
50 | top: 50%;
51 | transform: translate(-50%, -50%);
52 | }
53 |
54 | @keyframes loading-spinner {
55 | 0% { transform: translate(-50%, -50%) rotate(0deg); }
56 | 100% { transform: translate(-50%, -50%) rotate(360deg); }
57 | }
58 |
59 | /* 确保加载状态下的UI响应性 */
60 | .loading-content {
61 | pointer-events: auto !important;
62 | }
63 |
64 | .loading-content #webpage-switch {
65 | pointer-events: none;
66 | }
67 |
68 | .loading-content #chat-container,
69 | .loading-content #input-container,
70 | .loading-content #settings-button,
71 | .loading-content #settings-menu,
72 | .loading-content .menu-item:not(#webpage-qa) {
73 | pointer-events: auto !important;
74 | }
75 |
76 | /* 加载状态下的菜单项样式 */
77 | .loading-content #webpage-qa {
78 | opacity: 0.7;
79 | cursor: wait;
80 | }
81 |
82 | /* 深色模式适配加载动画 */
83 | @media (prefers-color-scheme: dark) {
84 | .loading-content #webpage-switch:checked + .slider:after {
85 | border-top-color: var(--cerebr-text-color);
86 | }
87 | }
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "builds": [
4 | {
5 | "src": "**/*",
6 | "use": "@vercel/static"
7 | }
8 | ],
9 | "cleanUrls": true,
10 | "trailingSlash": false
11 | }
--------------------------------------------------------------------------------