From f81414c88f8998681fa311efdbf399c9a9c3ea4e Mon Sep 17 00:00:00 2001 From: Xin Wang Date: Fri, 5 Jun 2026 10:56:13 +0800 Subject: [PATCH] Add assistant creation flows with prompt and workflow modes. Build the prompt-mode creation form, add a workflow page, and reorganize sidebar navigation into assistant sub-routes. Co-authored-by: Cursor --- src/components/layout/AppShell.tsx | 11 +- src/components/layout/Sidebar.tsx | 174 ++++++-- src/components/pages/AssistantPage.tsx | 398 +++++++++++++++++- .../pages/AssistantWorkflowPage.tsx | 120 ++++++ src/components/pages/HomePage.tsx | 2 +- 5 files changed, 664 insertions(+), 41 deletions(-) create mode 100644 src/components/pages/AssistantWorkflowPage.tsx diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx index ccdf7b8..f05960e 100644 --- a/src/components/layout/AppShell.tsx +++ b/src/components/layout/AppShell.tsx @@ -6,6 +6,7 @@ import { Topbar } from "./Topbar"; import { HomePage } from "@/components/pages/HomePage"; import { AssistantPage } from "@/components/pages/AssistantPage"; +import { AssistantWorkflowPage } from "@/components/pages/AssistantWorkflowPage"; import { ComponentsPage } from "@/components/pages/ComponentsPage"; import { HistoryPage } from "@/components/pages/HistoryPage"; import { TestPage } from "@/components/pages/TestPage"; @@ -14,7 +15,8 @@ import { ProfilePage } from "@/components/pages/ProfilePage"; export type NavKey = | "home" - | "assistants" + | "assistant-prompt" + | "assistant-workflow" | "components" | "history" | "test" @@ -38,8 +40,11 @@ export function AppShell() {
- {active === "home" && } - {active === "assistants" && } + {active === "home" && } + + {active === "assistant-prompt" && } + {active === "assistant-workflow" && } + {active === "components" && } {active === "history" && } {active === "test" && } diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 14412d6..d119746 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -5,6 +5,7 @@ import { Boxes, ChevronLeft, Clock3, + FileText, Home, PlayCircle, User, @@ -13,20 +14,6 @@ import { } from "lucide-react"; import type { NavKey } from "./AppShell"; -const navItems: Array<{ - key: NavKey; - label: string; - icon: React.ComponentType<{ size?: number }>; -}> = [ - { key: "home", label: "控制台", icon: Home }, - { key: "assistants", label: "创建助手", icon: Bot }, - { key: "components", label: "组件库", icon: Boxes }, - { key: "history", label: "历史记录", icon: Clock3 }, - { key: "test", label: "测试助手", icon: PlayCircle }, - { key: "workflow", label: "工作流", icon: Workflow }, - { key: "profile", label: "个人中心", icon: User }, -]; - type SidebarProps = { active: NavKey; collapsed: boolean; @@ -34,12 +21,37 @@ type SidebarProps = { onToggle: () => void; }; +const mainItems: Array<{ + key: NavKey; + label: string; + icon: React.ComponentType<{ size?: number }>; +}> = [ + { key: "home", label: "控制台", icon: Home }, + { key: "components", label: "组件库", icon: Boxes }, + { key: "history", label: "历史记录", icon: Clock3 }, + { key: "test", label: "测试助手", icon: PlayCircle }, + { key: "workflow", label: "工作流", icon: Workflow }, + { key: "profile", label: "个人中心", icon: User }, +]; + +const assistantSubItems: Array<{ + key: NavKey; + label: string; + icon: React.ComponentType<{ size?: number }>; +}> = [ + { key: "assistant-prompt", label: "提示词模式", icon: FileText }, + { key: "assistant-workflow", label: "工作流模式", icon: Workflow }, +]; + export function Sidebar({ active, collapsed, onNavigate, onToggle, }: SidebarProps) { + const assistantActive = + active === "assistant-prompt" || active === "assistant-workflow"; + return ( ); +} + +function NavButton({ + active, + collapsed, + icon: Icon, + label, + onClick, +}: { + active: boolean; + collapsed: boolean; + icon: React.ComponentType<{ size?: number }>; + label: string; + onClick: () => void; +}) { + return ( + + ); +} + +function SubNavButton({ + active, + collapsed, + icon: Icon, + label, + onClick, +}: { + active: boolean; + collapsed: boolean; + icon: React.ComponentType<{ size?: number }>; + label: string; + onClick: () => void; +}) { + return ( + + ); } \ No newline at end of file diff --git a/src/components/pages/AssistantPage.tsx b/src/components/pages/AssistantPage.tsx index ab09ff8..38082ae 100644 --- a/src/components/pages/AssistantPage.tsx +++ b/src/components/pages/AssistantPage.tsx @@ -1,3 +1,397 @@ +"use client"; + +import { useState } from "react"; +import { + Bot, + Brain, + Database, + Mic, + Rocket, + Save, + Sparkles, + Volume2, +} from "lucide-react"; + +type AssistantForm = { + name: string; + scene: string; + greeting: string; + model: string; + asr: string; + voice: string; + knowledgeBase: string; + enableInterrupt: boolean; + enablePublish: boolean; +}; + + export function AssistantPage() { - return
小助手管理
; - } \ No newline at end of file + const [form, setForm] = useState({ + name: "政务视频咨询助手", + scene: "政务服务", + greeting: "您好，我是 AI 视频助手，请问有什么可以帮您？", + model: "DeepSeek-V3", + asr: "SenseVoice", + voice: "晓宁", + knowledgeBase: "政务政策知识库", + enableInterrupt: true, + enablePublish: false, + }); + + function updateForm( + key: K, + value: AssistantForm[K], + ) { + setForm((prev) => ({ + ...prev, + [key]: value, + })); + } + + return ( +
+
+
+
+ +

创建助手

+
+

+ 通过提示词、模型、语音和知识库快速创建 AI 视频助手 +

+
+ +
+ + + +
+
+ +
+
+ } + title="基础信息" + description="定义助手名称、业务场景和开场白" + > +
+ updateForm("name", value)} + placeholder="请输入助手名称" + /> + + updateForm("scene", value)} + options={["政务服务", "客户服务", "教育咨询", "医疗导诊", "企业培训"]} + /> +
+ + updateForm("greeting", value)} + placeholder="请输入助手开场白" + /> + + + } + title="模型配置" + description="选择大语言模型和知识库能力" + > +
+ updateForm("model", value)} + options={["DeepSeek-V3", "Qwen-Max", "Kimi-K2", "Doubao-Pro", "GPT-4o"]} + /> + + updateForm("knowledgeBase", value)} + options={["政务政策知识库", "售后知识库", "教育课程知识库", "医疗问答知识库"]} + /> +
+ + + } + title="语音配置" + description="配置语音识别模型和播报声音" + > +
+ updateForm("asr", value)} + options={["SenseVoice", "Paraformer", "Whisper", "FunASR"]} + /> + + updateForm("voice", value)} + options={["晓宁", "晓美", "晓宇", "晓晨"]} + /> +
+ + + } + title="交互策略" + description="设置实时视频对话时的交互体验" + > + updateForm("enableInterrupt", checked)} + /> + + updateForm("enablePublish", checked)} + /> + +
+ + +
+
+ ); +} + +function SectionCard({ + icon, + title, + description, + children, +}: { + icon: React.ReactNode; + title: string; + description: string; + children: React.ReactNode; +}) { + return ( +
+
+
+ {icon} +
+ +
+

{title}

+

{description}

+
+
+ +
{children}
+
+ ); +} + +function TextField({ + label, + value, + placeholder, + onChange, +}: { + label: string; + value: string; + placeholder?: string; + onChange: (value: string) => void; +}) { + return ( + + ); +} + +function TextAreaField({ + label, + value, + placeholder, + onChange, +}: { + label: string; + value: string; + placeholder?: string; + onChange: (value: string) => void; +}) { + return ( +