Merge pull request #10 from BuonDavide/fix/loading-errors-duplicate-c…

…hatbar

Fix: duplicate chatbar and loading errors

components/Element/ChatbotFiles.vue

@@ -19,6 +19,13 @@
 </template>
 
 <script lang="ts" setup>
+interface singleFile {
+  attributes: object;
+  cmetadata: object;
+  custom_id: string;
+  created: string;
+}
+
 const isLoading = ref(true);
 const statesStore = useStatesStore();
 const collection = statesStore.collection as any;
@@ -35,15 +42,15 @@ const checkUploadAllowed = (newFiles: any) => {
   return parseInt(useRuntimeConfig().public.demo.maxChatFiles) > num;
 };
 
-const files = ref([]);
+const files = ref<singleFile[]>([]);
 let indexedItems: any = [];
 const integration = useIntegration();
 
 const loadFiles = async () => {
   isLoading.value = true;
   const endpoint = `/api/${integration}/index/${collection?.uuid}/documents_metadata?filter[type]=files&sort=-created`;
   if (integration === 'brevia') {
-    const items = await $fetch(endpoint);
+    const items = await $fetch<singleFile[]>(endpoint);
     files.value = items;
     indexedItems = items;
   } else {

components/Element/ChatbotQuestions.vue

@@ -28,7 +28,7 @@
           />
         </div>
         <div v-if="searchTerm(searchInput)" class="absolute right-4 -bottom-1 text-sm font-bold italic text-sky-600">
-          {{ questions?.data?.filter(showThis)?.length }} {{ $t('ELEMENTS_FOUND') }}
+          {{ questions?.filter(showThis)?.length }} {{ $t('ELEMENTS_FOUND') }}
         </div>
       </div>
     </div>
@@ -52,12 +52,12 @@ const MIN_SEARCH_LENGTH = 3;
 const addMode = ref(false);
 const isLoading = ref(true);
 const statesStore = useStatesStore();
-const collection = statesStore.collection;
+const collection = statesStore.collection as { uuid: string; name: string; cmetadata: object };
 const features = useIntegrationFeatures();
 const isDemo = features.demoVersion && statesStore.userHasRole('demo');
 const isQuestionAddAllowed = ref(false);
 const searchInput = ref('');
-const questions = ref([]);
+const questions = ref<{ id: number }[]>([]);
 const integration = useIntegration();
 const endpointBase = `/api/${integration}/index/${collection?.uuid}`;
 

composables/use-api-get-all.ts

@@ -14,5 +14,5 @@ export const useApiGetAll = async (endpoint: string, page = 1, pageSize = 100) =
     res = [...currPageData, ...nextPageData];
   }
 
-  return { res };
+  return { data: res };
 };

pages/chatbot/[id].vue

@@ -89,88 +89,6 @@
         </div>
       </div>
     </div>
-
-    <div class="flex justify-between space-x-4">
-      <NuxtLink class="mt-0.5 text-sky-700 hover:text-sky-500" :to="`history-${collectionName}`" :title="$t('CHATBOT_HISTORY')">
-        <Icon name="ph:clock-counter-clockwise-bold" class="text-4xl" />
-      </NuxtLink>
-
-      <NuxtLink
-        v-if="editLevel != ItemEditLevel.None"
-        class="mt-0.5 text-sky-700 hover:text-sky-500"
-        :to="`edit-${collectionName}`"
-        :title="$t('EDIT_CHATBOT')"
-      >
-        <Icon name="ph:gear-fine-bold" class="text-4xl" />
-      </NuxtLink>
-    </div>
-
-    <div v-if="dialog.length">
-      <!-- <hr class="my-6 border-neutral-300"> -->
-      <div class="px-4 pt-6 pb-4 bg-white shadow-md rounded space-y-3">
-        <div class="flex flex-col space-y-6 pb-4">
-          <div
-            v-for="(item, i) in dialog"
-            :key="i"
-            class="chat-balloon space-y-2"
-            :class="{ 'bg-pink-800': item.error }"
-            @mouseover="
-              showResponseMenu = true;
-              hovered = i;
-            "
-            @mouseleave="showResponseMenu = false"
-          >
-            <div class="flex space-x-3 justify-between">
-              <p class="text-xs">{{ item.who }}</p>
-              <div class="chat-balloon-status" :class="{ busy: isBusy && i === dialog.length - 1 }"></div>
-            </div>
-            <p class="whitespace-break-spaces" v-html="formatResponse(item.message)"></p>
-            <!--MENU CONTESTUALE-->
-            <div
-              v-if="!isBusy && showResponseMenu && hovered === i && i % 2 == 1 && i === dialog.length - 1"
-              class="px-2 py-0.5 absolute -bottom-5 right-4 z-50 bg-neutral-700 rounded-full flex flex-row"
-            >
-              >
-              <div
-                class="px-1.5 pb-1 hover:bg-neutral-600 hover:rounded-full hover:cursor-pointer"
-                :title="$t('SHOW_DOCUMENTS_FOUND')"
-                @click="$openModal('ChatDocuments', { sessionId, documents: docs })"
-              >
-                <Icon name="fluent:document-question-mark-16-regular"></Icon>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="space-y-4">
-      <div class="flex space-x-4">
-        <input
-          ref="input"
-          v-model.trim="prompt"
-          type="text"
-          class="grow text-lg p-2 rounded border border-sky-500 disabled:bg-neutral-100 disabled:border-neutral-300 shadow-md disabled:shadow-none"
-          :disabled="isBusy || messagesLeft == '0'"
-          @keydown.enter="submit"
-        />
-
-        <button class="px-6 button shadow-md disabled:shadow-none" :disabled="isBusy || messagesLeft == '0'" @click="submit">
-          <span class="sm:hidden">›</span>
-          <span class="hidden sm:inline">{{ $t('SEND') }}</span>
-        </button>
-      </div>
-
-      <div v-if="isDemo" class="flex space-x-4">
-        <span class="grow text-lg">{{ $t('MESSAGES_LEFT') }}: {{ messagesLeft }}</span>
-      </div>
-
-      <div v-if="isDemo && messagesLeft == '0'" class="space-x-4">
-        <div class="w-full bg-red-100 border border-red-400 rounded text-center">
-          {{ $t('NO_MORE_CHAT_MESSAGES') }}
-        </div>
-      </div>
-    </div>
   </main>
 </template>
 

tsconfig.json

@@ -1,4 +1,8 @@
 {
+  "compilerOptions": {
+  "module": "ESNext",
+  "target": "ESNext"
+  },
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json"
 }