From 5120afcf009322c51148af7912bbcd396a60bf92 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 30 Apr 2025 11:33:48 +0200
Subject: [PATCH 01/12] feat: creation AI based tool for LP

---
 src/components/Card/PlanLessonCard.tsx        | 106 ++++
 src/components/Modals/AIToolModal.tsx         |   1 -
 src/components/Modals/CreateAILPModal.tsx     | 595 ++++++++++++++++++
 src/components/Modals/CreateFlowModal.tsx     |  10 +
 src/data/api.ts                               |   5 +
 .../AIGenerativeTypes/AIGenerativeTypes.ts    |  42 ++
 6 files changed, 758 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Card/PlanLessonCard.tsx
 create mode 100644 src/components/Modals/CreateAILPModal.tsx

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
new file mode 100644
index 00000000..61cd0f1b
--- /dev/null
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -0,0 +1,106 @@
+import {
+  Box,
+  Card,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Image,
+  Select,
+  SpaceProps,
+  Text,
+} from '@chakra-ui/react';
+import cardImage from '../../public/test_card.png';
+import { LearningOutcome, PlanLessonNode } from '../../types/polyglotElements';
+
+type FlowCardProps = {
+  planNode: PlanLessonNode;
+  py?: SpaceProps['py'];
+  px?: SpaceProps['px'];
+  id: number;
+  isSelected: boolean;
+  setSelectedNode: (id: number) => void;
+  updateNodeAt: (id: number, updatedNode: PlanLessonNode) => void;
+};
+
+const PlanLessonCard = ({
+  planNode,
+  px,
+  py,
+  id,
+  setSelectedNode,
+  isSelected,
+  updateNodeAt,
+}: FlowCardProps) => {
+  return (
+    <Box px={px} py={py}>
+      <Card
+        direction={{ base: 'column', sm: 'row' }}
+        overflow=""
+        variant="outline"
+      >
+        <Image
+          objectFit="cover"
+          maxW={{ base: '100%', sm: '200px' }}
+          src={cardImage.src}
+          alt="Flow card"
+        />
+        <CardBody>
+          <Box key={1} p={3} borderWidth="1px" borderRadius="md">
+            <Text fontSize="sm">
+              <strong>Topic:</strong> {planNode.topic}
+            </Text>
+            <Text fontSize="sm">
+              <strong>Type:</strong> {planNode.type}
+            </Text>
+            <Text fontSize="sm">
+              <strong>Details:</strong> {planNode.details}
+            </Text>
+            <Select
+              borderColor={'grey'}
+              onChange={(event) =>
+                updateNodeAt(id, {
+                  type: planNode.type,
+                  topic: planNode.topic,
+                  details: planNode.details,
+                  learning_outcome: event.currentTarget
+                    .value as LearningOutcome,
+                  duration: planNode.duration,
+                })
+              }
+            >
+              {Object.values(LearningOutcome).map((outcome) => (
+                <option
+                  key={outcome}
+                  value={outcome}
+                  selected={planNode?.learning_outcome === outcome}
+                >
+                  {planNode?.learning_outcome === outcome ? '*' : ''}
+                  {outcome}
+                  {planNode?.learning_outcome === outcome ? '*' : ''}
+                </option>
+              ))}
+            </Select>
+            <Text fontSize="sm">
+              <strong>Duration:</strong> {planNode.duration} min
+            </Text>
+          </Box>
+        </CardBody>
+
+        <CardFooter>
+          {!id && (
+            <>
+              <Checkbox
+                isChecked={isSelected}
+                onChange={() => setSelectedNode(id)}
+              >
+                {isSelected ? 'selected' : 'not selected'}
+              </Checkbox>
+            </>
+          )}
+        </CardFooter>
+      </Card>
+    </Box>
+  );
+};
+
+export default PlanLessonCard;
diff --git a/src/components/Modals/AIToolModal.tsx b/src/components/Modals/AIToolModal.tsx
index 292be289..475cf5a2 100644
--- a/src/components/Modals/AIToolModal.tsx
+++ b/src/components/Modals/AIToolModal.tsx
@@ -396,7 +396,6 @@ const AIToolModal = ({
                 setGeneratingLoading(true);
                 setLearningOutcome(choosingLearningOutcome);
                 if (!topicGen) throw ': no topic generated';
-                //aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa sei arrivato qui: fixa i dati
                 if (eduLevel == undefined || learningOutcome == undefined)
                   throw ': error in eduLevel and learningOutcome';
                 if (exerciseType != 'ReadMaterialNode') {
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
new file mode 100644
index 00000000..5729f601
--- /dev/null
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -0,0 +1,595 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  Select,
+  Text,
+  Textarea,
+  useToast,
+} from '@chakra-ui/react';
+import { AxiosResponse } from 'axios';
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { API } from '../../data/api';
+import {
+  AIPlanLessonResponse,
+  AnalyzedMaterial,
+  EducationLevel,
+  LearningOutcome,
+  PlanLessonNode,
+  QuestionType,
+  Topic,
+} from '../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
+import PlanLessonCard from '../Card/PlanLessonCard';
+
+export type ModaTemplateProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  exType: string;
+  action?: (i: boolean) => void;
+};
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function shuffleArray<T>(array: T[]) {
+  const arr = [...array];
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+const CreateAILPModal = ({
+  isOpen,
+  onClose,
+  exType,
+  action,
+}: ModaTemplateProps) => {
+  const [analysedMaterial, setAnalyzedMaterial] = useState<AnalyzedMaterial>();
+  const [generatingLoading, setGeneratingLoading] = useState(false);
+  const [sourceMaterial, setSourceMaterial] = useState('');
+  const [context, setContext] = useState('');
+  const [AINodes, setAINodes] = useState<AIPlanLessonResponse>();
+  const [titleGen, setTitle] = useState('');
+  const [macroSubjectGen, setMacroSubject] = useState('');
+  const [learningOutcome, setLearningOutcome] = useState<LearningOutcome>();
+  const [choosingLearningOutcome, setChoosingLearningOutcome] =
+    useState<LearningOutcome>();
+  const [language, setLanguage] = useState('');
+  const [duration, setDuration] = useState(0);
+  const [eduLevel, setEduLevel] = useState<EducationLevel>();
+  const [topicGen, setTopicGen] = useState<Topic[]>([
+    { topic: 'prova', explanation: '' },
+  ]);
+  const [selectedNodeIds, setSelectedNodeIds] = useState<number[]>([]);
+
+  const handleToggleNode = (id: number) => {
+    setSelectedNodeIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    );
+  };
+
+  const updateNodeAt = (id: number, updatedNode: PlanLessonNode) => {
+    if (!AINodes) return;
+
+    const updatedNodes = AINodes.nodes.map((node, index) =>
+      index === id ? updatedNode : node
+    );
+
+    setAINodes({
+      ...AINodes,
+      nodes: updatedNodes,
+    });
+  };
+
+  const [selectedTopic, setSelectedTopic] = useState<Topic[]>([]);
+  let exerciseType: QuestionType | string;
+  const [ca_n, setCA_N] = useState(1);
+  const [da_n, setDA_N] = useState(1);
+  const [eda_n, setEDA_N] = useState(1);
+  const [screen1, setScreen1] = useState(true);
+  const [screen2, setScreen2] = useState(false);
+  const [screen3, setScreen3] = useState(false);
+  const toast = useToast();
+  const { setValue } = useFormContext();
+  const word = exType == 'TrueFalseNode' ? 'Statements' : 'Answers';
+  switch (exType) {
+    case 'closeEndedQuestionNode':
+      exerciseType = QuestionType.ShortAnswerQuestion;
+      break;
+    case 'OpenQuestionNode':
+      exerciseType = QuestionType.OpenQuestion;
+      break;
+    case 'TrueFalseNode':
+      exerciseType = QuestionType.TrueOrFalse;
+      break;
+    case 'multipleChoiceQuestionNode':
+      exerciseType = QuestionType.MultipleChoice;
+      break;
+    case 'ReadMaterialNode':
+      exerciseType = 'ReadMaterial';
+      break;
+    default:
+      throw 'error in type';
+  }
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        if (action) action(false);
+        onClose();
+      }}
+      size={'2xl'}
+      isCentered
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          Do you need help to generate your learning activity?
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody hidden={!screen1}>
+          <Text>
+            STEP 1: Submit your material in this box to use our analyser.
+          </Text>
+          <FormLabel mb={2} fontWeight={'bold'}>
+            Your material:
+          </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)..."
+            value={sourceMaterial}
+            overflowY={'auto'}
+            onChange={(e) => {
+              setGeneratingLoading(false);
+              setSourceMaterial(e.currentTarget.value);
+            }}
+          />
+          <Button
+            marginTop={'15px'}
+            onClick={async () => {
+              try {
+                setGeneratingLoading(true);
+                if (!sourceMaterial) {
+                  //
+                  throw ': no text given';
+                }
+                const response: AxiosResponse = await API.analyseMaterial({
+                  text: sourceMaterial,
+                });
+                console.log(response.data as AnalyzedMaterial);
+                setAnalyzedMaterial(response.data);
+                //continua da qui.
+                setScreen1(false);
+                setScreen2(true);
+              } catch (error: any) {
+                console.log(error);
+                if ((error as Error).name === 'SyntaxError') {
+                  toast({
+                    title: 'Invalid syntax',
+                    description: (error as Error).toString(),
+                    status: 'error',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
+                }
+                if (error.response)
+                  if (error.response.status) {
+                    if (error.response.status == 500)
+                      toast({
+                        title: 'Material Error',
+                        description:
+                          'We are sorry, the resource is not analyzable, try with different material. Do not provide pages that are too long (e.g. Wikipedia pages) or too short, as they can not be analyzed correctly',
+                        status: 'error',
+                        duration: 5000,
+                        position: 'bottom-left',
+                        isClosable: true,
+                      });
+                    else if (error.response.status != 200)
+                      toast({
+                        title: 'AI API Error',
+                        description:
+                          'Internal Server error, try again. If the error persists try change material.',
+                        status: 'error',
+                        duration: 5000,
+                        position: 'bottom-left',
+                        isClosable: true,
+                      });
+                  } else
+                    toast({
+                      title: 'Generic Error',
+                      description: 'Try later ' + (error as Error),
+                      status: 'error',
+                      duration: 5000,
+                      position: 'bottom-left',
+                      isClosable: true,
+                    });
+              } finally {
+                setGeneratingLoading(false);
+              }
+            }}
+            isLoading={generatingLoading}
+          >
+            Analyse Material
+          </Button>
+        </ModalBody>
+        <ModalBody hidden={!screen2}>
+          <Text>
+            STEP 2: Choose the Level and Topic you want to use, additionally add
+            some context for the class.
+          </Text>
+          <FormControl label="Level">
+            <FormLabel
+              mb={2}
+              fontWeight={'bold'}
+              paddingTop={'5px'}
+              paddingBottom={'-5px'}
+            >
+              Educational Level:
+            </FormLabel>
+            <Select
+              borderColor={'grey'}
+              onChange={(event) =>
+                setEduLevel(event.currentTarget.value as EducationLevel)
+              }
+            >
+              {Object.values(EducationLevel).map((level) => (
+                <option
+                  key={level}
+                  value={level}
+                  selected={analysedMaterial?.education_level === level}
+                >
+                  {analysedMaterial?.education_level === level ? '*' : ''}
+                  {level}
+                  {analysedMaterial?.education_level === level ? '*' : ''}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl label="Learning Outcome">
+            <FormLabel
+              mb={2}
+              fontWeight={'bold'}
+              paddingTop={'5px'}
+              paddingBottom={'-5px'}
+            >
+              Learning Outcome:
+            </FormLabel>
+            <Select
+              borderColor={'grey'}
+              onChange={(event) =>
+                setLearningOutcome(event.currentTarget.value as LearningOutcome)
+              }
+            >
+              {Object.values(LearningOutcome).map((outcome) => (
+                <option
+                  key={outcome}
+                  value={outcome}
+                  selected={analysedMaterial?.learning_outcome === outcome}
+                >
+                  {analysedMaterial?.learning_outcome === outcome ? '*' : ''}
+                  {outcome}
+                  {analysedMaterial?.learning_outcome === outcome ? '*' : ''}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl label="Topic" paddingTop={'5px'}>
+            <FormLabel
+              mb={2}
+              fontWeight={'bold'}
+              paddingTop={'5px'}
+              paddingBottom={'-5px'}
+            >
+              Topic:
+            </FormLabel>
+            <Select
+              multiple
+              borderColor={'grey'}
+              onChange={(event) => {
+                if (!analysedMaterial) return;
+                const selectedValues = Array.from(
+                  event.target.selectedOptions,
+                  (option) => Number(option.value)
+                );
+
+                const selectedTopics = selectedValues.map((id) => ({
+                  topic: analysedMaterial.topics[id].topic,
+                  explanation: analysedMaterial.topics[id].explanation,
+                }));
+
+                setSelectedTopic(selectedTopics);
+              }}
+            >
+              {
+                <>
+                  {analysedMaterial?.topics.map((p, id) => {
+                    return (
+                      <option key={id} value={id}>
+                        <Box width={'100px'}>
+                          {p.topic}
+                          <FormLabel
+                            mb={2}
+                            fontWeight={'bold'}
+                            paddingTop={'5px'}
+                            paddingBottom={'-5px'}
+                          >
+                            Topic Description:
+                          </FormLabel>
+                          <Text>{p.explanation}</Text>
+                        </Box>
+                      </option>
+                    );
+                  })}
+                </>
+              }
+            </Select>
+          </FormControl>
+          <FormLabel mb={2} fontWeight={'bold'}>
+            Context (optional):
+          </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)..."
+            value={context}
+            overflowY={'auto'}
+            onChange={(e) => {
+              setGeneratingLoading(false);
+              setContext(e.currentTarget.value);
+            }}
+          />
+          <Button
+            marginTop={'15px'}
+            onClick={async () => {
+              try {
+                if (!analysedMaterial) throw ': no analysed material given';
+                if (!eduLevel || !learningOutcome) throw ': error in datas';
+
+                API.planLesson({
+                  topics: selectedTopic,
+                  learning_outcome: learningOutcome,
+                  language: analysedMaterial.language,
+                  macro_subject: analysedMaterial.macro_subject,
+                  title: analysedMaterial.title,
+                  education_level: eduLevel,
+                  context: context,
+                  model: 'Gemini',
+                }).then((response) => {
+                  setAINodes(response.data);
+                });
+                setScreen2(false);
+                setScreen3(true);
+              } catch (error: any) {
+                if ((error as Error).name === 'SyntaxError') {
+                  toast({
+                    title: 'Invalid syntax',
+                    description: (error as Error).toString(),
+                    status: 'error',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
+                }
+                if (error.response.status)
+                  toast({
+                    title: 'LearningObjective Error',
+                    description:
+                      'We are sorry, server was not able to generate the learning objective. Please, try again, if the error persists try a different topic',
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                else
+                  toast({
+                    title: 'Generic Error',
+                    description: 'Try later ' + (error as Error),
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+              } finally {
+                setGeneratingLoading(false);
+              }
+            }}
+            isLoading={generatingLoading}
+          >
+            Plan Lesson
+          </Button>
+        </ModalBody>
+        <ModalBody hidden={!screen3}>
+          <Text>STEP 3: Define the specifics for each activities.</Text>
+          <FormLabel paddingTop={'5px'}>Select Nodes to generate</FormLabel>
+          <FormControl label="Nodes">
+            <Box display="flex" flexDirection="column">
+              {AINodes?.nodes.map((node, id) => (
+                <PlanLessonCard
+                  planNode={node}
+                  key={id}
+                  id={id}
+                  setSelectedNode={handleToggleNode}
+                  isSelected={selectedNodeIds.includes(id)}
+                  updateNodeAt={updateNodeAt}
+                />
+              ))}
+            </Box>
+          </FormControl>
+          {/*<Flex hidden={exerciseType != 8}></Flex>*/}
+          <Flex
+            paddingTop={'5px'}
+            alignItems={'center'}
+            hidden={
+              exerciseType != QuestionType.TrueOrFalse &&
+              exerciseType != QuestionType.MultipleChoice
+            }
+          >
+            N° Correct {word}:
+            <NumberInput
+              float={'right'}
+              defaultValue={ca_n}
+              min={1}
+              width={'80px'}
+              title="soon: multiple correct answer"
+            >
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper onClick={() => setCA_N(ca_n + 1)} />
+                <NumberDecrementStepper onClick={() => setCA_N(ca_n - 1)} />
+              </NumberInputStepper>
+            </NumberInput>
+            N° Wrong {word}:
+            <NumberInput defaultValue={da_n} min={0} max={6} width={'80px'}>
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper onClick={() => setDA_N(da_n + 1)} />
+                <NumberDecrementStepper onClick={() => setDA_N(da_n - 1)} />
+              </NumberInputStepper>
+            </NumberInput>
+            N° Easy Discardable {word}:
+            <NumberInput defaultValue={eda_n} min={0} max={6} width={'80px'}>
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper onClick={() => setEDA_N(eda_n + 1)} />
+                <NumberDecrementStepper onClick={() => setEDA_N(eda_n - 1)} />
+              </NumberInputStepper>
+            </NumberInput>
+          </Flex>
+          <Button
+            hidden={exerciseType == 'ReadMaterial'}
+            marginTop={'15px'}
+            onClick={async () => {
+              console.log('GenerateActivity');
+            }}
+            isLoading={generatingLoading}
+          >
+            Generate Learning Activity
+          </Button>
+          <Button
+            hidden={exerciseType != 'ReadMaterial'}
+            marginTop={'15px'}
+            onClick={async () => {
+              console.log('generateMaterial: readMaterial');
+              /*
+              try {
+                if (exerciseType != 'ReadMaterial') return;
+                if (eduLevel == undefined || learningOutcome == undefined)
+                  throw ': error in eduLevel and learningOutcome';
+                setGeneratingLoading(true);
+                if (!topicGen) throw ': no topic generated';
+                const response: AxiosResponse = await API.generateMaterial({
+                  title: titleGen,
+                  macro_subject: macroSubjectGen,
+                  topics: [
+                    {
+                      title: titleGen,
+                      learning_outcome: learningOutcome,
+                      topics: topicGen,
+                    },
+                  ],
+                  education_level: eduLevel,
+                  learning_outcome: learningOutcome,
+                  duration: duration,
+                  language: language,
+                  model: 'Gemini',
+                });
+                setScreen1(true);
+                setScreen3(false);
+                console.log(response.data);
+                const dataGen: AIMaterialGenerated = response.data;
+                let adaptedData;
+                switch (exerciseType) {
+                  case 'ReadMaterial':
+                    console.log('creating readMaterial');
+                    adaptedData = {
+                      text: dataGen.material,
+                      link: '',
+                    };
+                    break;
+                  default:
+                    console.log('error in exerciseType');
+                    throw ': generated type error';
+                }
+                console.log(adaptedData);
+                setValue('data', adaptedData);
+                setValue('title', titleGen);
+                if (action) action(false);
+                onClose();
+              } catch (error: any) {
+                if ((error as Error).name === 'SyntaxError') {
+                  toast({
+                    title: 'Invalid syntax',
+                    description: (error as Error).toString(),
+                    status: 'error',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
+                }
+                if (error.response.status)
+                  toast({
+                    title: 'Generation Error',
+                    description:
+                      'We are sorry, server was not able to generate the material. Please, try again, if the error persists, you should restart.',
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                else
+                  toast({
+                    title: 'Generic Error',
+                    description: 'Try later ' + (error as Error),
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+              } finally {
+                setGeneratingLoading(false);
+              }*/
+            }}
+            isLoading={generatingLoading}
+          >
+            Generate Material
+          </Button>
+        </ModalBody>
+        <Button
+          onClick={() => {
+            setScreen1(true);
+            setScreen2(false);
+            setScreen3(false);
+            setSourceMaterial('');
+          }}
+          width={'80px'}
+          bottom={'12'}
+          alignSelf={'center'}
+        >
+          Restart
+        </Button>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default CreateAILPModal;
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index 33a55f46..72a85f7e 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -42,6 +42,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { APIV2 } from '../../data/api';
 import { PolyglotFlow, PolyglotFlowInfo } from '../../types/polyglotElements';
+import CreateAILPModal from './CreateAILPModal';
 
 type CreateFlowModalProps = {
   isOpen: boolean;
@@ -378,6 +379,15 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
                   onChange={(value) => setFlow(value)}
                 />
               </TabPanel>
+              <TabPanel>
+                <CreateAILPModal
+                  isOpen={false}
+                  onClose={function (): void {
+                    throw new Error('Function not implemented.');
+                  }}
+                  exType={''}
+                />
+              </TabPanel>
             </TabPanels>
           </Tabs>
         </ModalBody>
diff --git a/src/data/api.ts b/src/data/api.ts
index 6da213e4..d4ad8c61 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -13,6 +13,7 @@ import {
 } from '../types/polyglotElements';
 import {
   AIExerciseType,
+  AIPlanLesson,
   AnalyseType,
   MaterialType,
   SummerizerBody,
@@ -420,6 +421,10 @@ export const API = {
     );
   },
 
+  planLesson: (body: AIPlanLesson): Promise<AxiosResponse> => {
+    return axios.post<{}, AxiosResponse, {}>(`/api/openai/PlanLesson`, body);
+  },
+
   getAssignmentProjects: (): Promise<AxiosResponse> => {
     return axiosPapyGame.get<{}, AxiosResponse, {}>(`/assignmentProjects`);
   },
diff --git a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
index 28ead7e1..14291af5 100644
--- a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
+++ b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
@@ -60,6 +60,18 @@ export type LessonNodeAI = {
 
 export type AnalyseType = { text: string; model?: string };
 
+export type AnalyzedMaterial = {
+  title: string;
+  macro_subject: string;
+  education_level: EducationLevel;
+  learning_outcome: LearningOutcome;
+  language: string;
+  topics: Topic[];
+  keywords: string[];
+  prerequisites: string[];
+  estimated_duration: number;
+};
+
 export type AIExerciseType = {
   macro_subject: string;
   topic: string;
@@ -125,3 +137,33 @@ export type SummerizerBody = {
   education_level: EducationLevel;
   learning_outcome: LearningOutcome;
 };
+
+export type AIPlanLesson = {
+  topics: Topic[];
+  learning_outcome: LearningOutcome;
+  language: string;
+  macro_subject: string;
+  title: string;
+  education_level: EducationLevel;
+  context: string;
+  model: string;
+};
+
+export type PlanLessonNode = {
+  type: string;
+  topic: string;
+  details: string;
+  learning_outcome: LearningOutcome;
+  duration: number;
+};
+
+export type AIPlanLessonResponse = {
+  title: string;
+  macro_subject: string;
+  education_level: EducationLevel;
+  learning_outcome: LearningOutcome;
+  prerequisites: string[];
+  nodes: PlanLessonNode[];
+  context: string;
+  language: string;
+};

From 98e19bb37d62ee698f90105b2620c524387981eb Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Fri, 2 May 2025 10:26:25 +0200
Subject: [PATCH 02/12] fix: questiontype moved to map with values

---
 src/components/Modals/AIToolModal.tsx         |  56 +++----
 src/components/Modals/CreateAILPModal.tsx     |  36 ++---
 .../Edges/failDebtEdgeProperties.tsx          |   3 +-
 .../AIGenerativeTypes/AIGenerativeTypes.ts    | 140 ++++++++++++++----
 .../polyglotElements/edges/FailDebtEdge.ts    |   6 +-
 5 files changed, 147 insertions(+), 94 deletions(-)

diff --git a/src/components/Modals/AIToolModal.tsx b/src/components/Modals/AIToolModal.tsx
index 475cf5a2..15e8da8e 100644
--- a/src/components/Modals/AIToolModal.tsx
+++ b/src/components/Modals/AIToolModal.tsx
@@ -21,7 +21,6 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { AxiosResponse } from 'axios';
-import { empty } from 'fp-ts/lib/ReadonlyRecord';
 import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { API } from '../../data/api';
@@ -30,7 +29,7 @@ import {
   AIMaterialGenerated,
   EducationLevel,
   LearningOutcome,
-  QuestionType,
+  QuestionTypeMap,
   Topic,
 } from '../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
 
@@ -75,7 +74,10 @@ const AIToolModal = ({
   ]);
 
   const [topicIndex, setTopicIndex] = useState(0);
-  let exerciseType: QuestionType | string;
+  let exerciseTypeKey = QuestionTypeMap.find(
+    (elem) => elem.nodeType == exType
+  )?.key;
+  if (!exerciseTypeKey) exerciseTypeKey = 'ReadMaterial';
   const [ca_n, setCA_N] = useState(1);
   const [da_n, setDA_N] = useState(1);
   const [eda_n, setEDA_N] = useState(1);
@@ -85,25 +87,6 @@ const AIToolModal = ({
   const toast = useToast();
   const { setValue } = useFormContext();
   const word = exType == 'TrueFalseNode' ? 'Statements' : 'Answers';
-  switch (exType) {
-    case 'closeEndedQuestionNode':
-      exerciseType = QuestionType.ShortAnswerQuestion;
-      break;
-    case 'OpenQuestionNode':
-      exerciseType = QuestionType.OpenQuestion;
-      break;
-    case 'TrueFalseNode':
-      exerciseType = QuestionType.TrueOrFalse;
-      break;
-    case 'multipleChoiceQuestionNode':
-      exerciseType = QuestionType.MultipleChoice;
-      break;
-    case 'ReadMaterialNode':
-      exerciseType = 'ReadMaterial';
-      break;
-    default:
-      throw 'error in type';
-  }
   return (
     <Modal
       isOpen={isOpen}
@@ -353,8 +336,8 @@ const AIToolModal = ({
             paddingTop={'5px'}
             alignItems={'center'}
             hidden={
-              exerciseType != QuestionType.TrueOrFalse &&
-              exerciseType != QuestionType.MultipleChoice
+              exerciseTypeKey != 'true or false' &&
+              exerciseTypeKey != 'multiple choice'
             }
           >
             N° Correct {word}:
@@ -389,7 +372,7 @@ const AIToolModal = ({
             </NumberInput>
           </Flex>
           <Button
-            hidden={exerciseType == 'ReadMaterial'}
+            hidden={exerciseTypeKey == 'ReadMaterial'}
             marginTop={'15px'}
             onClick={async () => {
               try {
@@ -398,7 +381,7 @@ const AIToolModal = ({
                 if (!topicGen) throw ': no topic generated';
                 if (eduLevel == undefined || learningOutcome == undefined)
                   throw ': error in eduLevel and learningOutcome';
-                if (exerciseType != 'ReadMaterialNode') {
+                if (exerciseTypeKey != 'ReadMaterialNode') {
                   const response: AxiosResponse = await API.generateNewExercise(
                     {
                       macro_subject: macroSubjectGen,
@@ -409,7 +392,7 @@ const AIToolModal = ({
                       solutions_number: ca_n,
                       distractors_number: da_n,
                       easily_discardable_distractors_number: eda_n,
-                      type: exerciseType as QuestionType,
+                      type: exerciseTypeKey as string,
                       language: language,
                       model: 'Gemini',
                     }
@@ -417,9 +400,8 @@ const AIToolModal = ({
                   console.log(response.data);
                   const dataGen: AIExerciseGenerated = response.data;
                   let adaptedData;
-                  switch (exerciseType) {
-                    case QuestionType.OpenQuestion:
-                      console.log('creating openQuestion');
+                  switch (exerciseTypeKey) {
+                    case 'open question':
                       adaptedData = {
                         question: dataGen.assignment,
                         material: dataGen.material,
@@ -427,15 +409,13 @@ const AIToolModal = ({
                         possibleAnswer: dataGen.solutions[0],
                       };
                       break;
-                    case QuestionType.ShortAnswerQuestion:
-                      console.log('creating close_ended_question');
+                    case 'short answer question':
                       adaptedData = {
                         question: dataGen.assignment,
                         correctAnswers: dataGen.solutions,
                       };
                       break;
-                    case QuestionType.MultipleChoice:
-                      console.log('creating multichoice');
+                    case 'multiple choice':
                       const answers = [
                         ...dataGen.solutions.slice(0, ca_n),
                         ...dataGen.distractors.slice(0, da_n),
@@ -474,7 +454,7 @@ const AIToolModal = ({
                         await delay(3000);
                       }
                       break;
-                    case QuestionType.TrueOrFalse:
+                    case 'true or false':
                       console.log('creating true or false');
                       const solutions = dataGen.solutions.map((s) => {
                         const splitIndex = s.indexOf('. ');
@@ -570,11 +550,11 @@ const AIToolModal = ({
             Generate Learning Activity
           </Button>
           <Button
-            hidden={exerciseType != 'ReadMaterial'}
+            hidden={exerciseTypeKey != 'ReadMaterial'}
             marginTop={'15px'}
             onClick={async () => {
               try {
-                if (exerciseType != 'ReadMaterial') return;
+                if (exerciseTypeKey != 'ReadMaterial') return;
                 if (eduLevel == undefined || learningOutcome == undefined)
                   throw ': error in eduLevel and learningOutcome';
                 setGeneratingLoading(true);
@@ -600,7 +580,7 @@ const AIToolModal = ({
                 console.log(response.data);
                 const dataGen: AIMaterialGenerated = response.data;
                 let adaptedData;
-                switch (exerciseType) {
+                switch (exerciseTypeKey) {
                   case 'ReadMaterial':
                     console.log('creating readMaterial');
                     adaptedData = {
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 5729f601..e397e39a 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -30,7 +30,7 @@ import {
   EducationLevel,
   LearningOutcome,
   PlanLessonNode,
-  QuestionType,
+  QuestionTypeMap,
   Topic,
 } from '../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
 import PlanLessonCard from '../Card/PlanLessonCard';
@@ -99,7 +99,10 @@ const CreateAILPModal = ({
   };
 
   const [selectedTopic, setSelectedTopic] = useState<Topic[]>([]);
-  let exerciseType: QuestionType | string;
+  let exerciseTypeKey = QuestionTypeMap.find(
+    (elem) => elem.nodeType == exType
+  )?.key;
+  if (!exerciseTypeKey) exerciseTypeKey = 'ReadMaterial';
   const [ca_n, setCA_N] = useState(1);
   const [da_n, setDA_N] = useState(1);
   const [eda_n, setEDA_N] = useState(1);
@@ -109,25 +112,6 @@ const CreateAILPModal = ({
   const toast = useToast();
   const { setValue } = useFormContext();
   const word = exType == 'TrueFalseNode' ? 'Statements' : 'Answers';
-  switch (exType) {
-    case 'closeEndedQuestionNode':
-      exerciseType = QuestionType.ShortAnswerQuestion;
-      break;
-    case 'OpenQuestionNode':
-      exerciseType = QuestionType.OpenQuestion;
-      break;
-    case 'TrueFalseNode':
-      exerciseType = QuestionType.TrueOrFalse;
-      break;
-    case 'multipleChoiceQuestionNode':
-      exerciseType = QuestionType.MultipleChoice;
-      break;
-    case 'ReadMaterialNode':
-      exerciseType = 'ReadMaterial';
-      break;
-    default:
-      throw 'error in type';
-  }
   return (
     <Modal
       isOpen={isOpen}
@@ -434,13 +418,13 @@ const CreateAILPModal = ({
               ))}
             </Box>
           </FormControl>
-          {/*<Flex hidden={exerciseType != 8}></Flex>*/}
+          {/*continue from here da mettere la decisione del tipo di attività*/}
           <Flex
             paddingTop={'5px'}
             alignItems={'center'}
             hidden={
-              exerciseType != QuestionType.TrueOrFalse &&
-              exerciseType != QuestionType.MultipleChoice
+              exerciseTypeKey != 'true or false' &&
+              exerciseTypeKey != 'multiple choice'
             }
           >
             N° Correct {word}:
@@ -475,7 +459,7 @@ const CreateAILPModal = ({
             </NumberInput>
           </Flex>
           <Button
-            hidden={exerciseType == 'ReadMaterial'}
+            hidden={exerciseTypeKey == 'ReadMaterial'}
             marginTop={'15px'}
             onClick={async () => {
               console.log('GenerateActivity');
@@ -485,7 +469,7 @@ const CreateAILPModal = ({
             Generate Learning Activity
           </Button>
           <Button
-            hidden={exerciseType != 'ReadMaterial'}
+            hidden={exerciseTypeKey != 'ReadMaterial'}
             marginTop={'15px'}
             onClick={async () => {
               console.log('generateMaterial: readMaterial');
diff --git a/src/components/Properties/Edges/failDebtEdgeProperties.tsx b/src/components/Properties/Edges/failDebtEdgeProperties.tsx
index 60ebfa77..fb5d8fa0 100644
--- a/src/components/Properties/Edges/failDebtEdgeProperties.tsx
+++ b/src/components/Properties/Edges/failDebtEdgeProperties.tsx
@@ -10,14 +10,13 @@ import { AxiosResponse } from 'axios';
 import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { API } from '../../../data/api';
-import { QuestionType } from '../../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
 import EnumField from '../../Forms/Fields/EnumField';
 import TextField from '../../Forms/Fields/TextField';
 import EdgeProperties from './EdgeProperties';
 
 type Topic = {
   Topic: string;
-  Type: QuestionType;
+  Type: string;
   Description: string;
 };
 
diff --git a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
index 14291af5..a783147f 100644
--- a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
+++ b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
@@ -16,29 +16,119 @@ export enum LearningOutcome {
   GenerateContribute = 'the ability to generate new knowledge, challenge existing paradigms, and make significant contributions to the field',
 }
 
-export enum QuestionType {
-  OpenQuestion = 'open question',
-  ShortAnswerQuestion = 'short answer question',
-  TrueOrFalse = 'true or false',
-  FillInTheBlanks = 'fill in the blanks',
-  Matching = 'matching',
-  Ordering = 'ordering',
-  MultipleChoice = 'multiple choice',
-  MultipleSelect = 'multiple select',
-  Coding = 'coding',
-  Essay = 'essay',
-  KnowledgeExposition = 'knowledge exposition',
-  Debate = 'debate',
-  Brainstorming = 'brainstorming',
-  GroupDiscussion = 'group discussion',
-  Simulation = 'simulation',
-  InquiryBasedLearning = 'inquiry based learning',
-  NonWrittenMaterialAnalysis = 'non written material analysis',
-  NonWrittenMaterialProduction = 'non written material production',
-  CaseStudyAnalysis = 'case study analysis',
-  ProjectBasedLearning = 'project based learning',
-  ProblemSolvingActivity = 'problem solving activity',
-}
+export const QuestionTypeMap = [
+  {
+    key: 'open question',
+    text: 'Open Question',
+    nodeType: 'OpenQuestionNode',
+    integrated: true,
+  },
+  {
+    key: 'short answer question',
+    text: 'Short Answer Question',
+    nodeType: 'closeEndedQuestionNode',
+    integrated: true,
+  },
+  {
+    key: 'true or false',
+    text: 'True or False',
+    nodeType: 'TrueFalseNode',
+    integrated: true,
+  },
+  {
+    key: 'fill in the blanks',
+    text: 'Fill in the Blanks',
+    nodeType: 'activity',
+    integrated: false,
+  },
+  {
+    key: 'matching',
+    text: 'Matching',
+    nodeType: 'activity',
+    integrated: false,
+  },
+  {
+    key: 'ordering',
+    text: 'Ordering',
+    nodeType: 'activity',
+    integrated: false,
+  },
+  {
+    key: 'multiple choice',
+    text: 'Multiple Choice',
+    nodeType: 'multipleChoiceQuestionNode',
+    integrated: true,
+  },
+  {
+    key: 'multiple select',
+    text: 'Multiple Select',
+    nodeType: 'activity',
+    integrated: false,
+  },
+  { key: 'coding', text: 'Coding', nodeType: 'activity', integrated: false },
+  { key: 'essay', text: 'Essay', nodeType: 'activity', integrated: false },
+  {
+    key: 'knowledge exposition',
+    text: 'Knowledge Exposition',
+    nodeType: 'discussion',
+    integrated: false,
+  },
+  { key: 'debate', text: 'Debate', nodeType: 'discussion', integrated: false },
+  {
+    key: 'brainstorming',
+    text: 'Brainstorming',
+    nodeType: 'discussion',
+    integrated: false,
+  },
+  {
+    key: 'group discussion',
+    text: 'Group Discussion',
+    nodeType: 'discussion',
+    integrated: false,
+  },
+  {
+    key: 'simulation',
+    text: 'Simulation',
+    nodeType: 'experiential',
+    integrated: false,
+  },
+  {
+    key: 'inquiry based learning',
+    text: 'Inquiry-Based Learning',
+    nodeType: 'experiential',
+    integrated: false,
+  },
+  {
+    key: 'non written material analysis',
+    text: 'Non-Written Material Analysis',
+    nodeType: 'experiential',
+    integrated: false,
+  },
+  {
+    key: 'non written material production',
+    text: 'Non-Written Material Production',
+    nodeType: 'experiential',
+    integrated: false,
+  },
+  {
+    key: 'case study analysis',
+    text: 'Case Study Analysis',
+    nodeType: 'project',
+    integrated: false,
+  },
+  {
+    key: 'project based learning',
+    text: 'Project-Based Learning',
+    nodeType: 'project',
+    integrated: false,
+  },
+  {
+    key: 'problem solving activity',
+    text: 'Problem Solving Activity',
+    nodeType: 'project',
+    integrated: false,
+  },
+];
 
 export enum SummarizeStyle {
   TopicSynthetic = 'topic / synthetic',
@@ -81,7 +171,7 @@ export type AIExerciseType = {
   solutions_number: number;
   distractors_number: number;
   easily_discardable_distractors_number: number;
-  type: QuestionType;
+  type: string;
   language: string;
   model: string;
 };
@@ -97,7 +187,7 @@ export type AIExerciseGenerated = {
   solutions: string[];
   distractors: string[];
   easily_discardable_distractors: string[];
-  type: QuestionType;
+  type: string;
   language: string;
 };
 
diff --git a/src/types/polyglotElements/edges/FailDebtEdge.ts b/src/types/polyglotElements/edges/FailDebtEdge.ts
index 601e1cd7..9c264824 100644
--- a/src/types/polyglotElements/edges/FailDebtEdge.ts
+++ b/src/types/polyglotElements/edges/FailDebtEdge.ts
@@ -1,7 +1,7 @@
 import * as t from 'io-ts';
 import FailDebtEdgeProperties from '../../../components/Properties/Edges/failDebtEdgeProperties';
 import { ReactFlowSmartBezierEdgePassFail } from '../../../components/ReactFlowEdge';
-import { QuestionType } from '../AIGenerativeTypes/AIGenerativeTypes';
+import { string } from '../AIGenerativeTypes/AIGenerativeTypes';
 import { polyglotEdgeComponentMapping } from '../elementMapping';
 import { defaultPolyglotEdgeData, EdgeData, PolyglotEdge } from './Edge';
 
@@ -13,7 +13,7 @@ type FailDebtEdgeConditionKind = t.TypeOf<
 
 type Topic = {
   Topic: string;
-  Type: QuestionType;
+  Type: string;
   Description: string;
 };
 
@@ -47,7 +47,7 @@ polyglotEdgeComponentMapping.registerMapping<FailDebtEdge>({
     conditionKind: 'fail',
     material: '',
     macroSubject: '',
-    topic: { Topic: '', Description: 'setup', Type: QuestionType.OpenQuestion },
+    topic: { Topic: '', Description: 'setup', Type: string.OpenQuestion },
     learningObjective: '',
     title: '',
     language: '',

From 8e763c41c05e5f1427f9367bd3724996d8a58abb Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Fri, 2 May 2025 10:29:52 +0200
Subject: [PATCH 03/12] fix: typo

---
 src/types/polyglotElements/edges/FailDebtEdge.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types/polyglotElements/edges/FailDebtEdge.ts b/src/types/polyglotElements/edges/FailDebtEdge.ts
index 9c264824..5d2c75cb 100644
--- a/src/types/polyglotElements/edges/FailDebtEdge.ts
+++ b/src/types/polyglotElements/edges/FailDebtEdge.ts
@@ -1,7 +1,7 @@
 import * as t from 'io-ts';
 import FailDebtEdgeProperties from '../../../components/Properties/Edges/failDebtEdgeProperties';
 import { ReactFlowSmartBezierEdgePassFail } from '../../../components/ReactFlowEdge';
-import { string } from '../AIGenerativeTypes/AIGenerativeTypes';
+import { QuestionTypeMap } from '../AIGenerativeTypes/AIGenerativeTypes';
 import { polyglotEdgeComponentMapping } from '../elementMapping';
 import { defaultPolyglotEdgeData, EdgeData, PolyglotEdge } from './Edge';
 
@@ -47,7 +47,7 @@ polyglotEdgeComponentMapping.registerMapping<FailDebtEdge>({
     conditionKind: 'fail',
     material: '',
     macroSubject: '',
-    topic: { Topic: '', Description: 'setup', Type: string.OpenQuestion },
+    topic: { Topic: '', Description: 'setup', Type: QuestionTypeMap[0].key },
     learningObjective: '',
     title: '',
     language: '',

From aa74bdf80568490798eee106facc621a1db01b08 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Mon, 5 May 2025 11:49:08 +0200
Subject: [PATCH 04/12] feat: progress in AiLPmodal creation

---
 src/components/Card/PlanLessonCard.tsx        | 297 +++++++--
 src/components/Modals/CreateAILPModal.tsx     | 577 ++++++++++--------
 src/components/Modals/CreateFlowModal.tsx     |  23 +-
 src/pages/flows/index.tsx                     |   1 +
 .../AIGenerativeTypes/AIGenerativeTypes.ts    |   1 +
 5 files changed, 593 insertions(+), 306 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index 61cd0f1b..a27ecc53 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -2,15 +2,24 @@ import {
   Box,
   Card,
   CardBody,
-  CardFooter,
   Checkbox,
-  Image,
+  Flex,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
   Select,
   SpaceProps,
   Text,
 } from '@chakra-ui/react';
-import cardImage from '../../public/test_card.png';
-import { LearningOutcome, PlanLessonNode } from '../../types/polyglotElements';
+import { useEffect, useState } from 'react';
+import {
+  LearningOutcome,
+  PlanLessonNode,
+  QuestionTypeMap,
+} from '../../types/polyglotElements';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
 
 type FlowCardProps = {
   planNode: PlanLessonNode;
@@ -22,6 +31,12 @@ type FlowCardProps = {
   updateNodeAt: (id: number, updatedNode: PlanLessonNode) => void;
 };
 
+type SpecificData = {
+  solutions_number: number;
+  distractors_number: number;
+  easily_discardable_distractors_number: number;
+};
+
 const PlanLessonCard = ({
   planNode,
   px,
@@ -31,6 +46,25 @@ const PlanLessonCard = ({
   isSelected,
   updateNodeAt,
 }: FlowCardProps) => {
+  const [specificData, setSpecificData] = useState<SpecificData>({
+    solutions_number: 1,
+    distractors_number: 1,
+    easily_discardable_distractors_number: 1,
+  });
+
+  const planNodeSuggestedType = planNode.type;
+
+  useEffect(() => {
+    updateNodeAt(id, {
+      type: planNode.type,
+      topic: planNode.topic,
+      details: planNode.details,
+      learning_outcome: planNode.learning_outcome,
+      duration: planNode.duration,
+      data: specificData,
+    });
+  }, [specificData]);
+
   return (
     <Box px={px} py={py}>
       <Card
@@ -38,66 +72,215 @@ const PlanLessonCard = ({
         overflow=""
         variant="outline"
       >
-        <Image
-          objectFit="cover"
-          maxW={{ base: '100%', sm: '200px' }}
-          src={cardImage.src}
-          alt="Flow card"
-        />
         <CardBody>
           <Box key={1} p={3} borderWidth="1px" borderRadius="md">
-            <Text fontSize="sm">
-              <strong>Topic:</strong> {planNode.topic}
-            </Text>
-            <Text fontSize="sm">
-              <strong>Type:</strong> {planNode.type}
-            </Text>
-            <Text fontSize="sm">
-              <strong>Details:</strong> {planNode.details}
-            </Text>
-            <Select
-              borderColor={'grey'}
-              onChange={(event) =>
-                updateNodeAt(id, {
-                  type: planNode.type,
-                  topic: planNode.topic,
-                  details: planNode.details,
-                  learning_outcome: event.currentTarget
-                    .value as LearningOutcome,
-                  duration: planNode.duration,
-                })
-              }
-            >
-              {Object.values(LearningOutcome).map((outcome) => (
-                <option
-                  key={outcome}
-                  value={outcome}
-                  selected={planNode?.learning_outcome === outcome}
+            <Flex>
+              <Box>
+                <Text fontSize="sm">
+                  <strong>Topic:</strong> {planNode.topic}
+                </Text>
+                <Text fontSize="sm">
+                  <strong>Type:</strong> {planNode.type}
+                </Text>
+                <Text fontSize="sm">
+                  <strong>Details:</strong> {planNode.details}
+                </Text>
+                <Select
+                  borderColor={'grey'}
+                  onChange={(event) =>
+                    updateNodeAt(id, {
+                      type: planNode.type,
+                      topic: planNode.topic,
+                      details: planNode.details,
+                      learning_outcome: event.currentTarget
+                        .value as LearningOutcome,
+                      duration: planNode.duration,
+                      data: planNode.data,
+                    })
+                  }
                 >
-                  {planNode?.learning_outcome === outcome ? '*' : ''}
-                  {outcome}
-                  {planNode?.learning_outcome === outcome ? '*' : ''}
-                </option>
-              ))}
-            </Select>
+                  {Object.values(LearningOutcome).map((outcome) => (
+                    <option
+                      key={outcome}
+                      value={outcome}
+                      selected={planNode?.learning_outcome === outcome}
+                    >
+                      {planNode?.learning_outcome === outcome ? '*' : ''}
+                      {outcome}
+                      {planNode?.learning_outcome === outcome ? '*' : ''}
+                    </option>
+                  ))}
+                </Select>
+                <Select
+                  borderColor={'grey'}
+                  onChange={(event) =>
+                    updateNodeAt(id, {
+                      type: event.currentTarget.value,
+                      topic: planNode.topic,
+                      details: planNode.details,
+                      learning_outcome: planNode.learning_outcome,
+                      duration: planNode.duration,
+                      data: planNode.data,
+                    })
+                  }
+                >
+                  {QuestionTypeMap.map((qType) => {
+                    if (qType.integrated)
+                      return (
+                        <option
+                          key={qType.key}
+                          value={qType.key}
+                          selected={planNode?.type === qType.key}
+                        >
+                          {qType.key === planNodeSuggestedType ? '*' : ''}
+                          {qType.key}
+                          {qType.key === planNodeSuggestedType ? '*' : ''}
+                        </option>
+                      );
+                  })}
+                </Select>
+                {/*
             <Text fontSize="sm">
               <strong>Duration:</strong> {planNode.duration} min
-            </Text>
+            </Text>*/}
+                <Flex
+                  paddingTop={'5px'}
+                  alignItems={'center'}
+                  hidden={
+                    planNode.type != 'true or false' &&
+                    planNode.type != 'multiple choice'
+                  }
+                >
+                  N° Correct
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                  <NumberInput
+                    float={'right'}
+                    defaultValue={specificData.solutions_number}
+                    min={1}
+                    width={'80px'}
+                    title="soon: multiple correct answer"
+                  >
+                    <NumberInputField />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number + 1,
+                            distractors_number: specificData.distractors_number,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number,
+                          })
+                        }
+                      />
+                      <NumberDecrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number - 1,
+                            distractors_number: specificData.distractors_number,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number,
+                          })
+                        }
+                      />
+                    </NumberInputStepper>
+                  </NumberInput>
+                  N° Wrong
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                  <NumberInput
+                    defaultValue={specificData.solutions_number}
+                    min={0}
+                    max={6}
+                    width={'80px'}
+                  >
+                    <NumberInputField />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number,
+                            distractors_number:
+                              specificData.distractors_number + 1,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number,
+                          })
+                        }
+                      />
+                      <NumberDecrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number,
+                            distractors_number:
+                              specificData.distractors_number - 1,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number,
+                          })
+                        }
+                      />
+                    </NumberInputStepper>
+                  </NumberInput>
+                  N° Easy Discardable
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                  <NumberInput
+                    defaultValue={
+                      specificData.easily_discardable_distractors_number
+                    }
+                    min={0}
+                    max={6}
+                    width={'80px'}
+                  >
+                    <NumberInputField />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number,
+                            distractors_number: specificData.distractors_number,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number +
+                              1,
+                          })
+                        }
+                      />
+                      <NumberDecrementStepper
+                        onClick={() =>
+                          setSpecificData({
+                            solutions_number: specificData.solutions_number,
+                            distractors_number: specificData.distractors_number,
+                            easily_discardable_distractors_number:
+                              specificData.easily_discardable_distractors_number -
+                              1,
+                          })
+                        }
+                      />
+                    </NumberInputStepper>
+                  </NumberInput>
+                </Flex>
+              </Box>
+                <Checkbox
+                  isChecked={isSelected}
+                  onChange={() => setSelectedNode(id)}
+                  icon={
+                    isSelected ? (
+                      <CheckIcon />
+                    ) : (
+                      <CloseIcon />
+                    )
+                  }
+                  colorScheme="green"
+                  size="lg"
+                />
+            </Flex>
           </Box>
         </CardBody>
-
-        <CardFooter>
-          {!id && (
-            <>
-              <Checkbox
-                isChecked={isSelected}
-                onChange={() => setSelectedNode(id)}
-              >
-                {isSelected ? 'selected' : 'not selected'}
-              </Checkbox>
-            </>
-          )}
-        </CardFooter>
       </Card>
     </Box>
   );
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index e397e39a..69276fd6 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -1,36 +1,32 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
   Box,
   Button,
+  Checkbox,
+  Collapse,
   Flex,
   FormControl,
   FormLabel,
+  IconButton,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
   ModalHeader,
   ModalOverlay,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
   Select,
   Text,
   Textarea,
   useToast,
 } from '@chakra-ui/react';
-import { AxiosResponse } from 'axios';
-import { useState } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { API } from '../../data/api';
+import { useEffect, useState } from 'react';
 import {
   AIPlanLessonResponse,
   AnalyzedMaterial,
   EducationLevel,
   LearningOutcome,
   PlanLessonNode,
-  QuestionTypeMap,
   Topic,
 } from '../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
 import PlanLessonCard from '../Card/PlanLessonCard';
@@ -38,7 +34,6 @@ import PlanLessonCard from '../Card/PlanLessonCard';
 export type ModaTemplateProps = {
   isOpen: boolean;
   onClose: () => void;
-  exType: string;
   action?: (i: boolean) => void;
 };
 
@@ -55,30 +50,41 @@ function shuffleArray<T>(array: T[]) {
   return arr;
 }
 
-const CreateAILPModal = ({
-  isOpen,
-  onClose,
-  exType,
-  action,
-}: ModaTemplateProps) => {
+const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
   const [analysedMaterial, setAnalyzedMaterial] = useState<AnalyzedMaterial>();
   const [generatingLoading, setGeneratingLoading] = useState(false);
   const [sourceMaterial, setSourceMaterial] = useState('');
   const [context, setContext] = useState('');
   const [AINodes, setAINodes] = useState<AIPlanLessonResponse>();
-  const [titleGen, setTitle] = useState('');
-  const [macroSubjectGen, setMacroSubject] = useState('');
   const [learningOutcome, setLearningOutcome] = useState<LearningOutcome>();
-  const [choosingLearningOutcome, setChoosingLearningOutcome] =
-    useState<LearningOutcome>();
-  const [language, setLanguage] = useState('');
-  const [duration, setDuration] = useState(0);
   const [eduLevel, setEduLevel] = useState<EducationLevel>();
-  const [topicGen, setTopicGen] = useState<Topic[]>([
-    { topic: 'prova', explanation: '' },
-  ]);
+  const [selectedTopic, setSelectedTopic] = useState<Topic[]>([]);
   const [selectedNodeIds, setSelectedNodeIds] = useState<number[]>([]);
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+
+  useEffect(() => {
+    console.log(selectedNodeIds);
+  }, [selectedNodeIds]);
+
+  //functions for topic handler
+  const toggleTopic = (topic: Topic) => {
+    setSelectedTopic((prev) => {
+      const exists = prev.some((t) => t.topic === topic.topic);
+      return exists
+        ? prev.filter((t) => t.topic !== topic.topic)
+        : [...prev, topic];
+    });
+  };
+
+  const isTopicSelected = (topic: Topic) =>
+    selectedTopic.some((t) => t.topic === topic.topic);
+  const toggleExpand = (index: number) => {
+    setExpandedIndexes((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
 
+  //function for lessonNode handler
   const handleToggleNode = (id: number) => {
     setSelectedNodeIds((prev) =>
       prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
@@ -98,20 +104,10 @@ const CreateAILPModal = ({
     });
   };
 
-  const [selectedTopic, setSelectedTopic] = useState<Topic[]>([]);
-  let exerciseTypeKey = QuestionTypeMap.find(
-    (elem) => elem.nodeType == exType
-  )?.key;
-  if (!exerciseTypeKey) exerciseTypeKey = 'ReadMaterial';
-  const [ca_n, setCA_N] = useState(1);
-  const [da_n, setDA_N] = useState(1);
-  const [eda_n, setEDA_N] = useState(1);
   const [screen1, setScreen1] = useState(true);
   const [screen2, setScreen2] = useState(false);
   const [screen3, setScreen3] = useState(false);
   const toast = useToast();
-  const { setValue } = useFormContext();
-  const word = exType == 'TrueFalseNode' ? 'Statements' : 'Answers';
   return (
     <Modal
       isOpen={isOpen}
@@ -121,23 +117,35 @@ const CreateAILPModal = ({
       }}
       size={'2xl'}
       isCentered
+      scrollBehavior="inside"
     >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>
-          Do you need help to generate your learning activity?
+          Do you need help to generate your learning path?
+          <Text hidden={!screen1}>
+            STEP 1: Submit your material in this box to use our analyser.
+          </Text>
+          <Text hidden={!screen2}>
+            STEP 2: Choose the Level and Topic you want to use, additionally add
+            some context for the class.
+          </Text>
+          <Text hidden={!screen3}>
+            STEP 3: Define the specifics for each activities.
+          </Text>
+          <FormLabel paddingTop={'5px'} hidden={!screen3}>
+            Select and define activities to generate
+          </FormLabel>
         </ModalHeader>
         <ModalCloseButton />
         <ModalBody hidden={!screen1}>
-          <Text>
-            STEP 1: Submit your material in this box to use our analyser.
-          </Text>
           <FormLabel mb={2} fontWeight={'bold'}>
             Your material:
           </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)..."
+            minHeight={'150px'}
+            maxHeight={'350px'}
+            placeholder="Insert your material here, you can put your plain text."
             value={sourceMaterial}
             overflowY={'auto'}
             onChange={(e) => {
@@ -154,12 +162,73 @@ const CreateAILPModal = ({
                   //
                   throw ': no text given';
                 }
-                const response: AxiosResponse = await API.analyseMaterial({
+                /*const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
-                });
+                });*/
+                const response = {
+                  data: {
+                    language: 'Italian',
+                    macro_subject: 'Arte',
+                    title: 'Biografia di Michelangelo',
+                    education_level: 'high school',
+                    learning_outcome:
+                      'the ability to explain concepts and principles, and recognize how different ideas are related',
+                    topics: [
+                      {
+                        topic: 'Infanzia e formazione',
+                        explanation:
+                          "Nascita a Caprese, primi anni a Firenze, apprendistato presso Ghirlandaio e l'influenza di Lorenzo de' Medici.",
+                      },
+                      {
+                        topic: 'Primi lavori a Firenze e Bologna',
+                        explanation:
+                          "Realizzazione delle prime sculture, inclusi 'La battaglia dei Centauri' e la 'Madonna della scala'. Breve soggiorno a Venezia e Bologna, con partecipazione alla scultura dell' Arca di San Domenico.",
+                      },
+                      {
+                        topic: 'Periodo Romano',
+                        explanation:
+                          "Trasferimento a Roma, realizzazione del 'Bacco' e della 'Pietà'. Commissione e realizzazione della tomba di Giulio II e della Cappella Sistina.",
+                      },
+                      {
+                        topic: 'Ritorno a Firenze e Progetti Medicei',
+                        explanation:
+                          "Lavori per Leone X e Clemente VII, inclusa la Sagrestia Nuova e la Biblioteca Laurenziana. Coinvolgimento nelle fortificazioni di Firenze durante l'assedio.",
+                      },
+                      {
+                        topic: 'Ultimi anni a Roma',
+                        explanation:
+                          "Realizzazione del 'Giudizio Universale' nella Cappella Sistina. Scultura della 'Pietà Rondanini' e altri progetti architettonici, inclusa la cupola di San Pietro. Riflessioni sulla morte e opere incompiute.",
+                      },
+                    ],
+                    keywords: [
+                      'Michelangelo',
+                      'Buonarroti',
+                      'biografia',
+                      'scultura',
+                      'pittura',
+                      'Rinascimento',
+                      'Firenze',
+                      'Roma',
+                      'Cappella Sistina',
+                      'David',
+                      'Pietà',
+                      'arte',
+                      "storia dell'arte",
+                    ],
+                    prerequisites: [
+                      'Conoscenza generale del Rinascimento italiano',
+                      'Familiarità con i principali artisti del Rinascimento',
+                      "Interesse per la storia dell'arte",
+                    ],
+                    estimated_duration: 60,
+                  },
+                };
                 console.log(response.data as AnalyzedMaterial);
-                setAnalyzedMaterial(response.data);
-                //continua da qui.
+                setAnalyzedMaterial(response.data as AnalyzedMaterial);
+                setEduLevel(response.data.education_level as EducationLevel);
+                setLearningOutcome(
+                  response.data.learning_outcome as LearningOutcome
+                );
                 setScreen1(false);
                 setScreen2(true);
               } catch (error: any) {
@@ -216,10 +285,6 @@ const CreateAILPModal = ({
           </Button>
         </ModalBody>
         <ModalBody hidden={!screen2}>
-          <Text>
-            STEP 2: Choose the Level and Topic you want to use, additionally add
-            some context for the class.
-          </Text>
           <FormControl label="Level">
             <FormLabel
               mb={2}
@@ -283,49 +348,43 @@ const CreateAILPModal = ({
               paddingTop={'5px'}
               paddingBottom={'-5px'}
             >
-              Topic:
+              Topics:
             </FormLabel>
-            <Select
-              multiple
-              borderColor={'grey'}
-              onChange={(event) => {
-                if (!analysedMaterial) return;
-                const selectedValues = Array.from(
-                  event.target.selectedOptions,
-                  (option) => Number(option.value)
-                );
-
-                const selectedTopics = selectedValues.map((id) => ({
-                  topic: analysedMaterial.topics[id].topic,
-                  explanation: analysedMaterial.topics[id].explanation,
-                }));
-
-                setSelectedTopic(selectedTopics);
-              }}
-            >
-              {
-                <>
-                  {analysedMaterial?.topics.map((p, id) => {
-                    return (
-                      <option key={id} value={id}>
-                        <Box width={'100px'}>
-                          {p.topic}
-                          <FormLabel
-                            mb={2}
-                            fontWeight={'bold'}
-                            paddingTop={'5px'}
-                            paddingBottom={'-5px'}
-                          >
-                            Topic Description:
-                          </FormLabel>
-                          <Text>{p.explanation}</Text>
-                        </Box>
-                      </option>
-                    );
-                  })}
-                </>
-              }
-            </Select>
+            {analysedMaterial?.topics.map((topicObj, index) => (
+              <Flex key={index} align="start" mb={3} direction="column">
+                <Flex align="center">
+                  <Checkbox
+                    isChecked={isTopicSelected(topicObj)}
+                    onChange={() => toggleTopic(topicObj)}
+                    size="lg"
+                    mr={2}
+                    colorScheme="green"
+                  />
+                  <Text fontWeight="bold">{topicObj.topic}</Text>
+                  <IconButton
+                    size="sm"
+                    ml={2}
+                    aria-label="Toggle explanation"
+                    icon={
+                      expandedIndexes.includes(index) ? (
+                        <ChevronUpIcon />
+                      ) : (
+                        <ChevronDownIcon />
+                      )
+                    }
+                    onClick={() => toggleExpand(index)}
+                    variant="ghost"
+                  />
+                </Flex>
+                <Collapse in={expandedIndexes.includes(index)} animateOpacity>
+                  <Box mt={2} ml={6}>
+                    <Text fontSize="sm" color="gray.600">
+                      {topicObj.explanation}
+                    </Text>
+                  </Box>
+                </Collapse>
+              </Flex>
+            ))}
           </FormControl>
           <FormLabel mb={2} fontWeight={'bold'}>
             Context (optional):
@@ -344,9 +403,29 @@ const CreateAILPModal = ({
             marginTop={'15px'}
             onClick={async () => {
               try {
-                if (!analysedMaterial) throw ': no analysed material given';
-                if (!eduLevel || !learningOutcome) throw ': error in datas';
-
+                if (!analysedMaterial) {
+                  toast({
+                    title: 'Missing Material',
+                    description: 'No analysed material given',
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
+                }
+                if (!eduLevel || !learningOutcome) {
+                  console.log(eduLevel);
+                  toast({
+                    title: 'Missing Material',
+                    description: 'Error in datas',
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
+                } /*
                 API.planLesson({
                   topics: selectedTopic,
                   learning_outcome: learningOutcome,
@@ -358,7 +437,128 @@ const CreateAILPModal = ({
                   model: 'Gemini',
                 }).then((response) => {
                   setAINodes(response.data);
-                });
+                });*/
+                const response2 = {
+                  data: {
+                    title: 'Biografia di Michelangelo',
+                    macro_subject: 'Arte',
+                    education_level: 'college',
+                    learning_outcome:
+                      'the ability to recall or recognize simple facts and definitions',
+                    prerequisites: [
+                      "Conoscenza di base della storia dell'arte rinascimentale",
+                      'Familiarità con le principali tecniche artistiche (scultura, pittura, architettura)',
+                      'Capacità di analisi iconografica e stilistica',
+                      'Conoscenza del contesto storico e culturale del Rinascimento italiano',
+                    ],
+                    nodes: [
+                      {
+                        type: 'knowledge exposition',
+                        topic: 'Introduzione alla vita di Michelangelo',
+                        details:
+                          'Presentazione della vita di Michelangelo Buonarroti: contesto storico, famiglia, e primi anni di formazione. Accennare alle influenze artistiche iniziali.',
+                        learning_outcome:
+                          'the ability to recall or recognize simple facts and definitions',
+                        duration: 20,
+                      },
+                      {
+                        type: 'non written material analysis',
+                        topic: "Le prime opere e l'influenza di Firenze",
+                        details:
+                          "Analisi di immagini delle prime sculture di Michelangelo (es. Madonna della Scala, Battaglia dei Centauri). Discussione sull'influenza dell'arte classica e di Donatello.",
+                        learning_outcome:
+                          'the ability to explain concepts and principles, and recognize how different ideas are related',
+                        duration: 30,
+                      },
+                      {
+                        type: 'knowledge exposition',
+                        topic: 'Il David e la consacrazione a Firenze',
+                        details:
+                          "Spiegazione del contesto della commissione del David, la sua realizzazione e il significato politico e artistico dell'opera. Approfondimento sulle tecniche scultoree utilizzate.",
+                        learning_outcome:
+                          'the ability to recall or recognize simple facts and definitions',
+                        duration: 25,
+                      },
+                      {
+                        type: 'group discussion',
+                        topic: 'Discussione: Il David come simbolo',
+                        details:
+                          "Organizzare una discussione di gruppo sul significato del David come simbolo di Firenze e della sua importanza nella storia dell'arte. Incoraggiare gli studenti a esprimere le proprie interpretazioni.",
+                        learning_outcome:
+                          'the ability to explain concepts and principles, and recognize how different ideas are related',
+                        duration: 30,
+                      },
+                      {
+                        type: 'knowledge exposition',
+                        topic: 'Il trasferimento a Roma e il periodo papale',
+                        details:
+                          'Presentazione del trasferimento di Michelangelo a Roma e delle commissioni papali: la Pietà, la Cappella Sistina (volta e Giudizio Universale), e il progetto per la tomba di Giulio II.',
+                        learning_outcome:
+                          'the ability to recall or recognize simple facts and definitions',
+                        duration: 30,
+                      },
+                      {
+                        type: 'non written material analysis',
+                        topic: 'Analisi della Cappella Sistina',
+                        details:
+                          "Analisi dettagliata di alcune scene della volta della Cappella Sistina (es. Creazione di Adamo) e del Giudizio Universale. Discussione sull'iconografia, lo stile e le tecniche pittoriche utilizzate.",
+                        learning_outcome:
+                          'the ability to explain concepts and principles, and recognize how different ideas are related',
+                        duration: 40,
+                      },
+                      {
+                        type: 'essay',
+                        topic:
+                          'Saggio breve: Confronto tra la Pietà vaticana e la Pietà Rondanini',
+                        details:
+                          'Assegnare un saggio breve in cui gli studenti confrontano la Pietà vaticana con la Pietà Rondanini, analizzando le differenze stilistiche e il cambiamento nella visione artistica di Michelangelo.',
+                        learning_outcome:
+                          'the ability to apply knowledge and perform operations in practical contexts',
+                        duration: 45,
+                      },
+                      {
+                        type: 'knowledge exposition',
+                        topic: 'Michelangelo architetto: San Pietro',
+                        details:
+                          'Presentazione del ruolo di Michelangelo come architetto nella costruzione della Basilica di San Pietro. Focus sulla cupola e sulle modifiche apportate al progetto originale.',
+                        learning_outcome:
+                          'the ability to recall or recognize simple facts and definitions',
+                        duration: 20,
+                      },
+                      {
+                        type: 'problem solving activity',
+                        topic: 'Sfida: Progettare una cupola',
+                        details:
+                          'Proporre agli studenti una sfida di problem solving in cui devono progettare una cupola ispirata a quella di San Pietro, tenendo conto dei principi di statica e resistenza dei materiali.',
+                        learning_outcome:
+                          'the ability to apply knowledge and perform operations in practical contexts',
+                        duration: 40,
+                      },
+                      {
+                        type: 'knowledge exposition',
+                        topic: "Gli ultimi anni e l'eredità artistica",
+                        details:
+                          "Presentazione degli ultimi anni di vita di Michelangelo, le sue riflessioni sull'arte e la sua eredità artistica. Accennare all'influenza di Michelangelo sui successivi artisti.",
+                        learning_outcome:
+                          'the ability to recall or recognize simple facts and definitions',
+                        duration: 20,
+                      },
+                      {
+                        type: 'open question',
+                        topic:
+                          "Discussione finale: L'importanza di Michelangelo",
+                        details:
+                          "Aprire una discussione finale sull'importanza di Michelangelo nella storia dell'arte e sulla sua influenza sulla cultura occidentale. Incoraggiare gli studenti a condividere le proprie riflessioni e conclusioni.",
+                        learning_outcome:
+                          'the ability to assess your own understanding, identify gaps in knowledge, and strategize ways to close those gaps',
+                        duration: 20,
+                      },
+                    ],
+                    context: '',
+                    language: 'Italian',
+                  },
+                };
+                setAINodes(response2.data as AIPlanLessonResponse);
                 setScreen2(false);
                 setScreen3(true);
               } catch (error: any) {
@@ -402,8 +602,6 @@ const CreateAILPModal = ({
           </Button>
         </ModalBody>
         <ModalBody hidden={!screen3}>
-          <Text>STEP 3: Define the specifics for each activities.</Text>
-          <FormLabel paddingTop={'5px'}>Select Nodes to generate</FormLabel>
           <FormControl label="Nodes">
             <Box display="flex" flexDirection="column">
               {AINodes?.nodes.map((node, id) => (
@@ -418,159 +616,58 @@ const CreateAILPModal = ({
               ))}
             </Box>
           </FormControl>
-          {/*continue from here da mettere la decisione del tipo di attività*/}
-          <Flex
-            paddingTop={'5px'}
-            alignItems={'center'}
-            hidden={
-              exerciseTypeKey != 'true or false' &&
-              exerciseTypeKey != 'multiple choice'
-            }
-          >
-            N° Correct {word}:
-            <NumberInput
-              float={'right'}
-              defaultValue={ca_n}
-              min={1}
-              width={'80px'}
-              title="soon: multiple correct answer"
-            >
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper onClick={() => setCA_N(ca_n + 1)} />
-                <NumberDecrementStepper onClick={() => setCA_N(ca_n - 1)} />
-              </NumberInputStepper>
-            </NumberInput>
-            N° Wrong {word}:
-            <NumberInput defaultValue={da_n} min={0} max={6} width={'80px'}>
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper onClick={() => setDA_N(da_n + 1)} />
-                <NumberDecrementStepper onClick={() => setDA_N(da_n - 1)} />
-              </NumberInputStepper>
-            </NumberInput>
-            N° Easy Discardable {word}:
-            <NumberInput defaultValue={eda_n} min={0} max={6} width={'80px'}>
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper onClick={() => setEDA_N(eda_n + 1)} />
-                <NumberDecrementStepper onClick={() => setEDA_N(eda_n - 1)} />
-              </NumberInputStepper>
-            </NumberInput>
-          </Flex>
           <Button
-            hidden={exerciseTypeKey == 'ReadMaterial'}
             marginTop={'15px'}
             onClick={async () => {
-              console.log('GenerateActivity');
+              /*continue from here da mettere la creazione
+              un'idea potrebbe essere aggiungere un pulsante che dice "aggiungi attività read Material prima di questa activity" 
+                -> avrei già qualche valus settata ((topics sarebbe incasinata)):
+                  "topic": "Introduzione alla vita di Michelangelo",
+                  "details": "Presentazione della vita di Michelangelo Buonarroti: contesto storico, famiglia, e primi anni di formazione. Accennare alle influenze artistiche iniziali.",
+                  "learning_outcome": "the ability to recall or recognize simple facts and definitions",
+                  "duration": 20
+
+              un'altra idea è mettere nello step 2 una selezione con quante lezioni readMaterial mettere ed eventualmente capire a quanti topic sono legati
+                (mancherebbe il learning outcome ma si può scegliere dopo)
+              nota: da inserire anche l'aggiunta di readMaterial nodes->body:{
+                title: string;
+                macro_subject: string;
+                topics: LessonNodeAI[]; 
+                education_level: EducationLevel;
+                learning_outcome: LearningOutcome;
+                duration: number;
+                language: string;
+                model: string;
+              };
+              */
+              console.log('GenerateLP');
             }}
             isLoading={generatingLoading}
           >
-            Generate Learning Activity
+            Generate Learning Path
           </Button>
+        </ModalBody>
+        <ModalFooter>
           <Button
-            hidden={exerciseTypeKey != 'ReadMaterial'}
-            marginTop={'15px'}
-            onClick={async () => {
-              console.log('generateMaterial: readMaterial');
-              /*
-              try {
-                if (exerciseType != 'ReadMaterial') return;
-                if (eduLevel == undefined || learningOutcome == undefined)
-                  throw ': error in eduLevel and learningOutcome';
-                setGeneratingLoading(true);
-                if (!topicGen) throw ': no topic generated';
-                const response: AxiosResponse = await API.generateMaterial({
-                  title: titleGen,
-                  macro_subject: macroSubjectGen,
-                  topics: [
-                    {
-                      title: titleGen,
-                      learning_outcome: learningOutcome,
-                      topics: topicGen,
-                    },
-                  ],
-                  education_level: eduLevel,
-                  learning_outcome: learningOutcome,
-                  duration: duration,
-                  language: language,
-                  model: 'Gemini',
-                });
-                setScreen1(true);
-                setScreen3(false);
-                console.log(response.data);
-                const dataGen: AIMaterialGenerated = response.data;
-                let adaptedData;
-                switch (exerciseType) {
-                  case 'ReadMaterial':
-                    console.log('creating readMaterial');
-                    adaptedData = {
-                      text: dataGen.material,
-                      link: '',
-                    };
-                    break;
-                  default:
-                    console.log('error in exerciseType');
-                    throw ': generated type error';
-                }
-                console.log(adaptedData);
-                setValue('data', adaptedData);
-                setValue('title', titleGen);
-                if (action) action(false);
-                onClose();
-              } catch (error: any) {
-                if ((error as Error).name === 'SyntaxError') {
-                  toast({
-                    title: 'Invalid syntax',
-                    description: (error as Error).toString(),
-                    status: 'error',
-                    duration: 3000,
-                    position: 'bottom-left',
-                    isClosable: true,
-                  });
-                  return;
-                }
-                if (error.response.status)
-                  toast({
-                    title: 'Generation Error',
-                    description:
-                      'We are sorry, server was not able to generate the material. Please, try again, if the error persists, you should restart.',
-                    status: 'error',
-                    duration: 5000,
-                    position: 'bottom-left',
-                    isClosable: true,
-                  });
-                else
-                  toast({
-                    title: 'Generic Error',
-                    description: 'Try later ' + (error as Error),
-                    status: 'error',
-                    duration: 5000,
-                    position: 'bottom-left',
-                    isClosable: true,
-                  });
-              } finally {
-                setGeneratingLoading(false);
-              }*/
+            onClick={() => {
+              setScreen1(true);
+              setScreen2(false);
+              setScreen3(false);
+              setSourceMaterial('');
+              setGeneratingLoading(false);
+              setContext('');
+              setAINodes(undefined);
+              setLearningOutcome(undefined);
+              setEduLevel(undefined);
+              setSelectedTopic([]);
+              setSelectedNodeIds([]);
+              setExpandedIndexes([]);
             }}
-            isLoading={generatingLoading}
+            width={'80px'}
           >
-            Generate Material
+            Restart
           </Button>
-        </ModalBody>
-        <Button
-          onClick={() => {
-            setScreen1(true);
-            setScreen2(false);
-            setScreen3(false);
-            setSourceMaterial('');
-          }}
-          width={'80px'}
-          bottom={'12'}
-          alignSelf={'center'}
-        >
-          Restart
-        </Button>
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index 72a85f7e..eaef57fc 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -78,6 +78,12 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
   const { isOpen: ioPop, onClose: ocPop, onOpen: opPop } = useDisclosure();
   const [tags, setTags] = useState<{ name: string; color: string }[]>([]);
 
+  const {
+    isOpen: caifOpen,
+    onClose: caifOnClose,
+    onOpen: caifOnOpen,
+  } = useDisclosure();
+
   const toast = useToast();
   const router = useRouter();
 
@@ -379,17 +385,9 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
                   onChange={(value) => setFlow(value)}
                 />
               </TabPanel>
-              <TabPanel>
-                <CreateAILPModal
-                  isOpen={false}
-                  onClose={function (): void {
-                    throw new Error('Function not implemented.');
-                  }}
-                  exType={''}
-                />
-              </TabPanel>
             </TabPanels>
           </Tabs>
+          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose}/>
         </ModalBody>
 
         <ModalFooter>
@@ -402,6 +400,13 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
           >
             Create
           </Button>
+          <IconButton
+            aria-label="Create Flow"
+            isRound={true}
+            colorScheme="blue"
+            icon={<AddIcon fontSize={'xl'} color="white" />}
+            onClick={caifOnOpen}
+          />
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/src/pages/flows/index.tsx b/src/pages/flows/index.tsx
index 73f13aff..fae9de19 100644
--- a/src/pages/flows/index.tsx
+++ b/src/pages/flows/index.tsx
@@ -22,6 +22,7 @@ import SearchBar from '../../components/SearchBar/SearchBar';
 import { APIV2 } from '../../data/api';
 import { PolyglotFlow } from '../../types/polyglotElements';
 import auth0 from '../../utils/auth0';
+import CreateAILPModal from '../../components/Modals/CreateAILPModal';
 
 type FlowIndexPageProps = {
   accessToken: string | undefined;
diff --git a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
index a783147f..6fb98865 100644
--- a/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
+++ b/src/types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes.ts
@@ -245,6 +245,7 @@ export type PlanLessonNode = {
   details: string;
   learning_outcome: LearningOutcome;
   duration: number;
+  data: any;
 };
 
 export type AIPlanLessonResponse = {

From b3888d8773d9bc0fbb1b4444c86d399c559fb631 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Mon, 5 May 2025 11:49:53 +0200
Subject: [PATCH 05/12] feat: progress in AiLPmodal creation

---
 src/components/Card/PlanLessonCard.tsx    | 27 +++++++++++------------
 src/components/Modals/CreateFlowModal.tsx |  2 +-
 src/pages/flows/index.tsx                 |  2 +-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index a27ecc53..ce2fee16 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -1,3 +1,9 @@
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CloseIcon,
+} from '@chakra-ui/icons';
 import {
   Box,
   Card,
@@ -19,7 +25,6 @@ import {
   PlanLessonNode,
   QuestionTypeMap,
 } from '../../types/polyglotElements';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
 
 type FlowCardProps = {
   planNode: PlanLessonNode;
@@ -265,19 +270,13 @@ const PlanLessonCard = ({
                   </NumberInput>
                 </Flex>
               </Box>
-                <Checkbox
-                  isChecked={isSelected}
-                  onChange={() => setSelectedNode(id)}
-                  icon={
-                    isSelected ? (
-                      <CheckIcon />
-                    ) : (
-                      <CloseIcon />
-                    )
-                  }
-                  colorScheme="green"
-                  size="lg"
-                />
+              <Checkbox
+                isChecked={isSelected}
+                onChange={() => setSelectedNode(id)}
+                icon={isSelected ? <CheckIcon /> : <CloseIcon />}
+                colorScheme="green"
+                size="lg"
+              />
             </Flex>
           </Box>
         </CardBody>
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index eaef57fc..d6f849a6 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -387,7 +387,7 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
               </TabPanel>
             </TabPanels>
           </Tabs>
-          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose}/>
+          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
         </ModalBody>
 
         <ModalFooter>
diff --git a/src/pages/flows/index.tsx b/src/pages/flows/index.tsx
index fae9de19..bfbb8c7d 100644
--- a/src/pages/flows/index.tsx
+++ b/src/pages/flows/index.tsx
@@ -15,6 +15,7 @@ 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';
@@ -22,7 +23,6 @@ import SearchBar from '../../components/SearchBar/SearchBar';
 import { APIV2 } from '../../data/api';
 import { PolyglotFlow } from '../../types/polyglotElements';
 import auth0 from '../../utils/auth0';
-import CreateAILPModal from '../../components/Modals/CreateAILPModal';
 
 type FlowIndexPageProps = {
   accessToken: string | undefined;

From 860e246b711f4c21263d5b79005a8bfb45582d2e Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Tue, 6 May 2025 17:40:40 +0200
Subject: [PATCH 06/12] feat: creation ai LP up to nodes generation missing
 edges and complete flow

---
 src/components/Card/PlanLessonCard.tsx    |   4 +-
 src/components/Modals/CreateAILPModal.tsx | 362 +++++++++++++++++++---
 src/data/api.ts                           |   3 +
 3 files changed, 320 insertions(+), 49 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index ce2fee16..2f98eff0 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -71,14 +71,13 @@ const PlanLessonCard = ({
   }, [specificData]);
 
   return (
-    <Box px={px} py={py}>
+    <Box px={px} py={py} paddingTop={'10px'}>
       <Card
         direction={{ base: 'column', sm: 'row' }}
         overflow=""
         variant="outline"
       >
         <CardBody>
-          <Box key={1} p={3} borderWidth="1px" borderRadius="md">
             <Flex>
               <Box>
                 <Text fontSize="sm">
@@ -278,7 +277,6 @@ const PlanLessonCard = ({
                 size="lg"
               />
             </Flex>
-          </Box>
         </CardBody>
       </Card>
     </Box>
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 69276fd6..df73a903 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -15,18 +15,30 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
   Select,
   Text,
   Textarea,
   useToast,
 } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
+import { v4 as UUIDv4 } from 'uuid';
+import { API } from '../../data/api';
+import { PolyglotEdge, PolyglotFlow, PolyglotNode } from '../../types/polyglotElements';
 import {
+  AIExerciseGenerated,
+  AIMaterialGenerated,
   AIPlanLessonResponse,
   AnalyzedMaterial,
   EducationLevel,
   LearningOutcome,
+  LessonNodeAI,
   PlanLessonNode,
+  QuestionTypeMap,
   Topic,
 } from '../../types/polyglotElements/AIGenerativeTypes/AIGenerativeTypes';
 import PlanLessonCard from '../Card/PlanLessonCard';
@@ -50,6 +62,64 @@ function shuffleArray<T>(array: T[]) {
   return arr;
 }
 
+const dataFactory: Record<string, (values: AIExerciseGenerated) => any> = {
+  OpenQuestionNode: (values) => ({
+    type: 'open',
+    question: values.assignment,
+    material: values.material,
+    aiQuestion: false,
+    possibleAnswer: values.solutions[0],
+  }),
+  closeEndedQuestionNode: (values) => ({
+    type: 'shortAnswer',
+    question: values.assignment,
+    correctAnswers: values.solutions,
+    isAnswerCorrect: [],
+  }),
+  TrueFalseNode: (values) => {
+    const solutions = values.solutions.map((s) => {
+      const splitIndex = s.indexOf('. ');
+      return splitIndex !== -1 ? s.slice(splitIndex + 2) : s;
+    });
+    const answers = [
+      ...solutions,
+      ...values.distractors,
+      ...values.easily_discardable_distractors,
+    ].filter((statement) => statement !== 'empty');
+    const shuffleAnswers = shuffleArray(answers);
+
+    const isAnswerCorrect = new Array(shuffleAnswers.length).fill(false);
+    shuffleAnswers.forEach((value, index) => {
+      if (values.solutions.includes(value)) isAnswerCorrect[index] = true;
+    });
+    return {
+      type: 'multipleChoice',
+      question: values.assignment,
+      choices: shuffleAnswers,
+      isChoiceCorrect: isAnswerCorrect,
+    };
+  },
+  multipleChoiceQuestionNode: (values) => {
+    const answers = [
+      ...values.solutions,
+      ...values.distractors,
+      ...values.easily_discardable_distractors,
+    ].filter((statement) => statement !== 'empty');
+    const shuffleAnswers = shuffleArray(answers);
+
+    const isAnswerCorrect = new Array(shuffleAnswers.length).fill(false);
+    shuffleAnswers.forEach((value, index) => {
+      if (values.solutions.includes(value)) isAnswerCorrect[index] = true;
+    });
+    return {
+      type: 'multipleChoice',
+      question: values.assignment,
+      choices: shuffleAnswers,
+      isChoiceCorrect: isAnswerCorrect,
+    };
+  },
+};
+
 const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
   const [analysedMaterial, setAnalyzedMaterial] = useState<AnalyzedMaterial>();
   const [generatingLoading, setGeneratingLoading] = useState(false);
@@ -61,10 +131,25 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
   const [selectedTopic, setSelectedTopic] = useState<Topic[]>([]);
   const [selectedNodeIds, setSelectedNodeIds] = useState<number[]>([]);
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const [nReadMaterial, setNReadMaterial] = useState(1);
+  const [generatedNodes, setGeneratedNodes] = useState<PolyglotNode[]>([]);
+  const [screen1, setScreen1] = useState(true);
+  const [screen2, setScreen2] = useState(false);
+  const [screen3, setScreen3] = useState(false);
+
+  useEffect(() => {
+    if (analysedMaterial) {
+      setScreen1(false);
+      setScreen2(true);
+    }
+  }, [analysedMaterial]);
 
   useEffect(() => {
-    console.log(selectedNodeIds);
-  }, [selectedNodeIds]);
+    if (AINodes) {
+      setScreen2(false);
+      setScreen3(true);
+    }
+  }, [AINodes]);
 
   //functions for topic handler
   const toggleTopic = (topic: Topic) => {
@@ -104,10 +189,12 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
     });
   };
 
-  const [screen1, setScreen1] = useState(true);
-  const [screen2, setScreen2] = useState(false);
-  const [screen3, setScreen3] = useState(false);
+  const addGeneratedNode = (newNode: PolyglotNode) => {
+    setGeneratedNodes((prevNodes) => [...prevNodes, newNode]);
+  };
+
   const toast = useToast();
+
   return (
     <Modal
       isOpen={isOpen}
@@ -153,14 +240,23 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
               setSourceMaterial(e.currentTarget.value);
             }}
           />
+
           <Button
             marginTop={'15px'}
             onClick={async () => {
               try {
                 setGeneratingLoading(true);
                 if (!sourceMaterial) {
-                  //
-                  throw ': no text given';
+                  toast({
+                    title: 'Material missing',
+                    description:
+                      'Please, insert your material before pressing analye button.',
+                    status: 'error',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  return;
                 }
                 /*const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
@@ -229,8 +325,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                 setLearningOutcome(
                   response.data.learning_outcome as LearningOutcome
                 );
-                setScreen1(false);
-                setScreen2(true);
               } catch (error: any) {
                 console.log(error);
                 if ((error as Error).name === 'SyntaxError') {
@@ -386,6 +480,30 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
               </Flex>
             ))}
           </FormControl>
+          <FormControl label="Learning Outcome">
+            <Flex paddingTop={'5px'} alignItems={'center'}>
+              <FormLabel mb={2} fontWeight={'bold'}>
+                Number of read material activities:
+              </FormLabel>
+              <NumberInput
+                float={'right'}
+                defaultValue={nReadMaterial}
+                min={1}
+                max={8}
+                width={'80px'}
+              >
+                <NumberInputField />
+                <NumberInputStepper>
+                  <NumberIncrementStepper
+                    onClick={() => setNReadMaterial(nReadMaterial + 1)}
+                  />
+                  <NumberDecrementStepper
+                    onClick={() => setNReadMaterial(nReadMaterial - 1)}
+                  />
+                </NumberInputStepper>
+              </NumberInput>
+            </Flex>
+          </FormControl>
           <FormLabel mb={2} fontWeight={'bold'}>
             Context (optional):
           </FormLabel>
@@ -403,29 +521,19 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
             marginTop={'15px'}
             onClick={async () => {
               try {
-                if (!analysedMaterial) {
+                setGeneratingLoading(true);
+                if (selectedTopic.length < 1) {
                   toast({
-                    title: 'Missing Material',
-                    description: 'No analysed material given',
+                    title: 'Missing topics',
+                    description: 'You need to select at least one topic.',
                     status: 'error',
-                    duration: 5000,
+                    duration: 3000,
                     position: 'bottom-left',
                     isClosable: true,
                   });
                   return;
                 }
-                if (!eduLevel || !learningOutcome) {
-                  console.log(eduLevel);
-                  toast({
-                    title: 'Missing Material',
-                    description: 'Error in datas',
-                    status: 'error',
-                    duration: 5000,
-                    position: 'bottom-left',
-                    isClosable: true,
-                  });
-                  return;
-                } /*
+                /*
                 API.planLesson({
                   topics: selectedTopic,
                   learning_outcome: learningOutcome,
@@ -559,8 +667,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   },
                 };
                 setAINodes(response2.data as AIPlanLessonResponse);
-                setScreen2(false);
-                setScreen3(true);
               } catch (error: any) {
                 if ((error as Error).name === 'SyntaxError') {
                   toast({
@@ -620,27 +726,191 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
             marginTop={'15px'}
             onClick={async () => {
               /*continue from here da mettere la creazione
-              un'idea potrebbe essere aggiungere un pulsante che dice "aggiungi attività read Material prima di questa activity" 
-                -> avrei già qualche valus settata ((topics sarebbe incasinata)):
-                  "topic": "Introduzione alla vita di Michelangelo",
-                  "details": "Presentazione della vita di Michelangelo Buonarroti: contesto storico, famiglia, e primi anni di formazione. Accennare alle influenze artistiche iniziali.",
-                  "learning_outcome": "the ability to recall or recognize simple facts and definitions",
-                  "duration": 20
-
-              un'altra idea è mettere nello step 2 una selezione con quante lezioni readMaterial mettere ed eventualmente capire a quanti topic sono legati
-                (mancherebbe il learning outcome ma si può scegliere dopo)
-              nota: da inserire anche l'aggiunta di readMaterial nodes->body:{
-                title: string;
-                macro_subject: string;
-                topics: LessonNodeAI[]; 
-                education_level: EducationLevel;
-                learning_outcome: LearningOutcome;
-                duration: number;
-                language: string;
-                model: string;
-              };
+              
               */
               console.log('GenerateLP');
+              setGeneratingLoading(true);
+              if (!analysedMaterial) return;
+              try {
+                const selectedNodes = AINodes?.nodes.map((aiNode, index) => {
+                  if (selectedNodeIds.includes(index)) return aiNode;
+                });
+                if (!selectedNodes || !selectedNodes[0]) {
+                  toast({
+                    title: 'Missing activities',
+                    description:
+                      'Please, select at least one activity to start generating the learning path.',
+                    status: 'error',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                  setGeneratingLoading(false);
+                  return;
+                }
+                const nTopicReadMaterial =
+                  nReadMaterial == 1
+                    ? selectedNodes.length
+                    : nReadMaterial > selectedNodes.length
+                    ? selectedNodes.length / nReadMaterial
+                    : 1;
+                let counter = 0;
+                do {
+                  if (counter == 0 && nReadMaterial != 0) {
+                    counter = nTopicReadMaterial;
+                    setNReadMaterial(nReadMaterial - 1);
+                    const readTopics: LessonNodeAI[] = selectedNodes
+                      .map((aiNode, index) => {
+                        if (aiNode && index < nTopicReadMaterial)
+                          return {
+                            title: '',
+                            learning_outcome: aiNode.learning_outcome,
+                            topics: [
+                              {
+                                topic: aiNode.topic,
+                                explanation:
+                                  analysedMaterial.topics.find(
+                                    (topic) => topic.topic == aiNode?.topic
+                                  )?.explanation || '',
+                              },
+                            ],
+                          };
+                      })
+                      .filter((node) => node !== undefined);
+                    try {
+                      const response = await API.generateMaterial({
+                        title: analysedMaterial.title,
+                        macro_subject: analysedMaterial.macro_subject,
+                        topics: readTopics,
+                        education_level: analysedMaterial.education_level,
+                        learning_outcome: analysedMaterial.learning_outcome,
+                        duration: analysedMaterial.estimated_duration,
+                        language: analysedMaterial.language,
+                        model: 'Gemini',
+                      });
+                      const readMaterialGen: AIMaterialGenerated =
+                        response.data;
+                      const _id = UUIDv4();
+                      addGeneratedNode({
+                        _id: _id,
+                        type: 'ReadMaterialNode',
+                        title: readMaterialGen.title,
+                        description: readMaterialGen.macro_subject,
+                        difficulty: 1,
+                        data: {
+                          text: readMaterialGen.material,
+                          link: '',
+                        },
+                        reactFlow: {
+                          id: _id,
+                          type: 'ReadMaterialNode',
+                          position: {
+                            x: -195,
+                            y: -210,
+                          },
+                          width: 88,
+                          height: 46,
+                          selected: false,
+                          dragging: false,
+                          positionAbsolute: {
+                            x: -195,
+                            y: -210,
+                          },
+                          data: {},
+                        },
+                      });
+                    } catch (error) {
+                      console.log('errror in generation readMaterial ' + error);
+                    }
+                  } else {
+                    counter--;
+                    const activity = selectedNodes.shift();
+                    if (!activity) break;
+                    const response = await API.generateNewExercise({
+                      macro_subject: activity?.learning_outcome,
+                      topic: activity.topic,
+                      education_level: analysedMaterial.education_level,
+                      learning_outcome: activity.learning_outcome,
+                      material: sourceMaterial,
+                      solutions_number: activity.data.solutions_number || 0,
+                      distractors_number: activity.data.distractors_number || 0,
+                      easily_discardable_distractors_number:
+                        activity.data.easily_discardable_distractors_number ||
+                        0,
+                      type: activity.type,
+                      language: analysedMaterial.language,
+                      model: 'Gemini',
+                    });
+                    const exerciseResponse: AIExerciseGenerated = response.data;
+                    const _id = UUIDv4();
+                    const typeNode =
+                      QuestionTypeMap.find(
+                        (type) => type.key == exerciseResponse.type
+                      )?.nodeType || 'OpenQuestionNode';
+                    const data =
+                      dataFactory[typeNode]?.(exerciseResponse) || null;
+
+                    addGeneratedNode({
+                      _id: _id,
+                      type: typeNode,
+                      title: exerciseResponse.topic,
+                      description: exerciseResponse.macro_subject,
+                      difficulty: 1,
+                      data: data,
+                      reactFlow: {
+                        id: _id,
+                        type: typeNode,
+                        position: {
+                          x: -195,
+                          y: -210,
+                        },
+                        width: 88,
+                        height: 46,
+                        selected: false,
+                        dragging: false,
+                        positionAbsolute: {
+                          x: -195,
+                          y: -210,
+                        },
+                        data: {},
+                      },
+                    });
+                  }
+                } while (
+                  generatedNodes?.length <
+                  nReadMaterial + selectedNodes.length
+                );
+                const tags: { name: string; color: string }[] = [
+                  { name: analysedMaterial.keywords[0], color: 'green' },
+                  { name: analysedMaterial.keywords[1], color: 'red' },
+                  { name: analysedMaterial.keywords[2], color: 'purple' },
+                  { name: analysedMaterial.keywords[3], color: 'blue' },
+                ];
+                const topics= analysedMaterial.topics.map((t)=>t.topic);
+
+                const newFlow: PolyglotFlow = {
+                  _id: UUIDv4(),
+                  author: {
+                    _id: 'afa2e0e7-e3d1-4837-b911-0eebac05f845',
+                    username: '',
+                  },
+                  title: analysedMaterial.title,
+                  description: analysedMaterial.macro_subject,
+                  publish: false,
+                  learningContext: analysedMaterial.learning_outcome,
+                  duration: analysedMaterial.estimated_duration.toString(),
+                  topics: topics,
+                  tags: tags,
+                  nodes: generatedNodes,
+                  edges: [],
+                };
+                const flowResponse = await API.createNewFlowJson(newFlow);
+                console.log(flowResponse);
+              } catch (error) {
+                console.log(error);
+              } finally {
+                setGeneratingLoading(false);
+              }
             }}
             isLoading={generatingLoading}
           >
diff --git a/src/data/api.ts b/src/data/api.ts
index d4ad8c61..ac196abb 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -331,6 +331,9 @@ export const API = {
       createNewDefaultPolyglotFlow()
     );
   },
+  createNewFlowJson(flow: PolyglotFlow): Promise<AxiosResponse> {
+    return axios.post<{}, AxiosResponse, {}>(`/api/flows/json`, flow);
+  },
   saveFlowAsync: (flow: PolyglotFlow): Promise<AxiosResponse> => {
     flow.nodes = flow.nodes?.map((e) =>
       polyglotNodeComponentMapping.applyTransformFunction(e)

From 1dc49cd8f039e48d6c7ffb4a55b915bf34d6cae8 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 12:09:26 +0200
Subject: [PATCH 07/12] fix: general bugs

---
 src/components/LateralMenu/LateralMenu.tsx | 2 +-
 src/data/abstractExample.ts                | 3 +++
 src/data/exampleData.ts                    | 9 +++++++++
 src/types/polyglotElements/nodes/Node.ts   | 1 +
 src/utils/utils.ts                         | 1 +
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/LateralMenu/LateralMenu.tsx b/src/components/LateralMenu/LateralMenu.tsx
index 021ff69b..3bd5120d 100644
--- a/src/components/LateralMenu/LateralMenu.tsx
+++ b/src/components/LateralMenu/LateralMenu.tsx
@@ -143,7 +143,7 @@ const LateralMenu = ({ isOpen }: LateralMenuProps) => {
                       {type.label}
                     </AccordionButton>
 
-                    <AccordionPanel>
+                    <AccordionPanel key={id}>
                       {nodes
                         .filter((node) => node.group === type.group)
                         .map((nodes) => (
diff --git a/src/data/abstractExample.ts b/src/data/abstractExample.ts
index b1aa4932..5bdfe18f 100644
--- a/src/data/abstractExample.ts
+++ b/src/data/abstractExample.ts
@@ -27,6 +27,7 @@ const subFlow = new Map<PlanningGoal, PolyglotFlow>();
       title: 'Multiple Choice Question',
       description: 'Some description',
       difficulty: 1,
+      platform: 'WebApp',
       data: {
         question: 'Test',
         isChoiceCorrect: [false],
@@ -54,6 +55,7 @@ const subFlow = new Map<PlanningGoal, PolyglotFlow>();
     {
       _id: UUIDv4(),
       type: 'codingQuestionNode',
+      platform: 'VSCode',
       title: 'Coding Question',
       description: 'Some description',
       difficulty: 4,
@@ -87,6 +89,7 @@ const subFlow = new Map<PlanningGoal, PolyglotFlow>();
         target: ids[1],
         type: 'passFailEdge',
         markerEnd: {
+          color: 'green',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
diff --git a/src/data/exampleData.ts b/src/data/exampleData.ts
index 84129fc1..78d27c00 100644
--- a/src/data/exampleData.ts
+++ b/src/data/exampleData.ts
@@ -28,6 +28,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
   const multipleChoiceNodes: MultipleChoiceQuestionNode[] = [
     {
       _id: ids[0],
+      platform: 'WebApp',
       type: 'multipleChoiceQuestionNode',
       title: 'Multiple Choice Question',
       description: 'Some description',
@@ -51,6 +52,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
       _id: UUIDv4(),
       type: 'closeEndedQuestionNode',
       title: 'Close Ended Question',
+      platform:'WebApp',
       description: 'Some description',
       difficulty: 1,
       data: {
@@ -90,6 +92,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     {
       _id: ids[2],
       type: 'codingQuestionNode',
+      platform:'VSCode',
       title: 'Coding Question',
       description: 'Some description',
       difficulty: 4,
@@ -111,6 +114,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     {
       _id: UUIDv4(),
       type: 'abstractNode',
+      platform: 'VSCode',
       title: 'Abstract Node',
       description: 'nice description',
       difficulty: 1,
@@ -128,6 +132,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     {
       _id: UUIDv4(),
       type: 'lessonNode',
+      platform: 'WebApp',
       title: 'Lesson',
       description: 'Some description',
       difficulty: 1,
@@ -169,6 +174,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[1],
         type: 'passFailEdge',
         markerEnd: {
+          color: 'green',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
@@ -191,6 +197,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[3],
         type: 'exactValueEdge',
         markerEnd: {
+          color:'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
@@ -211,6 +218,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[5],
         type: 'unconditionalEdge',
         markerEnd: {
+          color:'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
@@ -235,6 +243,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[7],
         type: 'customValidationEdge',
         markerEnd: {
+          color:'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
diff --git a/src/types/polyglotElements/nodes/Node.ts b/src/types/polyglotElements/nodes/Node.ts
index 00416e0c..9a6dad5c 100644
--- a/src/types/polyglotElements/nodes/Node.ts
+++ b/src/types/polyglotElements/nodes/Node.ts
@@ -17,6 +17,7 @@ export const PolyglotNode_IoTs = t.type(
     description: t.string,
     difficulty: t.number,
     data: NodeData_IoTs,
+    platform: t.string,
   },
   'PolyglotNode'
 );
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index bcc8ff65..94062783 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -119,6 +119,7 @@ export const createNewDefaultPolyglotEdge = (
       target: targetId,
       type: type,
       markerEnd: {
+        color: type == 'unconditionalEdge' ? 'grey' : 'green',
         type: MarkerType.Arrow,
         width: 25,
         height: 25,

From 8197f10eace8bb138f10debabfba0a91a07ac98e Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 12:10:22 +0200
Subject: [PATCH 08/12] fix: progress in LP creation

---
 src/components/Card/PlanLessonCard.tsx    | 395 +++++++++++-----------
 src/components/Modals/CreateAILPModal.tsx | 261 ++++++++++----
 src/data/exampleData.ts                   |  10 +-
 3 files changed, 391 insertions(+), 275 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index 2f98eff0..8e469adf 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -1,9 +1,4 @@
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CloseIcon,
-} from '@chakra-ui/icons';
+import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
 import {
   Box,
   Card,
@@ -78,205 +73,205 @@ const PlanLessonCard = ({
         variant="outline"
       >
         <CardBody>
-            <Flex>
-              <Box>
-                <Text fontSize="sm">
-                  <strong>Topic:</strong> {planNode.topic}
-                </Text>
-                <Text fontSize="sm">
-                  <strong>Type:</strong> {planNode.type}
-                </Text>
-                <Text fontSize="sm">
-                  <strong>Details:</strong> {planNode.details}
-                </Text>
-                <Select
-                  borderColor={'grey'}
-                  onChange={(event) =>
-                    updateNodeAt(id, {
-                      type: planNode.type,
-                      topic: planNode.topic,
-                      details: planNode.details,
-                      learning_outcome: event.currentTarget
-                        .value as LearningOutcome,
-                      duration: planNode.duration,
-                      data: planNode.data,
-                    })
-                  }
-                >
-                  {Object.values(LearningOutcome).map((outcome) => (
-                    <option
-                      key={outcome}
-                      value={outcome}
-                      selected={planNode?.learning_outcome === outcome}
-                    >
-                      {planNode?.learning_outcome === outcome ? '*' : ''}
-                      {outcome}
-                      {planNode?.learning_outcome === outcome ? '*' : ''}
-                    </option>
-                  ))}
-                </Select>
-                <Select
-                  borderColor={'grey'}
-                  onChange={(event) =>
-                    updateNodeAt(id, {
-                      type: event.currentTarget.value,
-                      topic: planNode.topic,
-                      details: planNode.details,
-                      learning_outcome: planNode.learning_outcome,
-                      duration: planNode.duration,
-                      data: planNode.data,
-                    })
-                  }
-                >
-                  {QuestionTypeMap.map((qType) => {
-                    if (qType.integrated)
-                      return (
-                        <option
-                          key={qType.key}
-                          value={qType.key}
-                          selected={planNode?.type === qType.key}
-                        >
-                          {qType.key === planNodeSuggestedType ? '*' : ''}
-                          {qType.key}
-                          {qType.key === planNodeSuggestedType ? '*' : ''}
-                        </option>
-                      );
-                  })}
-                </Select>
-                {/*
+          <Flex>
+            <Box>
+              <Text fontSize="sm">
+                <strong>Topic:</strong> {planNode.topic}
+              </Text>
+              <Text fontSize="sm">
+                <strong>Type:</strong> {planNode.type}
+              </Text>
+              <Text fontSize="sm">
+                <strong>Details:</strong> {planNode.details}
+              </Text>
+              <Select
+                borderColor={'grey'}
+                onChange={(event) =>
+                  updateNodeAt(id, {
+                    type: planNode.type,
+                    topic: planNode.topic,
+                    details: planNode.details,
+                    learning_outcome: event.currentTarget
+                      .value as LearningOutcome,
+                    duration: planNode.duration,
+                    data: planNode.data,
+                  })
+                }
+              >
+                {Object.values(LearningOutcome).map((outcome) => (
+                  <option
+                    key={outcome}
+                    value={outcome}
+                    selected={planNode?.learning_outcome === outcome}
+                  >
+                    {planNode?.learning_outcome === outcome ? '*' : ''}
+                    {outcome}
+                    {planNode?.learning_outcome === outcome ? '*' : ''}
+                  </option>
+                ))}
+              </Select>
+              <Select
+                borderColor={'grey'}
+                onChange={(event) =>
+                  updateNodeAt(id, {
+                    type: event.currentTarget.value,
+                    topic: planNode.topic,
+                    details: planNode.details,
+                    learning_outcome: planNode.learning_outcome,
+                    duration: planNode.duration,
+                    data: planNode.data,
+                  })
+                }
+              >
+                {QuestionTypeMap.map((qType) => {
+                  if (qType.integrated)
+                    return (
+                      <option
+                        key={qType.key}
+                        value={qType.key}
+                        selected={planNode?.type === qType.key}
+                      >
+                        {qType.key === planNodeSuggestedType ? '*' : ''}
+                        {qType.key}
+                        {qType.key === planNodeSuggestedType ? '*' : ''}
+                      </option>
+                    );
+                })}
+              </Select>
+              {/*
             <Text fontSize="sm">
               <strong>Duration:</strong> {planNode.duration} min
             </Text>*/}
-                <Flex
-                  paddingTop={'5px'}
-                  alignItems={'center'}
-                  hidden={
-                    planNode.type != 'true or false' &&
-                    planNode.type != 'multiple choice'
+              <Flex
+                paddingTop={'5px'}
+                alignItems={'center'}
+                hidden={
+                  planNode.type != 'true or false' &&
+                  planNode.type != 'multiple choice'
+                }
+              >
+                N° Correct
+                {planNode.type == 'multiple choice'
+                  ? ' answers'
+                  : ' statements'}
+                :
+                <NumberInput
+                  float={'right'}
+                  defaultValue={specificData.solutions_number}
+                  min={1}
+                  width={'80px'}
+                  title="soon: multiple correct answer"
+                >
+                  <NumberInputField />
+                  <NumberInputStepper>
+                    <NumberIncrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number + 1,
+                          distractors_number: specificData.distractors_number,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number,
+                        })
+                      }
+                    />
+                    <NumberDecrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number - 1,
+                          distractors_number: specificData.distractors_number,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number,
+                        })
+                      }
+                    />
+                  </NumberInputStepper>
+                </NumberInput>
+                N° Wrong
+                {planNode.type == 'multiple choice'
+                  ? ' answers'
+                  : ' statements'}
+                :
+                <NumberInput
+                  defaultValue={specificData.solutions_number}
+                  min={0}
+                  max={6}
+                  width={'80px'}
+                >
+                  <NumberInputField />
+                  <NumberInputStepper>
+                    <NumberIncrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number,
+                          distractors_number:
+                            specificData.distractors_number + 1,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number,
+                        })
+                      }
+                    />
+                    <NumberDecrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number,
+                          distractors_number:
+                            specificData.distractors_number - 1,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number,
+                        })
+                      }
+                    />
+                  </NumberInputStepper>
+                </NumberInput>
+                N° Easy Discardable
+                {planNode.type == 'multiple choice'
+                  ? ' answers'
+                  : ' statements'}
+                :
+                <NumberInput
+                  defaultValue={
+                    specificData.easily_discardable_distractors_number
                   }
+                  min={0}
+                  max={6}
+                  width={'80px'}
                 >
-                  N° Correct
-                  {planNode.type == 'multiple choice'
-                    ? ' answers'
-                    : ' statements'}
-                  :
-                  <NumberInput
-                    float={'right'}
-                    defaultValue={specificData.solutions_number}
-                    min={1}
-                    width={'80px'}
-                    title="soon: multiple correct answer"
-                  >
-                    <NumberInputField />
-                    <NumberInputStepper>
-                      <NumberIncrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number + 1,
-                            distractors_number: specificData.distractors_number,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number,
-                          })
-                        }
-                      />
-                      <NumberDecrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number - 1,
-                            distractors_number: specificData.distractors_number,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number,
-                          })
-                        }
-                      />
-                    </NumberInputStepper>
-                  </NumberInput>
-                  N° Wrong
-                  {planNode.type == 'multiple choice'
-                    ? ' answers'
-                    : ' statements'}
-                  :
-                  <NumberInput
-                    defaultValue={specificData.solutions_number}
-                    min={0}
-                    max={6}
-                    width={'80px'}
-                  >
-                    <NumberInputField />
-                    <NumberInputStepper>
-                      <NumberIncrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number,
-                            distractors_number:
-                              specificData.distractors_number + 1,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number,
-                          })
-                        }
-                      />
-                      <NumberDecrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number,
-                            distractors_number:
-                              specificData.distractors_number - 1,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number,
-                          })
-                        }
-                      />
-                    </NumberInputStepper>
-                  </NumberInput>
-                  N° Easy Discardable
-                  {planNode.type == 'multiple choice'
-                    ? ' answers'
-                    : ' statements'}
-                  :
-                  <NumberInput
-                    defaultValue={
-                      specificData.easily_discardable_distractors_number
-                    }
-                    min={0}
-                    max={6}
-                    width={'80px'}
-                  >
-                    <NumberInputField />
-                    <NumberInputStepper>
-                      <NumberIncrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number,
-                            distractors_number: specificData.distractors_number,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number +
-                              1,
-                          })
-                        }
-                      />
-                      <NumberDecrementStepper
-                        onClick={() =>
-                          setSpecificData({
-                            solutions_number: specificData.solutions_number,
-                            distractors_number: specificData.distractors_number,
-                            easily_discardable_distractors_number:
-                              specificData.easily_discardable_distractors_number -
-                              1,
-                          })
-                        }
-                      />
-                    </NumberInputStepper>
-                  </NumberInput>
-                </Flex>
-              </Box>
-              <Checkbox
-                isChecked={isSelected}
-                onChange={() => setSelectedNode(id)}
-                icon={isSelected ? <CheckIcon /> : <CloseIcon />}
-                colorScheme="green"
-                size="lg"
-              />
-            </Flex>
+                  <NumberInputField />
+                  <NumberInputStepper>
+                    <NumberIncrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number,
+                          distractors_number: specificData.distractors_number,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number +
+                            1,
+                        })
+                      }
+                    />
+                    <NumberDecrementStepper
+                      onClick={() =>
+                        setSpecificData({
+                          solutions_number: specificData.solutions_number,
+                          distractors_number: specificData.distractors_number,
+                          easily_discardable_distractors_number:
+                            specificData.easily_discardable_distractors_number -
+                            1,
+                        })
+                      }
+                    />
+                  </NumberInputStepper>
+                </NumberInput>
+              </Flex>
+            </Box>
+            <Checkbox
+              isChecked={isSelected}
+              onChange={() => setSelectedNode(id)}
+              icon={isSelected ? <CheckIcon /> : <CloseIcon />}
+              colorScheme="green"
+              size="lg"
+            />
+          </Flex>
         </CardBody>
       </Card>
     </Box>
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index df73a903..4ac9228b 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -26,9 +26,14 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
+import { MarkerType } from 'reactflow';
 import { v4 as UUIDv4 } from 'uuid';
 import { API } from '../../data/api';
-import { PolyglotEdge, PolyglotFlow, PolyglotNode } from '../../types/polyglotElements';
+import {
+  PolyglotEdge,
+  PolyglotFlow,
+  PolyglotNode,
+} from '../../types/polyglotElements';
 import {
   AIExerciseGenerated,
   AIMaterialGenerated,
@@ -64,14 +69,12 @@ function shuffleArray<T>(array: T[]) {
 
 const dataFactory: Record<string, (values: AIExerciseGenerated) => any> = {
   OpenQuestionNode: (values) => ({
-    type: 'open',
     question: values.assignment,
     material: values.material,
     aiQuestion: false,
     possibleAnswer: values.solutions[0],
   }),
   closeEndedQuestionNode: (values) => ({
-    type: 'shortAnswer',
     question: values.assignment,
     correctAnswers: values.solutions,
     isAnswerCorrect: [],
@@ -93,7 +96,6 @@ const dataFactory: Record<string, (values: AIExerciseGenerated) => any> = {
       if (values.solutions.includes(value)) isAnswerCorrect[index] = true;
     });
     return {
-      type: 'multipleChoice',
       question: values.assignment,
       choices: shuffleAnswers,
       isChoiceCorrect: isAnswerCorrect,
@@ -112,7 +114,6 @@ const dataFactory: Record<string, (values: AIExerciseGenerated) => any> = {
       if (values.solutions.includes(value)) isAnswerCorrect[index] = true;
     });
     return {
-      type: 'multipleChoice',
       question: values.assignment,
       choices: shuffleAnswers,
       isChoiceCorrect: isAnswerCorrect,
@@ -132,11 +133,13 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
   const [selectedNodeIds, setSelectedNodeIds] = useState<number[]>([]);
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
   const [nReadMaterial, setNReadMaterial] = useState(1);
-  const [generatedNodes, setGeneratedNodes] = useState<PolyglotNode[]>([]);
   const [screen1, setScreen1] = useState(true);
   const [screen2, setScreen2] = useState(false);
   const [screen3, setScreen3] = useState(false);
 
+  useEffect(() => {
+    console.log(nReadMaterial);
+  }, [nReadMaterial]);
   useEffect(() => {
     if (analysedMaterial) {
       setScreen1(false);
@@ -189,10 +192,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
     });
   };
 
-  const addGeneratedNode = (newNode: PolyglotNode) => {
-    setGeneratedNodes((prevNodes) => [...prevNodes, newNode]);
-  };
-
   const toast = useToast();
 
   return (
@@ -732,9 +731,11 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
               setGeneratingLoading(true);
               if (!analysedMaterial) return;
               try {
-                const selectedNodes = AINodes?.nodes.map((aiNode, index) => {
-                  if (selectedNodeIds.includes(index)) return aiNode;
-                });
+                const selectedNodes = AINodes?.nodes
+                  .map((aiNode, index) => {
+                    if (selectedNodeIds.includes(index)) return aiNode;
+                  })
+                  .filter((node) => node != undefined);
                 if (!selectedNodes || !selectedNodes[0]) {
                   toast({
                     title: 'Missing activities',
@@ -751,10 +752,12 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                 const nTopicReadMaterial =
                   nReadMaterial == 1
                     ? selectedNodes.length
-                    : nReadMaterial > selectedNodes.length
-                    ? selectedNodes.length / nReadMaterial
+                    : nReadMaterial < selectedNodes.length
+                    ? Math.ceil(selectedNodes.length / nReadMaterial)
                     : 1;
+                const generatedNodes: PolyglotNode[] = [];
                 let counter = 0;
+                console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
                 do {
                   if (counter == 0 && nReadMaterial != 0) {
                     counter = nTopicReadMaterial;
@@ -775,8 +778,11 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                               },
                             ],
                           };
+                        return undefined;
                       })
-                      .filter((node) => node !== undefined);
+                      .filter(
+                        (node): node is LessonNodeAI => node !== undefined
+                      );
                     try {
                       const response = await API.generateMaterial({
                         title: analysedMaterial.title,
@@ -791,12 +797,15 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       const readMaterialGen: AIMaterialGenerated =
                         response.data;
                       const _id = UUIDv4();
-                      addGeneratedNode({
+                      const x = -195 + 50 * generatedNodes.length;
+                      const y = -210 + 100 * generatedNodes.length;
+                      generatedNodes.push({
                         _id: _id,
                         type: 'ReadMaterialNode',
                         title: readMaterialGen.title,
                         description: readMaterialGen.macro_subject,
                         difficulty: 1,
+                        platform: 'WebApp',
                         data: {
                           text: readMaterialGen.material,
                           link: '',
@@ -805,16 +814,16 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                           id: _id,
                           type: 'ReadMaterialNode',
                           position: {
-                            x: -195,
-                            y: -210,
+                            x: x,
+                            y: y,
                           },
                           width: 88,
                           height: 46,
                           selected: false,
                           dragging: false,
                           positionAbsolute: {
-                            x: -195,
-                            y: -210,
+                            x: x,
+                            y: y,
                           },
                           data: {},
                         },
@@ -823,71 +832,182 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       console.log('errror in generation readMaterial ' + error);
                     }
                   } else {
+                    console.log('generating activity');
                     counter--;
                     const activity = selectedNodes.shift();
+                    console.log(activity);
                     if (!activity) break;
-                    const response = await API.generateNewExercise({
-                      macro_subject: activity?.learning_outcome,
-                      topic: activity.topic,
-                      education_level: analysedMaterial.education_level,
-                      learning_outcome: activity.learning_outcome,
-                      material: sourceMaterial,
-                      solutions_number: activity.data.solutions_number || 0,
-                      distractors_number: activity.data.distractors_number || 0,
-                      easily_discardable_distractors_number:
-                        activity.data.easily_discardable_distractors_number ||
-                        0,
-                      type: activity.type,
-                      language: analysedMaterial.language,
-                      model: 'Gemini',
-                    });
-                    const exerciseResponse: AIExerciseGenerated = response.data;
-                    const _id = UUIDv4();
-                    const typeNode =
-                      QuestionTypeMap.find(
-                        (type) => type.key == exerciseResponse.type
-                      )?.nodeType || 'OpenQuestionNode';
-                    const data =
-                      dataFactory[typeNode]?.(exerciseResponse) || null;
+                    console.log('missing selected nodes:');
+                    console.log(selectedNodes);
+                    try {
+                      await API.generateNewExercise({
+                        macro_subject: activity?.learning_outcome,
+                        topic: activity.topic,
+                        education_level: analysedMaterial.education_level,
+                        learning_outcome: activity.learning_outcome,
+                        material: sourceMaterial,
+                        solutions_number: activity.data?.solutions_number || 0,
+                        distractors_number:
+                          activity.data?.distractors_number || 0,
+                        easily_discardable_distractors_number:
+                          activity.data
+                            ?.easily_discardable_distractors_number || 0,
+                        type: activity.type,
+                        language: analysedMaterial.language,
+                        model: 'Gemini',
+                      }).then((response) => {
+                        console.log('creata' + response.data);
+                        const exerciseResponse: AIExerciseGenerated =
+                          response.data;
+                        const _id = UUIDv4();
+                        const typeNode =
+                          QuestionTypeMap.find(
+                            (type) => type.key == exerciseResponse.type
+                          )?.nodeType || 'OpenQuestionNode';
+                        const data =
+                          dataFactory[typeNode]?.(exerciseResponse) || null;
+                        const x = -195 + 50 * generatedNodes.length;
+                        const y = -210 + 100 * generatedNodes.length;
+                        console.log('adding.................');
+                        generatedNodes.push({
+                          _id: _id,
+                          type: typeNode,
+                          title: exerciseResponse.topic,
+                          description: exerciseResponse.macro_subject,
+                          platform: 'WebApp',
+                          difficulty: 1,
+                          data: data,
+                          reactFlow: {
+                            id: _id,
+                            type: typeNode,
+                            position: {
+                              x: x,
+                              y: y,
+                            },
+                            width: 88,
+                            height: 46,
+                            selected: false,
+                            dragging: false,
+                            positionAbsolute: {
+                              x: x,
+                              y: y,
+                            },
+                            data: {},
+                          },
+                        });
+                        console.log('added................');
+                      });
+                    } catch (error) {
+                      console.log(error);
+                    }
+                  }
+                  console.log(generatedNodes);
+                  console.log('sto generando');
+                } while (
+                  selectedNodes.length + nReadMaterial !=
+                  generatedNodes.length
+                );
+                console.log(
+                  selectedNodes.length + nReadMaterial != generatedNodes.length
+                );
+                const generatedEdges: PolyglotEdge[] = [];
 
-                    addGeneratedNode({
-                      _id: _id,
-                      type: typeNode,
-                      title: exerciseResponse.topic,
-                      description: exerciseResponse.macro_subject,
-                      difficulty: 1,
-                      data: data,
+                for (let i = 0; i < generatedNodes.length - 1; i++) {
+                  const node = generatedNodes[i];
+                  const nextNode = generatedNodes[i + 1];
+
+                  if (node.type == 'ReadMaterialNode') {
+                    const id = UUIDv4();
+                    generatedEdges.push({
+                      _id: id,
+                      type: 'unconditionalEdge',
+                      code: `
+                    async Task<(bool, string)> validate(PolyglotValidationContext context) {
+                        return (true, "Unconditional edge");
+                    }
+                    `,
+                      data: {
+                        conditionKind: 'pass',
+                      },
                       reactFlow: {
-                        id: _id,
-                        type: typeNode,
-                        position: {
-                          x: -195,
-                          y: -210,
+                        id: id,
+                        source: node._id,
+                        target: nextNode._id,
+                        type: 'unconditionalEdge',
+                        markerEnd: {
+                          color: 'grey',
+                          type: MarkerType.Arrow,
+                          width: 25,
+                          height: 25,
                         },
-                        width: 88,
-                        height: 46,
-                        selected: false,
-                        dragging: false,
-                        positionAbsolute: {
-                          x: -195,
-                          y: -210,
+                        selected: true,
+                      },
+                      title: 'next',
+                    });
+                  } else {
+                    const id1 = UUIDv4();
+                    generatedEdges.push({
+                      _id: id1,
+                      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: id1,
+                        source: node._id,
+                        target: nextNode._id,
+                        type: 'passFailEdge',
+                        markerEnd: {
+                          color: 'green',
+                          type: MarkerType.Arrow,
+                          width: 25,
+                          height: 25,
                         },
-                        data: {},
+                        selected: true,
                       },
+                      title: 'pass',
+                    });
+                    const id2 = UUIDv4();
+                    generatedEdges.push({
+                      _id: id2,
+                      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: 'fail',
+                      },
+                      reactFlow: {
+                        id: id2,
+                        source: node._id,
+                        target: node._id,
+                        type: 'passFailEdge',
+                        markerEnd: {
+                          color: 'red',
+                          type: MarkerType.Arrow,
+                          width: 25,
+                          height: 25,
+                        },
+                        selected: true,
+                      },
+                      title: 'fail',
                     });
                   }
-                } while (
-                  generatedNodes?.length <
-                  nReadMaterial + selectedNodes.length
-                );
+                }
+
+                console.log('finito di generare, ecco tutti i nodes: ');
+                console.log(generatedNodes);
                 const tags: { name: string; color: string }[] = [
                   { name: analysedMaterial.keywords[0], color: 'green' },
                   { name: analysedMaterial.keywords[1], color: 'red' },
                   { name: analysedMaterial.keywords[2], color: 'purple' },
                   { name: analysedMaterial.keywords[3], color: 'blue' },
                 ];
-                const topics= analysedMaterial.topics.map((t)=>t.topic);
+                console.log('generato tags ' + tags);
+                const topics = analysedMaterial.topics.map((t) => t.topic);
 
+                console.log('generato topic ' + topics);
                 const newFlow: PolyglotFlow = {
                   _id: UUIDv4(),
                   author: {
@@ -902,8 +1022,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   topics: topics,
                   tags: tags,
                   nodes: generatedNodes,
-                  edges: [],
+                  edges: generatedEdges,
                 };
+                console.log(newFlow);
                 const flowResponse = await API.createNewFlowJson(newFlow);
                 console.log(flowResponse);
               } catch (error) {
diff --git a/src/data/exampleData.ts b/src/data/exampleData.ts
index 78d27c00..4e1eddc6 100644
--- a/src/data/exampleData.ts
+++ b/src/data/exampleData.ts
@@ -52,7 +52,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
       _id: UUIDv4(),
       type: 'closeEndedQuestionNode',
       title: 'Close Ended Question',
-      platform:'WebApp',
+      platform: 'WebApp',
       description: 'Some description',
       difficulty: 1,
       data: {
@@ -92,7 +92,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     {
       _id: ids[2],
       type: 'codingQuestionNode',
-      platform:'VSCode',
+      platform: 'VSCode',
       title: 'Coding Question',
       description: 'Some description',
       difficulty: 4,
@@ -197,7 +197,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[3],
         type: 'exactValueEdge',
         markerEnd: {
-          color:'grey',
+          color: 'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
@@ -218,7 +218,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[5],
         type: 'unconditionalEdge',
         markerEnd: {
-          color:'grey',
+          color: 'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,
@@ -243,7 +243,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
         target: ids[7],
         type: 'customValidationEdge',
         markerEnd: {
-          color:'grey',
+          color: 'grey',
           type: MarkerType.Arrow,
           width: 25,
           height: 25,

From 7e77e38f8a19cb6ec518a48fafdfd98219af9ce2 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 16:35:09 +0200
Subject: [PATCH 09/12] fix: error catch

---
 src/components/Modals/CreateAILPModal.tsx | 94 +++++++++++++----------
 src/components/Modals/CreateFlowModal.tsx | 16 ++--
 2 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 4ac9228b..4c72fc68 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -25,6 +25,8 @@ import {
   Textarea,
   useToast,
 } from '@chakra-ui/react';
+import { AxiosResponse } from 'axios';
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { MarkerType } from 'reactflow';
 import { v4 as UUIDv4 } from 'uuid';
@@ -137,9 +139,8 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
   const [screen2, setScreen2] = useState(false);
   const [screen3, setScreen3] = useState(false);
 
-  useEffect(() => {
-    console.log(nReadMaterial);
-  }, [nReadMaterial]);
+  const router = useRouter();
+
   useEffect(() => {
     if (analysedMaterial) {
       setScreen1(false);
@@ -207,6 +208,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
     >
       <ModalOverlay />
       <ModalContent>
+        
         <ModalHeader>
           Do you need help to generate your learning path?
           <Text hidden={!screen1}>
@@ -255,12 +257,12 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                  return;
+                    throw new Error('Missing sourceMaterial');                  
                 }
-                /*const response: AxiosResponse = await API.analyseMaterial({
+                const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
-                });*/
-                const response = {
+                });
+                /*const response = {
                   data: {
                     language: 'Italian',
                     macro_subject: 'Arte',
@@ -317,7 +319,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     ],
                     estimated_duration: 60,
                   },
-                };
+                };*/
                 console.log(response.data as AnalyzedMaterial);
                 setAnalyzedMaterial(response.data as AnalyzedMaterial);
                 setEduLevel(response.data.education_level as EducationLevel);
@@ -532,7 +534,12 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   });
                   return;
                 }
-                /*
+                if (!analysedMaterial) {
+                  throw new Error('Missing analysedMaterial');
+                }
+                if (!learningOutcome || !eduLevel) {
+                  throw new Error('Missing learningOutcome or eduLevel');
+                }
                 API.planLesson({
                   topics: selectedTopic,
                   learning_outcome: learningOutcome,
@@ -544,7 +551,8 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   model: 'Gemini',
                 }).then((response) => {
                   setAINodes(response.data);
-                });*/
+                });
+                /*
                 const response2 = {
                   data: {
                     title: 'Biografia di Michelangelo',
@@ -665,7 +673,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     language: 'Italian',
                   },
                 };
-                setAINodes(response2.data as AIPlanLessonResponse);
+                setAINodes(response2.data as AIPlanLessonResponse);*/
               } catch (error: any) {
                 if ((error as Error).name === 'SyntaxError') {
                   toast({
@@ -688,15 +696,16 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                else
+                else {
                   toast({
                     title: 'Generic Error',
-                    description: 'Try later ' + (error as Error),
+                    description: 'Try later: ' + (error as Error).message,
                     status: 'error',
                     duration: 5000,
                     position: 'bottom-left',
                     isClosable: true,
                   });
+                }
               } finally {
                 setGeneratingLoading(false);
               }
@@ -723,13 +732,10 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
           </FormControl>
           <Button
             marginTop={'15px'}
-            onClick={async () => {
-              /*continue from here da mettere la creazione
-              
-              */
-              console.log('GenerateLP');
+            onClick={async () => {              
               setGeneratingLoading(true);
-              if (!analysedMaterial) return;
+              if (!analysedMaterial) 
+                throw new Error('Missing analysedMaterial');
               try {
                 const selectedNodes = AINodes?.nodes
                   .map((aiNode, index) => {
@@ -746,8 +752,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                  setGeneratingLoading(false);
-                  return;
+                  throw new Error('Missing selectedNodes');
                 }
                 const nTopicReadMaterial =
                   nReadMaterial == 1
@@ -757,8 +762,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     : 1;
                 const generatedNodes: PolyglotNode[] = [];
                 let counter = 0;
-                console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+                let check = 0;
                 do {
+                  check++;
                   if (counter == 0 && nReadMaterial != 0) {
                     counter = nTopicReadMaterial;
                     setNReadMaterial(nReadMaterial - 1);
@@ -832,13 +838,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                       console.log('errror in generation readMaterial ' + error);
                     }
                   } else {
-                    console.log('generating activity');
                     counter--;
                     const activity = selectedNodes.shift();
-                    console.log(activity);
                     if (!activity) break;
-                    console.log('missing selected nodes:');
-                    console.log(selectedNodes);
                     try {
                       await API.generateNewExercise({
                         macro_subject: activity?.learning_outcome,
@@ -856,7 +858,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                         language: analysedMaterial.language,
                         model: 'Gemini',
                       }).then((response) => {
-                        console.log('creata' + response.data);
                         const exerciseResponse: AIExerciseGenerated =
                           response.data;
                         const _id = UUIDv4();
@@ -868,7 +869,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                           dataFactory[typeNode]?.(exerciseResponse) || null;
                         const x = -195 + 50 * generatedNodes.length;
                         const y = -210 + 100 * generatedNodes.length;
-                        console.log('adding.................');
                         generatedNodes.push({
                           _id: _id,
                           type: typeNode,
@@ -895,23 +895,19 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                             data: {},
                           },
                         });
-                        console.log('added................');
                       });
                     } catch (error) {
                       console.log(error);
                     }
                   }
-                  console.log(generatedNodes);
-                  console.log('sto generando');
                 } while (
                   selectedNodes.length + nReadMaterial !=
-                  generatedNodes.length
-                );
-                console.log(
-                  selectedNodes.length + nReadMaterial != generatedNodes.length
+                    generatedNodes.length ||
+                  check < selectedNodes.length + nReadMaterial
                 );
                 const generatedEdges: PolyglotEdge[] = [];
 
+                //edges generation
                 for (let i = 0; i < generatedNodes.length - 1; i++) {
                   const node = generatedNodes[i];
                   const nextNode = generatedNodes[i + 1];
@@ -996,18 +992,14 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   }
                 }
 
-                console.log('finito di generare, ecco tutti i nodes: ');
-                console.log(generatedNodes);
                 const tags: { name: string; color: string }[] = [
                   { name: analysedMaterial.keywords[0], color: 'green' },
                   { name: analysedMaterial.keywords[1], color: 'red' },
                   { name: analysedMaterial.keywords[2], color: 'purple' },
                   { name: analysedMaterial.keywords[3], color: 'blue' },
                 ];
-                console.log('generato tags ' + tags);
                 const topics = analysedMaterial.topics.map((t) => t.topic);
 
-                console.log('generato topic ' + topics);
                 const newFlow: PolyglotFlow = {
                   _id: UUIDv4(),
                   author: {
@@ -1024,11 +1016,28 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   nodes: generatedNodes,
                   edges: generatedEdges,
                 };
-                console.log(newFlow);
                 const flowResponse = await API.createNewFlowJson(newFlow);
-                console.log(flowResponse);
+                if (flowResponse.status !== 200) {
+                  onClose();
+                  toast({
+                    title: 'Flow not created',
+                    description: 'Something is off with your flow! Try again',
+                    status: 'warning',
+                    duration: 3000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                }
+                router.push('/flows/' + flowResponse.data.id);
               } catch (error) {
-                console.log(error);
+                toast({
+                  title: 'Generic Error',
+                  description: 'Try later: ' + (error as Error).message,
+                  status: 'error',
+                  duration: 5000,
+                  position: 'bottom-left',
+                  isClosable: true,
+                });
               } finally {
                 setGeneratingLoading(false);
               }
@@ -1053,6 +1062,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
               setSelectedTopic([]);
               setSelectedNodeIds([]);
               setExpandedIndexes([]);
+              setNReadMaterial(1);
             }}
             width={'80px'}
           >
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index d6f849a6..2afdaba1 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -183,6 +183,10 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
             <TabList>
               <Tab>Custom</Tab>
               <Tab>Import JSON</Tab>
+          <Tab onClick={()=>caifOnOpen()}>
+            Create with AI
+            
+          </Tab>
             </TabList>
 
             <TabPanels>
@@ -385,9 +389,12 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
                   onChange={(value) => setFlow(value)}
                 />
               </TabPanel>
+              <TabPanel>
+                
+          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
+              </TabPanel>
             </TabPanels>
           </Tabs>
-          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
         </ModalBody>
 
         <ModalFooter>
@@ -400,13 +407,6 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
           >
             Create
           </Button>
-          <IconButton
-            aria-label="Create Flow"
-            isRound={true}
-            colorScheme="blue"
-            icon={<AddIcon fontSize={'xl'} color="white" />}
-            onClick={caifOnOpen}
-          />
         </ModalFooter>
       </ModalContent>
     </Modal>

From bdc9de54aa3ead72c86b02d1d662dc5af2a3c4e7 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 16:36:12 +0200
Subject: [PATCH 10/12] fix: error catch

---
 src/components/Modals/CreateAILPModal.tsx | 7 +++----
 src/components/Modals/CreateFlowModal.tsx | 8 ++------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 4c72fc68..d2ca88da 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -208,7 +208,6 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
     >
       <ModalOverlay />
       <ModalContent>
-        
         <ModalHeader>
           Do you need help to generate your learning path?
           <Text hidden={!screen1}>
@@ -257,7 +256,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                    throw new Error('Missing sourceMaterial');                  
+                  throw new Error('Missing sourceMaterial');
                 }
                 const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
@@ -732,9 +731,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
           </FormControl>
           <Button
             marginTop={'15px'}
-            onClick={async () => {              
+            onClick={async () => {
               setGeneratingLoading(true);
-              if (!analysedMaterial) 
+              if (!analysedMaterial)
                 throw new Error('Missing analysedMaterial');
               try {
                 const selectedNodes = AINodes?.nodes
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index 2afdaba1..252c0510 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -183,10 +183,7 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
             <TabList>
               <Tab>Custom</Tab>
               <Tab>Import JSON</Tab>
-          <Tab onClick={()=>caifOnOpen()}>
-            Create with AI
-            
-          </Tab>
+              <Tab onClick={() => caifOnOpen()}>Create with AI</Tab>
             </TabList>
 
             <TabPanels>
@@ -390,8 +387,7 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
                 />
               </TabPanel>
               <TabPanel>
-                
-          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
+                <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
               </TabPanel>
             </TabPanels>
           </Tabs>

From 9868feb2df0dd244bb64d4e988809e37b29c49de Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 17:01:44 +0200
Subject: [PATCH 11/12] fix: interaction fix

---
 src/components/Card/PlanLessonCard.tsx    | 12 ++++++------
 src/components/Modals/CreateAILPModal.tsx |  6 +++---
 src/components/Modals/CreateFlowModal.tsx | 17 ++++++++++++-----
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index 8e469adf..ca286437 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -150,11 +150,11 @@ const PlanLessonCard = ({
                   planNode.type != 'multiple choice'
                 }
               >
-                N° Correct
+                <Text textStyle="sm">N° Correct
                 {planNode.type == 'multiple choice'
                   ? ' answers'
                   : ' statements'}
-                :
+                :</Text>
                 <NumberInput
                   float={'right'}
                   defaultValue={specificData.solutions_number}
@@ -186,11 +186,11 @@ const PlanLessonCard = ({
                     />
                   </NumberInputStepper>
                 </NumberInput>
-                N° Wrong
+                <Text textStyle="sm">N° Wrong
                 {planNode.type == 'multiple choice'
                   ? ' answers'
                   : ' statements'}
-                :
+                :</Text>
                 <NumberInput
                   defaultValue={specificData.solutions_number}
                   min={0}
@@ -223,11 +223,11 @@ const PlanLessonCard = ({
                     />
                   </NumberInputStepper>
                 </NumberInput>
-                N° Easy Discardable
+                <Text textStyle="sm">Easy wrong
                 {planNode.type == 'multiple choice'
                   ? ' answers'
                   : ' statements'}
-                :
+                :</Text>
                 <NumberInput
                   defaultValue={
                     specificData.easily_discardable_distractors_number
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index d2ca88da..d53bd2b0 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -256,7 +256,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                  throw new Error('Missing sourceMaterial');
+                    throw new Error('Missing sourceMaterial');                  
                 }
                 const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
@@ -731,9 +731,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
           </FormControl>
           <Button
             marginTop={'15px'}
-            onClick={async () => {
+            onClick={async () => {              
               setGeneratingLoading(true);
-              if (!analysedMaterial)
+              if (!analysedMaterial) 
                 throw new Error('Missing analysedMaterial');
               try {
                 const selectedNodes = AINodes?.nodes
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index 252c0510..bd3f5d29 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -1,4 +1,4 @@
-import { AddIcon, CloseIcon } from '@chakra-ui/icons';
+import { AddIcon, CloseIcon, ViewIcon } from '@chakra-ui/icons';
 import {
   Box,
   Button,
@@ -183,8 +183,17 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
             <TabList>
               <Tab>Custom</Tab>
               <Tab>Import JSON</Tab>
-              <Tab onClick={() => caifOnOpen()}>Create with AI</Tab>
             </TabList>
+            <Text top={'-100px'} float={'right'} onClick={caifOnOpen}>
+              Create with AI{' '}
+              <IconButton
+                aria-label="Create Flow"
+                isRound={true}
+                height={'30px'}
+                colorScheme="blue"
+                icon={<ViewIcon color="white" />}
+              />
+            </Text>
 
             <TabPanels>
               <TabPanel>
@@ -386,11 +395,9 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
                   onChange={(value) => setFlow(value)}
                 />
               </TabPanel>
-              <TabPanel>
-                <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
-              </TabPanel>
             </TabPanels>
           </Tabs>
+          <CreateAILPModal isOpen={caifOpen} onClose={caifOnClose} />
         </ModalBody>
 
         <ModalFooter>

From 48b3a55499b008f029c4d1edcec4765febd1bde8 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Wed, 7 May 2025 17:02:22 +0200
Subject: [PATCH 12/12] fix: interaction fix

---
 src/components/Card/PlanLessonCard.tsx    | 36 +++++++++++++----------
 src/components/Modals/CreateAILPModal.tsx |  6 ++--
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/Card/PlanLessonCard.tsx b/src/components/Card/PlanLessonCard.tsx
index ca286437..798bda3a 100644
--- a/src/components/Card/PlanLessonCard.tsx
+++ b/src/components/Card/PlanLessonCard.tsx
@@ -150,11 +150,13 @@ const PlanLessonCard = ({
                   planNode.type != 'multiple choice'
                 }
               >
-                <Text textStyle="sm">N° Correct
-                {planNode.type == 'multiple choice'
-                  ? ' answers'
-                  : ' statements'}
-                :</Text>
+                <Text textStyle="sm">
+                  N° Correct
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                </Text>
                 <NumberInput
                   float={'right'}
                   defaultValue={specificData.solutions_number}
@@ -186,11 +188,13 @@ const PlanLessonCard = ({
                     />
                   </NumberInputStepper>
                 </NumberInput>
-                <Text textStyle="sm">N° Wrong
-                {planNode.type == 'multiple choice'
-                  ? ' answers'
-                  : ' statements'}
-                :</Text>
+                <Text textStyle="sm">
+                  N° Wrong
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                </Text>
                 <NumberInput
                   defaultValue={specificData.solutions_number}
                   min={0}
@@ -223,11 +227,13 @@ const PlanLessonCard = ({
                     />
                   </NumberInputStepper>
                 </NumberInput>
-                <Text textStyle="sm">Easy wrong
-                {planNode.type == 'multiple choice'
-                  ? ' answers'
-                  : ' statements'}
-                :</Text>
+                <Text textStyle="sm">
+                  Easy wrong
+                  {planNode.type == 'multiple choice'
+                    ? ' answers'
+                    : ' statements'}
+                  :
+                </Text>
                 <NumberInput
                   defaultValue={
                     specificData.easily_discardable_distractors_number
diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index d53bd2b0..d2ca88da 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -256,7 +256,7 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     position: 'bottom-left',
                     isClosable: true,
                   });
-                    throw new Error('Missing sourceMaterial');                  
+                  throw new Error('Missing sourceMaterial');
                 }
                 const response: AxiosResponse = await API.analyseMaterial({
                   text: sourceMaterial,
@@ -731,9 +731,9 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
           </FormControl>
           <Button
             marginTop={'15px'}
-            onClick={async () => {              
+            onClick={async () => {
               setGeneratingLoading(true);
-              if (!analysedMaterial) 
+              if (!analysedMaterial)
                 throw new Error('Missing analysedMaterial');
               try {
                 const selectedNodes = AINodes?.nodes