From 754f9c2ad87c0668b794b16879b1c45cfe2c5577 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Thu, 30 May 2024 21:41:14 +0200
Subject: [PATCH 01/11] fix: Typos and props ordering

---
 src/components/KnowledgeStoreUploader.js |  2 +-
 src/components/PersonaDialog.vue         | 25 +++----
 src/layouts/MainLayout.vue               | 94 ++++++++++++------------
 src/pages/Chat.vue                       | 58 +++++++--------
 src/pages/KnowledgeBase.vue              | 14 ++--
 src/pages/VocalChat.vue                  |  9 ++-
 src/stores/chats-store.js                |  8 +-
 src/stores/knowledge-store.js            |  4 +-
 src/utils/knowledge.js                   |  6 +-
 src/utils/personas.js                    |  2 +-
 10 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/src/components/KnowledgeStoreUploader.js b/src/components/KnowledgeStoreUploader.js
index 8a519f9..ac77e97 100644
--- a/src/components/KnowledgeStoreUploader.js
+++ b/src/components/KnowledgeStoreUploader.js
@@ -56,7 +56,7 @@ export default createUploaderComponent({
             if (text.length < 4 * 1024) {
               fileStatus.value[file.name] = 'uploaded';
               helpers.updateFileStatus(file, 'uploaded');
-              // If you don't embed the doucment, make sure to set the content
+              // If you don't embed the document, make sure to set the content
               emit('attachment-added', { title, type, content: text });
               return;
             }
diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
index c3ecca0..1bfb0cc 100644
--- a/src/components/PersonaDialog.vue
+++ b/src/components/PersonaDialog.vue
@@ -1,10 +1,10 @@
 <template>
-  <q-dialog label="Customize" style="flex-grow: 1" class="q-pa-lg">
+  <q-dialog class="q-pa-lg" label="Customize" style="flex-grow: 1">
     <q-card class="q-pa-md">
       <q-card-actions class="flex flex-left text-purple700 text-semibold">
         Customize persona
         <q-space />
-        <q-btn icon="img:icons/svg/close.svg" size="sm" flat unelevated v-close-popup />
+        <q-btn v-close-popup flat icon="img:icons/svg/close.svg" size="sm" unelevated />
       </q-card-actions>
 
       <q-card-section horizontal>
@@ -15,34 +15,34 @@
         </q-card-section>
         <q-card-section>
           <label class="text-light">Persona name</label>
-          <q-input outlined v-model="persona.name" input-class="text-light q-px-sm" bg-color="secondary"> </q-input>
+          <q-input v-model="persona.name" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
         </q-card-section>
       </q-card-section>
 
       <q-card-section>
         <label class="text-light">Your name</label>
-        <q-input outlined v-model="usernameInputRef" input-class="text-light q-px-sm" bg-color="secondary"> </q-input>
+        <q-input v-model="usernameInputRef" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
       </q-card-section>
       <q-card-section>
         <label class="text-light">Persona Description</label>
         <q-input
-          autogrow
           v-model="persona.description"
-          type="textarea"
-          outlined
-          input-class="text-light"
+          autogrow
           bg-color="secondary"
+          input-class="text-light"
+          outlined
+          type="textarea"
         />
       </q-card-section>
       <q-card-section align="right" class="text-primary" horizontal>
-        <q-btn rounded label="Close" v-close-popup class="q-px-xl q-py-xs" />
+        <q-btn v-close-popup class="q-px-xl q-py-xs" label="Close" rounded />
         <q-space />
         <q-btn
-          rounded
-          label="Confirm"
+          v-close-popup
           class="bg-primary q-px-xl q-py-xs"
+          label="Confirm"
+          rounded
           text-color="white"
-          v-close-popup
           @click="updatePersona()"
         />
       </q-card-section>
@@ -53,7 +53,6 @@
 <script>
 import { usePersonasStore } from 'src/stores/personas-store';
 import { defineComponent, ref } from 'vue';
-import { storeToRefs } from 'pinia';
 
 export default defineComponent({
   name: 'PersonaDialog',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 22c5fff..de7b7d0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,7 +2,7 @@
   <q-layout view="lHh Lpr lFf">
     <q-header class="bg-transparent q-mt-sm">
       <q-toolbar>
-        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" color="primary" />
+        <q-btn aria-label="Menu" color="primary" dense flat icon="menu" round @click="toggleLeftDrawer" />
         <!--<persona-drop-down />-->
         <q-btn flat @click="editPersona = true">
           <q-icon size="xs">
@@ -15,21 +15,21 @@
         <div class="row q-gutter-x-sm">
           <!-- model selector -->
           <q-btn-dropdown
+            :icon="$q.screen.gt.sm ? 'img:icons/svg/engine.svg' : ''"
             :label="modelsStore.selectedModel.name.substring(0, 12) + '..'"
-            color="primary"
-            text-color="white"
             class="border-primary-highlight"
+            color="primary"
+            no-caps
             rounded
+            text-color="white"
             unelevated
-            no-caps
-            :icon="$q.screen.gt.sm ? 'img:icons/svg/engine.svg' : ''"
           >
             <q-list>
               <q-item
-                clickable
-                v-close-popup
                 v-for="model in modelsStore.models"
                 :key="model.id"
+                v-close-popup
+                clickable
                 @click="modelsStore.setModel(model)"
               >
                 <q-item-section>
@@ -41,28 +41,28 @@
             </q-list>
           </q-btn-dropdown>
           <q-btn
-            unelevated
-            rounded
-            text-color="white"
-            no-caps
+            v-if="!account.active"
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
-            :label="$q.screen.gt.sm ? 'Earn Points' : ''"
             :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
+            :label="$q.screen.gt.sm ? 'Earn Points' : ''"
+            no-caps
+            rounded
+            text-color="white"
             to="/points"
-            v-if="!account.active"
+            unelevated
           />
           <q-btn
-            unelevated
-            rounded
-            :text-color="$q.screen.gt.sm ? 'white' : 'black'"
+            v-else
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
             :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
-            no-caps
+            :text-color="$q.screen.gt.sm ? 'white' : 'black'"
             :to="{
               name: 'points-detail',
               params: { address: account.address },
             }"
-            v-else
+            no-caps
+            rounded
+            unelevated
           >
             <span :key="account.address"
               >{{ addressPoints.toFixed(0) }} <span v-if="$q.screen.gt.sm">Points</span></span
@@ -75,39 +75,39 @@
 
     <q-drawer
       v-model="leftDrawerOpen"
-      show-if-above
       class="bg-white flex-grow fit"
+      show-if-above
       style="display: flex; flex-direction: column"
     >
       <!-- image link with the logo -->
-      <q-item clickable to="/" class="q-mb-md text-left">
-        <img src="~assets/libertai.svg" alt="Libertai" />
+      <q-item class="q-mb-md text-left" clickable to="/">
+        <img alt="Libertai" src="~assets/libertai.svg" />
       </q-item>
       <q-btn
-        color="primary"
-        class="q-mx-md q-my-lg q-py-lg rounded-borders vertical-middle"
         align="left"
-        unelevated
+        class="q-mx-md q-my-lg q-py-lg rounded-borders vertical-middle"
+        color="primary"
         no-caps
         to="/new"
-        >+ New Chat</q-btn
-      >
+        unelevated
+        >+ New Chat
+      </q-btn>
 
       <!-- list of chats by reference to the chats-store -->
       <q-list style="flex-grow: 1">
-        <q-scroll-area visible style="height: 100%; min-height: 100px">
+        <q-scroll-area style="height: 100%; min-height: 100px" visible>
           <q-item
             v-for="chat of chats.slice().reverse()"
             :key="chat.id"
             :to="`/chat/${chat.id}`"
+            class="q-mx-md rounded-borders q-py-md q-my-md item-history"
             exact
             exact-active-class="bg-secondary item-active"
-            class="q-mx-md rounded-borders q-py-md q-my-md item-history"
           >
             <q-item-section side>
-              <q-btn v-if="route.params?.id == chat.id" flat icon="img:icons/msg_active.svg" size="sm" class="q-pa-xs">
+              <q-btn v-if="route.params?.id == chat.id" class="q-pa-xs" flat icon="img:icons/msg_active.svg" size="sm">
               </q-btn>
-              <q-btn v-if="route.params?.id != chat.id" flat icon="img:icons/msg.svg" size="sm" class="q-pa-xs">
+              <q-btn v-if="route.params?.id != chat.id" class="q-pa-xs" flat icon="img:icons/msg.svg" size="sm">
               </q-btn>
             </q-item-section>
 
@@ -117,14 +117,14 @@
               </q-item-label>
             </q-item-section>
 
-            <q-item-section side v-if="route.params?.id == chat.id">
-              <q-btn-group flat dense>
+            <q-item-section v-if="route.params?.id == chat.id" side>
+              <q-btn-group dense flat>
                 <q-btn
+                  class="q-pa-xs"
                   icon="img:icons/delete.svg"
                   size="sm"
-                  class="q-pa-xs"
-                  @click="deleteChatConfirm(chat.id)"
                   @_click="deleteChat(chat.id)"
+                  @click="deleteChatConfirm(chat.id)"
                 >
                   <q-tooltip>Delete chat</q-tooltip>
                 </q-btn>
@@ -135,13 +135,13 @@
         <q-dialog v-model="deleteChatConfirmAction">
           <q-card>
             <q-card-section class="row items-center">
-              <q-avatar icon="delete" color="primary" text-color="white" />
+              <q-avatar color="primary" icon="delete" text-color="white" />
               <span class="q-ml-xl">Are you sure you want to delete the current chat conversation?</span>
             </q-card-section>
 
             <q-card-actions align="right">
-              <q-btn flat label="Cancel" color="primary" v-close-popup />
-              <q-btn flat label="Confirm" color="primary" v-close-popup @click="deleteChat(deleteChatId)" />
+              <q-btn v-close-popup color="primary" flat label="Cancel" />
+              <q-btn v-close-popup color="primary" flat label="Confirm" @click="deleteChat(deleteChatId)" />
             </q-card-actions>
           </q-card>
         </q-dialog>
@@ -150,34 +150,34 @@
       <q-list class="q-pt-md">
         <q-item href="https://twitter.com/libertai_dai" target="_blank">
           <q-item-section avatar>
-            <img src="icons/twitter-x.svg" alt="Twitter - X" width="32px" />
+            <img alt="Twitter - X" src="icons/twitter-x.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Follow us </q-item-label>
+            <q-item-label> Follow us</q-item-label>
           </q-item-section>
         </q-item>
         <q-item href="https://t.me/libertai" target="_blank">
           <q-item-section avatar>
-            <img src="icons/telegram.svg" alt="Telegram" width="32px" />
+            <img alt="Telegram" src="icons/telegram.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Chat with us </q-item-label>
+            <q-item-label> Chat with us</q-item-label>
           </q-item-section>
         </q-item>
         <q-item href="https://aleph.im" target="_blank">
           <q-item-section avatar>
-            <img src="icons/aleph.svg" alt="Aleph" width="32px" />
+            <img alt="Aleph" src="icons/aleph.svg" width="32px" />
           </q-item-section>
 
           <q-item-section>
-            <q-item-label> Build with us </q-item-label>
+            <q-item-label> Build with us</q-item-label>
           </q-item-section>
         </q-item>
         <!-- powered by aleph.im -->
         <q-item clickable href="https://aleph.im" target="_blank">
-          <img src="~assets/powered-by.svg" alt="aleph.im" />
+          <img alt="aleph.im" src="~assets/powered-by.svg" />
         </q-item>
       </q-list>
     </q-drawer>
@@ -189,7 +189,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, watch, computed, nextTick } from 'vue';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 
 // Import State
@@ -198,9 +198,9 @@ import { useModelsStore } from '../stores/models-store';
 import { usePersonasStore } from 'src/stores/personas-store';
 import { useAccount } from '../stores/account';
 import { usePoints } from 'src/stores/points';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
-// IMport Components
+// Import Components
 import AccountButton from 'src/components/AccountButton.vue';
 import PersonaDialog from 'src/components/PersonaDialog.vue';
 
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index ad7c64a..32097f6 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page class="column align-items-center q-mx-xl">
-    <div class="col-grow overflow-auto" style="max-height: calc(100vh - 190px)" ref="scrollAreaRef">
+    <div ref="scrollAreaRef" class="col-grow overflow-auto" style="max-height: calc(100vh - 190px)">
       <!-- Display message history -->
       <q-list class="col-grow">
         <!-- Determine styling based on the role of the message (if it's the user or the AI) -->
@@ -19,16 +19,16 @@
             </q-avatar>
           </q-item-section>
           <!-- Edit message popup -- triggered on click if the edit mode is enabled -->
-          <q-item-section :style="`max-width: calc(960px - 56px);`" :ref="'message-' + message_index">
+          <q-item-section :ref="'message-' + message_index" :style="`max-width: calc(960px - 56px);`">
             <q-popup-edit
+              v-if="enableEditRef"
+              v-slot="scope"
               v-model="message.content"
               auto-save
-              v-slot="scope"
-              v-if="enableEditRef"
               @save="(v, iV) => updateChatMessageContent(message_index, v, iV)"
             >
               <strong>{{ message.role }}</strong>
-              <q-input v-model="scope.value" dense autofocus counter autogrow />
+              <q-input v-model="scope.value" autofocus autogrow counter dense />
             </q-popup-edit>
             <!-- Display the role of the user or the AI -->
             <q-item-label class="text-semibold">
@@ -48,9 +48,9 @@
             <q-item-label style="display: block">
               <MarkdownRenderer :content="message.content" breaks />
               <!-- Display the loading spinner if the message is still loading -->
-              <q-spinner-bars color="white" size="2em" v-if="!message.stopped && isLoadingRef" />
+              <q-spinner-bars v-if="!message.stopped && isLoadingRef" color="white" size="2em" />
               <!-- Display the error message if the message errored  on generate -->
-              <span class="text-warning" v-if="!!message.error">
+              <span v-if="!!message.error" class="text-warning">
                 <q-tooltip>Error: {{ message.error.message }}</q-tooltip>
                 <q-icon name="warning" /> There has been an error, please <a @click="regenerateMessage()">retry</a>.
               </span>
@@ -60,20 +60,20 @@
           <div class="absolute dyn-container chat-toolbar">
             <!-- Allow regenerating the last message from the AI if fully completed -->
             <q-btn
-              @click="regenerateMessage()"
-              icon="refresh"
+              v-if="!isLoadingRef && message_index == messagesRef.length - 1"
               dense
               flat
+              icon="refresh"
               size="sm"
-              v-if="!isLoadingRef && message_index == messagesRef.length - 1"
+              @click="regenerateMessage()"
             >
               <q-tooltip>Regenerate</q-tooltip>
             </q-btn>
             <!-- Allow copying the message to the clipboard -->
-            <q-btn @click="copyMessage(message)" icon="img:icons/svg/copy2.svg" dense flat size="sm">
+            <q-btn dense flat icon="img:icons/svg/copy2.svg" size="sm" @click="copyMessage(message)">
               <q-tooltip>Copy</q-tooltip>
             </q-btn>
-            <q-btn @click="editMessage('message-' + message_index)" icon="img:icons/svg/edit.svg" dense flat size="sm">
+            <q-btn dense flat icon="img:icons/svg/edit.svg" size="sm" @click="editMessage('message-' + message_index)">
               <q-tooltip>Edit</q-tooltip>
             </q-btn>
           </div>
@@ -85,12 +85,12 @@
       <!-- "+" icon for uploading files, shown only when knowledge search is enabled -->
       <q-btn
         v-if="enableKnowledgeRef"
+        class="cursor-pointer q-mr-sm"
         flat
-        round
         icon="add"
-        class="cursor-pointer q-mr-sm"
-        @click="openKnowledgeUploader"
+        round
         style="margin-left: 16px"
+        @click="openKnowledgeUploader"
       />
 
       <q-chip
@@ -102,11 +102,11 @@
         {{ attachment.title }}
       </q-chip>
       <message-input
-        :isLoading="isLoadingRef"
-        @sendMessage="sendMessage"
-        v-model="inputTextRef"
         ref="inputRef"
+        v-model="inputTextRef"
+        :isLoading="isLoadingRef"
         class="col"
+        @sendMessage="sendMessage"
       />
     </div>
 
@@ -124,12 +124,12 @@
     <!-- This should really not pass the ref, but it's a quick fix for now -->
     <q-dialog v-model="showKnowledgeUploaderRef" position="bottom">
       <KnowledgeStoreUploader
-        @attachment-added="addAttachment"
         :chatRef="chatRef"
-        label="Auto KnowledgeStoreUploader"
         auto-upload
-        url="http://localhost:4444/upload"
+        label="Auto KnowledgeStoreUploader"
         multiple
+        url="http://localhost:4444/upload"
+        @attachment-added="addAttachment"
       />
     </q-dialog>
   </q-page>
@@ -137,11 +137,11 @@
 
 <script>
 import 'highlight.js/styles/devibeans.css';
-import { useQuasar, copyToClipboard } from 'quasar';
-import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
+import { copyToClipboard, useQuasar } from 'quasar';
+import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { inferChatTopic, defaultChatTopic } from 'src/utils/chat';
+import { defaultChatTopic, inferChatTopic } from 'src/utils/chat';
 
 // LlamaCppApiEngine
 import { LlamaCppApiEngine } from '@libertai/libertai-js';
@@ -307,7 +307,7 @@ export default defineComponent({
         isLoadingRef.value = true;
         hasResetRef.value = false;
 
-        // NOTE: assuming last message is gauranteed to be non-empty and the user's last message
+        // NOTE: assuming last message is guaranteed to be non-empty and the user's last message
         // Get the last message from the user
         let lastMessage = messages[messages.length - 1];
         let searchResultMessages = [];
@@ -320,7 +320,7 @@ export default defineComponent({
         });
 
         // Expand all the messages to inline any compatible attachments
-        const exapndedMessages = messages
+        const expandedMessages = messages
           .map((message) => {
             let ret = [];
             // Push any attachments ahead of the message
@@ -341,7 +341,7 @@ export default defineComponent({
             }
 
             // Push what search results we found based on the message
-            // TODO: this should prabably be a more generic tool-call or llm-chain-link
+            // TODO: this should probably be a more generic tool-call or llm-chain-link
             // TODO: this should probably link back to the document id
             // TODO: I should probably write these below messages in the log
             //  Really these search results should get attached to the message that
@@ -361,7 +361,7 @@ export default defineComponent({
           .flat();
 
         // Append the search results to the messages
-        const allMessages = [...exapndedMessages, ...searchResultMessages];
+        const allMessages = [...expandedMessages, ...searchResultMessages];
 
         // Generate a stream of responses from the AI
         for await (const output of inferenceEngine.generateAnswer(
@@ -492,7 +492,7 @@ export default defineComponent({
         setChatName(messages[0].content);
       }
 
-      // Determine if there are messages we need to repsond to
+      // Determine if there are messages we need to respond to
       // NOTE: this is assuming all chats should be initiated by the user
       if (messages.length % 2 === 1) {
         await generatePersonaMessage();
diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index f7baa1d..83e2bae 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-layout view="hHh lpR fff" container style="height: 100vh">
-    <q-header elevated class="bg-primary text-white">
+  <q-layout container style="height: 100vh" view="hHh lpR fff">
+    <q-header class="bg-primary text-white" elevated>
       <q-toolbar class="row justify-between items-center q-px-lg">
-        <q-btn flat round dense @click="$router.push('/')" icon="home" />
+        <q-btn dense flat icon="home" round @click="$router.push('/')" />
         <q-toolbar-title>Knowledge Database</q-toolbar-title>
       </q-toolbar>
     </q-header>
@@ -15,9 +15,9 @@
               <q-item-section>
                 <q-item-label>{{ document.title }}</q-item-label>
               </q-item-section>
-              <!-- If the doucment is selected, show the deletion icon -->
-              <q-item-section side v-if="selectedDocumentId === document.id">
-                <q-btn-group flat dense>
+              <!-- If the document is selected, show the deletion icon -->
+              <q-item-section v-if="selectedDocumentId === document.id" side>
+                <q-btn-group dense flat>
                   <q-btn icon="delete" @click="removeSelectedDocument(document.id)" />
                   <q-tooltip>Remove Document</q-tooltip>
                 </q-btn-group>
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { ref, computed, defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { useKnowledgeStore } from 'src/stores/knowledge-store';
diff --git a/src/pages/VocalChat.vue b/src/pages/VocalChat.vue
index 16102dd..6ddc0fa 100644
--- a/src/pages/VocalChat.vue
+++ b/src/pages/VocalChat.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- It's a page with chat entries, by the user or by the AI assistant.
-    We are using Quasard q-chat-message compoents -->
+    We are using Quasard q-chat-message components -->
   <q-page class="flex flex-center">
     <div>
       hey there
@@ -8,10 +8,10 @@
         <q-chat-message
           v-for="entry in entries"
           :key="entry.id"
-          :sent="entry.sent"
+          :avatar="entry.avatar"
           :name="entry.name"
+          :sent="entry.sent"
           :text="[entry.text]"
-          :avatar="entry.avatar"
           :text-color="entry.isFinal ? 'black' : 'grey-8'"
         />
       </div>
@@ -19,8 +19,9 @@
   </q-page>
 </template>
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import OpenAI from 'openai';
+
 const openai = new OpenAI({
   apiKey: 'libertai',
   dangerouslyAllowBrowser: true,
diff --git a/src/stores/chats-store.js b/src/stores/chats-store.js
index 8a25b0f..d9bf0ee 100644
--- a/src/stores/chats-store.js
+++ b/src/stores/chats-store.js
@@ -21,7 +21,7 @@ const CHATS_STORE_PINIA_KEY = 'chats-store-pinia-key';
  *  model: Model;
  *  persona: Persona;
  *  // Note: we will populate these with additional data,
- *  // by inlinging attachments, search-results, etc.
+ *  // by inlining attachments, search-results, etc.
  *  messages: Message[];
  *  createdAt: Date;
  * }
@@ -47,7 +47,7 @@ const CHATS_STORE_PINIA_KEY = 'chats-store-pinia-key';
  * interface SearchResult {
  *  // embedding document id
  *  documentId: string;
- *  // embdedding conent
+ *  // embedding content
  *  content: string;
  * }
  */
@@ -72,7 +72,7 @@ export const useChatsStore = defineStore(CHATS_STORE_PINIA_KEY, {
       // Get the partial chats of the form { id, title }
       let chats = await this.chatsStore.readChats();
       this.chats = chats;
-      return;
+
     },
 
     /**
@@ -259,7 +259,7 @@ class ChatsStore {
     await Promise.all(updatedChats);
 
     // Done!
-    return;
+
   }
 
   /**
diff --git a/src/stores/knowledge-store.js b/src/stores/knowledge-store.js
index 68c80699..c382700 100644
--- a/src/stores/knowledge-store.js
+++ b/src/stores/knowledge-store.js
@@ -30,7 +30,7 @@ export const useKnowledgeStore = defineStore(KNOWLEDGE_STORE_PINIA_KEY, {
       }
       await Promise.all(addedDocuments);
       this.documents = docs;
-      return;
+
     },
     async addDocument(title, content, tags = []) {
       let doc = await this.knowledgeStore.addDocument(title, content, tags);
@@ -49,7 +49,7 @@ export const useKnowledgeStore = defineStore(KNOWLEDGE_STORE_PINIA_KEY, {
         tags.push(DEFAULT_KNOWLEDGE_TAG);
       }
 
-      // TODO: this should prolly be none
+      // TODO: this should probably be none
       return await this.knowledgeStore.searchDocuments(query, 3, 20, tags);
     },
   },
diff --git a/src/utils/knowledge.js b/src/utils/knowledge.js
index b022fe1..4411717 100644
--- a/src/utils/knowledge.js
+++ b/src/utils/knowledge.js
@@ -25,9 +25,9 @@ export const defaultKnowledge = [
       "Libertai.io is a decentralized AI platform that is built on top of Aleph.im's cloud computing platform. " +
       'Unlike traditional centralized AI platforms like OpenAI, Libertai.io is designed to operate in a decentralized manner, ' +
       "leveraging the security and scalability of Aleph.im's infrastructure to provide both privacy and performance. " +
-      "Slince the AI models that power the assistant are deployed and run on Aleph.im's network, rather than on a centralized server, " +
-      'ulsers can be confident that their data and interactions are not being monitored or exploited by a single entity. This is particularly ' +
-      'ilmportant for individuals and organizations that are concerned about the privacy implications of using traditional AI assistants. ',
+      "Since the AI models that power the assistant are deployed and run on Aleph.im's network, rather than on a centralized server, " +
+      'users can be confident that their data and interactions are not being monitored or exploited by a single entity. This is particularly ' +
+      'important for individuals and organizations that are concerned about the privacy implications of using traditional AI assistants. ',
     tags: ['Libertai', 'AI', 'Decentralized AI', 'Aleph.Im', 'Privacy', 'Security', 'depin'],
   },
 ];
diff --git a/src/utils/personas.js b/src/utils/personas.js
index 1ddd8f1..69ea39a 100644
--- a/src/utils/personas.js
+++ b/src/utils/personas.js
@@ -1,4 +1,4 @@
-// Configuration for base pomprts for different types of chatbots
+// Configuration for base prompts for different types of chatbots
 export const defaultPersonas = [
   {
     id: 0,

From a6413c196ae27dbbd85339cda5e8ebda53069af4 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Thu, 30 May 2024 21:51:21 +0200
Subject: [PATCH 02/11] fix: Remove unused i18n

---
 package-lock.json       | 249 ----------------------------------------
 package.json            |   2 -
 quasar.config.js        |  19 +--
 src/boot/.gitkeep       |   0
 src/boot/i18n.js        |  14 ---
 src/i18n/en-US/index.js |   7 --
 src/i18n/index.js       |   5 -
 7 files changed, 2 insertions(+), 294 deletions(-)
 delete mode 100644 src/boot/.gitkeep
 delete mode 100644 src/boot/i18n.js
 delete mode 100644 src/i18n/en-US/index.js
 delete mode 100644 src/i18n/index.js

diff --git a/package-lock.json b/package-lock.json
index 5523453..a9cd059 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,11 +27,9 @@
         "stream": "^0.0.2",
         "uuid": "^9.0.1",
         "vue": "^3.0.0",
-        "vue-i18n": "^9.0.0",
         "vue-router": "^4.0.0"
       },
       "devDependencies": {
-        "@intlify/vite-plugin-vue-i18n": "^7.0.0",
         "@quasar/app-vite": "^1.9.3",
         "autoprefixer": "^10.4.2",
         "eslint": "^8.57.0",
@@ -1184,105 +1182,6 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
-    "node_modules/@intlify/bundle-utils": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-3.4.0.tgz",
-      "integrity": "sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/message-compiler": "next",
-        "@intlify/shared": "next",
-        "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "0.6.1",
-        "yaml-eslint-parser": "^0.3.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependenciesMeta": {
-        "petite-vue-i18n": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@intlify/core-base": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.11.1.tgz",
-      "integrity": "sha512-qWXBBlEA+DC0CsHkfJiQK9ELm11c9I6lDpodY4FoOf99eMas1R6JR4woPhrfAcrtxFHp1UmXWdrQNKDegSW9IA==",
-      "dependencies": {
-        "@intlify/message-compiler": "9.11.1",
-        "@intlify/shared": "9.11.1"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.11.1.tgz",
-      "integrity": "sha512-y/aWx7DkaTKK2qWUw0hVbJpon8+urWXngeqh15DuIXZh6n/V/oPQiO/Ho1hUKbwap6MVMuz0OcnAJvqh3p9YPg==",
-      "dependencies": {
-        "@intlify/shared": "9.11.1",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.11.1.tgz",
-      "integrity": "sha512-yuDG82vjgId2oasNRgZ0PKJrF65zlL33MNyITP5itbLcP4AYOR/NcIuD+/DiI+GHXdxASMKJU0ZiITLc6RC+qw==",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/vite-plugin-vue-i18n": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-7.0.0.tgz",
-      "integrity": "sha512-2TbDOQ8XD+vkc0s5OFmr+IY/k4mYMC7pzvx0xGQn+cU/ev314+yi7Z7N7rWcBgiYk1WOUalbGSo3d4nJDxOOyw==",
-      "deprecated": "This plugin support until Vite 3. If you would like to use on Vite 4, please use @intlify/unplugin-vue-i18n",
-      "dev": true,
-      "dependencies": {
-        "@intlify/bundle-utils": "^3.1.2",
-        "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.2.0",
-        "debug": "^4.3.1",
-        "fast-glob": "^3.2.5",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "peerDependencies": {
-        "petite-vue-i18n": "*",
-        "vite": "^2.9.0 || ^3.0.0",
-        "vue-i18n": "*"
-      },
-      "peerDependenciesMeta": {
-        "petite-vue-i18n": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -10519,30 +10418,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -11309,22 +11184,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -12949,66 +12808,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
-    "node_modules/jsonc-eslint-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
-      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.4.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^1.3.0",
-        "espree": "^6.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -17926,25 +17725,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vue-i18n": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.11.1.tgz",
-      "integrity": "sha512-S7Xi8DkLQG4xnnbxkxzipJK6CdfLdZkmApn95st89HFGp8LTmTH0Tv+Zw6puhOCZJCFrH73PHo3Ylwd2+Bmdxg==",
-      "dependencies": {
-        "@intlify/core-base": "9.11.1",
-        "@intlify/shared": "9.11.1",
-        "@vue/devtools-api": "^6.5.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
@@ -19214,35 +18994,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/yaml-eslint-parser": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
-      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.3.0",
-        "lodash": "^4.17.20",
-        "yaml": "^1.10.0"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index dcbed44..46f404f 100644
--- a/package.json
+++ b/package.json
@@ -38,11 +38,9 @@
     "stream": "^0.0.2",
     "uuid": "^9.0.1",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@quasar/app-vite": "^1.9.3",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.57.0",
diff --git a/quasar.config.js b/quasar.config.js
index 104a3ec..29d1404 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -28,7 +28,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['utils', 'i18n', 'axios'],
+    boot: ['utils', 'axios'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
@@ -81,22 +81,7 @@ module.exports = configure(function (/* ctx */) {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      vitePlugins: [
-        [
-          '@intlify/vite-plugin-vue-i18n',
-          {
-            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
-            // compositionOnly: false,
-
-            // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
-            // you need to set `runtimeOnly: false`
-            // runtimeOnly: false,
-
-            // you need to set i18n resource including paths !
-            include: path.resolve(__dirname, './src/i18n/**'),
-          },
-        ],
-      ],
+      vitePlugins: [],
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
diff --git a/src/boot/.gitkeep b/src/boot/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/boot/i18n.js b/src/boot/i18n.js
deleted file mode 100644
index 3d047d7..0000000
--- a/src/boot/i18n.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
-
-export default boot(({ app }) => {
-  const i18n = createI18n({
-    locale: 'en-US',
-    globalInjection: true,
-    messages,
-  });
-
-  // Set i18n instance on app
-  app.use(i18n);
-});
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
deleted file mode 100644
index 250dbd4..0000000
--- a/src/i18n/en-US/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// This is just an example,
-// so you can safely delete all default props below
-
-export default {
-  failed: 'Action failed',
-  success: 'Action was successful',
-};
diff --git a/src/i18n/index.js b/src/i18n/index.js
deleted file mode 100644
index 028b8ef..0000000
--- a/src/i18n/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import enUS from './en-US';
-
-export default {
-  'en-US': enUS,
-};

From 997bf5215ee60441fba497a312f996682d0d41f1 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Thu, 30 May 2024 21:59:22 +0200
Subject: [PATCH 03/11] fix: Remove unused package

---
 package-lock.json             | 1 -
 package.json                  | 1 -
 quasar.config.js              | 1 -
 src/stores/chats-store.js     | 2 --
 src/stores/knowledge-store.js | 1 -
 5 files changed, 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9cd059..4e3cf49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
       "dependencies": {
         "@libertai/libertai-js": "0.0.4",
         "@quasar/extras": "^1.16.11",
-        "@solana/web3.js": "^1.90.0",
         "aleph-sdk-ts": "^3.9.2",
         "axios": "^1.2.1",
         "buffer": "^6.0.3",
diff --git a/package.json b/package.json
index 46f404f..67b8d48 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
   "dependencies": {
     "@libertai/libertai-js": "0.0.4",
     "@quasar/extras": "^1.16.11",
-    "@solana/web3.js": "^1.90.0",
     "aleph-sdk-ts": "^3.9.2",
     "axios": "^1.2.1",
     "buffer": "^6.0.3",
diff --git a/quasar.config.js b/quasar.config.js
index 29d1404..6206cc1 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -9,7 +9,6 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
-const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
   return {
diff --git a/src/stores/chats-store.js b/src/stores/chats-store.js
index d9bf0ee..56bc7bb 100644
--- a/src/stores/chats-store.js
+++ b/src/stores/chats-store.js
@@ -72,7 +72,6 @@ export const useChatsStore = defineStore(CHATS_STORE_PINIA_KEY, {
       // Get the partial chats of the form { id, title }
       let chats = await this.chatsStore.readChats();
       this.chats = chats;
-
     },
 
     /**
@@ -259,7 +258,6 @@ class ChatsStore {
     await Promise.all(updatedChats);
 
     // Done!
-
   }
 
   /**
diff --git a/src/stores/knowledge-store.js b/src/stores/knowledge-store.js
index c382700..ecba8a1 100644
--- a/src/stores/knowledge-store.js
+++ b/src/stores/knowledge-store.js
@@ -30,7 +30,6 @@ export const useKnowledgeStore = defineStore(KNOWLEDGE_STORE_PINIA_KEY, {
       }
       await Promise.all(addedDocuments);
       this.documents = docs;
-
     },
     async addDocument(title, content, tags = []) {
       let doc = await this.knowledgeStore.addDocument(title, content, tags);

From 13b4db70976dfbbaf93a26ad656d9c7df58dff27 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 18:43:55 +0200
Subject: [PATCH 04/11] fix: Remove useless account props

---
 src/stores/account.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/stores/account.js b/src/stores/account.js
index 0175e54..78651bd 100644
--- a/src/stores/account.js
+++ b/src/stores/account.js
@@ -11,8 +11,6 @@ export const useAccount = defineStore('account', {
   getters: {
     alephAccount() {
       return {
-        private_key: null,
-        mnemonics: null,
         address: this.address,
         name: this.address,
         type: 'ETH',

From a63dc2618ce80184648b3b8c219a2f1b3e2286de Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 18:46:58 +0200
Subject: [PATCH 05/11] fix: Remove unused getter

---
 src/components/AccountButton.vue |  8 +++-----
 src/stores/account.js            | 12 ------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/AccountButton.vue b/src/components/AccountButton.vue
index 16a2812..63a61e9 100644
--- a/src/components/AccountButton.vue
+++ b/src/components/AccountButton.vue
@@ -9,7 +9,7 @@
       unelevated
       @click="eth_web3_login"
     >
-      <q-icon class="text-dark" size="xs" left>
+      <q-icon class="text-dark" left size="xs">
         <img src="~assets/wallet.svg" />
       </q-icon>
       Connect Wallet
@@ -18,11 +18,11 @@
       v-else
       :label="`${account.address.slice(0, 4)}...${account.address.slice(-2)}`"
       class="border-primary-highlight gt-sm"
-      text-color="primary"
+      icon="img:icons/svg/avatar.svg"
       no-caps
       rounded
+      text-color="primary"
       unelevated
-      icon="img:icons/svg/avatar.svg"
     >
       <div class="row no-wrap q-pa-md q-pt-none">
         <div class="column items-center">
@@ -50,8 +50,6 @@ import { ethers } from 'ethers';
 import { useAccount } from '../stores/account';
 import { usePoints } from 'stores/points';
 
-console.log(ethers);
-
 const account = useAccount();
 
 async function eth_web3_login() {
diff --git a/src/stores/account.js b/src/stores/account.js
index 78651bd..5691508 100644
--- a/src/stores/account.js
+++ b/src/stores/account.js
@@ -8,18 +8,6 @@ export const useAccount = defineStore('account', {
     signer: null,
     address: '',
   }),
-  getters: {
-    alephAccount() {
-      return {
-        address: this.address,
-        name: this.address,
-        type: 'ETH',
-        source: 'provider',
-        provider: this.provider,
-        signer: this.signer,
-      };
-    },
-  },
   actions: {
     // any amount of arguments, return a promise or not
     async setProvider(provider) {

From 38b1d9d9e3cf3bae5d4a7acedd7c6f7a1ea2c75a Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 21:34:49 +0200
Subject: [PATCH 06/11] fix: Remove useless store and actions

---
 src/components/PersonaDialog.vue   |  2 +-
 src/components/PersonaDropDown.vue | 18 ++++++++--------
 src/pages/Chat.vue                 |  2 +-
 src/pages/PointsInfo.vue           | 34 ++++++++++++++----------------
 src/stores/counter-store.js        | 15 -------------
 src/stores/personas-store.js       |  6 ------
 6 files changed, 27 insertions(+), 50 deletions(-)
 delete mode 100644 src/stores/counter-store.js

diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
index 1bfb0cc..12e8b35 100644
--- a/src/components/PersonaDialog.vue
+++ b/src/components/PersonaDialog.vue
@@ -62,7 +62,7 @@ export default defineComponent({
     const usernameInputRef = ref('user');
 
     function updatePersona() {
-      personasStore.setPersona(persona);
+      personasStore.persona = persona;
     }
 
     return {
diff --git a/src/components/PersonaDropDown.vue b/src/components/PersonaDropDown.vue
index a52c695..8aad70a 100644
--- a/src/components/PersonaDropDown.vue
+++ b/src/components/PersonaDropDown.vue
@@ -1,24 +1,24 @@
 <template>
   <q-btn-dropdown
-    no-caps
-    unelevated
-    rounded
     :icon="'img:' + personasStore.persona.avatarUrl"
-    dropdown-icon="img:icons/svg/chevron-down.svg"
+    :label="personasStore.persona.name"
     class="no-shadow rounded-img personas-dropdown q-py-sm"
+    dropdown-icon="img:icons/svg/chevron-down.svg"
+    no-caps
+    rounded
     text-color="primary"
-    :label="personasStore.persona.name"
+    unelevated
   >
     <q-list>
       <q-item
-        clickable
-        v-close-popup
         v-for="persona of personasStore.personas"
         :key="persona.id"
+        v-close-popup
         :name="persona.id"
+        clickable
         @click="setPersona(persona.id)"
       >
-        <q-avatar size="32px" class="q-mr-md">
+        <q-avatar class="q-mr-md" size="32px">
           <img :src="persona.avatarUrl" />
         </q-avatar>
         <q-item-section>
@@ -41,7 +41,7 @@ export default defineComponent({
     const personasStore = usePersonasStore();
 
     function setPersona(id) {
-      personasStore.setPersona(personasStore.personas.find((persona) => persona.id === id));
+      personasStore.persona = personasStore.personas.find((persona) => persona.id === id);
     }
 
     return {
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index 32097f6..ee8dd7b 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -459,7 +459,7 @@ export default defineComponent({
       }
 
       console.log('set persona from chat');
-      personasStore.setPersona(chatRef.value.persona);
+      personasStore.persona = chatRef.value.persona;
       // Extract the chat properties
       let title = chatRef.value.title;
       let username = chatRef.value.username;
diff --git a/src/pages/PointsInfo.vue b/src/pages/PointsInfo.vue
index de22420..eb90f8a 100644
--- a/src/pages/PointsInfo.vue
+++ b/src/pages/PointsInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="flex flex-center bg-dark_deleted font-mulish text-purple-700">
     <div class="row q-pa-xl q-col-gutter-md">
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section class="bg-dark-page_deleted">
           <div class="text-h4 text-bold">Earn Libertai Points</div>
         </q-card-section>
@@ -15,7 +15,7 @@
           <p>How to participate:</p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">Stake ALEPH</div>
         </q-card-section>
@@ -26,7 +26,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">aleph.im Core Channel Node Operator</div>
         </q-card-section>
@@ -37,7 +37,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">aleph.im Resource Node Operator</div>
         </q-card-section>
@@ -48,7 +48,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6 text-semibold">Connect your wallet and Start earning points today!</div>
         </q-card-section>
@@ -59,31 +59,31 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section class="bg-purple-50">
           <div class="text-h6">Check your points</div>
         </q-card-section>
         <q-card-section class="q-pt-none bg-purple-50">
           <q-input
             v-model="address"
-            bottom-slots
-            counter
+            :rules="addressRules"
             autofocus
-            rounded
-            standout
             bg-color="secondary"
+            bottom-slots
             class="q-pa-lg"
+            counter
             input-class="text-light"
             label="Address"
             label-color="grey"
             maxlength="42"
-            :rules="addressRules"
+            rounded
+            standout
           >
             <template v-slot:prepend>
               <q-icon name="wallet" />
             </template>
 
-            <template v-slot:hint> Enter an address to check if there are points associated with it. </template>
+            <template v-slot:hint> Enter an address to check if there are points associated with it.</template>
           </q-input>
           <div v-if="addressVerifier(address) === true" class="text-h6 text-bold q-pa-lg">
             <div v-if="points.getAddressPoints(address) === 0">
@@ -93,11 +93,11 @@
               You have points!<br /><br />
               <q-btn
                 :to="{ name: 'points-detail', params: { address: address } }"
-                label="View details"
                 color="white"
-                text-color="primary"
+                label="View details"
                 no-caps
                 rounded
+                text-color="primary"
               />
             </div>
           </div>
@@ -108,15 +108,13 @@
 </template>
 
 <script>
-import { defineComponent, ref, onMounted, nextTick } from 'vue';
-import { useCounterStore } from '../stores/counter-store';
+import { defineComponent, nextTick, onMounted, ref } from 'vue';
 import { usePoints } from '../stores/points';
 import { ethers } from 'ethers';
 
 export default defineComponent({
   name: 'PointsInfo',
   setup() {
-    const counter = useCounterStore();
     const expanded = ref(false);
     const points = usePoints();
     const address = ref('');
@@ -141,12 +139,12 @@ export default defineComponent({
         return 'Invalid address';
       }
     }
+
     // points.points is an object, let's check if it's empty
 
     // const count = ref(0)
     return {
       points,
-      counter,
       expanded,
       address,
       addressVerifier,
diff --git a/src/stores/counter-store.js b/src/stores/counter-store.js
deleted file mode 100644
index 83e8390..0000000
--- a/src/stores/counter-store.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0,
-  }),
-  getters: {
-    doubleCount: (state) => state.counter * 2,
-  },
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});
diff --git a/src/stores/personas-store.js b/src/stores/personas-store.js
index 9099cb8..4d732b1 100644
--- a/src/stores/personas-store.js
+++ b/src/stores/personas-store.js
@@ -8,10 +8,4 @@ export const usePersonasStore = defineStore('personas', {
     persona: defaultPersonas[0],
   }),
   getters: {},
-  actions: {
-    setPersona(persona) {
-      // you can directly mutate the state
-      this.persona = persona;
-    },
-  },
 });

From 77b4cd7146d9aa04d1e74132a824ab8e6732ed7d Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 21:39:20 +0200
Subject: [PATCH 07/11] fix: Remove useless debug console.log

---
 src/components/AccountButton.vue         |  3 ---
 src/components/KnowledgeStoreUploader.js |  1 -
 src/components/MessageInput.vue          | 21 ++++++++++-----------
 src/pages/Chat.vue                       |  5 -----
 src/pages/KnowledgeBase.vue              |  1 -
 src/pages/PointsDetail.vue               | 17 +++++++----------
 src/pages/VocalChat.vue                  |  4 ----
 src/stores/account.js                    |  3 ---
 src/stores/models-store.js               |  2 --
 src/stores/points.js                     |  3 ---
 10 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/components/AccountButton.vue b/src/components/AccountButton.vue
index 63a61e9..6309ff2 100644
--- a/src/components/AccountButton.vue
+++ b/src/components/AccountButton.vue
@@ -54,7 +54,6 @@ const account = useAccount();
 
 async function eth_web3_login() {
   const points = usePoints();
-  console.log(window.ethereum);
   if (window.ethereum) {
     try {
       // Request account access if needed
@@ -62,13 +61,11 @@ async function eth_web3_login() {
       let provider = new ethers.providers.Web3Provider(window['ethereum'] || window.web3.currentProvider);
       await account.setProvider(provider);
     } catch (error) {
-      console.log(error);
       // User denied account access...
     }
   } else {
     alert('No ethereum provider detected. Please install metamask or similar.');
   }
-  console.log(account);
   if (!account.active) {
     alert('Error getting web3 account');
     return;
diff --git a/src/components/KnowledgeStoreUploader.js b/src/components/KnowledgeStoreUploader.js
index ac77e97..0cd6bc8 100644
--- a/src/components/KnowledgeStoreUploader.js
+++ b/src/components/KnowledgeStoreUploader.js
@@ -32,7 +32,6 @@ export default createUploaderComponent({
       // Set the loading state
       loading.value = true;
       const files = helpers.queuedFiles.value;
-      console.log(`components::KnowledgeStoreUploader::upload - files: ${files}`);
       fileStatus.value = {};
       fileStatus.value = files.reduce((acc, file) => {
         acc[file.name] = 'queued';
diff --git a/src/components/MessageInput.vue b/src/components/MessageInput.vue
index 653488a..ed87afb 100644
--- a/src/components/MessageInput.vue
+++ b/src/components/MessageInput.vue
@@ -1,27 +1,27 @@
 <template>
   <q-input
-    outlined
+    ref="input"
     v-model="model"
-    placeholder="Write your message here"
+    :bottom-slots="props.hint !== ''"
+    :class="` ${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
+    :loading="isLoading"
     autofocus
+    autogrow
     bg-color="secondary"
-    label-color="grey"
     input-class="text-light"
-    :class="` ${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
-    ref="input"
-    type="textarea"
-    autogrow
     input-style="max-height: 10em;"
+    label-color="grey"
+    outlined
+    placeholder="Write your message here"
+    type="textarea"
     @keydown.enter="sendMessage"
-    :loading="isLoading"
-    :bottom-slots="props.hint !== ''"
   >
     <template v-slot:prepend>
       <!--<q-btn round dense flat icon="img:icons/svg/attachment.svg" @click="sendMessage" color="white" />-->
     </template>
     <template v-slot:append>
       <!--<q-btn round dense flat icon="img:icons/mic.svg" @click="sendMessage" color="" class="" />-->
-      <q-btn round dense flat icon="img:icons/send.svg" @click="sendMessage" color="" class="" />
+      <q-btn class="" color="" dense flat icon="img:icons/send.svg" round @click="sendMessage" />
     </template>
 
     <template v-slot:hint>
@@ -49,7 +49,6 @@ const sendMessage = (event) => {
     return;
   }
   event.preventDefault();
-  console.log(model.value);
 
   if (!model.value.trim()) return;
   let content = model.value;
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index ee8dd7b..3f981e7 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -158,8 +158,6 @@ import MarkdownRenderer from 'src/components/MarkdownRenderer.vue';
 import MessageInput from 'src/components/MessageInput.vue';
 import axios from 'axios';
 
-console.log(nextTick);
-
 export default defineComponent({
   name: 'ChatPage',
   components: {
@@ -221,7 +219,6 @@ export default defineComponent({
     watch(
       () => account.active,
       (active) => {
-        console.log('pages::Chat.vue::watch - account.active', active);
         enableKnowledgeRef.value = active;
       },
     );
@@ -417,7 +414,6 @@ export default defineComponent({
     }
 
     async function sendMessage(content) {
-      console.log('pages::Chat.vue::sendMessage');
       let chatId = chatRef.value.id;
       let inputText = inputTextRef.value;
       const attachments = JSON.parse(JSON.stringify(attachmentsRef.value));
@@ -458,7 +454,6 @@ export default defineComponent({
         return;
       }
 
-      console.log('set persona from chat');
       personasStore.persona = chatRef.value.persona;
       // Extract the chat properties
       let title = chatRef.value.title;
diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index 83e2bae..e6eadeb 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -62,7 +62,6 @@ export default defineComponent({
 
     // On row click event handler for the table
     function onRowClick(evt, row) {
-      console.log('Row clicked', row);
       selectedDocumentId.value = row.id;
     }
 
diff --git a/src/pages/PointsDetail.vue b/src/pages/PointsDetail.vue
index 71a3920..fe2c376 100644
--- a/src/pages/PointsDetail.vue
+++ b/src/pages/PointsDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="flex flex-center q-pa-xl font-mulish text-purple-700">
     <div class="row q-pa-xl q-col-gutter-md q-py-xl">
-      <q-card flat class="col-12 text-center">
+      <q-card class="col-12 text-center" flat>
         <q-card-section>
           <p class="q-py-md">
             <span class="bg-purple-50 q-py-sm q-px-xl rounded text-bold">{{ address }}</span>
@@ -13,7 +13,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="bg-purple-50 col-12 q-pa-none">
+      <q-card class="bg-purple-50 col-12 q-pa-none" flat>
         <q-card-section class="q-pt-none q-pa-xl row">
           <div class="text-h6 text-bold col-8 text-left">
             <q-avatar class="q-mr-sm">
@@ -27,7 +27,7 @@
           </div>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column q-pl-none">
+      <q-card class="col-6 text-center column q-pl-none" flat>
         <q-card-section class="bg-purple-50 q-pa-xl">
           <p class="text-h6 text-bold text-left">Pending Points</p>
           <p class="q-py-md text-right">
@@ -35,7 +35,7 @@
           </p>
         </q-card-section>
       </q-card>
-      <q-card flat class="col-6 text-center column">
+      <q-card class="col-6 text-center column" flat>
         <q-card-section class="bg-purple-50 q-pa-xl">
           <p class="text-h6 text-bold text-left">36 Month estimated Points*</p>
           <p class="q-py-md text-right">
@@ -55,12 +55,11 @@
 </template>
 
 <script>
-import { defineComponent, ref, watch, onMounted, computed, onBeforeUnmount } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { usePoints } from '../stores/points';
 import { useAccount } from '../stores/account';
 import { ethers } from 'ethers';
-import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'PointsDetail',
@@ -96,7 +95,6 @@ export default defineComponent({
     watch(
       () => account.address,
       async (newAddress, oldAddress) => {
-        console.log(address.value, oldAddress, newAddress);
         if (oldAddress == address.value) {
           router.push({
             name: 'points-detail',
@@ -108,6 +106,7 @@ export default defineComponent({
 
     const currentPendingPoints = ref(0);
     const hourlyRate = ref(0);
+
     async function updatePoints() {
       const pendingInfo = await points.getAddressRealtimePendingPointsInfo(address.value);
       hourlyRate.value = pendingInfo.hourlyRate;
@@ -129,14 +128,12 @@ export default defineComponent({
 
       const current_decay = daily_decay ** (currentTimeSinceStart / 86400);
       const current_ratio = initial_ratio * current_decay;
-      console.log(current_ratio);
       // we extrapolate on what would a 10 days distribution be
       let current_base = ((pendingPoints / totalDuration) * 3600 * 24 * 10) / current_ratio;
       if (current_base < 0) {
         // something is fishy
         current_base = ((currentPoints / (lastTime - firstTime)) * 3600 * 24 * 10) / current_ratio;
       }
-      console.log(current_base);
 
       const distributions = (365 * 3) / 10;
       let total = currentPoints;
diff --git a/src/pages/VocalChat.vue b/src/pages/VocalChat.vue
index 6ddc0fa..30ddfea 100644
--- a/src/pages/VocalChat.vue
+++ b/src/pages/VocalChat.vue
@@ -56,7 +56,6 @@ async function ask(question) {
     model: 'openhermes-2.5',
     max_tokens: 128,
   });
-  console.log(chatCompletion);
   // We add the answer to the entries array
   const answer = chatCompletion.choices[0].message.content;
   entries.value.push({
@@ -78,12 +77,10 @@ onMounted(() => {
   recognition.lang = 'fr-FR';
   var last_entry = null;
   recognition.addEventListener('result', (e) => {
-    console.log(e.results);
     const transcript = Array.from(e.results)
       .map((result) => result[0])
       .map((result) => result.transcript)
       .join('');
-    console.log(transcript);
 
     // We add the transcript to the entries array, only if we weren't working on it yet (final arg)
     if (last_entry == null) {
@@ -107,7 +104,6 @@ onMounted(() => {
       ask(transcript);
     }
   });
-  console.log(speech);
   if (speech == true) {
     recognition.start();
     recognition.addEventListener('end', recognition.start);
diff --git a/src/stores/account.js b/src/stores/account.js
index 5691508..dd9b847 100644
--- a/src/stores/account.js
+++ b/src/stores/account.js
@@ -13,13 +13,10 @@ export const useAccount = defineStore('account', {
     async setProvider(provider) {
       // you can directly mutate the state
       this.provider = provider;
-      console.log(provider.provider);
       provider.provider.on('accountsChanged', async (accounts) => {
-        console.log('accountsChanged', accounts);
         this.address = ethers.utils.getAddress(accounts[0]);
         this.signer = await this.provider.getSigner();
       });
-      console.log('provider', provider);
       this.signer = await this.provider.getSigner();
       this.address = await this.signer.getAddress();
       this.active = true;
diff --git a/src/stores/models-store.js b/src/stores/models-store.js
index 734b351..18c8954 100644
--- a/src/stores/models-store.js
+++ b/src/stores/models-store.js
@@ -15,10 +15,8 @@ export const useModelsStore = defineStore('models', {
       this.selectedModel = model;
     },
     setModelByURL(modelUrl) {
-      console.log('searching for', modelUrl);
       for (let model of defaultModels)
         if (model.apiUrl == modelUrl) {
-          console.log('found', model.name, model.apiUrl);
           this.selectedModel = model;
         }
     },
diff --git a/src/stores/points.js b/src/stores/points.js
index 63498d1..84a0e9a 100644
--- a/src/stores/points.js
+++ b/src/stores/points.js
@@ -32,9 +32,6 @@ export const usePoints = defineStore('points', {
       this.points = pointsData.points;
       this.info = pointsData.info;
       this.pending_points = pointsData.pending_points;
-      console.log('points', this.points);
-      console.log('info', this.info);
-      console.log('pending_points', this.pending_points);
     },
 
     getAddressPoints(address) {

From a59bbe21723cd5422632cac8935ef350f3b37ec6 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 22:37:31 +0200
Subject: [PATCH 08/11] fix: Uniformize usage of Composition API

---
 package-lock.json                  |  16 +
 package.json                       |   1 +
 src/App.vue                        |  22 +-
 src/components/AccountButton.vue   |   5 +-
 src/components/EssentialLink.vue   |  41 +-
 src/components/PersonaDialog.vue   |  27 +-
 src/components/PersonaDropDown.vue |  23 +-
 src/layouts/MainLayout.vue         | 117 ++---
 src/pages/Chat.vue                 | 707 ++++++++++++++---------------
 src/pages/ErrorNotFound.vue        |  10 +-
 src/pages/KnowledgeBase.vue        |  69 ++-
 src/pages/NewChat.vue              | 111 ++---
 src/pages/PointsDetail.vue         | 180 ++++----
 src/pages/PointsInfo.vue           |  71 ++-
 14 files changed, 614 insertions(+), 786 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4e3cf49..cb4ffd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
       },
       "devDependencies": {
         "@quasar/app-vite": "^1.9.3",
+        "@types/dompurify": "^3.0.5",
         "autoprefixer": "^10.4.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
@@ -6807,6 +6808,15 @@
       "integrity": "sha512-rkiiTuf/z2wTd4RxFOb+clE7PF4AEJU0hsczbUdkHHBtkUmpWQpEddynNfJYKYtZFJKbq4F+brfekt1kx85IZA==",
       "dev": true
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/express": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
@@ -6953,6 +6963,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
diff --git a/package.json b/package.json
index 67b8d48..8e90740 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.3",
+    "@types/dompurify": "^3.0.5",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
diff --git a/src/App.vue b/src/App.vue
index aa9a007..19eb5a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,22 +2,16 @@
   <router-view />
 </template>
 
-<script>
-import { defineComponent, onMounted } from 'vue';
+<script setup>
+import { onMounted } from 'vue';
 import { useChatsStore } from 'stores/chats-store';
 import { useKnowledgeStore } from './stores/knowledge-store';
 
-export default defineComponent({
-  name: 'App',
-  setup() {
-    const chatsStore = useChatsStore();
-    const knowledgeStore = useKnowledgeStore();
-    onMounted(() => {
-      // Set the knowledge store and chats store to load when the app is mounted
-      knowledgeStore.load();
-      chatsStore.load();
-    });
-    return {};
-  },
+const chatsStore = useChatsStore();
+const knowledgeStore = useKnowledgeStore();
+onMounted(() => {
+  // Set the knowledge store and chats store to load when the app is mounted
+  knowledgeStore.load();
+  chatsStore.load();
 });
 </script>
diff --git a/src/components/AccountButton.vue b/src/components/AccountButton.vue
index 6309ff2..219906f 100644
--- a/src/components/AccountButton.vue
+++ b/src/components/AccountButton.vue
@@ -47,7 +47,7 @@
 
 <script setup>
 import { ethers } from 'ethers';
-import { useAccount } from '../stores/account';
+import { useAccount } from 'stores/account';
 import { usePoints } from 'stores/points';
 
 const account = useAccount();
@@ -60,6 +60,7 @@ async function eth_web3_login() {
       await window.ethereum.enable();
       let provider = new ethers.providers.Web3Provider(window['ethereum'] || window.web3.currentProvider);
       await account.setProvider(provider);
+      await points.update();
     } catch (error) {
       // User denied account access...
     }
@@ -68,8 +69,6 @@ async function eth_web3_login() {
   }
   if (!account.active) {
     alert('Error getting web3 account');
-    return;
   }
-  await points.update();
 }
 </script>
diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
index ca55db6..cdf0bee 100644
--- a/src/components/EssentialLink.vue
+++ b/src/components/EssentialLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-item clickable tag="a" target="_blank" :href="link">
+  <q-item :href="link" clickable tag="a" target="_blank">
     <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
@@ -11,31 +11,26 @@
   </q-item>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
+<script setup>
+const { title, caption, link, icon } = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
 
-    caption: {
-      type: String,
-      default: '',
-    },
+  caption: {
+    type: String,
+    default: '',
+  },
 
-    link: {
-      type: String,
-      default: '#',
-    },
+  link: {
+    type: String,
+    default: '#',
+  },
 
-    icon: {
-      type: String,
-      default: '',
-    },
+  icon: {
+    type: String,
+    default: '',
   },
 });
 </script>
diff --git a/src/components/PersonaDialog.vue b/src/components/PersonaDialog.vue
index 12e8b35..1ccb4fa 100644
--- a/src/components/PersonaDialog.vue
+++ b/src/components/PersonaDialog.vue
@@ -50,26 +50,15 @@
   </q-dialog>
 </template>
 
-<script>
+<script setup>
 import { usePersonasStore } from 'src/stores/personas-store';
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 
-export default defineComponent({
-  name: 'PersonaDialog',
-  setup() {
-    const personasStore = usePersonasStore();
-    const persona = personasStore.persona;
-    const usernameInputRef = ref('user');
+const personasStore = usePersonasStore();
+const persona = personasStore.persona;
+const usernameInputRef = ref('user');
 
-    function updatePersona() {
-      personasStore.persona = persona;
-    }
-
-    return {
-      usernameInputRef,
-      persona,
-      updatePersona,
-    };
-  },
-});
+function updatePersona() {
+  personasStore.persona = persona;
+}
 </script>
diff --git a/src/components/PersonaDropDown.vue b/src/components/PersonaDropDown.vue
index 8aad70a..d7a3dab 100644
--- a/src/components/PersonaDropDown.vue
+++ b/src/components/PersonaDropDown.vue
@@ -31,23 +31,12 @@
   </q-btn-dropdown>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-import { usePersonasStore } from 'src/stores/personas-store';
+<script setup>
+import { usePersonasStore } from 'stores/personas-store';
 
-export default defineComponent({
-  name: 'PersonaDropDown',
-  setup() {
-    const personasStore = usePersonasStore();
+const personasStore = usePersonasStore();
 
-    function setPersona(id) {
-      personasStore.persona = personasStore.personas.find((persona) => persona.id === id);
-    }
-
-    return {
-      personasStore,
-      setPersona,
-    };
-  },
-});
+function setPersona(id) {
+  personasStore.persona = personasStore.personas.find((persona) => persona.id === id);
+}
 </script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index de7b7d0..37772e2 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -3,7 +3,6 @@
     <q-header class="bg-transparent q-mt-sm">
       <q-toolbar>
         <q-btn aria-label="Menu" color="primary" dense flat icon="menu" round @click="toggleLeftDrawer" />
-        <!--<persona-drop-down />-->
         <q-btn flat @click="editPersona = true">
           <q-icon size="xs">
             <img src="icons/svg/settings.svg" />
@@ -148,7 +147,7 @@
       </q-list>
       <!-- socials and support links (follow us, support, disclaimer) -->
       <q-list class="q-pt-md">
-        <q-item href="https://twitter.com/libertai_dai" target="_blank">
+        <q-item href="https://x.com/libertai_dai" target="_blank">
           <q-item-section avatar>
             <img alt="Twitter - X" src="icons/twitter-x.svg" width="32px" />
           </q-item-section>
@@ -188,14 +187,13 @@
   </q-layout>
 </template>
 
-<script>
-import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+<script setup>
+import { computed, nextTick, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 // Import State
 import { useChatsStore } from '../stores/chats-store';
 import { useModelsStore } from '../stores/models-store';
-import { usePersonasStore } from 'src/stores/personas-store';
 import { useAccount } from '../stores/account';
 import { usePoints } from 'src/stores/points';
 import { useRoute, useRouter } from 'vue-router';
@@ -204,82 +202,47 @@ import { useRoute, useRouter } from 'vue-router';
 import AccountButton from 'src/components/AccountButton.vue';
 import PersonaDialog from 'src/components/PersonaDialog.vue';
 
-export default defineComponent({
-  name: 'MainLayout',
-  components: {
-    AccountButton,
-    PersonaDialog,
-  },
+const leftDrawerOpen = ref(false);
+// Control whether the advanced persona customization is shown
+const editPersona = ref(false);
 
-  setup() {
-    const leftDrawerOpen = ref(false);
-    // Control whether the advanced persona customization is shown
-    const editPersona = ref(false);
+const deleteChatConfirmAction = ref(false);
+const deleteChatId = ref(null);
 
-    const deleteChatConfirmAction = ref(false);
-    const deleteChatId = ref(null);
+// Setup Stores
+const modelsStore = useModelsStore();
+const chatsStore = useChatsStore();
+const account = useAccount();
+const points = usePoints();
 
-    // Setup Stores
-    const modelsStore = useModelsStore();
-    const chatsStore = useChatsStore();
-    const personasStore = usePersonasStore();
-    const account = useAccount();
-    const points = usePoints();
+const router = useRouter();
+const route = useRoute();
 
-    const router = useRouter();
-    const route = useRoute();
+// Reference to the chat-store state
+const { chats } = storeToRefs(chatsStore);
 
-    // Reference to the chat-store state
-    const { chats } = storeToRefs(chatsStore);
-
-    const addressPoints = computed(() => {
-      if (account.active) {
-        return points.getAddressRealtimePoints(account.address);
-      } else {
-        return 0;
-      }
-    });
-
-    // TODO: this is an invalid use of watch, as we are watching a computed value
-    // watch for account changes, and update points if not already done
-    watch(account.address, () => {
-      if (account.active && Object.keys(points.points).length === 0) {
-        points.update();
-      }
-    });
-
-    // Delete a chat
-    async function deleteChat(chat_id) {
-      await chatsStore.deleteChat(chat_id);
-      if (route.params?.id == chat_id) {
-        nextTick(() => router.push('/new'));
-      }
-    }
-
-    async function deleteChatConfirm(chat_id) {
-      deleteChatConfirmAction.value = true;
-      deleteChatId.value = chat_id;
-    }
-
-    return {
-      chats,
-      modelsStore,
-      personasStore,
-      account,
-      points,
-      router,
-      route,
-      leftDrawerOpen,
-      addressPoints,
-      deleteChat,
-      deleteChatConfirm,
-      deleteChatConfirmAction,
-      deleteChatId,
-      editPersona,
-      toggleLeftDrawer() {
-        leftDrawerOpen.value = !leftDrawerOpen.value;
-      },
-    };
-  },
+const addressPoints = computed(() => {
+  if (account.active) {
+    return points.getAddressRealtimePoints(account.address);
+  } else {
+    return 0;
+  }
 });
+
+// Delete a chat
+async function deleteChat(chat_id) {
+  await chatsStore.deleteChat(chat_id);
+  if (route.params?.id == chat_id) {
+    nextTick(() => router.push('/new'));
+  }
+}
+
+async function deleteChatConfirm(chat_id) {
+  deleteChatConfirmAction.value = true;
+  deleteChatId.value = chat_id;
+}
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
 </script>
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index 3f981e7..01eae99 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -135,10 +135,10 @@
   </q-page>
 </template>
 
-<script>
+<script setup>
 import 'highlight.js/styles/devibeans.css';
 import { copyToClipboard, useQuasar } from 'quasar';
-import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { defaultChatTopic, inferChatTopic } from 'src/utils/chat';
@@ -158,409 +158,376 @@ import MarkdownRenderer from 'src/components/MarkdownRenderer.vue';
 import MessageInput from 'src/components/MessageInput.vue';
 import axios from 'axios';
 
-export default defineComponent({
-  name: 'ChatPage',
-  components: {
-    MarkdownRenderer,
-    MessageInput,
-  },
-  setup() {
-    const $q = useQuasar();
-    const route = useRoute();
-    const router = useRouter();
-
-    // App state
-    const account = useAccount();
-    const chatsStore = useChatsStore();
-    const modelsStore = useModelsStore();
-    const knowledgeStore = useKnowledgeStore();
-    const personasStore = usePersonasStore();
-
-    // Local page state
-    const inputTextRef = ref('');
-    const isLoadingRef = ref(false);
-    const hasResetRef = ref(false);
-    const inputRef = ref(null);
-    const scrollAreaRef = ref(null);
-    const enableEditRef = ref(false);
-    const enableKnowledgeRef = ref(true);
-    const showKnowledgeUploaderRef = ref(false);
-    const attachmentsRef = ref([]);
-
-    // Chat specific state
-    const chatRef = ref();
-    const personaRef = ref();
-    const usernameRef = ref();
-    const messagesRef = ref([]);
-
-    // Instance of an inference engine
-    const inferenceEngine = new LlamaCppApiEngine();
-
-    // Clear the chat as soon as we mount
-    onMounted(() => {
-      nextTick(clearCookies);
-    });
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+// App state
+const account = useAccount();
+const chatsStore = useChatsStore();
+const modelsStore = useModelsStore();
+const knowledgeStore = useKnowledgeStore();
+const personasStore = usePersonasStore();
+
+// Local page state
+const inputTextRef = ref('');
+const isLoadingRef = ref(false);
+const hasResetRef = ref(false);
+const inputRef = ref(null);
+const scrollAreaRef = ref(null);
+const enableEditRef = ref(false);
+const enableKnowledgeRef = ref(true);
+const showKnowledgeUploaderRef = ref(false);
+const attachmentsRef = ref([]);
+
+// Chat specific state
+const chatRef = ref();
+const personaRef = ref();
+const usernameRef = ref();
+const messagesRef = ref([]);
+
+// Instance of an inference engine
+const inferenceEngine = new LlamaCppApiEngine();
+
+// Clear the chat as soon as we mount
+onMounted(() => {
+  nextTick(clearCookies);
+});
 
-    /* Set chat on initial load */
-
-    setChat(route.params.id);
-
-    /* Watchers */
-
-    // Update the chat when the route changes
-    watch(
-      () => route.params.id,
-      async (newId) => {
-        await setChat(newId);
-      },
-    );
-
-    // Update whether we should show the knowledge uploader based on whether the user is connected
-    watch(
-      () => account.active,
-      (active) => {
-        enableKnowledgeRef.value = active;
-      },
-    );
-
-    // Update the chat model when the selected model changes
-    watch(
-      () => modelsStore.selectedModel,
-      async (newModel) => {
-        // Ser / DeSer to ensure we have a fresh copy
-        newModel = JSON.parse(JSON.stringify(newModel));
-
-        let chatModelApiUrl = chatRef.value.model.apiUrl;
-        if (chatModelApiUrl !== newModel.apiUrl) {
-          // We have a new model, so update local and stored state
-          chatRef.value.model = newModel;
-          await chatsStore.updateChatModel(chatRef.value.id, newModel);
-
-          // Send a notification
-          $q.notify(`Changing current chat model to ${newModel.name}`);
-        }
-      },
-    );
+/* Set chat on initial load */
 
-    /* Helper functions */
+setChat(route.params.id);
 
-    function addAttachment(attachmentEvent) {
-      let attachment = JSON.parse(JSON.stringify(attachmentEvent));
-      attachmentsRef.value.push(attachment);
-    }
+/* Watchers */
 
-    async function removeAttachment(attachment) {
-      // Remove the attachment from the knowledge store
-      await knowledgeStore.removeDocument(attachment.documentId);
-      let index = attachmentsRef.value.indexOf(attachment);
-      attachmentsRef.value.splice(index, 1);
-    }
+// Update the chat when the route changes
+watch(
+  () => route.params.id,
+  async (newId) => {
+    await setChat(newId);
+  },
+);
 
-    // Set the name of the chat based on the first sentence
-    async function setChatName(first_sentence) {
-      // Get our chat id
-      let chatId = chatRef.value.id;
-      try {
-        const title = await inferChatTopic(first_sentence);
-        await chatsStore.updateChatTitle(chatId, title);
-        // Update the chat title state
-        chatRef.value.title = title;
-      } catch (error) {
-        console.error('pages::Chat.vue::setChatName - error', error);
-      }
+// Update whether we should show the knowledge uploader based on whether the user is connected
+watch(
+  () => account.active,
+  (active) => {
+    enableKnowledgeRef.value = active;
+  },
+);
+
+// Update the chat model when the selected model changes
+watch(
+  () => modelsStore.selectedModel,
+  async (newModel) => {
+    // Ser / DeSer to ensure we have a fresh copy
+    newModel = JSON.parse(JSON.stringify(newModel));
+
+    let chatModelApiUrl = chatRef.value.model.apiUrl;
+    if (chatModelApiUrl !== newModel.apiUrl) {
+      // We have a new model, so update local and stored state
+      chatRef.value.model = newModel;
+      await chatsStore.updateChatModel(chatRef.value.id, newModel);
+
+      // Send a notification
+      $q.notify(`Changing current chat model to ${newModel.name}`);
     }
+  },
+);
+
+/* Helper functions */
+
+function addAttachment(attachmentEvent) {
+  let attachment = JSON.parse(JSON.stringify(attachmentEvent));
+  attachmentsRef.value.push(attachment);
+}
+
+async function removeAttachment(attachment) {
+  // Remove the attachment from the knowledge store
+  await knowledgeStore.removeDocument(attachment.documentId);
+  let index = attachmentsRef.value.indexOf(attachment);
+  attachmentsRef.value.splice(index, 1);
+}
+
+// Set the name of the chat based on the first sentence
+async function setChatName(first_sentence) {
+  // Get our chat id
+  let chatId = chatRef.value.id;
+  try {
+    const title = await inferChatTopic(first_sentence);
+    await chatsStore.updateChatTitle(chatId, title);
+    // Update the chat title state
+    chatRef.value.title = title;
+  } catch (error) {
+    console.error('pages::Chat.vue::setChatName - error', error);
+  }
+}
 
-    // Scroll to the bottom of the chat when new messages are added
-    async function scrollBottom() {
-      scrollAreaRef.value.lastElementChild.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
+// Scroll to the bottom of the chat when new messages are added
+async function scrollBottom() {
+  scrollAreaRef.value.lastElementChild.scrollIntoView({
+    behavior: 'smooth',
+    block: 'end',
+  });
+}
+
+// Generate a new response from the AI
+async function generatePersonaMessage() {
+  let chatId = chatRef.value.id;
+  let chatTags = chatRef.value.tags;
+  let messages = JSON.parse(JSON.stringify(messagesRef.value));
+  let persona = personaRef.value;
+  let username = usernameRef.value;
+  let model = chatRef.value.model;
+
+  // Create a new message to encapsulate our response
+  let response = {
+    role: persona.name,
+    content: '',
+    stopped: false,
+    error: null,
+  };
+
+  // And push it to the local state so that it renders
+  messagesRef.value = [...messagesRef.value, response];
+  chatRef.value.messages = messagesRef.value;
+
+  try {
+    // Set loading state
+    isLoadingRef.value = true;
+    hasResetRef.value = false;
+
+    // NOTE: assuming last message is guaranteed to be non-empty and the user's last message
+    // Get the last message from the user
+    let lastMessage = messages[messages.length - 1];
+    let searchResultMessages = [];
+    let searchResults = await knowledgeStore.searchDocuments(lastMessage.content, chatTags);
+    searchResults.forEach((result) => {
+      searchResultMessages.push({
+        role: 'search-result',
+        content: result.content,
       });
-    }
+    });
 
-    // Generate a new response from the AI
-    async function generatePersonaMessage() {
-      let chatId = chatRef.value.id;
-      let chatTags = chatRef.value.tags;
-      let messages = JSON.parse(JSON.stringify(messagesRef.value));
-      let persona = personaRef.value;
-      let username = usernameRef.value;
-      let model = chatRef.value.model;
-
-      // Create a new message to encapsulate our response
-      let response = {
-        role: persona.name,
-        content: '',
-        stopped: false,
-        error: null,
-      };
-
-      // And push it to the local state so that it renders
-      messagesRef.value = [...messagesRef.value, response];
-      chatRef.value.messages = messagesRef.value;
-
-      try {
-        // Set loading state
-        isLoadingRef.value = true;
-        hasResetRef.value = false;
-
-        // NOTE: assuming last message is guaranteed to be non-empty and the user's last message
-        // Get the last message from the user
-        let lastMessage = messages[messages.length - 1];
-        let searchResultMessages = [];
-        let searchResults = await knowledgeStore.searchDocuments(lastMessage.content, chatTags);
-        searchResults.forEach((result) => {
-          searchResultMessages.push({
-            role: 'search-result',
-            content: result.content,
-          });
-        });
-
-        // Expand all the messages to inline any compatible attachments
-        const expandedMessages = messages
-          .map((message) => {
-            let ret = [];
-            // Push any attachments ahead of the message
-            if (message.attachments) {
-              message.attachments.forEach((attachment) => {
-                if (attachment.content) {
-                  ret.push({
-                    role: 'attachment',
-                    content: `[${attachment.title}](${attachment.content})`,
-                  });
-                } else if (attachment.documentId) {
-                  ret.push({
-                    role: 'attachment',
-                    content: `[${attachment.title}](document-id-${attachment.documentId})`,
-                  });
-                }
+    // Expand all the messages to inline any compatible attachments
+    const expandedMessages = messages
+      .map((message) => {
+        let ret = [];
+        // Push any attachments ahead of the message
+        if (message.attachments) {
+          message.attachments.forEach((attachment) => {
+            if (attachment.content) {
+              ret.push({
+                role: 'attachment',
+                content: `[${attachment.title}](${attachment.content})`,
               });
-            }
-
-            // Push what search results we found based on the message
-            // TODO: this should probably be a more generic tool-call or llm-chain-link
-            // TODO: this should probably link back to the document id
-            // TODO: I should probably write these below messages in the log
-            //  Really these search results should get attached to the message that
-            //   lead to them being queried
-            if (message.searchResults) {
-              message.searchResults.forEach((result) => {
-                ret.push({
-                  role: 'search-result',
-                  content: result.content,
-                });
+            } else if (attachment.documentId) {
+              ret.push({
+                role: 'attachment',
+                content: `[${attachment.title}](document-id-${attachment.documentId})`,
               });
             }
-            // Push the message itself
-            ret.push(message);
-            return ret;
-          })
-          .flat();
-
-        // Append the search results to the messages
-        const allMessages = [...expandedMessages, ...searchResultMessages];
-
-        // Generate a stream of responses from the AI
-        for await (const output of inferenceEngine.generateAnswer(
-          allMessages,
-          model,
-          persona,
-          // Set the target to the user
-          username,
-          // set to false to disable logging
-          false,
-        )) {
-          let stopped = output.stopped;
-          let content = output.content;
-          if (!stopped) {
-            content += ' *[writing ...]*';
-          }
-          // Update the local state include updates
-          response.content = content;
-          response.stopped = stopped;
-
-          messagesRef.value = [...messagesRef.value];
-          // Scroll to the bottom of the chat
-          nextTick(scrollBottom);
+          });
         }
-        // A successful response! Append the chat to long term storage.
-        await chatsStore.appendModelResponse(chatId, response.content, searchResults);
-      } catch (error) {
-        console.error('pages::Chat.vue::generatePersonaMessage - error', error);
-        response.error = error;
-      } finally {
-        // Done! update the local state to reflect the end of the process
-        isLoadingRef.value = false;
-        hasResetRef.value = false;
-        messagesRef.value = [...messagesRef.value];
-      }
-    }
 
-    // TODO: arbitrary message regeneration
-    // Regenerate the last message from the AI
-    async function regenerateMessage() {
-      // we discard the last message if it's from the AI, and regenerate
-      const lastMessage = messagesRef.value[messagesRef.value.length - 1];
-      if (lastMessage.role !== usernameRef.value) {
-        let chatId = chatRef.value.id;
-        // Update the local state
-        messagesRef.value.pop();
-        messagesRef.value = [...messagesRef.value];
-        chatRef.value.messages = messagesRef.value;
-        // Update the chat state
-        await chatsStore.popChatMessages(chatId);
+        // Push what search results we found based on the message
+        // TODO: this should probably be a more generic tool-call or llm-chain-link
+        // TODO: this should probably link back to the document id
+        // TODO: I should probably write these below messages in the log
+        //  Really these search results should get attached to the message that
+        //   lead to them being queried
+        if (message.searchResults) {
+          message.searchResults.forEach((result) => {
+            ret.push({
+              role: 'search-result',
+              content: result.content,
+            });
+          });
+        }
+        // Push the message itself
+        ret.push(message);
+        return ret;
+      })
+      .flat();
+
+    // Append the search results to the messages
+    const allMessages = [...expandedMessages, ...searchResultMessages];
+
+    // Generate a stream of responses from the AI
+    for await (const output of inferenceEngine.generateAnswer(
+      allMessages,
+      model,
+      persona,
+      // Set the target to the user
+      username,
+      // set to false to disable logging
+      false,
+    )) {
+      let stopped = output.stopped;
+      let content = output.content;
+      if (!stopped) {
+        content += ' *[writing ...]*';
       }
-      await generatePersonaMessage();
-    }
-
-    async function sendMessage(content) {
-      let chatId = chatRef.value.id;
-      let inputText = inputTextRef.value;
-      const attachments = JSON.parse(JSON.stringify(attachmentsRef.value));
-
-      // Wipe the input text
-      inputTextRef.value = '';
-      // Wipe the attachments
-      attachmentsRef.value = [];
+      // Update the local state include updates
+      response.content = content;
+      response.stopped = stopped;
 
+      messagesRef.value = [...messagesRef.value];
+      // Scroll to the bottom of the chat
       nextTick(scrollBottom);
+    }
+    // A successful response! Append the chat to long term storage.
+    await chatsStore.appendModelResponse(chatId, response.content, searchResults);
+  } catch (error) {
+    console.error('pages::Chat.vue::generatePersonaMessage - error', error);
+    response.error = error;
+  } finally {
+    // Done! update the local state to reflect the end of the process
+    isLoadingRef.value = false;
+    hasResetRef.value = false;
+    messagesRef.value = [...messagesRef.value];
+  }
+}
 
-      if (!content.trim()) return;
-
-      if (content.trim() === '') return;
-
-      // Append the new message to the chat history and push to local state
-      let newMessage = await chatsStore.appendUserMessage(chatId, inputText, attachments);
-      messagesRef.value.push({ ...newMessage, stopped: true, error: null });
-      chatRef.value.messages = messagesRef.value;
+// TODO: arbitrary message regeneration
+// Regenerate the last message from the AI
+async function regenerateMessage() {
+  // we discard the last message if it's from the AI, and regenerate
+  const lastMessage = messagesRef.value[messagesRef.value.length - 1];
+  if (lastMessage.role !== usernameRef.value) {
+    let chatId = chatRef.value.id;
+    // Update the local state
+    messagesRef.value.pop();
+    messagesRef.value = [...messagesRef.value];
+    chatRef.value.messages = messagesRef.value;
+    // Update the chat state
+    await chatsStore.popChatMessages(chatId);
+  }
+  await generatePersonaMessage();
+}
 
-      // Scroll to the bottom of the chat
-      nextTick(scrollBottom);
+async function sendMessage(content) {
+  let chatId = chatRef.value.id;
+  let inputText = inputTextRef.value;
+  const attachments = JSON.parse(JSON.stringify(attachmentsRef.value));
 
-      // Generate a response from the AI
-      await generatePersonaMessage();
-    }
+  // Wipe the input text
+  inputTextRef.value = '';
+  // Wipe the attachments
+  attachmentsRef.value = [];
 
-    // Set a chat by its ID
-    async function setChat(chatId) {
-      // This is annoying but we need to set whether the user is connected
-      enableKnowledgeRef.value = account.active;
-
-      // Load the chat from the store and set it
-      chatRef.value = await chatsStore.readChat(chatId);
-      if (!chatRef.value) {
-        console.error('pages::Chat.vue::setChat - chat not found');
-        await router.push({ name: 'new-chat' });
-        return;
-      }
+  nextTick(scrollBottom);
 
-      personasStore.persona = chatRef.value.persona;
-      // Extract the chat properties
-      let title = chatRef.value.title;
-      let username = chatRef.value.username;
-      // Load messages, mapping over with additional properties we need in the UI
-      let messages = chatRef.value.messages.map((message) => {
-        // Set stopped to true
-        message.stopped = true;
-        // Set error to null
-        message.error = null;
-        return message;
-      });
-      let persona = chatRef.value.persona;
+  if (!content.trim()) return;
 
-      // Set the selected model for the chat by its URL
-      let modelApiUrl = chatRef.value.model.apiUrl;
-      modelsStore.setModelByURL(modelApiUrl);
+  if (content.trim() === '') return;
 
-      // Set the local messages state
-      messagesRef.value = messages;
+  // Append the new message to the chat history and push to local state
+  let newMessage = await chatsStore.appendUserMessage(chatId, inputText, attachments);
+  messagesRef.value.push({ ...newMessage, stopped: true, error: null });
+  chatRef.value.messages = messagesRef.value;
 
-      // Set the local persona state
-      personaRef.value = persona;
+  // Scroll to the bottom of the chat
+  nextTick(scrollBottom);
 
-      // Set the local username state
-      usernameRef.value = username;
+  // Generate a response from the AI
+  await generatePersonaMessage();
+}
 
-      // Set the chat title if it's not set
-      if (title === defaultChatTopic || title === '') {
-        // Set the chat name based on the first message
-        setChatName(messages[0].content);
-      }
+// Set a chat by its ID
+async function setChat(chatId) {
+  // This is annoying but we need to set whether the user is connected
+  enableKnowledgeRef.value = account.active;
+
+  // Load the chat from the store and set it
+  chatRef.value = await chatsStore.readChat(chatId);
+  if (!chatRef.value) {
+    console.error('pages::Chat.vue::setChat - chat not found');
+    await router.push({ name: 'new-chat' });
+    return;
+  }
 
-      // Determine if there are messages we need to respond to
-      // NOTE: this is assuming all chats should be initiated by the user
-      if (messages.length % 2 === 1) {
-        await generatePersonaMessage();
-      }
-      nextTick(scrollBottom);
-    }
+  personasStore.persona = chatRef.value.persona;
+  // Extract the chat properties
+  let title = chatRef.value.title;
+  let username = chatRef.value.username;
+  // Load messages, mapping over with additional properties we need in the UI
+  let messages = chatRef.value.messages.map((message) => {
+    // Set stopped to true
+    message.stopped = true;
+    // Set error to null
+    message.error = null;
+    return message;
+  });
+  let persona = chatRef.value.persona;
+
+  // Set the selected model for the chat by its URL
+  let modelApiUrl = chatRef.value.model.apiUrl;
+  modelsStore.setModelByURL(modelApiUrl);
+
+  // Set the local messages state
+  messagesRef.value = messages;
+
+  // Set the local persona state
+  personaRef.value = persona;
+
+  // Set the local username state
+  usernameRef.value = username;
+
+  // Set the chat title if it's not set
+  if (title === defaultChatTopic || title === '') {
+    // Set the chat name based on the first message
+    setChatName(messages[0].content);
+  }
 
-    async function updateChatMessageContent(messageIndex, content, initialContent) {
-      let chatId = chatRef.value.id;
-      try {
-        await chatsStore.updateChatMessageContent(chatId, messageIndex, content);
-      } catch (error) {
-        console.error('pages::Chat.vue::updateChatMessageContent - error', error);
-        // Reset the content to the initial content
-        messagesRef.value[messageIndex].content = initialContent;
-        // Alert the user
-        $q.notify('Failed to update message content');
-      }
-    }
+  // Determine if there are messages we need to respond to
+  // NOTE: this is assuming all chats should be initiated by the user
+  if (messages.length % 2 === 1) {
+    await generatePersonaMessage();
+  }
+  nextTick(scrollBottom);
+}
 
-    async function copyMessage(message) {
-      await copyToClipboard(message.content);
-      $q.notify('Message copied to clipboard');
-    }
+async function updateChatMessageContent(messageIndex, content, initialContent) {
+  let chatId = chatRef.value.id;
+  try {
+    await chatsStore.updateChatMessageContent(chatId, messageIndex, content);
+  } catch (error) {
+    console.error('pages::Chat.vue::updateChatMessageContent - error', error);
+    // Reset the content to the initial content
+    messagesRef.value[messageIndex].content = initialContent;
+    // Alert the user
+    $q.notify('Failed to update message content');
+  }
+}
 
-    async function editMessage(message_id) {
-      this.enableEditRef = true;
+async function copyMessage(message) {
+  await copyToClipboard(message.content);
+  $q.notify('Message copied to clipboard');
+}
 
-      setTimeout(() => {
-        this.$refs[message_id][0].$el.click();
-      }, 50);
-    }
+async function editMessage(message_id) {
+  this.enableEditRef = true;
 
-    async function clearCookies() {
-      // Clear the slots
-      inferenceEngine.clearSlots();
-      // Clear the cookies from aleph
-      await axios.get('https://curated.aleph.cloud/change-pool', {
-        withCredentials: true,
-      });
-      // Set the reset flag
-      hasResetRef.value = true;
-    }
+  setTimeout(() => {
+    this.$refs[message_id][0].$el.click();
+  }, 50);
+}
 
-    function openKnowledgeUploader() {
-      showKnowledgeUploaderRef.value = true;
-    }
+async function clearCookies() {
+  // Clear the slots
+  inferenceEngine.clearSlots();
+  // Clear the cookies from aleph
+  await axios.get('https://curated.aleph.cloud/change-pool', {
+    withCredentials: true,
+  });
+  // Set the reset flag
+  hasResetRef.value = true;
+}
 
-    return {
-      scrollAreaRef,
-      chatRef,
-      messagesRef,
-      usernameRef,
-      personaRef,
-      isLoadingRef,
-      inputRef,
-      inputTextRef,
-      attachmentsRef,
-      addAttachment,
-      removeAttachment,
-      sendMessage,
-      showKnowledgeUploaderRef,
-      openKnowledgeUploader,
-      enableEditRef,
-      enableKnowledgeRef,
-      regenerateMessage,
-      updateChatMessageContent,
-      copyMessage,
-      editMessage,
-      chatId: route.params.id,
-    };
-  },
-});
+function openKnowledgeUploader() {
+  showKnowledgeUploaderRef.value = true;
+}
 </script>
 <style>
 /* Ensure message input expands to fill available space */
diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
index 31db5b8..ba785b5 100644
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -5,15 +5,9 @@
 
       <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
 
-      <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
+      <q-btn class="q-mt-xl" color="white" label="Go Home" no-caps text-color="blue" to="/" unelevated />
     </div>
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ErrorNotFound',
-});
-</script>
+<script></script>
diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index e6eadeb..9634736 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -30,57 +30,42 @@
   </q-layout>
 </template>
 
-<script>
-import { computed, defineComponent, ref } from 'vue';
+<script setup>
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { useKnowledgeStore } from 'src/stores/knowledge-store';
 
-export default defineComponent({
-  name: 'KnowledgeBasePage',
-  setup() {
-    const knowledgeStore = useKnowledgeStore();
+const knowledgeStore = useKnowledgeStore();
 
-    // Columns for the table displaying documents
-    const columns = [
-      { name: 'id', label: 'ID', field: 'id' },
-      { name: 'title', label: 'Title', field: 'title' },
-    ];
+// Columns for the table displaying documents
+const columns = [
+  { name: 'id', label: 'ID', field: 'id' },
+  { name: 'title', label: 'Title', field: 'title' },
+];
 
-    // Documents data source
-    const { documents } = storeToRefs(knowledgeStore);
+// Documents data source
+const { documents } = storeToRefs(knowledgeStore);
 
-    // Selected document
-    const selectedDocument = ref(null);
-    const selectedDocumentId = ref(null);
+// Selected document
+const selectedDocument = ref(null);
+const selectedDocumentId = ref(null);
 
-    // Edited document object
-    const editedDocument = ref({ title: '', description: '' });
+// Edited document object
+const editedDocument = ref({ title: '', description: '' });
 
-    // Form title based on whether we're adding or editing a document
-    const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
+// Form title based on whether we're adding or editing a document
+const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
 
-    // On row click event handler for the table
-    function onRowClick(evt, row) {
-      selectedDocumentId.value = row.id;
-    }
+// On row click event handler for the table
+function onRowClick(evt, row) {
+  selectedDocumentId.value = row.id;
+}
 
-    async function removeSelectedDocument() {
-      if (selectedDocumentId.value) {
-        await knowledgeStore.removeDocument(selectedDocumentId.value);
-        selectedDocumentId.value = null;
-      }
-    }
-
-    return {
-      columns,
-      documents,
-      selectedDocumentId,
-      editedDocument,
-      formTitle,
-      onRowClick,
-      removeSelectedDocument,
-    };
-  },
-});
+async function removeSelectedDocument() {
+  if (selectedDocumentId.value) {
+    await knowledgeStore.removeDocument(selectedDocumentId.value);
+    selectedDocumentId.value = null;
+  }
+}
 </script>
diff --git a/src/pages/NewChat.vue b/src/pages/NewChat.vue
index b5e9bda..daae009 100644
--- a/src/pages/NewChat.vue
+++ b/src/pages/NewChat.vue
@@ -23,109 +23,74 @@
       </div>
       <div class="fixed-bottom absolute q-mb-xl q-pb-xs">
         <message-input
-          @sendMessage="sendMessage"
-          v-model="messageInputRef"
           ref="input"
+          v-model="messageInputRef"
           hint="Disclaimer: This chat bot uses personas for entertainment and informational purposes only. The
               chat bot's responses are not a reflection of any real person or organization's views or opinions, and should not
               be used as a substitute for professional advice. The accuracy and reliability of the chat bot's responses cannot
               be guaranteed. Users should exercise their own judgment and discretion when interacting with the chat bot and
               its personas. By using this chat bot, you acknowledge and agree to these terms."
+          @sendMessage="sendMessage"
         />
       </div>
       <q-space />
     </div>
   </q-page>
 </template>
-<script>
+<script setup>
 import { defaultChatTopic } from 'src/utils/chat';
 
 // Import State
 import { useModelsStore } from 'src/stores/models-store';
 import { useChatsStore } from 'src/stores/chats-store';
 import { usePersonasStore } from 'src/stores/personas-store';
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 // Import components
 import MessageInput from 'src/components/MessageInput.vue';
 import PersonaDropDown from 'src/components/PersonaDropDown.vue';
 
-export default defineComponent({
-  name: 'NewChat',
-  components: {
-    MessageInput,
-    PersonaDropDown,
-  },
-  setup() {
-    const router = useRouter();
-
-    // Stored State
+const router = useRouter();
 
-    const modelsStore = useModelsStore();
-    const chatsStore = useChatsStore();
-    // TODO: We probably don't need to use a store for this
-    const personasStore = usePersonasStore();
+// Stored State
 
-    // Our local page state
+const modelsStore = useModelsStore();
+const chatsStore = useChatsStore();
+// TODO: We probably don't need to use a store for this
+const personasStore = usePersonasStore();
 
-    const usernameInputRef = ref('user');
-    // Message input state
-    const messageInputRef = ref('');
+// Our local page state
 
-    async function sendMessage() {
-      let message = messageInputRef.value;
-      if (message.length === 0) {
-        console.warn('page::NewChat::sendMessage: message is empty');
-        return;
-      }
+const usernameInputRef = ref('user');
+// Message input state
+const messageInputRef = ref('');
 
-      // Extract the values out of our relevant refs
-      let title = defaultChatTopic;
-      let username = usernameInputRef.value;
-      // NOTE: these are refs to the store, so we need to deep clone them
-      let model = JSON.parse(JSON.stringify(modelsStore.selectedModel));
-      let persona = JSON.parse(JSON.stringify(personasStore.persona));
+async function sendMessage() {
+  let message = messageInputRef.value;
+  if (message.length === 0) {
+    console.warn('page::NewChat::sendMessage: message is empty');
+    return;
+  }
 
-      // Reset the personas now that we have a deep clone of the selected persona
-      //personasStore.personas = personasClone;
-      // Creates the new chat
-      let chat = await chatsStore.createChat(title, username, model, persona);
-      // Append the first user message to the chat history
-      await chatsStore.appendUserMessage(chat.id, message);
+  // Extract the values out of our relevant refs
+  let title = defaultChatTopic;
+  let username = usernameInputRef.value;
+  // NOTE: these are refs to the store, so we need to deep clone them
+  let model = JSON.parse(JSON.stringify(modelsStore.selectedModel));
+  let persona = JSON.parse(JSON.stringify(personasStore.persona));
 
-      // Set the message to empty
-      messageInputRef.value = '';
-      // Navigate to the chat page
-      router.push({ name: 'chat', params: { id: chat.id } });
-    }
+  // Reset the personas now that we have a deep clone of the selected persona
+  //personasStore.personas = personasClone;
+  // Creates the new chat
+  let chat = await chatsStore.createChat(title, username, model, persona);
+  // Append the first user message to the chat history
+  await chatsStore.appendUserMessage(chat.id, message);
 
-    return {
-      usernameInputRef,
-      messageInputRef,
-      sendMessage,
-      modelsStore,
-      personasStore,
-      localSettings: {
-        temperature: 0.72,
-        maxLength: 100,
-      },
-    };
-  },
-});
-</script>
-<style scoped>
-/* scale in animation */
-.scale-in-enter,
-.scale-in-leave-to {
-  transform: scale(0.88);
-  opacity: 0;
-}
-
-.scale-in-enter-active,
-.scale-in-leave-active {
-  transition:
-    transform 0.3s,
-    opacity 0.5s;
+  // Set the message to empty
+  messageInputRef.value = '';
+  // Navigate to the chat page
+  router.push({ name: 'chat', params: { id: chat.id } });
 }
-</style>
+</script>
+<style scoped></style>
diff --git a/src/pages/PointsDetail.vue b/src/pages/PointsDetail.vue
index fe2c376..3e6cc0a 100644
--- a/src/pages/PointsDetail.vue
+++ b/src/pages/PointsDetail.vue
@@ -54,116 +54,102 @@
   </q-page>
 </template>
 
-<script>
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { usePoints } from '../stores/points';
 import { useAccount } from '../stores/account';
 import { ethers } from 'ethers';
 
-export default defineComponent({
-  name: 'PointsDetail',
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const points = usePoints();
-    const account = useAccount();
-    // got address as an address part from vue router
-    const address = ref(ethers.utils.getAddress(route.params.address));
-    let interval = null;
+const route = useRoute();
+const router = useRouter();
+const points = usePoints();
+const account = useAccount();
+// got address as an address part from vue router
+const address = ref(ethers.utils.getAddress(route.params.address));
+let interval = null;
 
-    onMounted(async () => {
-      if (Object.keys(points.points).length === 0) {
-        await points.update();
-        await updatePoints();
-      }
-      interval = setInterval(() => {
-        updatePoints();
-      }, 1000);
-    });
-
-    onBeforeUnmount(() => {
-      clearInterval(interval);
-    });
-
-    watch(
-      () => route.params.address,
-      async (newAddress) => {
-        address.value = ethers.utils.getAddress(newAddress);
-      },
-    );
-    watch(
-      () => account.address,
-      async (newAddress, oldAddress) => {
-        if (oldAddress == address.value) {
-          router.push({
-            name: 'points-detail',
-            params: { address: newAddress },
-          });
-        }
-      },
-    );
+onMounted(async () => {
+  if (Object.keys(points.points).length === 0) {
+    await points.update();
+    await updatePoints();
+  }
+  interval = setInterval(() => {
+    updatePoints();
+  }, 1000);
+});
 
-    const currentPendingPoints = ref(0);
-    const hourlyRate = ref(0);
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 
-    async function updatePoints() {
-      const pendingInfo = await points.getAddressRealtimePendingPointsInfo(address.value);
-      hourlyRate.value = pendingInfo.hourlyRate;
-      currentPendingPoints.value = pendingInfo.pending;
+watch(
+  () => route.params.address,
+  async (newAddress) => {
+    address.value = ethers.utils.getAddress(newAddress);
+  },
+);
+watch(
+  () => account.address,
+  async (newAddress, oldAddress) => {
+    if (oldAddress == address.value) {
+      router.push({
+        name: 'points-detail',
+        params: { address: newAddress },
+      });
     }
+  },
+);
 
-    const ThreeYearsPoints = computed(() => {
-      const currentTime = Math.floor(Date.now() / 1000); // Get current timestamp in seconds
-      const pendingPoints = points.getAddressPendingPoints(address.value);
-      const currentPoints = points.getAddressPoints(address.value);
-      const firstTime = points.info.first_time;
-      const lastTime = points.info.last_time;
-      const pendingTime = points.info.pending_time;
-      const reward_start = points.info.reward_start;
-      const totalDuration = pendingTime - lastTime;
-      const currentTimeSinceStart = currentTime - reward_start;
-      const daily_decay = points.info.daily_decay;
-      const initial_ratio = points.info.ratio;
+const currentPendingPoints = ref(0);
+const hourlyRate = ref(0);
 
-      const current_decay = daily_decay ** (currentTimeSinceStart / 86400);
-      const current_ratio = initial_ratio * current_decay;
-      // we extrapolate on what would a 10 days distribution be
-      let current_base = ((pendingPoints / totalDuration) * 3600 * 24 * 10) / current_ratio;
-      if (current_base < 0) {
-        // something is fishy
-        current_base = ((currentPoints / (lastTime - firstTime)) * 3600 * 24 * 10) / current_ratio;
-      }
+async function updatePoints() {
+  const pendingInfo = await points.getAddressRealtimePendingPointsInfo(address.value);
+  hourlyRate.value = pendingInfo.hourlyRate;
+  currentPendingPoints.value = pendingInfo.pending;
+}
 
-      const distributions = (365 * 3) / 10;
-      let total = currentPoints;
-      for (let i = 0; i < distributions; i++) {
-        const time = reward_start + i * 10 * 24 * 3600;
-        // if time is less than last time, we pass
-        if (time < lastTime) {
-          continue;
-        }
-        // code in python:
-        // days_since_start = (reward_time - settings['reward_start_ts']) / 86400
-        // print(f"Processing rewards for {reward_time} ({days_since_start} days since start)")
-        // decay = settings['daily_decay'] ** int((reward_time - settings['reward_start_ts']) / 86400)
+const ThreeYearsPoints = computed(() => {
+  const currentTime = Math.floor(Date.now() / 1000); // Get current timestamp in seconds
+  const pendingPoints = points.getAddressPendingPoints(address.value);
+  const currentPoints = points.getAddressPoints(address.value);
+  const firstTime = points.info.first_time;
+  const lastTime = points.info.last_time;
+  const pendingTime = points.info.pending_time;
+  const reward_start = points.info.reward_start;
+  const totalDuration = pendingTime - lastTime;
+  const currentTimeSinceStart = currentTime - reward_start;
+  const daily_decay = points.info.daily_decay;
+  const initial_ratio = points.info.ratio;
 
-        const days_since_start = (time - reward_start) / 86400;
-        const decay = daily_decay ** days_since_start;
-        const ratio = initial_ratio * decay;
-        total += current_base * ratio;
-      }
-      return total;
-    });
+  const current_decay = daily_decay ** (currentTimeSinceStart / 86400);
+  const current_ratio = initial_ratio * current_decay;
+  // we extrapolate on what would a 10 days distribution be
+  let current_base = ((pendingPoints / totalDuration) * 3600 * 24 * 10) / current_ratio;
+  if (current_base < 0) {
+    // something is fishy
+    current_base = ((currentPoints / (lastTime - firstTime)) * 3600 * 24 * 10) / current_ratio;
+  }
 
-    // const count = ref(0)
-    return {
-      points,
-      address,
-      currentPendingPoints,
-      hourlyRate,
-      ThreeYearsPoints,
-    };
-  },
+  const distributions = (365 * 3) / 10;
+  let total = currentPoints;
+  for (let i = 0; i < distributions; i++) {
+    const time = reward_start + i * 10 * 24 * 3600;
+    // if time is less than last time, we pass
+    if (time < lastTime) {
+      continue;
+    }
+    // code in python:
+    // days_since_start = (reward_time - settings['reward_start_ts']) / 86400
+    // print(f"Processing rewards for {reward_time} ({days_since_start} days since start)")
+    // decay = settings['daily_decay'] ** int((reward_time - settings['reward_start_ts']) / 86400)
+
+    const days_since_start = (time - reward_start) / 86400;
+    const decay = daily_decay ** days_since_start;
+    const ratio = initial_ratio * decay;
+    total += current_base * ratio;
+  }
+  return total;
 });
 </script>
diff --git a/src/pages/PointsInfo.vue b/src/pages/PointsInfo.vue
index eb90f8a..f2969ba 100644
--- a/src/pages/PointsInfo.vue
+++ b/src/pages/PointsInfo.vue
@@ -107,53 +107,38 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, nextTick, onMounted, ref } from 'vue';
+<script setup>
+import { nextTick, onMounted, ref } from 'vue';
 import { usePoints } from '../stores/points';
 import { ethers } from 'ethers';
 
-export default defineComponent({
-  name: 'PointsInfo',
-  setup() {
-    const expanded = ref(false);
-    const points = usePoints();
-    const address = ref('');
-    onMounted(async () => {
-      if (Object.keys(points.points).length === 0) {
-        points.update();
-      }
-    });
+const points = usePoints();
+const address = ref('');
+onMounted(async () => {
+  if (Object.keys(points.points).length === 0) {
+    points.update();
+  }
+});
 
-    function addressVerifier(val) {
-      // Throws if a checksummed address is provided, but a
-      // letter is the wrong case
-      try {
-        const addr = ethers.utils.getAddress(val);
-        if (addr !== val) {
-          nextTick(() => {
-            address.value = addr;
-          });
-        }
-        return true;
-      } catch (e) {
-        return 'Invalid address';
-      }
+function addressVerifier(val) {
+  // Throws if a checksummed address is provided, but a
+  // letter is the wrong case
+  try {
+    const addr = ethers.utils.getAddress(val);
+    if (addr !== val) {
+      nextTick(() => {
+        address.value = addr;
+      });
     }
+    return true;
+  } catch (e) {
+    return 'Invalid address';
+  }
+}
 
-    // points.points is an object, let's check if it's empty
-
-    // const count = ref(0)
-    return {
-      points,
-      expanded,
-      address,
-      addressVerifier,
-      addressRules: [
-        addressVerifier,
-        (val) => (val && val.length > 0) || 'Please type something',
-        (val) => (val && val.length > 0) || 'Please type something',
-      ],
-    };
-  },
-});
+const addressRules = [
+  addressVerifier,
+  (val) => (val && val.length > 0) || 'Please type something',
+  (val) => (val && val.length > 0) || 'Please type something',
+];
 </script>

From ed225c94d3b8059f1b590fe0dcc66c6c08c1478d Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 22:40:35 +0200
Subject: [PATCH 09/11] fix: Lint

---
 .eslintrc.cjs               |  2 ++
 src/pages/KnowledgeBase.vue | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7a1afa8..0a85c44 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -60,5 +60,7 @@ module.exports = {
 
     // allow debugger during development only
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+
+    "vue/multi-word-component-names": "off"
   },
 };
diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index 9634736..428647e 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { useKnowledgeStore } from 'src/stores/knowledge-store';
@@ -39,23 +39,23 @@ import { useKnowledgeStore } from 'src/stores/knowledge-store';
 const knowledgeStore = useKnowledgeStore();
 
 // Columns for the table displaying documents
-const columns = [
-  { name: 'id', label: 'ID', field: 'id' },
-  { name: 'title', label: 'Title', field: 'title' },
-];
+// const columns = [
+//   { name: 'id', label: 'ID', field: 'id' },
+//   { name: 'title', label: 'Title', field: 'title' },
+// ];
 
 // Documents data source
 const { documents } = storeToRefs(knowledgeStore);
 
 // Selected document
-const selectedDocument = ref(null);
+// const selectedDocument = ref(null);
 const selectedDocumentId = ref(null);
 
 // Edited document object
-const editedDocument = ref({ title: '', description: '' });
+// const editedDocument = ref({ title: '', description: '' });
 
 // Form title based on whether we're adding or editing a document
-const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
+// const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
 
 // On row click event handler for the table
 function onRowClick(evt, row) {

From e92260c942ed274cbbd6990e41243cdfb7219d59 Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 22:41:42 +0200
Subject: [PATCH 10/11] fix: Remove unused prop

---
 src/pages/KnowledgeBase.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/KnowledgeBase.vue b/src/pages/KnowledgeBase.vue
index 428647e..5fac36b 100644
--- a/src/pages/KnowledgeBase.vue
+++ b/src/pages/KnowledgeBase.vue
@@ -11,7 +11,7 @@
       <div class="row justify-center q-pa-md">
         <div class="col-lg-8 col-sm-12">
           <q-list>
-            <q-item v-for="document in documents" :key="document.id" clickable @click="onRowClick($event, document)">
+            <q-item v-for="document in documents" :key="document.id" clickable @click="onRowClick(document)">
               <q-item-section>
                 <q-item-label>{{ document.title }}</q-item-label>
               </q-item-section>
@@ -58,7 +58,7 @@ const selectedDocumentId = ref(null);
 // const formTitle = computed(() => (selectedDocument.value ? 'Edit Document' : 'Add Document'));
 
 // On row click event handler for the table
-function onRowClick(evt, row) {
+function onRowClick(row) {
   selectedDocumentId.value = row.id;
 }
 

From 9af7a71dc4e5ddb51f77bb66574d9d7162293c4b Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Fri, 31 May 2024 22:49:08 +0200
Subject: [PATCH 11/11] fix: Earn button design

---
 src/layouts/MainLayout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 37772e2..25ca373 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -42,7 +42,7 @@
           <q-btn
             v-if="!account.active"
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
-            :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
+            :icon="$q.screen.gt.sm ? undefined : 'img:icons/svg/star.svg'"
             :label="$q.screen.gt.sm ? 'Earn Points' : ''"
             no-caps
             rounded
@@ -53,7 +53,7 @@
           <q-btn
             v-else
             :class="$q.screen.gt.sm ? 'btn-gradient' : 'float-right q-pa-sm'"
-            :icon="$q.screen.gt.sm ? '' : 'img:icons/svg/star.svg'"
+            :icon="$q.screen.gt.sm ? undefined : 'img:icons/svg/star.svg'"
             :text-color="$q.screen.gt.sm ? 'white' : 'black'"
             :to="{
               name: 'points-detail',