Simplify assistant creation form by focusing on core configuration fields.

Remove business scenario, immediate publish, and preview panel; add prompt input to basic info.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Xin Wang
2026-06-05 13:13:37 +08:00
parent 9c399fb1ed
commit 762ba2b570

View File

@@ -4,12 +4,10 @@ import { useState } from "react";
import {
Bot,
Brain,
Database,
Mic,
Rocket,
Save,
Sparkles,
Volume2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -33,28 +31,27 @@ import {
type AssistantForm = {
name: string;
scene: string;
greeting: string;
prompt: string;
model: string;
asr: string;
voice: string;
knowledgeBase: string;
enableInterrupt: boolean;
enablePublish: boolean;
};
export function AssistantPage() {
const [form, setForm] = useState<AssistantForm>({
name: "政务视频咨询助手",
scene: "政务服务",
greeting: "您好,我是 AI 视频助手,请问有什么可以帮您?",
prompt:
"你是一名专业的政务视频咨询助手,负责为市民提供政策解读、办事指南和常见问题解答。\n\n请遵循以下原则\n1. 回答准确、简洁,使用通俗易懂的语言\n2. 不确定的信息应明确告知,不编造政策内容\n3. 涉及具体办事流程时,引导用户前往官方渠道核实",
model: "DeepSeek-V3",
asr: "SenseVoice",
voice: "晓宁",
knowledgeBase: "政务政策知识库",
enableInterrupt: true,
enablePublish: false,
});
function updateForm<K extends keyof AssistantForm>(
@@ -93,28 +90,18 @@ export function AssistantPage() {
</div>
<div className="grid grid-cols-[1fr_360px] gap-5">
<div className="space-y-5">
<div className="space-y-5">
<SectionCard
icon={<Bot size={18} />}
title="基础信息"
description="定义助手名称、业务场景和开场白"
description="定义助手名称、开场白和提示词"
>
<div className="grid grid-cols-2 gap-4">
<TextField
label="助手名称"
value={form.name}
onChange={(value) => updateForm("name", value)}
placeholder="请输入助手名称"
/>
<SelectField
label="业务场景"
value={form.scene}
onChange={(value) => updateForm("scene", value)}
options={["政务服务", "客户服务", "教育咨询", "医疗导诊", "企业培训"]}
/>
</div>
<TextField
label="助手名称"
value={form.name}
onChange={(value) => updateForm("name", value)}
placeholder="请输入助手名称"
/>
<TextAreaField
label="开场白"
@@ -122,6 +109,14 @@ export function AssistantPage() {
onChange={(value) => updateForm("greeting", value)}
placeholder="请输入助手开场白"
/>
<TextAreaField
label="提示词"
value={form.prompt}
onChange={(value) => updateForm("prompt", value)}
placeholder="请输入提示词,描述助手的角色、能力和回答要求"
rows={8}
/>
</SectionCard>
<SectionCard
@@ -179,17 +174,7 @@ export function AssistantPage() {
checked={form.enableInterrupt}
onChange={(checked) => updateForm("enableInterrupt", checked)}
/>
<ToggleRow
title="创建后立即发布"
description="开启后,创建完成的助手会立即进入可用状态"
checked={form.enablePublish}
onChange={(checked) => updateForm("enablePublish", checked)}
/>
</SectionCard>
</div>
<PreviewPanel form={form} />
</div>
</div>
);
@@ -256,11 +241,13 @@ function TextAreaField({
label,
value,
placeholder,
rows = 4,
onChange,
}: {
label: string;
value: string;
placeholder?: string;
rows?: number;
onChange: (value: string) => void;
}) {
return (
@@ -270,7 +257,7 @@ function TextAreaField({
value={value}
placeholder={placeholder}
onChange={(event) => onChange(event.target.value)}
rows={4}
rows={rows}
className="resize-none border-[#1b2233] bg-[#0d121d] text-white placeholder:text-[#5d6880]"
/>
</label>
@@ -333,81 +320,4 @@ function ToggleRow({
<Switch checked={checked} onCheckedChange={onChange} />
</div>
);
}
function PreviewPanel({ form }: { form: AssistantForm }) {
return (
<aside className="sticky top-0 h-fit rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
<div className="mb-5 flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-400 text-[#04121a]">
<Bot size={24} />
</div>
<div>
<h2 className="font-bold"></h2>
<p className="text-sm text-[#5d6880]"></p>
</div>
</div>
<div className="rounded-2xl border border-[#1b2233] bg-[#0d121d] p-5">
<div className="text-xl font-bold">{form.name || "未命名助手"}</div>
<div className="mt-2 inline-flex rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-xs text-blue-400">
{form.scene}
</div>
<p className="mt-4 text-sm leading-6 text-[#9aa6bd]">
{form.greeting || "暂无开场白"}
</p>
</div>
<div className="mt-5 space-y-3">
<PreviewItem icon={<Brain size={16} />} label="模型" value={form.model} />
<PreviewItem
icon={<Database size={16} />}
label="知识库"
value={form.knowledgeBase}
/>
<PreviewItem icon={<Mic size={16} />} label="识别" value={form.asr} />
<PreviewItem icon={<Volume2 size={16} />} label="声音" value={form.voice} />
</div>
<div className="mt-5 rounded-xl border border-[#1b2233] bg-[#0d121d] p-4">
<div className="mb-3 text-sm font-semibold"></div>
<div className="flex items-center justify-between text-sm">
<span className="text-[#5d6880]"></span>
<span className={form.enableInterrupt ? "text-green-400" : "text-[#5d6880]"}>
{form.enableInterrupt ? "开启" : "关闭"}
</span>
</div>
<div className="mt-2 flex items-center justify-between text-sm">
<span className="text-[#5d6880]"></span>
<span className={form.enablePublish ? "text-green-400" : "text-[#5d6880]"}>
{form.enablePublish ? "开启" : "关闭"}
</span>
</div>
</div>
</aside>
);
}
function PreviewItem({
icon,
label,
value,
}: {
icon: React.ReactNode;
label: string;
value: string;
}) {
return (
<div className="flex items-center justify-between rounded-xl border border-[#1b2233] bg-[#0d121d] p-3">
<div className="flex items-center gap-2 text-sm text-[#5d6880]">
<span className="text-blue-400">{icon}</span>
{label}
</div>
<div className="text-sm font-semibold text-[#9aa6bd]">{value}</div>
</div>
);
}