feat(M3): AI 续写/润色/摘要/问答、Hono 代理、模型管理窗口
- 新增 Hono 代理服务（server/index.ts，端口 3001），SSE 流式转发 Claude API - 新增 src/lib/ai.ts：streamAI() 封装 fetch + ReadableStream + AbortController - 新增 AI 面板（AiPanel.tsx）：流式聊天问答、全文摘要、停止按钮 - 新增模型管理弹窗（ModelSettingsModal.tsx）：增删模型、切换激活模型 - 编辑器新增 AI 续写（⚡）和面板切换（✨）按钮 - 浮动工具栏新增润色（Wand2）和摘要（FileText）按钮，结果预览 Modal 支持一键替换 - appStore 新增 aiPanelOpen + toggleAiPanel - vite.config.ts 添加 /api 代理到 localhost:3001 - index.css 添加 .ai-cursor 光标动画 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MikiVL
parent
56b59269f4
commit
d632e9f6f7
1
.env.example
Normal file
1
.env.example
Normal file
@ -0,0 +1 @@
|
||||
ANTHROPIC_API_KEY=sk-ant-your-key-here
|
||||
913
package-lock.json
generated
913
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -4,14 +4,18 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "concurrently -n client,server -c cyan,yellow \"vite\" \"tsx --watch server/index.ts\"",
|
||||
"dev:client": "vite",
|
||||
"dev:server": "tsx --watch server/index.ts",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@anthropic-ai/sdk": "^0.92.0",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hono/node-server": "^2.0.1",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
@ -44,7 +48,9 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dexie": "^4.4.2",
|
||||
"dotenv": "^17.4.2",
|
||||
"framer-motion": "^12.38.0",
|
||||
"hono": "^4.12.16",
|
||||
"lowlight": "^3.3.0",
|
||||
"lucide-react": "^1.14.0",
|
||||
"react": "^19.2.5",
|
||||
@ -60,12 +66,14 @@
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"autoprefixer": "^10.5.0",
|
||||
"concurrently": "^9.2.1",
|
||||
"eslint": "^10.2.1",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.5.0",
|
||||
"postcss": "^8.5.13",
|
||||
"tailwindcss": "^4.2.4",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~6.0.2",
|
||||
"typescript-eslint": "^8.58.2",
|
||||
"vite": "^8.0.10"
|
||||
|
||||
192
server/index.ts
Normal file
192
server/index.ts
Normal file
@ -0,0 +1,192 @@
|
||||
import 'dotenv/config'
|
||||
import { Hono } from 'hono'
|
||||
import { serve } from '@hono/node-server'
|
||||
import { cors } from 'hono/cors'
|
||||
import Anthropic from '@anthropic-ai/sdk'
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
const app = new Hono()
|
||||
app.use('*', cors())
|
||||
|
||||
// ── Model config persistence ──────────────────────────────────────────────────
|
||||
const MODELS_FILE = path.resolve('models.json')
|
||||
|
||||
type ModelConfig = {
|
||||
id: string
|
||||
name: string
|
||||
apiKey: string
|
||||
baseURL: string
|
||||
modelId?: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
function readModels(): ModelConfig[] {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(MODELS_FILE, 'utf-8')) as ModelConfig[]
|
||||
} catch {
|
||||
// First run: seed from .env
|
||||
const defaults: ModelConfig[] = [
|
||||
{
|
||||
id: 'default',
|
||||
name: 'Claude Sonnet 4.6',
|
||||
apiKey: process.env.ANTHROPIC_API_KEY ?? '',
|
||||
baseURL: process.env.ANTHROPIC_BASE_URL ?? 'https://api.anthropic.com',
|
||||
isActive: true,
|
||||
},
|
||||
]
|
||||
fs.writeFileSync(MODELS_FILE, JSON.stringify(defaults, null, 2))
|
||||
return defaults
|
||||
}
|
||||
}
|
||||
|
||||
function writeModels(models: ModelConfig[]) {
|
||||
fs.writeFileSync(MODELS_FILE, JSON.stringify(models, null, 2))
|
||||
}
|
||||
|
||||
function getActiveClient(): Anthropic {
|
||||
const models = readModels()
|
||||
const active = models.find(m => m.isActive) ?? models[0]
|
||||
return new Anthropic({ apiKey: active.apiKey, baseURL: active.baseURL })
|
||||
}
|
||||
|
||||
function getActiveModel(): string {
|
||||
const models = readModels()
|
||||
const active = models.find(m => m.isActive) ?? models[0]
|
||||
// model id stored in name field as identifier; use a known default if not specified
|
||||
return active.modelId ?? 'claude-sonnet-4-6'
|
||||
}
|
||||
|
||||
// ── Model CRUD endpoints ──────────────────────────────────────────────────────
|
||||
app.get('/api/models', (c) => {
|
||||
const models = readModels()
|
||||
// strip apiKey from response for security
|
||||
return c.json(models.map(({ apiKey: _, ...rest }) => rest))
|
||||
})
|
||||
|
||||
app.post('/api/models', async (c) => {
|
||||
const body = await c.req.json<{ name: string; apiKey: string; baseURL: string; modelId?: string }>()
|
||||
const models = readModels()
|
||||
const newModel: ModelConfig = {
|
||||
id: crypto.randomUUID(),
|
||||
name: body.name.trim(),
|
||||
apiKey: body.apiKey.trim(),
|
||||
baseURL: body.baseURL.trim(),
|
||||
isActive: false,
|
||||
...(body.modelId ? { modelId: body.modelId.trim() } : {}),
|
||||
}
|
||||
models.push(newModel)
|
||||
writeModels(models)
|
||||
const { apiKey: _, ...safe } = newModel
|
||||
return c.json(safe)
|
||||
})
|
||||
|
||||
app.patch('/api/models/:id/activate', (c) => {
|
||||
const { id } = c.req.param()
|
||||
const models = readModels()
|
||||
models.forEach(m => { m.isActive = m.id === id })
|
||||
writeModels(models)
|
||||
return c.json({ ok: true })
|
||||
})
|
||||
|
||||
app.delete('/api/models/:id', (c) => {
|
||||
const { id } = c.req.param()
|
||||
let models = readModels()
|
||||
const target = models.find(m => m.id === id)
|
||||
if (!target) return c.json({ error: 'not found' }, 404)
|
||||
if (models.length === 1) return c.json({ error: 'cannot delete last model' }, 400)
|
||||
const wasActive = target.isActive
|
||||
models = models.filter(m => m.id !== id)
|
||||
if (wasActive) models[0].isActive = true
|
||||
writeModels(models)
|
||||
return c.json({ ok: true })
|
||||
})
|
||||
|
||||
// ── AI types ──────────────────────────────────────────────────────────────────
|
||||
type AIStreamRequest = {
|
||||
type: 'continue' | 'polish' | 'summarize' | 'chat'
|
||||
noteContent: string
|
||||
selection?: string
|
||||
messages?: { role: 'user' | 'assistant'; content: string }[]
|
||||
userMessage?: string
|
||||
}
|
||||
|
||||
function buildMessages(req: AIStreamRequest): Anthropic.MessageParam[] {
|
||||
const { type, noteContent, selection, messages, userMessage } = req
|
||||
|
||||
if (type === 'chat') {
|
||||
const history: Anthropic.MessageParam[] = (messages ?? []).map(m => ({
|
||||
role: m.role,
|
||||
content: m.content,
|
||||
}))
|
||||
if (userMessage) history.push({ role: 'user', content: userMessage })
|
||||
return history
|
||||
}
|
||||
|
||||
if (type === 'continue') {
|
||||
return [{ role: 'user', content: `请基于以下笔记内容，从最后一段自然地续写下去，风格保持一致，直接输出续写内容，不要重复原文：\n\n${noteContent}` }]
|
||||
}
|
||||
|
||||
if (type === 'polish') {
|
||||
return [{ role: 'user', content: `请润色以下文字，改善语法、流畅度和表达，保持原意，直接输出润色后的结果，不要有任何解释：\n\n${selection ?? noteContent}` }]
|
||||
}
|
||||
|
||||
return [{ role: 'user', content: `请为以下内容提炼要点摘要，用简洁的中文输出，不超过 150 字：\n\n${selection ?? noteContent}` }]
|
||||
}
|
||||
|
||||
function buildSystemPrompt(type: AIStreamRequest['type'], noteContent: string): string {
|
||||
if (type === 'chat') {
|
||||
return `你是一个智能笔记助手。用户正在阅读以下笔记，请根据笔记内容回答用户的问题，回答要简洁、准确：\n\n---\n${noteContent}\n---`
|
||||
}
|
||||
return '你是一个专业的写作助手，擅长中英文写作、润色和摘要。直接输出结果，不要加多余的说明。'
|
||||
}
|
||||
|
||||
// ── Stream endpoint ───────────────────────────────────────────────────────────
|
||||
app.post('/api/ai/stream', async (c) => {
|
||||
const req = await c.req.json<AIStreamRequest>()
|
||||
const aiClient = getActiveClient()
|
||||
const modelId = getActiveModel()
|
||||
|
||||
const stream = await aiClient.messages.stream({
|
||||
model: modelId,
|
||||
max_tokens: 1024,
|
||||
system: buildSystemPrompt(req.type, req.noteContent),
|
||||
messages: buildMessages(req),
|
||||
})
|
||||
|
||||
return new Response(
|
||||
new ReadableStream({
|
||||
async start(controller) {
|
||||
const encoder = new TextEncoder()
|
||||
try {
|
||||
for await (const event of stream) {
|
||||
if (
|
||||
event.type === 'content_block_delta' &&
|
||||
event.delta.type === 'text_delta'
|
||||
) {
|
||||
const data = JSON.stringify({ delta: event.delta.text })
|
||||
controller.enqueue(encoder.encode(`data: ${data}\n\n`))
|
||||
}
|
||||
}
|
||||
controller.enqueue(encoder.encode('data: [DONE]\n\n'))
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'Unknown error'
|
||||
controller.enqueue(encoder.encode(`data: {"error":"${msg}"}\n\n`))
|
||||
} finally {
|
||||
controller.close()
|
||||
}
|
||||
},
|
||||
}),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache',
|
||||
Connection: 'keep-alive',
|
||||
},
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
serve({ fetch: app.fetch, port: 3001 }, () => {
|
||||
console.log('AI proxy server running on http://localhost:3001')
|
||||
})
|
||||
13
server/tsconfig.json
Normal file
13
server/tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2022",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2022"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["index.ts"]
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Sidebar } from './components/sidebar/Sidebar'
|
||||
import { Editor } from './components/editor/Editor'
|
||||
import { AiPanel } from './components/ai/AiPanel'
|
||||
import { useAppStore } from './stores/appStore'
|
||||
import { seedIfEmpty, deduplicateDB } from './db'
|
||||
|
||||
export default function App() {
|
||||
const { loadAll, theme, focusMode } = useAppStore()
|
||||
const { loadAll, theme, focusMode, aiPanelOpen } = useAppStore()
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
@ -23,6 +24,7 @@ export default function App() {
|
||||
<Sidebar />
|
||||
</div>
|
||||
<Editor />
|
||||
{aiPanelOpen && !focusMode && <AiPanel />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
206
src/components/ai/AiPanel.tsx
Normal file
206
src/components/ai/AiPanel.tsx
Normal file
@ -0,0 +1,206 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { X, Send, Sparkles, Square, FileText } from 'lucide-react'
|
||||
import { useAppStore } from '../../stores/appStore'
|
||||
import { streamAI } from '../../lib/ai'
|
||||
import { extractTextFromJSON } from '../../lib/utils'
|
||||
|
||||
type Message = { role: 'user' | 'assistant'; content: string }
|
||||
|
||||
export function AiPanel() {
|
||||
const { toggleAiPanel, notes, activeNoteId } = useAppStore()
|
||||
const activeNote = notes.find(n => n.id === activeNoteId)
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([])
|
||||
const [input, setInput] = useState('')
|
||||
const [streaming, setStreaming] = useState(false)
|
||||
const abortRef = useRef<AbortController | null>(null)
|
||||
const bottomRef = useRef<HTMLDivElement | null>(null)
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [messages])
|
||||
|
||||
const noteContent = activeNote
|
||||
? `标题：${activeNote.title}\n\n${extractTextFromJSON(activeNote.content)}`
|
||||
: ''
|
||||
|
||||
const send = async (text: string) => {
|
||||
if (!text.trim() || streaming) return
|
||||
const userMsg: Message = { role: 'user', content: text.trim() }
|
||||
const assistantMsg: Message = { role: 'assistant', content: '' }
|
||||
|
||||
setMessages(prev => [...prev, userMsg, assistantMsg])
|
||||
setInput('')
|
||||
setStreaming(true)
|
||||
|
||||
const controller = new AbortController()
|
||||
abortRef.current = controller
|
||||
|
||||
try {
|
||||
await streamAI(
|
||||
{
|
||||
type: 'chat',
|
||||
noteContent,
|
||||
messages: messages.concat(userMsg),
|
||||
userMessage: userMsg.content,
|
||||
},
|
||||
(chunk) => {
|
||||
setMessages(prev => {
|
||||
const next = [...prev]
|
||||
next[next.length - 1] = {
|
||||
...next[next.length - 1],
|
||||
content: next[next.length - 1].content + chunk,
|
||||
}
|
||||
return next
|
||||
})
|
||||
},
|
||||
controller.signal,
|
||||
)
|
||||
} catch (e) {
|
||||
if ((e as Error).name !== 'AbortError') {
|
||||
setMessages(prev => {
|
||||
const next = [...prev]
|
||||
next[next.length - 1] = { role: 'assistant', content: '❌ 请求失败，请检查 API Key 和网络连接。' }
|
||||
return next
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
setStreaming(false)
|
||||
abortRef.current = null
|
||||
}
|
||||
}
|
||||
|
||||
const summarize = () => {
|
||||
if (!noteContent) return
|
||||
send('请为当前笔记生成一份简洁的摘要。')
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
abortRef.current?.abort()
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col h-full shrink-0"
|
||||
style={{ width: 320, borderLeft: '1px solid var(--border)', background: 'var(--bg-subtle)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between px-4 py-3 shrink-0"
|
||||
style={{ borderBottom: '1px solid var(--border)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={15} style={{ color: 'var(--accent)' }} />
|
||||
<span className="font-semibold text-sm" style={{ color: 'var(--text)' }}>AI 助手</span>
|
||||
</div>
|
||||
<button onClick={toggleAiPanel} className="toolbar-btn" title="关闭">
|
||||
<X size={15} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Quick actions */}
|
||||
<div className="px-3 py-2 shrink-0" style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<button
|
||||
onClick={summarize}
|
||||
disabled={!activeNote || streaming}
|
||||
className="w-full flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors"
|
||||
style={{
|
||||
background: 'var(--bg-muted)',
|
||||
border: '1px solid var(--border)',
|
||||
color: activeNote ? 'var(--text)' : 'var(--text-faint)',
|
||||
cursor: activeNote ? 'pointer' : 'not-allowed',
|
||||
}}
|
||||
onMouseEnter={e => { if (activeNote) e.currentTarget.style.background = 'var(--accent-subtle)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-muted)' }}
|
||||
>
|
||||
<FileText size={13} style={{ color: 'var(--accent)' }} />
|
||||
摘要当前笔记
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto px-3 py-3 space-y-3">
|
||||
{messages.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-2 text-center">
|
||||
<Sparkles size={28} style={{ color: 'var(--text-faint)', opacity: 0.5 }} />
|
||||
<p className="text-xs" style={{ color: 'var(--text-faint)' }}>
|
||||
{activeNote ? '向 AI 提问，或点击上方按钮生成摘要' : '请先打开一篇笔记'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{messages.map((msg, i) => (
|
||||
<div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div
|
||||
className="max-w-[85%] rounded-2xl px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap break-words"
|
||||
style={{
|
||||
background: msg.role === 'user' ? 'var(--accent)' : 'var(--bg-muted)',
|
||||
color: msg.role === 'user' ? '#fff' : 'var(--text)',
|
||||
borderBottomRightRadius: msg.role === 'user' ? 4 : undefined,
|
||||
borderBottomLeftRadius: msg.role === 'assistant' ? 4 : undefined,
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
{streaming && i === messages.length - 1 && msg.role === 'assistant' && (
|
||||
<span className="ai-cursor" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div
|
||||
className="px-3 py-2 shrink-0 flex items-end gap-2"
|
||||
style={{ borderTop: '1px solid var(--border)' }}
|
||||
>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
send(input)
|
||||
}
|
||||
}}
|
||||
placeholder={activeNote ? '向 AI 提问…' : '请先打开笔记'}
|
||||
disabled={!activeNote}
|
||||
rows={1}
|
||||
className="flex-1 resize-none rounded-xl px-3 py-2 text-sm outline-none"
|
||||
style={{
|
||||
background: 'var(--bg-muted)',
|
||||
border: '1px solid var(--border)',
|
||||
color: 'var(--text)',
|
||||
maxHeight: 120,
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
/>
|
||||
{streaming ? (
|
||||
<button
|
||||
onClick={stop}
|
||||
className="shrink-0 flex items-center justify-center w-8 h-8 rounded-xl transition-colors"
|
||||
style={{ background: '#ef4444', color: '#fff' }}
|
||||
title="停止"
|
||||
>
|
||||
<Square size={13} fill="currentColor" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => send(input)}
|
||||
disabled={!input.trim() || !activeNote}
|
||||
className="shrink-0 flex items-center justify-center w-8 h-8 rounded-xl transition-colors"
|
||||
style={{
|
||||
background: input.trim() && activeNote ? 'var(--accent)' : 'var(--bg-muted)',
|
||||
color: input.trim() && activeNote ? '#fff' : 'var(--text-faint)',
|
||||
}}
|
||||
title="发送"
|
||||
>
|
||||
<Send size={13} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
216
src/components/ai/ModelSettingsModal.tsx
Normal file
216
src/components/ai/ModelSettingsModal.tsx
Normal file
@ -0,0 +1,216 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, Plus, Check, Trash2, Bot, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
|
||||
type ModelInfo = {
|
||||
id: string
|
||||
name: string
|
||||
baseURL: string
|
||||
modelId?: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export function ModelSettingsModal({ onClose }: { onClose: () => void }) {
|
||||
const [models, setModels] = useState<ModelInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [adding, setAdding] = useState(false)
|
||||
const [form, setForm] = useState({ name: '', apiKey: '', baseURL: '', modelId: '' })
|
||||
const [formError, setFormError] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/models')
|
||||
setModels(await res.json())
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { fetchModels() }, [])
|
||||
|
||||
const activate = async (id: string) => {
|
||||
await fetch(`/api/models/${id}/activate`, { method: 'PATCH' })
|
||||
setModels(prev => prev.map(m => ({ ...m, isActive: m.id === id })))
|
||||
}
|
||||
|
||||
const remove = async (id: string) => {
|
||||
const res = await fetch(`/api/models/${id}`, { method: 'DELETE' })
|
||||
if (res.ok) setModels(prev => {
|
||||
const next = prev.filter(m => m.id !== id)
|
||||
if (prev.find(m => m.id === id)?.isActive && next.length > 0) next[0].isActive = true
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!form.name.trim()) { setFormError('请输入名称'); return }
|
||||
if (!form.apiKey.trim()) { setFormError('请输入 API Key'); return }
|
||||
if (!form.baseURL.trim()) { setFormError('请输入 Base URL'); return }
|
||||
setFormError('')
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch('/api/models', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
})
|
||||
const model = await res.json()
|
||||
setModels(prev => [...prev, model])
|
||||
setForm({ name: '', apiKey: '', baseURL: '', modelId: '' })
|
||||
setAdding(false)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const activeModel = models.find(m => m.isActive)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
style={{ background: 'rgba(0,0,0,0.45)' }}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl flex flex-col"
|
||||
style={{ background: 'var(--bg)', border: '1px solid var(--border)', width: 480, maxHeight: '80vh' }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 shrink-0" style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot size={16} style={{ color: 'var(--accent)' }} />
|
||||
<span className="font-semibold text-sm" style={{ color: 'var(--text)' }}>AI 模型管理</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="toolbar-btn"><X size={15} /></button>
|
||||
</div>
|
||||
|
||||
{/* Active model badge */}
|
||||
{activeModel && (
|
||||
<div className="px-5 py-3 shrink-0" style={{ borderBottom: '1px solid var(--border)', background: 'var(--bg-subtle)' }}>
|
||||
<p className="text-xs" style={{ color: 'var(--text-faint)' }}>当前使用</p>
|
||||
<p className="text-sm font-medium mt-0.5" style={{ color: 'var(--accent)' }}>{activeModel.name}</p>
|
||||
{activeModel.baseURL && (
|
||||
<p className="text-xs mt-0.5 truncate" style={{ color: 'var(--text-faint)' }}>{activeModel.baseURL}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Model list */}
|
||||
<div className="flex-1 overflow-y-auto px-5 py-3 space-y-2">
|
||||
{loading && <p className="text-sm text-center py-4" style={{ color: 'var(--text-faint)' }}>加载中…</p>}
|
||||
{models.map(model => (
|
||||
<div
|
||||
key={model.id}
|
||||
className="rounded-xl"
|
||||
style={{ border: `1px solid ${model.isActive ? 'var(--accent)' : 'var(--border)'}`, background: model.isActive ? 'var(--accent-subtle)' : 'var(--bg-subtle)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate" style={{ color: 'var(--text)' }}>{model.name}</span>
|
||||
{model.isActive && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded-full" style={{ background: 'var(--accent)', color: '#fff' }}>使用中</span>
|
||||
)}
|
||||
</div>
|
||||
{model.modelId && (
|
||||
<p className="text-xs mt-0.5 truncate" style={{ color: 'var(--text-faint)' }}>Model ID: {model.modelId}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
className="toolbar-btn"
|
||||
title="展开详情"
|
||||
onClick={() => setExpandedId(expandedId === model.id ? null : model.id)}
|
||||
>
|
||||
{expandedId === model.id ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
|
||||
</button>
|
||||
{!model.isActive && (
|
||||
<button
|
||||
className="toolbar-btn"
|
||||
title="设为当前模型"
|
||||
onClick={() => activate(model.id)}
|
||||
>
|
||||
<Check size={13} style={{ color: 'var(--accent)' }} />
|
||||
</button>
|
||||
)}
|
||||
{models.length > 1 && (
|
||||
<button
|
||||
className="toolbar-btn"
|
||||
title="删除"
|
||||
onClick={() => remove(model.id)}
|
||||
>
|
||||
<Trash2 size={13} style={{ color: '#ef4444' }} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{expandedId === model.id && (
|
||||
<div className="px-4 pb-3" style={{ borderTop: '1px solid var(--border)' }}>
|
||||
<p className="text-xs mt-2" style={{ color: 'var(--text-faint)' }}>Base URL</p>
|
||||
<p className="text-xs mt-0.5 break-all" style={{ color: 'var(--text-muted)' }}>{model.baseURL || '—'}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add model */}
|
||||
<div className="px-5 py-3 shrink-0" style={{ borderTop: '1px solid var(--border)' }}>
|
||||
{!adding ? (
|
||||
<button
|
||||
onClick={() => setAdding(true)}
|
||||
className="w-full flex items-center justify-center gap-2 py-2 rounded-xl text-sm"
|
||||
style={{ border: '1px dashed var(--border)', color: 'var(--text-muted)' }}
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text-muted)' }}
|
||||
>
|
||||
<Plus size={14} /> 添加模型
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold" style={{ color: 'var(--text-faint)' }}>添加新模型</p>
|
||||
{[
|
||||
{ key: 'name', label: '名称', placeholder: '如：GPT-4o' },
|
||||
{ key: 'apiKey', label: 'API Key', placeholder: 'sk-...' },
|
||||
{ key: 'baseURL', label: 'Base URL', placeholder: 'https://api.openai.com/v1' },
|
||||
{ key: 'modelId', label: 'Model ID（选填）', placeholder: 'gpt-4o' },
|
||||
].map(f => (
|
||||
<div key={f.key}>
|
||||
<label className="text-xs" style={{ color: 'var(--text-faint)' }}>{f.label}</label>
|
||||
<input
|
||||
type={f.key === 'apiKey' ? 'password' : 'text'}
|
||||
value={form[f.key as keyof typeof form]}
|
||||
onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
|
||||
placeholder={f.placeholder}
|
||||
className="w-full mt-0.5 px-3 py-1.5 rounded-lg text-sm outline-none"
|
||||
style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--text)' }}
|
||||
onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
|
||||
onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{formError && <p className="text-xs" style={{ color: '#ef4444' }}>{formError}</p>}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button
|
||||
onClick={() => { setAdding(false); setFormError(''); setForm({ name: '', apiKey: '', baseURL: '', modelId: '' }) }}
|
||||
className="flex-1 py-1.5 rounded-lg text-sm"
|
||||
style={{ color: 'var(--text-muted)', background: 'var(--bg-muted)' }}
|
||||
>取消</button>
|
||||
<button
|
||||
onClick={submit}
|
||||
disabled={saving}
|
||||
className="flex-1 py-1.5 rounded-lg text-sm font-medium"
|
||||
style={{ background: 'var(--accent)', color: '#fff' }}
|
||||
>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -23,9 +23,11 @@ import {
|
||||
Highlighter, List, ListOrdered, Quote,
|
||||
Heading1, Heading2, Heading3, Minus, CheckSquare, Table as TableIcon,
|
||||
Type, Star, ImageIcon, Maximize2, Minimize2, Hash, X,
|
||||
Sparkles, Zap, Wand2, FileText as FileTextIcon, Square,
|
||||
} from 'lucide-react'
|
||||
import { useAppStore } from '../../stores/appStore'
|
||||
import { countWords } from '../../lib/utils'
|
||||
import { streamAI } from '../../lib/ai'
|
||||
import { WelcomeView } from './WelcomeView'
|
||||
|
||||
const lowlight = createLowlight(common)
|
||||
@ -76,7 +78,7 @@ function SlashMenu({ items, selectedIndex, onSelect }: {
|
||||
}
|
||||
|
||||
export function Editor() {
|
||||
const { activeNoteId, notes, updateNote, toggleStar, focusMode, toggleFocusMode } = useAppStore()
|
||||
const { activeNoteId, notes, updateNote, toggleStar, focusMode, toggleFocusMode, toggleAiPanel, aiPanelOpen } = useAppStore()
|
||||
const activeNote = notes.find(n => n.id === activeNoteId)
|
||||
|
||||
const [title, setTitle] = useState(activeNote?.title ?? '')
|
||||
@ -84,6 +86,21 @@ export function Editor() {
|
||||
const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'unsaved'>('saved')
|
||||
const [tagInput, setTagInput] = useState('')
|
||||
|
||||
// AI continue state
|
||||
const [aiContinuing, setAiContinuing] = useState(false)
|
||||
const aiAbortRef = useRef<AbortController | null>(null)
|
||||
|
||||
// AI modal state
|
||||
const [aiModal, setAiModal] = useState<{
|
||||
type: 'polish' | 'summarize'
|
||||
from: number
|
||||
to: number
|
||||
selection: string
|
||||
result: string
|
||||
streaming: boolean
|
||||
} | null>(null)
|
||||
const aiModalAbortRef = useRef<AbortController | null>(null)
|
||||
|
||||
const [slashOpen, setSlashOpen] = useState(false)
|
||||
const [slashQuery, setSlashQuery] = useState('')
|
||||
const [slashIndex, setSlashIndex] = useState(0)
|
||||
@ -279,6 +296,49 @@ export function Editor() {
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const handleAiContinue = async () => {
|
||||
if (!editor || !activeNote) return
|
||||
if (aiContinuing) { aiAbortRef.current?.abort(); return }
|
||||
const controller = new AbortController()
|
||||
aiAbortRef.current = controller
|
||||
setAiContinuing(true)
|
||||
try {
|
||||
await streamAI(
|
||||
{ type: 'continue', noteContent: editor.getText() },
|
||||
(chunk) => { editor.commands.insertContent(chunk) },
|
||||
controller.signal,
|
||||
)
|
||||
} catch (e) {
|
||||
if ((e as Error).name === 'AbortError') return
|
||||
} finally {
|
||||
setAiContinuing(false)
|
||||
aiAbortRef.current = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleAiAction = async (type: 'polish' | 'summarize', from: number, to: number) => {
|
||||
if (!editor || !activeNote) return
|
||||
const selection = editor.state.doc.textBetween(from, to, '\n')
|
||||
const controller = new AbortController()
|
||||
aiModalAbortRef.current = controller
|
||||
setAiModal({ type, from, to, selection, result: '', streaming: true })
|
||||
try {
|
||||
await streamAI(
|
||||
{ type, noteContent: editor.getText(), selection },
|
||||
(chunk) => {
|
||||
setAiModal(prev => prev ? { ...prev, result: prev.result + chunk } : null)
|
||||
},
|
||||
controller.signal,
|
||||
)
|
||||
} catch (e) {
|
||||
if ((e as Error).name !== 'AbortError') {
|
||||
setAiModal(prev => prev ? { ...prev, result: '❌ 请求失败', streaming: false } : null)
|
||||
return
|
||||
}
|
||||
}
|
||||
setAiModal(prev => prev ? { ...prev, streaming: false } : null)
|
||||
}
|
||||
|
||||
if (!activeNote || activeNoteId === '__welcome__') {
|
||||
return <WelcomeView />
|
||||
}
|
||||
@ -297,6 +357,22 @@ export function Editor() {
|
||||
className="flex-1 bg-transparent outline-none text-3xl font-bold min-w-0"
|
||||
style={{ color: 'var(--text)', letterSpacing: '-0.02em' }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAiContinue}
|
||||
title={aiContinuing ? '停止续写' : 'AI 续写'}
|
||||
className="toolbar-btn shrink-0 mt-2"
|
||||
>
|
||||
{aiContinuing
|
||||
? <Square size={14} fill="currentColor" style={{ color: 'var(--accent)' }} />
|
||||
: <Zap size={14} style={{ color: 'var(--text-faint)' }} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleAiPanel}
|
||||
title="AI 助手"
|
||||
className="toolbar-btn shrink-0 mt-2"
|
||||
>
|
||||
<Sparkles size={14} style={{ color: aiPanelOpen ? 'var(--accent)' : 'var(--text-faint)' }} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => activeNoteId && toggleStar(activeNoteId)}
|
||||
title={activeNote.starred ? '取消收藏' : '收藏'}
|
||||
@ -364,7 +440,7 @@ export function Editor() {
|
||||
{/* Floating toolbar */}
|
||||
{editor && (
|
||||
<div style={{ position: 'fixed', zIndex: 100, pointerEvents: 'none' }}>
|
||||
<FloatingToolbar editor={editor} />
|
||||
<FloatingToolbar editor={editor} onPolish={handleAiAction.bind(null, 'polish')} onSummarize={handleAiAction.bind(null, 'summarize')} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -381,6 +457,25 @@ export function Editor() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Result Modal */}
|
||||
{aiModal && (
|
||||
<AiResultModal
|
||||
type={aiModal.type}
|
||||
result={aiModal.result}
|
||||
streaming={aiModal.streaming}
|
||||
onInsert={() => {
|
||||
if (editor) {
|
||||
editor.chain().focus().insertContentAt({ from: aiModal.from, to: aiModal.to }, aiModal.result).run()
|
||||
}
|
||||
setAiModal(null)
|
||||
}}
|
||||
onDiscard={() => {
|
||||
aiModalAbortRef.current?.abort()
|
||||
setAiModal(null)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
className="flex items-center justify-between px-12 py-2 text-xs shrink-0"
|
||||
@ -395,8 +490,13 @@ export function Editor() {
|
||||
)
|
||||
}
|
||||
|
||||
function FloatingToolbar({ editor }: { editor: NonNullable<ReturnType<typeof useEditor>> }) {
|
||||
function FloatingToolbar({ editor, onPolish, onSummarize }: {
|
||||
editor: NonNullable<ReturnType<typeof useEditor>>
|
||||
onPolish: (from: number, to: number) => void
|
||||
onSummarize: (from: number, to: number) => void
|
||||
}) {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [selRange, setSelRange] = useState({ from: 0, to: 0 })
|
||||
const [pos, setPos] = useState({ top: 0, left: 0 })
|
||||
|
||||
useEffect(() => {
|
||||
@ -405,6 +505,7 @@ function FloatingToolbar({ editor }: { editor: NonNullable<ReturnType<typeof use
|
||||
const { selection } = state
|
||||
if (selection.empty) { setVisible(false); return }
|
||||
const { from, to } = selection
|
||||
setSelRange({ from, to })
|
||||
const start = view.coordsAtPos(from)
|
||||
const end = view.coordsAtPos(to)
|
||||
const top = Math.min(start.top, end.top) - 48
|
||||
@ -432,6 +533,9 @@ function FloatingToolbar({ editor }: { editor: NonNullable<ReturnType<typeof use
|
||||
<ToolbarBtn title="H2" active={editor.isActive('heading', { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}><Heading2 size={13} /></ToolbarBtn>
|
||||
<div className="toolbar-divider" />
|
||||
<ToolbarBtn title="引用" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}><Quote size={13} /></ToolbarBtn>
|
||||
<div className="toolbar-divider" />
|
||||
<ToolbarBtn title="AI 润色" active={false} onClick={() => onPolish(selRange.from, selRange.to)}><Wand2 size={13} style={{ color: 'var(--accent)' }} /></ToolbarBtn>
|
||||
<ToolbarBtn title="AI 摘要" active={false} onClick={() => onSummarize(selRange.from, selRange.to)}><FileTextIcon size={13} style={{ color: 'var(--accent)' }} /></ToolbarBtn>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -445,3 +549,54 @@ function ToolbarBtn({ children, active, title, onClick }: {
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function AiResultModal({ type, result, streaming, onInsert, onDiscard }: {
|
||||
type: 'polish' | 'summarize'
|
||||
result: string
|
||||
streaming: boolean
|
||||
onInsert: () => void
|
||||
onDiscard: () => void
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
style={{ background: 'rgba(0,0,0,0.4)' }}
|
||||
onClick={onDiscard}
|
||||
>
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl flex flex-col"
|
||||
style={{ background: 'var(--bg)', border: '1px solid var(--border)', width: 520, maxHeight: '70vh' }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-3 shrink-0" style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={14} style={{ color: 'var(--accent)' }} />
|
||||
<span className="text-sm font-semibold" style={{ color: 'var(--text)' }}>
|
||||
{type === 'polish' ? 'AI 润色结果' : 'AI 摘要结果'}
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={onDiscard} className="toolbar-btn"><X size={14} /></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4 text-sm leading-relaxed whitespace-pre-wrap" style={{ color: 'var(--text)' }}>
|
||||
{result || <span style={{ color: 'var(--text-faint)' }}>生成中…</span>}
|
||||
{streaming && <span className="ai-cursor" />}
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 px-5 py-3 shrink-0" style={{ borderTop: '1px solid var(--border)' }}>
|
||||
<button onClick={onDiscard} className="px-3 py-1.5 rounded-lg text-sm" style={{ color: 'var(--text-muted)' }}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-muted)')}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={onInsert}
|
||||
disabled={!result || streaming}
|
||||
className="px-3 py-1.5 rounded-lg text-sm font-medium"
|
||||
style={{ background: result && !streaming ? 'var(--accent)' : 'var(--bg-muted)', color: result && !streaming ? '#fff' : 'var(--text-faint)' }}
|
||||
>
|
||||
{type === 'polish' ? '替换选中内容' : '插入摘要'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,8 +3,9 @@ import {
|
||||
Search, Plus, Star, FileText, Folder, FolderOpen,
|
||||
ChevronRight, ChevronDown,
|
||||
Trash2, Edit2, Moon, Sun, FolderPlus, Hash, BookOpen,
|
||||
ArrowUpDown, Check, X,
|
||||
ArrowUpDown, Check, X, Bot,
|
||||
} from 'lucide-react'
|
||||
import { ModelSettingsModal } from '../ai/ModelSettingsModal'
|
||||
import {
|
||||
DndContext, DragOverlay, useDraggable, useDroppable,
|
||||
useSensor, useSensors, MouseSensor, TouchSensor,
|
||||
@ -32,6 +33,7 @@ export function Sidebar() {
|
||||
const [editingNoteId, setEditingNoteId] = useState<string | null>(null)
|
||||
const [noteEditValue, setNoteEditValue] = useState('')
|
||||
const [sortMenuOpen, setSortMenuOpen] = useState(false)
|
||||
const [modelModalOpen, setModelModalOpen] = useState(false)
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
type: 'note' | 'folder'
|
||||
id: string
|
||||
@ -310,8 +312,7 @@ export function Sidebar() {
|
||||
</div>
|
||||
|
||||
{/* Context menu */}
|
||||
{contextMenu && (
|
||||
<div
|
||||
{contextMenu && ( <div
|
||||
className="fixed z-50 rounded-lg py-1 shadow-xl"
|
||||
style={{ top: contextMenu.y, left: contextMenu.x, background: 'var(--bg)', border: '1px solid var(--border)', minWidth: 160 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
@ -338,8 +339,27 @@ export function Sidebar() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom toolbar */}
|
||||
<div
|
||||
className="px-3 py-2 shrink-0 flex items-center justify-between"
|
||||
style={{ borderTop: '1px solid var(--border)' }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setModelModalOpen(true)}
|
||||
className="flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
|
||||
style={{ color: 'var(--text-faint)' }}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-muted)'; e.currentTarget.style.color = 'var(--text)' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}
|
||||
>
|
||||
<Bot size={13} />
|
||||
AI 模型
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{modelModalOpen && <ModelSettingsModal onClose={() => setModelModalOpen(false)} />}
|
||||
|
||||
{/* Drag overlay */}
|
||||
<DragOverlay>
|
||||
{draggingNote && (
|
||||
|
||||
@ -269,3 +269,19 @@
|
||||
.hljs-meta, .hljs-deletion { color: var(--hl-meta); }
|
||||
.hljs-emphasis { font-style: italic; }
|
||||
.hljs-strong { font-weight: bold; }
|
||||
|
||||
/* ── AI streaming cursor ── */
|
||||
@keyframes ai-blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.ai-cursor {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 1em;
|
||||
background: var(--accent);
|
||||
margin-left: 2px;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 1px;
|
||||
animation: ai-blink 0.8s ease infinite;
|
||||
}
|
||||
|
||||
50
src/lib/ai.ts
Normal file
50
src/lib/ai.ts
Normal file
@ -0,0 +1,50 @@
|
||||
export type AIStreamRequest = {
|
||||
type: 'continue' | 'polish' | 'summarize' | 'chat'
|
||||
noteContent: string
|
||||
selection?: string
|
||||
messages?: { role: 'user' | 'assistant'; content: string }[]
|
||||
userMessage?: string
|
||||
}
|
||||
|
||||
export async function streamAI(
|
||||
payload: AIStreamRequest,
|
||||
onChunk: (text: string) => void,
|
||||
signal?: AbortSignal,
|
||||
): Promise<void> {
|
||||
const res = await fetch('/api/ai/stream', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
signal,
|
||||
})
|
||||
|
||||
if (!res.ok || !res.body) {
|
||||
throw new Error(`AI request failed: ${res.status}`)
|
||||
}
|
||||
|
||||
const reader = res.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buf = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
buf += decoder.decode(value, { stream: true })
|
||||
|
||||
const lines = buf.split('\n')
|
||||
buf = lines.pop() ?? ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith('data: ')) continue
|
||||
const data = line.slice(6).trim()
|
||||
if (data === '[DONE]') return
|
||||
try {
|
||||
const parsed = JSON.parse(data) as { delta?: string; error?: string }
|
||||
if (parsed.error) throw new Error(parsed.error)
|
||||
if (parsed.delta) onChunk(parsed.delta)
|
||||
} catch {
|
||||
// ignore malformed lines
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,6 +10,7 @@ interface AppState {
|
||||
searchQuery: string
|
||||
theme: 'light' | 'dark'
|
||||
focusMode: boolean
|
||||
aiPanelOpen: boolean
|
||||
activeTag: string | null
|
||||
sortBy: 'updatedAt' | 'createdAt' | 'title'
|
||||
sortOrder: 'asc' | 'desc'
|
||||
@ -30,6 +31,7 @@ interface AppState {
|
||||
setSearch: (q: string) => void
|
||||
toggleTheme: () => void
|
||||
toggleFocusMode: () => void
|
||||
toggleAiPanel: () => void
|
||||
setActiveTag: (tag: string | null) => void
|
||||
setSortBy: (by: 'updatedAt' | 'createdAt' | 'title') => void
|
||||
setSortOrder: (order: 'asc' | 'desc') => void
|
||||
@ -45,6 +47,7 @@ export const useAppStore = create<AppState>((set, get) => ({
|
||||
searchQuery: '',
|
||||
theme: (localStorage.getItem('theme') as 'light' | 'dark') || 'light',
|
||||
focusMode: false,
|
||||
aiPanelOpen: false,
|
||||
activeTag: null,
|
||||
sortBy: 'updatedAt',
|
||||
sortOrder: 'desc',
|
||||
@ -143,6 +146,7 @@ export const useAppStore = create<AppState>((set, get) => ({
|
||||
},
|
||||
|
||||
toggleFocusMode: () => set(s => ({ focusMode: !s.focusMode })),
|
||||
toggleAiPanel: () => set(s => ({ aiPanelOpen: !s.aiPanelOpen })),
|
||||
setActiveTag: (tag) => set({ activeTag: tag }),
|
||||
setSortBy: (by) => set({ sortBy: by }),
|
||||
setSortOrder: (order) => set({ sortOrder: order }),
|
||||
|
||||
@ -4,4 +4,9 @@ import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user