enh: reply count

src/lib/apis/channels/index.ts

@@ -250,6 +250,7 @@ export const getChannelThreadMessages = async (
 }
 
 type MessageForm = {
+	parent_id?: string;
 	content: string;
 	data?: object;
 	meta?: object;

src/lib/components/channel/Channel.svelte

@@ -74,15 +74,17 @@
 			const data = event?.data?.data ?? null;
 
 			if (type === 'message') {
-				messages = [data, ...messages];
+				if ((data?.parent_id ?? null) === null) {
+					messages = [data, ...messages];
 
-				if (typingUsers.find((user) => user.id === event.user.id)) {
-					typingUsers = typingUsers.filter((user) => user.id !== event.user.id);
-				}
+					if (typingUsers.find((user) => user.id === event.user.id)) {
+						typingUsers = typingUsers.filter((user) => user.id !== event.user.id);
+					}
 
-				await tick();
-				if (scrollEnd) {
-					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+					await tick();
+					if (scrollEnd) {
+						messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+					}
 				}
 			} else if (type === 'message:update') {
 				const idx = messages.findIndex((message) => message.id === data.id);
@@ -92,7 +94,7 @@
 				}
 			} else if (type === 'message:delete') {
 				messages = messages.filter((message) => message.id !== data.id);
-			} else if (type === 'message:reaction') {
+			} else if (type.includes('message:reaction')) {
 				const idx = messages.findIndex((message) => message.id === data.id);
 				if (idx !== -1) {
 					messages[idx] = data;

src/lib/components/channel/Messages/Message.svelte

@@ -29,6 +29,7 @@
 	import ChatBubbleOvalEllipsis from '$lib/components/icons/ChatBubbleOvalEllipsis.svelte';
 	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
 	import ReactionPicker from './Message/ReactionPicker.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 
 	export let message;
 	export let showUserProfile = true;
@@ -324,6 +325,29 @@
 							</div>
 						</div>
 					{/if}
+
+					{#if message.reply_count > 0}
+						<div class="flex items-center gap-1.5 -mt-0.5 mb-1.5">
+							<button
+								class="flex items-center text-xs py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition"
+								on:click={() => {
+									onThread(message.id);
+								}}
+							>
+								<span class="font-medium mr-1">
+									{$i18n.t('{{COUNT}} Replies', { COUNT: message.reply_count })}</span
+								><span>
+									{' - '}{$i18n.t('Last reply')}
+									{dayjs.unix(message.latest_reply_at / 1000000000).fromNow()}</span
+								>
+
+								<span class="ml-1">
+									<ChevronRight className="size-2.5" strokeWidth="3" />
+								</span>
+								<!-- {$i18n.t('View Replies')} -->
+							</button>
+						</div>
+					{/if}
 				{/if}
 			</div>
 		</div>

src/lib/components/channel/Messages/Message/ReactionPicker.svelte

@@ -75,7 +75,7 @@
 
 	<slot name="content">
 		<DropdownMenu.Content
-			class="max-w-full  w-80  bg-gray-50 dark:bg-gray-850 rounded-lg z-50 shadow-lg text-white"
+			class="max-w-full  w-80  bg-gray-50 dark:bg-gray-850 rounded-lg z-50 shadow-lg dark:text-white"
 			sideOffset={8}
 			{side}
 			{align}
@@ -90,54 +90,56 @@
 				/>
 			</div>
 			<div class=" w-full flex justify-start h-96 overflow-y-auto px-3 pb-3 text-sm">
-				<div>
-					{#if Object.keys(emojis).length === 0}
-						<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
-					{:else}
-						{#each Object.keys(emojiGroups) as group}
-							{@const groupEmojis = emojiGroups[group].filter((emoji) => emojis[emoji])}
-							{#if groupEmojis.length > 0}
-								<div class="flex flex-col">
-									<div class="text-xs font-medium mb-2 text-gray-500 dark:text-gray-400">
-										{group}
-									</div>
+				{#if show}
+					<div>
+						{#if Object.keys(emojis).length === 0}
+							<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
+						{:else}
+							{#each Object.keys(emojiGroups) as group}
+								{@const groupEmojis = emojiGroups[group].filter((emoji) => emojis[emoji])}
+								{#if groupEmojis.length > 0}
+									<div class="flex flex-col">
+										<div class="text-xs font-medium mb-2 text-gray-500 dark:text-gray-400">
+											{group}
+										</div>
 
-									<div class="flex mb-2 flex-wrap gap-1">
-										{#each groupEmojis as emoji (emoji)}
-											<Tooltip
-												content={(typeof emojiShortCodes[emoji] === 'string'
-													? [emojiShortCodes[emoji]]
-													: emojiShortCodes[emoji]
-												)
-													.map((code) => `:${code}:`)
-													.join(', ')}
-												placement="top"
-											>
-												<button
-													class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition"
-													on:click={() => {
-														typeof emojiShortCodes[emoji] === 'string'
-															? onSubmit(emojiShortCodes[emoji])
-															: onSubmit(emojiShortCodes[emoji][0]);
-
-														show = false;
-													}}
+										<div class="flex mb-2 flex-wrap gap-1">
+											{#each groupEmojis as emoji (emoji)}
+												<Tooltip
+													content={(typeof emojiShortCodes[emoji] === 'string'
+														? [emojiShortCodes[emoji]]
+														: emojiShortCodes[emoji]
+													)
+														.map((code) => `:${code}:`)
+														.join(', ')}
+													placement="top"
 												>
-													<img
-														src="/assets/emojis/{emoji.toLowerCase()}.svg"
-														alt={emoji}
-														class="size-5"
-														loading="lazy"
-													/>
-												</button>
-											</Tooltip>
-										{/each}
+													<button
+														class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition"
+														on:click={() => {
+															typeof emojiShortCodes[emoji] === 'string'
+																? onSubmit(emojiShortCodes[emoji])
+																: onSubmit(emojiShortCodes[emoji][0]);
+
+															show = false;
+														}}
+													>
+														<img
+															src="/assets/emojis/{emoji.toLowerCase()}.svg"
+															alt={emoji}
+															class="size-5"
+															loading="lazy"
+														/>
+													</button>
+												</Tooltip>
+											{/each}
+										</div>
 									</div>
-								</div>
-							{/if}
-						{/each}
-					{/if}
-				</div>
+								{/if}
+							{/each}
+						{/if}
+					</div>
+				{/if}
 			</div>
 		</DropdownMenu.Content>
 	</slot>

src/lib/components/channel/Thread.svelte

@@ -3,12 +3,13 @@
 
 	import { socket } from '$lib/stores';
 
-	import { getChannelThreadMessages } from '$lib/apis/channels';
+	import { getChannelThreadMessages, sendMessage } from '$lib/apis/channels';
 
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import MessageInput from './MessageInput.svelte';
 	import Messages from './Messages.svelte';
 	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
 
 	export let threadId = null;
 	export let channel = null;
@@ -43,10 +44,19 @@
 		}
 	};
 
-	const submitHandler = async (message) => {
-		// if (message) {
-		// 	await sendMessage(localStorage.token, channel.id, message, threadId);
-		// }
+	const submitHandler = async ({ content, data }) => {
+		if (!content) {
+			return;
+		}
+
+		const res = await sendMessage(localStorage.token, channel.id, {
+			parent_id: threadId,
+			content: content,
+			data: data
+		}).catch((error) => {
+			toast.error(error);
+			return null;
+		});
 	};
 
 	const onChange = async () => {