root
362c37fb42
- Add hotQuestions and quickQuestions fields to agent model - Update admin form with textarea inputs for hot/quick questions - Make chat page display dynamic agent data (name, icon, questions) - Widen center chat area to 60% for better readability - Add enterprise service category and 3 new agents (jiaotou, promotion, group-policy) - Update Prisma schema formatting and seed data
234 lines
7.6 KiB
TypeScript
234 lines
7.6 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
|
||
export default function AgentForm({
|
||
categories,
|
||
agent,
|
||
}: {
|
||
categories: { id: number; name: string }[]
|
||
agent?: {
|
||
id?: number
|
||
name: string
|
||
slug: string
|
||
description: string
|
||
icon?: string
|
||
categoryId?: number
|
||
features?: string
|
||
hotQuestions?: string
|
||
quickQuestions?: string
|
||
status?: string
|
||
}
|
||
}) {
|
||
const router = useRouter()
|
||
const [formData, setFormData] = useState({
|
||
name: agent?.name || "",
|
||
slug: agent?.slug || "",
|
||
description: agent?.description || "",
|
||
icon: agent?.icon || "",
|
||
categoryId: agent?.categoryId || "",
|
||
features: agent?.features || "",
|
||
hotQuestions: agent?.hotQuestions ? JSON.parse(agent.hotQuestions).join('\n') : '',
|
||
quickQuestions: agent?.quickQuestions ? JSON.parse(agent.quickQuestions).join('\n') : '',
|
||
status: agent?.status || "active",
|
||
})
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState("")
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setLoading(true)
|
||
setError("")
|
||
|
||
try {
|
||
const url = agent?.id
|
||
? `/api/admin/agents/${agent.id}`
|
||
: "/api/admin/agents"
|
||
|
||
const method = agent?.id ? "PUT" : "POST"
|
||
|
||
const body = {
|
||
...formData,
|
||
hotQuestions: JSON.stringify(formData.hotQuestions.split('\n').filter(q => q.trim())),
|
||
quickQuestions: JSON.stringify(formData.quickQuestions.split('\n').filter(q => q.trim())),
|
||
}
|
||
|
||
const res = await fetch(url, {
|
||
method,
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(body),
|
||
})
|
||
|
||
if (res.ok) {
|
||
router.push("/admin/agents")
|
||
} else {
|
||
setError("保存失败")
|
||
}
|
||
} catch (err) {
|
||
setError("保存失败，请稍后重试")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
名称
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={formData.name}
|
||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="智能客服助手"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Slug
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={formData.slug}
|
||
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="smart-customer-service"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
描述
|
||
</label>
|
||
<textarea
|
||
required
|
||
rows={4}
|
||
value={formData.description}
|
||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="描述智能体的功能和特点..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
图标 (Emoji)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.icon}
|
||
onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="🤖"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
分类
|
||
</label>
|
||
<select
|
||
value={formData.categoryId}
|
||
onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="">请选择分类</option>
|
||
{categories.map((cat) => (
|
||
<option key={cat.id} value={cat.id}>
|
||
{cat.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
状态
|
||
</label>
|
||
<select
|
||
value={formData.status}
|
||
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="active">运行中</option>
|
||
<option value="maintenance">维护中</option>
|
||
<option value="inactive">未激活</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
功能特性 (逗号分隔)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.features}
|
||
onChange={(e) => setFormData({ ...formData, features: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="智能问答, 知识库查询, 工单提交"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
热点问题（每行一个）
|
||
</label>
|
||
<textarea
|
||
rows={5}
|
||
value={formData.hotQuestions}
|
||
onChange={(e) => setFormData({ ...formData, hotQuestions: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="养老政策有哪些最新变化？ 如何申请养老服务补贴？ 老年人健康管理需要注意什么？ 养老机构如何选择？"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
快捷提问（每行一个）
|
||
</label>
|
||
<textarea
|
||
rows={5}
|
||
value={formData.quickQuestions}
|
||
onChange={(e) => setFormData({ ...formData, quickQuestions: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="养老政策咨询 养老机构推荐 养老服务申请"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:bg-blue-400"
|
||
>
|
||
{loading ? "保存中..." : "保存"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => window.history.back()}
|
||
className="border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)
|
||
}
|