Indexed text visualization (#17)

* Feat: visualizzazione testo indicizzato

* fix: prettier

* fix: eslint & no chunk found message

* feat: loader in modal

* Feat: adding chunks count and renaming chunks in parts

* fix: prettier

components/AppModal.vue

@@ -14,6 +14,7 @@
         <LazyDialogDeleteAccount v-if="featureAvailable('deleteAccount') && $isOpenModal('DialogDeleteAccount')" @stop-click="clickableOutside = false" />
         <LazyDialogShowFeedback v-if="$isOpenModal('ShowAnswerFeedback')" v-bind="modalStore.activeModalProps" />
         <LazyDialogChatDocuments v-if="$isOpenModal('ChatDocuments')" v-bind="modalStore.activeModalProps" @enlarge-window="largerModal = true" />
+        <LazyDialogDocumentChunks v-if="$isOpenModal('SeeDocumentChunks')" v-bind="modalStore.activeModalProps" @enlarge-window="largerModal = true" />
       </div>
     </div>
   </div>

components/Dialog/ChatDocuments.vue

@@ -5,7 +5,7 @@
       <Icon class="text-2xl hover:cursor-pointer hover:bg-sky-100" name="ph:x-bold" @click="$closeModal()" />
     </div>
     <div class="mb-4 p-2 w-full whitespace-break-spaces overflow-y-auto max-h-[60vh]">
-      <div v-if="documents.length > 0" class="flex flex-col space-y-3">
+      <div v-if="documents && documents.length > 0" class="flex flex-col space-y-3">
         <div v-for="(doc, n) in documents" :key="n" class="bg-sky-100 shadow-md p-3 rounded-lg">
           <p class="text-lg font-bold">{{ $t('DOCUMENT') }} {{ n + 1 }}.</p>
           <p class="pt-2 pb-2">{{ doc.page_content }}</p>

components/Dialog/DocumentChunks.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="w-full">
+    <div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5">
+      <h3 class="text-xl font-semibold text-gray-900">{{ $t('CHUNKS_FOUND', { chunks: documentChunks.length }) }}</h3>
+      <Icon class="text-2xl hover:cursor-pointer hover:bg-sky-100" name="ph:x-bold" @click="$closeModal()" />
+    </div>
+    <div class="mb-4 p-2 w-full whitespace-break-spaces overflow-y-auto max-h-[60vh]" v-if="!loadingChunks">
+      <div v-if="documentChunks && documentChunks.length > 0" class="flex flex-col space-y-3">
+        <div v-for="(doc, n) in documentChunks" :key="n" class="bg-sky-100 shadow-md p-3 rounded-lg">
+          <p class="text-lg font-bold">{{ $t('CHUNK') }} {{ n + 1 }}.</p>
+          <p class="pt-2 pb-2">{{ doc.document }}</p>
+        </div>
+      </div>
+      <div v-else class="flex flex-col space-y-3">
+        <p class="text-sm font-bold">{{ $t('NO_CHUNKS') }}</p>
+      </div>
+    </div>
+    <div class="flex items-center justify-center h-40" v-else>
+      <ElementLoader :loader-dim="80" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  documentId: {
+    type: String,
+    default: () => '',
+  },
+});
+const emit = defineEmits(['enlargeWindow']);
+
+const statesStore = useStatesStore();
+const { $closeModal } = useNuxtApp();
+const collectionUuid: string = statesStore.collection?.uuid || '';
+const documentChunks = ref<any>([]);
+const loadingChunks = ref(true);
+
+onBeforeMount(async () => {
+  try {
+    const response = await fetch(`/api/brevia/index/${collectionUuid}/${props.documentId}`);
+    const data = await response.json();
+    if (data) {
+      documentChunks.value = data.sort((a: any, b: any) => a.cmetadata.part - b.cmetadata.part);
+    }
+    setTimeout(() => (loadingChunks.value = false), 250);
+  } catch (err) {
+    console.log(err);
+    setTimeout(() => (loadingChunks.value = false), 250);
+  }
+});
+
+onMounted(() => {
+  emit('enlargeWindow');
+});
+</script>

components/Element/ChatbotFileItem.vue

@@ -19,23 +19,31 @@
       </div>
     </div>
 
-    <div class="space-x-1 whitespace-nowrap">
+    <div class="px-4 flex items-center justify-between space-x-4">
       <button
         v-if="isIndexed"
-        class="mr-auto button button-secondary button-transparent text-white hover:from-white hover:to-white hover:text-sky-500"
+        class="button-transparent text-white hover:from-white hover:to-white hover:text-sky-500"
+        @click.stop.prevent="$openModal('SeeDocumentChunks', { documentId: item.custom_id })"
+      >
+        <Icon name="ph:code-block-bold" class="text-xl" />
+      </button>
+
+      <button
+        v-if="isIndexed"
+        class="button-transparent text-white hover:from-white hover:to-white hover:text-sky-500"
         @click.stop.prevent="$openModal('DialogEditMetadata', { document: item })"
       >
         <Icon name="ph:code-bold" class="text-xl" />
       </button>
 
-      <a href="#" class="button-mock border-transparent py-2.5 px-1.5" @click.prevent="download">
+      <a href="#" class="button-transparent text-white hover:from-white hover:to-white hover:text-sky-500" @click.prevent="download">
         <Icon name="ph:download-simple-bold" class="text-xl" />
         <span class="sr-only">{{ $t('DOWNLOAD') }}</span>
       </a>
 
       <button
         v-if="item.custom_id"
-        class="mr-auto button button-secondary button-transparent text-pink-500 hover:bg-danger hover:border-danger hover:text-white pt-2.5 pb-2 px-3"
+        class="button-transparent text-pink-500 hover:bg-danger hover:border-danger hover:rounded-md hover:text-white p-2.5"
         :class="{ 'is-loading': isDeleting }"
         @click.stop.prevent="deleteFile"
       >

components/Element/ChatbotLinkItem.vue

@@ -33,6 +33,14 @@
           <p v-if="linkIsError" class="text-xs italic">Errore nella lettura del contenuto - codice errore {{ linkIsError }}</p>
         </div>
         <div class="px-4 flex items-start justify-between space-x-4">
+          <button
+            v-if="linkIsIndexed"
+            class="button-transparent text-white hover:from-white hover:to-white hover:text-sky-500"
+            title="Chunks"
+            @click.stop.prevent="$openModal('SeeDocumentChunks', { documentId: item.custom_id })"
+          >
+            <Icon name="ph:code-block-bold" class="text-xl" />
+          </button>
           <button
             v-if="linkIsIndexed"
             class="button-transparent text-white hover:from-white hover:to-white hover:text-sky-500"

locales/en/messages.json

@@ -27,6 +27,8 @@
     "CHECK_YOUR_INBOX": "Check your inbox and follow the instructions to active the account",
     "CHECK_YOUR_INBOX_RESET": "Check your inbox and follow the instructions to reset your password",
     "CHOOSE_NEW_PASSWORD": "Choose a new Password",
+    "CHUNKS_FOUND": "Parts found for this document ({chunks} parts)",
+    "CHUNK": "Part",
     "CLIC_TO_ADD_QUESTION": "Click here to add a new question",
     "CLIC_TO_ADD_LINK": "Click here to add a link to a webpage",
     "CLOSE": "Close",
@@ -104,6 +106,7 @@
     "NEW_PASSWORD": "New password",
     "NEW_QUESTION": "New question",
     "NO_AI_TOOL_HAS_BEEN_SET_UP_JUST_FOR_YOU": "At this time, no AI tool has been set up for you",
+    "NO_CHUNKS": "No chunk found",
     "NO_DOCUMENTS": "There are no Documents for this reply",
     "NO_INDEXED_DOCUMENTS": "The document has not yet been indexed. Please try again in a few minutes.",
     "NO_FILES_FOUND": "No files found",

locales/it/messages.json

@@ -27,6 +27,8 @@
     "CHECK_YOUR_INBOX": "Controlla la tua casella di posta e segui le istruzioni per completare la registrazione",
     "CHECK_YOUR_INBOX_RESET": "Controlla la tua casella di posta e segui le istruzioni per resettare la tua password",
     "CHOOSE_NEW_PASSWORD": "Scegli una nuova password",
+    "CHUNKS_FOUND": "Parti trovate per questo documento ({chunks} parti)",
+    "CHUNK": "Parte",
     "CLIC_TO_ADD_QUESTION": "Clicca qui per aggiungere una nuova domanda",
     "CLIC_TO_ADD_LINK": "Clicca qui per aggiungere un link a una pagina web",
     "CLOSE": "Chiudi",
@@ -104,6 +106,7 @@
     "NEW_PASSWORD": "Nuova password",
     "NEW_QUESTION": "Nuova domanda",
     "NO_AI_TOOL_HAS_BEEN_SET_UP_JUST_FOR_YOU": "Al momento nessuno strumento AI è stato ancora configurato per te",
+    "NO_CHUNKS": "Nessun chunk trovato",
     "NO_DOCUMENTS": "Non ci sono documenti per questa risposta",
     "NO_INDEXED_DOCUMENTS": "Il documento non è ancora stato indicizzato. Riprova tra qualche minuto.",
     "NO_FILES_FOUND": "Nessun file trovato",