feat: automatic addition of goals to a current goal node, adding it to the plan, making sure the data stays correct. Also for the trigger nodes. :)

ref: N25B-434

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -1,7 +1,7 @@
 import {useRef, useState} from "react";
 import useFlowStore from "../VisProgStores.tsx";
 import styles from './PlanEditor.module.css';
-import { GetActionValue, type Action, type ActionTypes, type Goal, type Plan, type PlanElement, type PlanElementTypes } from "../components/Plan";
+import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
 import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
 import GestureValueEditor from "./GestureValueEditor"; 
@@ -21,10 +21,10 @@ export default function PlanEditorDialog({
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
   const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
-  const [newPlanElementType, setNewPlanElementType] = useState<PlanElementTypes>("speech")
   const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
   const [newActionValue, setNewActionValue] = useState("");
   const { setScrollable } = useFlowStore();
+  const nodes = useFlowStore().nodes;
 
   //Button Actions
   const openCreate = () => {
@@ -58,24 +58,14 @@ export default function PlanEditorDialog({
     const id = crypto.randomUUID();
     switch (newActionType) {
     case "speech":
-     return { id, text: newPlanElementType, type: "speech" };
+     return { id, text: newActionValue, type: "speech" };
     case "gesture":
-        return { id, gesture: newPlanElementType, isTag: newActionGestureType, type: "gesture" };
+        return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
     case "llm":
-        return { id, goal: newPlanElementType, type: "llm" };
+        return { id, goal: newActionValue, type: "llm" };
     }
   };
 
-  const buildGoal = (): Goal => {
-      return {
-        id: "",
-        name: "",
-        plan: defaultPlan,
-        can_fail: false,
-        type: "goal"
-      }
-  }
-
   return (<>
       {/* Create and edit buttons */}
       {!plan && (
@@ -121,21 +111,20 @@ export default function PlanEditorDialog({
                       Action Type <wbr />
                       {/* Type selection */}
                       <select
-                          value={newPlanElementType}
+                          value={newActionType}
                           onChange={(e) => {
-                              setNewPlanElementType(e.target.value as PlanElementTypes);
+                              setNewActionType(e.target.value as ActionTypes);
                               // Reset value when action type changes
                               setNewActionValue("");
                           }}>
                       <option value="speech">Speech Action</option>
                       <option value="gesture">Gesture Action</option>
                       <option value="llm">LLM Action</option>
-                      <option value="goal">Seperate Goal</option>
                       </select>
                   </label>
 
                   {/* Action value editor*/}
-                  {newPlanElementType === "gesture" ? (
+                  {newActionType === "gesture" ? (
                       // Gesture get their own editor component
                       <GestureValueEditor
                         value={newActionValue}
@@ -143,25 +132,16 @@ export default function PlanEditorDialog({
                         setType={setNewActionGestureType}
                         placeholder="Gesture name"
                       />
-                  ) 
-                  : (newPlanElementType === "goal" ? (
-                    <div>
-
-
-                    </div>
-                  ) 
-                 :
-                  // Only used for the Speech and LLM elements
-                  (
+                  ) : (
                       <TextField
                           value={newActionValue}
                           setValue={setNewActionValue}
                           placeholder={
-                              newPlanElementType === "speech" ? "Speech text"
+                              newActionType === "speech" ? "Speech text"
                               : "LLM goal"
                           }
                       />
-                  ))}
+                  )}
 
                   {/* Adding steps */}
                   <button
@@ -217,9 +197,13 @@ export default function PlanEditorDialog({
 
                       <span className={styles.stepIndex}>{index + 1}.</span>
                       <span className={styles.stepType}>{step.type}:</span>
-                      <span className={styles.stepName}>{
-                      step.type == "goal" ? ""/* TODO: Add support for goals */
-                      : GetActionValue(step)}
+                      <span className={styles.stepName}>
+                        {
+                        // This just tries to find the goals name, i know it looks ugly:(
+                        step.type === "goal"
+                        ? ((nodes.find(x => x.id === step.id)?.data.name as string) == "" ? 
+                        "unnamed goal": (nodes.find(x => x.id === step.id)?.data.name as string))
+                        : (GetActionValue(step) ?? "")}
                       </span>
                   </div>
                 ))}