feat(chat): add retry for tutor first step

src/components/icons/ErrorDocumentIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="18" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.6 20.2H3.4A2.4 2.4 0 0 1 1 17.8V3.4A2.4 2.4 0 0 1 3.4 1h10.8a2.4 2.4 0 0 1 2.4 2.4v7.8m0 9-2.4-2.4m0 0-2.4-2.4m2.4 2.4-2.4 2.4m2.4-2.4 2.4-2.4"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

src/localisation/en.ts

@@ -311,6 +311,11 @@ export const en = {
   tutor: {
     BIG_FILE: 'File size exceeds 5 MB.',
     BAD_EXTENSION: 'File type not supported. Only PDF, TXT, and DOCX files are allowed.',
+    retry: {
+      title: 'Please try again',
+      description: 'An issue occurred while extracting the provided content, please try again.',
+      button: 'retry'
+    },
     loading: {
       wait: 'Please wait',
       search: {

src/localisation/fr.ts

@@ -317,6 +317,12 @@ export const fr = {
     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.',
+    retry: {
+      title: 'Veuillez réessayer',
+      description:
+        "Un problème est survenu lors de l'extraction du contenu renseigné, veuillez relancer.",
+      button: 'relancer la requếte'
+    },
     loading: {
       wait: 'Veuillez patienter',
       search: {

src/stores/tutor.ts

@@ -25,6 +25,7 @@ export const useTutorStore = defineStore('tutor', () => {
   const setStep = (newStep: number) => (step.value = newStep);
 
   // ERROR STATES
+  const shouldRetryAction: Ref<boolean> = ref(false);
   const hasSearchError: Ref<boolean> = ref(false);
   const reloadError: Ref<boolean> = ref(false);
   const hasSyllabusError: Ref<boolean> = ref(false);
@@ -83,6 +84,7 @@ export const useTutorStore = defineStore('tutor', () => {
 
   const retrieveTutorSearch = async (arg: File[]) => {
     isLoading.value = true;
+    shouldRetryAction.value = false;
     const formData = new FormData();
     arg.forEach((file) => {
       if (file) {
@@ -94,8 +96,16 @@ export const useTutorStore = defineStore('tutor', () => {
       const resp = await postAxios('/tutor/search', formData, {
         headers: { 'content-type': 'multipart/form-data' }
       });
-      tutorSearch.value = resp.data;
-      hasSearchError.value = false;
+      if (resp.status === 204) {
+        shouldRetryAction.value = true;
+      } else {
+        tutorSearch.value = resp.data;
+        hasSearchError.value = false;
+        isLoading.value = false;
+        shouldRetryAction.value = false;
+
+        goNext();
+      }
     } catch (error: any) {
       console.error('Error during tutor search:', error);
       hasSearchError.value = true;
@@ -105,7 +115,6 @@ export const useTutorStore = defineStore('tutor', () => {
       setStep(1);
     } finally {
       searchedFiles.value = arg;
-      isLoading.value = false;
     }
   };
 
@@ -128,7 +137,7 @@ export const useTutorStore = defineStore('tutor', () => {
       return;
     }
 
-    if (_isequal(searchedFiles.value, arg)) {
+    if (_isequal(searchedFiles.value, arg) && !shouldRetryAction.value) {
       hasNewSearch.value = false;
       goNext();
       return;
@@ -137,8 +146,6 @@ export const useTutorStore = defineStore('tutor', () => {
     tutorSearch.value = undefined;
     await retrieveTutorSearch(arg);
     hasNewSearch.value = true;
-
-    goNext();
   };
 
   const retrieveSyllabus = async () => {
@@ -249,6 +256,7 @@ export const useTutorStore = defineStore('tutor', () => {
     selectedSources,
     level,
     duration,
+    shouldRetryAction,
     description
   };
 });

src/views/TutorPage.vue

@@ -6,6 +6,7 @@ import ThirdStep 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 { useTutorStore } from '@/stores/tutor';
 
 const store = useTutorStore();
@@ -42,7 +43,28 @@ const stepToAction: Record<1 | 2 | 3, () => Promise<void>> = {
     <ErrorComponent v-if="store.reloadError" />
 
     <ModalWrapper v-if="store.isLoading" :isOpen="store.isLoading" :onClose="() => {}">
-      <div class="box loading-modal">
+      <div v-if="store.shouldRetryAction" class="box">
+        <div
+          class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
+        >
+          <h1 class="title is-size-4 has-text-centered">
+            <span class="mr-4"><ErrorDocumentIcon /></span>
+            {{ $t('tutor.retry.title') }}
+          </h1>
+
+          <p class="loader-text is-title is-size-4 mx-6 px-6">
+            {{ $t('tutor.retry.description') }}
+          </p>
+          <button
+            data-testid="tutor-back-button"
+            class="button mt-6"
+            @click="stepToAction[store.step]()"
+          >
+            {{ $t('tutor.retry.button') }}
+          </button>
+        </div>
+      </div>
+      <div v-else class="box loading-modal">
         <h1 class="title is-size-4 has-text-centered">
           {{ $t(getI18nText.title) }}
         </h1>