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 <cursoragent@cursor.com>

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 <div className="text-3xl font-bold">小助手管理</div>;
-  }
+  const [form, setForm] = useState<AssistantForm>({
+    name: "政务视频咨询助手",
+    scene: "政务服务",
+    greeting: "您好，我是 AI 视频助手，请问有什么可以帮您？",
+    model: "DeepSeek-V3",
+    asr: "SenseVoice",
+    voice: "晓宁",
+    knowledgeBase: "政务政策知识库",
+    enableInterrupt: true,
+    enablePublish: false,
+  });
+
+  function updateForm<K extends keyof AssistantForm>(
+    key: K,
+    value: AssistantForm[K],
+  ) {
+    setForm((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <span className="h-3 w-3 rounded-full bg-blue-400 shadow-[0_0_0_4px_rgba(46,161,255,.16),0_0_14px_rgba(46,161,255,.35)]" />
+            <h1 className="text-3xl font-bold">创建助手</h1>
+          </div>
+          <p className="mt-2 text-sm text-[#5d6880]">
+            通过提示词、模型、语音和知识库快速创建 AI 视频助手
+          </p>
+        </div>
+
+        <div className="flex gap-3">
+          <button className="flex h-10 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-4 text-sm font-semibold text-[#9aa6bd] hover:text-white">
+            <Save size={16} />
+            保存草稿
+          </button>
+
+          <button className="flex h-10 items-center gap-2 rounded-xl bg-blue-500 px-4 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]">
+            <Rocket size={16} />
+            创建助手
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[1fr_360px] gap-5">
+        <div className="space-y-5">
+          <SectionCard
+            icon={<Bot size={18} />}
+            title="基础信息"
+            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>
+
+            <TextAreaField
+              label="开场白"
+              value={form.greeting}
+              onChange={(value) => updateForm("greeting", value)}
+              placeholder="请输入助手开场白"
+            />
+          </SectionCard>
+
+          <SectionCard
+            icon={<Brain size={18} />}
+            title="模型配置"
+            description="选择大语言模型和知识库能力"
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <SelectField
+                label="大语言模型"
+                value={form.model}
+                onChange={(value) => updateForm("model", value)}
+                options={["DeepSeek-V3", "Qwen-Max", "Kimi-K2", "Doubao-Pro", "GPT-4o"]}
+              />
+
+              <SelectField
+                label="知识库"
+                value={form.knowledgeBase}
+                onChange={(value) => updateForm("knowledgeBase", value)}
+                options={["政务政策知识库", "售后知识库", "教育课程知识库", "医疗问答知识库"]}
+              />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            icon={<Mic size={18} />}
+            title="语音配置"
+            description="配置语音识别模型和播报声音"
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <SelectField
+                label="语音识别"
+                value={form.asr}
+                onChange={(value) => updateForm("asr", value)}
+                options={["SenseVoice", "Paraformer", "Whisper", "FunASR"]}
+              />
+
+              <SelectField
+                label="播报声音"
+                value={form.voice}
+                onChange={(value) => updateForm("voice", value)}
+                options={["晓宁", "晓美", "晓宇", "晓晨"]}
+              />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            icon={<Sparkles size={18} />}
+            title="交互策略"
+            description="设置实时视频对话时的交互体验"
+          >
+            <ToggleRow
+              title="允许用户打断"
+              description="用户说话时，助手可以停止当前播报并重新理解用户输入"
+              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>
+  );
+}
+
+function SectionCard({
+  icon,
+  title,
+  description,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
+      <div className="mb-5 flex items-start gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
+          {icon}
+        </div>
+
+        <div>
+          <h2 className="font-bold">{title}</h2>
+          <p className="mt-1 text-sm text-[#5d6880]">{description}</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">{children}</div>
+    </section>
+  );
+}
+
+function TextField({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <input
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+      />
+    </label>
+  );
+}
+
+function TextAreaField({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <textarea
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        rows={4}
+        className="w-full resize-none rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 py-3 text-sm leading-6 text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+      />
+    </label>
+  );
+}
+
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition focus:border-blue-500"
+      >
+        {options.map((item) => (
+          <option key={item} value={item} className="bg-[#0d121d]">
+            {item}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function ToggleRow({
+  title,
+  description,
+  checked,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-xl border border-[#1b2233] bg-[#0d121d] p-4">
+      <div>
+        <div className="font-semibold">{title}</div>
+        <div className="mt-1 text-sm text-[#5d6880]">{description}</div>
+      </div>
+
+      <button
+        onClick={() => onChange(!checked)}
+        className={[
+          "relative h-7 w-12 rounded-full transition",
+          checked ? "bg-blue-500" : "bg-[#273249]",
+        ].join(" ")}
+      >
+        <span
+          className={[
+            "absolute top-1 h-5 w-5 rounded-full bg-white transition",
+            checked ? "left-6" : "left-1",
+          ].join(" ")}
+        />
+      </button>
+    </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>
+  );
+}