feat(chats): Migration setup

package.json

@@ -23,10 +23,10 @@
     "@aleph-sdk/client": "^1.0.6",
     "@aleph-sdk/ethereum": "^1.0.3",
     "@aleph-sdk/message": "^1.0.7",
-    "@libertai/libertai-js": "file:../libertai-js/libertai-libertai-js-0.0.8.tgz",
+    "@libertai/libertai-js": "0.0.8",
     "@quasar/extras": "^1.16.12",
     "@tanstack/vue-query": "^5.51.9",
-    "@wagmi/vue": "^0.0.30",
+    "@wagmi/vue": "^0.0.31",
     "axios": "^1.7.2",
     "dompurify": "^3.1.6",
     "highlight.js": "^11.10.0",

src/pages/Chat.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page class="column align-items-center">
+  <q-page v-if="chatRef" class="column align-items-center">
     <div ref="scrollAreaRef" class="col-grow overflow-auto" style="max-height: calc(100vh - 190px)">
       <!-- Display message history -->
       <q-list class="col-grow q-ma-xl">
@@ -166,7 +166,7 @@ import { defaultChatTopic, inferChatTopic } from 'src/utils/chat';
 import { LlamaCppApiEngine, Message } from '@libertai/libertai-js';
 
 // Local state
-import { Chat, UIMessage, useChatsStore } from 'stores/chats';
+import { useChatsStore } from 'stores/chats';
 import { useModelsStore } from 'stores/models';
 import { useKnowledgeStore } from 'stores/knowledge';
 import { usePersonasStore } from 'stores/personas';
@@ -177,6 +177,7 @@ import MessageInput from 'src/components/MessageInput.vue';
 import axios from 'axios';
 import { getPersonaAvatarUrl } from 'src/utils/personas';
 import { useSettingsStore } from 'stores/settings';
+import { Chat, UIMessage } from 'src/types/chats';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -327,7 +328,6 @@ async function generatePersonaMessage() {
     let searchResults = await knowledgeStore.searchDocuments(lastMessage.content, chatTags);
     searchResults.forEach((result) => {
       searchResultMessages.push({
-        author: 'ai', // TODO: maybe another author here
         role: 'search-result',
         content: result.content,
       });
@@ -483,6 +483,8 @@ async function setChat(chatId: string) {
   // TODO: these should already be there ?
   loadedChat.messages = loadedChat.messages.map((message) => ({ ...message, stopped: true, error: null }));
 
+  chatRef.value = loadedChat;
+
   // Set the selected model for the chat by its URL
   const modelApiUrl = loadedChat.model.apiUrl;
   modelsStore.setModelByURL(modelApiUrl);
@@ -493,8 +495,6 @@ async function setChat(chatId: string) {
     await setChatName(loadedChat.messages[0].content);
   }
 
-  chatRef.value = loadedChat;
-
   // Determine if there are messages we need to respond to
   // NOTE: this is assuming all chats should be initiated by the user
   if (loadedChat.messages.length % 2 === 1) {

src/pages/NewChat.vue

@@ -67,21 +67,21 @@ const username = useSettingsStore().username;
 const messageInputRef = ref('');
 
 async function sendMessage() {
-  let message = messageInputRef.value;
+  const message = messageInputRef.value;
   if (message.length === 0) {
     return;
   }
 
   // Extract the values out of our relevant refs
-  let title = defaultChatTopic;
+  const title = defaultChatTopic;
   // 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));
+  const model = JSON.parse(JSON.stringify(modelsStore.selectedModel));
+  const persona = JSON.parse(JSON.stringify(personasStore.persona));
 
   // 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);
+  const chat = await chatsStore.createChat(title, username, model, persona);
   // Append the first user message to the chat history
   await chatsStore.appendUserMessage(chat.id, message);
 

src/pages/PersonaManagement.vue

@@ -121,13 +121,14 @@ import { usePersonasStore } from 'stores/personas';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { v4 as uuidv4 } from 'uuid';
-import { getPersonaAvatarUrl, UIPersona } from 'src/utils/personas';
+import { getPersonaAvatarUrl } from 'src/utils/personas';
 import PersonaDialog from 'src/components/PersonaDialog.vue';
 import { useAccountStore } from 'stores/account';
 import { exportFile } from 'quasar';
 import { getTokenGatingMessage } from 'src/utils/messages';
 import { z } from 'zod';
 import { BasePersonaDialogProp } from 'components/PersonaDialog.vue';
+import { UIPersona } from 'src/types/personas';
 
 const personasStore = usePersonasStore();
 const accountStore = useAccountStore();
@@ -218,9 +219,8 @@ const importPersona = (event: Event) => {
     }
 
     const avatar = typeof parsedFile.data.data.avatar === 'string' ? undefined : parsedFile.data.data.avatar;
-    const personaData = { ...parsedFile.data.data, avatar };
 
-    basePersonaCreate.value = personaData;
+    basePersonaCreate.value = { ...parsedFile.data.data, avatar };
     createPersona.value = true;
   };
   reader.readAsText(file);

src/stores/chats.ts

@@ -4,29 +4,14 @@ import { defineStore } from 'pinia';
 import { defaultModels } from 'src/utils/models';
 import { chatTag } from 'src/utils/chat';
 import idb from 'src/utils/idb';
-import { Message, Model } from '@libertai/libertai-js';
-import { UIPersona } from 'src/utils/personas';
+import { Model } from '@libertai/libertai-js';
+import { chatsMigrations } from 'src/utils/migrations/chats';
+import { Chat, ChatMigration, MinimalChat, UIMessage } from 'src/types/chats';
+import { UIPersona } from 'src/types/personas';
 
 const CHATS_STORE_NAME = 'chats-store';
 const CHATS_STORE_PINIA_KEY = 'chats-store-pinia-key';
 
-// TODO: clean this type and understand the added properties
-export type UIMessage = Message & { stopped?: boolean; error?: any; searchResults?: any; attachments?: any[] };
-
-export type Chat = {
-  id: string;
-  title: string;
-  username: string;
-  tags: string[];
-
-  model: Model;
-  persona: UIPersona;
-  messages: UIMessage[];
-  createdAt: Date;
-};
-
-type MinimalChat = Pick<Chat, 'id' | 'title' | 'createdAt'> & Partial<Chat>;
-
 /**
  * Representation of an attachment:
  * interface Attachment {
@@ -53,23 +38,44 @@ type MinimalChat = Pick<Chat, 'id' | 'title' | 'createdAt'> & Partial<Chat>;
  */
 
 type ChatsStoreState = {
+  version: number;
   chatsStore: ChatsStore;
   chats: MinimalChat[];
 };
 
 export const useChatsStore = defineStore(CHATS_STORE_PINIA_KEY, {
   state: (): ChatsStoreState => ({
+    // Current version of the migrations
+    version: 0, //  /!\ DO NOT UPDATE /!\, it should be done automatically when running migrations
+
     // Interface for our ChatsStore
     chatsStore: new ChatsStore(),
     // List of partials chats
     chats: [],
   }),
+  persist: {
+    paths: ['version'],
+  },
   actions: {
     async load() {
       // Update the models for all chats
       await this.chatsStore.updateModels(defaultModels);
       // Get the partial chats
       this.chats = await this.chatsStore.readChats();
+
+      try {
+        // Running migrations if needed
+        if (this.version < chatsMigrations.length) {
+          // Removing migrations already ran
+          const migrationsToRun = chatsMigrations.slice(this.version);
+          for (const migration of migrationsToRun) {
+            await this.chatsStore.runMigration(migration);
+          }
+        }
+        this.version = chatsMigrations.length;
+      } catch (error) {
+        console.error(`Chats: Running migrations starting from version ${this.version} failed: ${error}`);
+      }
     },
 
     async readChat(id: string) {
@@ -140,6 +146,17 @@ class ChatsStore {
     this.store = idb.createStore(CHATS_STORE_NAME);
   }
 
+  async runMigration(migration: ChatMigration) {
+    const updatedChats: Promise<Chat>[] = [];
+
+    await this.store.iterate((currentChat: Chat) => {
+      const newChat = migration(currentChat);
+      updatedChats.push(idb.put(currentChat.id, newChat, this.store));
+    });
+
+    await Promise.all(updatedChats);
+  }
+
   async updateModels(models: Model[]) {
     // Create an array for the updates we will resolve
     const updatedChats: Promise<Chat>[] = [];

src/types/chats.ts

@@ -0,0 +1,27 @@
+import { Message, Model } from '@libertai/libertai-js';
+import { UIPersona } from 'src/types/personas';
+
+// TODO: clean this type and understand the added properties
+export type UIMessage = Message & {
+  stopped?: boolean;
+  error?: any;
+  searchResults?: any;
+  attachments?: any[];
+  author: 'user' | 'ai';
+};
+
+export type Chat = {
+  id: string;
+  title: string;
+  username: string;
+  tags: string[];
+
+  model: Model;
+  persona: UIPersona;
+  messages: UIMessage[];
+  createdAt: Date;
+};
+export type MinimalChat = Pick<Chat, 'id' | 'title' | 'createdAt'> & Partial<Chat>;
+
+// eslint-disable-next-line no-unused-vars
+export type ChatMigration = (currentChat: Chat) => Chat;

src/types/personas.ts

@@ -0,0 +1,12 @@
+import { Persona } from '@libertai/libertai-js';
+
+export type UIPersona = Persona & {
+  id: string;
+  avatar: {
+    item_hash: string;
+    ipfs_hash: string;
+  };
+  name: string;
+  allowEdit: boolean;
+  hidden: boolean;
+};

src/utils/chat.ts

@@ -1,4 +1,4 @@
-import { LlamaCppApiEngine } from '@libertai/libertai-js';
+import { LlamaCppApiEngine, Message } from '@libertai/libertai-js';
 
 import { modelDefaults, promptFormatDefaults } from './models';
 
@@ -28,7 +28,7 @@ const chatTopicPersona = {
     'You are a summary function provided with input. Provide an at most 5 word summary of the first sentence of the provided input for the purpose of determining menu item names',
 };
 
-const chatTopicExamples = [
+const chatTopicExamples: Message[] = [
   {
     role: 'input',
     content: 'Hello, can you please write a short hello world code for me?',
@@ -49,7 +49,7 @@ const chatTopicExamples = [
 
 export async function inferChatTopic(input: string) {
   const engine = new LlamaCppApiEngine();
-  const message = {
+  const message: Message = {
     role: 'input',
     content: input,
   };

src/utils/migrations/chats/chat_0.ts

@@ -0,0 +1,12 @@
+import { Chat, ChatMigration, UIMessage } from 'src/types/chats';
+
+export const chat_1_add_message_author: ChatMigration = (currentChat: Chat) => {
+  const messages = currentChat.messages.map((message): UIMessage => {
+    if (message.role === 'user') {
+      return { ...message, author: 'user' };
+    }
+    return { ...message, author: 'ai' };
+  });
+
+  return { ...currentChat, messages };
+};

src/utils/migrations/chats/index.ts

@@ -0,0 +1,4 @@
+import { ChatMigration } from 'src/types/chats';
+import { chat_1_add_message_author } from 'src/utils/migrations/chats/chat_0';
+
+export const chatsMigrations: ChatMigration[] = [chat_1_add_message_author];

src/utils/personas.ts

@@ -1,17 +1,6 @@
-// Configuration for base prompts for different types of chatbots
-import { Persona } from '@libertai/libertai-js';
-
-export type UIPersona = Persona & {
-  id: string;
-  avatar: {
-    item_hash: string;
-    ipfs_hash: string;
-  };
-  name: string;
-  allowEdit: boolean;
-  hidden: boolean;
-};
+import { UIPersona } from 'src/types/personas';
 
+// Configuration for base prompts for different types of chatbots
 export const defaultPersonas: UIPersona[] = [
   {
     id: '77d15394-d142-4e73-8251-48be48cee016',