feat(frontend): add template library and extract create-assistant page
Introduce a split-view template library for creating assistants from presets, share selection cards between create and template flows, and move the choose step out of AssistantPage into CreateAssistantPage. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Xin Wang
@@ -0,0 +1,240 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Boxes,
|
||||
ChevronLeft,
|
||||
Loader2,
|
||||
MessageSquareText,
|
||||
Rocket,
|
||||
Terminal,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
ListPageLayout,
|
||||
ListPageSection,
|
||||
} from "@/components/layout/list-page-layout";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
SelectionOptionCard,
|
||||
selectionOptionGridClassName,
|
||||
} from "@/components/ui/selection-option-card";
|
||||
import {
|
||||
assistantsApi,
|
||||
type AssistantType as ApiAssistantType,
|
||||
type AssistantUpsert,
|
||||
type KnowledgeRetrievalConfig,
|
||||
} from "@/lib/api";
|
||||
import { defaultTurnConfig } from "@/lib/turn-config";
|
||||
|
||||
type BuildMethod = "提示词" | "工作流" | "智能体平台" | "OpenCode";
|
||||
|
||||
const typeFromBuildMethod: Record<
|
||||
Exclude<BuildMethod, "智能体平台">,
|
||||
ApiAssistantType
|
||||
> = {
|
||||
提示词: "prompt",
|
||||
工作流: "workflow",
|
||||
OpenCode: "opencode",
|
||||
};
|
||||
|
||||
type AssistantTypeOption = {
|
||||
type: BuildMethod;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
/** 提示词、工作流、智能体平台已落地；OpenCode 暂时显示即将上线 */
|
||||
available: boolean;
|
||||
};
|
||||
|
||||
const assistantTypeOptions: AssistantTypeOption[] = [
|
||||
{
|
||||
type: "提示词",
|
||||
label: "使用提示词构建",
|
||||
description: "通过提示词、模型与语音快速搭建对话助手，适合大多数场景。",
|
||||
icon: <MessageSquareText size={20} />,
|
||||
available: true,
|
||||
},
|
||||
{
|
||||
type: "工作流",
|
||||
label: "使用工作流构建",
|
||||
description: "用可视化编排串联多个节点，适合多步骤、带分支的复杂流程。",
|
||||
icon: <Workflow size={20} />,
|
||||
available: true,
|
||||
},
|
||||
{
|
||||
type: "智能体平台",
|
||||
label: "从智能体平台创建",
|
||||
description:
|
||||
"接入 Dify、FastGPT 等智能体平台，复用平台中的提示词、知识库和工作流配置。",
|
||||
icon: <Boxes size={20} />,
|
||||
available: true,
|
||||
},
|
||||
{
|
||||
type: "OpenCode",
|
||||
label: "使用 OpenCode 构建",
|
||||
description: "对接 OpenCode 服务，通过提示词驱动代码助手并支持实时语音对话。",
|
||||
icon: <Terminal size={20} />,
|
||||
available: false,
|
||||
},
|
||||
];
|
||||
|
||||
function defaultKnowledgeRetrievalConfig(): KnowledgeRetrievalConfig {
|
||||
return {
|
||||
mode: "automatic",
|
||||
topN: 5,
|
||||
scoreThreshold: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function baseUpsert(over: Partial<AssistantUpsert>): AssistantUpsert {
|
||||
return {
|
||||
name: "",
|
||||
type: "prompt",
|
||||
runtimeMode: "pipeline",
|
||||
greeting: "",
|
||||
enableInterrupt: true,
|
||||
turnConfig: defaultTurnConfig(),
|
||||
startup: {
|
||||
executionMode: "sequential",
|
||||
openingMode: "interruptible",
|
||||
entryMode: "wait_user",
|
||||
actions: [],
|
||||
openingMessage: null,
|
||||
},
|
||||
visionEnabled: false,
|
||||
visionModelResourceId: null,
|
||||
modelResourceIds: {},
|
||||
knowledgeBaseId: null,
|
||||
knowledgeRetrievalConfig: defaultKnowledgeRetrievalConfig(),
|
||||
toolIds: [],
|
||||
prompt: "",
|
||||
dynamicVariableDefinitions: {},
|
||||
apiUrl: "",
|
||||
apiKey: "",
|
||||
appId: "",
|
||||
graph: {},
|
||||
...over,
|
||||
};
|
||||
}
|
||||
|
||||
export function CreateAssistantPage() {
|
||||
const router = useRouter();
|
||||
const [draftName, setDraftName] = useState("");
|
||||
const [draftType, setDraftType] = useState<BuildMethod | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
async function handleCreate() {
|
||||
if (!draftName.trim() || !draftType || creating) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCreating(true);
|
||||
setCreateError(null);
|
||||
try {
|
||||
const assistantType: ApiAssistantType =
|
||||
draftType === "智能体平台"
|
||||
? "dify"
|
||||
: typeFromBuildMethod[draftType];
|
||||
const created = await assistantsApi.create(
|
||||
baseUpsert({
|
||||
name: draftName.trim(),
|
||||
type: assistantType,
|
||||
}),
|
||||
);
|
||||
router.push(`/assistants/${created.id}`);
|
||||
} catch (error) {
|
||||
setCreateError(error instanceof Error ? error.message : "创建失败");
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ListPageLayout
|
||||
title="创建助手"
|
||||
className="max-w-[1180px]"
|
||||
description="先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。"
|
||||
action={
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground sm:w-auto"
|
||||
onClick={() => router.push("/assistants")}
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
返回列表
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<ListPageSection>
|
||||
<label className="block">
|
||||
<div className="mb-2 text-sm font-medium text-foreground">助手名称</div>
|
||||
<Input
|
||||
value={draftName}
|
||||
autoFocus
|
||||
onChange={(event) => setDraftName(event.target.value)}
|
||||
placeholder="请输入助手名称"
|
||||
className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
|
||||
/>
|
||||
</label>
|
||||
</ListPageSection>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div className="text-sm font-medium text-foreground">构建方式</div>
|
||||
|
||||
<div className={selectionOptionGridClassName}>
|
||||
{assistantTypeOptions.map((option) => (
|
||||
<SelectionOptionCard
|
||||
key={option.type}
|
||||
selected={draftType === option.type}
|
||||
icon={option.icon}
|
||||
title={option.label}
|
||||
description={option.description}
|
||||
onClick={() => setDraftType(option.type)}
|
||||
unselectedTrailing={
|
||||
!option.available ? (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-6 bg-surface-strong px-3 text-xs text-muted-foreground"
|
||||
>
|
||||
即将上线
|
||||
</Badge>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
{createError && (
|
||||
<span className="text-xs text-destructive">{createError}</span>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-hairline-strong text-muted-foreground hover:text-foreground"
|
||||
disabled={creating}
|
||||
onClick={() => router.push("/assistants")}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
className="gap-2"
|
||||
disabled={!draftName.trim() || !draftType || creating}
|
||||
onClick={() => void handleCreate()}
|
||||
>
|
||||
{creating ? (
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
) : (
|
||||
<Rocket size={16} />
|
||||
)}
|
||||
创建助手
|
||||
</Button>
|
||||
</div>
|
||||
</ListPageLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user