refactor: change the belief nodes to include a description part

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

@@ -8,6 +8,7 @@ import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
+import { MultilineTextField } from '../../../../components/MultilineTextField';
 
 /**
  * The default data structure for a BasicBelief node
@@ -31,7 +32,7 @@ export type BasicBeliefNodeData = {
 // 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 Semantic = { type: "semantic", id: string, value: string, description: 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:"};
 
@@ -102,6 +103,10 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
   }
 
 
+  const setBeliefDescription = (value: string) => {
+    updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
+  }
+
   // Use this
   const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]
 
@@ -147,7 +152,6 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
             <option value="emotion">Emotion recognised:</option>
           </select>
           {wrapping}
-
           {data.belief.type === "emotion" && (
             <select
               value={data.belief.value}
@@ -161,7 +165,6 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
             </select>
           )}
 
-
           {data.belief.type !== "emotion" && 
           (<TextField
             id={label_input_id}
@@ -171,6 +174,15 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
           />)}
           {wrapping}
         </div>
+        {data.belief.type === "semantic" && (
+          <div className={"flex-wrap padding-sm"}>
+            <MultilineTextField
+                        value={data.belief.description}
+                        setValue={setBeliefDescription}
+                        placeholder={"Describe the desciption of this LLM belief..."}
+                      />
+          </div>
+          )}
         <Handle type="source" position={Position.Right} id="source"/>
       </div>
     </>
@@ -200,7 +212,8 @@ export function BasicBeliefReduce(node: Node, _nodes: Node[]) {
       result["object"] = data.belief.value;
       break;
     case "semantic":
-      result["description"] = data.belief.value;
+      result["name"] = data.belief.value;
+      result["description"] = data.belief.description;
       break;
     default:
       break;