feat: update chat teasers when a new chat starts, closes #12713

public/src/client/chats.js

@@ -684,6 +684,31 @@ define('forum/chats', [
 	};
 
 	Chats.addSocketListeners = function () {
+		socket.on('event:new_notification', async function (notif) {
+			const { type, roomId } = notif;
+			if (ajaxify.data.template.chats && app.user.userslug && (type === 'new-chat' || type === 'new-group-chat')) {
+				const inRoom = parseInt(roomId, 10) === parseInt(ajaxify.data.roomId, 10);
+				if (inRoom) {
+					return;
+				}
+				const { rooms } = await api.get(`/chats`, { start: 0, perPage: 1 });
+				const room = rooms.find(r => parseInt(r.roomId, 10) === parseInt(roomId, 10));
+				if (room) {
+					const roomEl = chatNavWrapper.find(`[data-roomid="${roomId}"]`);
+					if (roomEl.length) {
+						updateTeaser(roomId, room.teaser);
+					} else {
+						const recentEl = components.get('chat/recent');
+						const html = await app.parseAndTranslate('chats', 'rooms', {
+							rooms: [room],
+							showBottomHr: true,
+						});
+						recentEl.prepend(html);
+					}
+				}
+			}
+		});
+
 		socket.on('event:chats.receive', function (data) {
 			if (chatModule.isFromBlockedUser(data.fromUid)) {
 				return;
@@ -697,9 +722,26 @@ define('forum/chats', [
 				data.message.timestamp = Math.min(Date.now(), data.message.timestamp);
 				data.message.timestampISO = utils.toISOString(data.message.timestamp);
 				messages.appendChatMessage($('[component="chat/message/content"]'), data.message);
+
+				updateTeaser(data.roomId, {
+					content: utils.stripHTMLTags(utils.decodeHTMLEntities(data.message.content)),
+					user: data.message.fromUser,
+					timestampISO: data.message.timestampISO,
+				});
 			}
 		});
 
+		async function updateTeaser(roomId, teaser) {
+			const roomEl = $(`[data-roomid="${roomId}"]`);
+			if (roomEl.length) {
+				const html = await app.parseAndTranslate('partials/chats/room-teaser', {
+					teaser: teaser,
+				});
+				roomEl.find('[component="chat/room/teaser"]').html(html[0].outerHTML);
+				roomEl.find('.timeago').timeago();
+			}
+		}
+
 		socket.on('event:chats.public.unread', function (data) {
 			if (
 				chatModule.isFromBlockedUser(data.fromUid) ||

src/api/chats.js

@@ -37,7 +37,7 @@ async function rateLimitExceeded(caller, field) {
 }
 
 chatsAPI.list = async (caller, { uid = caller.uid, start, stop, page, perPage } = {}) => {
-	if (!start && !stop && !page) {
+	if (!utils.isNumber(start) && !utils.isNumber(stop) && !utils.isNumber(page)) {
 		throw new Error('[[error:invalid-data]]');
 	}
 

src/views/partials/chats/recent_room.tpl

@@ -31,15 +31,7 @@
 					{{{ end  }}}
 				{{{ end }}}
 				</div>
-
-				{{{ if ./teaser }}}
-				<div class="teaser-content text-sm line-clamp-3 text-break">
-					{buildAvatar(./teaser.user, "14px", true, "align-middle")}
-					<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
-					{./teaser.content}
-				</div>
-				<div class="teaser-timestamp text-muted text-xs">{{{ if ./teaser.timeagoLong }}}{./teaser.timeagoLong}{{{ else }}}<span class="timeago" title="{./teaser.timestampISO}"></span>{{{ end }}}</div>
-				{{{ end }}}
+				<!-- IMPORT partials/chats/room-teaser.tpl -->
 			</div>
 		</div>
 		<div>
@@ -52,4 +44,8 @@
 </div>
 {{{ if !@last }}}
 <hr class="my-1" />
+{{{ else }}}
+{{{ if showBottomHr }}}
+<hr class="my-1" />
+{{{ end }}}
 {{{ end }}}

src/views/partials/chats/room-teaser.tpl

@@ -0,0 +1,10 @@
+<div component="chat/room/teaser">
+	{{{ if ./teaser }}}
+	<div class="teaser-content text-sm line-clamp-3 text-break">
+		{buildAvatar(./teaser.user, "14px", true, "align-middle")}
+		<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
+		{./teaser.content}
+	</div>
+	<div class="teaser-timestamp text-muted text-xs">{{{ if ./teaser.timeagoLong }}}{./teaser.timeagoLong}{{{ else }}}<span class="timeago" title="{./teaser.timestampISO}"></span>{{{ end }}}</div>
+	{{{ end }}}
+</div>