fix: handle skill prompt

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -47,7 +47,7 @@ export default function ParameterComponent({
   info = "",
   onChange
 }: ParameterComponentType) {
-  // console.log('data, id :>> ', data.id, id, type);
+  // console.log('data, id :>> ', name, optionalHandle);
   const { id: flowId } = useParams();
 
   const ref = useRef(null);
@@ -390,6 +390,7 @@ export default function ParameterComponent({
                     updateEdge: (edge) => reactFlowInstance.setEdges(edge),
                   });
                 }
+                // onChange?.()
               }}
               nodeClass={data.node}
               disabled={disabled}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,8 +1,10 @@
 import { Zap } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
+import { Button } from "../../components/ui/button";
 import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -16,8 +18,6 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
-import { Link, useParams } from "react-router-dom";
-import { Button } from "../../components/ui/button";
 
 export default function GenericNode({ data, selected }: {
   data: NodeDataType;
@@ -67,7 +67,6 @@ export default function GenericNode({ data, selected }: {
     deleteNode(data.id);
     return;
   }
-  useEffect(() => { }, [closePopUp, data.node.template]);
 
   const [_, fouceUpdateNode] = useState(false)
 

src/frontend/src/components/promptComponent/index.tsx

@@ -5,7 +5,6 @@ import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
-import { typesContext } from "../../contexts/typesContext";
 import { postValidatePrompt } from "../../controllers/API";
 
 export default function PromptAreaComponent({
@@ -19,26 +18,13 @@ export default function PromptAreaComponent({
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
-  const { reactFlowInstance } = useContext(typesContext);
   useEffect(() => {
     if (disabled) {
       setMyValue("");
       onChange("");
     }
   }, [disabled, onChange]);
 
-  useEffect(() => {
-    setMyValue(value);
-    if (value !== "" && !editNode) {
-      postValidatePrompt(field_name, value, nodeClass).then((apiReturn) => {
-        if (apiReturn) {
-          setNodeClass(apiReturn.frontend_node);
-          // need to update reactFlowInstance to re-render the nodes.
-        }
-      });
-    }
-  }, [value, reactFlowInstance]);
-
   // useEffect(() => {
   //   if (value !== "" && myValue !== value && reactFlowInstance) {
   //     // only executed once
@@ -57,6 +43,11 @@ export default function PromptAreaComponent({
   //   }
   // }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]);
 
+  const handleSave = (t: string) => {
+    setMyValue(t);
+    onChange(t);
+  }
+
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <div className="flex w-full items-center">
@@ -95,10 +86,7 @@ export default function PromptAreaComponent({
                 value={myValue}
                 buttonText="check & Save"
                 modalTitle="Edit Prompt"
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
+                setValue={handleSave}
                 nodeClass={nodeClass}
                 setNodeClass={setNodeClass}
               />

src/frontend/src/contexts/tabsContext.tsx

@@ -45,9 +45,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const { templates, reactFlowInstance } = useContext(typesContext);
 
   async function saveFlow(flow: FlowType) {
-    // 按模板矫正数据格式
-    processFlowEdges(flow);
-    processFlowNodes(flow);
     // save api
     const newFlow = await captureAndAlertRequestErrorHoc(updateFlowApi(flow))
     if (!newFlow) return {}
@@ -274,7 +271,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     flow.data.nodes.forEach((node: NodeType) => {
       const template = templates[node.data.type];
       if (!template) {
-        setErrorData({ title: `Unknown node type: ${node.data.type}` });
+        // setErrorData({ title: `Unknown node type: ${node.data.type}` });
+        console.warn(`Unknown node type: ${node.data.type}`)
         return;
       }
       if (Object.keys(template["template"]).length > 0) {
@@ -297,6 +295,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         flow,
         setFlow: (action, flow) => {
           console.log('action :>> ', action);
+          if (action === "flow_init") {
+            // 按模板矫正数据格式
+            processFlowEdges(flow);
+            processFlowNodes(flow);
+          }
+
           setFlow(flow);
         },
         saveFlow,

src/frontend/src/pages/FlowPage/index.tsx

@@ -12,7 +12,7 @@ export default function FlowPage() {
   useEffect(() => {
     if (id && flow?.id !== id) {
       // 切换技能重新加载flow数据
-      getFlowApi(id).then(_flow => setFlow('flow init', _flow))
+      getFlowApi(id).then(_flow => setFlow('flow_init', _flow))
     }
   }, [])