Merge branch 'feat/basic-belief-nodes' into 'demo'

Create a basic belief node that can be used in further stages to create inferred belief and be inputs for other nodes.

See merge request ics/sp/2025/n25b/pepperplus-ui!32

src/App.css

@@ -248,3 +248,11 @@ button.no-button {
     text-decoration: underline;
   }
 }
+
+.flex-center-x {
+  display: flex;
+  justify-content: center; /* horizontal centering */
+  text-align: center;       /* center multi-line text */
+  width: 100%;              /* allow it to stretch */
+  flex-wrap: wrap;          /* optional: let text wrap naturally */
+}

src/pages/VisProgPage/VisProg.module.css

@@ -71,6 +71,11 @@
     filter: drop-shadow(0 0 0.25rem red);
 }
 
+.node-basic_belief {
+    outline: plum solid 2pt;
+    filter: drop-shadow(0 0 0.25rem plum);
+}
+
 .draggable-node {
     padding: 3px 10px;
     background-color: canvas;
@@ -126,3 +131,11 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
+
+.draggable-node-basic_belief {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: plum solid 2pt;
+    filter: drop-shadow(0 0 0.25rem plum);
+}

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -46,6 +46,8 @@ import TriggerNode, {
   TriggerReduce
 } from "./nodes/TriggerNode";
 import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
+import BasicBeliefNode, { BasicBeliefConnectionSource, BasicBeliefConnectionTarget, BasicBeliefDisconnectionSource, BasicBeliefDisconnectionTarget, BasicBeliefReduce } from "./nodes/BasicBeliefNode";
+import { BasicBeliefNodeDefaults } from "./nodes/BasicBeliefNode.default";
 
 /**
  * Registered node types in the visual programming system.
@@ -60,6 +62,7 @@ export const NodeTypes = {
   norm: NormNode,
   goal: GoalNode,
   trigger: TriggerNode,
+  basic_belief: BasicBeliefNode,
 };
 
 /**
@@ -74,6 +77,7 @@ export const NodeDefaults = {
   norm: NormNodeDefaults,
   goal: GoalNodeDefaults,
   trigger: TriggerNodeDefaults,
+  basic_belief: BasicBeliefNodeDefaults,
 };
 
 
@@ -90,6 +94,7 @@ export const NodeReduces = {
   norm: NormReduce,
   goal: GoalReduce,
   trigger: TriggerReduce,
+  basic_belief: BasicBeliefReduce,
 }
 
 
@@ -107,6 +112,7 @@ export const NodeConnections = {
     norm: NormConnectionTarget,
     goal: GoalConnectionTarget,
     trigger: TriggerConnectionTarget,
+    basic_belief: BasicBeliefConnectionTarget,
   },
   Sources: {
     start: StartConnectionSource,
@@ -115,6 +121,7 @@ export const NodeConnections = {
     norm: NormConnectionSource,
     goal: GoalConnectionSource,
     trigger: TriggerConnectionSource,
+    basic_belief: BasicBeliefConnectionSource
   }
 }
 
@@ -132,6 +139,7 @@ export const NodeDisconnections = {
     norm: NormDisconnectionTarget,
     goal: GoalDisconnectionTarget,
     trigger: TriggerDisconnectionTarget,
+    basic_belief: BasicBeliefDisconnectionTarget,
   },
   Sources: {
     start: StartDisconnectionSource,
@@ -140,6 +148,7 @@ export const NodeDisconnections = {
     norm: NormDisconnectionSource,
     goal: GoalDisconnectionSource,
     trigger: TriggerDisconnectionSource,
+    basic_belief: BasicBeliefDisconnectionSource,
   },
 }
 
@@ -151,7 +160,6 @@ export const NodeDisconnections = {
 export const NodeDeletes = {
   start: () => false,
   end: () => false,
-  test: () => false, // Used for coverage of universal/ undefined nodes
 }
 
 /**
@@ -164,5 +172,5 @@ export const NodesInPhase = {
   start: () => false,
   end: () => false,
   phase: () => false,
-  test: () => false, // Used for coverage of universal/ undefined nodes
+  basic_belief: () => false,
 }

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -28,17 +28,19 @@ import { UndoRedo } from "./EditorUndoRedo.ts";
  * @param deletable - Optional flag to indicate if the node can be deleted (can be deleted by default).
  * @returns A fully initialized Node object ready to be added to the flow.
  */
-function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable? : boolean) {
-  const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
-  const newData = {
-      id: id,
-      type: type,
-      position: position,
-      data: data,
-      deletable: deletable,
+function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable?: boolean) {
+    const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
+    return {
+      id,
+      type,
+      position,
+      deletable,
+      data: {
+        ...defaultData,
+        ...data,
+      },
+    }
   }
-  return {...defaultData, ...newData}
-}
 
 //* Initial nodes, created by using createNode. */
 const initialNodes : Node[] = [

src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts

@@ -0,0 +1,12 @@
+import type { BasicBeliefNodeData } from "./BasicBeliefNode";
+
+
+/**
+ * Default data for this node
+ */
+export const BasicBeliefNodeDefaults: BasicBeliefNodeData = {
+  label: "Belief",
+  droppable: true,
+  belief: {type: "keyword", id: "help", value: "help", label: "Keyword said:"},
+  hasReduce: true,
+};

src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx

@@ -0,0 +1,193 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { TextField } from '../../../../components/TextField';
+
+/**
+ * The default data structure for a BasicBelief node
+ *
+ * Represents configuration for a node that activates when a specific condition is met,
+ * such as keywords being spoken or emotions detected.
+ *
+ * @property label: the display label of this BasicBelief node.
+ * @property droppable: Whether this node can be dropped from the toolbar (default: true).
+ * @property BasicBeliefType - The type of BasicBelief ("keywords" or a custom string).
+ * @property BasicBeliefs - The list of keyword BasicBeliefs (if applicable).
+ * @property hasReduce - Whether this node supports reduction logic.
+ */
+export type BasicBeliefNodeData = {
+  label: string;
+  droppable: boolean;
+  belief: BasicBeliefType;
+  hasReduce: boolean;
+};
+
+// These are all the types a basic belief could be.
+type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
+type Keyword = { type: "keyword", id: string, value: string, label: "Keyword said:"};
+type Semantic = { type: "semantic", id: string, value: string, label: "Detected with LLM:"};
+type DetectedObject = { type: "object", id: string, value: string, label: "Object found:"};
+type Emotion = { type: "emotion", id: string, value: string, label: "Emotion recognised:"};
+
+export type BasicBeliefNode = Node<BasicBeliefNodeData>
+
+
+/**
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
+ */
+export function BasicBeliefConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function BasicBeliefConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function BasicBeliefDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function BasicBeliefDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * Defines how a BasicBelief node should be rendered
+ * @param props - Node properties provided by React Flow, including `id` and `data`.
+ * @returns The rendered BasicBeliefNode React element (React.JSX.Element).
+ */
+export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
+  const data = props.data;
+  const {updateNodeData} = useFlowStore();
+  const updateValue = (value: string) => updateNodeData(props.id, {...data, belief: {...data.belief, value: value}});
+  const label_input_id = `basic_belief_${props.id}_label_input`;
+
+  type BeliefString = BasicBeliefType["type"];
+
+  function updateBeliefType(newType: BeliefString) {
+    updateNodeData(props.id, {
+      ...data,
+      belief: {
+        ...data.belief,
+        type: newType,
+        value:
+          newType === "emotion"
+            ? emotionOptions[0] 
+            : data.belief.value,               
+      },
+    });
+  }
+
+
+  // Use this
+  const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]
+
+
+  let placeholder = ""
+  let wrapping = ""
+  switch (props.data.belief.type) {
+    case ("keyword"):
+      placeholder = "keyword..."
+      wrapping = '"'
+      break; 
+    case ("semantic"):
+      placeholder = "word..."
+      wrapping = '"'
+      break; 
+    case ("object"):
+      placeholder = "object..."
+      break; 
+    case ("emotion"):
+      // TODO: emotion should probably be a drop-down menu rather than a string
+      // So this placeholder won't hold for always
+      placeholder = "emotion..."
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodeBasicBelief /*TODO: Change this*/}`}>
+        <div className={"flex-center-x gap-sm"}>
+          <label htmlFor={label_input_id}>Belief:</label>
+        </div>
+        <div className={"flex-row gap-sm"}>
+          <select
+            value={data.belief.type}
+            onChange={(e) => updateBeliefType(e.target.value as BeliefString)}
+            >
+            <option value="keyword">Keyword said:</option>
+            <option value="semantic">Detected with LLM:</option>
+            <option value="object">Object found:</option>
+            <option value="emotion">Emotion recognised:</option>
+          </select>
+          {wrapping}
+
+          {data.belief.type === "emotion" && (
+            <select
+              value={data.belief.value}
+              onChange={(e) => updateValue(e.target.value)}
+            >
+              {emotionOptions.map((emotion) => (
+                <option key={emotion} value={emotion.toLowerCase()}>
+                  {emotion}
+                </option>
+              ))}
+            </select>
+          )}
+
+
+          {data.belief.type !== "emotion" && 
+          (<TextField
+            id={label_input_id}
+            value={data.belief.value}
+            setValue={updateValue}
+            placeholder={placeholder}
+          />)}
+          {wrapping}
+        </div>
+        <Handle type="source" position={Position.Right} id="source"/>
+      </div>
+    </>
+  );
+};
+
+/**
+ * Reduces each BasicBelief, including its children down into its core data.
+ * @param node - The BasicBelief node to reduce.
+ * @param _nodes - The list of all nodes in the current flow graph.
+ * @returns A simplified object containing the node label and its list of BasicBeliefs.
+ */
+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
+  }
+}