root
f2d7037ca2
- Add success/error feedback messages near submit buttons in all admin forms - Display success prompt for 1s before redirect after save - Show API error details on save failure - Add isFeatured/featuredOrder fields to Agent model and admin UI - Add difyApiUrl/difyApiKey fields for per-agent Dify API configuration - Show featured badge column in agent admin list - Display featured agents on homepage sorted by order - Refactor chat page streaming with AbortController and stable userId - Improve Dify API proxy to use per-agent credentials
315 lines
11 KiB
TypeScript
315 lines
11 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
|
||
difyApiUrl?: string
|
||
difyApiKey?: string
|
||
status?: string
|
||
isFeatured?: boolean
|
||
featuredOrder?: number
|
||
}
|
||
}) {
|
||
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') : '',
|
||
difyApiUrl: agent?.difyApiUrl || "",
|
||
difyApiKey: agent?.difyApiKey || "",
|
||
status: agent?.status || "active",
|
||
isFeatured: agent?.isFeatured ?? false,
|
||
featuredOrder: agent?.featuredOrder ?? 0,
|
||
})
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState("")
|
||
const [success, setSuccess] = useState(false)
|
||
|
||
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,
|
||
isFeatured: formData.isFeatured,
|
||
featuredOrder: formData.featuredOrder,
|
||
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) {
|
||
setSuccess(true)
|
||
await new Promise(r => setTimeout(r, 1000))
|
||
router.push("/admin/agents")
|
||
} else {
|
||
const data = await res.json().catch(() => ({}))
|
||
setError(data.error || "保存失败")
|
||
}
|
||
} 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="bg-orange-50 border border-orange-200 rounded-xl p-4">
|
||
<h3 className="text-sm font-semibold text-orange-800 mb-3">热门智能体配置</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<label className="flex items-center gap-3 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={formData.isFeatured}
|
||
onChange={(e) => setFormData({ ...formData, isFeatured: e.target.checked })}
|
||
className="w-5 h-5 text-orange-600 border-gray-300 rounded focus:ring-orange-500"
|
||
/>
|
||
<span className="text-sm font-medium text-gray-700">设为热门智能体（展示在首页热门区域）</span>
|
||
</label>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
排序（数字越小越靠前）
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
value={formData.featuredOrder}
|
||
onChange={(e) => setFormData({ ...formData, featuredOrder: parseInt(e.target.value) || 0 })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</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="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Dify API 地址
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={formData.difyApiUrl}
|
||
onChange={(e) => setFormData({ ...formData, difyApiUrl: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="https://api.dify.ai/v1"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
Dify API Key
|
||
</label>
|
||
<input
|
||
type="password"
|
||
value={formData.difyApiKey}
|
||
onChange={(e) => setFormData({ ...formData, difyApiKey: e.target.value })}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||
placeholder="app-xxxxxxxxxxxx"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{success && (
|
||
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
|
||
保存成功
|
||
</div>
|
||
)}
|
||
|
||
{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="flex gap-4">
|
||
<button
|
||
type="submit"
|
||
disabled={loading || success}
|
||
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>
|
||
)
|
||
}
|