last message timestamp with red dot

qortal-ui-core/language/us.json

@@ -579,7 +579,8 @@
 		"cchange71": "and",
 		"cchange72": "other",
 		"cchange73": "s",
-		"cchange74": "reacted with"
+		"cchange74": "reacted with",
+		"cchange90": "No messages"
 	},
 	"welcomepage": {
 		"wcchange1": "Welcome to Q-Chat",

qortal-ui-core/package.json

@@ -77,9 +77,10 @@
 		"rollup-plugin-node-globals": "1.4.0",
 		"rollup-plugin-progress": "1.1.2",
 		"rollup-plugin-scss": "3.0.0",
-		"rollup-plugin-web-worker-loader": "1.6.1"
+		"rollup-plugin-web-worker-loader": "1.6.1",
+		"localforage": "1.10.0"
 	},
 	"engines": {
 		"node": ">=16.17.1"
 	}
-}
+}

qortal-ui-core/src/components/app-view.js

@@ -4,6 +4,11 @@ import { store } from '../store.js'
 import { Epml } from '../epml.js'
 import { addTradeBotRoutes } from '../tradebot/addTradeBotRoutes.js'
 import { get, translate, translateUnsafeHTML } from 'lit-translate'
+import localForage from "localforage";
+
+const chatLastSeen = localForage.createInstance({
+    name: "chat-last-seen",
+});
 
 import '@polymer/paper-icon-button/paper-icon-button.js'
 import '@polymer/paper-progress/paper-progress.js'
@@ -27,6 +32,7 @@ import './user-info-view/user-info-view.js'
 import '../functional-components/side-menu.js'
 import '../functional-components/side-menu-item.js'
 import './start-minting.js'
+import { setChatLastSeen } from '../redux/app/app-actions.js'
 
 const parentEpml = new Epml({type: 'WINDOW', source: window.parent})
 
@@ -1386,6 +1392,17 @@ class AppView extends connect(store)(LitElement) {
             }
         }
 
+       const getChatLastSeen=async() => {
+            let items = [];
+          
+            await chatLastSeen.iterate(function(value, key, iterationNumber) {
+               
+                items.push({key, timestamp: value});
+              })
+              store.dispatch(setChatLastSeen(items))
+            return items;
+          }
+
         await getOpenTradesBTC()
         await appDelay(1000)
         await getOpenTradesLTC()
@@ -1397,6 +1414,7 @@ class AppView extends connect(store)(LitElement) {
         await getOpenTradesRVN()
         await appDelay(1000)
         await getOpenTradesARRR()
+        await getChatLastSeen()
     }
 
     async getNodeType() {

qortal-ui-core/src/components/login-view/login-view.js

@@ -14,12 +14,14 @@ import './login-section.js'
 import '../qort-theme-toggle.js'
 
 import settings from '../../functional-components/settings-page.js'
-import { addAutoLoadImageChat, removeAutoLoadImageChat } from '../../redux/app/app-actions.js'
+import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen } from '../../redux/app/app-actions.js'
 
 window.reduxStore = store
 window.reduxAction = {
     addAutoLoadImageChat: addAutoLoadImageChat,
-    removeAutoLoadImageChat: removeAutoLoadImageChat
+    removeAutoLoadImageChat: removeAutoLoadImageChat,
+    addChatLastSeen: addChatLastSeen
+
 }
 
 const animationDuration = 0.7 // Seconds

qortal-ui-core/src/plugins/streams.js

@@ -9,6 +9,7 @@ const CHAT_HEADS_STREAM_NAME = 'chat_heads'
 const NODE_CONFIG_STREAM_NAME = 'node_config'
 const COPY_MENU_SWITCH = 'copy_menu_switch'
 const FRAME_PASTE_MENU_SWITCH = 'frame_paste_menu_switch'
+const CHAT_LAST_SEEN = 'chat_last_seen'
 
 export const loggedInStream = new EpmlStream(LOGIN_STREAM_NAME, () => store.getState().app.loggedIn)
 export const configStream = new EpmlStream(CONFIG_STREAM_NAME, () => store.getState().config)
@@ -18,6 +19,7 @@ export const chatHeadsStateStream = new EpmlStream(CHAT_HEADS_STREAM_NAME, () =>
 export const nodeConfigStream = new EpmlStream(NODE_CONFIG_STREAM_NAME, () => store.getState().app.nodeConfig)
 export const copyMenuSwitchStream = new EpmlStream(COPY_MENU_SWITCH, () => store.getState().app.copyMenuSwitch)
 export const framePasteMenuSwitchStream = new EpmlStream(FRAME_PASTE_MENU_SWITCH, () => store.getState().app.framePasteMenuSwitch)
+export const chatLastSeenStream = new EpmlStream(CHAT_LAST_SEEN, () => store.getState().app.chatLastSeen)
 
 
 let oldState = {
@@ -46,6 +48,9 @@ store.subscribe(() => {
     if (oldState.app.framePasteMenuSwitch !== state.app.framePasteMenuSwitch) {
         framePasteMenuSwitchStream.emit(state.app.framePasteMenuSwitch)
     }
+    if (oldState.app.chatLastSeen !== state.app.chatLastSeen) {
+        chatLastSeenStream.emit(state.app.chatLastSeen)
+    }
 
     if (oldState.app.selectedAddress !== state.app.selectedAddress) {
         selectedAddressStream.emit({

qortal-ui-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, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from '../app-action-types.js'
 
 export const doUpdateBlockInfo = (blockObj) => {
     return (dispatch, getState) => {
@@ -120,3 +120,16 @@ export const removeAutoLoadImageChat = (payload) => {
     }
 }
 
+export const setChatLastSeen = (payload) => {
+    return {
+        type: SET_CHAT_LAST_SEEN,
+        payload
+    }
+}
+export const addChatLastSeen = (payload) => {
+    return {
+        type: ADD_CHAT_LAST_SEEN,
+        payload
+    }
+}
+

qortal-ui-core/src/redux/app/app-action-types.js

@@ -21,4 +21,6 @@ export const COPY_MENU_SWITCH = 'COPY_MENU_SWITCH'
 export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH'
 export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH'
 export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT'
-export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT'
+export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT'
+export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
+export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'

qortal-ui-core/src/redux/app/app-reducer.js

@@ -1,9 +1,14 @@
 // 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, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } 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, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } 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'
+import localForage from "localforage";
+const chatLastSeen = localForage.createInstance({
+    name: "chat-last-seen",
+});
+
 
 const INITIAL_STATE = {
     loggedIn: false,
@@ -44,7 +49,8 @@ const INITIAL_STATE = {
         isOpen: false,
         elementId: ''
     },
-    autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || []
+    autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [],
+    chatLastSeen: []
 }
 
 export default (state = INITIAL_STATE, action) => {
@@ -169,6 +175,38 @@ export default (state = INITIAL_STATE, action) => {
                 autoLoadImageChats: updatedState
          }
         }
+        case SET_CHAT_LAST_SEEN: {
+            return {
+                ...state,
+                chatLastSeen: action.payload
+         }
+        }
+        case ADD_CHAT_LAST_SEEN: {
+            const chatId = action.payload.key
+            const timestamp = action.payload.timestamp
+            if(!chatId || !timestamp) return state
+            let newChatLastSeen = [...state.chatLastSeen]
+            const findChatIndex = state.chatLastSeen.findIndex((chat)=> chat.key === chatId)
+            if(findChatIndex !== -1){
+               
+                newChatLastSeen[findChatIndex] = {
+                    key: chatId,
+                    timestamp,
+                }
+            }
+            if(findChatIndex === -1){
+               
+                newChatLastSeen = [...newChatLastSeen, {
+                    key: chatId,
+                    timestamp,
+                }]
+            }
+            chatLastSeen.setItem(chatId, timestamp)
+            return {
+                ...state,
+                chatLastSeen: newChatLastSeen
+         }
+        }
                 
         default:
             return state

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

@@ -1,11 +1,15 @@
 import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
+import localForage from "localforage";
+import { translate} from 'lit-translate';
 
 import '@material/mwc-icon'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
-
+const chatLastSeen = localForage.createInstance({
+    name: "chat-last-seen",
+});
 class ChatHead extends LitElement {
     static get properties() {
         return {
@@ -15,7 +19,8 @@ class ChatHead extends LitElement {
             iconName: { type: String },
             activeChatHeadUrl: { type: String },
             isImageLoaded: { type: Boolean },
-            setActiveChatHeadUrl: {attribute: false}
+            setActiveChatHeadUrl: {attribute: false},
+            lastReadMessageTimestamp: {type: Number}
         }
     }
 
@@ -24,9 +29,13 @@ class ChatHead extends LitElement {
             li {
            
                 width: 100%;
-                padding: 7px 5px 7px 5px;
+                padding: 10px 5px 10px 5px;
                 cursor: pointer;
                 width: 100%;
+                box-sizing: border-box;
+                display: flex;
+                align-items: flex-start;
+
             }
 
             li:hover {
@@ -44,12 +53,21 @@ class ChatHead extends LitElement {
                 color: var(--chat-group);
             }
 
-            .about {
+         
-                margin-top: 8px;
-            }
 
             .about {
-                padding-left: 8px;
+   
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                margin: 0px;
+            }
+            .inner-container {
+                display: flex;
+                width: calc(100% - 45px);
+                flex-direction: column;
+                justify-content: center;
             }
 
             .status {
@@ -64,6 +82,13 @@ class ChatHead extends LitElement {
                 clear: both;
                 height: 0;
             }
+
+            .name {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+            }
         `
     }
 
@@ -82,6 +107,7 @@ class ChatHead extends LitElement {
         this.activeChatHeadUrl = ''
         this.isImageLoaded = false
         this.imageFetches = 0
+        this.lastReadMessageTimestamp =  0
     }
 
     createImage(imageUrl)  {
@@ -108,33 +134,59 @@ class ChatHead extends LitElement {
         };
         return imageHTMLRes;
       }
+      updated(){
 
+      }
     render() {
         let avatarImg = '';
         let backupAvatarImg = ''
+        let isUnread = false
+    
         if(this.chatInfo.name){
             const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
             const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
             const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
             avatarImg= this.createImage(avatarUrl)
-          
         }
 
+        if(this.lastReadMessageTimestamp && this.chatInfo.timestamp){
+            if(this.lastReadMessageTimestamp < this.chatInfo.timestamp){
+                isUnread = true
+            }
+        }
+
+        if(this.activeChatHeadUrl === this.chatInfo.url){
+            isUnread = false
+        }
+        
         return html`
             <li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
                 ${this.isImageLoaded ? html`${avatarImg}` : html`` }
                 ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
-                ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
+                ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:40px; height:40px; flex-shrink: 0; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
-                ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
+                ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:40px; height:40px; flex-shrink: 0; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
+               <div class="inner-container">
                 <div class="about">
-                    <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
+                    <div class="name"><span style="font-weight: bold;float:left; padding-left: 8px; color: var(--chat-group);font-size:14px;word-break:${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? 'break-word': 'break-all'}">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="font-size:18px; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
                 </div>
+                <div class="about" style="margin-top:7px">
+                    <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);font-size:14px"></span> 
+                    <div style="color: var(--black); display: flex;font-size: 12px; align-items:center">
+                    <div style="width: 8px; height: 8px;border-radius: 50%;background: ${isUnread ? 'var(--error)' : 'none'} ; margin-right:5px;"></div> 
+                    <message-time style="display: ${(this.chatInfo.timestamp && this.chatInfo.timestamp > 100000) ? 'block' : 'none'}" timestamp=${this.chatInfo.timestamp}></message-time>
+                    <span style="font-size:12px;color:var(--black);display: ${(!this.chatInfo.timestamp || this.chatInfo.timestamp > 100000) ? 'none' : 'block'}">${translate('chatpage.cchange90')}</span>
+                    </div>
+                    </div>
+                </div>
+                </div>
+            
             </li>
         `
     }
 
-    firstUpdated() {
+   async firstUpdated() {
         let configLoaded = false
+        this.lastReadMessageTimestamp =  await chatLastSeen.getItem(this.chatInfo.url) || 0
         parentEpml.ready().then(() => {
             parentEpml.subscribe('selected_address', async selectedAddress => {
                 this.selectedAddress = {}
@@ -142,6 +194,15 @@ class ChatHead extends LitElement {
                 if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
                 this.selectedAddress = selectedAddress
             })
+            parentEpml.subscribe('chat_last_seen', async chatList => {
+                const parsedChatList = JSON.parse(chatList)
+                const findChatSeen = parsedChatList.find(chat=> chat.key === this.chatInfo.url)
+  
+                if(findChatSeen && this.lastReadMessageTimestamp !== findChatSeen.timestamp){
+                    this.lastReadMessageTimestamp = findChatSeen.timestamp
+                    this.requestUpdate()
+                }
+            })
             parentEpml.subscribe('config', c => {
                 if (!configLoaded) {
                     configLoaded = true
@@ -156,6 +217,9 @@ class ChatHead extends LitElement {
         if(changedProperties.has('activeChatHeadUrl')){
             return true
         }
+        if(changedProperties.has('lastReadMessageTimestamp')){
+            return true
+        }
         if(changedProperties.has('chatInfo')){
             return true
         }

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

@@ -10,7 +10,7 @@ import Highlight from '@tiptap/extension-highlight'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import { Editor, Extension } from '@tiptap/core'
 
-// import localForage from "localforage";
+import localForage from "localforage";
 registerTranslateConfig({
     loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 });
@@ -42,9 +42,9 @@ import WebWorker from 'web-worker:./computePowWorker.js';
 import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
 import '@polymer/paper-dialog/paper-dialog.js'
 
-// const messagesCache = localForage.createInstance({
+const chatLastSeen = localForage.createInstance({
-//     name: "messages-cache",
+    name: "chat-last-seen",
-// });
+});
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
@@ -1444,6 +1444,14 @@ class ChatPage extends LitElement {
         
         document.removeEventListener('keydown', this.initialChat);
         document.removeEventListener('paste', this.pasteImage);
+        if(this.messagesRendered.length !== 0){
+            window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({
+                key: this.chatId,
+                timestamp: Date.now()
+            }))
+           
+        }
+       
     }
 
       initialChat(e) {
@@ -1465,9 +1473,7 @@ class ChatPage extends LitElement {
         const handleTransferIntoURL = (dataTransfer) => {
             try {
                 const [firstItem] = dataTransfer.items;
-                console.log({firstItem});
                 const blob = firstItem.getAsFile();
-                console.log({blob});
                 return blob;
             } catch (error) {
                 console.log(error);

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

@@ -19,7 +19,7 @@ class TimeAgo extends LitElement {
 
     updated(changedProps) {
         changedProps.forEach((OldProp, name) => {
-            if (name === 'timeIso') {
+            if (name === 'timeIso' || name === 'timestamp') {
                 this.renderTime(this.timestamp)
             }
         });
@@ -35,7 +35,6 @@ class TimeAgo extends LitElement {
     }
 
     render() {
-
         return html`
             <time-ago datetime=${this.timeIso} format=${this.format}> </time-ago>
         `