From 962faab3c37dd3e617db74bc2a6e13e9303c59c4 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Thu, 22 May 2025 12:06:35 +0200
Subject: [PATCH 1/2] fix: publish concept implementation

---
 src/components/Card/FlowCard.tsx        | 22 +++++++++++++++++-----
 src/components/Modals/EditFlowModal.tsx | 20 +++++++++++++++++---
 src/pages/flows/index.tsx               |  1 -
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/Card/FlowCard.tsx b/src/components/Card/FlowCard.tsx
index 72a4f2a8..2a08aade 100644
--- a/src/components/Card/FlowCard.tsx
+++ b/src/components/Card/FlowCard.tsx
@@ -1,13 +1,15 @@
-import { DeleteIcon } from '@chakra-ui/icons';
+import { CheckIcon, CloseIcon, DeleteIcon } from '@chakra-ui/icons';
 import {
   Avatar,
   Badge,
+  Box,
   Button,
   Card,
   CardBody,
   CardFooter,
   Heading,
   HStack,
+  IconButton,
   Image,
   LinkBox,
   LinkOverlay,
@@ -15,7 +17,7 @@ import {
   Spacer,
   Stack,
   Text,
-  Tooltip,
+  Tooltip,Flex
 } from '@chakra-ui/react';
 import cardImage from '../../public/test_card.png';
 import { PolyglotFlow } from '../../types/polyglotElements';
@@ -45,7 +47,7 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
 
         <Stack w="full">
           <CardBody>
-            {canDelete && (
+            {canDelete && (<>
               <Button
                 zIndex={11}
                 position="absolute"
@@ -61,7 +63,7 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
                     color="red"
                   />
                 </Tooltip>
-              </Button>
+              </Button></>
             )}
             <Heading size="md">{flow.title}</Heading>
             {flow.tags &&
@@ -77,6 +79,7 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
               In this Learning Path there are: {flow.nodes.length} learning
               activities
             </Text>
+            
           </CardBody>
 
           <CardFooter>
@@ -88,7 +91,16 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
                   <Avatar name={flow.author?.username} size="sm" />
                 </HStack>
               </>
-            )}
+            )}<Flex right={'35px'} bottom={5} position={'absolute'}>
+              {flow.publish ? 'Published' : 'Not published'}:
+              <IconButton size={'xs'}
+                backgroundColor={flow.publish ? 'green.500' : 'red.500'}
+                aria-label={''}
+                left={'5px'}
+              >
+                {flow.publish ? <CheckIcon /> : <CloseIcon />}
+              </IconButton>
+            </Flex>
           </CardFooter>
         </Stack>
       </Card>
diff --git a/src/components/Modals/EditFlowModal.tsx b/src/components/Modals/EditFlowModal.tsx
index 48b2df90..400ea682 100644
--- a/src/components/Modals/EditFlowModal.tsx
+++ b/src/components/Modals/EditFlowModal.tsx
@@ -1,4 +1,4 @@
-import { AddIcon, CloseIcon } from '@chakra-ui/icons';
+import { AddIcon, CheckIcon, CloseIcon } from '@chakra-ui/icons';
 import {
   Box,
   Button,
@@ -54,7 +54,7 @@ const EditFlowModal = ({
   const [topicName, setTopicName] = useState('');
   const [topics, setTopics] = useState([...flow.topics]);
   const [tagName, setTagName] = useState('');
-  const [publish] = useState(false);
+  const [publish, setPublish] = useState(false);
   const [colorTag, setColorTag] = useState(colors[0]);
   const [tags, setTags] = useState([...flow.tags]);
   const { isOpen: ioPop, onClose: ocPop, onOpen: opPop } = useDisclosure();
@@ -67,6 +67,7 @@ const EditFlowModal = ({
     setTopics([...flow.topics]);
     setColorTag(colors[0]);
     setTags([...flow.tags]);
+    setPublish(flow.publish);
   }, [flow]);
 
   return (
@@ -270,6 +271,19 @@ const EditFlowModal = ({
             </Button>
           ))}
         </ModalBody>
+        <Box position={'absolute'} bottom={'15px'} left={'27px'}>
+          {publish ? 'Published' : 'Not published'}:{' '}
+          <IconButton
+            backgroundColor={publish ? 'green.500' : 'red.500'}
+            onClick={() => {
+              console.log(publish);
+              setPublish(!publish);
+            }}
+            aria-label={''}
+          >
+            {publish ? <CheckIcon /> : <CloseIcon />}
+          </IconButton>
+        </Box>
 
         <ModalFooter>
           <Button
@@ -287,7 +301,7 @@ const EditFlowModal = ({
                 learningContext: learningContext,
                 duration: duration,
                 topics: topics,
-                topicsAI: [],
+                topicsAI: flow.topicsAI,
               });
               onClose();
             }}
diff --git a/src/pages/flows/index.tsx b/src/pages/flows/index.tsx
index bfbb8c7d..73f13aff 100644
--- a/src/pages/flows/index.tsx
+++ b/src/pages/flows/index.tsx
@@ -15,7 +15,6 @@ import {
 import { GetServerSideProps } from 'next';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import FlowCard from '../../components/Card/FlowCard';
-import CreateAILPModal from '../../components/Modals/CreateAILPModal';
 import CreateFlowModal from '../../components/Modals/CreateFlowModal';
 import DeleteFlowModal from '../../components/Modals/DeleteFlowModal';
 import Navbar from '../../components/NavBars/NavBar';

From d9005978399475ca79bc47030f6b9265c8e5479b Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Thu, 22 May 2025 12:07:38 +0200
Subject: [PATCH 2/2] feat: abstract recovery node

---
 src/components/Card/FlowCard.tsx          | 46 +++++++------
 src/components/Modals/CreateAILPModal.tsx | 81 ++++++++++++++++++++---
 src/data/api.ts                           |  1 +
 3 files changed, 96 insertions(+), 32 deletions(-)

diff --git a/src/components/Card/FlowCard.tsx b/src/components/Card/FlowCard.tsx
index 2a08aade..76714280 100644
--- a/src/components/Card/FlowCard.tsx
+++ b/src/components/Card/FlowCard.tsx
@@ -7,6 +7,7 @@ import {
   Card,
   CardBody,
   CardFooter,
+  Flex,
   Heading,
   HStack,
   IconButton,
@@ -17,7 +18,7 @@ import {
   Spacer,
   Stack,
   Text,
-  Tooltip,Flex
+  Tooltip,
 } from '@chakra-ui/react';
 import cardImage from '../../public/test_card.png';
 import { PolyglotFlow } from '../../types/polyglotElements';
@@ -47,23 +48,25 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
 
         <Stack w="full">
           <CardBody>
-            {canDelete && (<>
-              <Button
-                zIndex={11}
-                position="absolute"
-                top={4}
-                right={5}
-                variant="unstyled"
-              >
-                <Tooltip label="Delete" placement="right">
-                  <DeleteIcon
-                    onClick={() => setSelected?.(flow._id!)}
-                    w={5}
-                    h={5}
-                    color="red"
-                  />
-                </Tooltip>
-              </Button></>
+            {canDelete && (
+              <>
+                <Button
+                  zIndex={11}
+                  position="absolute"
+                  top={4}
+                  right={5}
+                  variant="unstyled"
+                >
+                  <Tooltip label="Delete" placement="right">
+                    <DeleteIcon
+                      onClick={() => setSelected?.(flow._id!)}
+                      w={5}
+                      h={5}
+                      color="red"
+                    />
+                  </Tooltip>
+                </Button>
+              </>
             )}
             <Heading size="md">{flow.title}</Heading>
             {flow.tags &&
@@ -79,7 +82,6 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
               In this Learning Path there are: {flow.nodes.length} learning
               activities
             </Text>
-            
           </CardBody>
 
           <CardFooter>
@@ -91,9 +93,11 @@ const FlowCard = ({ flow, px, py, canDelete, setSelected }: FlowCardProps) => {
                   <Avatar name={flow.author?.username} size="sm" />
                 </HStack>
               </>
-            )}<Flex right={'35px'} bottom={5} position={'absolute'}>
+            )}
+            <Flex right={'35px'} bottom={5} position={'absolute'}>
               {flow.publish ? 'Published' : 'Not published'}:
-              <IconButton size={'xs'}
+              <IconButton
+                size={'xs'}
                 backgroundColor={flow.publish ? 'green.500' : 'red.500'}
                 aria-label={''}
                 left={'5px'}
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 0740653a..413294fb 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -509,7 +509,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
           </FormLabel>
           <Textarea
             maxHeight={'200px'}
-            placeholder="Insert your material here, you can put your plain text or the link (attention some websites are crypted, sometimes the tool cannot access the actual text)..."
+            placeholder="Here, you can define the context of the learning path's application."
             value={context}
             overflowY={'auto'}
             onChange={(e) => {
@@ -765,10 +765,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     : 1;
                 const generatedNodes: PolyglotNode[] = [];
                 let counter = 0;
-                let check = 0;
-                do {
-                  check++;
+                for (let i = 0; i < selectedNodes.length; i++) {
                   if (counter == 0 && nReadMaterial != 0) {
+                    i--;
                     counter = nTopicReadMaterial;
                     setNReadMaterial(nReadMaterial - 1);
                     const readTopics: LessonNodeAI[] = selectedNodes
@@ -842,7 +841,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     }
                   } else {
                     counter--;
-                    const activity = selectedNodes.shift();
+                    const activity = selectedNodes[i];
                     if (!activity) break;
                     try {
                       await API.generateNewExercise({
@@ -903,11 +902,8 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       console.log(error);
                     }
                   }
-                } while (
-                  selectedNodes.length + nReadMaterial !=
-                    generatedNodes.length ||
-                  check < selectedNodes.length + nReadMaterial
-                );
+                }
+
                 const generatedEdges: PolyglotEdge[] = [];
 
                 //edges generation
@@ -944,6 +940,45 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       title: 'next',
                     });
                   } else {
+                    const idRecovery = UUIDv4();
+                    const x = node.reactFlow.position.x;
+                    const y = node.reactFlow.position.y + 50;
+                    generatedNodes.push({
+                      _id: idRecovery,
+                      type: 'abstractNode',
+                      title: 'Recovery Activity',
+                      description: 'Recovery activity',
+                      platform: 'Library',
+                      difficulty: 1,
+                      data: {
+                        useFlowData: true,
+                        sourceMaterial: sourceMaterial,
+                        learning_outcome: learningOutcome,
+                        education_level: eduLevel,
+                        topicsAI: selectedTopic,
+                        language: analysedMaterial.language,
+                        macro_subject: analysedMaterial.macro_subject,
+                        title: analysedMaterial.title,
+                        context: context,
+                      },
+                      reactFlow: {
+                        id: idRecovery,
+                        type: 'abstractNode',
+                        position: {
+                          x: x,
+                          y: y,
+                        },
+                        width: 88,
+                        height: 46,
+                        selected: false,
+                        dragging: false,
+                        positionAbsolute: {
+                          x: x,
+                          y: y,
+                        },
+                        data: {},
+                      },
+                    });
                     const id1 = UUIDv4();
                     generatedEdges.push({
                       _id: id1,
@@ -980,7 +1015,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       reactFlow: {
                         id: id2,
                         source: node._id,
-                        target: node._id,
+                        target: idRecovery,
                         type: 'passFailEdge',
                         markerEnd: {
                           color: 'red',
@@ -992,6 +1027,30 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       },
                       title: 'fail',
                     });
+                    const id3 = UUIDv4();
+                    generatedEdges.push({
+                      _id: id3,
+                      type: 'passFailEdge',
+                      code: `\nasync Task<(bool, string)> validate(PolyglotValidationContext context) {\n    var getMultipleChoiceAnswer = () => {\n        var submitted = context.JourneyContext.EventsProduced.OfType<ReturnValueProduced>().FirstOrDefault()?.Value as HashSet<string>;\n        var answersCorrect = ((List<object>)context.Exercise.Data.isChoiceCorrect).Select((c, i) => (c, i))\n                                                                                .Where(c => bool.Parse(c.c.ToString()))\n                                                                                .Select(c => (c.i + 1).ToString())\n                                                                                .ToHashSet();\n        return submitted.SetEquals(answersCorrect);\n    };\n\n    var isSubmissionCorrect = context.Exercise.NodeType switch\n    {\n        \"multipleChoiceQuestionNode\" => getMultipleChoiceAnswer(),\n        _ => context.Exercise.Data.correctAnswers.Contains(context.JourneyContext.SubmittedCode),\n    };\n\n    var conditionKind = context.Condition.Data.conditionKind switch\n    {\n        \"pass\" => true,\n        \"fail\" => false,\n        _ => throw new Exception(\"Unknown condition kind\")\n    };\n    return (conditionKind == isSubmissionCorrect, \"Pass/Fail edge\");\n}    \n
+                    `,
+                      data: {
+                        conditionKind: 'pass',
+                      },
+                      reactFlow: {
+                        id: id3,
+                        source: idRecovery,
+                        target: nextNode._id,
+                        type: 'passFailEdge',
+                        markerEnd: {
+                          color: 'green',
+                          type: MarkerType.Arrow,
+                          width: 25,
+                          height: 25,
+                        },
+                        selected: true,
+                      },
+                      title: 'pass',
+                    });
                   }
                 }
 
diff --git a/src/data/api.ts b/src/data/api.ts
index 032112fc..29d58dff 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -36,6 +36,7 @@ export type aiAPIResponse = {
 
 const axios = axiosCreate.create({
   baseURL: process.env.BACK_URL,
+  timeout: 60000,
   headers: {
     'Content-Type': 'application/json',
   },