Aleph persistent storage

package.json

@@ -20,9 +20,11 @@
     "build": "quasar build"
   },
   "dependencies": {
+    "@aleph-sdk/client": "^1.0.6",
+    "@aleph-sdk/ethereum": "^1.0.3",
+    "@aleph-sdk/message": "^1.0.7",
     "@libertai/libertai-js": "0.0.4",
     "@quasar/extras": "^1.16.11",
-    "aleph-sdk-ts": "^3.9.2",
     "axios": "^1.2.1",
     "buffer": "^6.0.3",
     "dompurify": "^3.0.9",
@@ -38,7 +40,8 @@
     "stream": "^0.0.2",
     "uuid": "^9.0.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "web3": "^4.9.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.3",
@@ -48,9 +51,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.24.0",
     "postcss": "^8.4.14",
-    "prettier": "^3.2.5"
-  },
-  "resolutions": {
-    "webpack": "^5.0.0"
+    "prettier": "^3.2.5",
+    "vite-plugin-node-polyfills": "^0.22.0"
   }
 }

quasar.config.js

@@ -9,6 +9,7 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
+const { nodePolyfills } = require('vite-plugin-node-polyfills');
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -27,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', 'axios'],
+    boot: ['utils'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
@@ -60,6 +61,11 @@ module.exports = configure(function (/* ctx */) {
           viteConf.build.commonjsOptions = {};
         }
         viteConf.build.commonjsOptions.transformMixedEsModules = true;
+
+        if (viteConf.plugins === undefined) {
+          viteConf.plugins = [];
+        }
+        viteConf.plugins = [...viteConf.plugins, nodePolyfills()];
       },
 
       // vueRouterBase,

src/components/AccountButton.vue

@@ -47,10 +47,10 @@
 
 <script setup>
 import { ethers } from 'ethers';
-import { useAccount } from 'stores/account';
+import { useAccountStore } from 'stores/account';
 import { usePoints } from 'stores/points';
 
-const account = useAccount();
+const account = useAccountStore();
 
 async function eth_web3_login() {
   const points = usePoints();

src/components/PersonaDialog.vue

@@ -6,8 +6,8 @@
         <q-space />
         <q-btn
           v-close-popup
-          flat
           :icon="`img:icons/svg/close${$q.dark.mode ? '_lighten' : ''}.svg`"
+          flat
           size="sm"
           unelevated
         />
@@ -21,19 +21,18 @@
         </q-card-section>
         <q-card-section>
           <label>Persona name</label>
-          <q-input v-model="personasStore.persona.name" bg-color="secondary" input-class="text-light q-px-sm" outlined>
-          </q-input>
+          <q-input v-model="personaName" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
         </q-card-section>
       </q-card-section>
 
       <q-card-section>
         <label>Your name</label>
-        <q-input v-model="username" bg-color="secondary" input-class="text-light q-px-sm" outlined> </q-input>
+        <q-input v-model="username" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
       </q-card-section>
       <q-card-section>
         <label>Persona Description</label>
         <q-input
-          v-model="personasStore.persona.description"
+          v-model="personaDescription"
           autogrow
           bg-color="secondary"
           input-class="text-light"
@@ -50,7 +49,7 @@
           label="Confirm"
           rounded
           text-color="white"
-          @click="updatePersona()"
+          @click="updatePersona"
         />
       </q-card-section>
     </q-card>
@@ -60,13 +59,19 @@
 <script setup>
 import { usePersonasStore } from 'src/stores/personas-store';
 import { useSettingsStore } from 'src/stores/settings';
-import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
 
 const personasStore = usePersonasStore();
-const settings = useSettingsStore();
-const { username } = storeToRefs(settings);
+const settingsStore = useSettingsStore();
+
+// Form values
+const username = ref(settingsStore.username);
+const personaName = ref(personasStore.persona.name);
+const personaDescription = ref(personasStore.persona.description);
 
 function updatePersona() {
-  // on update persona event
+  personasStore.persona.name = personaName;
+  personasStore.persona.description = personaDescription;
+  settingsStore.update({ username: username.value });
 }
 </script>

src/components/ToggleTheme.vue

@@ -7,33 +7,25 @@
   />
 </template>
 
-<script>
+<script setup>
 import { useSettingsStore } from 'src/stores/settings';
-import { defineComponent, ref, watch } from 'vue';
+import { ref, toRef, watch } from 'vue';
 import { useQuasar } from 'quasar';
 
-export default defineComponent({
-  name: 'ToggleTheme',
-  setup() {
-    const settings = useSettingsStore();
-    const $q = useQuasar();
-    console.log('settings', settings.darkmode);
-    const darkmode = ref(settings.darkmode);
-    $q.dark.set(settings.darkmode);
-    console.log('Dark mode', $q.dark.isActive); // true, false
+const settings = useSettingsStore();
+const $q = useQuasar();
+const darkmode = ref(settings.darkmode);
+$q.dark.set(settings.darkmode);
 
-    watch(
-      () => darkmode.value,
-      async (value) => {
-        console.log('update storage');
-        //$q.dark.set(darkmode.value);
-        $q.dark.set(value);
-        settings.darkmode = value;
-      },
-    );
-    return {
-      darkmode,
-    };
-  },
+// Update the theme when the store value changes (might be updated by Aleph settings fetching)
+watch(toRef(settings, 'darkmode'), () => {
+  $q.dark.set(settings.darkmode);
 });
+
+watch(
+  () => darkmode.value,
+  async (value) => {
+    settings.update({ darkmode: value });
+  },
+);
 </script>

src/layouts/MainLayout.vue

@@ -3,7 +3,7 @@
     <q-header class="bg-transparent q-mt-sm">
       <q-toolbar>
         <q-btn aria-label="Menu" color="primary" dense flat icon="menu" round @click="toggleLeftDrawer" />
-        <q-btn flat @click="editPersona = true" class="q-pa-xs">
+        <q-btn class="q-pa-xs" flat @click="editPersona = true">
           <q-icon size="xs">
             <img :src="`icons/svg/settings${$q.dark.mode ? '_lighten' : ''}.svg`" />
           </q-icon>
@@ -56,16 +56,16 @@
     >
       <!-- image link with the logo -->
       <q-item class="q-mb-md text-left" clickable to="/">
-        <img alt="Libertai" :src="`icons/svg/libertai_full${$q.dark.mode ? '_lighten' : ''}.svg`" />
+        <img :src="`icons/svg/libertai_full${$q.dark.mode ? '_lighten' : ''}.svg`" alt="Libertai" />
       </q-item>
       <div class="q-mr-xl q-ml-md q-mt-md">
         <q-btn
           cclass="q-mx-xl q-my-xl border-primary-highlight text-semibold"
           class="border-primary-highlight"
-          text-color="dark-mode-text"
-          to="/new"
           no-caps
           rounded
+          text-color="dark-mode-text"
+          to="/new"
           unelevated
         >
           <q-icon class="text-dark" left size="xs">
@@ -75,7 +75,7 @@
         </q-btn>
       </div>
       <!-- list of chats by reference to the chats-store -->
-      <q-list style="flex-grow: 1" class="q-mt-md">
+      <q-list class="q-mt-md" style="flex-grow: 1">
         <q-scroll-area style="height: 100%; min-height: 100px" visible>
           <q-item
             v-for="chat of chats.slice().reverse()"
@@ -96,9 +96,9 @@
               </q-btn>
               <q-btn
                 v-if="route.params?.id != chat.id"
+                :icon="`img:icons/svg/msg${$q.dark.mode ? '_lighten' : ''}.svg`"
                 class="q-pa-xs"
                 flat
-                :icon="`img:icons/svg/msg${$q.dark.mode ? '_lighten' : ''}.svg`"
                 size="sm"
               >
               </q-btn>
@@ -170,7 +170,7 @@
         </q-item>
         <!-- powered by aleph.im -->
         <q-item clickable href="https://aleph.im" target="_blank">
-          <img alt="aleph.im" :src="`icons/svg/powered-by${$q.dark.mode ? '_lighten' : ''}.svg`" />
+          <img :src="`icons/svg/powered-by${$q.dark.mode ? '_lighten' : ''}.svg`" alt="aleph.im" />
         </q-item>
       </q-list>
     </q-drawer>
@@ -187,7 +187,7 @@ import { storeToRefs } from 'pinia';
 
 // Import State
 import { useChatsStore } from '../stores/chats-store';
-import { useAccount } from '../stores/account';
+import { useAccountStore } from '../stores/account';
 import { usePoints } from 'src/stores/points';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -206,7 +206,7 @@ const deleteChatId = ref(null);
 
 // Setup Stores
 const chatsStore = useChatsStore();
-const account = useAccount();
+const account = useAccountStore();
 const points = usePoints();
 
 const router = useRouter();

src/pages/Chat.vue

@@ -48,9 +48,9 @@
             <!-- Display the content of the message -->
             <q-item-label style="display: block">
               <MarkdownRenderer
+                :class="message.role == usernameRef ? '' : 'message-content'"
                 :content="message.content"
                 breaks
-                :class="message.role == usernameRef ? '' : 'message-content'"
               />
               <!-- Display the loading spinner if the message is still loading -->
               <q-spinner-bars v-if="!message.stopped && isLoadingRef" color="white" size="2em" />
@@ -76,18 +76,18 @@
             </q-btn>
             <!-- Allow copying the message to the clipboard -->
             <q-btn
+              :icon="`img:icons/svg/copy2${$q.dark.mode ? '_lighten' : ''}.svg`"
               dense
               flat
-              :icon="`img:icons/svg/copy2${$q.dark.mode ? '_lighten' : ''}.svg`"
               size="sm"
               @click="copyMessage(message)"
             >
               <q-tooltip>Copy</q-tooltip>
             </q-btn>
             <q-btn
+              :icon="`img:icons/svg/edit${$q.dark.mode ? '_lighten' : ''}.svg`"
               dense
               flat
-              :icon="`img:icons/svg/edit${$q.dark.mode ? '_lighten' : ''}.svg`"
               size="sm"
               @click="editMessage('message-' + message_index)"
             >
@@ -167,7 +167,7 @@ import { LlamaCppApiEngine } from '@libertai/libertai-js';
 import { useChatsStore } from 'src/stores/chats-store';
 import { useModelsStore } from 'src/stores/models-store';
 import { useKnowledgeStore } from 'src/stores/knowledge-store';
-import { useAccount } from 'src/stores/account';
+import { useAccountStore } from 'src/stores/account';
 import { usePersonasStore } from 'src/stores/personas-store';
 
 // Components
@@ -180,7 +180,7 @@ const route = useRoute();
 const router = useRouter();
 
 // App state
-const account = useAccount();
+const account = useAccountStore();
 const chatsStore = useChatsStore();
 const modelsStore = useModelsStore();
 const knowledgeStore = useKnowledgeStore();

src/pages/PointsDetail.vue

@@ -58,13 +58,13 @@
 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 { useAccountStore } from '../stores/account';
 import { ethers } from 'ethers';
 
 const route = useRoute();
 const router = useRouter();
 const points = usePoints();
-const account = useAccount();
+const account = useAccountStore();
 // got address as an address part from vue router
 const address = ref(ethers.utils.getAddress(route.params.address));
 let interval = null;