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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user