refactor(workflow): streamline workflow settings management

- Introduced new utility functions `settingsFromWorkflowGraph` and `workflowGraphWithSettings` to encapsulate settings extraction and graph updates.
- Updated `useWorkflowEditorState` to utilize the new utility functions for improved clarity and maintainability.
- Refactored `AssistantPage` and `WorkflowCanvas` components to leverage the new settings management functions, ensuring consistent handling of workflow settings across the application.
- Removed redundant settings handling code, enhancing overall code cleanliness.

frontend/src/components/assistant-editor/use-workflow-editor-state.ts

@@ -2,6 +2,10 @@
 
 import { useCallback, useMemo, useState } from "react";
 
+import {
+  settingsFromWorkflowGraph,
+  workflowGraphWithSettings,
+} from "@/components/workflow/graph-settings";
 import type { WorkflowSettings } from "@/components/workflow/types";
 import { defaultGraph, type WorkflowGraph } from "@/components/workflow/specs";
 import type { DynamicVariableDefinition } from "@/lib/api";
@@ -13,26 +17,6 @@ type WorkflowPanel =
   | { type: "edge"; edgeId: string }
   | null;
 
-function settingsFromGraph(graph: WorkflowGraph): WorkflowSettings {
-  return {
-    globalPrompt: graph.settings.globalPrompt,
-    llm: graph.settings.defaultLlmResourceId,
-    asr: graph.settings.defaultAsrResourceId,
-    tts: graph.settings.defaultTtsResourceId,
-    visionEnabled: graph.settings.visionEnabled,
-    visionModelResourceId: graph.settings.visionModelResourceId,
-    toolIds: graph.settings.toolIds,
-    knowledgeBaseId: graph.settings.knowledgeBaseId,
-    knowledgeRetrievalConfig: {
-      mode: graph.settings.knowledgeMode,
-      topN: graph.settings.knowledgeTopN,
-      scoreThreshold: graph.settings.knowledgeScoreThreshold,
-    },
-    allowInterrupt: graph.settings.enableInterrupt,
-    turnConfig: graph.settings.turnConfig,
-  };
-}
-
 /** Owns Workflow editor state; AssistantPage only coordinates loading and saving. */
 export function useWorkflowEditorState() {
   const [workflowName, setWorkflowName] = useState("");
@@ -40,29 +24,11 @@ export function useWorkflowEditorState() {
     defaultGraph(),
   );
   const workflowSettings = useMemo(
-    () => settingsFromGraph(workflowGraph),
+    () => settingsFromWorkflowGraph(workflowGraph),
     [workflowGraph],
   );
   const setWorkflowSettings = useCallback((settings: WorkflowSettings) => {
-    setWorkflowGraph((graph) => ({
-      ...graph,
-      settings: {
-        globalPrompt: settings.globalPrompt,
-        defaultLlmResourceId: settings.llm ?? "",
-        defaultAsrResourceId: settings.asr ?? "",
-        defaultTtsResourceId: settings.tts ?? "",
-        visionEnabled: settings.visionEnabled,
-        visionModelResourceId: settings.visionModelResourceId,
-        toolIds: settings.toolIds,
-        knowledgeBaseId: settings.knowledgeBaseId,
-        knowledgeMode: settings.knowledgeRetrievalConfig.mode,
-        knowledgeTopN: settings.knowledgeRetrievalConfig.topN,
-        knowledgeScoreThreshold:
-          settings.knowledgeRetrievalConfig.scoreThreshold,
-        enableInterrupt: settings.allowInterrupt,
-        turnConfig: settings.turnConfig,
-      },
-    }));
+    setWorkflowGraph((graph) => workflowGraphWithSettings(graph, settings));
   }, []);
   const [workflowDynamicVariableDefinitions, setWorkflowDynamicVariableDefinitions] =
     useState<Record<string, DynamicVariableDefinition>>({});