Enhance workflow engine and integration in backend and frontend

- Introduce a new WorkflowEngine class to manage workflow graphs, enabling dynamic node-based interactions.
- Update AssistantConfig to include a graph field for workflow definitions, allowing for flexible configuration.
- Modify pipeline execution to support workflow-driven dialogue, integrating node transitions and system prompts based on active nodes.
- Enhance frontend components to visualize active nodes and provide debugging capabilities, including highlighting the current node during interactions.
- Refactor existing components to accommodate new workflow functionalities and improve overall user experience.

frontend/src/components/pages/AssistantPage.tsx

@@ -42,6 +42,7 @@ import { Switch } from "@/components/ui/switch";
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
@@ -372,6 +373,7 @@ export function AssistantPage(props: AssistantPageProps) {
     allowInterrupt: true,
   });
   const [debugOpen, setDebugOpen] = useState(false);
+  const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
 
   const loadAssistants = useCallback(async () => {
     setListLoading(true);
@@ -1235,6 +1237,7 @@ export function AssistantPage(props: AssistantPageProps) {
             onChange={setWorkflowGraph}
             settings={workflowSettings}
             onSettingsChange={setWorkflowSettings}
+            activeNodeId={activeNodeId}
             modelOptions={{
               llm: credOptions("LLM"),
               asr: credOptions("ASR"),
@@ -1243,7 +1246,14 @@ export function AssistantPage(props: AssistantPageProps) {
           />
         </div>
 
-        <Sheet open={debugOpen} onOpenChange={setDebugOpen} modal={false}>
+        <Sheet
+          open={debugOpen}
+          onOpenChange={(open) => {
+            setDebugOpen(open);
+            if (!open) setActiveNodeId(null);
+          }}
+          modal={false}
+        >
           <SheetContent
             side="right"
             showOverlay={false}
@@ -1252,8 +1262,15 @@ export function AssistantPage(props: AssistantPageProps) {
           >
             <SheetHeader className="sr-only">
               <SheetTitle>语音调试</SheetTitle>
+              <SheetDescription>
+                与当前助手进行语音对话调试,画布会高亮正在激活的节点。
+              </SheetDescription>
             </SheetHeader>
-            <DebugDrawer assistantId={editingId} asSheet />
+            <DebugDrawer
+              assistantId={editingId}
+              asSheet
+              onNodeActive={setActiveNodeId}
+            />
           </SheetContent>
         </Sheet>
       </div>
@@ -1859,9 +1876,11 @@ function SegmentedIconButton({
 function DebugDrawer({
   assistantId,
   asSheet = false,
+  onNodeActive,
 }: {
   assistantId: string | null;
   asSheet?: boolean;
+  onNodeActive?: (nodeId: string | null) => void;
 }) {
   const [showTranscript, setShowTranscript] = useState(false);
   const [vizStyle, setVizStyle] = useState<VizStyle>("aura");
@@ -1915,6 +1934,7 @@ function DebugDrawer({
         showTranscript={showTranscript}
         vizStyle={vizStyle}
         assistantId={assistantId}
+        onNodeActive={onNodeActive}
       />
     </aside>
   );
@@ -1924,10 +1944,12 @@ function DebugVoicePanel({
   showTranscript,
   vizStyle,
   assistantId,
+  onNodeActive,
 }: {
   showTranscript: boolean;
   vizStyle: VizStyle;
   assistantId: string | null;
+  onNodeActive?: (nodeId: string | null) => void;
 }) {
   const {
     status,
@@ -1943,7 +1965,7 @@ function DebugVoicePanel({
     connect,
     disconnect,
     audioRef,
-  } = useVoicePreview(assistantId);
+  } = useVoicePreview(assistantId, onNodeActive);
   // 连接中或已连通都视作"会话进行中"
   const recording = status === "connecting" || status === "connected";
   const [textDraft, setTextDraft] = useState("");

frontend/src/components/workflow/GenericNode.tsx

@@ -10,12 +10,18 @@ import { Pencil, Trash2 } from "lucide-react";
 import { useContext } from "react";
 
 import { cn } from "@/lib/utils";
-import { NodeActionContext, NodeSpecsContext } from "./context";
+import {
+  ActiveNodeContext,
+  NodeActionContext,
+  NodeSpecsContext,
+} from "./context";
 import { accentVar, type WorkflowNodeData } from "./specs";
 
 export function GenericNode({ id, type, data, selected }: NodeProps) {
   const specs = useContext(NodeSpecsContext);
   const actions = useContext(NodeActionContext);
+  const activeNodeId = useContext(ActiveNodeContext);
+  const isActive = activeNodeId === id;
   const spec = specs[type as string];
   if (!spec) return null;
 
@@ -30,9 +36,11 @@ export function GenericNode({ id, type, data, selected }: NodeProps) {
       data-node-id={id}
       className={cn(
         "group relative w-[228px] rounded-2xl border bg-card p-4 shadow-sm transition-all",
-        selected
-          ? "border-primary ring-2 ring-primary/30"
-          : "border-hairline hover:shadow-md",
+        isActive
+          ? "border-success ring-2 ring-success/60"
+          : selected
+            ? "border-primary ring-2 ring-primary/30"
+            : "border-hairline hover:shadow-md",
       )}
     >
       {spec.hasTarget && (
@@ -43,6 +51,13 @@ export function GenericNode({ id, type, data, selected }: NodeProps) {
         />
       )}
 
+      {isActive && (
+        <div className="absolute -top-3 left-3 flex items-center gap-1.5 rounded-full bg-success px-2 py-0.5 text-[10px] font-medium text-on-primary shadow-sm">
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-on-primary" />
+          对话中
+        </div>
+      )}
+
       {/* 悬停/选中时出现的操作按钮 */}
       <div
         className={cn(

frontend/src/components/workflow/WorkflowEditor.tsx

@@ -50,6 +50,7 @@ import { Textarea } from "@/components/ui/textarea";
 
 import { edgeTypes } from "./ConditionEdge";
 import {
+  ActiveNodeContext,
   EdgeActionContext,
   NodeActionContext,
   NodeSpecsContext,
@@ -81,6 +82,8 @@ export type WorkflowEditorProps = {
   settings: WorkflowSettings;
   onSettingsChange: (settings: WorkflowSettings) => void;
   modelOptions: { llm: ModelOption[]; asr: ModelOption[]; tts: ModelOption[] };
+  /** 调试通话中当前激活的节点 id(用于高亮)。 */
+  activeNodeId?: string | null;
 };
 
 let nodeSeq = 0;
@@ -127,6 +130,7 @@ function Canvas({
   settings,
   onSettingsChange,
   modelOptions,
+  activeNodeId,
   specsByType,
 }: WorkflowEditorProps & { specsByType: NodeSpecMap }) {
   const initial = useMemo(() => toFlow(value ?? defaultGraph()), [value]);
@@ -252,6 +256,7 @@ function Canvas({
 
   return (
     <NodeSpecsContext.Provider value={specsByType}>
+      <ActiveNodeContext.Provider value={activeNodeId ?? null}>
       <NodeActionContext.Provider value={nodeActions}>
         <EdgeActionContext.Provider value={edgeActions}>
           <div className="h-full w-full overflow-hidden rounded-2xl border border-hairline bg-canvas-soft">
@@ -446,6 +451,7 @@ function Canvas({
           </div>
         </EdgeActionContext.Provider>
       </NodeActionContext.Provider>
+      </ActiveNodeContext.Provider>
     </NodeSpecsContext.Provider>
   );
 }

frontend/src/components/workflow/context.ts

@@ -21,3 +21,6 @@ const noop: ElementActions = { edit: () => {}, remove: () => {} };
 
 export const NodeActionContext = createContext<ElementActions>(noop);
 export const EdgeActionContext = createContext<ElementActions>(noop);
+
+/** 调试通话中当前激活的节点 id(画布据此高亮),无激活为 null。 */
+export const ActiveNodeContext = createContext<string | null>(null);