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("");