Add analysis feature

frontend/src/components/assistant-editor/analysis-config.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useState } from "react";
-import { Loader2, Plus, Send, Trash2 } from "lucide-react";
+import { Plus, Trash2 } from "lucide-react";
 
 import { ResourceSelectField, ToggleRow } from "@/components/assistant-editor/editor-controls";
 import { Button } from "@/components/ui/button";
@@ -13,47 +12,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import type {
+  AnalysisConfig,
+  AnalysisField,
+  AnalysisFieldType,
+} from "@/lib/api";
 
-export type AnalysisFieldType =
-  | "string"
-  | "boolean"
-  | "integer"
-  | "number"
-  | "enum";
-
-export type AnalysisField = {
-  id: string;
-  name: string;
-  type: AnalysisFieldType;
-  description: string;
-  enumValues: string[];
-};
-
-export type AnalysisConfig = {
-  enabled: boolean;
-  modelResourceId: string;
-  fields: AnalysisField[];
-};
-
-export type WebhookConfig = {
-  url: string;
-  secret: string;
-};
-
-export function defaultAnalysisConfig(): AnalysisConfig {
-  return {
-    enabled: false,
-    modelResourceId: "",
-    fields: [],
-  };
-}
-
-export function defaultWebhookConfig(): WebhookConfig {
-  return {
-    url: "",
-    secret: "",
-  };
-}
+export type { AnalysisConfig, AnalysisField, AnalysisFieldType } from "@/lib/api";
 
 const FIELD_TYPE_OPTIONS: Array<{
   value: AnalysisFieldType;
@@ -76,37 +41,6 @@ function createField(): AnalysisField {
   };
 }
 
-function buildMockPayload(fields: AnalysisField[]) {
-  const extracted: Record<string, unknown> = {};
-  for (const field of fields) {
-    if (!field.name.trim()) continue;
-    switch (field.type) {
-      case "boolean":
-        extracted[field.name] = true;
-        break;
-      case "integer":
-        extracted[field.name] = 1;
-        break;
-      case "number":
-        extracted[field.name] = 1.5;
-        break;
-      case "enum":
-        extracted[field.name] = field.enumValues[0] ?? "option_a";
-        break;
-      default:
-        extracted[field.name] = "示例值";
-    }
-  }
-
-  return {
-    event: "call.analysis.completed",
-    conversation_id: "mock-conv-001",
-    assistant_id: "mock-assistant-001",
-    timestamp: new Date().toISOString(),
-    analysis: extracted,
-  };
-}
-
 type AnalysisConfigEditorProps = {
   config: AnalysisConfig;
   onChange: (config: AnalysisConfig) => void;
@@ -186,7 +120,7 @@ export function AnalysisConfigEditor({
                   还没有关键信息字段
                 </div>
                 <p className="mt-1 text-xs leading-5 text-muted-foreground">
-                  点击右上角加号添加字段，例如「客户意向」「是否预约」等。
+                  点击右上角加号添加字段，例如 customer_intent、booked。
                 </p>
               </div>
             ) : (
@@ -201,7 +135,7 @@ export function AnalysisConfigEditor({
                       onChange={(event) =>
                         updateField(field.id, { name: event.target.value })
                       }
-                      placeholder="字段名"
+                      placeholder="字段名，如 customer_intent"
                       aria-label={`字段 ${index + 1} 名称`}
                       className="h-9 border-hairline-strong bg-background"
                     />
@@ -276,111 +210,3 @@ export function AnalysisConfigEditor({
     </div>
   );
 }
-
-type WebhookConfigEditorProps = {
-  config: WebhookConfig;
-  onChange: (config: WebhookConfig) => void;
-  analysisFields: AnalysisField[];
-};
-
-export function WebhookConfigEditor({
-  config,
-  onChange,
-  analysisFields,
-}: WebhookConfigEditorProps) {
-  const [testStatus, setTestStatus] = useState<
-    "idle" | "loading" | "success" | "error"
-  >("idle");
-  const [testMessage, setTestMessage] = useState<string | null>(null);
-
-  function patch(partial: Partial<WebhookConfig>) {
-    onChange({ ...config, ...partial });
-  }
-
-  async function sendTestEvent() {
-    if (!config.url.trim()) {
-      setTestStatus("error");
-      setTestMessage("请先填写 Webhook URL。");
-      return;
-    }
-
-    setTestStatus("loading");
-    setTestMessage(null);
-
-    const payload = buildMockPayload(analysisFields);
-
-    await new Promise((resolve) => window.setTimeout(resolve, 900));
-
-    setTestStatus("success");
-    setTestMessage(
-      `测试事件已模拟发送至 ${config.url.trim()}（Mock，未实际请求网络）。示例 payload：${JSON.stringify(payload)}`,
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      <label className="block">
-        <span className="mb-1.5 block text-sm font-medium text-foreground">
-          Webhook URL
-        </span>
-        <Input
-          value={config.url}
-          onChange={(event) => patch({ url: event.target.value })}
-          placeholder="https://example.com/webhooks/call-analysis"
-          className="border-hairline-strong bg-background"
-        />
-      </label>
-
-      <label className="block">
-        <span className="mb-1.5 block text-sm font-medium text-foreground">
-          签名密钥
-        </span>
-        <Input
-          type="password"
-          value={config.secret}
-          onChange={(event) => patch({ secret: event.target.value })}
-          placeholder="可选，用于验证 Webhook 请求来源"
-          className="border-hairline-strong bg-background"
-        />
-      </label>
-
-      <div className="flex flex-wrap items-center gap-3 border-t border-hairline pt-3">
-        <Button
-          type="button"
-          variant="outline"
-          className="gap-2 border-hairline-strong"
-          disabled={testStatus === "loading"}
-          onClick={() => void sendTestEvent()}
-        >
-          {testStatus === "loading" ? (
-            <Loader2 size={15} className="animate-spin" />
-          ) : (
-            <Send size={15} />
-          )}
-          发送测试事件
-        </Button>
-        {testStatus === "success" && (
-          <span className="text-xs text-emerald-600 dark:text-emerald-400">
-            模拟发送成功
-          </span>
-        )}
-        {testStatus === "error" && (
-          <span className="text-xs text-destructive">发送失败</span>
-        )}
-      </div>
-
-      {testMessage && (
-        <p
-          role="status"
-          className={`rounded-xl border px-3.5 py-3 text-xs leading-5 ${
-            testStatus === "error"
-              ? "border-destructive/30 bg-destructive/5 text-destructive"
-              : "border-hairline bg-canvas-soft text-muted-foreground"
-          }`}
-        >
-          {testMessage}
-        </p>
-      )}
-    </div>
-  );
-}

frontend/src/components/assistant-editor/prompt-editor.tsx

@@ -3,11 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import {
   AnalysisConfigEditor,
-  WebhookConfigEditor,
-  defaultAnalysisConfig,
-  defaultWebhookConfig,
-  type AnalysisConfig,
-  type WebhookConfig,
 } from "@/components/assistant-editor/analysis-config";
 import {
   Braces,
@@ -22,7 +17,6 @@ import {
   Save,
   Sparkles,
   Trash2,
-  Webhook,
   Wrench,
 } from "lucide-react";
 
@@ -105,7 +99,6 @@ const promptSections = [
   { id: "interaction", label: "交互策略" },
   { id: "variables", label: "动态变量" },
   { id: "analysis", label: "分析" },
-  { id: "webhook", label: "Webhook" },
 ] as const;
 
 type PromptSectionId = (typeof promptSections)[number]["id"];
@@ -169,14 +162,7 @@ export function PromptEditor({
     interaction: null,
     variables: null,
     analysis: null,
-    webhook: null,
   });
-  const [analysisConfig, setAnalysisConfig] = useState<AnalysisConfig>(
-    defaultAnalysisConfig,
-  );
-  const [webhookConfig, setWebhookConfig] = useState<WebhookConfig>(
-    defaultWebhookConfig,
-  );
   const selectedAnchorRef = useRef<PromptSectionId | null>(null);
   const [activeSection, setActiveSection] =
     useState<PromptSectionId>("conversation");
@@ -781,31 +767,14 @@ export function PromptEditor({
                   description="通话结束后自动提取关键信息"
                 >
                   <AnalysisConfigEditor
-                    config={analysisConfig}
-                    onChange={setAnalysisConfig}
+                    config={form.analysisConfig}
+                    onChange={(analysisConfig) =>
+                      updateForm("analysisConfig", analysisConfig)
+                    }
                     modelOptions={llmOptions}
                   />
                 </SectionCard>
               </section>
-
-              <section
-                ref={(element) => {
-                  sectionRefs.current.webhook = element;
-                }}
-                className="scroll-mt-3 space-y-3"
-              >
-                <SectionCard
-                  icon={<Webhook size={15} />}
-                  title="Webhook"
-                  description="通话分析完成后，将结果 POST 到指定地址"
-                >
-                  <WebhookConfigEditor
-                    config={webhookConfig}
-                    onChange={setWebhookConfig}
-                    analysisFields={analysisConfig.fields}
-                  />
-                </SectionCard>
-              </section>
             </div>
           </div>
         </div>

frontend/src/components/assistant-editor/types.ts

@@ -1,4 +1,5 @@
 import type {
+  AnalysisConfig,
   DynamicVariableDefinition,
   KnowledgeRetrievalConfig,
   StartupConfig,
@@ -12,6 +13,7 @@ export type AssistantForm = {
   greeting: string;
   prompt: string;
   dynamicVariableDefinitions: Record<string, DynamicVariableDefinition>;
+  analysisConfig: AnalysisConfig;
   runtimeMode: RuntimeMode;
   realtimeModel: string;
   model: string;