首次提交
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
*.log
|
||||
@@ -0,0 +1,3 @@
|
||||
registry=https://registry.npmmirror.com
|
||||
electron_mirror=https://npmmirror.com/mirrors/electron/
|
||||
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Generated
+4143
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"name": "fengai",
|
||||
"version": "1.0.0",
|
||||
"description": "FengAI - a simple OpenAI-compatible LLM chat desktop app",
|
||||
"main": "src/main/main.js",
|
||||
"author": "FengAI",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"dev": "electron . --dev",
|
||||
"icon": "node scripts/make-icon.js",
|
||||
"pack": "electron-builder --dir",
|
||||
"build": "electron-builder --win"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^31.7.0",
|
||||
"electron-builder": "^24.13.3"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.fengai.chat",
|
||||
"productName": "FengAI",
|
||||
"directories": {
|
||||
"output": "dist",
|
||||
"buildResources": "build"
|
||||
},
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"package.json",
|
||||
"!**/*.map"
|
||||
],
|
||||
"win": {
|
||||
"icon": "build/icon.ico",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"x64"
|
||||
]
|
||||
}
|
||||
],
|
||||
"artifactName": "FengAI-Setup-${version}.${ext}"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"perMachine": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"createDesktopShortcut": true,
|
||||
"createStartMenuShortcut": true,
|
||||
"shortcutName": "FengAI"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"dompurify": "^3.4.12",
|
||||
"marked": "^18.0.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const zlib = require('zlib');
|
||||
|
||||
function crc32(buf) {
|
||||
let c = ~0 >>> 0;
|
||||
for (let i = 0; i < buf.length; i++) {
|
||||
c ^= buf[i];
|
||||
for (let k = 0; k < 8; k++) c = (c >>> 1) ^ (0xEDB88320 & -(c & 1));
|
||||
}
|
||||
return ~c >>> 0;
|
||||
}
|
||||
|
||||
function chunk(type, data) {
|
||||
const len = Buffer.alloc(4);
|
||||
len.writeUInt32BE(data.length, 0);
|
||||
const t = Buffer.from(type, 'ascii');
|
||||
const crc = Buffer.alloc(4);
|
||||
crc.writeUInt32BE(crc32(Buffer.concat([t, data])), 0);
|
||||
return Buffer.concat([len, t, data, crc]);
|
||||
}
|
||||
|
||||
function encodePNG(rgba, w, h) {
|
||||
const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
|
||||
const ihdr = Buffer.alloc(13);
|
||||
ihdr.writeUInt32BE(w, 0);
|
||||
ihdr.writeUInt32BE(h, 4);
|
||||
ihdr[8] = 8; ihdr[9] = 6; ihdr[10] = 0; ihdr[11] = 0; ihdr[12] = 0;
|
||||
const stride = w * 4;
|
||||
const raw = Buffer.alloc((stride + 1) * h);
|
||||
for (let y = 0; y < h; y++) {
|
||||
raw[y * (stride + 1)] = 0;
|
||||
rgba.copy(raw, y * (stride + 1) + 1, y * stride, y * stride + stride);
|
||||
}
|
||||
const idat = zlib.deflateSync(raw, { level: 9 });
|
||||
return Buffer.concat([sig, chunk('IHDR', ihdr), chunk('IDAT', idat), chunk('IEND', Buffer.alloc(0))]);
|
||||
}
|
||||
|
||||
function makeICO(images) {
|
||||
const n = images.length;
|
||||
const header = Buffer.alloc(6);
|
||||
header.writeUInt16LE(0, 0);
|
||||
header.writeUInt16LE(1, 2);
|
||||
header.writeUInt16LE(n, 4);
|
||||
let offset = 6 + 16 * n;
|
||||
const entries = [];
|
||||
const datas = [];
|
||||
for (const im of images) {
|
||||
const e = Buffer.alloc(16);
|
||||
e[0] = im.w >= 256 ? 0 : im.w;
|
||||
e[1] = im.h >= 256 ? 0 : im.h;
|
||||
e[2] = 0; e[3] = 0;
|
||||
e.writeUInt16LE(1, 4);
|
||||
e.writeUInt16LE(32, 6);
|
||||
e.writeUInt32LE(im.png.length, 8);
|
||||
e.writeUInt32LE(offset, 12);
|
||||
entries.push(e);
|
||||
datas.push(im.png);
|
||||
offset += im.png.length;
|
||||
}
|
||||
return Buffer.concat([header, ...entries, ...datas]);
|
||||
}
|
||||
|
||||
function inRR(x, y, w, h, r) {
|
||||
if (x < r && y < r) return Math.hypot(r - x, r - y) <= r;
|
||||
if (x > w - 1 - r && y < r) return Math.hypot(w - 1 - r - x, r - y) <= r;
|
||||
if (x < r && y > h - 1 - r) return Math.hypot(r - x, h - 1 - r - y) <= r;
|
||||
if (x > w - 1 - r && y > h - 1 - r) return Math.hypot(w - 1 - r - x, h - 1 - r - y) <= r;
|
||||
return x >= 0 && y >= 0 && x < w && y < h;
|
||||
}
|
||||
|
||||
function inCapsule(x, y, x1, x2, cy, r) {
|
||||
const clampX = Math.max(x1, Math.min(x2, x));
|
||||
const dx = x - clampX;
|
||||
const dy = y - cy;
|
||||
return dx * dx + dy * dy <= r * r;
|
||||
}
|
||||
|
||||
function render(W) {
|
||||
const buf = Buffer.alloc(W * W * 4);
|
||||
const rad = W * 0.235;
|
||||
const A = [34, 211, 238];
|
||||
const B = [99, 102, 241];
|
||||
const bars = [
|
||||
{ x1: W * 0.30, x2: W * 0.74, cy: W * 0.40, r: W * 0.030 },
|
||||
{ x1: W * 0.22, x2: W * 0.80, cy: W * 0.515, r: W * 0.030 },
|
||||
{ x1: W * 0.36, x2: W * 0.70, cy: W * 0.63, r: W * 0.030 },
|
||||
];
|
||||
for (let y = 0; y < W; y++) {
|
||||
for (let x = 0; x < W; x++) {
|
||||
const i = (y * W + x) * 4;
|
||||
if (!inRR(x, y, W, W, rad)) {
|
||||
buf[i + 3] = 0;
|
||||
continue;
|
||||
}
|
||||
const t = (x + y) / (2 * (W - 1));
|
||||
let r = A[0] + (B[0] - A[0]) * t;
|
||||
let g = A[1] + (B[1] - A[1]) * t;
|
||||
let b = A[2] + (B[2] - A[2]) * t;
|
||||
let onBar = false;
|
||||
for (const bar of bars) {
|
||||
if (inCapsule(x, y, bar.x1, bar.x2, bar.cy, bar.r)) { onBar = true; break; }
|
||||
}
|
||||
if (onBar) { r = 255; g = 255; b = 255; }
|
||||
buf[i] = r | 0;
|
||||
buf[i + 1] = g | 0;
|
||||
buf[i + 2] = b | 0;
|
||||
buf[i + 3] = 255;
|
||||
}
|
||||
}
|
||||
return buf;
|
||||
}
|
||||
|
||||
function downsampleAvg(buf, W, ss) {
|
||||
const size = W / ss;
|
||||
const out = Buffer.alloc(size * size * 4);
|
||||
for (let y = 0; y < size; y++) {
|
||||
for (let x = 0; x < size; x++) {
|
||||
let r = 0, g = 0, b = 0, a = 0;
|
||||
for (let dy = 0; dy < ss; dy++) {
|
||||
for (let dx = 0; dx < ss; dx++) {
|
||||
const i = ((y * ss + dy) * W + (x * ss + dx)) * 4;
|
||||
r += buf[i]; g += buf[i + 1]; b += buf[i + 2]; a += buf[i + 3];
|
||||
}
|
||||
}
|
||||
const n = ss * ss;
|
||||
const o = (y * size + x) * 4;
|
||||
out[o] = Math.round(r / n);
|
||||
out[o + 1] = Math.round(g / n);
|
||||
out[o + 2] = Math.round(b / n);
|
||||
out[o + 3] = Math.round(a / n);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function nearest(src, sw, sh, dw, dh) {
|
||||
const out = Buffer.alloc(dw * dh * 4);
|
||||
for (let y = 0; y < dh; y++) {
|
||||
for (let x = 0; x < dw; x++) {
|
||||
const sx = Math.min(sw - 1, Math.round((x * sw) / dw));
|
||||
const sy = Math.min(sh - 1, Math.round((y * sh) / dh));
|
||||
const si = (sy * sw + sx) * 4;
|
||||
const di = (y * dw + x) * 4;
|
||||
out[di] = src[si];
|
||||
out[di + 1] = src[si + 1];
|
||||
out[di + 2] = src[si + 2];
|
||||
out[di + 3] = src[si + 3];
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
const SS = 4;
|
||||
const BASE = 256;
|
||||
const hi = render(BASE * SS);
|
||||
const big = downsampleAvg(hi, BASE * SS, SS);
|
||||
const png256 = encodePNG(big, BASE, BASE);
|
||||
const png48 = encodePNG(nearest(big, BASE, BASE, 48, 48), 48, 48);
|
||||
const png32 = encodePNG(nearest(big, BASE, BASE, 32, 32), 32, 32);
|
||||
const png16 = encodePNG(nearest(big, BASE, BASE, 16, 16), 16, 16);
|
||||
const ico = makeICO([
|
||||
{ png: png256, w: 256, h: 256 },
|
||||
{ png: png48, w: 48, h: 48 },
|
||||
{ png: png32, w: 32, h: 32 },
|
||||
{ png: png16, w: 16, h: 16 },
|
||||
]);
|
||||
const outDir = path.join(__dirname, '..', 'build');
|
||||
fs.mkdirSync(outDir, { recursive: true });
|
||||
fs.writeFileSync(path.join(outDir, 'icon.ico'), ico);
|
||||
console.log('icon.ico written:', path.join(outDir, 'icon.ico'), ico.length, 'bytes');
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
const https = require('https');
|
||||
const http = require('http');
|
||||
const { URL } = require('url');
|
||||
const logger = require('./logger');
|
||||
|
||||
function normalizeBaseURL(baseURL) {
|
||||
let url = (baseURL || '').trim().replace(/\/+$/, '');
|
||||
if (/\/chat\/completions$/.test(url)) {
|
||||
url = url.replace(/\/chat\/completions$/, '');
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
function buildChatURL(baseURL) {
|
||||
return normalizeBaseURL(baseURL) + '/chat/completions';
|
||||
}
|
||||
|
||||
function buildModelsURL(baseURL) {
|
||||
return normalizeBaseURL(baseURL) + '/models';
|
||||
}
|
||||
|
||||
async function fetchModels({ baseURL, apiKey }) {
|
||||
const url = buildModelsURL(baseURL);
|
||||
logger.log('FETCH_MODELS_START', { url });
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { Authorization: 'Bearer ' + apiKey, 'Content-Type': 'application/json' },
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
logger.log('FETCH_MODELS_FAIL', { status: res.status, body: text.slice(0, 300) });
|
||||
throw new Error('获取模型列表失败 (HTTP ' + res.status + '): ' + text.slice(0, 300));
|
||||
}
|
||||
const json = await res.json();
|
||||
const data = json.data || json.models || [];
|
||||
const models = data.map((m) => (typeof m === 'string' ? m : m.id || m.name)).filter(Boolean);
|
||||
logger.log('FETCH_MODELS_OK', { count: models.length });
|
||||
return models;
|
||||
}
|
||||
|
||||
function doRequest(url, { method, headers, bodyStr, signal }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const u = new URL(url);
|
||||
const lib = u.protocol === 'https:' ? https : http;
|
||||
const opts = {
|
||||
hostname: u.hostname,
|
||||
port: u.port || (u.protocol === 'https:' ? 443 : 80),
|
||||
path: u.pathname + u.search,
|
||||
method,
|
||||
headers: Object.assign({}, headers, { 'Content-Length': Buffer.byteLength(bodyStr) }),
|
||||
};
|
||||
const req = lib.request(opts, (res) => resolve(res));
|
||||
|
||||
if (signal) {
|
||||
if (signal.aborted) {
|
||||
req.destroy();
|
||||
reject(Object.assign(new Error('Aborted'), { name: 'AbortError' }));
|
||||
return;
|
||||
}
|
||||
signal.addEventListener('abort', () => {
|
||||
try { req.destroy(); } catch { /* ignore */ }
|
||||
});
|
||||
}
|
||||
req.on('error', (err) => {
|
||||
if (signal && signal.aborted) reject(Object.assign(new Error('Aborted'), { name: 'AbortError' }));
|
||||
else reject(err);
|
||||
});
|
||||
req.write(bodyStr);
|
||||
req.end();
|
||||
});
|
||||
}
|
||||
|
||||
function readAll(stream) {
|
||||
return new Promise((resolve) => {
|
||||
const chunks = [];
|
||||
stream.on('data', (c) => chunks.push(c));
|
||||
stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
|
||||
stream.on('error', () => resolve(Buffer.concat(chunks).toString('utf8')));
|
||||
});
|
||||
}
|
||||
|
||||
async function streamChat({ baseURL, apiKey, model, messages, enableThinking, reasoningEffort, maxTokens, signal, onChunk, onUsage }) {
|
||||
const url = buildChatURL(baseURL);
|
||||
let currentMessages = messages;
|
||||
let accumulated = '';
|
||||
const MAX_ITER = 12;
|
||||
const CONTINUE_PROMPT = '继续，请从刚才中断的地方直接接着输出，不要重复已经输出的任何内容。';
|
||||
|
||||
for (let iter = 0; iter < MAX_ITER; iter++) {
|
||||
const body = { model, messages: currentMessages, stream: true };
|
||||
if (enableThinking) {
|
||||
body.thinking = { type: 'enabled' };
|
||||
if (reasoningEffort) body.reasoning_effort = reasoningEffort;
|
||||
}
|
||||
if (maxTokens && maxTokens > 0) body.max_tokens = maxTokens;
|
||||
const bodyStr = JSON.stringify(body);
|
||||
|
||||
logger.log('REQUEST', { iter, model, msgCount: currentMessages.length, thinking: !!enableThinking, effort: reasoningEffort || null, maxTokens: maxTokens || null, url });
|
||||
|
||||
let res;
|
||||
try {
|
||||
res = await doRequest(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
|
||||
bodyStr,
|
||||
signal,
|
||||
});
|
||||
} catch (e) {
|
||||
if (e && e.name === 'AbortError') { logger.log('ABORTED_AT_REQUEST', { iter }); throw e; }
|
||||
logger.log('REQUEST_ERROR', { iter, error: e.message, code: e.code });
|
||||
throw e;
|
||||
}
|
||||
|
||||
logger.log('RESPONSE_STATUS', { iter, status: res.statusCode });
|
||||
|
||||
if (res.statusCode !== 200) {
|
||||
const text = await readAll(res);
|
||||
logger.log('HTTP_ERROR', { iter, status: res.statusCode, body: text.slice(0, 500) });
|
||||
throw new Error('请求失败 (HTTP ' + res.statusCode + '): ' + text.slice(0, 500));
|
||||
}
|
||||
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
let buffer = '';
|
||||
let finishReason = null;
|
||||
let sawDone = false;
|
||||
let chunkCount = 0;
|
||||
let gotContentThisIter = false;
|
||||
|
||||
try {
|
||||
for await (const chunk of res) {
|
||||
buffer += decoder.decode(chunk, { stream: true });
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
for (const raw of lines) {
|
||||
const line = raw.trim();
|
||||
if (!line || !line.startsWith('data:')) continue;
|
||||
const data = line.slice(5).trim();
|
||||
if (data === '[DONE]') { sawDone = true; break; }
|
||||
try {
|
||||
const json = JSON.parse(data);
|
||||
chunkCount++;
|
||||
if (json.usage && onUsage) onUsage(json.usage);
|
||||
const choice = (json.choices && json.choices[0]) || {};
|
||||
const delta = choice.delta || {};
|
||||
const content = delta.content || '';
|
||||
const reasoning = delta.reasoning_content || delta.reasoning || '';
|
||||
if (content) { accumulated += content; gotContentThisIter = true; onChunk({ content, reasoning: '' }); }
|
||||
if (reasoning) { onChunk({ content: '', reasoning }); }
|
||||
if (choice.finish_reason) finishReason = choice.finish_reason;
|
||||
} catch {
|
||||
/* ignore malformed lines */
|
||||
}
|
||||
}
|
||||
if (sawDone) break;
|
||||
}
|
||||
} catch (e) {
|
||||
if (e && e.name === 'AbortError') { logger.log('ABORTED_IN_STREAM', { iter }); throw e; }
|
||||
logger.log('STREAM_ERROR', { iter, error: e.message, code: e.code, stack: e.stack });
|
||||
throw e;
|
||||
}
|
||||
|
||||
try { res.destroy(); } catch { /* ignore */ }
|
||||
|
||||
logger.log('SEGMENT_END', { iter, finishReason: finishReason || null, sawDone, chunkCount, accumulatedLen: accumulated.length, gotContent: gotContentThisIter });
|
||||
|
||||
if (signal && signal.aborted) { logger.log('SIGNAL_ABORTED_AFTER', { iter }); throw Object.assign(new Error('Aborted'), { name: 'AbortError' }); }
|
||||
|
||||
const truncated = finishReason === 'length' || (!finishReason && !sawDone && gotContentThisIter);
|
||||
|
||||
if (truncated && iter < MAX_ITER - 1 && accumulated.length > 0) {
|
||||
logger.log('AUTO_CONTINUE', { iter, reason: finishReason === 'length' ? 'length' : 'abrupt', accumulatedLen: accumulated.length });
|
||||
currentMessages = messages.concat([
|
||||
{ role: 'assistant', content: accumulated },
|
||||
{ role: 'user', content: CONTINUE_PROMPT },
|
||||
]);
|
||||
continue;
|
||||
}
|
||||
if (iter === MAX_ITER - 1 && truncated) {
|
||||
logger.log('MAX_ITER_REACHED', { accumulatedLen: accumulated.length });
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
logger.log('STREAM_COMPLETE', { totalAccumulatedLen: accumulated.length });
|
||||
}
|
||||
|
||||
module.exports = { fetchModels, streamChat, buildChatURL };
|
||||
@@ -0,0 +1,29 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { app } = require('electron');
|
||||
|
||||
let _logPath = null;
|
||||
function logPath() {
|
||||
if (_logPath) return _logPath;
|
||||
_logPath = path.join(app.getPath('userData'), 'fengai.log');
|
||||
return _logPath;
|
||||
}
|
||||
|
||||
function log(...args) {
|
||||
const ts = new Date().toISOString();
|
||||
const parts = args.map((a) => {
|
||||
if (a instanceof Error) return a.stack || a.message;
|
||||
if (typeof a === 'object' && a !== null) {
|
||||
try { return JSON.stringify(a); } catch { return String(a); }
|
||||
}
|
||||
return String(a);
|
||||
});
|
||||
const line = '[' + ts + '] ' + parts.join(' ') + '\n';
|
||||
try {
|
||||
fs.appendFileSync(logPath(), line);
|
||||
} catch {
|
||||
/* ignore write errors */
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { log, logPath };
|
||||
@@ -0,0 +1,140 @@
|
||||
const { app, BrowserWindow, ipcMain, shell } = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const store = require('./store');
|
||||
const { fetchModels, streamChat } = require('./api');
|
||||
const logger = require('./logger');
|
||||
|
||||
let mainWindow = null;
|
||||
let abortController = null;
|
||||
|
||||
function createWindow() {
|
||||
const iconPath = path.join(__dirname, '..', '..', 'build', 'icon.ico');
|
||||
const winOpts = {
|
||||
width: 1200,
|
||||
height: 780,
|
||||
minWidth: 860,
|
||||
minHeight: 600,
|
||||
backgroundColor: '#16161d',
|
||||
title: 'FengAI',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: false,
|
||||
},
|
||||
};
|
||||
if (fs.existsSync(iconPath)) winOpts.icon = iconPath;
|
||||
mainWindow = new BrowserWindow(winOpts);
|
||||
|
||||
mainWindow.setMenuBarVisibility(false);
|
||||
mainWindow.loadFile(path.join(__dirname, '..', 'renderer', 'index.html'));
|
||||
|
||||
if (process.argv.includes('--dev')) {
|
||||
mainWindow.webContents.openDevTools({ mode: 'detach' });
|
||||
}
|
||||
|
||||
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
|
||||
shell.openExternal(url);
|
||||
return { action: 'deny' };
|
||||
});
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
function send(channel, data) {
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
mainWindow.webContents.send(channel, data);
|
||||
}
|
||||
}
|
||||
|
||||
function registerStoreIpc() {
|
||||
ipcMain.handle('store:getProviders', () => store.getProviders());
|
||||
ipcMain.handle('store:upsertProvider', (_e, provider) => store.upsertProvider(provider));
|
||||
ipcMain.handle('store:deleteProvider', (_e, id) => store.deleteProvider(id));
|
||||
|
||||
ipcMain.handle('store:getConversationList', () => store.getConversationList());
|
||||
ipcMain.handle('store:getConversation', (_e, id) => store.getConversation(id));
|
||||
ipcMain.handle('store:saveConversation', (_e, conv) => store.saveConversation(conv));
|
||||
ipcMain.handle('store:deleteConversation', (_e, id) => store.deleteConversation(id));
|
||||
ipcMain.handle('store:clearAllConversations', () => store.clearAllConversations());
|
||||
ipcMain.handle('store:renameConversation', (_e, { id, title }) => store.renameConversation(id, title));
|
||||
}
|
||||
|
||||
function registerChatIpc() {
|
||||
ipcMain.handle('provider:test', async (_e, provider) => {
|
||||
try {
|
||||
const models = await fetchModels(provider);
|
||||
return { ok: true, models };
|
||||
} catch (err) {
|
||||
return { ok: false, error: err.message, models: [] };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('chat:start', async (_e, { providerId, model, messages, enableThinking, reasoningEffort }) => {
|
||||
const providers = store.getProviders();
|
||||
const provider = providers.find((p) => p.id === providerId);
|
||||
if (!provider) return { ok: false, error: '未找到供应商配置' };
|
||||
if (!provider.apiKey) return { ok: false, error: '该供应商未配置密钥' };
|
||||
|
||||
abortController = new AbortController();
|
||||
try {
|
||||
await streamChat({
|
||||
baseURL: provider.baseURL,
|
||||
apiKey: provider.apiKey,
|
||||
model,
|
||||
messages,
|
||||
enableThinking: !!enableThinking,
|
||||
reasoningEffort: reasoningEffort || undefined,
|
||||
maxTokens: provider.maxTokens || 0,
|
||||
signal: abortController.signal,
|
||||
onChunk: (chunk) => send('chat:chunk', chunk),
|
||||
onUsage: (usage) => send('chat:usage', usage),
|
||||
});
|
||||
send('chat:done', { ok: true });
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') {
|
||||
send('chat:done', { ok: true, aborted: true });
|
||||
} else {
|
||||
send('chat:error', { message: err.message });
|
||||
}
|
||||
} finally {
|
||||
abortController = null;
|
||||
}
|
||||
return { ok: true };
|
||||
});
|
||||
|
||||
ipcMain.handle('chat:stop', () => {
|
||||
if (abortController) abortController.abort();
|
||||
return true;
|
||||
});
|
||||
|
||||
ipcMain.handle('app:openLog', () => {
|
||||
const { logPath } = require('./logger');
|
||||
const p = logPath();
|
||||
shell.showItemInFolder(p);
|
||||
return p;
|
||||
});
|
||||
|
||||
ipcMain.handle('app:logPath', () => {
|
||||
const { logPath } = require('./logger');
|
||||
return logPath();
|
||||
});
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
logger.log('APP_START', { version: app.getVersion(), platform: process.platform, electron: process.versions.electron, node: process.versions.node });
|
||||
registerStoreIpc();
|
||||
registerChatIpc();
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
const chatHandlers = { chunk: null, done: null, error: null, usage: null };
|
||||
|
||||
ipcRenderer.on('chat:chunk', (_e, data) => {
|
||||
if (chatHandlers.chunk) chatHandlers.chunk(data);
|
||||
});
|
||||
ipcRenderer.on('chat:done', (_e, data) => {
|
||||
if (chatHandlers.done) chatHandlers.done(data);
|
||||
});
|
||||
ipcRenderer.on('chat:error', (_e, data) => {
|
||||
if (chatHandlers.error) chatHandlers.error(data);
|
||||
});
|
||||
ipcRenderer.on('chat:usage', (_e, data) => {
|
||||
if (chatHandlers.usage) chatHandlers.usage(data);
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld('api', {
|
||||
providers: {
|
||||
list: () => ipcRenderer.invoke('store:getProviders'),
|
||||
save: (provider) => ipcRenderer.invoke('store:upsertProvider', provider),
|
||||
remove: (id) => ipcRenderer.invoke('store:deleteProvider', id),
|
||||
test: (provider) => ipcRenderer.invoke('provider:test', provider),
|
||||
},
|
||||
conversations: {
|
||||
list: () => ipcRenderer.invoke('store:getConversationList'),
|
||||
get: (id) => ipcRenderer.invoke('store:getConversation', id),
|
||||
save: (conv) => ipcRenderer.invoke('store:saveConversation', conv),
|
||||
remove: (id) => ipcRenderer.invoke('store:deleteConversation', id),
|
||||
clearAll: () => ipcRenderer.invoke('store:clearAllConversations'),
|
||||
rename: (id, title) => ipcRenderer.invoke('store:renameConversation', { id, title }),
|
||||
},
|
||||
chat: {
|
||||
start: (params) => ipcRenderer.invoke('chat:start', params),
|
||||
stop: () => ipcRenderer.invoke('chat:stop'),
|
||||
onChunk: (cb) => { chatHandlers.chunk = cb; },
|
||||
onDone: (cb) => { chatHandlers.done = cb; },
|
||||
onError: (cb) => { chatHandlers.error = cb; },
|
||||
onUsage: (cb) => { chatHandlers.usage = cb; },
|
||||
},
|
||||
app: {
|
||||
openLog: () => ipcRenderer.invoke('app:openLog'),
|
||||
logPath: () => ipcRenderer.invoke('app:logPath'),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
const { app } = require('electron');
|
||||
|
||||
function dataDir() {
|
||||
const dir = path.join(app.getPath('userData'), 'data');
|
||||
if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
|
||||
return dir;
|
||||
}
|
||||
|
||||
function providersPath() {
|
||||
return path.join(dataDir(), 'providers.json');
|
||||
}
|
||||
|
||||
function conversationsDir() {
|
||||
const dir = path.join(dataDir(), 'conversations');
|
||||
if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
|
||||
return dir;
|
||||
}
|
||||
|
||||
function readJSON(file, fallback) {
|
||||
try {
|
||||
if (!fs.existsSync(file)) return fallback;
|
||||
return JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function writeJSON(file, data) {
|
||||
fs.writeFileSync(file, JSON.stringify(data, null, 2), 'utf8');
|
||||
}
|
||||
|
||||
function getProviders() {
|
||||
return readJSON(providersPath(), []);
|
||||
}
|
||||
|
||||
function saveProviders(list) {
|
||||
writeJSON(providersPath(), list);
|
||||
}
|
||||
|
||||
function upsertProvider(provider) {
|
||||
const list = getProviders();
|
||||
if (!provider.id) provider.id = crypto.randomUUID();
|
||||
const idx = list.findIndex((p) => p.id === provider.id);
|
||||
if (idx >= 0) list[idx] = { ...list[idx], ...provider };
|
||||
else list.push(provider);
|
||||
saveProviders(list);
|
||||
return provider;
|
||||
}
|
||||
|
||||
function deleteProvider(id) {
|
||||
saveProviders(getProviders().filter((p) => p.id !== id));
|
||||
}
|
||||
|
||||
function getConversationList() {
|
||||
const dir = conversationsDir();
|
||||
const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
|
||||
const items = files.map((f) => {
|
||||
try {
|
||||
const c = JSON.parse(fs.readFileSync(path.join(dir, f), 'utf8'));
|
||||
return {
|
||||
id: c.id,
|
||||
title: c.title,
|
||||
providerId: c.providerId,
|
||||
model: c.model,
|
||||
createdAt: c.createdAt,
|
||||
updatedAt: c.updatedAt,
|
||||
messageCount: (c.messages || []).length,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}).filter(Boolean);
|
||||
items.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
|
||||
return items;
|
||||
}
|
||||
|
||||
function getConversation(id) {
|
||||
const file = path.join(conversationsDir(), `${id}.json`);
|
||||
return readJSON(file, null);
|
||||
}
|
||||
|
||||
function saveConversation(conv) {
|
||||
if (!conv.id) conv.id = crypto.randomUUID();
|
||||
const now = Date.now();
|
||||
if (!conv.createdAt) conv.createdAt = now;
|
||||
conv.updatedAt = now;
|
||||
writeJSON(path.join(conversationsDir(), `${conv.id}.json`), conv);
|
||||
return conv;
|
||||
}
|
||||
|
||||
function deleteConversation(id) {
|
||||
const file = path.join(conversationsDir(), `${id}.json`);
|
||||
if (fs.existsSync(file)) fs.unlinkSync(file);
|
||||
}
|
||||
|
||||
function clearAllConversations() {
|
||||
const dir = conversationsDir();
|
||||
fs.readdirSync(dir).filter((f) => f.endsWith('.json')).forEach((f) => {
|
||||
fs.unlinkSync(path.join(dir, f));
|
||||
});
|
||||
}
|
||||
|
||||
function renameConversation(id, title) {
|
||||
const conv = getConversation(id);
|
||||
if (!conv) return null;
|
||||
conv.title = title;
|
||||
conv.updatedAt = Date.now();
|
||||
writeJSON(path.join(conversationsDir(), `${id}.json`), conv);
|
||||
return conv;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getProviders,
|
||||
upsertProvider,
|
||||
deleteProvider,
|
||||
getConversationList,
|
||||
getConversation,
|
||||
saveConversation,
|
||||
deleteConversation,
|
||||
clearAllConversations,
|
||||
renameConversation,
|
||||
};
|
||||
@@ -0,0 +1,953 @@
|
||||
(function () {
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const api = window.api;
|
||||
|
||||
const LS = {
|
||||
theme: 'fengai.theme',
|
||||
ctx: 'fengai.ctx',
|
||||
effort: 'fengai.effort',
|
||||
system: 'fengai.systemPrompt',
|
||||
};
|
||||
function lsGet(key) {
|
||||
return localStorage.getItem(key) !== null ? localStorage.getItem(key) : localStorage.getItem(key.replace('fengai.', 'nova.'));
|
||||
}
|
||||
|
||||
const state = {
|
||||
providers: [],
|
||||
convList: [],
|
||||
currentConv: null,
|
||||
selectedProviderId: null,
|
||||
selectedModel: null,
|
||||
isStreaming: false,
|
||||
contextLimit: 6,
|
||||
thinkingEffort: 'off',
|
||||
systemPrompt: '',
|
||||
streamMsg: null,
|
||||
streamDom: null,
|
||||
flushTimer: null,
|
||||
dirty: false,
|
||||
autoScroll: true,
|
||||
editingProviderId: null,
|
||||
};
|
||||
|
||||
const els = {
|
||||
convList: $('conversationList'),
|
||||
searchInput: $('searchInput'),
|
||||
btnNewChat: $('btnNewChat'),
|
||||
btnSettings: $('btnSettings'),
|
||||
btnClearAll: $('btnClearAll'),
|
||||
themeBtn: $('themeBtn'),
|
||||
topbarTitle: $('topbarTitle'),
|
||||
convMenuBtn: $('convMenuBtn'),
|
||||
convMenu: $('convMenu'),
|
||||
menuRename: $('menuRename'),
|
||||
menuClearCurrent: $('menuClearCurrent'),
|
||||
modelSelect: $('modelSelect'),
|
||||
thinkingToggle: $('thinkingToggle'),
|
||||
ctxMinus: $('ctxMinus'),
|
||||
ctxPlus: $('ctxPlus'),
|
||||
ctxVal: $('ctxVal'),
|
||||
effortSeg: $('effortSeg'),
|
||||
messages: $('messages'),
|
||||
scrollBottomBtn: $('scrollBottomBtn'),
|
||||
input: $('input'),
|
||||
charCount: $('charCount'),
|
||||
btnSend: $('btnSend'),
|
||||
btnStop: $('btnStop'),
|
||||
composerHint: $('composerHint'),
|
||||
settingsModal: $('settingsModal'),
|
||||
closeSettings: $('closeSettings'),
|
||||
providerSelect: $('providerSelect'),
|
||||
btnNewProvider: $('btnNewProvider'),
|
||||
btnDeleteProvider: $('btnDeleteProvider'),
|
||||
pfName: $('pfName'),
|
||||
pfBaseURL: $('pfBaseURL'),
|
||||
pfApiKey: $('pfApiKey'),
|
||||
pfModels: $('pfModels'),
|
||||
pfMaxTokens: $('pfMaxTokens'),
|
||||
pfSystemPrompt: $('pfSystemPrompt'),
|
||||
btnTestAndFetch: $('btnTestAndFetch'),
|
||||
testHint: $('testHint'),
|
||||
btnSaveProvider: $('btnSaveProvider'),
|
||||
btnOpenLog: $('btnOpenLog'),
|
||||
toast: $('toast'),
|
||||
dialogModal: $('dialogModal'),
|
||||
dialogTitle: $('dialogTitle'),
|
||||
dialogMessage: $('dialogMessage'),
|
||||
dialogInput: $('dialogInput'),
|
||||
dialogCancel: $('dialogCancel'),
|
||||
dialogOk: $('dialogOk'),
|
||||
};
|
||||
|
||||
const dialogState = { onOk: null, input: false };
|
||||
function showDialog({ title, message, value, input, okText, onOk }) {
|
||||
els.dialogTitle.textContent = title || '提示';
|
||||
if (input) {
|
||||
els.dialogMessage.hidden = true;
|
||||
els.dialogInput.hidden = false;
|
||||
els.dialogInput.value = value || '';
|
||||
} else {
|
||||
els.dialogMessage.hidden = false;
|
||||
els.dialogInput.hidden = true;
|
||||
els.dialogMessage.textContent = message || '';
|
||||
}
|
||||
els.dialogOk.textContent = okText || '确定';
|
||||
dialogState.onOk = onOk;
|
||||
dialogState.input = !!input;
|
||||
els.dialogModal.hidden = false;
|
||||
if (input) setTimeout(() => { els.dialogInput.focus(); els.dialogInput.select(); }, 60);
|
||||
}
|
||||
function closeDialog() { els.dialogModal.hidden = true; dialogState.onOk = null; }
|
||||
function showConfirm(message, onOk, okText) {
|
||||
showDialog({ title: '确认', message, input: false, okText, onOk });
|
||||
}
|
||||
function showPrompt(title, value, onOk) {
|
||||
showDialog({ title, input: true, value, okText: '保存', onOk: (v) => { onOk(v); } });
|
||||
}
|
||||
|
||||
// ---------- utils ----------
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
}
|
||||
function makeTitle(text) {
|
||||
return String(text || '').replace(/\s+/g, ' ').trim().slice(0, 18) || '新对话';
|
||||
}
|
||||
function uid() {
|
||||
return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
|
||||
}
|
||||
function toast(msg) {
|
||||
els.toast.textContent = msg;
|
||||
els.toast.hidden = false;
|
||||
requestAnimationFrame(() => els.toast.classList.add('show'));
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => {
|
||||
els.toast.classList.remove('show');
|
||||
setTimeout(() => { els.toast.hidden = true; }, 250);
|
||||
}, 1600);
|
||||
}
|
||||
function timeAgo(ts) {
|
||||
if (!ts) return '';
|
||||
const d = Date.now() - ts;
|
||||
const m = Math.floor(d / 60000);
|
||||
if (m < 1) return '刚刚';
|
||||
if (m < 60) return m + '分钟前';
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return h + '小时前';
|
||||
const day = Math.floor(h / 24);
|
||||
if (day < 7) return day + '天前';
|
||||
const dt = new Date(ts);
|
||||
return (dt.getMonth() + 1) + '/' + dt.getDate();
|
||||
}
|
||||
function renderMarkdown(text) {
|
||||
if (!text) return '';
|
||||
try {
|
||||
const html = marked.parse(text, { breaks: true, gfm: true });
|
||||
return DOMPurify.sanitize(html);
|
||||
} catch {
|
||||
return escapeHtml(text);
|
||||
}
|
||||
}
|
||||
function copyText(text) {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => toast('已复制')).catch(() => fallbackCopy(text));
|
||||
} else fallbackCopy(text);
|
||||
}
|
||||
function fallbackCopy(text) {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.opacity = '0';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand('copy'); toast('已复制'); } catch { /* ignore */ }
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
function parseUsage(u) {
|
||||
if (!u) return null;
|
||||
const input = u.prompt_tokens != null ? u.prompt_tokens : (u.input_tokens || 0);
|
||||
const completion = u.completion_tokens != null ? u.completion_tokens : (u.output_tokens || 0);
|
||||
const reasoning = (u.completion_tokens_details && u.completion_tokens_details.reasoning_tokens) != null
|
||||
? u.completion_tokens_details.reasoning_tokens
|
||||
: (u.reasoning_tokens || 0);
|
||||
const total = u.total_tokens != null ? u.total_tokens : (input + completion);
|
||||
return { input, completion, reasoning, total };
|
||||
}
|
||||
function fmtTokens(n) {
|
||||
return n >= 10000 ? (n / 1000).toFixed(1) + 'k' : String(n);
|
||||
}
|
||||
function statsText(s) {
|
||||
if (!s) return '';
|
||||
return '输入 ' + fmtTokens(s.input) + ' · 思考 ' + fmtTokens(s.reasoning) + ' · 输出 ' + fmtTokens(s.completion) + ' · 合计 ' + fmtTokens(s.total);
|
||||
}
|
||||
function buildStatsEl(s) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'msg-stats';
|
||||
el.textContent = '📊 ' + statsText(s);
|
||||
return el;
|
||||
}
|
||||
function computeSessionStats() {
|
||||
const conv = state.currentConv;
|
||||
if (!conv) return null;
|
||||
let input = 0, completion = 0, reasoning = 0, total = 0, has = false;
|
||||
conv.messages.forEach((m) => {
|
||||
if (m.usage) {
|
||||
const s = parseUsage(m.usage);
|
||||
input += s.input; completion += s.completion; reasoning += s.reasoning; total += s.total; has = true;
|
||||
}
|
||||
});
|
||||
return has ? { input, completion, reasoning, total } : null;
|
||||
}
|
||||
function updateSessionStatsUI() {
|
||||
if (state.isStreaming) return;
|
||||
const s = computeSessionStats();
|
||||
els.composerHint.textContent = s ? ('本会话 · ' + statsText(s)) : '';
|
||||
}
|
||||
|
||||
// ---------- theme ----------
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
els.themeBtn.textContent = theme === 'dark' ? '🌙' : '☀️';
|
||||
els.themeBtn.title = theme === 'dark' ? '切换到亮色' : '切换到暗色';
|
||||
}
|
||||
function toggleTheme() {
|
||||
const cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
const next = cur === 'dark' ? 'light' : 'dark';
|
||||
applyTheme(next);
|
||||
localStorage.setItem(LS.theme, next);
|
||||
}
|
||||
|
||||
// ---------- preferences ----------
|
||||
function loadPrefs() {
|
||||
applyTheme(lsGet(LS.theme) || 'dark');
|
||||
state.contextLimit = parseInt(lsGet(LS.ctx) || '6', 10) || 6;
|
||||
state.thinkingEffort = lsGet(LS.effort) || 'off';
|
||||
state.systemPrompt = lsGet(LS.system) || '';
|
||||
els.ctxVal.textContent = state.contextLimit;
|
||||
els.pfSystemPrompt.value = state.systemPrompt;
|
||||
setEffort(state.thinkingEffort);
|
||||
}
|
||||
function setEffort(v) {
|
||||
if (v !== 'off' && v !== 'high' && v !== 'max') v = 'off';
|
||||
state.thinkingEffort = v;
|
||||
localStorage.setItem(LS.effort, v);
|
||||
els.effortSeg.querySelectorAll('.effort-opt').forEach((b) => {
|
||||
b.classList.toggle('active', b.dataset.v === v);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- providers ----------
|
||||
async function loadProviders() {
|
||||
state.providers = await api.providers.list();
|
||||
refreshModelSelect();
|
||||
}
|
||||
function refreshModelSelect() {
|
||||
const sel = els.modelSelect;
|
||||
sel.innerHTML = '';
|
||||
if (state.providers.length === 0) {
|
||||
const opt = document.createElement('option');
|
||||
opt.textContent = '请先配置供应商';
|
||||
sel.appendChild(opt);
|
||||
sel.disabled = true;
|
||||
return;
|
||||
}
|
||||
sel.disabled = false;
|
||||
state.providers.forEach((p) => {
|
||||
(p.models || []).forEach((m) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = p.id + '::' + m;
|
||||
opt.textContent = p.name + ' / ' + m;
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
});
|
||||
const target = state.selectedProviderId && state.selectedModel
|
||||
? state.selectedProviderId + '::' + state.selectedModel : '';
|
||||
if (target && [...sel.options].some((o) => o.value === target)) {
|
||||
sel.value = target;
|
||||
} else {
|
||||
state.selectedProviderId = state.providers[0].id;
|
||||
state.selectedModel = (state.providers[0].models || [])[0] || null;
|
||||
if (state.selectedModel) sel.value = state.selectedProviderId + '::' + state.selectedModel;
|
||||
}
|
||||
}
|
||||
function getSelectedProvider() {
|
||||
const val = els.modelSelect.value;
|
||||
if (!val || !val.includes('::')) return null;
|
||||
const [pid, model] = val.split('::');
|
||||
const provider = state.providers.find((p) => p.id === pid);
|
||||
return provider ? { provider, model } : null;
|
||||
}
|
||||
|
||||
// ---------- conversation list ----------
|
||||
async function loadConvList() {
|
||||
state.convList = await api.conversations.list();
|
||||
renderConvList();
|
||||
}
|
||||
function renderConvList() {
|
||||
const q = els.searchInput.value.trim().toLowerCase();
|
||||
const list = state.convList.filter((c) => !q || (c.title || '').toLowerCase().includes(q));
|
||||
els.convList.innerHTML = '';
|
||||
if (list.length === 0) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'conv-item';
|
||||
empty.style.color = 'var(--text-faint)';
|
||||
empty.style.cursor = 'default';
|
||||
empty.textContent = state.convList.length === 0 ? '暂无对话' : '无匹配结果';
|
||||
els.convList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
list.forEach((c) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'conv-item' + (state.currentConv && state.currentConv.id === c.id ? ' active' : '');
|
||||
const main = document.createElement('div');
|
||||
main.className = 'conv-main';
|
||||
const title = document.createElement('div');
|
||||
title.className = 'conv-title';
|
||||
title.textContent = c.title || '新对话';
|
||||
const time = document.createElement('div');
|
||||
time.className = 'conv-time';
|
||||
time.textContent = timeAgo(c.updatedAt);
|
||||
main.appendChild(title);
|
||||
main.appendChild(time);
|
||||
main.addEventListener('dblclick', (e) => {
|
||||
e.stopPropagation();
|
||||
startRename(c, title);
|
||||
});
|
||||
const del = document.createElement('button');
|
||||
del.className = 'conv-del';
|
||||
del.textContent = '×';
|
||||
del.title = '删除对话';
|
||||
del.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
await api.conversations.remove(c.id);
|
||||
if (state.currentConv && state.currentConv.id === c.id) {
|
||||
state.currentConv = null;
|
||||
renderMessages();
|
||||
}
|
||||
await loadConvList();
|
||||
});
|
||||
item.appendChild(main);
|
||||
item.appendChild(del);
|
||||
item.addEventListener('click', () => openConversation(c.id));
|
||||
els.convList.appendChild(item);
|
||||
});
|
||||
}
|
||||
function startRename(c, titleEl) {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.value = c.title || '';
|
||||
input.className = 'search-input';
|
||||
input.style.padding = '2px 6px';
|
||||
titleEl.replaceWith(input);
|
||||
input.focus();
|
||||
input.select();
|
||||
const done = async (commit) => {
|
||||
const v = input.value.trim();
|
||||
if (commit && v) {
|
||||
await api.conversations.rename(c.id, v);
|
||||
c.title = v;
|
||||
if (state.currentConv && state.currentConv.id === c.id) {
|
||||
state.currentConv.title = v;
|
||||
els.topbarTitle.textContent = v;
|
||||
}
|
||||
}
|
||||
await loadConvList();
|
||||
};
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); done(true); }
|
||||
else if (e.key === 'Escape') { done(false); }
|
||||
});
|
||||
input.addEventListener('blur', () => done(true));
|
||||
}
|
||||
async function openConversation(id) {
|
||||
const conv = await api.conversations.get(id);
|
||||
if (!conv) return;
|
||||
state.currentConv = conv;
|
||||
if (conv.providerId && conv.model) {
|
||||
state.selectedProviderId = conv.providerId;
|
||||
state.selectedModel = conv.model;
|
||||
refreshModelSelect();
|
||||
}
|
||||
els.topbarTitle.textContent = conv.title || '对话';
|
||||
renderConvList();
|
||||
renderMessages();
|
||||
}
|
||||
function newConversation() {
|
||||
if (state.isStreaming) { stopStreaming(); }
|
||||
state.currentConv = { id: uid(), title: '新对话', messages: [], providerId: null, model: null };
|
||||
els.topbarTitle.textContent = '新对话';
|
||||
renderConvList();
|
||||
renderMessages();
|
||||
els.input.focus();
|
||||
}
|
||||
|
||||
// ---------- message rendering ----------
|
||||
function renderMessages() {
|
||||
const m = els.messages;
|
||||
m.innerHTML = '';
|
||||
state.autoScroll = true;
|
||||
els.scrollBottomBtn.hidden = true;
|
||||
if (!state.currentConv || state.currentConv.messages.length === 0) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'empty-state';
|
||||
empty.innerHTML = '<div class="empty-logo">✦</div><h2>FengAI</h2><p>选择模型，输入消息开始对话</p>';
|
||||
m.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
const msgs = state.currentConv.messages;
|
||||
msgs.forEach((msg, i) => {
|
||||
m.appendChild(buildMessageEl(msg, i === msgs.length - 1));
|
||||
});
|
||||
scrollToBottom();
|
||||
updateSessionStatsUI();
|
||||
}
|
||||
function buildMessageEl(msg, isLast) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'message ' + msg.role;
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'message-head';
|
||||
const role = document.createElement('div');
|
||||
role.className = 'message-role';
|
||||
const avatar = document.createElement('span');
|
||||
avatar.className = 'avatar';
|
||||
avatar.textContent = msg.role === 'user' ? '你' : '✦';
|
||||
const name = document.createElement('span');
|
||||
name.className = 'message-role-name';
|
||||
name.textContent = msg.role === 'user' ? '你' : 'FengAI';
|
||||
role.appendChild(avatar);
|
||||
role.appendChild(name);
|
||||
head.appendChild(role);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'msg-actions';
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'msg-action';
|
||||
copyBtn.textContent = '复制';
|
||||
copyBtn.addEventListener('click', () => copyText(msg.content || ''));
|
||||
actions.appendChild(copyBtn);
|
||||
if (msg.role === 'assistant' && isLast && !msg.streaming) {
|
||||
const regen = document.createElement('button');
|
||||
regen.className = 'msg-action';
|
||||
regen.textContent = '重新生成';
|
||||
regen.addEventListener('click', regenerate);
|
||||
actions.appendChild(regen);
|
||||
}
|
||||
head.appendChild(actions);
|
||||
wrap.appendChild(head);
|
||||
|
||||
if (msg.reasoning) {
|
||||
wrap.appendChild(buildReasoningEl(msg.reasoning, true));
|
||||
}
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'message-body';
|
||||
if (msg.role === 'assistant') {
|
||||
body.classList.add('md');
|
||||
body.innerHTML = renderMarkdown(msg.content || '');
|
||||
} else {
|
||||
body.textContent = msg.content || '';
|
||||
}
|
||||
wrap.appendChild(body);
|
||||
if (msg.role === 'assistant' && msg.usage) {
|
||||
wrap.appendChild(buildStatsEl(parseUsage(msg.usage)));
|
||||
}
|
||||
return wrap;
|
||||
}
|
||||
function buildReasoningEl(text, collapsed) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'reasoning' + (collapsed ? ' collapsed done' : ' done');
|
||||
const header = document.createElement('div');
|
||||
header.className = 'reasoning-header';
|
||||
header.innerHTML = '<span class="dot"></span><span class="arrow">▼</span><span>思考过程</span>';
|
||||
const body = document.createElement('div');
|
||||
body.className = 'reasoning-body';
|
||||
body.textContent = text;
|
||||
el.appendChild(header);
|
||||
el.appendChild(body);
|
||||
header.addEventListener('click', () => el.classList.toggle('collapsed'));
|
||||
return el;
|
||||
}
|
||||
function scrollToBottom() {
|
||||
els.messages.scrollTop = els.messages.scrollHeight;
|
||||
}
|
||||
|
||||
// ---------- streaming DOM ----------
|
||||
function createStreamingEl() {
|
||||
const m = els.messages;
|
||||
m.querySelectorAll('.empty-state').forEach((n) => n.remove());
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'message assistant';
|
||||
const head = document.createElement('div');
|
||||
head.className = 'message-head';
|
||||
head.innerHTML = '<div class="message-role"><span class="avatar">✦</span><span class="message-role-name">FengAI</span></div>';
|
||||
wrap.appendChild(head);
|
||||
const body = document.createElement('div');
|
||||
body.className = 'message-body';
|
||||
const cursor = document.createElement('span');
|
||||
cursor.className = 'cursor-blink';
|
||||
wrap.appendChild(body);
|
||||
wrap.appendChild(cursor);
|
||||
m.appendChild(wrap);
|
||||
state.streamDom = { wrap, head, reasoningEl: null, reasoningBody: null, body, cursor };
|
||||
}
|
||||
function flush() {
|
||||
const dom = state.streamDom;
|
||||
const msg = state.streamMsg;
|
||||
if (!dom || !msg) return;
|
||||
if (msg.reasoning) {
|
||||
if (!dom.reasoningEl) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'reasoning';
|
||||
const header = document.createElement('div');
|
||||
header.className = 'reasoning-header';
|
||||
header.innerHTML = '<span class="dot"></span><span class="arrow">▼</span><span>思考中…</span>';
|
||||
const rbody = document.createElement('div');
|
||||
rbody.className = 'reasoning-body';
|
||||
el.appendChild(header);
|
||||
el.appendChild(rbody);
|
||||
header.addEventListener('click', () => el.classList.toggle('collapsed'));
|
||||
dom.reasoningUserAtBottom = true;
|
||||
rbody.addEventListener('scroll', () => {
|
||||
const nearBottom = (rbody.scrollHeight - rbody.scrollTop - rbody.clientHeight) < 28;
|
||||
dom.reasoningUserAtBottom = nearBottom;
|
||||
}, { passive: true });
|
||||
dom.wrap.insertBefore(el, dom.body);
|
||||
dom.reasoningEl = el;
|
||||
dom.reasoningBody = rbody;
|
||||
}
|
||||
dom.reasoningBody.textContent = msg.reasoning;
|
||||
if (dom.reasoningUserAtBottom && !dom.reasoningEl.classList.contains('collapsed')) {
|
||||
dom.reasoningBody.scrollTop = dom.reasoningBody.scrollHeight;
|
||||
}
|
||||
}
|
||||
if (msg.content.length < 40000) {
|
||||
dom.body.classList.remove('streaming-text');
|
||||
dom.body.innerHTML = renderMarkdown(msg.content);
|
||||
} else {
|
||||
dom.body.classList.add('streaming-text');
|
||||
dom.body.textContent = msg.content;
|
||||
}
|
||||
dom.cursor.style.display = state.isStreaming ? '' : 'none';
|
||||
if (state.autoScroll) scrollToBottom();
|
||||
}
|
||||
function finalizeStreamingEl() {
|
||||
const dom = state.streamDom;
|
||||
const msg = state.streamMsg;
|
||||
if (!dom || !msg) return;
|
||||
dom.body.classList.remove('streaming-text');
|
||||
dom.body.innerHTML = renderMarkdown(msg.content || '');
|
||||
dom.cursor.style.display = 'none';
|
||||
if (msg.usage) {
|
||||
const existing = dom.wrap.querySelector('.msg-stats');
|
||||
if (!existing) dom.wrap.appendChild(buildStatsEl(parseUsage(msg.usage)));
|
||||
}
|
||||
if (dom.reasoningEl) {
|
||||
dom.reasoningEl.classList.add('done');
|
||||
const label = dom.reasoningEl.querySelector('.reasoning-header span:last-child');
|
||||
if (label) label.textContent = '思考过程';
|
||||
}
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'msg-actions';
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'msg-action';
|
||||
copyBtn.textContent = '复制';
|
||||
copyBtn.addEventListener('click', () => copyText(msg.content || ''));
|
||||
actions.appendChild(copyBtn);
|
||||
const regen = document.createElement('button');
|
||||
regen.className = 'msg-action';
|
||||
regen.textContent = '重新生成';
|
||||
regen.addEventListener('click', regenerate);
|
||||
actions.appendChild(regen);
|
||||
dom.head.appendChild(actions);
|
||||
state.streamDom = null;
|
||||
state.streamMsg = null;
|
||||
}
|
||||
|
||||
function setStreamingUI(streaming) {
|
||||
state.isStreaming = streaming;
|
||||
els.btnSend.hidden = streaming;
|
||||
els.btnStop.hidden = !streaming;
|
||||
els.input.disabled = streaming;
|
||||
els.btnNewChat.disabled = streaming;
|
||||
els.modelSelect.disabled = streaming || state.providers.length === 0;
|
||||
els.composerHint.textContent = streaming ? '正在生成… 点击停止可中断' : '';
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const box = document.createElement('div');
|
||||
box.className = 'error-box';
|
||||
box.textContent = msg;
|
||||
els.messages.appendChild(box);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
// ---------- send / stream ----------
|
||||
function ensureCurrentConv() {
|
||||
if (!state.currentConv) {
|
||||
state.currentConv = { id: uid(), title: '新对话', messages: [], providerId: null, model: null };
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (state.isStreaming) return;
|
||||
const text = els.input.value.trim();
|
||||
if (!text) return;
|
||||
const sel = getSelectedProvider();
|
||||
if (!sel) { toast('请先配置供应商和模型'); return; }
|
||||
ensureCurrentConv();
|
||||
const conv = state.currentConv;
|
||||
conv.messages.push({ role: 'user', content: text });
|
||||
conv.providerId = sel.provider.id;
|
||||
conv.model = sel.model;
|
||||
if (conv.messages.filter((m) => m.role === 'user').length === 1) {
|
||||
conv.title = makeTitle(text);
|
||||
els.topbarTitle.textContent = conv.title;
|
||||
}
|
||||
els.input.value = '';
|
||||
autoResize();
|
||||
updateCharCount();
|
||||
renderMessages();
|
||||
await runStream();
|
||||
}
|
||||
|
||||
async function runStream() {
|
||||
const sel = getSelectedProvider();
|
||||
if (!sel) { toast('请先配置供应商和模型'); return; }
|
||||
const { provider, model } = sel;
|
||||
const conv = state.currentConv;
|
||||
setStreamingUI(true);
|
||||
const effort = state.thinkingEffort;
|
||||
const msg = { role: 'assistant', content: '', reasoning: '', streaming: true };
|
||||
conv.messages.push(msg);
|
||||
state.streamMsg = msg;
|
||||
state.dirty = false;
|
||||
createStreamingEl();
|
||||
flush();
|
||||
state.flushTimer = setInterval(flush, 100);
|
||||
|
||||
const history = conv.messages.filter((m) => !(m.role === 'assistant' && m.streaming));
|
||||
const sys = state.systemPrompt.trim() ? [{ role: 'system', content: state.systemPrompt.trim() }] : [];
|
||||
const trimmed = history.slice(-state.contextLimit);
|
||||
const apiMessages = sys.concat(trimmed.map((m) => ({ role: m.role, content: m.content })));
|
||||
|
||||
let finished = false;
|
||||
const finish = async () => {
|
||||
if (finished) return;
|
||||
finished = true;
|
||||
clearInterval(state.flushTimer);
|
||||
state.flushTimer = null;
|
||||
msg.streaming = false;
|
||||
if (!msg.content && !msg.reasoning) {
|
||||
conv.messages.pop();
|
||||
}
|
||||
finalizeStreamingEl();
|
||||
setStreamingUI(false);
|
||||
await api.conversations.save(conv);
|
||||
await loadConvList();
|
||||
if (state.autoScroll) scrollToBottom();
|
||||
updateSessionStatsUI();
|
||||
};
|
||||
|
||||
api.chat.onChunk((chunk) => {
|
||||
if (chunk.content) msg.content += chunk.content;
|
||||
if (chunk.reasoning) msg.reasoning += chunk.reasoning;
|
||||
state.dirty = true;
|
||||
});
|
||||
api.chat.onUsage((u) => { if (state.streamMsg) state.streamMsg.usage = u; });
|
||||
api.chat.onDone(() => finish());
|
||||
api.chat.onError((data) => {
|
||||
showError(data.message);
|
||||
finish();
|
||||
});
|
||||
|
||||
try {
|
||||
await api.chat.start({
|
||||
providerId: provider.id,
|
||||
model,
|
||||
messages: apiMessages,
|
||||
enableThinking: effort !== 'off',
|
||||
reasoningEffort: effort !== 'off' ? effort : undefined,
|
||||
});
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
finish();
|
||||
}
|
||||
}
|
||||
|
||||
function stopStreaming() {
|
||||
api.chat.stop();
|
||||
}
|
||||
|
||||
async function regenerate() {
|
||||
if (state.isStreaming) return;
|
||||
const conv = state.currentConv;
|
||||
if (!conv || !conv.messages.length) return;
|
||||
if (conv.messages[conv.messages.length - 1].role === 'assistant') {
|
||||
conv.messages.pop();
|
||||
}
|
||||
if (!conv.messages.length || conv.messages[conv.messages.length - 1].role !== 'user') {
|
||||
toast('没有可重新生成的消息');
|
||||
renderMessages();
|
||||
return;
|
||||
}
|
||||
renderMessages();
|
||||
await runStream();
|
||||
}
|
||||
|
||||
function clearCurrent() {
|
||||
if (!state.currentConv) return;
|
||||
showConfirm('清空当前对话的全部消息？', async () => {
|
||||
state.currentConv.messages = [];
|
||||
state.currentConv.title = '新对话';
|
||||
els.topbarTitle.textContent = '新对话';
|
||||
await api.conversations.save(state.currentConv);
|
||||
renderMessages();
|
||||
await loadConvList();
|
||||
toast('已清空当前对话');
|
||||
}, '清空');
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
if (state.convList.length === 0) { toast('暂无对话'); return; }
|
||||
showConfirm('确定清空全部对话？此操作不可恢复。', async () => {
|
||||
if (state.isStreaming) stopStreaming();
|
||||
await api.conversations.clearAll();
|
||||
state.currentConv = null;
|
||||
await loadConvList();
|
||||
newConversation();
|
||||
toast('已清空全部对话');
|
||||
}, '全部清空');
|
||||
}
|
||||
|
||||
// ---------- settings modal ----------
|
||||
function openSettings() {
|
||||
els.settingsModal.hidden = false;
|
||||
els.pfSystemPrompt.value = state.systemPrompt;
|
||||
refreshProviderSelect();
|
||||
}
|
||||
function closeSettings() {
|
||||
state.systemPrompt = els.pfSystemPrompt.value;
|
||||
localStorage.setItem(LS.system, state.systemPrompt);
|
||||
els.settingsModal.hidden = true;
|
||||
refreshModelSelect();
|
||||
}
|
||||
function refreshProviderSelect() {
|
||||
const sel = els.providerSelect;
|
||||
sel.innerHTML = '';
|
||||
if (state.providers.length === 0) {
|
||||
const opt = document.createElement('option');
|
||||
opt.textContent = '(无供应商，请新建)';
|
||||
sel.appendChild(opt);
|
||||
state.editingProviderId = null;
|
||||
loadProviderForm(null);
|
||||
return;
|
||||
}
|
||||
state.providers.forEach((p) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = p.id;
|
||||
opt.textContent = p.name;
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
if (!state.editingProviderId || !state.providers.find((p) => p.id === state.editingProviderId)) {
|
||||
state.editingProviderId = state.providers[0].id;
|
||||
}
|
||||
sel.value = state.editingProviderId;
|
||||
loadProviderForm(state.editingProviderId);
|
||||
}
|
||||
function loadProviderForm(id) {
|
||||
state.editingProviderId = id;
|
||||
const p = state.providers.find((x) => x.id === id);
|
||||
els.pfName.value = p ? p.name : '';
|
||||
els.pfBaseURL.value = p ? p.baseURL : '';
|
||||
els.pfApiKey.value = p ? p.apiKey : '';
|
||||
els.pfModels.value = p && p.models ? p.models.join('\n') : '';
|
||||
els.pfMaxTokens.value = p && p.maxTokens ? p.maxTokens : '';
|
||||
els.testHint.textContent = '';
|
||||
els.testHint.className = 'hint';
|
||||
}
|
||||
function parseModels(text) {
|
||||
return text.split(/[\n,]/).map((s) => s.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
// ---------- composer ----------
|
||||
function autoResize() {
|
||||
els.input.style.height = 'auto';
|
||||
els.input.style.height = Math.min(els.input.scrollHeight, 220) + 'px';
|
||||
}
|
||||
function updateCharCount() {
|
||||
const len = els.input.value.length;
|
||||
els.charCount.textContent = len > 999 ? (len / 1000).toFixed(1) + 'k' : len;
|
||||
}
|
||||
|
||||
// ---------- events ----------
|
||||
function initEvents() {
|
||||
els.themeBtn.addEventListener('click', toggleTheme);
|
||||
els.btnNewChat.addEventListener('click', newConversation);
|
||||
els.btnSettings.addEventListener('click', openSettings);
|
||||
|
||||
// generic dialog
|
||||
els.dialogOk.addEventListener('click', () => {
|
||||
const cb = dialogState.onOk;
|
||||
const val = dialogState.input ? els.dialogInput.value : true;
|
||||
closeDialog();
|
||||
if (cb) cb(val);
|
||||
});
|
||||
els.dialogCancel.addEventListener('click', closeDialog);
|
||||
els.dialogInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); els.dialogOk.click(); }
|
||||
else if (e.key === 'Escape') { closeDialog(); }
|
||||
});
|
||||
els.dialogModal.addEventListener('click', (e) => { if (e.target === els.dialogModal) closeDialog(); });
|
||||
els.btnClearAll.addEventListener('click', clearAll);
|
||||
els.closeSettings.addEventListener('click', closeSettings);
|
||||
els.settingsModal.addEventListener('click', (e) => { if (e.target === els.settingsModal) closeSettings(); });
|
||||
els.searchInput.addEventListener('input', renderConvList);
|
||||
|
||||
els.modelSelect.addEventListener('change', async () => {
|
||||
const sel = getSelectedProvider();
|
||||
if (sel) {
|
||||
state.selectedProviderId = sel.provider.id;
|
||||
state.selectedModel = sel.model;
|
||||
if (state.currentConv) {
|
||||
state.currentConv.providerId = sel.provider.id;
|
||||
state.currentConv.model = sel.model;
|
||||
await api.conversations.save(state.currentConv);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
els.ctxMinus.addEventListener('click', () => setCtx(state.contextLimit - 1));
|
||||
els.ctxPlus.addEventListener('click', () => setCtx(state.contextLimit + 1));
|
||||
els.effortSeg.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.effort-opt');
|
||||
if (btn) setEffort(btn.dataset.v);
|
||||
});
|
||||
|
||||
// conv menu
|
||||
els.convMenuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
els.convMenu.hidden = !els.convMenu.hidden;
|
||||
});
|
||||
document.addEventListener('click', () => { els.convMenu.hidden = true; });
|
||||
els.convMenu.addEventListener('click', (e) => e.stopPropagation());
|
||||
els.menuRename.addEventListener('click', () => {
|
||||
els.convMenu.hidden = true;
|
||||
if (!state.currentConv) return;
|
||||
showPrompt('重命名对话', state.currentConv.title, (v) => {
|
||||
if (v && v.trim()) renameCurrent(v.trim());
|
||||
});
|
||||
});
|
||||
els.menuClearCurrent.addEventListener('click', () => {
|
||||
els.convMenu.hidden = true;
|
||||
clearCurrent();
|
||||
});
|
||||
|
||||
// input
|
||||
els.input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
|
||||
});
|
||||
els.input.addEventListener('input', () => { autoResize(); updateCharCount(); });
|
||||
els.btnSend.addEventListener('click', sendMessage);
|
||||
els.btnStop.addEventListener('click', stopStreaming);
|
||||
|
||||
// smart scroll
|
||||
els.messages.addEventListener('scroll', () => {
|
||||
const nearBottom = (els.messages.scrollHeight - els.messages.scrollTop - els.messages.clientHeight) < 80;
|
||||
state.autoScroll = nearBottom;
|
||||
els.scrollBottomBtn.hidden = nearBottom;
|
||||
}, { passive: true });
|
||||
els.scrollBottomBtn.addEventListener('click', () => {
|
||||
state.autoScroll = true;
|
||||
els.scrollBottomBtn.hidden = true;
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
// provider settings
|
||||
els.providerSelect.addEventListener('change', () => loadProviderForm(els.providerSelect.value));
|
||||
els.btnNewProvider.addEventListener('click', () => {
|
||||
loadProviderForm(null);
|
||||
els.pfName.focus();
|
||||
});
|
||||
els.btnDeleteProvider.addEventListener('click', () => {
|
||||
if (!state.editingProviderId) return;
|
||||
showConfirm('确定删除该供应商配置吗？', async () => {
|
||||
await api.providers.remove(state.editingProviderId);
|
||||
state.editingProviderId = null;
|
||||
state.providers = await api.providers.list();
|
||||
refreshProviderSelect();
|
||||
}, '删除');
|
||||
});
|
||||
els.btnTestAndFetch.addEventListener('click', async () => {
|
||||
els.testHint.textContent = '测试中…';
|
||||
els.testHint.className = 'hint';
|
||||
const provider = {
|
||||
id: state.editingProviderId || undefined,
|
||||
name: els.pfName.value.trim() || '(未命名)',
|
||||
baseURL: els.pfBaseURL.value.trim(),
|
||||
apiKey: els.pfApiKey.value.trim(),
|
||||
models: parseModels(els.pfModels.value),
|
||||
maxTokens: parseInt(els.pfMaxTokens.value.trim(), 10) || 0,
|
||||
};
|
||||
const res = await api.providers.test(provider);
|
||||
if (res.ok) {
|
||||
els.testHint.textContent = res.models.length
|
||||
? '连接成功，发现 ' + res.models.length + ' 个模型'
|
||||
: '连接成功，但未返回模型列表（可手动填写）';
|
||||
els.testHint.className = 'hint ok';
|
||||
if (res.models.length) els.pfModels.value = res.models.join('\n');
|
||||
} else {
|
||||
els.testHint.textContent = '失败：' + res.error;
|
||||
els.testHint.className = 'hint err';
|
||||
}
|
||||
});
|
||||
els.btnSaveProvider.addEventListener('click', async () => {
|
||||
const provider = {
|
||||
id: state.editingProviderId || undefined,
|
||||
name: els.pfName.value.trim() || '(未命名)',
|
||||
baseURL: els.pfBaseURL.value.trim(),
|
||||
apiKey: els.pfApiKey.value.trim(),
|
||||
models: parseModels(els.pfModels.value),
|
||||
maxTokens: parseInt(els.pfMaxTokens.value.trim(), 10) || 0,
|
||||
};
|
||||
if (!provider.baseURL) { toast('请填写 API 地址'); return; }
|
||||
const saved = await api.providers.save(provider);
|
||||
state.editingProviderId = saved.id;
|
||||
state.providers = await api.providers.list();
|
||||
refreshProviderSelect();
|
||||
els.testHint.textContent = '已保存';
|
||||
els.testHint.className = 'hint ok';
|
||||
});
|
||||
els.btnOpenLog.addEventListener('click', () => {
|
||||
api.app.openLog();
|
||||
toast('已在资源管理器中定位日志文件');
|
||||
});
|
||||
}
|
||||
|
||||
async function renameCurrent(title) {
|
||||
if (!state.currentConv) return;
|
||||
await api.conversations.rename(state.currentConv.id, title);
|
||||
state.currentConv.title = title;
|
||||
els.topbarTitle.textContent = title;
|
||||
await loadConvList();
|
||||
}
|
||||
|
||||
function setCtx(v) {
|
||||
v = Math.max(0, Math.min(50, v));
|
||||
state.contextLimit = v;
|
||||
els.ctxVal.textContent = v;
|
||||
localStorage.setItem(LS.ctx, String(v));
|
||||
}
|
||||
|
||||
// ---------- boot ----------
|
||||
async function init() {
|
||||
if (window.marked) { try { marked.setOptions({ breaks: true, gfm: true }); } catch { /* ignore */ } }
|
||||
loadPrefs();
|
||||
initEvents();
|
||||
await loadProviders();
|
||||
await loadConvList();
|
||||
newConversation();
|
||||
autoResize();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
})();
|
||||
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:;" />
|
||||
<title>FengAI</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<span class="brand-logo">✦</span>
|
||||
<span class="brand-name">FengAI</span>
|
||||
<button class="icon-btn theme-btn" id="themeBtn" title="切换主题">🌙</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-actions">
|
||||
<button class="btn-new" id="btnNewChat">＋ 新建对话</button>
|
||||
<div class="search-wrap">
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="搜索对话..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conversation-list" id="conversationList"></div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button class="btn-footer danger" id="btnClearAll">🗑 清空全部</button>
|
||||
<button class="btn-footer" id="btnSettings">⚙ 供应商与模型</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title" id="topbarTitle">新对话</div>
|
||||
<div class="conv-menu-wrap">
|
||||
<button class="icon-btn" id="convMenuBtn" title="对话操作">⋯</button>
|
||||
<div class="dropdown-menu" id="convMenu" hidden>
|
||||
<button class="dropdown-item" id="menuRename">✏ 重命名对话</button>
|
||||
<button class="dropdown-item danger" id="menuClearCurrent">🗑 清空当前对话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="stepper" title="保留最近几轮上下文">
|
||||
<span class="stepper-label">上下文</span>
|
||||
<button class="step-btn" id="ctxMinus">−</button>
|
||||
<span class="step-val" id="ctxVal">6</span>
|
||||
<button class="step-btn" id="ctxPlus">＋</button>
|
||||
</div>
|
||||
<div class="effort-seg" id="effortSeg" title="思考强度（reasoning_effort）">
|
||||
<span class="effort-label">思考</span>
|
||||
<button class="effort-opt active" data-v="off">关闭</button>
|
||||
<button class="effort-opt" data-v="high">增强</button>
|
||||
<button class="effort-opt" data-v="max">深度</button>
|
||||
</div>
|
||||
<select id="modelSelect" class="model-select" title="选择模型"></select>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="messages-wrap">
|
||||
<div class="messages" id="messages"></div>
|
||||
<button class="scroll-bottom-btn" id="scrollBottomBtn" title="回到底部" hidden>↓</button>
|
||||
</div>
|
||||
|
||||
<footer class="composer">
|
||||
<div class="composer-inner">
|
||||
<textarea id="input" class="input" placeholder="输入消息，Enter 发送 · Shift+Enter 换行" rows="1"></textarea>
|
||||
<div class="composer-side">
|
||||
<span class="char-count" id="charCount">0</span>
|
||||
<button id="btnSend" class="btn-send">发送</button>
|
||||
<button id="btnStop" class="btn-stop" hidden>停止</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composer-hint" id="composerHint"></div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal-overlay" id="settingsModal" hidden>
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>供应商与模型配置</h2>
|
||||
<button class="modal-close" id="closeSettings">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="provider-section">
|
||||
<div class="provider-toolbar">
|
||||
<select id="providerSelect" class="provider-select"></select>
|
||||
<button class="btn-sm" id="btnNewProvider">＋ 新建</button>
|
||||
<button class="btn-sm btn-danger" id="btnDeleteProvider">删除</button>
|
||||
</div>
|
||||
|
||||
<div class="provider-form" id="providerForm">
|
||||
<label class="field">
|
||||
<span>供应商名称</span>
|
||||
<input type="text" id="pfName" placeholder="GLM5.1" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>API 地址（将自动拼接 /chat/completions）</span>
|
||||
<input type="text" id="pfBaseURL" placeholder="https://ark.cn-beijing.volces.com/api/coding/v3" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>密钥</span>
|
||||
<input type="password" id="pfApiKey" placeholder="sk-..." />
|
||||
</label>
|
||||
<div class="field-row">
|
||||
<button class="btn-sm" id="btnTestAndFetch">测试并获取模型</button>
|
||||
<span class="hint" id="testHint"></span>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>模型列表（每行一个，或逗号分隔）</span>
|
||||
<textarea id="pfModels" rows="5" placeholder="glm-5.2,kimi-k2.6"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>最大输出 tokens（留空=不限制；GLM-5.2 可填 131072）</span>
|
||||
<input type="text" id="pfMaxTokens" placeholder="131072" />
|
||||
</label>
|
||||
<div class="field">
|
||||
<span>系统提示词（可选，对所有对话生效）</span>
|
||||
<textarea id="pfSystemPrompt" rows="3" placeholder="你是一个乐于助人的助手..."></textarea>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<button class="btn-sm btn-primary" id="btnSaveProvider">保存供应商</button>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<button class="btn-sm" id="btnOpenLog">📂 打开日志文件</button>
|
||||
<span class="hint">排查流式中断等问题时查看 fengai.log</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast" hidden></div>
|
||||
|
||||
<!-- Generic dialog (replaces native alert/confirm/prompt) -->
|
||||
<div class="modal-overlay" id="dialogModal" hidden>
|
||||
<div class="modal dialog-modal">
|
||||
<div class="modal-header">
|
||||
<h2 id="dialogTitle">提示</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="dialog-message" id="dialogMessage"></div>
|
||||
<input type="text" class="dialog-input" id="dialogInput" hidden />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-sm" id="dialogCancel">取消</button>
|
||||
<button class="btn-sm btn-primary" id="dialogOk">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="vendor/marked.min.js"></script>
|
||||
<script src="vendor/purify.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,652 @@
|
||||
/* ============ Themes ============ */
|
||||
:root {
|
||||
--radius: 14px;
|
||||
--radius-sm: 9px;
|
||||
--transition: 0.18s ease;
|
||||
--grad: linear-gradient(135deg, #7b5cff 0%, #4a9eff 100%);
|
||||
--grad-soft: linear-gradient(135deg, rgba(123,92,255,0.18), rgba(74,158,255,0.18));
|
||||
--shadow: 0 8px 28px rgba(0,0,0,0.28);
|
||||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
|
||||
--mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--bg: #14151b;
|
||||
--bg-2: #1c1d26;
|
||||
--bg-3: #262833;
|
||||
--bg-4: #2e313f;
|
||||
--bg-hover: #32344370;
|
||||
--surface: #1f2030;
|
||||
--border: #313447;
|
||||
--border-soft: #2a2c3a;
|
||||
--text: #ecedf2;
|
||||
--text-dim: #a2a4b4;
|
||||
--text-faint: #6c6e80;
|
||||
--accent: #7b5cff;
|
||||
--accent-2: #4a9eff;
|
||||
--danger: #ef5d6a;
|
||||
--user-bubble: #2b3354;
|
||||
--code-bg: #16161e;
|
||||
--reasoning-bg: rgba(123,92,255,0.06);
|
||||
--reasoning-border: rgba(123,92,255,0.22);
|
||||
--reasoning-text: #b9a7e6;
|
||||
--scrollbar: #3a3d50;
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg: #f4f5fa;
|
||||
--bg-2: #ffffff;
|
||||
--bg-3: #eef0f7;
|
||||
--bg-4: #e6e9f3;
|
||||
--bg-hover: #e3e6f0;
|
||||
--surface: #ffffff;
|
||||
--border: #e0e3ee;
|
||||
--border-soft: #eceef5;
|
||||
--text: #1c1e2a;
|
||||
--text-dim: #62677c;
|
||||
--text-faint: #9aa0b4;
|
||||
--accent: #6b4cff;
|
||||
--accent-2: #2f8fff;
|
||||
--danger: #e0455a;
|
||||
--user-bubble: #e7ebff;
|
||||
--code-bg: #f0f1f7;
|
||||
--reasoning-bg: rgba(107,76,255,0.05);
|
||||
--reasoning-border: rgba(107,76,255,0.2);
|
||||
--reasoning-text: #6d5ac4;
|
||||
--scrollbar: #cfd4e2;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
#app { display: flex; height: 100vh; }
|
||||
|
||||
/* ============ Sidebar ============ */
|
||||
.sidebar {
|
||||
width: 264px;
|
||||
min-width: 264px;
|
||||
background: var(--bg-2);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 16px 16px 12px;
|
||||
}
|
||||
.brand-logo {
|
||||
font-size: 22px;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 2px 6px rgba(123,92,255,0.5));
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
flex: 1;
|
||||
}
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
.sidebar-actions { padding: 4px 12px 10px; }
|
||||
.btn-new {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
background: var(--grad);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 14px rgba(123,92,255,0.32);
|
||||
}
|
||||
.btn-new:hover { filter: brightness(1.08); transform: translateY(-1px); }
|
||||
.search-wrap { margin-top: 10px; }
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 8px 11px;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.search-input:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
|
||||
|
||||
.conversation-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
|
||||
.conv-item {
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
margin-bottom: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: background var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
.conv-item:hover { background: var(--bg-hover); }
|
||||
.conv-item.active { background: var(--grad-soft); }
|
||||
.conv-item.active::before {
|
||||
content: '';
|
||||
position: absolute; left: 0; top: 22%; bottom: 22%;
|
||||
width: 3px; border-radius: 3px;
|
||||
background: var(--grad);
|
||||
}
|
||||
.conv-main { flex: 1; min-width: 0; }
|
||||
.conv-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13.5px;
|
||||
color: var(--text);
|
||||
}
|
||||
.conv-time { font-size: 11px; color: var(--text-faint); }
|
||||
.conv-del {
|
||||
opacity: 0;
|
||||
background: none; border: none;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer; font-size: 15px;
|
||||
padding: 2px 5px; border-radius: 5px;
|
||||
flex-shrink: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.conv-item:hover .conv-del { opacity: 1; }
|
||||
.conv-del:hover { color: var(--danger); background: var(--bg-hover); }
|
||||
|
||||
.sidebar-footer { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
|
||||
.btn-footer {
|
||||
width: 100%;
|
||||
padding: 9px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: var(--transition);
|
||||
text-align: left;
|
||||
}
|
||||
.btn-footer:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.btn-footer.danger:hover { color: var(--danger); border-color: var(--danger); }
|
||||
|
||||
/* ============ Main ============ */
|
||||
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
.topbar {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
flex-shrink: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
.topbar-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
|
||||
.topbar-title {
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.conv-menu-wrap { position: relative; flex-shrink: 0; }
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px); right: 0;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow);
|
||||
min-width: 168px;
|
||||
padding: 5px;
|
||||
z-index: 50;
|
||||
animation: fadeIn 0.12s ease;
|
||||
}
|
||||
.dropdown-menu[hidden] { display: none; }
|
||||
.dropdown-item {
|
||||
display: block; width: 100%;
|
||||
padding: 8px 11px;
|
||||
background: none; border: none;
|
||||
color: var(--text); cursor: pointer;
|
||||
font-size: 13px; text-align: left;
|
||||
border-radius: 6px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.dropdown-item:hover { background: var(--bg-hover); }
|
||||
.dropdown-item.danger:hover { background: rgba(239,93,106,0.12); color: var(--danger); }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
|
||||
.stepper { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
|
||||
.stepper-label { user-select: none; }
|
||||
.step-btn {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-3);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.step-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.step-val { min-width: 16px; text-align: center; font-weight: 600; color: var(--text); }
|
||||
|
||||
.thinking-toggle {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-size: 12.5px; color: var(--text-dim);
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
.thinking-toggle input { cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; }
|
||||
|
||||
.effort-seg {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 3px;
|
||||
}
|
||||
.effort-label { font-size: 12px; color: var(--text-dim); padding: 0 6px 0 4px; user-select: none; }
|
||||
.effort-opt {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
user-select: none;
|
||||
}
|
||||
.effort-opt:hover { color: var(--text); }
|
||||
.effort-opt.active {
|
||||
background: var(--grad);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 6px rgba(123,92,255,0.35);
|
||||
}
|
||||
|
||||
.model-select {
|
||||
padding: 7px 11px;
|
||||
background: var(--bg-3);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
max-width: 230px;
|
||||
}
|
||||
.model-select:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
/* ============ Messages ============ */
|
||||
.messages-wrap { flex: 1; position: relative; min-height: 0; }
|
||||
.messages { height: 100%; overflow-y: auto; padding: 22px 0 8px; scroll-behavior: smooth; }
|
||||
|
||||
.message {
|
||||
max-width: 820px;
|
||||
margin: 0 auto 24px;
|
||||
padding: 0 24px;
|
||||
user-select: text;
|
||||
position: relative;
|
||||
}
|
||||
.message-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.message-role {
|
||||
font-size: 12px; font-weight: 700;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.message-role .avatar {
|
||||
width: 22px; height: 22px; border-radius: 7px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; color: #fff; font-weight: 700;
|
||||
}
|
||||
.message.user .avatar { background: var(--accent-2); }
|
||||
.message.assistant .avatar { background: var(--grad); }
|
||||
.message-role-name { color: var(--text-dim); font-size: 12.5px; }
|
||||
.msg-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: var(--transition); }
|
||||
.message:hover .msg-actions { opacity: 1; }
|
||||
.msg-action {
|
||||
background: var(--bg-3); border: 1px solid var(--border);
|
||||
color: var(--text-dim); cursor: pointer;
|
||||
font-size: 11px; padding: 3px 9px; border-radius: 6px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.msg-action:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
|
||||
.message.user .message-body {
|
||||
background: var(--user-bubble);
|
||||
border-radius: 14px;
|
||||
padding: 11px 15px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.message.assistant .message-body {
|
||||
line-height: 1.75;
|
||||
word-wrap: break-word;
|
||||
user-select: text;
|
||||
}
|
||||
.message.assistant .message-body.streaming-text { white-space: pre-wrap; }
|
||||
|
||||
.msg-stats {
|
||||
margin-top: 8px;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--mono);
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* reasoning */
|
||||
.reasoning {
|
||||
background: var(--reasoning-bg);
|
||||
border: 1px solid var(--reasoning-border);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.reasoning-header {
|
||||
padding: 8px 12px;
|
||||
font-size: 12.5px;
|
||||
color: var(--reasoning-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
user-select: none;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.reasoning-header:hover { background: rgba(123,92,255,0.06); }
|
||||
.reasoning-header .arrow { transition: transform var(--transition); font-size: 9px; }
|
||||
.reasoning.collapsed .arrow { transform: rotate(-90deg); }
|
||||
.reasoning-header .dot {
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--accent); animation: pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
.reasoning.done .dot { animation: none; background: var(--text-faint); }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
|
||||
.reasoning-body {
|
||||
padding: 4px 12px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.65;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--reasoning-border);
|
||||
margin-top: 4px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.reasoning.collapsed .reasoning-body { display: none; }
|
||||
|
||||
.cursor-blink::after { content: '▋'; animation: blink 1s step-end infinite; color: var(--accent); margin-left: 1px; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
margin-top: 12vh;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.empty-state .empty-logo {
|
||||
font-size: 46px;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
filter: drop-shadow(0 6px 18px rgba(123,92,255,0.4));
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.empty-state h2 { font-size: 22px; margin-bottom: 8px; color: var(--text); font-weight: 700; }
|
||||
.empty-state p { color: var(--text-faint); font-size: 14px; }
|
||||
|
||||
.error-box {
|
||||
max-width: 820px;
|
||||
margin: 0 auto 16px;
|
||||
padding: 12px 15px;
|
||||
background: rgba(239,93,106,0.1);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* ============ Markdown styling ============ */
|
||||
.md > *:first-child { margin-top: 0; }
|
||||
.md > *:last-child { margin-bottom: 0; }
|
||||
.md p { margin: 0 0 12px; }
|
||||
.md h1,.md h2,.md h3,.md h4 { margin: 18px 0 10px; font-weight: 700; line-height: 1.3; }
|
||||
.md h1 { font-size: 1.5em; } .md h2 { font-size: 1.3em; } .md h3 { font-size: 1.15em; }
|
||||
.md ul,.md ol { margin: 0 0 12px; padding-left: 24px; }
|
||||
.md li { margin: 4px 0; }
|
||||
.md a { color: var(--accent-2); text-decoration: none; }
|
||||
.md a:hover { text-decoration: underline; }
|
||||
.md blockquote {
|
||||
margin: 0 0 12px; padding: 8px 14px;
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--bg-3); border-radius: 0 8px 8px 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.md code {
|
||||
font-family: var(--mono);
|
||||
background: var(--code-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.md pre {
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 14px 16px;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 12px;
|
||||
position: relative;
|
||||
}
|
||||
.md pre code { background: none; padding: 0; font-size: 0.86em; line-height: 1.55; }
|
||||
.md table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; }
|
||||
.md th,.md td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; }
|
||||
.md th { background: var(--bg-3); font-weight: 600; }
|
||||
.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
|
||||
|
||||
/* ============ Composer ============ */
|
||||
.composer {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 24px 16px;
|
||||
background: var(--bg);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.composer-inner {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 9px 10px 9px 16px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.composer-inner:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,92,255,0.15); }
|
||||
.input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
max-height: 220px;
|
||||
line-height: 1.55;
|
||||
outline: none;
|
||||
user-select: text;
|
||||
}
|
||||
.input::placeholder { color: var(--text-faint); }
|
||||
.composer-side { display: flex; align-items: center; gap: 10px; }
|
||||
.char-count { font-size: 11px; color: var(--text-faint); min-width: 28px; text-align: right; }
|
||||
.btn-send, .btn-stop {
|
||||
padding: 9px 20px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.btn-send { background: var(--grad); color: #fff; box-shadow: 0 3px 12px rgba(123,92,255,0.3); }
|
||||
.btn-send:hover { filter: brightness(1.08); }
|
||||
.btn-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
|
||||
.btn-stop { background: var(--danger); color: #fff; }
|
||||
.btn-stop:hover { filter: brightness(1.08); }
|
||||
.composer-hint { max-width: 820px; margin: 6px auto 0; font-size: 11px; color: var(--text-faint); min-height: 14px; }
|
||||
|
||||
/* scroll to bottom */
|
||||
.scroll-bottom-btn {
|
||||
position: absolute;
|
||||
right: 28px; bottom: 14px;
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-2);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: var(--transition);
|
||||
z-index: 5;
|
||||
}
|
||||
.scroll-bottom-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
|
||||
|
||||
/* ============ Modal ============ */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.55);
|
||||
backdrop-filter: blur(3px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
.modal-overlay[hidden] { display: none; }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.modal {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
width: 620px; max-width: 92vw; max-height: 88vh;
|
||||
display: flex; flex-direction: column;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.modal-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modal-header h2 { font-size: 16px; font-weight: 700; }
|
||||
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 26px; cursor: pointer; line-height: 1; }
|
||||
.modal-close:hover { color: var(--text); }
|
||||
.modal-body { padding: 20px; overflow-y: auto; }
|
||||
.provider-toolbar { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; }
|
||||
.provider-select {
|
||||
flex: 1; padding: 8px 10px;
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
}
|
||||
.provider-select:focus { outline: none; border-color: var(--accent); }
|
||||
.btn-sm {
|
||||
padding: 8px 14px;
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||
cursor: pointer; font-size: 13px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.btn-sm:hover { background: var(--bg-hover); }
|
||||
.btn-sm.btn-primary { background: var(--grad); border: none; color: #fff; box-shadow: 0 3px 10px rgba(123,92,255,0.28); }
|
||||
.btn-sm.btn-primary:hover { filter: brightness(1.08); }
|
||||
.btn-sm.btn-danger { color: var(--danger); }
|
||||
.btn-sm.btn-danger:hover { background: rgba(239,93,106,0.12); }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||||
.field > span { font-size: 12px; color: var(--text-dim); }
|
||||
.field input, .field textarea {
|
||||
padding: 9px 11px;
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||
font-size: 13px; font-family: inherit; resize: vertical;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
|
||||
.field-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
|
||||
.hint { font-size: 12px; color: var(--text-dim); }
|
||||
.hint.ok { color: #3ec77a; }
|
||||
.hint.err { color: var(--danger); }
|
||||
|
||||
/* toast */
|
||||
.toast {
|
||||
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
|
||||
background: var(--bg-4); color: var(--text);
|
||||
padding: 10px 20px; border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 13px;
|
||||
z-index: 200;
|
||||
opacity: 0; transition: all 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
.toast[hidden] { display: none; }
|
||||
|
||||
.dialog-modal { width: 420px; max-width: 92vw; }
|
||||
.dialog-message { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
|
||||
.dialog-input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
padding: 9px 11px;
|
||||
background: var(--bg-3); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
}
|
||||
.dialog-input:focus { outline: none; border-color: var(--accent); }
|
||||
.modal-footer {
|
||||
display: flex; justify-content: flex-end; gap: 8px;
|
||||
padding: 14px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
|
||||
Vendored
+79
File diff suppressed because one or more lines are too long
Vendored
+3
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user