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;

test/pages/visProgPage/visualProgrammingUI/nodes/BeliefNode.test.tsx

@@ -14,7 +14,6 @@ describe('BasicBeliefNode', () => {
   beforeEach(() => {
     user = userEvent.setup();
   });
-
   describe('Rendering', () => {
     it('should render the basic belief node with keyword type by default', () => {
       const mockNode: Node<BasicBeliefNodeData> = {
@@ -59,7 +58,7 @@ describe('BasicBeliefNode', () => {
         data: {
           label: 'Belief',
           droppable: true,
-          belief: { type: 'semantic', id: 'test', value: 'test value', label: 'Detected with LLM:' },
+          belief: { type: 'semantic', id: 'test', value: 'test value', description: "test description", label: 'Detected with LLM:' },
           hasReduce: true,
         },
       };
@@ -333,7 +332,7 @@ describe('BasicBeliefNode', () => {
         data: {
           label: 'Belief',
           droppable: true,
-          belief: { type: 'semantic', id: 'sem1', value: 'initial', label: 'Detected with LLM:' },
+          belief: { type: 'semantic', id: 'test', value: 'test value', description: "test description", label: 'Detected with LLM:' },
           hasReduce: true,
         },
       };
@@ -360,10 +359,10 @@ describe('BasicBeliefNode', () => {
         />
       );
 
-      const input = screen.getByDisplayValue('initial') as HTMLInputElement;
+      const input = screen.getByDisplayValue('test value') as HTMLInputElement;
       
       // Clear the input
-      for (let i = 0; i < 'initial'.length; i++) {
+      for (let i = 0; i < 'test value'.length; i++) {
         await user.type(input, '{backspace}');
       }
       await user.type(input, 'new semantic value{enter}');
@@ -689,7 +688,7 @@ describe('BasicBeliefNode', () => {
         data: {
           label: 'Belief',
           droppable: true,
-          belief: { type: 'semantic', id: 'sem1', value: 'initial', label: 'Detected with LLM:' },
+          belief: { type: 'semantic', id: 'test', value: 'test value', description: "test description", label: 'Detected with LLM:' },
           hasReduce: true,
         },
       };
@@ -716,27 +715,27 @@ describe('BasicBeliefNode', () => {
         />
       );
 
-      const input = screen.getByDisplayValue('initial') as HTMLInputElement;
+      const input = screen.getByDisplayValue('test value') as HTMLInputElement;
       
       await user.type(input, '1');
       await waitFor(() => {
         const state = useFlowStore.getState();
         const nodeData = state.nodes[0].data as BasicBeliefNodeData;
-        expect(nodeData.belief.value).toBe('initial');
+        expect(nodeData.belief.value).toBe('test value');
       });
 
       await user.type(input, '2');
       await waitFor(() => {
         const state = useFlowStore.getState();
         const nodeData = state.nodes[0].data as BasicBeliefNodeData;
-        expect(nodeData.belief.value).toBe('initial');
+        expect(nodeData.belief.value).toBe('test value');
       });
 
       await user.type(input, '{enter}');
       await waitFor(() => {
         const state = useFlowStore.getState();
         const nodeData = state.nodes[0].data as BasicBeliefNodeData;
-        expect(nodeData.belief.value).toBe('initial12');
+        expect(nodeData.belief.value).toBe('test value12');
       });
     });
   });