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