pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: fix a lot of small changes to match cb, add functionality for all plans, add tests for the new plan editor. even more i dont really know anymore.

Browse Source 
ref: N25B-412
This commit is contained in:
Björn Otgaar
2025-12-17 15:51:50 +01:00
parent c1ef924be1
commit 444e8b0289
16 changed files with 884 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
View File

@@ -181,11 +181,27 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
*/
export function BasicBeliefReduce(node: Node, _nodes: Node[]) {
const data = node.data as BasicBeliefNodeData;
return {
id: node.id,
type: data.belief.type,
value: data.belief.value
const result: Record<string, unknown> = {
id: node.id,
};
switch (data.belief.type) {
case "emotion":
result["emotion"] = data.belief.value;
break;
case "keyword":
result["keyword"] = data.belief.value;
break;
case "object":
result["object"] = data.belief.value;
break;
case "semantic":
result["description"] = data.belief.value;
break;
default:
break;
}
return result
}
/**

3
src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
View File

@@ -6,7 +6,8 @@ import type { GoalNodeData } from "./GoalNode";
export const GoalNodeDefaults: GoalNodeData = {
label: "Goal Node",
droppable: true,
description: "The robot will strive towards this goal",
description: "",
achieved: false,
hasReduce: true,
can_fail: true,
};

44
src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
View File

@@ -8,6 +8,8 @@ import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
import { TextField } from '../../../../components/TextField';
import useFlowStore from '../VisProgStores';
import { DoesPlanIterate, PlanReduce, type Plan } from '../components/Plan';
import PlanEditorDialog from '../components/PlanEditor';
/**
* The default data dot a phase node
@@ -22,6 +24,8 @@ export type GoalNodeData = {
droppable: boolean;
achieved: boolean;
hasReduce: boolean;
can_fail: boolean;
plan?: Plan;
};
export type GoalNode = Node<GoalNodeData>
@@ -37,13 +41,14 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
const text_input_id = `goal_${id}_text_input`;
const checkbox_id = `goal_${id}_checkbox`;
const planIterate = DoesPlanIterate(data.plan);
const setDescription = (value: string) => {
updateNodeData(id, {...data, description: value});
}
const setAchieved = (value: boolean) => {
updateNodeData(id, {...data, achieved: value});
const setFailable = (value: boolean) => {
updateNodeData(id, {...data, can_fail: value});
}
return <>
@@ -57,14 +62,34 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
setValue={(val) => setDescription(val)}
placeholder={"To ..."}
/>
</div>
<div className={"flex-row gap-md align-center"}>
<label htmlFor={checkbox_id}>Achieved:</label>
<div>
<label> {!data.plan ? "No plan set to execute while goal is not reached. 🔴" : "Will follow plan '" + data.plan.name + "' until goal is met. 🟢"} </label>
</div>
{data.plan && (<div className={"flex-row gap-md align-center " + (planIterate ? "" : styles.planNoIterate)}>
{planIterate ? "" : <s></s>}
<label htmlFor={checkbox_id}>Try this plan only once (allow critical abortion):</label>
<input
id={checkbox_id}
type={"checkbox"}
checked={data.achieved || false}
onChange={(e) => setAchieved(e.target.checked)}
disabled={!planIterate}
checked={!planIterate || data.can_fail}
onChange={(e) => planIterate ? setFailable(e.target.checked) : undefined}
/>
</div>
)}
<div>
<PlanEditorDialog
plan={data.plan}
onSave={(plan) => {
updateNodeData(id, {
...data,
plan,
});
}}
description={data.description}
/>
</div>
<Handle type="source" position={Position.Right} id="GoalSource"/>
@@ -80,11 +105,12 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
*/
export function GoalReduce(node: Node, _nodes: Node[]) {
const data = node.data as GoalNodeData;
return {
return {
id: node.id,
label: data.label,
name: data.label,
description: data.description,
achieved: data.achieved,
can_fail: data.can_fail,
plan: data.plan ? PlanReduce(data.plan) : "",
}
}

1
src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
View File

@@ -6,7 +6,6 @@ import type { NormNodeData } from "./NormNode";
export const NormNodeDefaults: NormNodeData = {
label: "Norm Node",
droppable: true,
conditions: [],
norm: "",
hasReduce: true,
critical: false,

2
src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
View File

@@ -86,7 +86,7 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
// Build the result object
const result: Record<string, unknown> = {
id: thisnode.id,
label: data.label,
name: data.label,
};
nodesInPhase.forEach((type) => {

2
src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
View File

@@ -6,7 +6,5 @@ import type { TriggerNodeData } from "./TriggerNode";
export const TriggerNodeDefaults: TriggerNodeData = {
label: "Trigger Node",
droppable: true,
triggers: [],
triggerType: "keywords",
hasReduce: true,
};

385
src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
View File

@@ -9,11 +9,9 @@ import {
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
import useFlowStore from '../VisProgStores';
import { useState, useRef } from 'react';
import { RealtimeTextField, TextField } from '../../../../components/TextField';
import duplicateIndices from '../../../../utils/duplicateIndices';
import type { Action, ActionTypes, Plan } from '../components/Plan';
import { defaultPlan } from '../components/Plan.default';
import { PlanReduce, type Plan } from '../components/Plan';
import PlanEditorDialog from '../components/PlanEditor';
import { BasicBeliefReduce } from './BasicBeliefNode';
/**
* The default data structure for a Trigger node
@@ -23,8 +21,6 @@ import { defaultPlan } from '../components/Plan.default';
*
* @property label: the display label of this Trigger node.
* @property droppable: Whether this node can be dropped from the toolbar (default: true).
* @property triggerType - The type of trigger ("keywords" or a custom string).
* @property triggers - The list of keyword triggers (if applicable).
* @property hasReduce - Whether this node supports reduction logic.
*/
export type TriggerNodeData = {
@@ -44,6 +40,7 @@ export type TriggerNode = Node<TriggerNodeData>
*
* @param connection - The connection or edge being attempted to connect towards.
* @returns `true` if the connection is defined; otherwise, `false`.
*
*/
export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
return (connection != undefined);
@@ -57,64 +54,7 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
export default function TriggerNode(props: NodeProps<TriggerNode>) {
const data = props.data;
const {updateNodeData} = useFlowStore();
const dialogRef = useRef<HTMLDialogElement | null>(null);
const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
// Helpers for inside plan creation
const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
const [newActionName, setNewActionName] = useState("");
const [newActionValue, setNewActionValue] = useState("");
// Create a new Plan
const openCreateDialog = () => {
setDraftPlan(JSON.parse(JSON.stringify(defaultPlan)));
dialogRef.current?.showModal();
};
// Edit our current plan
const openEditDialog = () => {
if (!data.plan) return;
setDraftPlan(JSON.parse(JSON.stringify(data.plan)));
dialogRef.current?.showModal();
};
// Close the creating/editing of our plan
const closeDialog = () => {
dialogRef.current?.close();
};
// Define the function for creating actions
const buildAction = (): Action => {
const id = crypto.randomUUID();
switch (newActionType) {
case "speech":
return {
id,
name: newActionName,
text: newActionValue,
type: "speech"
};
case "gesture":
return {
id,
name: newActionName,
gesture: newActionValue,
type: "gesture"
};
case "llm":
return {
id,
name: newActionName,
goal: newActionValue,
type: "llm"
};
}
};
return <>
<Toolbar nodeId={props.id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
@@ -123,199 +63,16 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
<div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
<Handle type="source" position={Position.Right} id="TriggerSource"/>
<Handle type="target" position={Position.Bottom} id="ConditionTarget"/>
{/* We don't have a plan yet, show our create plan button */}
{!data.plan && (
<button
className={styles.nodeButton}
onClick={openCreateDialog}
>
Create Plan
</button>
)}
{/* We have a plan, show our edit plan button */}
{data.plan && (
<button
className={styles.nodeButton}
onClick={openEditDialog}
>
Edit Plan
</button>
)}
<PlanEditorDialog
plan={data.plan}
onSave={(plan) => {
updateNodeData(props.id, {
...data,
plan,
});
}}
/>
</div>
{/* Define how our dialog should work */}
<dialog ref={dialogRef}
className={styles.planDialog}
onCancel={(e) => e.preventDefault()}
>
<form method="dialog" className="flex-col gap-md">
<h3>{draftPlan?.id === data.plan?.id ? "Edit Plan" : "Create Plan"}</h3>
{/*Text field to edit the name of our draft plan*/}
<div className={styles.planEditor}>
{/* LEFT: plan info + add action */}
<div className={styles.planEditorLeft}>
{/* Plan name */}
{draftPlan && (
<div className="flex-col gap-sm">
<label htmlFor="plan-name">Plan Name</label>
<TextField
id="plan-name"
value={draftPlan.name}
setValue={(name) =>
setDraftPlan({
...draftPlan,
name,
})
}
/>
</div>
)}
{/* Add action UI */}
{draftPlan && (
<div className="flex-col gap-sm">
<h4>Add Action</h4>
<label>
Action Type <wbr></wbr> {/* Just moves the selector over a bit :) */}
<select
value={newActionType}
onChange={(e) =>
setNewActionType(e.target.value as ActionTypes)
}
>
<option value="speech">Speech Action</option>
<option value="gesture">Gesture Action</option>
<option value="llm">LLM Action</option>
</select>
</label>
<TextField
value={newActionName}
setValue={setNewActionName}
placeholder="Action name"
/>
<TextField
value={newActionValue}
setValue={setNewActionValue}
placeholder={
newActionType === "speech"
? "Speech text"
: newActionType === "gesture"
? "Gesture name"
: "LLM goal"
}
/>
<button
type="button"
disabled={!newActionName || !newActionValue}
onClick={() => {
if (!draftPlan) return;
const action = buildAction();
setDraftPlan({
...draftPlan,
steps: [...draftPlan.steps, action],
});
setNewActionName("");
setNewActionValue("");
setNewActionType("speech");
}}
>
Add Step
</button>
</div>
)}
</div>
{/* RIGHT: steps list */}
<div className={styles.planEditorRight}>
<h4>Steps</h4>
{draftPlan && draftPlan.steps.length === 0 && (
<div className={styles.emptySteps}>
No steps yet
</div>
)}
{draftPlan?.steps.map((step, index) => (
<div
key={step.id}
className={styles.planStep}
onClick={() => {
if (!draftPlan) return;
setDraftPlan({
...draftPlan,
steps: draftPlan.steps.filter((s) => s.id !== step.id),
});
}}
>
<span className={styles.stepIndex}>{index + 1}.</span>
<span className={styles.stepName}>{step.name}</span>
<span className={styles.stepType}>{step.type}</span>
</div>
))}
</div>
</div>
<div className="flex-row gap-md">
{/*Button to close the plan editor.*/}
<button
type="button"
onClick={() => {
setDraftPlan(null);
closeDialog();
}}
>
Cancel
</button>
{/*Button to save the draftPlan to the plan in the Node.*/}
<button
type="button"
disabled={!draftPlan}
onClick={() => {
if (!draftPlan) return;
updateNodeData(props.id, {
...data,
plan: draftPlan,
});
setDraftPlan(null);
closeDialog();
}}
>
{draftPlan?.id === data.plan?.id ? "Confirm" : "Create"}
</button>
{/*Button to reset the plan*/}
<button
type="button"
disabled={!draftPlan}
onClick={() => {
if (!draftPlan) return;
updateNodeData(props.id, {
...data,
plan: undefined,
});
setNewActionName("")
setNewActionType("speech")
setNewActionValue("")
setDraftPlan(defaultPlan)
}}
>
Reset
</button>
</div>
</form>
</dialog>
</>;
}
@@ -325,22 +82,16 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
* @param _nodes - The list of all nodes in the current flow graph.
* @returns A simplified object containing the node label and its list of triggers.
*/
export function TriggerReduce(node: Node, _nodes: Node[]) {
const data = node.data;
switch (data.triggerType) {
case "keywords":
return {
id: node.id,
type: "keywords",
label: data.label,
keywords: data.triggers,
};
default:
return {
...data,
id: node.id,
};
export function TriggerReduce(node: Node, nodes: Node[]) {
const data = node.data as TriggerNodeData;
const conditionNode = data.condition ? nodes.find((n)=>n.id===data.condition) : undefined
const conditionData = conditionNode ? BasicBeliefReduce(conditionNode, nodes) : ""
return {
id: node.id,
condition: conditionData, // Make sure we have a condition before reducing, or default to ""
plan: !data.plan ? "" : PlanReduce(data.plan), // Make sure we have a plan when reducing, or default to ""
}
}
/**
@@ -405,92 +156,4 @@ export type KeywordTriggerNodeProps = {
}
/** Union type for all possible Trigger node configurations. */
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
/**
* Renders an input element that allows users to add new keyword triggers.
*
* When the input is committed, the `addKeyword` callback is called with the new keyword.
*
* @param param0 - An object containing the `addKeyword` function.
* @returns A React element(React.JSX.Element) providing an input for adding keywords.
*/
function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
const [input, setInput] = useState("");
const text_input_id = "keyword_adder_input";
return <div className={"flex-row gap-md"}>
<label htmlFor={text_input_id}>New Keyword:</label>
<RealtimeTextField
id={text_input_id}
value={input}
setValue={setInput}
onCommit={() => {
if (!input) return;
addKeyword(input);
setInput("");
}}
placeholder={"..."}
className={"flex-1"}
/>
</div>;
}
/**
* Displays and manages a list of keyword triggers for a Trigger node.
* Handles adding, editing, and removing keywords, as well as detecting duplicate entries.
*
* @param keywords - The current list of keyword triggers.
* @param setKeywords - A callback to update the keyword list in the parent node.
* @returns A React element(React.JSX.Element) for editing keyword triggers.
*/
function Keywords({
keywords,
setKeywords,
}: {
keywords: Keyword[];
setKeywords: (keywords: Keyword[]) => void;
}) {
type Interpolatable = string | number | boolean | bigint | null | undefined;
const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
/** Indices of duplicates in the keyword array. */
const [duplicates, setDuplicates] = useState<number[]>([]);
function replace(id: string, value: string) {
value = value.trim();
const newKeywords = value === ""
? keywords.filter((kw) => kw.id != id)
: keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
function add(value: string) {
value = value.trim();
if (value === "") return;
const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
return <>
<span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
{[...keywords].map(({id, keyword}, index) => {
return <div key={id} className={"flex-row gap-md"}>
<label htmlFor={inputElementId(id)}>Keyword:</label>
<TextField
id={inputElementId(id)}
value={keyword}
setValue={(val) => replace(id, val)}
placeholder={"..."}
className={"flex-1"}
invalid={duplicates.includes(index)}
/>
</div>;
})}
<KeywordAdder addKeyword={add} />
</>;
}
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;