diff --git a/backend/src/helpers/walkRecursive.ts b/backend/src/helpers/walkRecursive.ts index f560cf9cb..f3be67575 100644 --- a/backend/src/helpers/walkRecursive.ts +++ b/backend/src/helpers/walkRecursive.ts @@ -9,10 +9,9 @@ function walkRecursive(data, fields, fieldName, callback, _key?) { if (!Array.isArray(fields)) { throw new Error('please provide an fields array for the walkRecursive helper') } - if (data && typeof data === 'string' && fields.includes(_key)) { - // well we found what we searched for, lets replace the value with our callback result - const key = _key.split('!') - if (key.length === 1 || key[1] !== fieldName) data = callback(data, key[0]) + const fieldDef = fields.find((f) => f.field === _key) + if (data && typeof data === 'string' && fieldDef) { + if (!fieldDef.excludes?.includes(fieldName)) data = callback(data, _key) } else if (data && Array.isArray(data)) { // go into the rabbit hole and dig through that array data.forEach((res, index) => { diff --git a/backend/src/middleware/helpers/cleanHtml.ts b/backend/src/middleware/helpers/cleanHtml.ts index ac71f6bdc..84497760d 100644 --- a/backend/src/middleware/helpers/cleanHtml.ts +++ b/backend/src/middleware/helpers/cleanHtml.ts @@ -30,6 +30,7 @@ const standardSanitizeHtmlOptions = { 'strike', 'span', 'blockquote', + 'usertag', ], allowedAttributes: { a: ['href', 'class', 'target', 'data-*', 'contenteditable'], diff --git a/backend/src/middleware/xssMiddleware.ts b/backend/src/middleware/xssMiddleware.ts index ede0cc199..c10997e8d 100644 --- a/backend/src/middleware/xssMiddleware.ts +++ b/backend/src/middleware/xssMiddleware.ts @@ -3,11 +3,11 @@ import { cleanHtml } from '../middleware/helpers/cleanHtml' // exclamation mark separetes field names, that should not be sanitized const fields = [ - 'content', - 'contentExcerpt', - 'reasonDescription', - 'description!embed', - 'descriptionExcerpt', + { field: 'content', excludes: ['CreateMessage', 'Message'] }, + { field: 'contentExcerpt' }, + { field: 'reasonDescription' }, + { field: 'description', excludes: ['embed'] }, + { field: 'descriptionExcerpt' }, ] export default { diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss index 88b42bfc9..5b866d6b7 100644 --- a/webapp/assets/_new/styles/export.scss +++ b/webapp/assets/_new/styles/export.scss @@ -27,4 +27,8 @@ chatMessageBgOthers: $chat-message-bg-others; chatNewMessageColor: $chat-new-message-color; + + chatMessageTimestamp: $chat-message-timestamp; + chatMessageCheckmarkSeen: $chat-message-checkmark-seen; + chatMessageCheckmark: $chat-message-checkmark; } \ No newline at end of file diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index e001ffa84..ef5086240 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -417,3 +417,6 @@ $chat-message-color: $text-color-base; $chat-message-bg-others: $color-neutral-80; $chat-sidemenu-bg: $color-secondary-active; $chat-new-message-color: $color-secondary-active; +$chat-message-timestamp: $text-color-soft; +$chat-message-checkmark-seen: $text-color-secondary; +$chat-message-checkmark: $text-color-soft; diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index d7864ebef..d333deecc 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -35,7 +35,7 @@
@@ -46,7 +46,7 @@
@@ -222,9 +222,9 @@ export default { ...mapMutations({ commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT', }), - async fetchRooms({ room } = {}) { - this.roomsLoaded = false - const offset = this.roomPage * this.roomPageSize + async fetchRooms({ room, options = {} } = {}) { + this.roomsLoaded = options.refetch ? this.roomsLoaded : false + const offset = (options.refetch ? 0 : this.roomPage) * this.roomPageSize try { const { data: { Room }, @@ -238,16 +238,25 @@ export default { fetchPolicy: 'no-cache', }) - const newRooms = Room.map((r) => { - return { - ...r, - users: r.users.map((u) => { - return { ...u, username: u.name, avatar: u.avatar?.url } - }), + const rms = [] + const rmsIds = [] + ;[...Room, ...this.rooms].forEach((r) => { + if (!rmsIds.find((v) => v === r.id)) { + rms.push({ + ...r, + index: r.lastMessage?.date, + lastMessage: { + ...r.lastMessage, + content: r.lastMessage?.content.trim().substring(0, 30), + }, + users: r.users.map((u) => { + return { ...u, username: u.name, avatar: u.avatar?.url } + }), + }) + rmsIds.push(r.id) } }) - - this.rooms = [...this.rooms, ...newRooms] + this.rooms = rms if (Room.length < this.roomPageSize) { this.roomsLoaded = true @@ -282,8 +291,14 @@ export default { fetchPolicy: 'no-cache', }) - const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id) + const newMsgIds = Message.filter( + (m) => m.seen === false && m.senderId !== this.currentUser.id, + ).map((m) => m.id) if (newMsgIds.length) { + const roomIndex = this.rooms.findIndex((r) => r.id === room.id) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.unreadCount = changedRoom.unreadCount - newMsgIds.length + this.rooms[roomIndex] = changedRoom this.$apollo .mutate({ mutation: markMessagesAsSeen(), @@ -322,24 +337,21 @@ export default { }, async chatMessageAdded({ data }) { + const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.lastMessage = data.chatMessageAdded + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) + changedRoom.lastMessageAt = data.chatMessageAdded.date + changedRoom.unreadCount++ + this.rooms[roomIndex] = changedRoom if (data.chatMessageAdded.room.id === this.selectedRoom?.id) { this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } }) } else { - // TODO this might be optimized selectively (first page vs rest) - this.rooms = [] - this.roomPage = 0 - this.roomsLoaded = false - this.fetchRooms() + this.fetchRooms({ options: { refetch: true } }) } }, async sendMessage(message) { - // check for usersTag and change userid to username - message.usersTag.forEach((userTag) => { - const needle = `${userTag.id}` - const replacement = `@${userTag.name.replaceAll(' ', '-').toLowerCase()}` - message.content = message.content.replaceAll(needle, replacement) - }) try { await this.$apollo.mutate({ mutation: createMessageMutation(), @@ -348,6 +360,11 @@ export default { content: message.content, }, }) + const roomIndex = this.rooms.findIndex((r) => r.id === message.roomId) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.lastMessage = message + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) + this.rooms[roomIndex] = changedRoom } catch (error) { this.$toast.error(error.message) } diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index a183a3922..181d88e0e 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -65,7 +65,7 @@ const STYLE = { backgroundSelected: '#c2dcf2', colorDeleted: '#757e85', colorUsername: '#9ca6af', - colorTimestamp: '#828c94', + colorTimestamp: styleData.chatMessageTimestamp, backgroundDate: '#e5effa', colorDate: '#505a62', backgroundSystem: '#e5effa', @@ -134,8 +134,8 @@ const STYLE = { emojiReaction: 'rgba(0, 0, 0, 0.3)', document: styleData.colorPrimary, pencil: '#9e9e9e', - checkmark: '#9e9e9e', - checkmarkSeen: '#0696c7', + checkmark: styleData.chatMessageCheckmark, + checkmarkSeen: styleData.chatMessageCheckmarkSeen, eye: '#fff', dropdownMessage: '#fff', dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',