feat: Phase 1-3 全部完成 — 沙盒增强、学情分析、学习路径
This commit is contained in:
yuzhiran-dev
@@ -0,0 +1,584 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect, FormEvent } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useAuth } from '@/lib/auth-context';
|
||||
import { getToken, apiFetch } from '@/lib/auth';
|
||||
import { AVAILABLE_MODELS, DEFAULT_MODEL } from '@/lib/models';
|
||||
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
|
||||
|
||||
interface Message {
|
||||
role: 'system' | 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface SessionItem {
|
||||
id: number;
|
||||
conversationId: string;
|
||||
model: string;
|
||||
title: string;
|
||||
updatedAt: string;
|
||||
tokens: number;
|
||||
}
|
||||
|
||||
const SCENES = [
|
||||
{
|
||||
id: 'general',
|
||||
name: '通用对话',
|
||||
icon: '💬',
|
||||
desc: '日常问答，无所不谈',
|
||||
systemPrompt: '你是一个智能 AI 助手，请友好、准确地回答用户的问题。',
|
||||
starters: ['介绍一下你自己', '今天天气怎么样', '讲个笑话'],
|
||||
},
|
||||
{
|
||||
id: 'coding',
|
||||
name: '编程助手',
|
||||
icon: '💻',
|
||||
desc: '写代码、Debug、学编程',
|
||||
systemPrompt: '你是一名资深软件工程师，擅长编程教学。请用清晰的代码示例和通俗的语言解释技术概念。回答时优先提供可运行的代码。',
|
||||
starters: ['用 Python 写一个二分查找', 'React 和 Vue 有什么区别', '帮我 Debug 这段代码'],
|
||||
},
|
||||
{
|
||||
id: 'writing',
|
||||
name: '写作助手',
|
||||
icon: '✍️',
|
||||
desc: '文章、文案、报告润色',
|
||||
systemPrompt: '你是一名专业的写作顾问，擅长各类文体写作。请根据用户需求提供高质量的文字内容，注意逻辑清晰、表达准确。',
|
||||
starters: ['帮我写一篇产品介绍', '润色这段文字', '写一封工作邮件'],
|
||||
},
|
||||
{
|
||||
id: 'study',
|
||||
name: '学习辅导',
|
||||
icon: '📚',
|
||||
desc: '概念讲解、知识总结',
|
||||
systemPrompt: '你是一名耐心且知识渊博的老师。请用通俗易懂的方式解释复杂概念，善用类比和例子，鼓励用户深入提问。',
|
||||
starters: ['解释什么是机器学习', '讲一下 TCP/IP 协议', '怎么理解量子计算'],
|
||||
},
|
||||
{
|
||||
id: 'english',
|
||||
name: '英语学习',
|
||||
icon: '🌍',
|
||||
desc: '翻译、语法、口语练习',
|
||||
systemPrompt: 'You are an English tutor. Help users improve their English. Respond primarily in Chinese but provide English examples. Correct grammar and offer better expressions.',
|
||||
starters: ['"However" 和 "Although" 的区别', '帮我翻译这段话', '检查语法错误'],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
function buildSystemMessages(sceneId: string): Message[] {
|
||||
const scene = SCENES.find(s => s.id === sceneId) || SCENES[0];
|
||||
return [{ role: 'system', content: scene.systemPrompt }];
|
||||
}
|
||||
|
||||
function extractCodeBlocks(content: string): string[] {
|
||||
const blocks: string[] = [];
|
||||
const regex = /```(?:\w+)?\n([\s\S]*?)```/g;
|
||||
let match;
|
||||
while ((match = regex.exec(content)) !== null) {
|
||||
const code = match[1].trim();
|
||||
if (code.length > 0) blocks.push(code);
|
||||
}
|
||||
return blocks;
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - d.getTime();
|
||||
if (diff < 60000) return '刚刚';
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`;
|
||||
return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export default function SandboxPage() {
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{ role: 'assistant', content: '你好！我是宇之然 AI 助手。你可以问我任何问题，我会尽力帮你解答。\n\n试试问我关于 AI、编程、写作、办公效率等方面的问题！' },
|
||||
]);
|
||||
const [input, setInput] = useState('');
|
||||
const [model, setModel] = useState(DEFAULT_MODEL);
|
||||
const [scene, setScene] = useState('general');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [showParams, setShowParams] = useState(false);
|
||||
const [temperature, setTemperature] = useState(0.7);
|
||||
const [topP, setTopP] = useState(1);
|
||||
const [maxTokens, setMaxTokens] = useState(2000);
|
||||
const [quota, setQuota] = useState<{ used: number; remaining: number } | null>(null);
|
||||
const [sessions, setSessions] = useState<SessionItem[]>([]);
|
||||
const [sessionsOpen, setSessionsOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [conversationId, setConversationId] = useState(() => crypto.randomUUID());
|
||||
const [sessionFeedback, setSessionFeedback] = useState<Record<number, string | null>>({});
|
||||
const [currentSessionId, setCurrentSessionId] = useState<number | null>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const messagesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const { isLoggedIn } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
const tk = getToken();
|
||||
if (tk) {
|
||||
fetch(`${API_BASE}/sandbox/quota`, {
|
||||
headers: { Authorization: `Bearer ${tk}` },
|
||||
}).then(r => r.json()).then(data => {
|
||||
if (data.remaining !== undefined) setQuota(data);
|
||||
}).catch(() => {});
|
||||
loadSessions(tk);
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.some(m => m.role === 'user') && messagesContainerRef.current) {
|
||||
messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
function loadSessions(tk?: string) {
|
||||
const token = tk || getToken();
|
||||
if (!token) return;
|
||||
const params = searchQuery ? `?search=${encodeURIComponent(searchQuery)}` : '';
|
||||
fetch(`${API_BASE}/sandbox/sessions${params}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}).then(r => r.json()).then(data => {
|
||||
if (data.items) setSessions(data.items);
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
function handleSceneChange(sceneId: string) {
|
||||
const s = SCENES.find(x => x.id === sceneId);
|
||||
if (!s) return;
|
||||
setScene(sceneId);
|
||||
setMessages([
|
||||
{ role: 'assistant', content: `欢迎来到 **${s.name}** 模式！${s.desc}。试试下面的问题，或者直接输入你的问题吧。` },
|
||||
]);
|
||||
}
|
||||
|
||||
async function handleSend(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text || sending) return;
|
||||
|
||||
const userMsg: Message = { role: 'user', content: text };
|
||||
setMessages(prev => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setSending(true);
|
||||
|
||||
try {
|
||||
const tk = getToken();
|
||||
let reply = '';
|
||||
if (tk) {
|
||||
const scenePrefix = buildSystemMessages(scene);
|
||||
const apiMessages = [
|
||||
...scenePrefix,
|
||||
...messages,
|
||||
userMsg,
|
||||
].map(m => ({ role: m.role, content: m.content }));
|
||||
|
||||
const res = await fetch(`${API_BASE}/sandbox/chat`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${tk}`,
|
||||
},
|
||||
body: JSON.stringify({ conversationId, model, messages: apiMessages, temperature, top_p: topP, max_tokens: maxTokens }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.message || '请求失败');
|
||||
reply = data.reply;
|
||||
if (data.conversationId) setConversationId(data.conversationId);
|
||||
if (data.sessionId) {
|
||||
setCurrentSessionId(data.sessionId);
|
||||
if (!(data.sessionId in sessionFeedback)) {
|
||||
setSessionFeedback(prev => ({ ...prev, [data.sessionId]: null }));
|
||||
}
|
||||
}
|
||||
if (quota) setQuota({ ...quota, used: quota.used + 1, remaining: quota.remaining - 1 });
|
||||
loadSessions(tk);
|
||||
} else {
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
reply = mockReply(text);
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: reply }]);
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('今日沙箱使用次数已用完')) {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '今日沙箱使用次数已用完。' + (isLoggedIn ? '' : ' 登录后可获得更多使用次数。') }]);
|
||||
} else if (e.message.includes('未登录') || e.message.includes('Unauthorized')) {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '登录已过期，请重新登录后再试。' }]);
|
||||
} else {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: `出错啦：${e.message}` }]);
|
||||
}
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSession(sessionId: number) {
|
||||
const tk = getToken();
|
||||
if (!tk) return;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/sandbox/sessions/${sessionId}`, {
|
||||
headers: { Authorization: `Bearer ${tk}` },
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.messages) {
|
||||
setMessages(data.messages.filter((m: any) => m.role !== 'system'));
|
||||
setModel(data.model);
|
||||
setConversationId(data.conversationId);
|
||||
setCurrentSessionId(data.id);
|
||||
setSessionFeedback(prev => ({ ...prev, [data.id]: data.feedback || null }));
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function deleteSession(sessionId: number) {
|
||||
const tk = getToken();
|
||||
if (!tk) return;
|
||||
try {
|
||||
await fetch(`${API_BASE}/sandbox/sessions/${sessionId}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${tk}` },
|
||||
});
|
||||
setSessions(prev => prev.filter(s => s.id !== sessionId));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function newChat() {
|
||||
const s = SCENES.find(x => x.id === scene) || SCENES[0];
|
||||
setConversationId(crypto.randomUUID());
|
||||
setCurrentSessionId(null);
|
||||
setMessages([
|
||||
{ role: 'assistant', content: `欢迎来到 **${s.name}** 模式！${s.desc}。试试下面的问题，或者直接输入你的问题吧。` },
|
||||
]);
|
||||
}
|
||||
|
||||
async function handleFeedback(sessionId: number, value: 'LIKE' | 'DISLIKE') {
|
||||
const tk = getToken();
|
||||
if (!tk) return;
|
||||
const newVal = sessionFeedback[sessionId] === value ? null : value;
|
||||
setSessionFeedback(prev => ({ ...prev, [sessionId]: newVal }));
|
||||
try {
|
||||
await fetch(`${API_BASE}/sandbox/sessions/${sessionId}/feedback`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${tk}`,
|
||||
},
|
||||
body: JSON.stringify({ feedback: newVal }),
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const currentScene = SCENES.find(s => s.id === scene) || SCENES[0];
|
||||
const isNewChat = messages.length <= 1 && messages[0]?.role === 'assistant';
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={() => setSessionsOpen(!sessionsOpen)}
|
||||
className="lg:hidden p-2 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">AI 沙盒</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">在线体验 AI 对话，边学边练</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select value={model} onChange={e => setModel(e.target.value)}
|
||||
className="px-3 py-1.5 border border-border rounded-lg text-sm bg-background focus:outline-none focus:border-brand-400">
|
||||
{AVAILABLE_MODELS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
|
||||
</select>
|
||||
{!isLoggedIn && (
|
||||
<Link href="/auth"
|
||||
className="px-4 py-1.5 text-sm font-medium text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50">
|
||||
登录使用更多
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{isLoggedIn && (
|
||||
<>
|
||||
<div className={`${sessionsOpen ? 'fixed inset-0 z-40 bg-black/50 lg:static lg:bg-transparent' : 'hidden'} lg:block lg:w-72 shrink-0`}>
|
||||
<div className={`${sessionsOpen ? 'fixed left-0 top-0 bottom-0 w-80 z-50' : ''} lg:static lg:w-72 bg-card border border-border rounded-2xl overflow-hidden flex flex-col`} style={{ maxHeight: '75vh' }}>
|
||||
<div className="p-3 border-b border-border flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">历史记录</span>
|
||||
<button onClick={newChat}
|
||||
className="text-xs px-3 py-1 bg-brand-600 text-white rounded-lg hover:bg-brand-700">
|
||||
新对话
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2 border-b border-border">
|
||||
<input type="text" value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
|
||||
placeholder="搜索历史..." onKeyDown={e => { if (e.key === 'Enter') loadSessions(); }}
|
||||
className="w-full px-3 py-1.5 bg-background border border-border rounded-lg text-xs focus:outline-none focus:border-brand-400" />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{sessions.length === 0 ? (
|
||||
<div className="p-4 text-center text-xs text-muted-foreground">
|
||||
暂无历史记录
|
||||
</div>
|
||||
) : sessions.map(s => (
|
||||
<div key={s.id} onClick={() => { loadSession(s.id); setSessionsOpen(false); }}
|
||||
className="group px-3 py-2.5 hover:bg-accent cursor-pointer border-b border-border/50">
|
||||
<div className="text-xs font-medium text-foreground truncate">{s.title}</div>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<span className="text-[10px] text-muted-foreground">{formatTime(s.updatedAt)} · {s.model}</span>
|
||||
<button onClick={e => { e.stopPropagation(); deleteSession(s.id); }}
|
||||
className="opacity-0 group-hover:opacity-100 text-[10px] text-red-500 hover:text-red-700">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{sessionsOpen && (
|
||||
<div className="fixed inset-0 z-40 lg:hidden" onClick={() => setSessionsOpen(false)} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex gap-2 mb-4 overflow-x-auto pb-1">
|
||||
{SCENES.map(s => (
|
||||
<button key={s.id} onClick={() => handleSceneChange(s.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium whitespace-nowrap border transition-colors shrink-0 ${
|
||||
scene === s.id
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-card text-muted-foreground border-border hover:border-brand-400 hover:text-foreground'
|
||||
}`}>
|
||||
<span>{s.icon}</span>
|
||||
<span>{s.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div />
|
||||
<button onClick={() => setShowParams(!showParams)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg border transition-colors ${
|
||||
showParams
|
||||
? 'bg-accent text-foreground border-border'
|
||||
: 'text-muted-foreground border-border hover:text-foreground hover:bg-accent'
|
||||
}`}>
|
||||
<svg className={`w-3.5 h-3.5 transition-transform ${showParams ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
高级参数
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showParams && (
|
||||
<div className="bg-card border border-border rounded-xl p-4 mb-3 space-y-3">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="text-xs font-medium text-foreground">Temperature</label>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">{temperature.toFixed(1)}</span>
|
||||
</div>
|
||||
<input type="range" min="0" max="2" step="0.1" value={temperature}
|
||||
onChange={e => setTemperature(parseFloat(e.target.value))}
|
||||
className="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-brand-600" />
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
|
||||
<span>精确 (0)</span>
|
||||
<span>创意 (2)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="text-xs font-medium text-foreground">Top P</label>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">{topP.toFixed(2)}</span>
|
||||
</div>
|
||||
<input type="range" min="0" max="1" step="0.05" value={topP}
|
||||
onChange={e => setTopP(parseFloat(e.target.value))}
|
||||
className="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-brand-600" />
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
|
||||
<span>严格 (0)</span>
|
||||
<span>多样 (1)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="text-xs font-medium text-foreground">Max Tokens</label>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">{maxTokens}</span>
|
||||
</div>
|
||||
<input type="range" min="100" max="8192" step="100" value={maxTokens}
|
||||
onChange={e => setMaxTokens(parseInt(e.target.value))}
|
||||
className="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-brand-600" />
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
|
||||
<span>短 (100)</span>
|
||||
<span>长 (8192)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-card rounded-2xl border border-border shadow-sm overflow-hidden flex flex-col" style={{ maxHeight: '65vh' }}>
|
||||
<div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{isNewChat && (
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{currentScene.starters.map((q, i) => (
|
||||
<button key={i} onClick={() => setInput(q)}
|
||||
className="px-3 py-1.5 text-xs bg-muted text-muted-foreground rounded-full border border-border hover:bg-accent hover:text-foreground transition-colors">
|
||||
{q}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{messages.map((msg, i) => {
|
||||
if (msg.role === 'system') return null;
|
||||
const isLastAssistant = msg.role === 'assistant' && i === messages.length - 1;
|
||||
return (
|
||||
<div key={i}>
|
||||
<div className={`flex items-start gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
|
||||
{msg.role === 'assistant' && (
|
||||
<div className="w-8 h-8 bg-brand-600 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0">Y</div>
|
||||
)}
|
||||
<div className={`max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
|
||||
msg.role === 'user'
|
||||
? 'bg-brand-600 text-white rounded-tr-none'
|
||||
: 'bg-muted text-foreground rounded-tl-none'
|
||||
}`}>
|
||||
{msg.content}
|
||||
</div>
|
||||
{msg.role === 'user' && (
|
||||
<div className="w-8 h-8 bg-muted-foreground/20 rounded-xl flex items-center justify-center text-xs font-bold shrink-0">我</div>
|
||||
)}
|
||||
</div>
|
||||
{msg.role === 'assistant' && currentSessionId && isLastAssistant && (
|
||||
<div className="flex items-center gap-2 mt-1 ml-11">
|
||||
<button onClick={() => handleFeedback(currentSessionId, 'LIKE')}
|
||||
className={`text-xs px-2 py-1 rounded-full border transition-colors ${
|
||||
sessionFeedback[currentSessionId] === 'LIKE'
|
||||
? 'bg-green-500/10 text-green-600 border-green-300'
|
||||
: 'text-muted-foreground border-border hover:border-green-300 hover:text-green-600'
|
||||
}`}>
|
||||
有用
|
||||
</button>
|
||||
<button onClick={() => handleFeedback(currentSessionId, 'DISLIKE')}
|
||||
className={`text-xs px-2 py-1 rounded-full border transition-colors ${
|
||||
sessionFeedback[currentSessionId] === 'DISLIKE'
|
||||
? 'bg-red-500/10 text-red-600 border-red-300'
|
||||
: 'text-muted-foreground border-border hover:border-red-300 hover:text-red-600'
|
||||
}`}>
|
||||
没用
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{msg.role === 'assistant' && extractCodeBlocks(msg.content).length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2 ml-11">
|
||||
{extractCodeBlocks(msg.content).map((code, ci) => (
|
||||
<button key={ci} onClick={() => {
|
||||
const encoded = btoa(code);
|
||||
window.open(`/sandbox/code?code=${encoded}`, '_blank');
|
||||
}}
|
||||
className="text-xs px-2.5 py-1 rounded-full border border-border text-brand-600 hover:bg-accent transition-colors">
|
||||
在代码沙盒中运行
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{sending && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-brand-600 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0">Y</div>
|
||||
<div className="bg-muted rounded-2xl rounded-tl-none px-4 py-2.5">
|
||||
<span className="inline-flex gap-1">
|
||||
<span className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-muted-foreground/40 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!sending && messages.length > 2 && (
|
||||
<div className="flex justify-end">
|
||||
<button onClick={() => {
|
||||
const lastAssistantMsg = [...messages].reverse().find(m => m.role === 'assistant');
|
||||
if (lastAssistantMsg) shareToCommunity(lastAssistantMsg.content);
|
||||
}} className="text-xs text-brand-600 hover:underline">
|
||||
分享到社区
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border p-4">
|
||||
{quota && (
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
今日已用 {quota.used} 次，剩余 {quota.remaining} 次
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSend} className="flex gap-2">
|
||||
<input type="text" value={input} onChange={e => setInput(e.target.value)}
|
||||
placeholder="输入你的问题..." disabled={sending}
|
||||
className="flex-1 px-4 py-2.5 bg-background border border-input rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" />
|
||||
<button type="submit" disabled={sending || !input.trim()}
|
||||
className="px-5 py-2.5 bg-brand-600 text-white text-sm font-medium rounded-xl hover:bg-brand-700 disabled:opacity-50">
|
||||
{sending ? '发送中' : '发送'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center text-xs text-muted-foreground">
|
||||
AI 回复由人工智能生成，仅供参考。{!isLoggedIn && ' 登录后可获得更多使用次数和更多模型选择。'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
async function shareToCommunity(content: string, title?: string) {
|
||||
if (!getToken()) {
|
||||
alert('请先登录');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await apiFetch('/community/posts', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title: title || `AI对话分享 - ${new Date().toLocaleDateString()}`,
|
||||
content: `【AI沙箱对话分享】\n\n${content}\n\n---\n来自宇之然AI沙箱`,
|
||||
tags: '沙箱分享,AI对话',
|
||||
}),
|
||||
});
|
||||
alert('分享成功！');
|
||||
} catch {
|
||||
alert('分享失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mockReply(text: string): string {
|
||||
const replies: Record<string, string> = {
|
||||
你好: '你好！我是宇之然 AI 助手，很高兴为你服务！有什么我可以帮助你的吗？',
|
||||
hello: 'Hello! I am YuZhiRan AI assistant. How can I help you today?',
|
||||
};
|
||||
for (const [key, reply] of Object.entries(replies)) {
|
||||
if (text.toLowerCase().includes(key)) return reply;
|
||||
}
|
||||
if (text.includes('提示词') || text.includes('prompt')) {
|
||||
return '好的提示词需要明确角色、任务、输出格式和约束条件。例如：\n\n> 你是一名专业的文案编辑，请帮我优化以下产品描述，要求语言简洁有力，突出产品核心卖点，控制在200字以内。\n\n你也可以在提示词库中找到更多精选模板！';
|
||||
}
|
||||
if (text.includes('模型') || text.includes('大模型')) {
|
||||
return '目前主流的 AI 大模型包括：\n\n• **GPT-4** — OpenAI，综合能力最强\n• **Claude 3.5** — Anthropic，长文本分析出色\n• **Gemini** — Google，多模态能力强\n• **DeepSeek-V3** — 国产开源，性价比高\n• **通义千问** — 阿里云，中文理解优秀\n• **文心一言** — 百度，中文生态完善\n\n各模型在语言理解、代码生成、逻辑推理等方面各有优势，建议根据具体任务选择。';
|
||||
}
|
||||
if (text.includes('Python') || text.includes('代码')) {
|
||||
return '以下是一个 Python 示例代码：\n\n```python\ndef fibonacci(n):\n """生成斐波那契数列的前 n 项"""\n a, b = 0, 1\n result = []\n for _ in range(n):\n result.append(a)\n a, b = b, a + b\n return result\n\nprint(fibonacci(10))\n```\n\n你可以将代码复制到本地运行，或在沙盒中进一步调试。';
|
||||
}
|
||||
if (text.includes('AI') || text.includes('人工智能')) {
|
||||
return '人工智能（AI）是计算机科学的一个重要分支，旨在创建能够模拟人类智能的系统。\n\n**主要分支：**\n• 机器学习 — 让计算机从数据中学习\n• 深度学习 — 使用多层神经网络的机器学习\n• 自然语言处理 — 理解和生成人类语言\n• 计算机视觉 — 理解和分析图像\n\n想了解更多，可以查看我们的 AI 通识课程！';
|
||||
}
|
||||
return `关于"${text.slice(0, 30)}..."这个问题，我是宇之然 AI 助手。当前处于演示模式，我的回答能力有限。\n\n**建议：**\n1. 登录后使用更多模型获得更好的回答\n2. 在提示词库中查找相关模板\n3. 学习 AI 通识课程系统提升\n\n有什么我可以进一步帮助你的吗？`;
|
||||
}
|
||||
Reference in New Issue
Block a user