Merge branch 'feature/persistent-data' into qchat-updates-integration

qortal-ui-core/language/de.json

@@ -121,7 +121,12 @@
       "import":"Knoten Importieren",
       "export":"Knoten Exportieren",
       "deletecustomnode":"Alle benutzerdefinierten Knoten entfernen",
-      "warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt."
+      "warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt.",
+      "snack1":"Standardknoten erfolgreich gelöscht und hinzugefügt",
+      "snack2":"UI mit Knoten verbunden",
+      "snack3":"Benutzerdefinierter Knoten erfolgreich hinzugefügt und gespeichert",
+      "snack4":"Knoten erfolgreich gespeichert als",
+      "snack5":"Knoten erfolgreich importiert"
    },
    "appinfo":{
       "blockheight":"Blockhöhe",

qortal-ui-core/language/es.json

@@ -121,7 +121,12 @@
       "import":"Importar Nodos",
       "export":"Exportar Nodos",
       "deletecustomnode":"Eliminar todos los nodos personalizados",
-      "warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad."
+      "warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad.",
+      "snack1":"Nodos estándar eliminados y agregados con éxito",
+      "snack2":"UI conectada al nodo",
+      "snack3":"Nodo personalizado agregado y guardado con éxito",
+      "snack4":"Nodos guardados con éxito como",
+      "snack5":"Nodos importados con éxito"
    },
    "appinfo":{
       "blockheight":"Altura del Bloque",

qortal-ui-core/language/fr.json

@@ -121,7 +121,12 @@
       "import":"Importer des Noeuds",
       "export":"Exporter des Noeuds",
       "deletecustomnode":"Supprimer tous les noeuds personnalisés",
-      "warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde."
+      "warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde.",
+      "snack1":"Noeuds standard supprimés et ajoutés avec succès",
+      "snack2":"Interface utilisateur connectée au noeud",
+      "snack3":"Noeud personnalisé ajouté et enregistré avec succès",
+      "snack4":"Les noeuds ont été enregistrés avec succès sous",
+      "snack5":"Les noeuds ont été importés avec succès"
    },
    "appinfo":{
       "blockheight":"Hauteur de bloc",

qortal-ui-core/language/hindi.json

@@ -122,7 +122,12 @@
       "import":"आयात नोड्स",
       "export":"निर्यात नोड्स",
       "deletecustomnode":"सभी कस्टम नोड्स निकालें",
-      "warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।"
+      "warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।",
+      "snack1":"मानक नोड्स को सफलतापूर्वक हटा दिया गया और जोड़ा गया",
+      "snack2":"यूआई नोड से जुड़ा",
+      "snack3":"कस्टम नोड को सफलतापूर्वक जोड़ा और सहेजा गया",
+      "snack4":"नोड्स सफलतापूर्वक सहेजे गए",
+      "snack5":"नोड्स सफलतापूर्वक आयात किए गए"
    },
    "appinfo":{
       "blockheight":"ब्लॉक ऊँचाई",

qortal-ui-core/language/hr.json

@@ -121,7 +121,12 @@
       "import":"Uvoz Čvorovi",
       "export":"Izvozni Čvorovi",
       "deletecustomnode":"Ukloni sve prilagođene čvorove",
-      "warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije."
+      "warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije.",
+      "snack1":"Uspješno izbrisani i dodani standardni čvorovi",
+      "snack2":"UI spojen na čvor",
+      "snack3":"Uspješno dodan i spremljen prilagođeni čvor",
+      "snack4":"Čvorovi su uspješno spremljeni kao",
+      "snack5":"Čvorovi su uspješno uvezeni"
    },
    "appinfo":{
       "blockheight":"Visina bloka",

qortal-ui-core/language/hu.json

@@ -121,7 +121,12 @@
       "import":"Csomópontok Importálása",
       "export":"Csomópontok Exportálása",
       "deletecustomnode":"Távolítsa el az összes egyéni csomópontot",
-      "warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre."
+      "warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre.",
+      "snack1":"A szabványos csomópontok sikeresen törölve és hozzáadva",
+      "snack2":"UI csatlakozik a csomóponthoz",
+      "snack3":"Az egyéni csomópont sikeresen hozzáadva és mentve",
+      "snack4":"A csomópontok sikeresen mentve másként",
+      "snack5":"A csomópontok sikeresen importálva"
    },
    "appinfo":{
       "blockheight":"Blokk Magassága",

qortal-ui-core/language/it.json

@@ -121,7 +121,12 @@
       "import":"Importa Nodi",
       "export":"Esporta Nodi",
       "deletecustomnode":"Rimuovi tutti i nodi personalizzati",
-      "warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo."
+      "warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo.",
+      "snack1":"Nodi standard eliminati e aggiunti con successo",
+      "snack2":"Interfaccia utente collegata al nodo",
+      "snack3":"Nodo personalizzato aggiunto e salvato con successo",
+      "snack4":"Nodi salvati con successo come",
+      "snack5":"Nodi importati correttamente"
    },
    "appinfo":{
       "blockheight":"Altezza blocco",

qortal-ui-core/language/ko.json

@@ -121,7 +121,12 @@
       "import":"노드 가져오기",
       "export":"노드 내보내기",
       "deletecustomnode":"모든 사용자 정의 노드 제거",
-      "warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다."
+      "warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다.",
+      "snack1":"표준 노드를 성공적으로 삭제 및 추가했습니다.",
+      "snack2":"노드에 연결된 UI",
+      "snack3":"사용자 정의 노드를 성공적으로 추가하고 저장했습니다.",
+      "snack4":"노드가 다음으로 성공적으로 저장되었습니다",
+      "snack5":"노드를 성공적으로 가져왔습니다."
    },
    "appinfo":{
       "blockheight":"블록 높이",

qortal-ui-core/language/no.json

@@ -121,7 +121,12 @@
       "import":"Importer Noder",
       "export":"Eksporter Noder",
       "deletecustomnode":"Fjern alle egendefinerte noder",
-      "warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien."
+      "warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien.",
+      "snack1":"Slettet og lagt til standardnoder",
+      "snack2":"UI koblet til node",
+      "snack3":"Egendefinert node er lagt til og lagret",
+      "snack4":"Noder ble lagret som",
+      "snack5":"Noder ble importert"
    },
    "appinfo":{
       "blockheight":"Blokkhøyde",

qortal-ui-core/language/pl.json

@@ -121,7 +121,12 @@
       "import":"Importuj Węzły",
       "export":"Eksportuj Węzły",
       "deletecustomnode":"Usuń wszystkie niestandardowe węzły",
-      "warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe."
+      "warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe.",
+      "snack1":"Pomyślnie usunięto i dodano standardowe węzły",
+      "snack2":"Interfejs użytkownika połączony z węzłem",
+      "snack3":"Pomyślnie dodano i zapisano niestandardowy węzeł",
+      "snack4":"Węzły pomyślnie zapisane jako",
+      "snack5":"Węzły pomyślnie zaimportowane"
    },
    "appinfo":{
       "blockheight":"Wysokość bloku",

qortal-ui-core/language/pt.json

@@ -121,7 +121,12 @@
       "import":"Importar Nós",
       "export":"Exportar Nós",
       "deletecustomnode":"Remover todos os nós personalizados",
-      "warning":"Seus nós existentes serão excluídos e do backup será criado."
+      "warning":"Seus nós existentes serão excluídos e do backup será criado.",
+      "snack1":"Nós padrão excluídos e adicionados com sucesso",
+      "snack2":"UI conectada ao nó",
+      "snack3":"Nó personalizado adicionado e salvo com sucesso",
+      "snack4":"Nós salvos com sucesso como",
+      "snack5":"Nós importados com sucesso"
    },
    "appinfo":{
       "blockheight":"Altura do Bloco",

qortal-ui-core/language/ro.json

@@ -121,7 +121,12 @@
       "import":"Import Noduri",
       "export":"Export Noduri",
       "deletecustomnode":"Eliminati toate nodurile personalizate",
-      "warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi."
+      "warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi.",
+      "snack1":"Noduri standard au fost sterse si adaugate cu succes",
+      "snack2":"Interfata de utilizare conectata la nod",
+      "snack3":"Nod personalizat adaugat si salvat cu succes",
+      "snack4":"Nodurile au fost salvate cu succes ca",
+      "snack5":"Nodurile au fost importate cu succes"
    },
    "appinfo":{
       "blockheight":"Dimensiunea blocului",

qortal-ui-core/language/rs.json

@@ -121,7 +121,12 @@
       "import":"Uvoz Čvorova",
       "export":"Izvoz Čvorova",
       "deletecustomnode":"Uklonite sve prilagođene čvorove",
-      "warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi."
+      "warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi.",
+      "snack1":"Uspešno su izbrisani i dodati standardni čvorovi",
+      "snack2":"UI je povezan sa čvorom",
+      "snack3":"Uspešno dodat i sačuvan prilagođeni čvor",
+      "snack4":"Čvorovi su uspešno sačuvani kao",
+      "snack5":"Čvorovi su uspešno uvezeni"
    },
    "appinfo":{
       "blockheight":"Visina Bloka",

qortal-ui-core/language/ru.json

@@ -121,7 +121,12 @@
       "import":"Импорт Узлов",
       "export":"Экспорт Узлов",
       "deletecustomnode":"Удалить все пользовательские узлы",
-      "warning":"Существующие узлы будут удалены, а из резервной копии созданы новые."
+      "warning":"Существующие узлы будут удалены, а из резервной копии созданы новые.",
+      "snack1":"Успешно удалены и добавлены стандартные узлы",
+      "snack2":"Пользовательский интерфейс, подключенный к узлу",
+      "snack3":"Пользовательский узел успешно добавлен и сохранен",
+      "snack4":"Узлы успешно сохранены как",
+      "snack5":"Узлы успешно импортированы"
    },
    "appinfo":{
       "blockheight":"Высота блока",

qortal-ui-core/language/us.json

@@ -91,37 +91,42 @@
       "selectfile": "Select file",
       "dragfile": "Drag and drop backup here"
    },
-   "settings": {
+   "settings":{
-      "generalinfo": "General Account Info",
+      "generalinfo":"General Account Info",
-      "address": "Address",
+      "address":"Address",
-      "publickey": "Public Key",
+      "publickey":"Public Key",
-      "settings": "Settings",
+      "settings":"Settings",
-      "account": "Account",
+      "account":"Account",
-      "security": "Security",
+      "security":"Security",
-      "qr_login_menu_item": "QR Login",
+      "qr_login_menu_item":"QR Login",
-      "qr_login_description_1": "Scan this code to unlock your wallet on other device using the same password which you logged in with.",
+      "qr_login_description_1":"Scan this code to unlock your wallet on other device using the same password which you logged in with.",
-      "qr_login_description_2": "Choose a password which you will use to unlock your wallet on other device after scanning the QR code.",
+      "qr_login_description_2":"Choose a password which you will use to unlock your wallet on other device after scanning the QR code.",
-      "qr_login_button_1": "Show login QR code",
+      "qr_login_button_1":"Show login QR code",
-      "qr_login_button_2": "Generate login QR code",
+      "qr_login_button_2":"Generate login QR code",
-      "notifications": "Notifications",
+      "notifications":"Notifications",
-      "accountsecurity": "Account Security",
+      "accountsecurity":"Account Security",
-      "password": "Password",
+      "password":"Password",
-      "download": "Download Backup File",
+      "download":"Download Backup File",
-      "choose": "Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)",
+      "choose":"Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)",
-      "block": "Block Notifications (Coming Soon...)",
+      "block":"Block Notifications (Coming Soon...)",
-      "playsound": "Play Sound",
+      "playsound":"Play Sound",
-      "shownotifications": "Show Notifications",
+      "shownotifications":"Show Notifications",
-      "nodeurl": "Node Url",
+      "nodeurl":"Node Url",
-      "nodehint": "Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below",
+      "nodehint":"Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below",
-      "addcustomnode": "Add Custom Node",
+      "addcustomnode":"Add Custom Node",
-      "addandsave": "Add And Save",
+      "addandsave":"Add And Save",
-      "protocol": "Protocol",
+      "protocol":"Protocol",
-      "domain": "Domain",
+      "domain":"Domain",
-      "port": "Port",
+      "port":"Port",
-      "import": "Import Nodes",
+      "import":"Import Nodes",
-      "export": "Export Nodes",
+      "export":"Export Nodes",
-      "deletecustomnode": "Remove All Custom Nodes",
+      "deletecustomnode":"Remove All Custom Nodes",
-      "warning": "Your existing nodes will be deleted and from backup new created."
+      "warning":"Your existing nodes will be deleted and from backup new created.",
+      "snack1":"Successfully deleted and added standard nodes",
+      "snack2":"UI conected to node",
+      "snack3":"Successfully added and saved custom node",
+      "snack4":"Nodes successfully saved as",
+      "snack5":"Nodes successfully imported"
    },
    "appinfo": {
       "blockheight": "Block Height",

qortal-ui-core/language/zhc.json

@@ -121,7 +121,12 @@
       "import":"导入节点",
       "export":"导出节点",
       "deletecustomnode":"删除所有自定义节点",
-      "warning":"您现有的节点将被删除并从备份中创建新的。"
+      "warning":"您现有的节点将被删除并从备份中创建新的。",
+      "snack1":"成功删除和添加标准节点",
+      "snack2":"连接到节点的 UI",
+      "snack3":"成功添加并保存自定义节点",
+      "snack4":"节点成功保存为",
+      "snack5":"节点成功导入"
    },
    "appinfo":{
       "blockheight":"区块高度",

qortal-ui-core/language/zht.json

@@ -121,7 +121,12 @@
       "import":"導入節點",
       "export":"導出節點",
       "deletecustomnode":"刪除所有自定義節點",
-      "warning":"您現有的節點將被刪除並從備份中創建新的。"
+      "warning":"您現有的節點將被刪除並從備份中創建新的。",
+      "snack1":"成功刪除和添加標準節點",
+      "snack2":"連接到節點的 UI",
+      "snack3":"成功添加並保存自定義節點",
+      "snack4":"節點成功保存為",
+      "snack5":"節點成功導入"
    },
    "appinfo":{
       "blockheight":"區塊高度",

qortal-ui-plugins/package.json

@@ -19,7 +19,8 @@
   "dependencies": {
     "@material/mwc-list": "0.27.0",
     "@material/mwc-select": "0.27.0",
-    "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
+    "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
+    "localforage": "^1.10.0"
   },
   "devDependencies": {
     "@babel/core": "7.19.1",

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-
+import localForage from "localforage";
 registerTranslateConfig({
     loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 })
@@ -20,6 +20,10 @@ import '@material/mwc-button'
 import '@material/mwc-dialog'
 import '@material/mwc-icon'
 
+const messagesCache = localForage.createInstance({
+    name: "messages-cache",
+});
+
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class ChatPage extends LitElement {
@@ -229,9 +233,12 @@ class ChatPage extends LitElement {
         `
     }
 
-    firstUpdated() {
+    async firstUpdated() {
+        const keys = await messagesCache.keys()
+        console.log({ keys })
         // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
 
+
         // this.changeLanguage();
         this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
         this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@@ -340,6 +347,20 @@ class ChatPage extends LitElement {
         parentEpml.imReady();
     }
 
+    async updated(changedProperties) {
+        if (changedProperties.has('messagesRendered')) {
+            let data = {}
+            console.log('chatId', this._chatId)
+            console.log(this.isReceipient)
+            const chatReference1 = this.isReceipient ? 'direct' : 'group';
+            const chatReference2 = this._chatId
+            if (chatReference1 && chatReference2) {
+                await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
+            }
+
+        }
+    }
+
     changeLanguage() {
         const checkLanguage = localStorage.getItem('qortalLanguage')
 
@@ -380,28 +401,64 @@ class ChatPage extends LitElement {
 
     async getOldMessage(scrollElement) {
 
-        if (this._messages.length <= 15 && this._messages.length >= 1) { // 15 is the default number of messages...
 
-            let __msg = [...this._messages]
+
-            this._messages = []
+
-            this.messagesRendered = [...__msg, ...this.messagesRendered]
+        if (this.isReceipient) {
+            const getInitialMessages = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
+            });
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+
+                return this.decodeMessage(eachMessage)
+
+
+
+
+
+            })
+
+            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
             await this.getUpdateComplete();
 
             scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
-            return { oldMessages: __msg, scrollElement: scrollElement }
-        } else if (this._messages.length > 15) {
-            this.messagesRendered = [...this._messages.splice(this._messages.length - 15), ...this.messagesRendered]
-            await this.getUpdateComplete();
 
-            scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
-            return { oldMessages: this._messages.splice(this._messages.length - 15), scrollElement: scrollElement }
         } else {
+            const getInitialMessages = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
+            });
+
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+
+                return this.decodeMessage(eachMessage)
+
+
+
+
+
+            })
+
+            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
+            await this.getUpdateComplete();
+
+            scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
 
-            return false
         }
+
     }
 
     async processMessages(messages, isInitial) {
+
         if (isInitial) {
 
             this.messages = messages.map((eachMessage) => {
@@ -417,7 +474,10 @@ class ChatPage extends LitElement {
                 }
             })
 
-            this._messages = [...this.messages]
+            this._messages = [...this.messages].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
 
             const adjustMessages = () => {
 
@@ -427,46 +487,32 @@ class ChatPage extends LitElement {
             }
 
             // TODO: Determine number of initial messages by screen height...
-            this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15);
+            this._initialMessages = this._messages
 
 
             this.messagesRendered = this._initialMessages
 
-            // try {
-            //     const viewElement = this.shadowRoot.querySelector('chat-scroller')
-            //     console.log({viewElement})
-            // // viewElement.scrollTop = this.viewElement.scrollHeight + 50
-            // } catch (error) {
-            //     console.error(error)
-            // }
-            
 
             this.isLoadingMessages = false
             setTimeout(() => this.downElementObserver(), 500)
         } else {
 
-            let _newMessages = messages.map((eachMessage) => {
+            messages.forEach((eachMessage) => {
-                if (eachMessage.isText === true) {
+
-                    let _eachMessage = this.decodeMessage(eachMessage)
+                const _eachMessage = this.decodeMessage(eachMessage)
 
-                    if (this.messageSignature !== eachMessage.signature) {
-                        this.messageSignature = eachMessage.signature
-                        // What are we waiting for, send in the message immediately...
-                        this.renderNewMessage(_eachMessage)
-                    }
-                    return _eachMessage
-                } else {
-                    let _eachMessage = this.decodeMessage(eachMessage)
 
-                    if (this.messageSignature !== eachMessage.signature) {
-                        this.messageSignature = eachMessage.signature
                 this.renderNewMessage(_eachMessage)
-                    }
+
-                    return _eachMessage
+
-                }
             })
 
-            this.newMessages = this.newMessages.concat(_newMessages)
+
+            // this.newMessages = this.newMessages.concat(_newMessages)
+            this.messagesRendered = [...this.messagesRendered].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
 
 
         }
@@ -601,7 +647,7 @@ class ChatPage extends LitElement {
 
     async fetchChatMessages(chatId) {
 
-        const initDirect = (cid) => {
+        const initDirect = async (cid) => {
 
             let initial = 0
 
@@ -621,6 +667,9 @@ class ChatPage extends LitElement {
                 directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`;
             }
 
+
+
+
             const directSocket = new WebSocket(directSocketLink);
 
             // Open Connection
@@ -630,13 +679,37 @@ class ChatPage extends LitElement {
             }
 
             // Message Event
-            directSocket.onmessage = (e) => {
+            directSocket.onmessage = async (e) => {
 
                 if (initial === 0) {
+                    const isReceipient = this.chatId.includes('direct')
+
+
+                    const chatReference1 = isReceipient ? 'direct' : 'group';
+                    const chatReference2 = this.chatId.split('/')[1];
+                    const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
+
+                    let getInitialMessages = []
+                    if (cachedData && cachedData.length !== 0) {
+                        const lastMessage = cachedData[cachedData.length - 1]
+                        const newMessages = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
+                        });
+                        getInitialMessages = [...cachedData, ...newMessages]
+                    } else {
+                        getInitialMessages = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true`,
+                        });
+
+
+                    }
+
+                    this.processMessages(getInitialMessages, true)
 
-                    this.isLoadingMessages = true
-                    this.processMessages(JSON.parse(e.data), true)
                     initial = initial + 1
+
                 } else {
 
                     this.processMessages(JSON.parse(e.data), false)
@@ -692,12 +765,38 @@ class ChatPage extends LitElement {
             }
 
             // Message Event
-            groupSocket.onmessage = (e) => {
+            groupSocket.onmessage = async (e) => {
 
                 if (initial === 0) {
+                    const isGroup = this.chatId.includes('group')
+                    const chatReference1 = isGroup ? 'group' : 'direct';
+                    const chatReference2 = this.chatId.split('/')[1];
+
+                    const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
+
+                    let getInitialMessages = []
+                    if (cachedData && cachedData.length !== 0) {
+
+                        const lastMessage = cachedData[cachedData.length - 1]
+
+                        const newMessages = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
+                        });
+
+                        getInitialMessages = [...cachedData, ...newMessages]
+                    } else {
+                        getInitialMessages = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true`,
+                        });
+
+
+                    }
+
+
+                    this.processMessages(getInitialMessages, true)
 
-                    this.isLoadingMessages = true
-                    this.processMessages(JSON.parse(e.data), true)
                     initial = initial + 1
                 } else {