refac

src/lib/components/channel/Messages.svelte

@@ -128,6 +128,7 @@
 				{message}
 				{channel}
 				{thread}
+				{id}
 				replyToMessage={replyToMessage?.id === message.id}
 				disabled={!channel?.write_access || message?.temp_id}
 				pending={!!message?.temp_id}

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

@@ -47,6 +47,7 @@
 
 	export let showUserProfile = true;
 	export let thread = false;
+	export let id = null;
 
 	export let replyToMessage = false;
 	export let disabled = false;
@@ -64,6 +65,12 @@
 	let edit = false;
 	let editedContent = null;
 	let showDeleteConfirmDialog = false;
+	$: renderedMessageId = message ? (id ? `${id}-${message.id}` : message.id) : null;
+	$: replyToMessageId = message?.reply_to_message
+		? id
+			? `${id}-${message.reply_to_message.id}`
+			: message.reply_to_message.id
+		: null;
 
 	// Swipe-to-reply state
 	let swipeStartX = 0;
@@ -177,7 +184,7 @@
 		{/if}
 
 		<div
-			id="message-{message.id}"
+			id="message-{renderedMessageId}"
 			class="flex flex-col justify-between w-full max-w-full mx-auto group hover:bg-gray-300/5 dark:hover:bg-gray-700/5 relative {className
 				? className
 				: `px-5 ${
@@ -314,7 +321,7 @@
 						class="ml-12 flex items-center space-x-2 relative z-0"
 						on:click={() => {
 							const messageElement = document.getElementById(
-								`message-${message.reply_to_message.id}`
+								`message-${replyToMessageId}`
 							);
 							if (messageElement) {
 								messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -354,7 +361,7 @@
 
 						<div class="italic text-sm text-gray-500 dark:text-gray-400 line-clamp-1 w-full flex-1">
 							<Markdown
-								id={`${message.id}-reply-to`}
+								id={`${renderedMessageId}-reply-to`}
 								content={message?.reply_to_message?.content}
 								allowEmbeds={false}
 							/>
@@ -365,7 +372,7 @@
 
 			<div
 				class=" flex w-full message-{message.id} "
-				id="message-{message.id}"
+				id="message-{renderedMessageId}"
 				dir={$settings.chatDirection}
 			>
 				<div class={`shrink-0 mr-1 w-9`}>
@@ -525,7 +532,7 @@
 								<Skeleton />
 							{:else}
 								<Markdown
-									id={message.id}
+									id={renderedMessageId}
 									content={message.content}
 									paragraphTag="span"
 									allowEmbeds={!!message?.meta?.model_id}