diff --git a/core/src/components/login-view/login-view.js b/core/src/components/login-view/login-view.js
index c29be5ab..24bef336 100644
--- a/core/src/components/login-view/login-view.js
+++ b/core/src/components/login-view/login-view.js
@@ -15,7 +15,7 @@ import './login-section.js'
 import '../qort-theme-toggle.js'
 
 import settings from '../../functional-components/settings-page.js'
-import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth, removeQAPPAutoLists, allowQAPPAutoLists } from '../../redux/app/app-actions.js'
+import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth, removeQAPPAutoLists, allowQAPPAutoLists, addTabInfo, setTabNotifications, setNewTab } from '../../redux/app/app-actions.js'
 
 window.reduxStore = store
 window.reduxAction = {
@@ -25,7 +25,10 @@ window.reduxAction = {
     allowQAPPAutoAuth: allowQAPPAutoAuth,
     removeQAPPAutoAuth: removeQAPPAutoAuth,
     allowQAPPAutoLists: allowQAPPAutoLists,
-    removeQAPPAutoLists: removeQAPPAutoLists
+    removeQAPPAutoLists: removeQAPPAutoLists,
+    addTabInfo: addTabInfo,
+    setTabNotifications: setTabNotifications,
+    setNewTab: setNewTab
 }
 
 const animationDuration = 0.7 // Seconds
diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js
index 4cf8d729..4f68ffee 100644
--- a/core/src/components/show-plugin.js
+++ b/core/src/components/show-plugin.js
@@ -6,9 +6,13 @@ import { addPluginRoutes } from '../plugins/addPluginRoutes.js'
 import { repeat } from 'lit/directives/repeat.js';
 import ShortUniqueId from 'short-unique-id';
 import { setNewTab } from '../redux/app/app-actions.js'
+import localForage from "localforage";
 
 import '@material/mwc-icon'
 
+const chatLastSeen = localForage.createInstance({
+    name: "chat-last-seen",
+});
 class ShowPlugin extends connect(store)(LitElement) {
     static get properties() {
         return {
@@ -19,7 +23,10 @@ class ShowPlugin extends connect(store)(LitElement) {
             registeredUrls: { type: Array },
             currentTab: { type: Number },
             tabs: { type: Array },
-            theme: { type: String, reflect: true }
+            theme: { type: String, reflect: true },
+            tabInfo: { type: Object },
+            chatLastSeen: { type: Array },
+            chatHeads: { type: Array }
         }
     }
 
@@ -155,6 +162,20 @@ class ShowPlugin extends connect(store)(LitElement) {
                 color: #999;
                 --mdc-icon-size: 20px;
             }
+
+            .count {
+                position: absolute;
+                background: red;
+                color: white;
+                padding: 5px;
+                font-size: 12px;
+                border-radius: 50%;
+                height: 10px;
+                width: 10px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
         `
     }
 
@@ -165,6 +186,9 @@ class ShowPlugin extends connect(store)(LitElement) {
         this.tabs = []
         this.uid = new ShortUniqueId()
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+        this.tabInfo = {}
+        this.chatLastSeen = []
+        this.chatHeads = []
     }
 
     async getUpdateComplete() {
@@ -189,9 +213,44 @@ class ShowPlugin extends connect(store)(LitElement) {
             return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}`
         }
 
+
         return html`
             <div class="tabs">
-                ${this.tabs.map((tab, index) => html`
+                ${this.tabs.map((tab, index) => {
+            let title = ''
+            let count = 0
+            if (tab.myPlugObj && tab.myPlugObj.title) {
+                title = tab.myPlugObj.title
+            }
+            if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
+                title = this.tabInfo[tab.id].name
+            }
+            if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
+                count = this.tabInfo[tab.id].count
+            }
+
+            if (tab.myPlugObj && tab.myPlugObj.url === 'q-chat') {
+                for (const chat of this.chatHeads) {
+
+                    const lastReadMessage = this.chatLastSeen.find((ch) => {
+                        let id
+                        if (chat.groupId === 0) {
+                            id = chat.groupId
+                        } else if (chat.groupId) {
+                            id = chat.groupId
+                        } else {
+                            id = chat.address
+                        }
+
+                        return ch.key.includes(id)
+                    })
+                    if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) {
+                        count = count + 1
+                    }
+                }
+
+            }
+            return html`
                     <div 
                         class="tab ${this.currentTab === index ? 'active' : ''}"
                         @click=${() => this.currentTab = index}
@@ -200,26 +259,31 @@ class ShowPlugin extends connect(store)(LitElement) {
                             <div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
                                 <mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon>
                             </div>
+                            ${count ? html`
+                            <div class="count">${count}</div>
+                            ` : ''}
+                            
                             <div>
                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                ${tab.myPlugObj && tab.myPlugObj.title}
+                                ${title}
                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                             </div>
                             <div class="close" @click=${() => { this.removeTab(index) }}>x</div>
                         </div>
                     </div>
-                `)}&nbsp;&nbsp;&nbsp;
+                `
+        })}&nbsp;&nbsp;&nbsp;
                 <button 
                     class="add-tab-button" 
                     title="Add Tab"
                     @click=${() => {
-                        const lengthOfTabs = this.tabs.length
-                        this.addTab({
-                            url: "",
-                            id: this.uid()
-                        })
-                        this.currentTab = lengthOfTabs
-                    }}
+                const lengthOfTabs = this.tabs.length
+                this.addTab({
+                    url: "",
+                    id: this.uid()
+                })
+                this.currentTab = lengthOfTabs
+            }}
                 >
                     +
                 </button>
@@ -227,7 +291,7 @@ class ShowPlugin extends connect(store)(LitElement) {
 
             ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
                 <div class=${this.currentTab === index ? "showIframe" : "hideIframe"}>
-                    <iframe src="${plugSrc(tab.myPlugObj)}" id="showPluginFrame${index}" style="width:100%;
+                    <iframe src="${plugSrc(tab.myPlugObj)}" data-id=${tab.id} id="showPluginFrame${index}" style="width:100%;
                         height:calc(var(--window-height) - 102px);
                         border:0;
                         padding:0;
@@ -325,7 +389,7 @@ class ShowPlugin extends connect(store)(LitElement) {
         this.tabs = copiedTabs
     }
 
-    stateChanged(state) {
+    async stateChanged(state) {
         const split = state.app.url.split('/')
         const newRegisteredUrls = state.app.registeredUrls
 
@@ -356,6 +420,23 @@ class ShowPlugin extends connect(store)(LitElement) {
         if (newLinkParam !== this.linkParam) {
             this.linkParam = newLinkParam
         }
+        if (this.tabInfo !== state.app.tabInfo) {
+            this.tabInfo = state.app.tabInfo
+        }
+        if (this.chatLastSeen !== state.app.chatLastSeen) {
+            this.chatLastSeen = state.app.chatLastSeen
+        }
+        if (state.app.chatHeads !== this.unModifiedChatHeads) {
+            let chatHeads = []
+            if (state.app.chatHeads && state.app.chatHeads.groups) {
+                chatHeads = [...chatHeads, ...state.app.chatHeads.groups]
+            }
+            if (state.app.chatHeads && state.app.chatHeads.direct) {
+                chatHeads = [...chatHeads, ...state.app.chatHeads.direct]
+            }
+            this.chatHeads = chatHeads
+            this.unModifiedChatHeads = state.app.chatHeads
+        }
 
         if (state.app.newTab) {
             const newTab = state.app.newTab
@@ -621,8 +702,8 @@ class NavBar extends connect(store)(LitElement) {
                     <div class="app-list">
                         ${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html`
                             <div class="app-icon" @click=${() => {
-                                this.changePage(plugin)
-                            }}>
+                this.changePage(plugin)
+            }}>
                                 <div class="app-icon-box">
                                     <mwc-icon class="menuIcon">${plugin.mwcicon}</mwc-icon>
                                 </div>
diff --git a/core/src/redux/app/actions/app-core.js b/core/src/redux/app/actions/app-core.js
index e1ef0ef6..8ed9455f 100644
--- a/core/src/redux/app/actions/app-core.js
+++ b/core/src/redux/app/actions/app-core.js
@@ -1,5 +1,5 @@
 // Core App Actions here...
-import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS } from '../app-action-types.js'
 
 export const doUpdateBlockInfo = (blockObj) => {
     return (dispatch, getState) => {
@@ -127,3 +127,16 @@ export const setNewTab = (payload) => {
     }
 }
 
+export const addTabInfo = (payload) => {
+    return {
+        type: ADD_TAB_INFO,
+        payload
+    }
+}
+
+export const setTabNotifications = (payload) => {
+    return {
+        type: SET_TAB_NOTIFICATIONS,
+        payload
+    }
+}
\ No newline at end of file
diff --git a/core/src/redux/app/app-action-types.js b/core/src/redux/app/app-action-types.js
index e5d5dbc8..31f9b246 100644
--- a/core/src/redux/app/app-action-types.js
+++ b/core/src/redux/app/app-action-types.js
@@ -25,4 +25,6 @@ export const ALLOW_QAPP_AUTO_LISTS = 'ALLOW_QAPP_AUTO_LISTS'
 export const REMOVE_QAPP_AUTO_LISTS = 'REMOVE_QAPP_AUTO_LISTS'
 export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
 export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'
-export const SET_NEW_TAB = 'SET_NEW_TAB'
\ No newline at end of file
+export const SET_NEW_TAB = 'SET_NEW_TAB'
+export const ADD_TAB_INFO = 'ADD_TAB_INFO'
+export const SET_TAB_NOTIFICATIONS = 'SET_TAB_NOTIFICATIONS'
\ No newline at end of file
diff --git a/core/src/redux/app/app-reducer.js b/core/src/redux/app/app-reducer.js
index 6c4ae38e..5ba2edbb 100644
--- a/core/src/redux/app/app-reducer.js
+++ b/core/src/redux/app/app-reducer.js
@@ -1,6 +1,6 @@
 // Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
 import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
-import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from './app-action-types.js'
+import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS } from './app-action-types.js'
 import { initWorkersReducer } from './reducers/init-workers.js'
 import { loginReducer } from './reducers/login-reducer.js'
 import { setNode, addNode } from './reducers/manage-node.js'
@@ -47,7 +47,8 @@ const INITIAL_STATE = {
     qAPPAutoAuth: loadStateFromLocalStorage('qAPPAutoAuth') || false,
     qAPPAutoLists: loadStateFromLocalStorage('qAPPAutoLists') || false,
     chatLastSeen: [],
-    newTab: null
+    newTab: null,
+    tabInfo: {}
 }
 
 export default (state = INITIAL_STATE, action) => {
@@ -228,6 +229,40 @@ export default (state = INITIAL_STATE, action) => {
                 newTab: action.payload
             }
         }
+        case ADD_TAB_INFO: {
+            const newTabInfo = action.payload
+            if (state.tabInfo[newTabInfo.id] && state.tabInfo[newTabInfo.id].name && newTabInfo.name === state.tabInfo[newTabInfo.id].name) break
+            return {
+                ...state,
+                tabInfo: {
+                    ...state.tabInfo,
+                    [newTabInfo.id]: {
+                        ...newTabInfo,
+                        count: 0
+                    }
+                }
+            }
+        }
+        case SET_TAB_NOTIFICATIONS: {
+            const count = action.payload.count
+            const name = action.payload.name
+            const newTabInfo = {}
+            Object.keys(state.tabInfo).forEach((key) => {
+                const tab = state.tabInfo[key]
+                if (tab.name == name) {
+                    newTabInfo[key] = {
+                        ...tab,
+                        count
+                    }
+                } else {
+                    newTabInfo[key] = tab
+                }
+            })
+            return {
+                ...state,
+                tabInfo: newTabInfo
+            }
+        }
 
         default:
             return state
diff --git a/plugins/plugins/core/components/ChatPage.js b/plugins/plugins/core/components/ChatPage.js
index 0e87b7df..9cb100cd 100644
--- a/plugins/plugins/core/components/ChatPage.js
+++ b/plugins/plugins/core/components/ChatPage.js
@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import {animate} from '@lit-labs/motion';
+import { animate } from '@lit-labs/motion';
 import { Epml } from '../../../epml.js';
 import { use, get, translate, registerTranslateConfig } from 'lit-translate';
 import { generateHTML } from '@tiptap/core'
@@ -7,7 +7,7 @@ import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline';
 import Placeholder from '@tiptap/extension-placeholder'
 import Highlight from '@tiptap/extension-highlight'
-import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Editor, Extension } from '@tiptap/core'
 import * as zip from "@zip.js/zip.js";
 import './ChatGifs/ChatGifs.js';
@@ -91,33 +91,33 @@ class ChatPage extends LitElement {
             webSocket: { attribute: false },
             chatHeads: { type: Array },
             forwardActiveChatHeadUrl: { type: Object },
-            openForwardOpen: {type: Boolean },
-            groupAdmin: {type: Array},
-            groupMembers: {type: Array},
-            shifted: {type: Boolean},
-            groupInfo: {type: Object},
-            setActiveChatHeadUrl: {attribute: false},
+            openForwardOpen: { type: Boolean },
+            groupAdmin: { type: Array },
+            groupMembers: { type: Array },
+            shifted: { type: Boolean },
+            groupInfo: { type: Object },
+            setActiveChatHeadUrl: { attribute: false },
             userFound: { type: Array },
             userFoundModalOpen: { type: Boolean },
             webWorker: { type: Object },
             webWorkerFile: { type: Object },
             myTrimmedMeassage: { type: String },
-            editor: {type: Object},
-            currentEditor: {type: String},
-            isEnabledChatEnter: {type: Boolean},
+            editor: { type: Object },
+            currentEditor: { type: String },
+            isEnabledChatEnter: { type: Boolean },
             openTipUser: { type: Boolean },
             openUserInfo: { type: Boolean },
             selectedHead: { type: Object },
             userName: { type: String },
             openGifModal: { type: Boolean },
             gifsLoading: { type: Boolean },
-            goToRepliedMessage: {attribute: false},
-            isLoadingGoToRepliedMessage: {type: Object}
+            goToRepliedMessage: { attribute: false },
+            isLoadingGoToRepliedMessage: { type: Object }
         }
     }
 
     static get styles() {
-    return css`
+        return css`
     html {
         scroll-behavior: smooth;
     }
@@ -1268,7 +1268,7 @@ class ChatPage extends LitElement {
     padding: 5px 0px;
   }
 `
-}
+    }
 
     constructor() {
         super()
@@ -1349,14 +1349,14 @@ class ChatPage extends LitElement {
     }
 
 
-    setOpenGifModal(value){
+    setOpenGifModal(value) {
         this.openGifModal = value
     }
 
     _toggle(value) {
         this.shifted = value === (false || true) ? value : !this.shifted;
         this.requestUpdate()
-      }
+    }
 
     setOpenTipUser(props) {
         this.openTipUser = props;
@@ -1376,15 +1376,15 @@ class ChatPage extends LitElement {
             ...this.selectedHead,
             address: props.sender,
             name: props.senderName,
-            };
-        }
+        };
+    }
 
-    toggleEnableChatEnter(){
-        localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter ) 
+    toggleEnableChatEnter() {
+        localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter)
         this.isEnabledChatEnter = !this.isEnabledChatEnter
     }
 
-    addGifs(gifs){
+    addGifs(gifs) {
         this.gifsToBeAdded = [...this.gifsToBeAdded, ...gifs]
     }
 
@@ -1392,15 +1392,15 @@ class ChatPage extends LitElement {
         this.gifsLoading = props;
     }
 
-  
-    
+
+
     render() {
         return html`
             <div class="main-container">
             <div 
             class="chat-container" 
             style=${(!this.isReceipient && +this._chatId !== 0) ? "grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto); flex: 3;" : "grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); flex: 2;"}>
-                ${(!this.isReceipient && +this._chatId !== 0) ? 
+                ${(!this.isReceipient && +this._chatId !== 0) ?
                 html`
                 <div class="group-nav-container">
                     <div @click=${this._toggle} style="height: 100%; display: flex; align-items: center;flex-grow: 1; cursor: pointer; cursor: pointer; user-select: none">
@@ -1412,8 +1412,8 @@ class ChatPage extends LitElement {
                 </div>
                 ` : null}
                 <div>
-                    ${this.isLoadingMessages ? 
-                        html`
+                    ${this.isLoadingMessages ?
+                html`
                         <div class="lds-grid">
                             <div></div>
                             <div></div>
@@ -1425,17 +1425,17 @@ class ChatPage extends LitElement {
                             <div></div>
                             <div></div>
                         </div>
-                        ` : 
-                        this.renderChatScroller()}
+                        ` :
+                this.renderChatScroller()}
                 </div>
                 <div 
                 class="gifs-backdrop" 
                 @click=${() => {
-                    if (this.gifsLoading) return;
-                    this.setOpenGifModal(false);
-                    this.editor.commands.focus("end");
-                    this.shadowRoot.querySelector("chat-gifs").clearGifSelections();
-                }} 
+                if (this.gifsLoading) return;
+                this.setOpenGifModal(false);
+                this.editor.commands.focus("end");
+                this.shadowRoot.querySelector("chat-gifs").clearGifSelections();
+            }} 
                     style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}>
                 </div>
                 <!-- main chat bar -->
@@ -1450,18 +1450,18 @@ class ChatPage extends LitElement {
                     .webWorkerImage=${this.webWorkerFile}
                     .setGifsLoading=${(val) => this.setGifsLoading(val)}
                     .sendMessage=${(val) => this._sendMessage(val)}
-                    .setOpenGifModal=${(val)=> this.setOpenGifModal(val)}>
+                    .setOpenGifModal=${(val) => this.setOpenGifModal(val)}>
                 </chat-gifs>
                     <div 
                     class='last-message-ref' 
                     style=${(this.lastMessageRefVisible && !this.imageFile && !this.openGifModal) ? 'opacity: 1;' : 'opacity: 0;'}>
                         <vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
-                            this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver")
-                            .scrollIntoView({
-                                behavior: 'smooth',
-                                block: 'nearest',
-                            });
-                        }}>
+                this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver")
+                    .scrollIntoView({
+                        behavior: 'smooth',
+
+                    });
+            }}>
                         </vaadin-icon>
                         </div>
                         <div class="typing-area">
@@ -1474,17 +1474,17 @@ class ChatPage extends LitElement {
                                             ${this.repliedToMessageObj.version.toString() === '1' ? html`
                                             ${this.repliedToMessageObj.message}
                                             ` : ''}
-                                            ${+this.repliedToMessageObj.version > 1 
-                                            ? html`
-                                                ${unsafeHTML(generateHTML(this.repliedToMessageObj.message, 
-                                                [
-                                                    StarterKit,
-                                                    Underline,
-                                                    Highlight
-                                                    // other extensions …
-                                                ]))}
-                                            ` 
-                                            : ''}
+                                            ${+this.repliedToMessageObj.version > 1
+                    ? html`
+                                                ${unsafeHTML(generateHTML(this.repliedToMessageObj.message,
+                        [
+                            StarterKit,
+                            Underline,
+                            Highlight
+                            // other extensions …
+                        ]))}
+                                            `
+                    : ''}
                                         </div>
                                         <vaadin-icon
                                             class="close-icon"
@@ -1501,13 +1501,13 @@ class ChatPage extends LitElement {
                                         <vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
                                         <div class="repliedTo-message">
                                             <p class="senderName">${translate("chatpage.cchange25")}</p>
-                                                ${unsafeHTML(generateHTML(this.editedMessageObj.message, 
-                                                [
-                                                    StarterKit,
-                                                    Underline,
-                                                    Highlight
-                                                    // other extensions …
-                                                ]))}
+                                                ${unsafeHTML(generateHTML(this.editedMessageObj.message,
+                        [
+                            StarterKit,
+                            Underline,
+                            Highlight
+                            // other extensions …
+                        ]))}
                                         </div>
                                         <vaadin-icon
                                             class="close-icon"
@@ -1531,13 +1531,13 @@ class ChatPage extends LitElement {
                                 ?isLoadingMessages=${this.isLoadingMessages}
                                 ?isEditMessageOpen=${this.isEditMessageOpen}
                                 .editor=${this.editor}
-                                .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
+                                .updatePlaceholder=${(editor, value) => this.updatePlaceholder(editor, value)}
                                 id="_chatEditorDOM"
                                 .repliedToMessageObj=${this.repliedToMessageObj}
                                 .toggleEnableChatEnter=${this.toggleEnableChatEnter}
                                 ?isEnabledChatEnter=${this.isEnabledChatEnter}
                                 ?openGifModal=${this.openGifModal}
-                                .setOpenGifModal=${(val)=> this.setOpenGifModal(val)}
+                                .setOpenGifModal=${(val) => this.setOpenGifModal(val)}
                                 chatId=${this.chatId}
                                 >                           
                             </chat-text-editor>
@@ -1552,7 +1552,7 @@ class ChatPage extends LitElement {
                                 <div class=${`smallLoading marginLoader`}></div>
                                     <p>
                                     ${this.isDeletingImage ?
-                                        translate("chatpage.cchange31") : translate("chatpage.cchange30")}
+                    translate("chatpage.cchange31") : translate("chatpage.cchange30")}
                                     </p>
                                 </div>			
                             </div>                        
@@ -1566,7 +1566,7 @@ class ChatPage extends LitElement {
                                 <div class=${`smallLoading marginLoader`}></div>
                                     <p>
                                     ${this.isDeletingAttachment ?
-                                        translate("chatpage.cchange76") : translate("chatpage.cchange75")}
+                    translate("chatpage.cchange76") : translate("chatpage.cchange75")}
                                     </p>
                                 </div>			
                             </div>                        
@@ -1575,8 +1575,8 @@ class ChatPage extends LitElement {
                 `: ''}
                 <wrapper-modal 
                 .onClickFunc=${() => {
-                    this.removeImage();
-                }} 
+                this.removeImage();
+            }} 
                 style=${(this.imageFile && !this.isUploadingImage) ? "visibility:visible; z-index:50" : "visibility: hidden;z-index:-100"}>
                     <div>
                         <div class="dialog-container">
@@ -1596,25 +1596,25 @@ class ChatPage extends LitElement {
                                     ?isLoadingMessages=${this.isLoadingMessages}
                                     id="chatTextCaption"
                                     .editor=${this.editorImage}
-                                    .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
+                                    .updatePlaceholder=${(editor, value) => this.updatePlaceholder(editor, value)}
                                     >
                                 </chat-text-editor>
                             </div>
                             <div class="modal-button-row">
                                 <button class="modal-button-red" @click=${() => {
-                                
-                                this.removeImage();
-                                }}>
+
+                this.removeImage();
+            }}>
                                     ${translate("chatpage.cchange33")}
                                 </button>
                                 <button
                                     class="modal-button"
-                                    @click=${()=> {
-                                        const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
-                                        chatTextEditor.sendMessageFunc({
-                                            type: 'image',
-                                        })
-                                    }}
+                                    @click=${() => {
+                const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
+                chatTextEditor.sendMessageFunc({
+                    type: 'image',
+                })
+            }}
                                 >
                                     ${translate("chatpage.cchange9")}
                                 </button>
@@ -1649,24 +1649,24 @@ class ChatPage extends LitElement {
                                 ?isLoadingMessages=${this.isLoadingMessages}
                                 id="chatAttachmentId"
                                 .editor=${this.editorAttachment}
-                                .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
+                                .updatePlaceholder=${(editor, value) => this.updatePlaceholder(editor, value)}
                                 >
                             </chat-text-editor>
                         </div>
                         <div class="modal-button-row">
                             <button class="modal-button-red" @click=${() => {
-                            this.removeAttachment();
-                            }}>
+                this.removeAttachment();
+            }}>
                                 ${translate("chatpage.cchange33")}
                             </button>
                             <button
                                 class="modal-button"
                                 @click=${() => {
-                                    const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId');
-                                    chatTextEditor.sendMessageFunc({
-                                        type: 'attachment',
-                                    })
-                                }}
+                const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId');
+                chatTextEditor.sendMessageFunc({
+                    type: 'attachment',
+                })
+            }}
                             >
                                 ${translate("chatpage.cchange9")}
                             </button>
@@ -1685,10 +1685,10 @@ class ChatPage extends LitElement {
             </paper-dialog>
             <wrapper-modal 
                 .onClickFunc=${() => {
-                   this.openForwardOpen = false;
-                   this.forwardActiveChatHeadUrl = {};
-                   this.requestUpdate();
-                } } 
+                this.openForwardOpen = false;
+                this.forwardActiveChatHeadUrl = {};
+                this.requestUpdate();
+            }} 
                 style=${this.openForwardOpen ? "display: block" : "display: none"}>
                     <div>
                         <div class="dialog-container">
@@ -1704,22 +1704,22 @@ class ChatPage extends LitElement {
                                     id="sendTo" 
                                     placeholder="${translate("chatpage.cchange7")}" 
                                     @keydown=${() => {
-                                        if (this.forwardActiveChatHeadUrl.selected) {
-                                            this.forwardActiveChatHeadUrl = {};
-                                            this.requestUpdate();
-                                            } 
-                                        }
-                                    }
+                if (this.forwardActiveChatHeadUrl.selected) {
+                    this.forwardActiveChatHeadUrl = {};
+                    this.requestUpdate();
+                }
+            }
+            }
                                 />
                                 ${this.forwardActiveChatHeadUrl.selected ? (
-                                    html`
+                html`
                                     <div class="user-verified">
                                         <p >${translate("chatpage.cchange38")}</p>
                                         <vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
                                     </div>
                                     `
-                                ) : (
-                                    html`              
+            ) : (
+                html`              
                                     <vaadin-icon 
                                         @click=${this.userSearch}
                                         slot="icon" 
@@ -1727,10 +1727,10 @@ class ChatPage extends LitElement {
                                         class="search-icon">
                                     </vaadin-icon>
                                     `
-                                )}
+            )}
                             </div>  
                             ${this.forwardActiveChatHeadUrl.selected ? (
-                             html`
+                html`
                                 <div class="user-selected">
                                     <p class="user-selected-name">
                                         ${this.forwardActiveChatHeadUrl.name}
@@ -1744,48 +1744,48 @@ class ChatPage extends LitElement {
                                         icon="vaadin:close-big"
                                         slot="icon"
                                         @click=${() => {
-                                            this.userFound = [];
-                                            this.forwardActiveChatHeadUrl = {};
-                                            this.requestUpdate();
-                                            this.shadowRoot.getElementById("sendTo").value = "";
-                                            }}>
+                        this.userFound = [];
+                        this.forwardActiveChatHeadUrl = {};
+                        this.requestUpdate();
+                        this.shadowRoot.getElementById("sendTo").value = "";
+                    }}>
                                         </vaadin-icon>
                                     </div>
                                 </div>
                                 `
-                            ) : ( 
-                            html`
+            ) : (
+                html`
                             ${this.chatHeads.map((item) => {
-                                return html`
+                    return html`
                                 <chat-select 
                                     activeChatHeadUrl=${this.forwardActiveChatHeadUrl.url} 
-                                    .setActiveChatHeadUrl=${(val)=> {
-                                        this.forwardActiveChatHeadUrl = {
-                                            ...this.forwardActiveChatHeadUrl,
-                                                url: val
-                                        };
-                                        this.userFound = [];
-                                    }} 
+                                    .setActiveChatHeadUrl=${(val) => {
+                            this.forwardActiveChatHeadUrl = {
+                                ...this.forwardActiveChatHeadUrl,
+                                url: val
+                            };
+                            this.userFound = [];
+                        }} 
                                     chatInfo=${JSON.stringify(item)}>
                                 </chat-select>`
-                            })}
+                })}
                             `
-                            )}
+            )}
                         </div>
                           
                             <div class="modal-button-row">
                                 <button class="modal-button-red" @click=${() => {
-                                    this.openForwardOpen = false;
-                                    this.forwardActiveChatHeadUrl = {};
-                                    this.requestUpdate();
-                                }}>
+                this.openForwardOpen = false;
+                this.forwardActiveChatHeadUrl = {};
+                this.requestUpdate();
+            }}>
                                     ${translate("chatpage.cchange33")}
                                 </button>
                                 <button
                                     class="modal-button"
-                                    @click=${()=> {
-                                       this.sendForwardMessage()
-                                    }}
+                                    @click=${() => {
+                this.sendForwardMessage()
+            }}
                                 >
                                     ${translate("blockpage.bcchange14")}
                                 </button>
@@ -1794,19 +1794,19 @@ class ChatPage extends LitElement {
                         <div class="search-results-div">
                             <chat-search-results 
                                 .onClickFunc=${(result) => {
-                                    this.forwardActiveChatHeadUrl = {
-                                        ...this.forwardActiveChatHeadUrl,
-                                        url: `direct/${result.owner}`,
-                                        name: result.name,
-                                        selected: true
-                                    };
-                                    this.userFound = [];
-                                    this.userFoundModalOpen = false;
-                                }}
+                this.forwardActiveChatHeadUrl = {
+                    ...this.forwardActiveChatHeadUrl,
+                    url: `direct/${result.owner}`,
+                    name: result.name,
+                    selected: true
+                };
+                this.userFound = [];
+                this.userFoundModalOpen = false;
+            }}
                                 .closeFunc=${() => {
-                                    this.userFoundModalOpen = false;
-                                    this.userFound = [];
-                                }}
+                this.userFoundModalOpen = false;
+                this.userFound = [];
+            }}
                                 .searchResults=${this.userFound}
                                 ?isOpen=${this.userFoundModalOpen}
                                 ?loading=${this.isLoading}>
@@ -1816,8 +1816,8 @@ class ChatPage extends LitElement {
             </wrapper-modal>
             <wrapper-modal
                 .onClickFunc=${() => {
-                    this.setOpenTipUser(false);
-                }}
+                this.setOpenTipUser(false);
+            }}
                 zIndex=${55}
                 style=${this.openTipUser ? "display: block;" : "display: none;"}>
                 <tip-user
@@ -1832,8 +1832,7 @@ class ChatPage extends LitElement {
                 this.setUserName("");
                 this.setSelectedHead({});
             }} 
-            style=${
-                this.openUserInfo ? "display: block" : "display: none"
+            style=${this.openUserInfo ? "display: block" : "display: none"
             }>
                 <user-info
                     .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
@@ -1846,8 +1845,8 @@ class ChatPage extends LitElement {
         </div>
         <div class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}"   ${animate()}>
             <chat-right-panel 
-            .getMoreMembers=${(val)=> this.getMoreMembers(val)} 
-            .toggle=${(val)=> this._toggle(val)} 
+            .getMoreMembers=${(val) => this.getMoreMembers(val)} 
+            .toggle=${(val) => this._toggle(val)} 
             .selectedAddress=${this.selectedAddress} 
             .groupMembers=${this.groupMembers} 
             .groupAdmin=${this.groupAdmin} 
@@ -1863,24 +1862,24 @@ class ChatPage extends LitElement {
     `
     }
 
-    async getMoreMembers(groupId){
+    async getMoreMembers(groupId) {
         try {
             const getMembers = await parentEpml.request("apiCall", {
                 type: "api",
                 url: `/groups/members/${groupId}?onlyAdmins=false&limit=20&offset=${this.pageNumber * 20}`,
             });
-        
+
             const getMembersWithName = (getMembers.members || []).map(async (member) => {
                 let memberItem = member
                 try {
-                  const name =  await this.getName(member.member)
-                   memberItem = {
-                    address: member.member,
-                    name: name ? name : undefined
-                  }
+                    const name = await this.getName(member.member)
+                    memberItem = {
+                        address: member.member,
+                        name: name ? name : undefined
+                    }
                 } catch (error) {
                 }
-        
+
                 return memberItem
             })
             const membersWithName = await Promise.all(getMembersWithName)
@@ -1903,141 +1902,177 @@ class ChatPage extends LitElement {
         const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat');
         const elementChatAttachmentId = this.shadowRoot.getElementById('chatAttachmentId').shadowRoot.getElementById('newAttachmentChat');
         this.editor = new Editor({
-              onUpdate: ()=> {
+            onUpdate: () => {
                 this.shadowRoot.getElementById('_chatEditorDOM').getMessageSize(this.editor.getJSON())
-              },
-          
+            },
+
             element: elementChatId,
             extensions: [
-              StarterKit,
-              Underline,
-              Highlight,
-              Placeholder.configure({
-                placeholder: 'Write something …',
-              }),
-              Extension.create({
-                name: 'shortcuts',
-                addKeyboardShortcuts:()=> {
-                  return {
-                    'Enter': ()=> {
-                        if(this.isEnabledChatEnter){
-                            const chatTextEditor = this.shadowRoot.getElementById('_chatEditorDOM')
-                            chatTextEditor.sendMessageFunc({
-                            })
-                          return true
+                StarterKit,
+                Underline,
+                Highlight,
+                Placeholder.configure({
+                    placeholder: 'Write something …',
+                }),
+                Extension.create({
+                    name: 'shortcuts',
+                    addKeyboardShortcuts: () => {
+                        return {
+                            'Enter': () => {
+                                if (this.isEnabledChatEnter) {
+                                    const chatTextEditor = this.shadowRoot.getElementById('_chatEditorDOM')
+                                    chatTextEditor.sendMessageFunc({
+                                    })
+                                    return true
+                                }
+
+                            },
+                            "Shift-Enter": () => {
+                                if (this.isEnabledChatEnter) {
+                                    this.editor.commands.first(() => [
+                                        this.editor.commands.newlineInCode()
+                                    ])
+                                }
+
+                            }
+
+
                         }
-                   
-                    },
-                    "Shift-Enter": () => {
-                        if(this.isEnabledChatEnter){
-                            this.editor.commands.first(() => [
-                                this.editor.commands.newlineInCode()
-                            ])
-                        }
-                       
                     }
-                    
-              
-                  }
-                }})
+                })
             ]
-          })
-         
-          this.editorImage = new Editor({
-            onUpdate: ()=> {
+        })
+
+        this.editorImage = new Editor({
+            onUpdate: () => {
                 this.shadowRoot.getElementById('chatTextCaption').getMessageSize(this.editorImage.getJSON())
-              },
+            },
             element: elementChatImageId,
             extensions: [
-              StarterKit,
-              Underline,
-              Highlight,
-              Placeholder.configure({
-                placeholder: 'Write something …',
-              }),
-              Extension.create({
-                addKeyboardShortcuts:()=> {
-                  return {
-                    'Enter':() => {
-                        const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
-                        chatTextEditor.sendMessageFunc({
-                            type: 'image'
-                        })
-                      return true
+                StarterKit,
+                Underline,
+                Highlight,
+                Placeholder.configure({
+                    placeholder: 'Write something …',
+                }),
+                Extension.create({
+                    addKeyboardShortcuts: () => {
+                        return {
+                            'Enter': () => {
+                                const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
+                                chatTextEditor.sendMessageFunc({
+                                    type: 'image'
+                                })
+                                return true
+                            }
+                        }
                     }
-                  }
-                }})
+                })
             ]
-          })
+        })
 
-          this.editorAttachment = new Editor({
+        this.editorAttachment = new Editor({
             onUpdate: () => {
                 this.shadowRoot.getElementById('chatAttachmentId').getMessageSize(this.editorAttachment.getJSON())
-              },
+            },
             element: elementChatAttachmentId,
             extensions: [
-              StarterKit,
-              Underline,
-              Highlight,
-              Placeholder.configure({
-                placeholder: 'Write something …',
-              }),
-              Extension.create({
-                addKeyboardShortcuts:()=> {
-                  return {
-                    'Enter':()=> {
-                        const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId')
-                        chatTextEditor.sendMessageFunc({
-                            type: 'attachment'
-                        })
-                      return true
+                StarterKit,
+                Underline,
+                Highlight,
+                Placeholder.configure({
+                    placeholder: 'Write something …',
+                }),
+                Extension.create({
+                    addKeyboardShortcuts: () => {
+                        return {
+                            'Enter': () => {
+                                const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId')
+                                chatTextEditor.sendMessageFunc({
+                                    type: 'attachment'
+                                })
+                                return true
+                            }
+                        }
                     }
-                  }
-                }})
+                })
             ]
-          })
-          document.addEventListener('keydown', this.initialChat);
-          document.addEventListener('paste', this.pasteImage);
-          if(this.chatId){
-            window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({
+        })
+        document.addEventListener('keydown', this.initialChat);
+        document.addEventListener('paste', this.pasteImage);
+        if (this.chatId) {
+            window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
                 key: this.chatId,
                 timestamp: Date.now()
             }))
         }
+
+        let callback = (entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+
+                    this.isPageVisible = true
+                    if (this.chatId) {
+                        window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
+                            key: this.chatId,
+                            timestamp: Date.now()
+                        }))
+
+                    }
+                } else {
+                    this.isPageVisible = false
+                }
+            });
+        };
+
+        let options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.5
+        };
+
+        // Create the observer with the callback function and options
+        this.observer = new IntersectionObserver(callback, options);
+        const mainContainer = this.shadowRoot.querySelector('.main-container')
+
+        this.observer.observe(mainContainer);
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
-        if(this.webSocket){
+        if (this.webSocket) {
             this.webSocket.close(1000, 'switch chat')
-            this.webSocket= ''
+            this.webSocket = ''
         }
-        if(this.webWorker){
+        if (this.webWorker) {
             this.webWorker.terminate();
         }
-        if(this.webWorkerFile){
+        if (this.webWorkerFile) {
             this.webWorkerFile.terminate();
         }
-        if(this.editor){
+        if (this.editor) {
             this.editor.destroy()
         }
-        if(this.editorImage){
+        if (this.editorImage) {
             this.editorImage.destroy()
         }
-        
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+
         document.removeEventListener('keydown', this.initialChat);
         document.removeEventListener('paste', this.pasteImage);
-        if(this.chatId){
-            window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({
+        if (this.chatId) {
+            window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
                 key: this.chatId,
                 timestamp: Date.now()
             }))
-           
+
         }
-       
+
     }
 
-      initialChat(e) {
+    initialChat(e) {
         if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser && !this.openGifModal) {
             // WARNING: Deprecated methods from KeyBoard Event
             if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
@@ -2045,13 +2080,13 @@ class ChatPage extends LitElement {
                 this.editor.commands.insertContent(e.key)
                 this.editor.commands.focus('end')
             } else {
-               this.editor.commands.focus('end')
+                this.editor.commands.focus('end')
             }
         }
     }
 
 
-    async pasteImage (e) { 
+    async pasteImage(e) {
         const event = e;
         const handleTransferIntoURL = (dataTransfer) => {
             try {
@@ -2069,20 +2104,20 @@ class ChatPage extends LitElement {
                 return;
             } else {
                 const item_list = await navigator.clipboard.read();
-                let image_type; 
-                const item = item_list.find(item => 
-                    item.types.some( type => { 
-                    if (type.startsWith( 'image/')) {
-                        image_type = type; 
-                        return true;
-                    }
-                })
+                let image_type;
+                const item = item_list.find(item =>
+                    item.types.some(type => {
+                        if (type.startsWith('image/')) {
+                            image_type = type;
+                            return true;
+                        }
+                    })
                 );
                 if (item) {
-                    try {                        
+                    try {
                         const blob = item && await item.getType(image_type);
                         let file = new File([blob], "name", {
-                        type: image_type
+                            type: image_type
                         });
                         this.insertImage(file);
                     } catch (error) {
@@ -2094,120 +2129,120 @@ class ChatPage extends LitElement {
                     return
                 }
             }
-        }   
-
-    }
-
-   async goToRepliedMessage(message, clickedOnMessage){
-    const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
-    
-    if(findMessage){
-        findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        const findElement = findMessage.shadowRoot.querySelector('.message-parent')
-        if(findElement){
-            findElement.classList.add('blink-bg')
-            setTimeout(()=> {
-                findElement.classList.remove('blink-bg')
-            }, 2000)
         }
-  
-        return
-    }
-    if((message.timestamp -  this.messagesRendered[0].timestamp)  > 86400000){
-        let errorMsg = get("chatpage.cchange66")
-        parentEpml.request('showSnackBar', `${errorMsg}`)
-        return
-    } 
 
-  
-
-    
-    if((message.timestamp -  this.messagesRendered[0].timestamp)  < 86400000){
-        const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.signature)
-    if(findOriginalMessage){
-        const messageClientRect = findOriginalMessage.getBoundingClientRect()
-        this.isLoadingGoToRepliedMessage = {
-            ...this.isLoadingGoToRepliedMessage,
-            loading: true,
-            left: messageClientRect.left,
-            top: messageClientRect.top,
-            offsetHeight: findOriginalMessage.offsetHeight
-        }
-    }
-       await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
-       const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
-    if(findMessage){
-        this.isLoadingGoToRepliedMessage =   {
-            ...this.isLoadingGoToRepliedMessage,
-            loading: false
-        }
-        findMessage.scrollIntoView({block: 'center' })
-        const findElement = findMessage.shadowRoot.querySelector('.message-parent')
-        if(findElement){
-            findElement.classList.add('blink-bg')
-            setTimeout(()=> {
-                findElement.classList.remove('blink-bg')
-            }, 2000)
-        }
-        
-        return
-    }
-    this.isLoadingGoToRepliedMessage = {
-        ...this.isLoadingGoToRepliedMessage,
-        loading: false
-    }
-    let errorMsg = get("chatpage.cchange66")
-    parentEpml.request('showSnackBar', `${errorMsg}`)
-    
     }
 
-   }
+    async goToRepliedMessage(message, clickedOnMessage) {
+        const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
+
+        if (findMessage) {
+            findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
+            const findElement = findMessage.shadowRoot.querySelector('.message-parent')
+            if (findElement) {
+                findElement.classList.add('blink-bg')
+                setTimeout(() => {
+                    findElement.classList.remove('blink-bg')
+                }, 2000)
+            }
+
+            return
+        }
+        if ((message.timestamp - this.messagesRendered[0].timestamp) > 86400000) {
+            let errorMsg = get("chatpage.cchange66")
+            parentEpml.request('showSnackBar', `${errorMsg}`)
+            return
+        }
+
+
+
+
+        if ((message.timestamp - this.messagesRendered[0].timestamp) < 86400000) {
+            const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.signature)
+            if (findOriginalMessage) {
+                const messageClientRect = findOriginalMessage.getBoundingClientRect()
+                this.isLoadingGoToRepliedMessage = {
+                    ...this.isLoadingGoToRepliedMessage,
+                    loading: true,
+                    left: messageClientRect.left,
+                    top: messageClientRect.top,
+                    offsetHeight: findOriginalMessage.offsetHeight
+                }
+            }
+            await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
+            const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
+            if (findMessage) {
+                this.isLoadingGoToRepliedMessage = {
+                    ...this.isLoadingGoToRepliedMessage,
+                    loading: false
+                }
+                findMessage.scrollIntoView({ block: 'center' })
+                const findElement = findMessage.shadowRoot.querySelector('.message-parent')
+                if (findElement) {
+                    findElement.classList.add('blink-bg')
+                    setTimeout(() => {
+                        findElement.classList.remove('blink-bg')
+                    }, 2000)
+                }
+
+                return
+            }
+            this.isLoadingGoToRepliedMessage = {
+                ...this.isLoadingGoToRepliedMessage,
+                loading: false
+            }
+            let errorMsg = get("chatpage.cchange66")
+            parentEpml.request('showSnackBar', `${errorMsg}`)
+
+        }
+
+    }
 
     async userSearch() {
         const nameValue = this.shadowRoot.getElementById('sendTo').value;
-            if (!nameValue) {
+        if (!nameValue) {
+            this.userFound = [];
+            this.userFoundModalOpen = false;
+            this.loading = false;
+            return;
+        }
+        try {
+            const result = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/names/${nameValue}`
+            })
+            if (result.error === 401) {
+                this.loading = false;
                 this.userFound = [];
-                this.userFoundModalOpen = false;
                 this.loading = false;
-                return;
+            } else {
+                this.userFound = [
+                    ...this.userFound,
+                    result,
+                ];
             }
-            try {
-                const result = await parentEpml.request('apiCall', {
-                    type: 'api',
-                    url: `/names/${nameValue}`
-                })
-                if (result.error === 401) {
-                    this.loading = false;
-                    this.userFound = [];
-                    this.loading = false;
-                } else {
-                    this.userFound = [
-                        ...this.userFound, 
-                        result,
-                      ];
-                }
-                this.userFoundModalOpen = true;
-            } catch (error) {
-                this.loading = false;
-                let err4string = get("chatpage.cchange35");
-                parentEpml.request('showSnackBar', `${err4string}`)
-            }
-    }    
+            this.userFoundModalOpen = true;
+        } catch (error) {
+            this.loading = false;
+            let err4string = get("chatpage.cchange35");
+            parentEpml.request('showSnackBar', `${err4string}`)
+        }
+    }
 
-    setForwardProperties(forwardedMessage){
+    setForwardProperties(forwardedMessage) {
         this.openForwardOpen = true
         this.forwardedMessage = forwardedMessage
     }
-    
+
     async sendForwardMessage() {
         let parsedMessageObj = {};
         try {
-             parsedMessageObj = JSON.parse(this.forwardedMessage);
-            } 
+            parsedMessageObj = JSON.parse(this.forwardedMessage);
+        }
         catch (error) {
             parsedMessageObj = {};
         }
-        
+
         try {
             const message = {
                 ...parsedMessageObj,
@@ -2224,7 +2259,7 @@ class ChatPage extends LitElement {
         this.lastMessageRefVisible = props;
     }
 
-    
+
     insertFile(file) {
         if (file.type.includes('image')) {
             this.imageFile = file;
@@ -2234,7 +2269,7 @@ class ChatPage extends LitElement {
             this.attachment = file;
             this.currentEditor = "newAttachmentChat";
             return;
-        }     
+        }
         //  parentEpml.request('showSnackBar', get("chatpage.cchange28")); 
     }
 
@@ -2251,11 +2286,11 @@ class ChatPage extends LitElement {
     }
 
     changeMsgInput(id) {
-        this.chatMessageInput  = this.shadowRoot.getElementById(id);
+        this.chatMessageInput = this.shadowRoot.getElementById(id);
         this.initChatEditor();
     }
 
-    async initUpdate(){
+    async initUpdate() {
         this.pageNumber = 1
         const getAddressPublicKey = () => {
 
@@ -2282,7 +2317,7 @@ class ChatPage extends LitElement {
                 }
             })
         };
-       
+
 
         setTimeout(() => {
             const isRecipient = this.chatId.includes('direct') === true ? true : false;
@@ -2293,7 +2328,7 @@ class ChatPage extends LitElement {
             this.chatEditorPlaceholder = placeholder;
 
             isRecipient ? getAddressPublicKey() : this.fetchChatMessages(this._chatId);
-            
+
             // Init ChatEditor
             // this.initChatEditor();
         }, 100)
@@ -2301,46 +2336,46 @@ class ChatPage extends LitElement {
 
         const isRecipient = this.chatId.includes('direct') === true ? true : false;
         const groupId = this.chatId.split('/')[1];
-        if(!isRecipient && groupId.toString() !== '0'){
+        if (!isRecipient && groupId.toString() !== '0') {
 
             try {
                 const getMembers = await parentEpml.request("apiCall", {
-					type: "api",
-					url: `/groups/members/${groupId}?onlyAdmins=false&limit=20&offset=0`,
-				});
+                    type: "api",
+                    url: `/groups/members/${groupId}?onlyAdmins=false&limit=20&offset=0`,
+                });
                 const getMembersAdmins = await parentEpml.request("apiCall", {
-					type: "api",
-					url: `/groups/members/${groupId}?onlyAdmins=true&limit=20`,
-				});
+                    type: "api",
+                    url: `/groups/members/${groupId}?onlyAdmins=true&limit=20`,
+                });
                 const getGroupInfo = await parentEpml.request("apiCall", {
-					type: "api",
-					url: `/groups/${groupId}`,
-				});
+                    type: "api",
+                    url: `/groups/${groupId}`,
+                });
                 const getMembersAdminsWithName = (getMembersAdmins.members || []).map(async (member) => {
                     let memberItem = member
                     try {
-                      const name =  await this.getName(member.member)
-                       memberItem = {
-                        address: member.member,
-                        name: name ? name : undefined
-                      }
+                        const name = await this.getName(member.member)
+                        memberItem = {
+                            address: member.member,
+                            name: name ? name : undefined
+                        }
                     } catch (error) {
                     }
-            
+
                     return memberItem
                 })
                 const membersAdminsWithName = await Promise.all(getMembersAdminsWithName)
                 const getMembersWithName = (getMembers.members || []).map(async (member) => {
                     let memberItem = member
                     try {
-                      const name =  await this.getName(member.member)
-                       memberItem = {
-                        address: member.member,
-                        name: name ? name : undefined
-                      }
+                        const name = await this.getName(member.member)
+                        memberItem = {
+                            address: member.member,
+                            name: name ? name : undefined
+                        }
                     } catch (error) {
                     }
-            
+
                     return memberItem
                 })
                 const membersWithName = await Promise.all(getMembersWithName)
@@ -2350,12 +2385,12 @@ class ChatPage extends LitElement {
             } catch (error) {
             }
         }
-        
-     
+
+
     }
 
     async firstUpdated() {
-        window.addEventListener('storage', () => {                                                
+        window.addEventListener('storage', () => {
             const checkLanguage = localStorage.getItem('qortalLanguage');
             use(checkLanguage);
             this.userLanguage = checkLanguage;
@@ -2373,16 +2408,16 @@ class ChatPage extends LitElement {
             }).then(res => {
                 this.balance = res
             })
-           
+
         })
         parentEpml.imReady();
-    
-    const isEnabledChatEnter = localStorage.getItem('isEnabledChatEnter') 
 
-        if(isEnabledChatEnter){
-            this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true 
+        const isEnabledChatEnter = localStorage.getItem('isEnabledChatEnter')
+
+        if (isEnabledChatEnter) {
+            this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true
         }
-    
+
     }
 
     async updated(changedProperties) {
@@ -2391,29 +2426,29 @@ class ChatPage extends LitElement {
             if (userLang) {
                 await new Promise(r => setTimeout(r, 100));
                 this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`;
-            }       
+            }
         }
 
 
-     
+
         if (changedProperties && changedProperties.has('isLoading')) {
             if (this.isLoading === true && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) {
                 this.editor.setEditable(false)
             }
-            if (this.isLoading === false && this.currentEditor === '_chatEditorDOM' && this.editor &&  this.editor.setEditable) {
+            if (this.isLoading === false && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) {
                 this.editor.setEditable(true)
             }
         }
     }
 
-    async getName (recipient) {
+    async getName(recipient) {
         try {
             const getNames = await parentEpml.request("apiCall", {
                 type: "api",
                 url: `/names/address/${recipient}`,
             });
 
-            if (Array.isArray(getNames) && getNames.length > 0 ) {
+            if (Array.isArray(getNames) && getNames.length > 0) {
                 return getNames[0].name
             } else {
                 return ''
@@ -2424,15 +2459,15 @@ class ChatPage extends LitElement {
         }
     }
 
-   async renderPlaceholder() {
-        const getName = async (recipient)=> {
+    async renderPlaceholder() {
+        const getName = async (recipient) => {
             try {
                 const getNames = await parentEpml.request("apiCall", {
-					type: "api",
-					url: `/names/address/${recipient}`,
-				});
+                    type: "api",
+                    url: `/names/address/${recipient}`,
+                });
 
-                if (Array.isArray(getNames) && getNames.length > 0 ) {
+                if (Array.isArray(getNames) && getNames.length > 0) {
                     return getNames[0].name
                 } else {
                     return ''
@@ -2443,8 +2478,8 @@ class ChatPage extends LitElement {
             }
         }
         let userName = ""
-        if(this.isReceipient){
-             userName = await getName(this._chatId);
+        if (this.isReceipient) {
+            userName = await getName(this._chatId);
         }
         const mstring = get("chatpage.cchange8");
         const placeholder = this.isReceipient === true ? `Message ${userName ? userName : this._chatId}` : `${mstring}`;
@@ -2461,12 +2496,12 @@ class ChatPage extends LitElement {
             .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
             .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
             .sendMessage=${(val) => this._sendMessage(val)}
-            .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
+            .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams) => this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
             .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
             .emojiPicker=${this.emojiPicker} 
             ?isLoadingMessages=${this.isLoadingOldMessages}
             .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
-            .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
+            .setForwardProperties=${(forwardedMessage) => this.setForwardProperties(forwardedMessage)}
             .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
             .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
             .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
@@ -2474,13 +2509,13 @@ class ChatPage extends LitElement {
             .setSelectedHead=${(val) => this.setSelectedHead(val)}
             ?openTipUser=${this.openTipUser}
             .selectedHead=${this.selectedHead}
-            .goToRepliedMessage=${(val, val2)=> this.goToRepliedMessage(val, val2)}
-            .getOldMessageAfter=${(val)=> this.getOldMessageAfter(val)}
+            .goToRepliedMessage=${(val, val2) => this.goToRepliedMessage(val, val2)}
+            .getOldMessageAfter=${(val) => this.getOldMessageAfter(val)}
             >
             </chat-scroller>
         `
     }
-    setIsLoadingMessages(val){
+    setIsLoadingMessages(val) {
         this.isLoadingOldMessages = val
     }
     async getUpdateComplete() {
@@ -2499,14 +2534,14 @@ class ChatPage extends LitElement {
         return true;
     }
 
-    updatePlaceholder(editor, text){
+    updatePlaceholder(editor, text) {
         editor.extensionManager.extensions.forEach((extension) => {
             if (extension.name === "placeholder") {
-    
-              extension.options["placeholder"] = text
-              editor.commands.focus('end')
+
+                extension.options["placeholder"] = text
+                editor.commands.focus('end')
             }
-          })
+        })
     }
 
     async getOldMessageDynamic(limit, before, after) {
@@ -2520,11 +2555,11 @@ class ChatPage extends LitElement {
             const decodeMsgs = getInitialMessages.map((eachMessage) => {
                 return this.decodeMessage(eachMessage)
             })
-            
-         
+
+
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
@@ -2537,14 +2572,14 @@ class ChatPage extends LitElement {
             await this.getUpdateComplete();
             const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
 
-            if(viewElement){
+            if (viewElement) {
                 viewElement.scrollTop = 200
             }
-                
 
-            
-           
-        
+
+
+
+
         } else {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -2558,12 +2593,12 @@ class ChatPage extends LitElement {
 
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
             })
-          
+
             this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
                 return a.timestamp
                     - b.timestamp
@@ -2572,20 +2607,20 @@ class ChatPage extends LitElement {
             await this.getUpdateComplete();
             const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
 
-            if(viewElement){
+            if (viewElement) {
                 viewElement.scrollTop = 200
             }
-       
-                
-          
-         
+
+
+
+
 
         }
     }
 
 
     async getOldMessage(scrollElement) {
- 
+
         if (this.isReceipient) {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -2595,11 +2630,11 @@ class ChatPage extends LitElement {
             const decodeMsgs = getInitialMessages.map((eachMessage) => {
                 return this.decodeMessage(eachMessage)
             })
-            
-         
+
+
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
@@ -2612,13 +2647,13 @@ class ChatPage extends LitElement {
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
 
-            const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature)
-          
-            if(findElement){
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-           
-        
+
+
         } else {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -2632,12 +2667,12 @@ class ChatPage extends LitElement {
 
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
             })
-          
+
             this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
                 return a.timestamp
                     - b.timestamp
@@ -2645,18 +2680,18 @@ class ChatPage extends LitElement {
             this.isLoadingOldMessages = false
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
-            const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature)
-            
-            if(findElement){
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-         
+
 
         }
     }
 
     async getOldMessageAfter(scrollElement) {
- 
+
         if (this.isReceipient) {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -2666,11 +2701,11 @@ class ChatPage extends LitElement {
             const decodeMsgs = getInitialMessages.map((eachMessage) => {
                 return this.decodeMessage(eachMessage)
             })
-            
-         
+
+
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
@@ -2683,13 +2718,13 @@ class ChatPage extends LitElement {
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
 
-            const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature)
-          
-            if(findElement){
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-           
-        
+
+
         } else {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -2703,43 +2738,43 @@ class ChatPage extends LitElement {
 
             const replacedMessages = await replaceMessagesEdited({
                 decodedMessages: decodeMsgs,
-	            parentEpml,
+                parentEpml,
                 isReceipient: this.isReceipient,
                 decodeMessageFunc: this.decodeMessage,
                 _publicKey: this._publicKey
             })
-          
-            this.messagesRendered = [ ...this.messagesRendered, ...replacedMessages].sort(function (a, b) {
+
+            this.messagesRendered = [...this.messagesRendered, ...replacedMessages].sort(function (a, b) {
                 return a.timestamp
                     - b.timestamp
             })
             this.isLoadingOldMessages = false
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
-            const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature)
-            
-            if(findElement){
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-         
+
 
         }
     }
 
     async processMessages(messages, isInitial) {
         const isReceipient = this.chatId.includes('direct')
-         const decodedMessages = messages.map((eachMessage) => {
+        const decodedMessages = messages.map((eachMessage) => {
 
-                if (eachMessage.isText === true) {
-                    this.messageSignature = eachMessage.signature
-                    let _eachMessage = this.decodeMessage(eachMessage)
-                    return _eachMessage
-                } else {
-                    this.messageSignature = eachMessage.signature
-                    let _eachMessage = this.decodeMessage(eachMessage)
-                    return _eachMessage
-                }
-         })
+            if (eachMessage.isText === true) {
+                this.messageSignature = eachMessage.signature
+                let _eachMessage = this.decodeMessage(eachMessage)
+                return _eachMessage
+            } else {
+                this.messageSignature = eachMessage.signature
+                let _eachMessage = this.decodeMessage(eachMessage)
+                return _eachMessage
+            }
+        })
         if (isInitial) {
             this.chatEditorPlaceholder = await this.renderPlaceholder();
             const replacedMessages = await replaceMessagesEdited({
@@ -2762,25 +2797,25 @@ class ChatPage extends LitElement {
             setTimeout(() => this.downElementObserver(), 500);
         } else {
             const replacedMessages = await replaceMessagesEdited({
-            decodedMessages: decodedMessages,
-	        parentEpml,
-            isReceipient: isReceipient,
-            decodeMessageFunc: this.decodeMessage,
-            _publicKey: this._publicKey,
-            isNotInitial: true
+                decodedMessages: decodedMessages,
+                parentEpml,
+                isReceipient: isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey,
+                isNotInitial: true
             })
 
-            const renderEachMessage = replacedMessages.map(async(msg)=> {
-              await  this.renderNewMessage(msg)
+            const renderEachMessage = replacedMessages.map(async (msg) => {
+                await this.renderNewMessage(msg)
             })
-          await Promise.all(renderEachMessage)
-          if(this.chatId){
-            window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({
-                key: this.chatId,
-                timestamp: Date.now()
-            }))
-           
-        }
+            await Promise.all(renderEachMessage)
+            if (this.chatId && this.isPageVisible) {
+                window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
+                    key: this.chatId,
+                    timestamp: Date.now()
+                }))
+
+            }
             // this.newMessages = this.newMessages.concat(_newMessages)
             this.messagesRendered = [...this.messagesRendered].sort(function (a, b) {
                 return a.timestamp
@@ -2789,35 +2824,35 @@ class ChatPage extends LitElement {
         }
     }
 
-     // set replied to message in chat editor
+    // set replied to message in chat editor
 
-     setRepliedToMessageObj(messageObj) {
+    setRepliedToMessageObj(messageObj) {
         this.editor.commands.focus('end')
-        this.repliedToMessageObj = {...messageObj};
+        this.repliedToMessageObj = { ...messageObj };
         this.editedMessageObj = null;
         this.requestUpdate();
     }
 
     // set edited message in chat editor
 
-     setEditedMessageObj(messageObj) {
+    setEditedMessageObj(messageObj) {
         this.editor.commands.focus('end')
-        this.editedMessageObj = {...messageObj};
+        this.editedMessageObj = { ...messageObj };
         this.repliedToMessageObj = null;
         this.requestUpdate();
     }
-    
+
     closeEditMessageContainer() {
         this.editedMessageObj = null;
         this.isEditMessageOpen = !this.isEditMessageOpen;
         this.editor.commands.setContent('')
     }
- 
+
     closeRepliedToContainer() {
         this.repliedToMessageObj = null;
         this.requestUpdate();
     }
- 
+
 
 
     /**
@@ -2828,14 +2863,16 @@ class ChatPage extends LitElement {
     */
 
     async renderNewMessage(newMessage) {
-        if(newMessage.chatReference){
-            const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) )
-            if(findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender){
+        if (newMessage.chatReference) {
+            const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference))
+            if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) {
                 const newMessagesRendered = [...this.messagesRendered]
-                newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
-					sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp }
+                newMessagesRendered[findOriginalMessageIndex] = {
+                    ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
+                    sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp
+                }
                 this.messagesRendered = newMessagesRendered
-            await this.getUpdateComplete();
+                await this.getUpdateComplete();
             }
 
             return
@@ -2869,17 +2906,17 @@ class ChatPage extends LitElement {
      * @param {Object} encodedMessageObj 
      * 
      */
-    decodeMessage(encodedMessageObj, isReceipient, _publicKey ) {
+    decodeMessage(encodedMessageObj, isReceipient, _publicKey) {
         let isReceipientVar;
         let _publicKeyVar;
         try {
-            isReceipientVar =  this.isReceipient === undefined ? isReceipient : this.isReceipient;
+            isReceipientVar = this.isReceipient === undefined ? isReceipient : this.isReceipient;
             _publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey;
         } catch (error) {
             isReceipientVar = isReceipient;
             _publicKeyVar = _publicKey;
         }
-        
+
         let decodedMessageObj = {};
 
         if (isReceipientVar === true) {
@@ -2906,6 +2943,7 @@ class ChatPage extends LitElement {
     async fetchChatMessages(chatId) {
 
         const initDirect = async (cid, noInitial) => {
+            let timeoutId
             let initial = 0
 
             let directSocketTimeout
@@ -2924,7 +2962,7 @@ class ChatPage extends LitElement {
                 directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&encoding=BASE64&limit=1`;
             }
 
-            this.webSocket  = new WebSocket(directSocketLink);
+            this.webSocket = new WebSocket(directSocketLink);
             // Open Connection
             this.webSocket.onopen = () => {
                 setTimeout(pingDirectSocket, 50)
@@ -2932,8 +2970,13 @@ class ChatPage extends LitElement {
 
             // Message Event
             this.webSocket.onmessage = async (e) => {
+                if (e.data === 'pong') {
+                    clearTimeout(timeoutId);
+                    directSocketTimeout = setTimeout(pingDirectSocket, 45000)
+                    return
+                }
                 if (initial === 0) {
-                    if(noInitial) return
+                    if (noInitial) return
                     const cachedData = null
                     let getInitialMessages = []
                     if (cachedData && cachedData.length !== 0) {
@@ -2958,21 +3001,21 @@ class ChatPage extends LitElement {
 
                 } else {
                     try {
-                    if(e.data){
-                        this.processMessages(JSON.parse(e.data), false)
-                    }
+                        if (e.data) {
+                            this.processMessages(JSON.parse(e.data), false)
+                        }
                     } catch (error) {
 
                     }
 
-                    
+
                 }
             }
 
             // Closed Event
             this.webSocket.onclose = (e) => {
                 clearTimeout(directSocketTimeout)
-                if(e.reason === 'switch chat') return
+                if (e.reason === 'switch chat') return
                 restartDirectWebSocket()
             }
 
@@ -2983,10 +3026,13 @@ class ChatPage extends LitElement {
 
             const pingDirectSocket = () => {
                 this.webSocket.send('ping')
-
-                directSocketTimeout = setTimeout(pingDirectSocket, 295000)
+                timeoutId = setTimeout(() => {
+                    this.webSocket.close();
+                    clearTimeout(directSocketTimeout)
+                }, 5000);
             }
 
+
         };
         const restartDirectWebSocket = () => {
             const noInitial = true
@@ -2999,6 +3045,7 @@ class ChatPage extends LitElement {
         }
 
         const initGroup = (gId, noInitial) => {
+            let timeoutId
             let groupId = Number(gId)
 
             let initial = 0
@@ -3029,9 +3076,13 @@ class ChatPage extends LitElement {
 
             // Message Event
             this.webSocket.onmessage = async (e) => {
-
+                if (e.data === 'pong') {
+                    clearTimeout(timeoutId);
+                    groupSocketTimeout = setTimeout(pingGroupSocket, 45000)
+                    return
+                }
                 if (initial === 0) {
-                    if(noInitial) return
+                    if (noInitial) return
                     const cachedData = null;
                     let getInitialMessages = []
                     if (cachedData && cachedData.length !== 0) {
@@ -3059,31 +3110,34 @@ class ChatPage extends LitElement {
                     try {
                         if (e.data) {
                             this.processMessages(JSON.parse(e.data), false)
-                        } 
+                        }
                     } catch (error) {
 
                     }
 
-                   
+
                 }
             }
 
             // Closed Event
             this.webSocket.onclose = (e) => {
                 clearTimeout(groupSocketTimeout)
-                if(e.reason === 'switch chat') return
+                if (e.reason === 'switch chat') return
                 restartGroupWebSocket()
             }
 
             // Error Event
             this.webSocket.onerror = () => {
                 clearTimeout(groupSocketTimeout)
+                this.webSocket.close();
             }
 
             const pingGroupSocket = () => {
                 this.webSocket.send('ping')
-
-                groupSocketTimeout = setTimeout(pingGroupSocket, 295000)
+                timeoutId = setTimeout(() => {
+                    this.webSocket.close();
+                    clearTimeout(groupSocketTimeout)
+                }, 5000); // Close the WebSocket connection if no pong message is received within 5 seconds.
             }
 
         };
@@ -3105,25 +3159,25 @@ class ChatPage extends LitElement {
         // Add to the messages... TODO: Save messages to localstorage and fetch from it to make it persistent... 
     }
 
-    resetChatEditor(){
-        if(this.currentEditor === '_chatEditorDOM'){
+    resetChatEditor() {
+        if (this.currentEditor === '_chatEditorDOM') {
             this.editor.commands.setContent('')
         }
-        if(this.currentEditor === 'newChat'){
+        if (this.currentEditor === 'newChat') {
             this.editorImage.commands.setContent('')
         }
-        if(this.currentEditor === 'newAttachmentChat'){
+        if (this.currentEditor === 'newAttachmentChat') {
             this.editorAttachment.commands.setContent('')
         }
     }
 
-   async _sendMessage(outSideMsg, msg) {
-        if(this.isReceipient){
-           let hasPublicKey = true
-            if(!this._publicKey.hasPubKey){
+    async _sendMessage(outSideMsg, msg) {
+        if (this.isReceipient) {
+            let hasPublicKey = true
+            if (!this._publicKey.hasPubKey) {
                 hasPublicKey = false
                 try {
-                    const res =   await parentEpml.request('apiCall', {
+                    const res = await parentEpml.request('apiCall', {
                         type: 'api',
                         url: `/addresses/publickey/${this.selectedAddress.address}`
                     })
@@ -3141,12 +3195,12 @@ class ChatPage extends LitElement {
                 } catch (error) {
                 }
 
-                if(!hasPublicKey || !this._publicKey.hasPubKey){
+                if (!hasPublicKey || !this._publicKey.hasPubKey) {
                     let err4string = get("chatpage.cchange39");
-                parentEpml.request('showSnackBar', `${err4string}`)
-                return
+                    parentEpml.request('showSnackBar', `${err4string}`)
+                    return
                 }
-                
+
             }
         }
         // have params to determine if it's a reply or not
@@ -3158,15 +3212,15 @@ class ChatPage extends LitElement {
         let typeMessage = 'regular';
         this.isLoading = true;
         const trimmedMessage = msg
-        
-        const getName = async (recipient)=> {
+
+        const getName = async (recipient) => {
             try {
                 const getNames = await parentEpml.request("apiCall", {
-					type: "api",
-					url: `/names/address/${recipient}`,
-				});
+                    type: "api",
+                    url: `/names/address/${recipient}`,
+                });
 
-                if (Array.isArray(getNames) && getNames.length > 0 ) {
+                if (Array.isArray(getNames) && getNames.length > 0) {
                     return getNames[0].name
                 } else {
                     return ''
@@ -3187,85 +3241,85 @@ class ChatPage extends LitElement {
             if (this.webWorkerFile) {
                 this.webWorkerFile.terminate();
                 this.webWorkerFile = null;
-            } 
+            }
 
             this.webWorkerFile = new WebWorkerFile();
 
-            const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
+            const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
                 const byteCharacters = atob(b64Data);
                 const byteArrays = [];
-                
+
                 for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                     const slice = byteCharacters.slice(offset, offset + sliceSize);
-                
+
                     const byteNumbers = new Array(slice.length);
                     for (let i = 0; i < slice.length; i++) {
-                    byteNumbers[i] = slice.charCodeAt(i);
+                        byteNumbers[i] = slice.charCodeAt(i);
                     }
-                
+
                     const byteArray = new Uint8Array(byteNumbers);
                     byteArrays.push(byteArray);
                 }
-                
-                const blob = new Blob(byteArrays, {type: contentType});
+
+                const blob = new Blob(byteArrays, { type: contentType });
                 return blob;
             }
             const blob = b64toBlob(str, 'image/png');
-                await new Promise(resolve => {
-                    new Compressor(blob, {
-                        quality: 0.6,
-                        maxWidth: 500,
-                        success(result) {
-                            const file = new File([result], "name", {
-                                type: 'image/png'
-                            });
-                        
-                            compressedFile = file;
-                            resolve();
-                        },
-                        error(err) {
-                            console.log(err.message);
-                        },
-                    })
-                })
-                try {
-                    await publishData({
-                        registeredName: userName,
-                        file : compressedFile,
-                        service: 'QCHAT_IMAGE',
-                        identifier: identifier,
-                        parentEpml,
-                        metaData: undefined,
-                        uploadType: 'file',
-                        selectedAddress: this.selectedAddress,
-                        worker: this.webWorkerFile
-                    })
-                    this.isDeletingImage = false
-                } catch (error) {
-                    this.isLoading = false;
-                    return
-                }
-                    typeMessage = 'edit';
-                    let chatReference = outSideMsg.editedMessageObj.signature;
+            await new Promise(resolve => {
+                new Compressor(blob, {
+                    quality: 0.6,
+                    maxWidth: 500,
+                    success(result) {
+                        const file = new File([result], "name", {
+                            type: 'image/png'
+                        });
 
-                if(outSideMsg.editedMessageObj.chatReference){
-                    chatReference = outSideMsg.editedMessageObj.chatReference;
-                }
-            
-                let message = "";
+                        compressedFile = file;
+                        resolve();
+                    },
+                    error(err) {
+                        console.log(err.message);
+                    },
+                })
+            })
+            try {
+                await publishData({
+                    registeredName: userName,
+                    file: compressedFile,
+                    service: 'QCHAT_IMAGE',
+                    identifier: identifier,
+                    parentEpml,
+                    metaData: undefined,
+                    uploadType: 'file',
+                    selectedAddress: this.selectedAddress,
+                    worker: this.webWorkerFile
+                })
+                this.isDeletingImage = false
+            } catch (error) {
+                this.isLoading = false;
+                return
+            }
+            typeMessage = 'edit';
+            let chatReference = outSideMsg.editedMessageObj.signature;
+
+            if (outSideMsg.editedMessageObj.chatReference) {
+                chatReference = outSideMsg.editedMessageObj.chatReference;
+            }
+
+            let message = "";
             try {
                 const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
                 message = parsedMessageObj;
-                
+
             } catch (error) {
                 message = outSideMsg.editedMessageObj.decodedMessage;
             }
-                const messageObject = {
-                    ...message,
-                    isImageDeleted: true
-                }
-                const stringifyMessageObject = JSON.stringify(messageObject);
-                this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
+            const messageObject = {
+                ...message,
+                isImageDeleted: true
+            }
+            const stringifyMessageObject = JSON.stringify(messageObject);
+            this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
         } else if (outSideMsg && outSideMsg.type === 'deleteAttachment') {
             this.isDeletingAttachment = true;
             let compressedFile = ''
@@ -3276,48 +3330,48 @@ class ChatPage extends LitElement {
             if (this.webWorkerFile) {
                 this.webWorkerFile.terminate();
                 this.webWorkerFile = null;
-            } 
+            }
 
             this.webWorkerFile = new WebWorkerFile();
 
-            const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
+            const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
                 const byteCharacters = atob(b64Data);
                 const byteArrays = [];
-                
+
                 for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                     const slice = byteCharacters.slice(offset, offset + sliceSize);
-                
+
                     const byteNumbers = new Array(slice.length);
                     for (let i = 0; i < slice.length; i++) {
-                    byteNumbers[i] = slice.charCodeAt(i);
+                        byteNumbers[i] = slice.charCodeAt(i);
                     }
-                
+
                     const byteArray = new Uint8Array(byteNumbers);
                     byteArrays.push(byteArray);
                 }
-                
-                const blob = new Blob(byteArrays, {type: contentType});
+
+                const blob = new Blob(byteArrays, { type: contentType });
                 return blob;
             }
 
             const blob = b64toBlob(str, 'image/png');
-                await new Promise(resolve => {
-                    new Compressor(blob, {
-                        quality: 0.6,
-                        maxWidth: 500,
-                        success(result) {
-                            const file = new File([result], "name", {
-                                type: 'image/png'
-                            });
-                        
-                            compressedFile = file;
-                            resolve();
-                        },
-                        error(err) {
-                            console.log(err.message);
-                        },
-                    })
+            await new Promise(resolve => {
+                new Compressor(blob, {
+                    quality: 0.6,
+                    maxWidth: 500,
+                    success(result) {
+                        const file = new File([result], "name", {
+                            type: 'image/png'
+                        });
+
+                        compressedFile = file;
+                        resolve();
+                    },
+                    error(err) {
+                        console.log(err.message);
+                    },
                 })
+            })
 
             try {
                 await publishData({
@@ -3336,21 +3390,21 @@ class ChatPage extends LitElement {
                 this.isLoading = false;
                 return
             }
-                typeMessage = 'edit';
-                let chatReference = outSideMsg.editedMessageObj.signature;
+            typeMessage = 'edit';
+            let chatReference = outSideMsg.editedMessageObj.signature;
 
-            if(outSideMsg.editedMessageObj.chatReference){
+            if (outSideMsg.editedMessageObj.chatReference) {
                 chatReference = outSideMsg.editedMessageObj.chatReference;
             }
-        
+
             let message = "";
-        try {
-            const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
-            message = parsedMessageObj;
-            
-        } catch (error) {
-            message = outSideMsg.editedMessageObj.decodedMessage;
-        }
+            try {
+                const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
+                message = parsedMessageObj;
+
+            } catch (error) {
+                message = outSideMsg.editedMessageObj.decodedMessage;
+            }
             const messageObject = {
                 ...message,
                 isAttachmentDeleted: true
@@ -3371,7 +3425,7 @@ class ChatPage extends LitElement {
             if (this.webWorkerFile) {
                 this.webWorkerFile.terminate();
                 this.webWorkerFile = null;
-            } 
+            }
 
             this.webWorkerFile = new WebWorkerFile();
 
@@ -3380,10 +3434,10 @@ class ChatPage extends LitElement {
             const identifier = `qchat_${id}`;
             let compressedFile = '';
             await new Promise(resolve => {
-                new Compressor( image, {
+                new Compressor(image, {
                     quality: .6,
                     maxWidth: 1200,
-                    success(result){
+                    success(result) {
                         const file = new File([result], "name", {
                             type: image.type
                         });
@@ -3392,7 +3446,7 @@ class ChatPage extends LitElement {
                     },
                     error(err) {
                         console.log(err.message);
-                      },
+                    },
                 })
             })
             const fileSize = compressedFile.size;
@@ -3405,30 +3459,30 @@ class ChatPage extends LitElement {
             try {
                 await publishData({
                     registeredName: userName,
-                    file : compressedFile,
+                    file: compressedFile,
                     service: 'QCHAT_IMAGE',
-                    identifier : identifier,
+                    identifier: identifier,
                     parentEpml,
                     metaData: undefined,
                     uploadType: 'file',
                     selectedAddress: this.selectedAddress,
                     worker: this.webWorkerFile
                 });
-            this.isUploadingImage = false;
-            this.removeImage();
+                this.isUploadingImage = false;
+                this.removeImage();
             } catch (error) {
                 console.error(error);
                 this.isLoading = false;
                 this.isUploadingImage = false;
                 return;
             }
-            
+
             const messageObject = {
                 messageText: trimmedMessage,
                 images: [{
-                        service: "QCHAT_IMAGE",
-                        name: userName,
-                        identifier: identifier
+                    service: "QCHAT_IMAGE",
+                    name: userName,
+                    identifier: identifier
                 }],
                 isImageDeleted: false,
                 repliedTo: '',
@@ -3436,7 +3490,7 @@ class ChatPage extends LitElement {
             };
             const stringifyMessageObject = JSON.stringify(messageObject);
             this.sendMessage(stringifyMessageObject, typeMessage);
-        }  else if (outSideMsg && outSideMsg.type === 'gif') {
+        } else if (outSideMsg && outSideMsg.type === 'gif') {
             const userName = await getName(this.selectedAddress.address);
             if (!userName) {
                 parentEpml.request('showSnackBar', get("chatpage.cchange27"));
@@ -3447,10 +3501,10 @@ class ChatPage extends LitElement {
             const messageObject = {
                 messageText: '',
                 gifs: [{
-                        service: outSideMsg.service,
-                        name: outSideMsg.name,
-                        identifier: outSideMsg.identifier,
-                        filePath: outSideMsg.filePath
+                    service: outSideMsg.service,
+                    name: outSideMsg.name,
+                    identifier: outSideMsg.identifier,
+                    filePath: outSideMsg.filePath
                 }],
                 repliedTo: '',
                 version: 3
@@ -3469,7 +3523,7 @@ class ChatPage extends LitElement {
             if (this.webWorkerFile) {
                 this.webWorkerFile.terminate();
                 this.webWorkerFile = null;
-            } 
+            }
 
             this.webWorkerFile = new WebWorkerFile();
 
@@ -3487,17 +3541,17 @@ class ChatPage extends LitElement {
             try {
                 await publishData({
                     registeredName: userName,
-                    file : attachment,
+                    file: attachment,
                     service: 'QCHAT_ATTACHMENT',
-                    identifier : identifier,
+                    identifier: identifier,
                     parentEpml,
                     metaData: undefined,
                     uploadType: 'file',
                     selectedAddress: this.selectedAddress,
                     worker: this.webWorkerFile
                 });
-            this.isUploadingAttachment = false;
-            this.removeAttachment();
+                this.isUploadingAttachment = false;
+                this.removeAttachment();
             } catch (error) {
                 console.error(error);
                 this.isLoading = false;
@@ -3507,11 +3561,11 @@ class ChatPage extends LitElement {
             const messageObject = {
                 messageText: trimmedMessage,
                 attachments: [{
-                        service: 'QCHAT_ATTACHMENT',
-                        name: userName,
-                        identifier: identifier,
-                        attachmentName: attachment.name,
-                        attachmentSize: attachment.size
+                    service: 'QCHAT_ATTACHMENT',
+                    name: userName,
+                    identifier: identifier,
+                    attachmentName: attachment.name,
+                    attachmentSize: attachment.size
                 }],
                 isAttachmentDeleted: false,
                 repliedTo: '',
@@ -3519,7 +3573,7 @@ class ChatPage extends LitElement {
             };
             const stringifyMessageObject = JSON.stringify(messageObject);
             this.sendMessage(stringifyMessageObject, typeMessage);
-        }  else if (outSideMsg && outSideMsg.type === 'reaction') {
+        } else if (outSideMsg && outSideMsg.type === 'reaction') {
             const userName = await getName(this.selectedAddress.address);
             typeMessage = 'edit';
             let chatReference = outSideMsg.editedMessageObj.signature;
@@ -3527,26 +3581,26 @@ class ChatPage extends LitElement {
             if (outSideMsg.editedMessageObj.chatReference) {
                 chatReference = outSideMsg.editedMessageObj.chatReference;
             }
-           
+
             let message = "";
 
-        try {
-            const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
-            message = parsedMessageObj;
-            
-        } catch (error) {
-            message = outSideMsg.editedMessageObj.decodedMessage;
-        }   
+            try {
+                const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
+                message = parsedMessageObj;
+
+            } catch (error) {
+                message = outSideMsg.editedMessageObj.decodedMessage;
+            }
 
             let reactions = message.reactions || []
-            const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction)
-            if(findEmojiIndex !== -1){
-                let users =  reactions[findEmojiIndex].users || []
-                const findUserIndex = users.findIndex((user)=> user.address === this.selectedAddress.address )
-                if(findUserIndex !== -1){
-                  users.splice(findUserIndex, 1)
+            const findEmojiIndex = reactions.findIndex((reaction) => reaction.type === outSideMsg.reaction)
+            if (findEmojiIndex !== -1) {
+                let users = reactions[findEmojiIndex].users || []
+                const findUserIndex = users.findIndex((user) => user.address === this.selectedAddress.address)
+                if (findUserIndex !== -1) {
+                    users.splice(findUserIndex, 1)
                 } else {
-                    users.push({ 
+                    users.push({
                         address: this.selectedAddress.address,
                         name: userName
                     })
@@ -3556,14 +3610,14 @@ class ChatPage extends LitElement {
                     qty: users.length,
                     users
                 }
-                if(users.length === 0){
+                if (users.length === 0) {
                     reactions.splice(findEmojiIndex, 1)
                 }
             } else {
                 reactions = [...reactions, {
                     type: outSideMsg.reaction,
                     qty: 1,
-                    users: [{ 
+                    users: [{
                         address: this.selectedAddress.address,
                         name: userName
                     }]
@@ -3578,10 +3632,10 @@ class ChatPage extends LitElement {
         } else if (/^\s*$/.test(trimmedMessage)) {
             this.isLoading = false;
 
-        } 
+        }
         else if (this.repliedToMessageObj) {
             let chatReference = this.repliedToMessageObj.signature;
-            if(this.repliedToMessageObj.chatReference){
+            if (this.repliedToMessageObj.chatReference) {
                 chatReference = this.repliedToMessageObj.chatReference;
             }
             typeMessage = 'reply';
@@ -3597,18 +3651,18 @@ class ChatPage extends LitElement {
             typeMessage = 'edit'
             let chatReference = this.editedMessageObj.signature
 
-            if(this.editedMessageObj.chatReference){
+            if (this.editedMessageObj.chatReference) {
                 chatReference = this.editedMessageObj.chatReference
             }
-           
+
             let message = ""
-        try {
-            const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage)
-            message = parsedMessageObj
-            
-        } catch (error) {
-            message = this.editedMessageObj.decodedMessage
-        }
+            try {
+                const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage)
+                message = parsedMessageObj
+
+            } catch (error) {
+                message = this.editedMessageObj.decodedMessage
+            }
             const messageObject = {
                 ...message,
                 messageText: trimmedMessage,
@@ -3624,7 +3678,7 @@ class ChatPage extends LitElement {
                 version: 3
             }
             const stringifyMessageObject = JSON.stringify(messageObject)
-           
+
             if (this.balance < 4) {
                 this.myTrimmedMeassage = ''
                 this.myTrimmedMeassage = stringifyMessageObject
@@ -3659,7 +3713,7 @@ class ChatPage extends LitElement {
                         isText: 1
                     }
                 });
-         
+
                 _computePow(chatResponse)
             } else {
                 let groupResponse = await parentEpml.request('chat', {
@@ -3686,24 +3740,24 @@ class ChatPage extends LitElement {
         const sendForwardRequest = async () => {
 
             const userInput = this.shadowRoot.getElementById("sendTo").value.trim();
-                if(!userInput && !this.forwardActiveChatHeadUrl.url) {
-                    let err4string = get("chatpage.cchange65");
-                    getSendChatResponse(false, true, err4string );
-                    return
-                } 
+            if (!userInput && !this.forwardActiveChatHeadUrl.url) {
+                let err4string = get("chatpage.cchange65");
+                getSendChatResponse(false, true, err4string);
+                return
+            }
             let publicKey = {
                 hasPubKey: false,
                 key: ''
             };
 
-            if (this.forwardActiveChatHeadUrl.url) { 
-                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];        
+            if (this.forwardActiveChatHeadUrl.url) {
+                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];
                 try {
                     const res = await parentEpml.request('apiCall', {
                         type: 'api',
                         url: `/addresses/publickey/${activeChatHeadAddress}`
                     })
-        
+
                     if (res.error === 102) {
                         publicKey.key = ''
                         publicKey.hasPubKey = false
@@ -3716,11 +3770,11 @@ class ChatPage extends LitElement {
                     }
                 } catch (error) {
                     console.error(error);
-               }
+                }
             }
-    
+
             if (!this.forwardActiveChatHeadUrl.selected && this.shadowRoot.getElementById("sendTo").value !== "") {
-                
+
                 try {
                     let userPubkey = "";
                     const validatedAddress = await parentEpml.request('apiCall', {
@@ -3732,20 +3786,8 @@ class ChatPage extends LitElement {
                         type: 'api',
                         url: `/names/${userInput}`
                     });
-                    
-                        if (validatedAddress && validatedUsername.name) {
-                            userPubkey = await parentEpml.request('apiCall', {
-                                type: 'api',
-                                url: `/addresses/publickey/${validatedUsername.owner}`
-                            });
-                            this.forwardActiveChatHeadUrl = {
-                                ...this.forwardActiveChatHeadUrl,
-                                url: `direct/${validatedUsername.owner}`,
-                                name: validatedUsername.name,
-                                selected: true
-                            };
-                        } else
-                    if (!validatedAddress && (validatedUsername && !validatedUsername.error)) {
+
+                    if (validatedAddress && validatedUsername.name) {
                         userPubkey = await parentEpml.request('apiCall', {
                             type: 'api',
                             url: `/addresses/publickey/${validatedUsername.owner}`
@@ -3756,23 +3798,35 @@ class ChatPage extends LitElement {
                             name: validatedUsername.name,
                             selected: true
                         };
-                    } else if (validatedAddress && !validatedUsername.name) {
-                        userPubkey = await parentEpml.request('apiCall', {
-                            type: 'api',
-                            url: `/addresses/publickey/${userInput}`
-                        });
-                        this.forwardActiveChatHeadUrl = {
-                            ...this.forwardActiveChatHeadUrl,
-                            url: `direct/${userInput}`,
-                            name: "",
-                            selected: true
-                        };
-                    } else if (!validatedAddress && !validatedUsername.name) {
-                        let err4string = get("chatpage.cchange62");
-                        // parentEpml.request('showSnackBar', `${err4string}`);
-                        getSendChatResponse(false, true, err4string);
-                        return;
-                    }
+                    } else
+                        if (!validatedAddress && (validatedUsername && !validatedUsername.error)) {
+                            userPubkey = await parentEpml.request('apiCall', {
+                                type: 'api',
+                                url: `/addresses/publickey/${validatedUsername.owner}`
+                            });
+                            this.forwardActiveChatHeadUrl = {
+                                ...this.forwardActiveChatHeadUrl,
+                                url: `direct/${validatedUsername.owner}`,
+                                name: validatedUsername.name,
+                                selected: true
+                            };
+                        } else if (validatedAddress && !validatedUsername.name) {
+                            userPubkey = await parentEpml.request('apiCall', {
+                                type: 'api',
+                                url: `/addresses/publickey/${userInput}`
+                            });
+                            this.forwardActiveChatHeadUrl = {
+                                ...this.forwardActiveChatHeadUrl,
+                                url: `direct/${userInput}`,
+                                name: "",
+                                selected: true
+                            };
+                        } else if (!validatedAddress && !validatedUsername.name) {
+                            let err4string = get("chatpage.cchange62");
+                            // parentEpml.request('showSnackBar', `${err4string}`);
+                            getSendChatResponse(false, true, err4string);
+                            return;
+                        }
 
                     if (userPubkey.error === 102) {
                         publicKey.key = '';
@@ -3790,11 +3844,11 @@ class ChatPage extends LitElement {
             }
 
             const isRecipient = this.forwardActiveChatHeadUrl.url.includes('direct') === true ? true : false;
-            
+
             const recipientAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];
             this.openForwardOpen = false;
             if (isRecipient === true) {
-                if(!publicKey.hasPubKey){
+                if (!publicKey.hasPubKey) {
                     let err4string = get("chatpage.cchange39");
                     parentEpml.request('showSnackBar', `${err4string}`);
                     getSendChatResponse(false);
@@ -3807,7 +3861,7 @@ class ChatPage extends LitElement {
                         timestamp: Date.now(),
                         recipient: recipientAddress,
                         recipientPublicKey: publicKey.key,
-                        hasChatReference:  0,
+                        hasChatReference: 0,
                         chatReference: "",
                         message: messageText,
                         lastReference: reference,
@@ -3816,7 +3870,7 @@ class ChatPage extends LitElement {
                         isText: 1
                     }
                 });
-         
+
                 _computePow(chatResponse, true)
             } else {
                 let groupResponse = await parentEpml.request('chat', {
@@ -3844,26 +3898,26 @@ class ChatPage extends LitElement {
             const difficulty = this.balance < 4 ? 18 : 8;
             const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full'
 
-              let worker;
+            let worker;
 
-              if (this.webWorker) {
+            if (this.webWorker) {
                 worker = this.webWorker;
-              } else {
+            } else {
                 this.webWorker = new WebWorker();
-              }
+            }
 
             let nonce = null;
 
             let chatBytesArray = null;
 
-              await new Promise((res) => {
-                worker.postMessage({chatBytes, path, difficulty});
+            await new Promise((res) => {
+                worker.postMessage({ chatBytes, path, difficulty });
                 worker.onmessage = e => {
-                  chatBytesArray = e.data.chatBytesArray;
+                    chatBytesArray = e.data.chatBytesArray;
                     nonce = e.data.nonce;
                     res();
                 }
-              });
+            });
 
             let _response = await parentEpml.request('sign_chat', {
                 nonce: this.selectedAddress.nonce,
@@ -3877,7 +3931,7 @@ class ChatPage extends LitElement {
         const getSendChatResponse = (response, isForward, customErrorMessage) => {
             if (response === true) {
                 this.resetChatEditor()
-                if(isForward){
+                if (isForward) {
                     let successString = get("blockpage.bcchange15");
                     parentEpml.request('showSnackBar', `${successString}`);
                 }
@@ -3886,9 +3940,9 @@ class ChatPage extends LitElement {
                 this.closeRepliedToContainer()
                 this.openForwardOpen = false
                 this.forwardActiveChatHeadUrl = {
-                url: "",
-                name: "",
-                selected: false
+                    url: "",
+                    name: "",
+                    selected: false
                 }
             } else if (response.error) {
                 parentEpml.request('showSnackBar', response.message);
@@ -3896,12 +3950,12 @@ class ChatPage extends LitElement {
                 let err2string = get("chatpage.cchange21");
                 parentEpml.request('showSnackBar', `${customErrorMessage || err2string}`);
             }
-            if(isForward && response !== true){
+            if (isForward && response !== true) {
                 this.isLoading = false;
                 return
             }
             this.isLoading = false;
-            
+
         };
 
         if (isForward) {
diff --git a/plugins/plugins/core/components/ChatScroller.js b/plugins/plugins/core/components/ChatScroller.js
index a28122d4..feff762a 100644
--- a/plugins/plugins/core/components/ChatScroller.js
+++ b/plugins/plugins/core/components/ChatScroller.js
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { render } from 'lit/html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { translate, get } from 'lit-translate';
-import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { chatStyles } from './ChatScroller-css.js'
 import { Epml } from "../../../epml";
 import { cropAddress } from "../../utils/cropAddress";
@@ -24,10 +24,12 @@ import axios from "axios";
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline';
 import Highlight from '@tiptap/extension-highlight'
-
+import ShortUniqueId from 'short-unique-id';
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 let toggledMessage = {}
 
+const uid = new ShortUniqueId()
+
 const getApiKey = () => {
     const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
     let apiKey = myNode.apiKey;
@@ -113,7 +115,20 @@ function processText(input) {
                                 if (path) {
                                     query = query + `&path=${path}`
                                 }
-                                window.location = `../../qdn/browser/index.html${query}`
+                                window.parent.reduxStore.dispatch(window.parent.reduxAction.setNewTab({
+                                    url: `qdn/browser/index.html${query}`,
+                                    id: uid(),
+                                    myPlugObj: {
+                                        "url": service === 'WEBSITE' ? "websites" : "qapps",
+                                        "domain": "core",
+                                        "page": `qdn/browser/index.html${query}`,
+                                        "title": name,
+                                        "mwcicon": service === 'WEBSITE' ? 'vaadin:desktop' : 'open_in_browser',
+                                        "menus": [],
+                                        "parent": false
+                                    }
+                                }))
+
                             } catch (error) {
                                 console.log({ error })
                             }
@@ -157,7 +172,7 @@ class ChatScroller extends LitElement {
             sendMessageForward: { attribute: false },
             showLastMessageRefScroller: { attribute: false },
             emojiPicker: { attribute: false },
-            isLoadingMessages: { type: Boolean},
+            isLoadingMessages: { type: Boolean },
             setIsLoadingMessages: { attribute: false },
             chatId: { type: String },
             setForwardProperties: { attribute: false },
@@ -171,8 +186,8 @@ class ChatScroller extends LitElement {
             userName: { type: String },
             selectedHead: { type: Object },
             goToRepliedMessage: { attribute: false },
-            getOldMessageAfter: {attribute: false},
-            listSeenMessages: {type: Array}
+            getOldMessageAfter: { attribute: false },
+            listSeenMessages: { type: Array }
         }
     }
 
@@ -186,13 +201,13 @@ class ChatScroller extends LitElement {
         this._upObserverhandler = this._upObserverhandler.bind(this)
         this._downObserverHandler = this._downObserverHandler.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
-        this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")   
+        this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
         this.openTipUser = false;
         this.openUserInfo = false;
-        this.listSeenMessages= []
+        this.listSeenMessages = []
     }
 
-    addSeenMessage(val){
+    addSeenMessage(val) {
         this.listSeenMessages.push(val)
     }
 
@@ -210,7 +225,7 @@ class ChatScroller extends LitElement {
                 firstMessageInChat = false;
             }
 
-            message = {...message, firstMessageInChat}
+            message = { ...message, firstMessageInChat }
 
             if (lastGroupedMessage) {
                 timestamp = lastGroupedMessage.timestamp;
@@ -218,7 +233,7 @@ class ChatScroller extends LitElement {
                 repliedToData = lastGroupedMessage.repliedToData;
             }
             const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData;
-       
+
             if (isSameGroup) {
                 messageArray[messageArray.length - 1].messages = [
                     ...(messageArray[messageArray.length - 1].messages || []),
@@ -233,9 +248,9 @@ class ChatScroller extends LitElement {
             return messageArray;
         }, [])
 
-        
+
         return html`
-              ${this.isLoadingMessages ?  html`
+              ${this.isLoadingMessages ? html`
                 <div class="spinnerContainer">
                         <paper-spinner-lite active></paper-spinner-lite>
                         </div>
@@ -243,10 +258,10 @@ class ChatScroller extends LitElement {
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
                 ${formattedMessages.map((formattedMessage) => {
-                    return repeat(
-                            formattedMessage.messages,
-                            (message) => message.signature,
-                            (message, indexMessage) => html`
+            return repeat(
+                formattedMessage.messages,
+                (message) => message.signature,
+                (message, indexMessage) => html`
                             <message-template 
                             .emojiPicker=${this.emojiPicker} 
                             .escapeHTML=${this.escapeHTML} 
@@ -267,39 +282,39 @@ class ChatScroller extends LitElement {
                             .setUserName=${(val) => this.setUserName(val)}
                             id=${message.signature}
                             .goToRepliedMessage=${this.goToRepliedMessage}
-                            .addSeenMessage=${(val)=> this.addSeenMessage(val)}
+                            .addSeenMessage=${(val) => this.addSeenMessage(val)}
                             .listSeenMessages=${this.listSeenMessages}
                             chatId=${this.chatId}
                             >
                             </message-template>`
-                    )
-                })}
+            )
+        })}
                 <div style=${"height: 1px;"} id='downObserver'></div>
             </ul>
         `
     }
 
     shouldUpdate(changedProperties) {
-        if(changedProperties.has('isLoadingMessages')){
+        if (changedProperties.has('isLoadingMessages')) {
             return true
         }
-        if(changedProperties.has('chatId') && changedProperties.get('chatId')){
+        if (changedProperties.has('chatId') && changedProperties.get('chatId')) {
             return true
         }
-        if(changedProperties.has('openTipUser')){
+        if (changedProperties.has('openTipUser')) {
             return true
         }
-        if(changedProperties.has('openUserInfo')){
+        if (changedProperties.has('openUserInfo')) {
             return true
         }
-        if(changedProperties.has('userName')){
+        if (changedProperties.has('userName')) {
             return true
         }
         // Only update element if prop1 changed.
         return changedProperties.has('messages');
-      }
+    }
 
-      async getUpdateComplete() {
+    async getUpdateComplete() {
         await super.getUpdateComplete();
         const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template'));
         await Promise.all(marginElements.map(el => el.updateComplete));
@@ -316,9 +331,9 @@ class ChatScroller extends LitElement {
             this.sendMessage({
                 type: 'reaction',
                 editedMessageObj: toggledMessage,
-                reaction:  selection.emoji,
-                })
-            });
+                reaction: selection.emoji,
+            })
+        });
         this.viewElement = this.shadowRoot.getElementById('viewElement');
         this.upObserverElement = this.shadowRoot.getElementById('upObserver');
         this.downObserverElement = this.shadowRoot.getElementById('downObserver');
@@ -339,7 +354,7 @@ class ChatScroller extends LitElement {
 
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
-            if(this.messages.length < 20){
+            if (this.messages.length < 20) {
                 return
             }
             this.setIsLoadingMessages(true);
@@ -369,18 +384,18 @@ class ChatScroller extends LitElement {
     }
 
     downElementObserver() {
-    const options = {
-        root: this.viewElement,
-        rootMargin: '0px',
-        threshold: 1
-    }
-    // identify an element to observe
-    const elementToObserve = this.downObserverElement;
-    // passing it a callback function
-    const observer = new IntersectionObserver(this._downObserverHandler, options);
-    // call `observe()` on that MutationObserver instance,
-    // passing it the element to observe, and the options object
-    observer.observe(elementToObserve);
+        const options = {
+            root: this.viewElement,
+            rootMargin: '0px',
+            threshold: 1
+        }
+        // identify an element to observe
+        const elementToObserve = this.downObserverElement;
+        // passing it a callback function
+        const observer = new IntersectionObserver(this._downObserverHandler, options);
+        // call `observe()` on that MutationObserver instance,
+        // passing it the element to observe, and the options object
+        observer.observe(elementToObserve);
     }
 }
 
@@ -413,11 +428,11 @@ class MessageTemplate extends LitElement {
             setToggledMessage: { attribute: false },
             setForwardProperties: { attribute: false },
             viewImage: { type: Boolean },
-            setOpenPrivateMessage : { attribute: false },
+            setOpenPrivateMessage: { attribute: false },
             setOpenTipUser: { attribute: false },
             setOpenUserInfo: { attribute: false },
             setUserName: { attribute: false },
-            openTipUser:{ type: Boolean },
+            openTipUser: { type: Boolean },
             goToRepliedMessage: { attribute: false },
             listSeenMessages: { type: Array },
             addSeenMessage: { attribute: false },
@@ -441,7 +456,7 @@ class MessageTemplate extends LitElement {
         this.isFirstMessage = false
         this.isSingleMessageInGroup = false
         this.isLastMessageInGroup = false
-        this.viewImage =  false
+        this.viewImage = false
     }
 
     static get styles() {
@@ -476,17 +491,17 @@ class MessageTemplate extends LitElement {
     }
 
     async downloadAttachment(attachment) {
-        
+
         const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
-       
+
         const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
-        try{
-           axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}?apiKey=${myNode.apiKey}`, { responseType: 'blob'})
-            .then(response =>{              
-                let filename = attachment.attachmentName;
-                let blob = new Blob([response.data], { type:"application/octet-stream" });
-                this.saveFileToDisk(blob , filename);
-            })
+        try {
+            axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}?apiKey=${myNode.apiKey}`, { responseType: 'blob' })
+                .then(response => {
+                    let filename = attachment.attachmentName;
+                    let blob = new Blob([response.data], { type: "application/octet-stream" });
+                    this.saveFileToDisk(blob, filename);
+                })
         } catch (error) {
             console.error(error);
         }
@@ -497,7 +512,7 @@ class MessageTemplate extends LitElement {
             const fileHandle = await self.showSaveFilePicker({
                 suggestedName: fileName,
                 types: [{
-                        description: "File",
+                    description: "File",
                 }]
             })
             const writeFile = async (fileHandle, contents) => {
@@ -511,17 +526,17 @@ class MessageTemplate extends LitElement {
         }
     }
 
-    firstUpdated(){
+    firstUpdated() {
         const autoSeeChatList = window.parent.reduxStore.getState().app.autoLoadImageChats
-        if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.signature)){
-            this.viewImage =  true
+        if (autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.signature)) {
+            this.viewImage = true
         }
 
         const tooltips = this.shadowRoot.querySelectorAll('vaadin-tooltip');
         tooltips.forEach(tooltip => {
-        const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
-        overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
-        overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
+            const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
+            overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
+            overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
         });
     }
 
@@ -542,13 +557,13 @@ class MessageTemplate extends LitElement {
         let attachment = null;
         try {
             const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
-            if(+parsedMessageObj.version > 1 && parsedMessageObj.messageText){
+            if (+parsedMessageObj.version > 1 && parsedMessageObj.messageText) {
                 messageVersion2 = generateHTML(parsedMessageObj.messageText, [
                     StarterKit,
                     Underline,
                     Highlight
                     // other extensions …
-                  ])
+                ])
                 messageVersion2WithLink = processText(messageVersion2)
 
             }
@@ -563,10 +578,10 @@ class MessageTemplate extends LitElement {
             if (parsedMessageObj.attachments && Array.isArray(parsedMessageObj.attachments) && parsedMessageObj.attachments.length > 0) {
                 attachment = parsedMessageObj.attachments[0];
             }
-           if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
+            if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
                 image = parsedMessageObj.images[0];
             }
-           if (parsedMessageObj.gifs && Array.isArray(parsedMessageObj.gifs) && parsedMessageObj.gifs.length > 0) {
+            if (parsedMessageObj.gifs && Array.isArray(parsedMessageObj.gifs) && parsedMessageObj.gifs.length > 0) {
                 gif = parsedMessageObj.gifs[0];
             }
         } catch (error) {
@@ -594,68 +609,68 @@ class MessageTemplate extends LitElement {
         } else {
             avatarImg = html`<img src='/img/incognito.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
         }
-  
-     const createImage = (imageUrl) => {
-        const imageHTMLRes = new Image();
-        imageHTMLRes.src = imageUrl;
-        imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
-        imageHTMLRes.onclick= () => {
-            this.openDialogImage = true;
-        }
-        imageHTMLRes.onload = () => {
-            this.isImageLoaded = true;
-        }
-        imageHTMLRes.onerror = () => {   
-            if (this.imageFetches < 4) {
-                setTimeout(() => {
-                    this.imageFetches = this.imageFetches + 1;
-                    imageHTMLRes.src = imageUrl;
-                }, 2000);
-            } else {
-                setTimeout(() => {
-                    this.imageFetches = this.imageFetches + 1;
-                    imageHTMLRes.src = imageUrl;
-                }, 6000);
-            }
-        };
-        return imageHTMLRes;
-      }
 
-      const createGif = (gif) => {
-        const gifHTMLRes = new Image();
-        gifHTMLRes.src = gif;
-        gifHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
-        gifHTMLRes.onclick= () => {
-            this.openDialogGif = true;
-        }
-        gifHTMLRes.onload = () => {
-            this.isGifLoaded = true;
-        }
-        gifHTMLRes.onerror = () => {   
-            if (this.gifFetches < 4) {
-                setTimeout(() => {
-                    this.gifFetches = this.gifFetches + 1;
-                    gifHTMLRes.src = gif;
-                }, 500);
-            } else {
-                gifHTMLRes.src = '/img/chain.png';
-                gifHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
-                gifHTMLRes.onclick= () => {}
-                this.isGifLoaded = true
+        const createImage = (imageUrl) => {
+            const imageHTMLRes = new Image();
+            imageHTMLRes.src = imageUrl;
+            imageHTMLRes.style = "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
+            imageHTMLRes.onclick = () => {
+                this.openDialogImage = true;
             }
-        };
-        return gifHTMLRes;
-      }
+            imageHTMLRes.onload = () => {
+                this.isImageLoaded = true;
+            }
+            imageHTMLRes.onerror = () => {
+                if (this.imageFetches < 4) {
+                    setTimeout(() => {
+                        this.imageFetches = this.imageFetches + 1;
+                        imageHTMLRes.src = imageUrl;
+                    }, 2000);
+                } else {
+                    setTimeout(() => {
+                        this.imageFetches = this.imageFetches + 1;
+                        imageHTMLRes.src = imageUrl;
+                    }, 6000);
+                }
+            };
+            return imageHTMLRes;
+        }
+
+        const createGif = (gif) => {
+            const gifHTMLRes = new Image();
+            gifHTMLRes.src = gif;
+            gifHTMLRes.style = "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
+            gifHTMLRes.onclick = () => {
+                this.openDialogGif = true;
+            }
+            gifHTMLRes.onload = () => {
+                this.isGifLoaded = true;
+            }
+            gifHTMLRes.onerror = () => {
+                if (this.gifFetches < 4) {
+                    setTimeout(() => {
+                        this.gifFetches = this.gifFetches + 1;
+                        gifHTMLRes.src = gif;
+                    }, 500);
+                } else {
+                    gifHTMLRes.src = '/img/chain.png';
+                    gifHTMLRes.style = "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
+                    gifHTMLRes.onclick = () => { }
+                    this.isGifLoaded = true
+                }
+            };
+            return gifHTMLRes;
+        }
 
         if (image) {
             const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
             const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
             imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`;
-            
+
             if (this.viewImage || this.myAddress === this.messageObj.sender) {
                 imageHTML = createImage(imageUrl);
-                imageHTMLDialog = createImage(imageUrl) 
-                imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
+                imageHTMLDialog = createImage(imageUrl)
+                imageHTMLDialog.style = "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
             }
         }
 
@@ -663,10 +678,10 @@ class MessageTemplate extends LitElement {
             const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
             const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
             gifUrl = `${nodeUrl}/arbitrary/${gif.service}/${gif.name}/${gif.identifier}?filepath=${gif.filePath}&apiKey=${myNode.apiKey}`;
-            if (this.viewImage || this.myAddress === this.messageObj.sender){
+            if (this.viewImage || this.myAddress === this.messageObj.sender) {
                 gifHTML = createGif(gifUrl);
-                gifHTMLDialog = createGif(gifUrl) 
-                gifHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
+                gifHTMLDialog = createGif(gifUrl)
+                gifHTMLDialog.style = "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
             }
         }
 
@@ -689,11 +704,11 @@ class MessageTemplate extends LitElement {
 
         if (repliedToData) {
             try {
-                const parsedMsg =  JSON.parse(repliedToData.decodedMessage);
+                const parsedMsg = JSON.parse(repliedToData.decodedMessage);
                 repliedToData.decodedMessage = parsedMsg;
             } catch (error) {
             }
-            
+
         }
         let repliedToMessageText = ''
         if (repliedToData && repliedToData.decodedMessage && repliedToData.decodedMessage.messageText) {
@@ -717,97 +732,97 @@ class MessageTemplate extends LitElement {
 
         }
 
-       
+
         return hideit ? html`<li class="clearfix"></li>` : html`
             <li 
             class="clearfix message-parent" 
-            style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ? 
-            'padding-bottom: 0;' 
-            : null} 
+            style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ?
+                'padding-bottom: 0;'
+                : null} 
             ${this.isFirstMessage && 'margin-top: 20px;'}">
                 <div>
                     <div 
                     class="message-container" 
                     style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}">
                         <div class="message-subcontainer1">
-                            ${(this.isSingleMessageInGroup === false || 
-                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) 
-                            ? (
-                                html`
+                            ${(this.isSingleMessageInGroup === false ||
+                (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
+                ? (
+                    html`
                                     <div 
                                     style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
                                     @click=${() => {
-                                        if (this.myAddress === this.messageObj.sender) return;
-                                        this.setOpenUserInfo(true);
-                                        this.setUserName(this.messageObj);
-                                    }} class="message-data-avatar">
+                            if (this.myAddress === this.messageObj.sender) return;
+                            this.setOpenUserInfo(true);
+                            this.setUserName(this.messageObj);
+                        }} class="message-data-avatar">
                                         ${avatarImg}
                                     </div>
                                 `
-                            ) : 
-                            html`
+                ) :
+                html`
                                 <div class="message-data-avatar"></div>
                             `}
                             <div 
                             class="${`message-subcontainer2 
-                            ${this.myAddress === this.messageObj.sender && "message-myBg" }
-                            ${(((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
-                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress !== this.messageObj.sender)  
-                            ? 'message-triangle' 
-                            : (((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
-                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress === this.messageObj.sender) ? "message-myTriangle" : null}`}" 
+                            ${this.myAddress === this.messageObj.sender && "message-myBg"}
+                            ${(((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
+                (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress !== this.messageObj.sender)
+                ? 'message-triangle'
+                : (((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
+                    (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress === this.messageObj.sender) ? "message-myTriangle" : null}`}" 
                             style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
                             ${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
-                            ? 'border-radius: 8px 25px 25px 8px;'
-                            : (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) 
-                            ?  'border-radius: 27px 25px 25px 12px;'
-                            : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?  
-                            'border-radius: 10px 25px 25px 0;' 
-                            : (this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true) 
+                ? 'border-radius: 8px 25px 25px 8px;'
+                : (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
+                    ? 'border-radius: 27px 25px 25px 12px;'
+                    : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
+                        'border-radius: 10px 25px 25px 0;'
+                        : (this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true)
                             ? 'border-radius: 25px 25px 25px 0px;'
                             : null
-                            }">
+            }">
                             <div class="message-user-info">
-                                ${this.isFirstMessage ? 
-                                    html`
+                                ${this.isFirstMessage ?
+                html`
                                         <span 
                                         style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
                                         @click=${() => {
-                                            if (this.myAddress === this.messageObj.sender) return;
-                                            this.setOpenUserInfo(true);
-                                            this.setUserName(this.messageObj);
-                                        }}
+                        if (this.myAddress === this.messageObj.sender) return;
+                        this.setOpenUserInfo(true);
+                        this.setUserName(this.messageObj);
+                    }}
                                         class="message-data-name">
                                             ${nameMenu}
                                         </span>
                                         `
-                                    : null
-                                }
-                                ${isForwarded ? 
-                                    html`
+                : null
+            }
+                                ${isForwarded ?
+                html`
                                         <span class="forwarded-text">
                                             ${forwarded}
                                         </span>
                                         `
-                                    : null
-                                }
+                : null
+            }
                                 ${this.isFirstMessage ? (
-                                html`
+                html`
                                     <span class="message-data-level">${levelFounder}</span>
                                 `
-                                ) : null}
+            ) : null}
                             </div>
                                 ${repliedToData && html`
                                     <div class="original-message" 
-                                    @click=${()=> {
-                                        this.goToRepliedMessage(repliedToData, this.messageObj)
-                                    }}>
+                                    @click=${() => {
+                    this.goToRepliedMessage(repliedToData, this.messageObj)
+                }}>
                                         <p  
                                             style=${"cursor: pointer; margin: 0 0 5px 0;"} 
                                             class=${this.myAddress !== repliedToData.sender
-                                            ? "original-message-sender" 
-                                            : "message-data-my-name"}>
-                                             ${repliedToData.senderName ? repliedToData.senderName : cropAddress(repliedToData.sender) }
+                    ? "original-message-sender"
+                    : "message-data-my-name"}>
+                                             ${repliedToData.senderName ? repliedToData.senderName : cropAddress(repliedToData.sender)}
                                         </p>
                                         <p class="replied-message">
                                             ${version && version.toString() === '1' ? html`
@@ -815,17 +830,17 @@ class MessageTemplate extends LitElement {
                                             ` : ''}
                                             ${+version > 1 && repliedToMessageText ? html`
                                             ${unsafeHTML(repliedToMessageText)}
-                                            ` 
-                                        : ''}
+                                            `
+                    : ''}
                                         </p>
                                     </div>
                                     `}
-                                    ${image  && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
+                                    ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
                                         <div 
-                                        @click=${()=> {
-                                            this.viewImage = true
-                                            this.addSeenMessage(this.messageObj.signature)
-                                        }}
+                                        @click=${() => {
+                    this.viewImage = true
+                    this.addSeenMessage(this.messageObj.signature)
+                }}
                                         class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
                                             <div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
@@ -841,14 +856,14 @@ class MessageTemplate extends LitElement {
                                     `: ''}
                                     ${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
                                         <div 
-                                        class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : '', !this.isImageLoaded ? 'hideImg': ''].join(' ')}
+                                        class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : '', !this.isImageLoaded ? 'hideImg' : ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
                                             ${imageHTML}
                                             ${this.myAddress === this.messageObj.sender ? html`
                                             <vaadin-icon
                                             @click=${() => {
-                                                this.openDeleteImage = true;
-                                                }}
+                        this.openDeleteImage = true;
+                    }}
                                             class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
                                             ` : ''}
                                            
@@ -858,9 +873,9 @@ class MessageTemplate extends LitElement {
                                     ` : html``}
                                     ${gif && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
                                         <div 
-                                        @click=${()=> {
-                                            this.viewImage = true
-                                        }}
+                                        @click=${() => {
+                    this.viewImage = true
+                }}
                                         class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
                                             <div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
@@ -875,8 +890,8 @@ class MessageTemplate extends LitElement {
                                             ${gifHTML}
                                         </div>  
                                     ` : html``}
-                                    ${attachment && !isAttachmentDeleted ? 
-                                        html`
+                                    ${attachment && !isAttachmentDeleted ?
+                html`
                                         <div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
                                             <div class="attachment-icon-container">
                                                 <img 
@@ -897,20 +912,20 @@ class MessageTemplate extends LitElement {
                                             slot="icon" 
                                             class="download-icon">
                                             </vaadin-icon>
-                                            ${this.myAddress === this.messageObj.sender 
-                                            ? html`
+                                            ${this.myAddress === this.messageObj.sender
+                        ? html`
                                                 <vaadin-icon
                                                     @click=${(e) => {
-                                                        e.stopPropagation();
-                                                        this.openDeleteAttachment = true;
-                                                        }}
+                                e.stopPropagation();
+                                this.openDeleteAttachment = true;
+                            }}
                                                     class="image-delete-icon"  icon="vaadin:close" slot="icon">
                                                 </vaadin-icon>
                                             ` : html``}
                                         </div>
-                                        ` 
-                                    : attachment && isAttachmentDeleted ?
-                                      html`
+                                        `
+                : attachment && isAttachmentDeleted ?
+                    html`
                                         <div class="attachment-container">
                                             <div class="attachment-info">
                                                 <p style=${"font-style: italic;"} class="attachment-name">
@@ -918,12 +933,12 @@ class MessageTemplate extends LitElement {
                                                 </p>
                                             </div>
                                         </div>
-                                      `                  
-                                    : html``}
+                                      `
+                    : html``}
                                     <div 
                                     id="messageContent" 
                                     class="message" 
-                                    style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}>
+                                    style=${(image && replacedMessage !== "") && "margin-top: 15px;"}>
                                         ${+version > 1 ? messageVersion2WithLink ? html`${messageVersion2WithLink}` : html`
                                         ${unsafeHTML(messageVersion2)}
                                         ` : ''}
@@ -935,26 +950,26 @@ class MessageTemplate extends LitElement {
                                         ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
                                         ` : ''}
                                         <div 
-                                            style=${isEdited 
-                                            ? "justify-content: space-between;" 
-                                            : "justify-content: flex-end;"}
-                                            class="${((this.isFirstMessage === false && 
-                                            this.isSingleMessageInGroup === true && 
-                                            this.isLastMessageInGroup === true) || 
-                                            (this.isFirstMessage === true && 
-                                            this.isSingleMessageInGroup === false &&
-                                            this.isLastMessageInGroup === true)) 
-                                            ? 'message-data-time'
-                                            : 'message-data-time-hidden'
-                                        }">
-                                            ${isEdited ? 
-                                                html`
+                                            style=${isEdited
+                ? "justify-content: space-between;"
+                : "justify-content: flex-end;"}
+                                            class="${((this.isFirstMessage === false &&
+                this.isSingleMessageInGroup === true &&
+                this.isLastMessageInGroup === true) ||
+                (this.isFirstMessage === true &&
+                    this.isSingleMessageInGroup === false &&
+                    this.isLastMessageInGroup === true))
+                ? 'message-data-time'
+                : 'message-data-time-hidden'
+            }">
+                                            ${isEdited ?
+                html`
                                                     <span>
                                                         ${edited}
                                                     </span>
                                                     `
-                                                : ''
-                                            }
+                : ''
+            }
                                             <message-time timestamp=${this.messageObj.timestamp}></message-time>
                                         </div>
                                     </div>
@@ -968,7 +983,7 @@ class MessageTemplate extends LitElement {
                                 .showBlockUserModal=${() => this.showBlockUserModal()}
                                 .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
                                 .showBlockAddressIcon=${this.showBlockAddressIcon}
-                                .originalMessage=${{...this.messageObj, message}}
+                                .originalMessage=${{ ...this.messageObj, message }}
                                 .setRepliedToMessageObj=${this.setRepliedToMessageObj}
                                 .setEditedMessageObj=${this.setEditedMessageObj}
                                 .myAddress=${this.myAddress}
@@ -987,16 +1002,16 @@ class MessageTemplate extends LitElement {
                             > 
                             </chat-menu>
                         </div>
-                        <div class="message-reactions" style="${reactions.length > 0 && 
-                            'margin-top: 10px; margin-bottom: 5px;'}">
-                                ${reactions.map((reaction, index)=> {
-                                    return html`
+                        <div class="message-reactions" style="${reactions.length > 0 &&
+            'margin-top: 10px; margin-bottom: 5px;'}">
+                                ${reactions.map((reaction, index) => {
+                return html`
                                     <span 
                                         @click=${() => this.sendMessage({
-                                        type: 'reaction',
-                                        editedMessageObj: this.messageObj,
-                                        reaction:  reaction.type,
-                                        })} 
+                    type: 'reaction',
+                    editedMessageObj: this.messageObj,
+                    reaction: reaction.type,
+                })} 
                                         id=${`reactions-${index}`}
                                         class="reactions-bg">
                                         ${reaction.type} 
@@ -1007,49 +1022,49 @@ class MessageTemplate extends LitElement {
                                         hover-delay=${400}
                                         hide-delay=${1}
                                         text=${reaction.users.length > 3 ?
-                                        (
-                                        `${reaction.users[0].name 
-                                        ? reaction.users[0].name 
-                                        : cropAddress(reaction.users[0].address)}, 
-                                        ${reaction.users[1].name 
-                                        ? reaction.users[1].name 
-                                        : cropAddress(reaction.users[1].address)},
-                                        ${reaction.users[2].name 
-                                        ? reaction.users[2].name 
-                                        : cropAddress(reaction.users[2].address)}
+                        (
+                            `${reaction.users[0].name
+                                ? reaction.users[0].name
+                                : cropAddress(reaction.users[0].address)}, 
+                                        ${reaction.users[1].name
+                                ? reaction.users[1].name
+                                : cropAddress(reaction.users[1].address)},
+                                        ${reaction.users[2].name
+                                ? reaction.users[2].name
+                                : cropAddress(reaction.users[2].address)}
                                         ${get("chatpage.cchange71")} ${reaction.users.length - 3} ${get("chatpage.cchange72")}${(reaction.users.length - 3) > 1 ? html`${get("chatpage.cchange73")}` : ""} ${get("chatpage.cchange74")} ${reaction.type}`
-                                        ) : reaction.users.length === 3 ?
-                                        (
-                                        `${reaction.users[0].name 
-                                        ? reaction.users[0].name 
-                                        : cropAddress(reaction.users[0].address)}, 
-                                        ${reaction.users[1].name 
-                                        ? reaction.users[1].name 
-                                        : cropAddress(reaction.users[1].address)} 
+                        ) : reaction.users.length === 3 ?
+                            (
+                                `${reaction.users[0].name
+                                    ? reaction.users[0].name
+                                    : cropAddress(reaction.users[0].address)}, 
+                                        ${reaction.users[1].name
+                                    ? reaction.users[1].name
+                                    : cropAddress(reaction.users[1].address)} 
                                         ${get("chatpage.cchange71")} 
-                                        ${reaction.users[2].name 
-                                        ? reaction.users[2].name 
-                                        : cropAddress(reaction.users[2].address)} ${get("chatpage.cchange74")} ${reaction.type}`
-                                        ) : reaction.users.length === 2 ?
-                                        (
-                                        `${reaction.users[0].name 
-                                        ? reaction.users[0].name 
+                                        ${reaction.users[2].name
+                                    ? reaction.users[2].name
+                                    : cropAddress(reaction.users[2].address)} ${get("chatpage.cchange74")} ${reaction.type}`
+                            ) : reaction.users.length === 2 ?
+                                (
+                                    `${reaction.users[0].name
+                                        ? reaction.users[0].name
                                         : cropAddress(reaction.users[0].address)}
                                         ${get("chatpage.cchange71")} 
-                                        ${reaction.users[1].name 
-                                        ? reaction.users[1].name 
+                                        ${reaction.users[1].name
+                                        ? reaction.users[1].name
                                         : cropAddress(reaction.users[1].address)} ${get("chatpage.cchange74")} ${reaction.type}`
-                                        ) : reaction.users.length === 1 ?
-                                        (
-                                        `${reaction.users[0].name 
-                                        ? reaction.users[0].name 
-                                        : cropAddress(reaction.users[0].address)} ${get("chatpage.cchange74")} ${reaction.type}`
-                                        ) 
-                                        : "" }>
+                                ) : reaction.users.length === 1 ?
+                                    (
+                                        `${reaction.users[0].name
+                                            ? reaction.users[0].name
+                                            : cropAddress(reaction.users[0].address)} ${get("chatpage.cchange74")} ${reaction.type}`
+                                    )
+                                    : ""}>
                                     </vaadin-tooltip> 
                                     </span>
                                     `
-                                })}
+            })}
                         </div>
                     </div>
                 </div>
@@ -1067,9 +1082,9 @@ class MessageTemplate extends LitElement {
             <mwc-dialog 
                 id="showDialogPublicKey" 
                 ?open=${this.openDialogImage} 
-                @closed=${()=> {
-                    this.openDialogImage = false
-                }}>
+                @closed=${() => {
+                this.openDialogImage = false
+            }}>
 					<div class="dialog-header"></div>
 					<div class="dialog-container imageContainer">
 					    ${imageHTMLDialog}
@@ -1078,10 +1093,10 @@ class MessageTemplate extends LitElement {
 						slot="primaryAction"
 						dialogAction="cancel"
 						class="red"
-						@click=${()=>{
-							
-						this.openDialogImage = false
-						}}
+						@click=${() => {
+
+                this.openDialogImage = false
+            }}
 					>
 					    ${translate("general.close")}
 					</mwc-button>
@@ -1089,9 +1104,9 @@ class MessageTemplate extends LitElement {
             <mwc-dialog 
                 id="showDialogPublicKey" 
                 ?open=${this.openDialogGif} 
-                @closed=${()=> {
-                    this.openDialogGif = false
-                }}>
+                @closed=${() => {
+                this.openDialogGif = false
+            }}>
 					<div class="dialog-header"></div>
 					<div class="dialog-container imageContainer">
 					    ${gifHTMLDialog}
@@ -1100,10 +1115,10 @@ class MessageTemplate extends LitElement {
 						slot="primaryAction"
 						dialogAction="cancel"
 						class="red"
-						@click=${()=>{
-							
-						this.openDialogGif = false
-						}}
+						@click=${() => {
+
+                this.openDialogGif = false
+            }}
 					>
 					    ${translate("general.close")}
 					</mwc-button>
@@ -1111,9 +1126,9 @@ class MessageTemplate extends LitElement {
                 <mwc-dialog
                 hideActions
                 ?open=${this.openDeleteImage} 
-                @closed=${()=> {
-                    this.openDeleteImage = false;
-                }}>
+                @closed=${() => {
+                this.openDeleteImage = false;
+            }}>
                 <div class="delete-image-msg">
                     <p>${translate("chatpage.cchange78")}</p>
                 </div>
@@ -1124,11 +1139,11 @@ class MessageTemplate extends LitElement {
                     <button
                     class="modal-button" 
                     @click=${() => this.sendMessage({
-                                type: 'delete',
-                                name: image.name,
-                                identifier: image.identifier,
-                                editedMessageObj: this.messageObj,
-                            })}>
+                type: 'delete',
+                name: image.name,
+                identifier: image.identifier,
+                editedMessageObj: this.messageObj,
+            })}>
                         Yes
                     </button>
                 </div>
@@ -1136,9 +1151,9 @@ class MessageTemplate extends LitElement {
                 <mwc-dialog
                 hideActions
                 ?open=${this.openDeleteAttachment} 
-                @closed=${()=> {
-                    this.openDeleteAttachment = false;
-                }}>
+                @closed=${() => {
+                this.openDeleteAttachment = false;
+            }}>
                 <div class="delete-image-msg">
                 <p>${translate("chatpage.cchange79")}</p>
                 </div>
@@ -1149,14 +1164,15 @@ class MessageTemplate extends LitElement {
                     <button
                     class="modal-button" 
                     @click=${() => {
-                        this.sendMessage({
-                            type: 'deleteAttachment',
-                            attachment: attachment,
-                            name: attachment.name,
-                            identifier: attachment.identifier,
-                            editedMessageObj: this.messageObj,
-                        })}
-                    }>
+                this.sendMessage({
+                    type: 'deleteAttachment',
+                    attachment: attachment,
+                    name: attachment.name,
+                    identifier: attachment.identifier,
+                    editedMessageObj: this.messageObj,
+                })
+            }
+            }>
                         Yes
                     </button>
                 </div>
@@ -1171,14 +1187,14 @@ class ChatMenu extends LitElement {
     static get properties() {
         return {
             menuItems: { type: Array },
-            showPrivateMessageModal: {attribute: false},
-            showBlockUserModal: {attribute: false},
+            showPrivateMessageModal: { attribute: false },
+            showBlockUserModal: { attribute: false },
             toblockaddress: { type: String, attribute: true },
-            showBlockIconFunc: {attribute: false},
+            showBlockIconFunc: { attribute: false },
             showBlockAddressIcon: { type: Boolean },
             originalMessage: { type: Object },
-            setRepliedToMessageObj: {attribute: false},
-            setEditedMessageObj: {attribute: false},
+            setRepliedToMessageObj: { attribute: false },
+            setEditedMessageObj: { attribute: false },
             myAddress: { type: Object },
             emojiPicker: { attribute: false },
             sendMessage: { attribute: false },
@@ -1196,8 +1212,8 @@ class ChatMenu extends LitElement {
 
     constructor() {
         super();
-        this.showPrivateMessageModal = () => {};
-        this.showBlockUserModal = () => {};
+        this.showPrivateMessageModal = () => { };
+        this.showBlockUserModal = () => { };
     }
 
     static get styles() {
@@ -1217,26 +1233,26 @@ class ChatMenu extends LitElement {
         }
     }
 
-    versionErrorSnack(){
+    versionErrorSnack() {
         let errorMsg = get("chatpage.cchange34")
         parentEpml.request('showSnackBar', `${errorMsg}`)
     }
 
-    async messageForwardFunc(){
+    async messageForwardFunc() {
         let parsedMessageObj = {}
         let publicKey = {
             hasPubKey: false,
             key: ''
         }
         try {
-             parsedMessageObj = JSON.parse(this.originalMessage.decodedMessage);
-            
+            parsedMessageObj = JSON.parse(this.originalMessage.decodedMessage);
+
         } catch (error) {
             parsedMessageObj = {}
         }
 
         try {
-         const res =   await parentEpml.request('apiCall', {
+            const res = await parentEpml.request('apiCall', {
                 type: 'api',
                 url: `/addresses/publickey/${this._chatId}`
             })
@@ -1251,9 +1267,9 @@ class ChatMenu extends LitElement {
                 publicKey.hasPubKey = false
             }
         } catch (error) {
-            
+
         }
-        
+
         try {
             const message = {
                 ...parsedMessageObj,
@@ -1261,7 +1277,7 @@ class ChatMenu extends LitElement {
             }
             const stringifyMessageObject = JSON.stringify(message)
             this.setForwardProperties(stringifyMessageObject)
-           
+
         } catch (error) {
         }
     }
@@ -1272,17 +1288,17 @@ class ChatMenu extends LitElement {
                 class=${`menu-icon reaction ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange13")}" 
                 @click=${(e) => {
-                    if(this.version === '0'){
-                        this.versionErrorSnack()
-                        return
-                    }
-                    try {
-                        this.setToggledMessage(this.originalMessage)
-                        this.emojiPicker.togglePicker(e.target)
-                    } catch (error) {
-                    }
-                    
-                    }}
+                if (this.version === '0') {
+                    this.versionErrorSnack()
+                    return
+                }
+                try {
+                    this.setToggledMessage(this.originalMessage)
+                    this.emojiPicker.togglePicker(e.target)
+                } catch (error) {
+                }
+
+            }}
                >
                     <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
                 </div> -->
@@ -1290,21 +1306,21 @@ class ChatMenu extends LitElement {
                 class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange14")}" 
                 @click="${() => {
-                    if (this.version === '0') {
-                        this.versionErrorSnack()
-                        return
-                    }
-                    this.messageForwardFunc()
-                    }}">
+                if (this.version === '0') {
+                    this.versionErrorSnack()
+                    return
+                }
+                this.messageForwardFunc()
+            }}">
                     <vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon>
                 </div>                
                 <div 
                     class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                     data-text="${translate("blockpage.bcchange9")}" 
                     @click="${() => this.setOpenPrivateMessage({
-                        name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
-                        open: true   
-                    })}">   
+                name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
+                open: true
+            })}">   
                     <vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
                 </div>
                 <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
@@ -1314,51 +1330,51 @@ class ChatMenu extends LitElement {
                 class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange11")}" 
                 @click="${() => {
-                    if (this.version === '0') {
-                        this.versionErrorSnack()
-                        return
-                    }
-                    this.setRepliedToMessageObj({...this.originalMessage, version: this.version});
-                    }}">
+                if (this.version === '0') {
+                    this.versionErrorSnack()
+                    return
+                }
+                this.setRepliedToMessageObj({ ...this.originalMessage, version: this.version });
+            }}">
                     <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
                 </div>
                 
                 ${((this.myAddress === this.originalMessage.sender) && (
                 !this.gif)) ? (
-                    html`
+                html`
                     <div 
                     class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
                     data-text="${translate("blockpage.bcchange12")}" 
                     @click=${() => {
-                    if (this.version === '0'){
-                        this.versionErrorSnack()
-                        return
-                    }
-                    this.setEditedMessageObj(this.originalMessage);
+                        if (this.version === '0') {
+                            this.versionErrorSnack()
+                            return
+                        }
+                        this.setEditedMessageObj(this.originalMessage);
                     }}>
                         <vaadin-icon icon="vaadin:pencil" slot="icon"></vaadin-icon>
                     </div>
                     `
-                ) : html`<div></div>`}
+            ) : html`<div></div>`}
                 ${this.myAddress !== this.originalMessage.sender ? (
-                    html`
+                html`
                     <div 
                     class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
                     data-text="${translate("blockpage.bcchange18")}" 
                     @click=${(e) => {
-                    e.preventDefault();
-                    this.setUserName(this.originalMessage);
-                    this.setOpenTipUser(true);
+                        e.preventDefault();
+                        this.setUserName(this.originalMessage);
+                        this.setOpenTipUser(true);
                     }}>
                         <vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
                     </div>
                     `
-                ) : html`<div></div>`}
+            ) : html`<div></div>`}
                 <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
                     <vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
                 </div>
                 ${this.showBlockAddressIcon
-                    ? html`
+                ? html`
                         <div class="block-user-container">
                             <div class="block-user" @click="${() => this.showBlockUserModal()}">
                                 <p>${translate("blockpage.bcchange1")}</p>
@@ -1368,7 +1384,7 @@ class ChatMenu extends LitElement {
                     ` : html`
                         <div></div>
                     `
-                }
+            }
             </div>  
         `
     }
diff --git a/plugins/plugins/core/components/qdn-action-types.js b/plugins/plugins/core/components/qdn-action-types.js
index 666d67f2..e5e9d9c8 100644
--- a/plugins/plugins/core/components/qdn-action-types.js
+++ b/plugins/plugins/core/components/qdn-action-types.js
@@ -44,4 +44,7 @@ export const ENCRYPT_DATA = 'ENCRYPT_DATA'
 export const DECRYPT_DATA = 'DECRYPT_DATA'
 
 // SAVE_FILE
-export const SAVE_FILE = 'SAVE_FILE'
\ No newline at end of file
+export const SAVE_FILE = 'SAVE_FILE'
+
+//SET_TAB_NOTIFICATIONS
+export const SET_TAB_NOTIFICATIONS = 'SET_TAB_NOTIFICATIONS'
\ No newline at end of file
diff --git a/plugins/plugins/core/qdn/browser/browser.src.js b/plugins/plugins/core/qdn/browser/browser.src.js
index 3441ad0a..23816ecf 100644
--- a/plugins/plugins/core/qdn/browser/browser.src.js
+++ b/plugins/plugins/core/qdn/browser/browser.src.js
@@ -892,10 +892,42 @@ class WebBrowser extends LitElement {
 					this.service = data.service;
 					this.identifier = data.identifier;
 					this.displayUrl = url;
+
+					const frame = window.frameElement
+					let tabId = ""
+					if (frame && frame.dataset.id) {
+						tabId = frame.dataset.id
+					}
+
 					if (data.name === 'Q-Mail') {
 						localStorage.setItem("Q-Mail-last-visited", Date.now())
+
 					}
+					window.parent.reduxStore.dispatch(window.parent.reduxAction.addTabInfo({
+						name: data.name,
+						service: data.service,
+						id: tabId ? tabId : ""
+					}))
 					return;
+				case actions.SET_TAB_NOTIFICATIONS: {
+					const { count } = data
+					if (isNaN(count)) {
+						response['error'] = 'count is not a number'
+						break
+					}
+					if (count === undefined) {
+						response['error'] = 'missing count'
+						break
+					}
+
+					window.parent.reduxStore.dispatch(window.parent.reduxAction.setTabNotifications({
+						name: this.name,
+						count: count
+					}))
+					response = true
+					break
+
+				}
 
 				case actions.PUBLISH_QDN_RESOURCE: {
 					// optional fields: encrypt:boolean recipientPublicKey:string
diff --git a/plugins/plugins/core/streams/streams.js b/plugins/plugins/core/streams/streams.js
index 23fa2b0c..563df338 100644
--- a/plugins/plugins/core/streams/streams.js
+++ b/plugins/plugins/core/streams/streams.js
@@ -115,6 +115,7 @@ let closeGracefully = false
 let onceLoggedIn = false
 let retryOnClose = false
 let canPing = false
+let timeoutId
 
 parentEpml.subscribe('logged_in', async isLoggedIn => {
 
@@ -127,18 +128,16 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
 
         if (window.parent.location.protocol === "https:") {
 
-            activeChatSocketLink = `wss://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}`;
+            activeChatSocketLink = `wss://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}?encoding=BASE64`;
         } else {
 
-            activeChatSocketLink = `ws://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}`;
+            activeChatSocketLink = `ws://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}?encoding=BASE64`;
         }
 
         const activeChatSocket = new WebSocket(activeChatSocketLink);
 
         // Open Connection
         activeChatSocket.onopen = () => {
-
-            console.log(`[SOCKET]: Connected.`);
             socketObject = activeChatSocket
 
             initial = initial + 1
@@ -147,28 +146,26 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
 
         // Message Event
         activeChatSocket.onmessage = (e) => {
+            if (e.data === 'pong') {
+                clearTimeout(timeoutId);
+                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
+                return
+            }
+            try {
+                chatHeadWatcher(JSON.parse(e.data))
+            } catch (error) {
+
+            }
 
-            chatHeadWatcher(JSON.parse(e.data))
         }
 
         // Closed Event
         activeChatSocket.onclose = () => {
-
-            console.log(`[SOCKET]: CLOSED`);
             clearInterval(activeChatSocketTimeout)
 
-            if (closeGracefully === false && initial <= 52) {
-
-                if (initial <= 52) {
-
-                    parentEpml.request('showSnackBar', "Connection to the Qortal Core was lost, is your Core running ?")
-                    retryOnClose = true
-                    setTimeout(pingActiveChatSocket, 10000)
-                    initial = initial + 1
-                } else {
-
-                    parentEpml.request('showSnackBar', "Cannot connect to the Qortal Core, restart UI and Core!")
-                }
+            if (closeGracefully === false) {
+                retryOnClose = true
+                setTimeout(pingActiveChatSocket, 10000)
             }
         }
 
@@ -188,18 +185,21 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
 
                 initChatHeadSocket()
                 onceLoggedIn = true
-                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
+                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
             } else if (retryOnClose) {
 
                 retryOnClose = false
                 clearTimeout(activeChatSocketTimeout)
                 initChatHeadSocket()
                 onceLoggedIn = true
-                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
+                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
             } else if (canPing) {
 
                 socketObject.send('ping')
-                activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
+                timeoutId = setTimeout(() => {
+                    socketObject.close();
+                    clearTimeout(activeChatSocketTimeout)
+                }, 5000);
             }
 
         } else {