fix: force rerender on message ID change

src/lib/components/chat/ChatMessage.svelte

@@ -529,65 +529,68 @@
 {/if}
 
 {#if nChildren > 0}
-	<svelte:self
-		{loading}
-		{messages}
-		{isAuthor}
-		{readOnly}
-		{model}
-		id={messages.find((m) => m.id === id)?.children?.[childrenToRender]}
-		on:retry
-		on:vote
-		on:continue
-	>
-		<svelte:fragment slot="childrenNav">
-			{#if nChildren > 1 && $convTreeStore.editing === null}
-				<div
-					class="font-white group/navbranch z-10 -mt-1 ml-3.5 mr-auto flex h-6 w-fit select-none flex-row items-center justify-center gap-1 text-sm"
-				>
-					<button
-						class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
-						on:click={() => (childrenToRender = Math.max(0, childrenToRender - 1))}
-						disabled={childrenToRender === 0 || loading}
-					>
-						<CarbonChevronLeft class="text-sm" />
-					</button>
-					<span class=" text-gray-400 dark:text-gray-500">
-						{childrenToRender + 1} / {nChildren}
-					</span>
-					<button
-						class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
-						on:click={() =>
-							(childrenToRender = Math.min(
-								message?.children?.length ?? 1 - 1,
-								childrenToRender + 1
-							))}
-						disabled={childrenToRender === nChildren - 1 || loading}
+	{@const messageId = messages.find((m) => m.id === id)?.children?.[childrenToRender]}
+	{#key messageId}
+		<svelte:self
+			{loading}
+			{messages}
+			{isAuthor}
+			{readOnly}
+			{model}
+			id={messageId}
+			on:retry
+			on:vote
+			on:continue
+		>
+			<svelte:fragment slot="childrenNav">
+				{#if nChildren > 1 && $convTreeStore.editing === null}
+					<div
+						class="font-white group/navbranch z-10 -mt-1 ml-3.5 mr-auto flex h-6 w-fit select-none flex-row items-center justify-center gap-1 text-sm"
 					>
-						<CarbonChevronRight class="text-sm" />
-					</button>
-					{#if !loading && message.children}<form
-							method="POST"
-							action="?/deleteBranch"
-							class="hidden group-hover/navbranch:block"
-							use:enhance={({ cancel }) => {
-								if (!confirm("Are you sure you want to delete this branch?")) {
-									cancel();
-								}
-							}}
+						<button
+							class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+							on:click={() => (childrenToRender = Math.max(0, childrenToRender - 1))}
+							disabled={childrenToRender === 0 || loading}
 						>
-							<input name="messageId" value={message.children[childrenToRender]} type="hidden" />
-							<button
-								class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
-								type="submit"
-								><CarbonTrashCan />
-							</button>
-						</form>
-					{/if}
-				</div>
-			{/if}
-		</svelte:fragment>
-	</svelte:self>
+							<CarbonChevronLeft class="text-sm" />
+						</button>
+						<span class=" text-gray-400 dark:text-gray-500">
+							{childrenToRender + 1} / {nChildren}
+						</span>
+						<button
+							class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+							on:click={() =>
+								(childrenToRender = Math.min(
+									message?.children?.length ?? 1 - 1,
+									childrenToRender + 1
+								))}
+							disabled={childrenToRender === nChildren - 1 || loading}
+						>
+							<CarbonChevronRight class="text-sm" />
+						</button>
+						{#if !loading && message.children}<form
+								method="POST"
+								action="?/deleteBranch"
+								class="hidden group-hover/navbranch:block"
+								use:enhance={({ cancel }) => {
+									if (!confirm("Are you sure you want to delete this branch?")) {
+										cancel();
+									}
+								}}
+							>
+								<input name="messageId" value={message.children[childrenToRender]} type="hidden" />
+								<button
+									class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
+									type="submit"
+									><CarbonTrashCan />
+								</button>
+							</form>
+						{/if}
+					</div>
+				{/if}
+			</svelte:fragment>
+		</svelte:self>
+	{/key}
 {/if}
 
 <style>