fix(tutor): graphic and text issues (#66)

* fix(tutor): graphic and text issues

* wip

* wip

* adds space at the end

Author: sandragjacinto

src/components/dropdowns/BaseDropdown.vue

@@ -141,7 +141,7 @@ defineProps<{
 }
 
 .dropdown-content {
-  height: 25rem;
+  height: auto;
   overflow-y: auto;
 }
 .dropdown-trigger {

src/components/tutor/FirstStep.vue src/components/tutor/CursusInfo.vuesrc/components/tutor/FirstStep.vue renamed to src/components/tutor/CursusInfo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import ChevronDown from '@/components/icons/ChevronDown.vue';
+import BaseDropdown from '@/components/dropdowns/BaseDropdown.vue';
 
 // TODO: add info that default values will be used if not written down
 // TODO: make files required:w
@@ -18,6 +19,8 @@ interface Props {
   action: () => void;
   actionText?: string;
   addedFilesTitles: string[];
+  storedLanguage: string;
+  selectLang: (string) => void;
 }
 
 const props = defineProps<Props>();
@@ -90,7 +93,7 @@ const appendNewInputFile = () => {
 </script>
 
 <template>
-  <div id="target-1" class="wrapper" :class="{ disabled }">
+  <div id="target-1" class="wrapper">
     <h1 class="title is-4">1 - {{ $t('tutor.firstStep.title') }}</h1>
     <p class="subtitle is-6">{{ $t('tutor.firstStep.description') }}</p>
 
@@ -138,7 +141,7 @@ const appendNewInputFile = () => {
     </h2>
     <p class="subtitle is-6">{{ $t('tutor.firstStep.cursusDescriptionDescription') }}</p>
 
-    <div class="is-flex is-flex-wrap-wrap descriptions">
+    <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between descriptions">
       <div class="description">
         <label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
         <input
@@ -174,6 +177,32 @@ const appendNewInputFile = () => {
           :placeholder="$t('tutor.firstStep.cursusDurationPlaceholder')"
         />
       </div>
+      <div class="description">
+        <label for="cursus-lang">{{ $t('tutor.firstStep.syllabusLanguage') }}</label>
+        <BaseDropdown v-slot="slotProps" :isUp="isUp" :title="storedLanguage">
+          <ClickableText
+            class="dropdown-item"
+            :text="$t('removeSelection')"
+            :action="
+              () => {
+                slotProps.toggleVisibility();
+              }
+            "
+          />
+          <a
+            :key="lang"
+            @click="
+              selectLang(lang);
+              slotProps.toggleVisibility();
+            "
+            v-for="lang in ['fr', 'en']"
+            class="dropdown-item"
+            :class="storedLanguage === lang && 'is-active'"
+          >
+            {{ $t(`${lang}`) }}
+          </a>
+        </BaseDropdown>
+      </div>
     </div>
 
     <label for="cursus-description" class="mt-4">
@@ -183,7 +212,6 @@ const appendNewInputFile = () => {
       id="cursus-description"
       class="textarea mt-1"
       :placeholder="$t('tutor.firstStep.cursusDescriptionPlaceholder')"
-      rows="5"
       :value="description"
       @input="emit('update:description', ($event.target as HTMLTextAreaElement).value)"
     />
@@ -203,16 +231,16 @@ const appendNewInputFile = () => {
 }
 .wrapper {
   padding: 5% 0;
-  height: 80%;
-  width: 80%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   transition: all 1s;
   margin: 0 auto;
 }
 
 .description {
-  width: 32%;
+  max-height: 2.5rem;
+  width: 24%;
 }
 
 .wrapper.disabled {
@@ -222,5 +250,6 @@ const appendNewInputFile = () => {
 
 .descriptions {
   gap: 0.5rem;
+  margin-bottom: 1rem;
 }
 </style>

src/components/tutor/SecondStep.vue

@@ -84,11 +84,11 @@ defineProps<{
 .wrapper {
   display: flex;
   flex-direction: column;
-  width: 80%;
+  width: 100%;
 
   flex-grow: 0;
   flex-basis: 0;
-  height: 90%;
+  height: 100%;
   transition: all 0.5s;
   margin: auto;
   overflow: hidden;

src/components/tutor/SummariesStep.vue

@@ -10,7 +10,7 @@ import { ref } from 'vue';
 const props = defineProps<{
   summaries: [string];
   files: File;
-  updateSummary: () => void;
+  updateSummary: (index: number, content: string) => void;
   action: () => void;
   actionText?: string;
   disabled: boolean;
@@ -114,9 +114,8 @@ const handleTextEdit = (event, index) => {
 }
 .summaries-section {
   margin: auto;
-  height: 80%;
   padding: 5% 0;
-  width: 80%;
+  width: 100%;
 }
 .summaries-section.disabled {
   height: 10%;

src/components/tutor/ThirdStep.vue

@@ -43,28 +43,29 @@ const handleTextEdit = (event, index) => {
         </span>
         {{ isEditable ? $t('save') : $t('edit') }}
       </button>
-
-      <p
-        :contenteditable="isEditable"
-        :class="{ editable: isEditable }"
-        id="syllabus"
-        class="syllabus content"
-        v-if="syllabus?.content"
-        v-html="marked.parse(syllabus?.content)"
-        @blur="handleTextEdit($event, index)"
-        @click="isEditable = true"
-      />
+      <div class="editable-syllabus-wrapper">
+        <p
+          :contenteditable="isEditable"
+          :class="{ editable: isEditable }"
+          id="syllabus"
+          class="syllabus content"
+          v-if="syllabus?.content"
+          v-html="marked.parse(syllabus?.content)"
+          @blur="handleTextEdit($event, index)"
+          @click="isEditable = true"
+        />
+      </div>
     </div>
 
     <textarea class="textarea" v-if="enableFeedback" v-model="feedback"></textarea>
 
-    <div class="is-flex is-justify-content-end mt-4">
+    <div class="is-flex is-justify-content-end mt-4 pb-6">
       <button class="button" @click="toggleFeedback">
         {{
           enableFeedback ? $t('tutor.thirdStep.sendFeedback') : $t('tutor.thirdStep.giveFeedback')
         }}
       </button>
-      <button class="button is-primary ml-2" @click="action()">download</button>
+      <button class="button is-primary ml-2" @click="action()">{{ $t('download') }}</button>
     </div>
   </div>
 </template>
@@ -75,15 +76,14 @@ const handleTextEdit = (event, index) => {
   padding-right: 1rem;
 }
 .wrapper {
-  overflow: scroll;
   display: flex;
   height: 100%;
   flex-direction: column;
   flex-grow: 0;
   flex-basis: 0;
   transition: flex-grow 0.3s;
   padding: 5% 0;
-  width: 80%;
+  width: 100%;
   margin: auto;
 }
 
@@ -106,6 +106,12 @@ details:not([open]) {
   background-color: var(--neutral-10);
   cursor: text;
 }
+
+.editable-syllabus-wrapper {
+  height: 70vh;
+  overflow-y: scroll;
+  margin-bottom: 8px;
+}
 .editable {
   border: 2px solid var(--primary);
   background-color: var(--neutral-0);

src/localisation/en.ts

@@ -319,6 +319,7 @@ export const en = {
   },
   textLengthFeedback: 'Please add more text to improve search results.',
   tutor: {
+    syllabusSteps: 'Syllabus steps:',
     BIG_FILE: 'File size exceeds 5 MB.',
     BAD_EXTENSION: 'File type not supported. Only PDF, TXT, and DOCX files are allowed.',
     retry: {
@@ -347,6 +348,7 @@ export const en = {
         'WeLearn has extracted the following summaries from your uploaded documents. You can review them before proceeding to the next step.'
     },
     firstStep: {
+      syllabusLanguage: 'Syllabus language',
       acceptedFiles: 'Accepted file types: PDF, TXT, DOCX',
       searchError: 'No results were found for the provided document.',
       title: 'Add documents',

src/localisation/fr.ts

@@ -324,6 +324,7 @@ export const fr = {
   },
   textLengthFeedback: 'Veuillez ajouter davantage de texte pour lancer la recherche.',
   tutor: {
+    syllabusSteps: 'Étapes du syllabus :',
     BIG_FILE: 'La taille du fichier dépasse 5 Mo.',
     BAD_EXTENSION:
       'Type de fichier non pris en charge. Seuls les fichiers PDF, TXT et DOCX sont acceptés.',
@@ -354,6 +355,7 @@ export const fr = {
         'WeLearn a extrait les points clés de vos documents importés pour générer le syllabus.'
     },
     firstStep: {
+      syllabusLanguage: 'Langue du syllabus',
       acceptedFiles: 'Types de fichiers acceptés : PDF, TXT, DOCX',
       searchError: 'Aucun résultat trouvé pour le document fourni.',
       title: 'Ajoutez des documents',

src/stores/tutor.ts

@@ -83,21 +83,21 @@ export const useTutorStore = defineStore('tutor', () => {
     };
   };
 
-  // const summaries = ref<[string]>([
-  //   "Global warming, a subset of climate change, refers to the long-term rise in the average temperature of the Earth's climate system, primarily caused by human activities such as fossil fuel burning, deforestation, and certain agricultural and industrial practices that release greenhouse gases. These gases trap heat in the lower atmosphere, leading to various environmental impacts like desert expansion, increased frequency of heat waves and wildfires, accelerated Arctic warming, glacier retreat, and sea ice decline. Climate change also affects biodiversity, forcing species to relocate or face extinction, and poses significant threats to human societies, including increased flooding, extreme heat, food and water scarcity, disease, economic loss, and potential human migration and conflict. Even with efforts to minimize future warming, some effects will persist for centuries, including ocean heating, acidification, and sea-level rise. The Paris Agreement aims to limit global warming to well below 2°C, but current pledges still project a rise of about 2.8°C by the end of the century. There is widespread support for climate action, with most countries aiming to stop emitting carbon dioxide. Strategies include phasing out fossil fuels, conserving energy, switching to clean energy sources, and removing carbon from the atmosphere through methods like reforestation and carbon-storing farming practices.",
-  //   "The article discusses the XL-Sum dataset, a large-scale multilingual abstractive summarization dataset containing 1 million professionally annotated article-summary pairs from BBC, covering 44 languages. The dataset is designed to address the lack of high-quality datasets for low-resource languages in abstractive summarization. XL-Sum introduces the first publicly available summarization dataset for many languages and achieves competitive results in both multilingual and low-resource summarization tasks. The dataset is created using a custom crawler and a set of heuristics to extract high-quality summaries from BBC articles. Evaluations show that the summaries are highly abstractive, concise, and of high quality, with minimal redundancy. The mT5 model fine-tuned on XL-Sum achieves state-of-the-art results, demonstrating the dataset's effectiveness in abstractive summarization across multiple languages."
-  // ]);
-
   const summaries = ref<[string]>([]);
 
-  const updateSummary = (index, content) => {
+  const updateSummary = (index: number, content: string) => {
     summaries.value[index] = content;
   };
 
   const updateSyllabus = (index, content) => {
     syllabi.value[index] = content;
   };
 
+  const syllabusLanguage: Ref<string> = ref(i18n.global.locale.value);
+  const selectSyllabusLanguage = (lang: string) => {
+    syllabusLanguage.value = lang;
+  };
+
   const getFilesContent = async (arg: File[]) => {
     isLoading.value = true;
     shouldRetryAction.value = false;
@@ -108,17 +108,24 @@ export const useTutorStore = defineStore('tutor', () => {
       }
     });
     try {
-      const resp = await postAxios('/tutor/files/content', formData, {
-        headers: { 'content-type': 'multipart/form-data' }
-      });
+      const resp = await postAxios(
+        `/tutor/files/content?lang=${syllabusLanguage.value}`,
+        formData,
+        {
+          headers: { 'content-type': 'multipart/form-data' }
+        }
+      );
       if (resp.status === 204) {
         shouldRetryAction.value = true;
         throw new Error('retry getFilesContent');
       } else {
-        const red_summaries = resp.data.extracts.reduce((acc, curr) => {
-          acc = [...acc, curr.summary];
-          return acc;
-        }, []);
+        const red_summaries = resp.data.extracts.reduce(
+          (acc: string[], curr: { summary: string }) => {
+            acc = [...acc, curr.summary];
+            return acc;
+          },
+          []
+        );
         summaries.value = red_summaries;
         goNext();
         isLoading.value = false;
@@ -224,7 +231,7 @@ export const useTutorStore = defineStore('tutor', () => {
     isLoading.value = true;
     try {
       console.log(selectedSources.value.length);
-      const resp = await postAxios(`/tutor/syllabus?lang=${i18n.global.locale.value}`, {
+      const resp = await postAxios(`/tutor/syllabus?lang=${syllabusLanguage.value}`, {
         ...tutorSearch.value,
         documents: selectedSources.value,
         ...(courseTitle.value && { course_title: courseTitle.value }),
@@ -301,6 +308,8 @@ export const useTutorStore = defineStore('tutor', () => {
   };
 
   return {
+    syllabusLanguage,
+    selectSyllabusLanguage,
     step,
     goBack,
     goNext,

src/views/TutorPage.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import CursusInfo from '@/components/tutor/FirstStep.vue';
+import CursusInfo from '@/components/tutor/CursusInfo.vue';
 import SummariesStep from '@/components/tutor/SummariesStep.vue';
 import SourcesList from '@/components/tutor/SecondStep.vue';
 import EditableSyllabus from '@/components/tutor/ThirdStep.vue';
 import StepsIndicator from '@/components/tutor/StepsIndicator.vue';
 import ModalWrapper from '@/components/ModalWrapper.vue';
 import ErrorComponent from '@/components/ErrorComponent.vue';
 import ErrorDocumentIcon from '@/components/icons/ErrorDocumentIcon.vue';
-// import CheckIcon from '@/components/icons/CheckIcon.vue';
 import { useTutorStore } from '@/stores/tutor';
 
 const store = useTutorStore();
@@ -26,7 +25,7 @@ const getI18nText = computed(() => {
   };
 });
 
-const stepToAction: Record<0 | 1 | 2 | 3, () => Promise<void>> = {
+const stepToAction: Record<0 | 1 | 2 | 3 | 4, () => Promise<void>> = {
   1: store.handleSummaryFiles,
   2: store.retrieveTutorSearch,
   3: store.handleCreateSyllabus,
@@ -36,7 +35,9 @@ const stepToAction: Record<0 | 1 | 2 | 3, () => Promise<void>> = {
 <template>
   <div class="content-centered-wrapper">
     <div class="is-flex is-justify-content-center is-align-items-center">
-      <p class="subtitle has-text-weight-bold is-5 mr-4 my-auto">Syllabus steps:</p>
+      <p class="subtitle has-text-weight-bold is-5 mr-4 my-auto">
+        {{ $t('tutor.syllabusSteps') }}
+      </p>
 
       <StepsIndicator
         :step="store.step"
@@ -47,7 +48,7 @@ const stepToAction: Record<0 | 1 | 2 | 3, () => Promise<void>> = {
     </div>
     <ErrorComponent v-if="store.reloadError" />
 
-    <ModalWrapper v-if="store.isLoading" :isOpen="store.isLoading" :onClose="() => {}">
+    <ModalWrapper v-if="store.isLoading" :isOpen="store.isLoading" :onClose="store.stopAction">
       <div v-if="store.shouldRetryAction" class="box">
         <div
           class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
@@ -87,6 +88,8 @@ const stepToAction: Record<0 | 1 | 2 | 3, () => Promise<void>> = {
     </ModalWrapper>
     <div class="layout-flex">
       <CursusInfo
+        :selectLang="store.selectSyllabusLanguage"
+        :storedLanguage="store.syllabusLanguage"
         :searchError="store.hasSearchError"
         :fileError="store.fileError"
         v-model:courseTitle="store.courseTitle"