267 lines
12 KiB
TypeScript
267 lines
12 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
||
import { useAuth } from '@/hooks/useAuth';
|
||
import AIToolsLayout from '@/components/aitools/AIToolsLayout';
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||
import { Bot, Send, Loader2, Eraser } from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
import { cn } from '@/lib/utils';
|
||
import ReactMarkdown from 'react-markdown';
|
||
|
||
interface Message {
|
||
role: 'user' | 'assistant' | 'system';
|
||
content: string;
|
||
timestamp: number;
|
||
}
|
||
|
||
|
||
export default function AIChat() {
|
||
const { user } = useAuth();
|
||
const [messages, setMessages] = useState<Message[]>([]);
|
||
const [input, setInput] = useState('');
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [selectedAssistant, setSelectedAssistant] = useState<string>('system');
|
||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Auto-scroll to bottom
|
||
useEffect(() => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
}, [messages]);
|
||
|
||
// Load initial system message based on selected assistant
|
||
useEffect(() => {
|
||
if (selectedAssistant === 'system') {
|
||
// System default
|
||
} else {
|
||
// Find custom assistant
|
||
const assistant = user?.AI配置?.自定义助手列表?.find((a: any) => a.名称 === selectedAssistant);
|
||
if (assistant && assistant.系统提示词) {
|
||
// Optionally add a system message to context (not visible)
|
||
}
|
||
}
|
||
}, [selectedAssistant, user]);
|
||
|
||
const handleSend = async () => {
|
||
if (!input.trim() || isLoading) return;
|
||
|
||
const userMessage: Message = {
|
||
role: 'user',
|
||
content: input,
|
||
timestamp: Date.now()
|
||
};
|
||
|
||
setMessages(prev => [...prev, userMessage]);
|
||
setInput('');
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
const response = await fetch('/api/ai/chat', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
messages: [...messages, userMessage].map(m => ({ role: m.role, content: m.content })),
|
||
assistantId: selectedAssistant === 'system' ? 'system' : selectedAssistant,
|
||
mode: selectedAssistant === 'system' ? 'system' : 'custom',
|
||
// Pass custom config if needed, but backend should fetch from user profile for security
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json();
|
||
throw new Error(errorData.message || 'Failed to send message');
|
||
}
|
||
|
||
// Handle streaming response
|
||
const reader = response.body?.getReader();
|
||
const decoder = new TextDecoder();
|
||
const assistantMessage: Message = {
|
||
role: 'assistant',
|
||
content: '',
|
||
timestamp: Date.now()
|
||
};
|
||
|
||
setMessages(prev => [...prev, assistantMessage]);
|
||
|
||
if (reader) {
|
||
while (true) {
|
||
const { done, value } = await reader.read();
|
||
if (done) break;
|
||
const chunk = decoder.decode(value);
|
||
assistantMessage.content += chunk;
|
||
|
||
setMessages(prev => {
|
||
const newMessages = [...prev];
|
||
newMessages[newMessages.length - 1] = { ...assistantMessage };
|
||
return newMessages;
|
||
});
|
||
}
|
||
}
|
||
|
||
} catch (error: any) {
|
||
toast.error(error.message || '发送失败，请重试');
|
||
// Remove the failed user message or show error state?
|
||
// For now just show toast
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSend();
|
||
}
|
||
};
|
||
|
||
const clearHistory = () => {
|
||
setMessages([]);
|
||
toast.success('对话历史已清空');
|
||
};
|
||
|
||
// Get available assistants
|
||
const assistants = [
|
||
{ value: 'system', label: '系统默认助手 (System)' },
|
||
...(user?.AI配置?.自定义助手列表?.map((a: any) => ({
|
||
value: a.名称,
|
||
label: `${a.名称} (Custom)`
|
||
})) || [])
|
||
];
|
||
|
||
return (
|
||
<AIToolsLayout title="AI 智能对话" description="多模型智能问答助手，支持自定义模型配置">
|
||
<div className="h-[calc(100vh-140px)] flex flex-col bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
|
||
{/* Header */}
|
||
<div className="p-4 border-b border-border flex items-center justify-between bg-muted/50/50">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
|
||
<Bot className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h2 className="font-bold text-foreground">AI 智能对话</h2>
|
||
<p className="text-xs text-muted-foreground">
|
||
当前模式: {selectedAssistant === 'system' ? '系统托管 (消耗积分)' : '自定义 (免费)'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<Select value={selectedAssistant} onValueChange={setSelectedAssistant}>
|
||
<SelectTrigger className="w-[200px] bg-background">
|
||
<SelectValue placeholder="选择助手" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{assistants.map(a => (
|
||
<SelectItem key={a.value} value={a.value}>{a.label}</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
<Button variant="ghost" size="icon" onClick={clearHistory} title="清空对话">
|
||
<Eraser className="w-4 h-4 text-muted-foreground" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Chat Area */}
|
||
<div className="flex-1 overflow-y-auto p-4 space-y-6 bg-muted/50/30">
|
||
{messages.length === 0 ? (
|
||
<div className="h-full flex flex-col items-center justify-center text-muted-foreground space-y-4">
|
||
<Bot className="w-16 h-16 opacity-20" />
|
||
<p>开始一个新的对话吧...</p>
|
||
<div className="grid grid-cols-2 gap-2 max-w-md w-full">
|
||
{['帮我写一篇关于AI的文章', '解释一下量子纠缠', '如何优化React性能', '翻译这段代码'].map((q, i) => (
|
||
<Button
|
||
key={i}
|
||
variant="outline"
|
||
className="text-xs justify-start h-auto py-3 px-4 bg-background hover:bg-green-50 hover:text-green-600 hover:border-green-200"
|
||
onClick={() => setInput(q)}
|
||
>
|
||
{q}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
messages.map((msg, index) => (
|
||
<div
|
||
key={index}
|
||
className={cn(
|
||
"flex gap-3 max-w-3xl",
|
||
msg.role === 'user' ? "ml-auto flex-row-reverse" : "mr-auto"
|
||
)}
|
||
>
|
||
<Avatar className={cn("w-8 h-8", msg.role === 'user' ? "bg-primary" : "bg-green-600")}>
|
||
{msg.role === 'user' ? (
|
||
<AvatarImage src={user?.头像} />
|
||
) : (
|
||
<div className="w-full h-full flex items-center justify-center bg-green-100 text-green-600">
|
||
<Bot className="w-5 h-5" />
|
||
</div>
|
||
)}
|
||
<AvatarFallback>{msg.role === 'user' ? 'U' : 'AI'}</AvatarFallback>
|
||
</Avatar>
|
||
|
||
<div className={cn(
|
||
"rounded-2xl px-4 py-3 text-sm shadow-sm",
|
||
msg.role === 'user'
|
||
? "bg-primary text-white rounded-tr-none"
|
||
: "bg-card border border-border text-foreground rounded-tl-none"
|
||
)}>
|
||
{msg.role === 'assistant' ? (
|
||
<div className="prose prose-sm max-w-none dark:prose-invert">
|
||
<ReactMarkdown>{msg.content}</ReactMarkdown>
|
||
</div>
|
||
) : (
|
||
<div className="whitespace-pre-wrap">{msg.content}</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
{isLoading && (
|
||
<div className="flex gap-3 mr-auto max-w-3xl">
|
||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||
<Bot className="w-5 h-5" />
|
||
</div>
|
||
<div className="bg-card border border-border rounded-2xl rounded-tl-none px-4 py-3 flex items-center">
|
||
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
|
||
<span className="text-xs text-muted-foreground ml-2">正在思考...</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div ref={messagesEndRef} />
|
||
</div>
|
||
|
||
{/* Input Area */}
|
||
<div className="p-4 bg-card border-t border-border">
|
||
<div className="relative max-w-4xl mx-auto">
|
||
<Input
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="输入您的问题... (Shift+Enter 换行)"
|
||
className="pr-12 py-6 rounded-xl bg-muted/50 border-border focus:bg-background transition-colors"
|
||
disabled={isLoading}
|
||
/>
|
||
<Button
|
||
size="icon"
|
||
className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-lg"
|
||
onClick={handleSend}
|
||
disabled={!input.trim() || isLoading}
|
||
>
|
||
<Send className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
<div className="text-center mt-2">
|
||
<p className="text-[10px] text-muted-foreground">
|
||
AI 生成的内容可能不准确，请核实重要信息。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AIToolsLayout>
|
||
);
|
||
}
|