Update application code and dependencies
This commit is contained in:
root
@@ -0,0 +1,602 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
|
||||
interface Message {
|
||||
id: string
|
||||
role: 'user' | 'assistant'
|
||||
content: string
|
||||
timestamp: Date
|
||||
}
|
||||
|
||||
interface Conversation {
|
||||
id: number
|
||||
title: string
|
||||
updatedAt: string
|
||||
messages: Message[]
|
||||
}
|
||||
|
||||
interface Agent {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
icon: string | null
|
||||
category: {
|
||||
name: string
|
||||
} | null
|
||||
}
|
||||
|
||||
export default function AgentChatPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const slug = params.slug as string
|
||||
|
||||
const [agent, setAgent] = useState<Agent | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([])
|
||||
const [input, setInput] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
|
||||
const [conversations, setConversations] = useState<Conversation[]>([])
|
||||
const [currentConversationId, setCurrentConversationId] = useState<number | null>(null)
|
||||
const [upstreamConversationId, setUpstreamConversationId] = useState<string>('')
|
||||
const [loadingConversations, setLoadingConversations] = useState(false)
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const CHAT_API_URL = '/api/chat'
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/agents/${slug}`)
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('Not found')
|
||||
return res.json()
|
||||
})
|
||||
.then(data => setAgent(data))
|
||||
.catch(() => router.push('/404'))
|
||||
.finally(() => setLoading(false))
|
||||
}, [slug, router])
|
||||
|
||||
useEffect(() => {
|
||||
if (agent) {
|
||||
loadConversations()
|
||||
}
|
||||
}, [agent])
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [messages])
|
||||
|
||||
const loadConversations = async () => {
|
||||
if (!agent) return
|
||||
setLoadingConversations(true)
|
||||
try {
|
||||
const res = await fetch(`/api/conversations?agentId=${agent.id}`)
|
||||
const data = await res.json()
|
||||
setConversations(data)
|
||||
} catch (error) {
|
||||
console.error('Failed to load conversations:', error)
|
||||
} finally {
|
||||
setLoadingConversations(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadConversation = async (conversationId: number) => {
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${conversationId}`)
|
||||
const data = await res.json()
|
||||
setCurrentConversationId(conversationId)
|
||||
setMessages(data.messages.map((msg: any) => ({
|
||||
id: msg.id.toString(),
|
||||
role: msg.role as 'user' | 'assistant',
|
||||
content: msg.content,
|
||||
timestamp: new Date(msg.timestamp),
|
||||
})))
|
||||
} catch (error) {
|
||||
console.error('Failed to load conversation:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const createNewConversation = async () => {
|
||||
if (!agent) return
|
||||
try {
|
||||
const res = await fetch('/api/conversations', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
agentId: agent.id,
|
||||
title: '新对话',
|
||||
}),
|
||||
})
|
||||
const newConversation = await res.json()
|
||||
setConversations(prev => [newConversation, ...prev])
|
||||
setCurrentConversationId(newConversation.id)
|
||||
setMessages([])
|
||||
} catch (error) {
|
||||
console.error('Failed to create conversation:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteConversation = async (conversationId: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (!confirm('确定要删除这个对话吗？')) return
|
||||
try {
|
||||
await fetch(`/api/conversations/${conversationId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
setConversations(prev => prev.filter(c => c.id !== conversationId))
|
||||
if (currentConversationId === conversationId) {
|
||||
setCurrentConversationId(null)
|
||||
setMessages([])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete conversation:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
if (!input.trim() || !agent) return
|
||||
|
||||
let conversationId = currentConversationId
|
||||
|
||||
if (!conversationId) {
|
||||
try {
|
||||
const res = await fetch('/api/conversations', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
agentId: agent.id,
|
||||
title: input.slice(0, 20) || '新对话',
|
||||
}),
|
||||
})
|
||||
const newConversation = await res.json()
|
||||
conversationId = newConversation.id
|
||||
setCurrentConversationId(conversationId)
|
||||
setConversations(prev => [newConversation, ...prev])
|
||||
} catch (error) {
|
||||
console.error('Failed to create conversation:', error)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: 'user',
|
||||
content: input,
|
||||
timestamp: new Date(),
|
||||
}
|
||||
|
||||
const currentInput = input
|
||||
|
||||
setMessages(prev => [...prev, userMessage])
|
||||
setInput('')
|
||||
setSending(true)
|
||||
|
||||
try {
|
||||
await fetch(`/api/conversations/${conversationId}/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
role: 'user',
|
||||
content: currentInput,
|
||||
}),
|
||||
})
|
||||
|
||||
const assistantMessageId = (Date.now() + 1).toString()
|
||||
let assistantContent = ''
|
||||
let upstreamConvId = upstreamConversationId
|
||||
|
||||
setMessages(prev => [...prev, {
|
||||
id: assistantMessageId,
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
timestamp: new Date(),
|
||||
}])
|
||||
|
||||
const response = await fetch(CHAT_API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
inputs: {},
|
||||
query: currentInput,
|
||||
response_mode: 'streaming',
|
||||
conversation_id: upstreamConversationId,
|
||||
user: 'user-' + Date.now(),
|
||||
}),
|
||||
})
|
||||
|
||||
const reader = response.body?.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
if (reader) {
|
||||
let buffer = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() || ''
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
try {
|
||||
const json = JSON.parse(line.slice(6))
|
||||
if (json.conversation_id) {
|
||||
upstreamConvId = json.conversation_id
|
||||
}
|
||||
const token = json.answer || json.message || ''
|
||||
if (token) {
|
||||
assistantContent += token
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === assistantMessageId
|
||||
? { ...msg, content: assistantContent }
|
||||
: msg
|
||||
))
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore parse errors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setUpstreamConversationId(upstreamConvId)
|
||||
|
||||
if (!assistantContent) {
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === assistantMessageId
|
||||
? { ...msg, content: '抱歉，我暂时无法回答这个问题。' }
|
||||
: msg
|
||||
))
|
||||
assistantContent = '抱歉，我暂时无法回答这个问题。'
|
||||
}
|
||||
|
||||
await fetch(`/api/conversations/${conversationId}/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
role: 'assistant',
|
||||
content: assistantContent,
|
||||
}),
|
||||
})
|
||||
} catch (error) {
|
||||
const errorMessage: Message = {
|
||||
id: (Date.now() + 2).toString(),
|
||||
role: 'assistant',
|
||||
content: '抱歉，服务暂时不可用，请稍后再试。',
|
||||
timestamp: new Date(),
|
||||
}
|
||||
setMessages(prev => [...prev, errorMessage])
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuickQuestion = (question: string) => {
|
||||
setInput(question)
|
||||
}
|
||||
|
||||
const suggestedQuestions = [
|
||||
'养老政策有哪些最新变化？',
|
||||
'如何申请养老服务补贴？',
|
||||
'老年人健康管理需要注意什么？',
|
||||
'养老机构如何选择？',
|
||||
]
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!agent) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* 导航栏 */}
|
||||
<nav className="bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">AI</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold">冲浪智能体广场</h1>
|
||||
<p className="text-xs text-blue-100">24小时为您服务</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="text-white/80 hover:text-white transition">首页</Link>
|
||||
<Link href="/agents" className="text-white/80 hover:text-white transition">智能体广场</Link>
|
||||
<Link href="/news" className="text-white/80 hover:text-white transition">新闻动态</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-screen-2xl mx-auto px-6 py-6">
|
||||
<div className="flex gap-4 h-[calc(100vh-200px)]">
|
||||
{/* 左侧历史问答 */}
|
||||
<div className="w-1/6 bg-white rounded-2xl border border-gray-200 p-4 overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<i className="fas fa-history text-blue-600 text-sm"></i>
|
||||
</div>
|
||||
<h3 className="font-medium text-gray-900">历史问答</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={createNewConversation}
|
||||
className="text-blue-600 text-sm flex items-center gap-1 hover:text-blue-700 transition"
|
||||
>
|
||||
<i className="fas fa-plus-circle"></i>
|
||||
<span>新会话</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto space-y-2">
|
||||
{loadingConversations ? (
|
||||
<div className="text-center text-gray-400 text-sm py-4">加载中...</div>
|
||||
) : conversations.length === 0 ? (
|
||||
<div className="text-center text-gray-400 text-sm py-4">暂无对话历史</div>
|
||||
) : (
|
||||
conversations.map((conv) => (
|
||||
<div
|
||||
key={conv.id}
|
||||
onClick={() => loadConversation(conv.id)}
|
||||
className={`p-3 rounded-lg cursor-pointer group relative ${
|
||||
currentConversationId === conv.id
|
||||
? 'bg-blue-50 border border-blue-200'
|
||||
: 'bg-white border border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm text-gray-900 font-medium truncate pr-6">{conv.title}</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{new Date(conv.updatedAt).toLocaleString('zh-CN', {
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
<button
|
||||
onClick={(e) => deleteConversation(conv.id, e)}
|
||||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity text-red-500 hover:text-red-700"
|
||||
title="删除对话"
|
||||
>
|
||||
<i className="fas fa-trash-alt text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 中间聊天区域 */}
|
||||
<div className="w-1/2 flex flex-col">
|
||||
<div className="flex flex-col h-full bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
{/* 聊天头部 */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<i className="fas fa-heartbeat text-white text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">智慧养老服务助手</h3>
|
||||
<p className="text-xs text-blue-100">
|
||||
{sending ? '正在回复...' : '24小时为您服务'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="bg-white/20 px-3 py-1 rounded text-xs">智能小养正在为您服务</span>
|
||||
</div>
|
||||
|
||||
{/* 消息区域 */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6 bg-gray-50">
|
||||
{messages.length === 0 && !sending && (
|
||||
<div className="text-center text-gray-400 mt-8">
|
||||
<i className="fas fa-comments text-4xl mb-4"></i>
|
||||
<p>开始一个新的对话吧</p>
|
||||
</div>
|
||||
)}
|
||||
{messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex gap-3 ${message.role === 'user' ? 'justify-end' : ''}`}
|
||||
>
|
||||
{message.role === 'assistant' && (
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i className="fas fa-robot text-blue-600"></i>
|
||||
</div>
|
||||
)}
|
||||
<div className={`max-w-[80%]`}>
|
||||
<div
|
||||
className={`p-4 rounded-2xl shadow-sm ${
|
||||
message.role === 'user'
|
||||
? 'bg-blue-600 text-white rounded-tr-none'
|
||||
: 'bg-white border border-gray-200 rounded-tl-none'
|
||||
}`}
|
||||
>
|
||||
{message.role === 'user' ? (
|
||||
<p className="text-sm">{message.content}</p>
|
||||
) : (
|
||||
<div className="text-sm prose prose-sm max-w-none">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className={`text-xs mt-1 ${message.role === 'user' ? 'text-right text-blue-400' : 'text-gray-400'}`}>
|
||||
{message.timestamp.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
|
||||
</p>
|
||||
</div>
|
||||
{message.role === 'user' && (
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i className="fas fa-user text-gray-600"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{sending && (
|
||||
<div className="flex gap-3">
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i className="fas fa-robot text-blue-600"></i>
|
||||
</div>
|
||||
<div className="bg-white border border-gray-200 p-4 rounded-2xl rounded-tl-none shadow-sm">
|
||||
<div className="flex gap-1">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }} />
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* 输入区域 */}
|
||||
<div className="border-t border-gray-200 p-4 bg-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder="请输入您的问题，例如：养老政策、健康咨询..."
|
||||
className="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={sending}
|
||||
/>
|
||||
<button
|
||||
className="bg-gray-100 hover:bg-gray-200 px-3 py-2 border-t border-r border-b border-gray-300 transition"
|
||||
disabled={sending}
|
||||
title="语音输入"
|
||||
>
|
||||
<i className="fas fa-microphone text-gray-500"></i>
|
||||
</button>
|
||||
<button
|
||||
className="bg-gray-100 hover:bg-gray-200 px-3 py-2 border-t border-r border-b border-gray-300 transition"
|
||||
disabled={sending}
|
||||
title="附件上传"
|
||||
>
|
||||
<i className="fas fa-paperclip text-gray-500"></i>
|
||||
</button>
|
||||
<button
|
||||
onClick={sendMessage}
|
||||
disabled={sending || !input.trim()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition disabled:bg-blue-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i className="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧服务区域 */}
|
||||
<div className="w-1/3 bg-white rounded-2xl border border-gray-200 p-4 overflow-y-auto">
|
||||
{/* 自助服务 */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<h3 className="font-medium text-gray-900 mb-3 flex items-center gap-2">
|
||||
<i className="fas fa-cog text-blue-600"></i>
|
||||
自助服务
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
|
||||
<i className="fas fa-comments text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700">留言板</p>
|
||||
</div>
|
||||
<div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
|
||||
<i className="fas fa-phone-alt text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700">官方电话</p>
|
||||
</div>
|
||||
<div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
|
||||
<i className="fas fa-file-alt text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700">政策资讯</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 热点问题 */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="font-medium text-gray-900 flex items-center gap-2">
|
||||
<i className="fas fa-fire text-red-500"></i>
|
||||
热点问题
|
||||
</h3>
|
||||
<a href="#" className="text-xs text-blue-600 hover:text-blue-700 transition">
|
||||
更多 <i className="fas fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{suggestedQuestions.map((question, index) => (
|
||||
<li key={index}>
|
||||
<button
|
||||
onClick={() => handleQuickQuestion(question)}
|
||||
className="text-sm text-gray-700 hover:text-blue-600 transition block py-1 text-left w-full"
|
||||
>
|
||||
• {question}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 快捷提问 */}
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<h3 className="font-medium text-gray-900 mb-3 flex items-center gap-2">
|
||||
<i className="fas fa-question-circle text-blue-600"></i>
|
||||
快捷提问
|
||||
</h3>
|
||||
<div className="border-b border-gray-200 mb-3">
|
||||
<div className="flex gap-4 text-sm">
|
||||
<button className="pb-2 border-b-2 border-blue-600 text-blue-600 font-medium">
|
||||
养老服务
|
||||
</button>
|
||||
<button className="pb-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition">
|
||||
健康管理
|
||||
</button>
|
||||
<button className="pb-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition">
|
||||
生活服务
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-1">
|
||||
{['养老政策咨询', '养老机构推荐', '养老服务申请'].map((question, index) => (
|
||||
<li key={index}>
|
||||
<button
|
||||
onClick={() => handleQuickQuestion(question)}
|
||||
className="block py-2 px-3 text-sm text-gray-700 hover:bg-blue-50 rounded transition w-full text-left"
|
||||
>
|
||||
{question}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { prisma } from "@/app/lib/prisma"
|
||||
import { notFound } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
|
||||
export default async function AgentDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}) {
|
||||
const { slug } = await params
|
||||
const agent = await prisma.agent.findUnique({
|
||||
where: { slug },
|
||||
include: { category: true },
|
||||
})
|
||||
|
||||
if (!agent) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* 导航栏 */}
|
||||
<nav className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-6xl mx-auto px-6 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span className="font-bold text-gray-900">冲浪智能体广场</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
|
||||
<Link href="/agents" className="text-blue-600 font-medium">智能体广场</Link>
|
||||
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 py-12">
|
||||
<Link href="/agents" className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 mb-8">
|
||||
← 返回智能体列表
|
||||
</Link>
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 border border-gray-200">
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center text-4xl flex-shrink-0">
|
||||
{agent.icon || "🤖"}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">{agent.name}</h1>
|
||||
{agent.category && (
|
||||
<span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium rounded-full">
|
||||
{agent.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose max-w-none mb-8">
|
||||
<p className="text-gray-600 leading-relaxed">{agent.description}</p>
|
||||
</div>
|
||||
|
||||
{agent.features && (
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">功能特性</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{agent.features.split(",").map((feature, index) => (
|
||||
<span key={index} className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
|
||||
{feature.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 pt-6 border-t border-gray-200">
|
||||
<Link
|
||||
href={`/agents/${agent.slug}/chat`}
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
|
||||
>
|
||||
立即使用
|
||||
</Link>
|
||||
<div className="text-sm text-gray-500">
|
||||
使用次数: <span className="font-semibold text-gray-900">{agent.usageCount}</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
状态: <span className={`font-medium ${agent.status === "active" ? "text-green-600" : "text-gray-600"}`}>
|
||||
{agent.status === "active" ? "运行中" : agent.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
import { prisma } from "@/app/lib/prisma"
|
||||
import Link from "next/link"
|
||||
|
||||
function buildQueryString(params: Record<string, string>) {
|
||||
const sp = new URLSearchParams()
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value) sp.append(key, value)
|
||||
})
|
||||
const qs = sp.toString()
|
||||
return qs ? `?${qs}` : ""
|
||||
}
|
||||
|
||||
export default async function AgentsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ category?: string; q?: string; sort?: string; page?: string }>
|
||||
}) {
|
||||
const params = await searchParams
|
||||
const { category, q, sort, page } = await searchParams
|
||||
const categoryId = category ? parseInt(category) : undefined
|
||||
const searchQuery = q || ""
|
||||
const sortBy = sort || ""
|
||||
const currentPage = page ? parseInt(page) : 1
|
||||
const pageSize = 9
|
||||
|
||||
const where: any = {}
|
||||
if (categoryId) where.categoryId = categoryId
|
||||
if (searchQuery) {
|
||||
where.OR = [
|
||||
{ name: { contains: searchQuery } },
|
||||
{ description: { contains: searchQuery } },
|
||||
]
|
||||
}
|
||||
|
||||
let orderBy: any = { createdAt: "desc" }
|
||||
if (sortBy === "popular") orderBy = { usageCount: "desc" }
|
||||
|
||||
const totalAgents = await prisma.agent.count({ where })
|
||||
const totalPages = Math.ceil(totalAgents / pageSize)
|
||||
|
||||
const agents = await prisma.agent.findMany({
|
||||
where,
|
||||
include: { category: true },
|
||||
orderBy,
|
||||
skip: (currentPage - 1) * pageSize,
|
||||
take: pageSize,
|
||||
})
|
||||
|
||||
const popularAgents = await prisma.agent.findMany({
|
||||
include: { category: true },
|
||||
orderBy: { usageCount: "desc" },
|
||||
take: 6,
|
||||
})
|
||||
|
||||
const categories = await prisma.category.findMany({
|
||||
include: { _count: { select: { agents: true } } },
|
||||
})
|
||||
|
||||
const totalCategories = await prisma.category.count()
|
||||
|
||||
const getPageUrl = (page: number) => {
|
||||
const params: Record<string, string> = {}
|
||||
if (categoryId) params.category = categoryId.toString()
|
||||
if (searchQuery) params.q = searchQuery
|
||||
if (sortBy) params.sort = sortBy
|
||||
if (page > 1) params.page = page.toString()
|
||||
return `/agents${buildQueryString(params)}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<nav className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-6xl mx-auto px-6 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span className="font-bold text-gray-900">冲浪智能体广场</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
|
||||
<Link href="/agents" className="text-blue-600 font-medium">智能体广场</Link>
|
||||
<Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
|
||||
<Link href="/admin/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">
|
||||
登录
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="pt-16">
|
||||
<div className="max-w-6xl mx-auto px-6 py-8">
|
||||
{/* 面包屑 */}
|
||||
<div className="flex items-center gap-2 mb-6 text-sm">
|
||||
<Link href="/" className="text-gray-500 hover:text-blue-600 transition">首页</Link>
|
||||
<span className="text-gray-400">/</span>
|
||||
<span className="text-gray-900 font-medium">智能体广场</span>
|
||||
</div>
|
||||
|
||||
{/* 页面标题 */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">智能体广场</h1>
|
||||
<p className="text-gray-500">浏览并搜索公司发布的 AI 智能体应用，找到最适合您的智能助手</p>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
|
||||
<div className="text-2xl font-bold text-blue-600 mb-1">{totalAgents}</div>
|
||||
<div className="text-sm text-gray-500">智能体总数</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
|
||||
<div className="text-2xl font-bold text-green-600 mb-1">{totalCategories}</div>
|
||||
<div className="text-sm text-gray-500">分类数量</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
|
||||
<div className="text-2xl font-bold text-purple-600 mb-1">5000+</div>
|
||||
<div className="text-sm text-gray-500">活跃用户</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
|
||||
<div className="text-2xl font-bold text-orange-600 mb-1">98%</div>
|
||||
<div className="text-sm text-gray-500">用户满意度</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 搜索与筛选 */}
|
||||
<div className="bg-white rounded-2xl border border-gray-200 p-6 mb-8 shadow-sm">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">搜索与筛选</h3>
|
||||
<form className="flex flex-wrap gap-4 items-center">
|
||||
<div className="flex-1 min-w-64 relative">
|
||||
<svg className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<input
|
||||
name="q"
|
||||
type="text"
|
||||
defaultValue={searchQuery}
|
||||
placeholder="搜索智能体名称或简介..."
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
name="category"
|
||||
defaultValue={categoryId || ""}
|
||||
className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">全部分类</option>
|
||||
{categories.map((cat) => (
|
||||
<option key={cat.id} value={cat.id}>{cat.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
name="sort"
|
||||
defaultValue={sortBy}
|
||||
className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">默认排序</option>
|
||||
<option value="date">最新发布</option>
|
||||
<option value="popular">最受欢迎</option>
|
||||
</select>
|
||||
<button type="submit" className="px-6 py-3 bg-blue-600 text-white rounded-xl text-sm hover:bg-blue-700 transition">
|
||||
搜索
|
||||
</button>
|
||||
<Link href="/agents" className="px-4 py-3 bg-gray-100 text-gray-600 rounded-xl text-sm hover:bg-gray-200 transition">
|
||||
重置
|
||||
</Link>
|
||||
</form>
|
||||
<div className="flex flex-wrap gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-400 self-center mr-2">快捷分类：</span>
|
||||
<Link href="/agents" className={`px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-all ${!categoryId ? "bg-blue-50 border-blue-400 text-blue-600" : ""}`}>
|
||||
全部
|
||||
</Link>
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/agents?category=${cat.id}`}
|
||||
className={`px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-all ${categoryId === cat.id ? "bg-blue-50 border-blue-400 text-blue-600" : ""}`}
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 热门推荐 */}
|
||||
{popularAgents.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">热门推荐</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{popularAgents.map((agent) => (
|
||||
<Link
|
||||
key={agent.id}
|
||||
href={`/agents/${agent.slug}`}
|
||||
className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-blue-300 shadow-sm hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-3xl flex-shrink-0">
|
||||
{agent.icon || "🤖"}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 truncate">{agent.name}</h3>
|
||||
{agent.category && (
|
||||
<span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600">
|
||||
{agent.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-4">{agent.description}</p>
|
||||
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||
<span>使用 {agent.usageCount} 次</span>
|
||||
<span className="text-blue-600 font-medium">查看详情 →</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 智能体列表头部 */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold text-gray-900">智能体列表</h2>
|
||||
<span className="text-sm text-gray-500">显示 {totalAgents} 个智能体</span>
|
||||
</div>
|
||||
|
||||
{/* 智能体列表 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{agents.map((agent) => (
|
||||
<Link
|
||||
key={agent.id}
|
||||
href={`/agents/${agent.slug}`}
|
||||
className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-blue-300 shadow-sm hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-3xl flex-shrink-0">
|
||||
{agent.icon || "🤖"}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 truncate">{agent.name}</h3>
|
||||
{agent.category && (
|
||||
<span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600">
|
||||
{agent.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-4">{agent.description}</p>
|
||||
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||
<span>使用 {agent.usageCount} 次</span>
|
||||
<span className={`font-medium ${agent.status === "active" ? "text-green-600" : "text-gray-600"}`}>
|
||||
{agent.status === "active" ? "运行中" : agent.status}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 空状态 */}
|
||||
{agents.length === 0 && (
|
||||
<div className="text-center py-24 bg-gray-50 rounded-2xl">
|
||||
<div className="text-7xl mb-6">🔍</div>
|
||||
<h3 className="text-xl font-medium text-gray-700 mb-3">未找到匹配的智能体</h3>
|
||||
<p className="text-gray-400 mb-6 max-w-md mx-auto">试试调整筛选条件或关键词，或者浏览我们的热门推荐</p>
|
||||
<Link href="/agents" className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition">
|
||||
重置筛选
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-8 px-2">
|
||||
<span className="text-sm text-gray-500">
|
||||
第 {currentPage} 页，共 {totalPages} 页
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href={getPageUrl(currentPage - 1)}
|
||||
className={`px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition ${currentPage <= 1 ? "opacity-40 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
上一页
|
||||
</Link>
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
|
||||
<Link
|
||||
key={pageNum}
|
||||
href={getPageUrl(pageNum)}
|
||||
className={`w-8 h-8 flex items-center justify-center text-sm rounded-lg transition ${currentPage === pageNum ? "bg-blue-600 text-white" : "hover:bg-gray-50 text-gray-600"}`}
|
||||
>
|
||||
{pageNum}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Link
|
||||
href={getPageUrl(currentPage + 1)}
|
||||
className={`px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition ${currentPage >= totalPages ? "opacity-40 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
下一页
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 底部 */}
|
||||
<div className="border-t border-gray-200 py-8 mt-16">
|
||||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xs">AI</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm text-center">
|
||||
© 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
|
||||
</div>
|
||||
<div className="flex gap-4 text-xs text-gray-400">
|
||||
<a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
|
||||
<a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
|
||||
<a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user