refac: WIP

src/lib/components/chat/MessageInput.svelte

@@ -271,7 +271,7 @@
 	<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 		<div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full">
 			<div class="relative">
-				{#if autoScroll === false && !history?.currentId}
+				{#if autoScroll === false && history?.currentId}
 					<div
 						class=" absolute -top-12 left-0 right-0 flex justify-center z-30 pointer-events-none"
 					>

src/lib/components/chat/Messages.svelte

@@ -13,7 +13,14 @@
 	const i18n = getContext('i18n');
 
 	export let chatId = '';
-	export let readOnly = false;
+	export let user = $_user;
+
+	export let prompt;
+	export let history = {};
+	export let selectedModels;
+
+	let messages = [];
+
 	export let sendPrompt: Function;
 	export let continueResponse: Function;
 	export let regenerateResponse: Function;
@@ -21,14 +28,24 @@
 	export let chatActionHandler: Function;
 	export let showMessage: Function = () => {};
 
-	export let user = $_user;
+	export let readOnly = false;
-	export let prompt;
+
 	export let bottomPadding = false;
 	export let autoScroll;
-	export let history = {};
-	export let messages = [];
 
-	export let selectedModels;
+	$: if (history.currentId) {
+		let _messages = [];
+
+		let message = history.messages[history.currentId];
+		while (message) {
+			_messages.unshift({ ...message });
+			message = message.parentId !== null ? history.messages[message.parentId] : null;
+		}
+
+		messages = _messages;
+	} else {
+		messages = [];
+	}
 
 	$: if (autoScroll && bottomPadding) {
 		(async () => {
@@ -312,18 +329,19 @@
 	{:else}
 		<div class="w-full pt-2">
 			{#key chatId}
-				<!-- {JSON.stringify(history)} -->
+				<div class="w-full">
-				<div class="w-full flex flex-col-reverse">
+					{#each messages as message, messageIdx (message.id)}
-					<Message
+						<Message
-						h={0}
+							{chatId}
-						{chatId}
+							{history}
-						{history}
+							messageId={message.id}
-						messageId={history.currentId}
+							idx={messageIdx}
-						{user}
+							{user}
-						{editMessage}
+							{editMessage}
-						{deleteMessage}
+							{deleteMessage}
-						{rateMessage}
+							{rateMessage}
-					/>
+						/>
+					{/each}
 				</div>
 				<div class="pb-12" />
 				{#if bottomPadding}

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -226,7 +226,7 @@ __builtins__.input = input`);
 		}
 	};
 
-	$: if (token.raw) {
+	$: if (token) {
 		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
 			(async () => {
 				await drawMermaidDiagram();
@@ -245,6 +245,7 @@ __builtins__.input = input`);
 	}
 
 	onMount(async () => {
+		console.log('codeblock', lang, code);
 		if (document.documentElement.classList.contains('dark')) {
 			mermaid.initialize({
 				startOnLoad: true,

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <!-- {JSON.stringify(tokens)} -->
-{#each tokens as token, tokenIdx}
+{#each tokens as token, tokenIdx (tokenIdx)}
 	{#if token.type === 'hr'}
 		<hr />
 	{:else if token.type === 'heading'}

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

@@ -12,10 +12,8 @@
 	import UserMessage from './UserMessage.svelte';
 	import { updateChatById } from '$lib/apis/chats';
 
-	// h here refers to the height of the message graph
-	export let h;
-
 	export let chatId;
+	export let idx = 0;
 
 	export let history;
 	export let messageId;
@@ -40,12 +38,23 @@
 
 	export let readOnly = false;
 
+	let message = JSON.parse(JSON.stringify(history.messages[messageId]));
+	$: if (history.messages) {
+		if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) {
+			message = JSON.parse(JSON.stringify(history.messages[messageId]));
+		}
+	}
+
 	const copyToClipboardWithToast = async (text) => {
 		const res = await copyToClipboard(text);
 		if (res) {
 			toast.success($i18n.t('Copying to clipboard was successful!'));
 		}
 	};
+
+	onMount(() => {
+		console.log('message', idx);
+	});
 </script>
 
 <div
@@ -53,13 +62,12 @@
 		? 'max-w-full'
 		: 'max-w-5xl'} mx-auto rounded-lg group"
 >
-	{#if history.messages[messageId]}
+	{#if message}
-		{@const message = history.messages[messageId]}
 		{#if message.role === 'user'}
 			<UserMessage
 				{user}
 				{message}
-				isFirstMessage={h === 0}
+				isFirstMessage={idx === 0}
 				siblings={message.parentId !== null
 					? (history.messages[message.parentId]?.childrenIds ?? [])
 					: (Object.values(history.messages)
@@ -152,24 +160,3 @@
 		{/if}
 	{/if}
 </div>
-
-{#if history.messages[messageId]?.parentId !== null}
-	<svelte:self
-		h={h + 1}
-		{chatId}
-		{history}
-		messageId={history.messages[messageId]?.parentId}
-		{user}
-		{scrollToBottom}
-		{chatActionHandler}
-		{showPreviousMessage}
-		{showNextMessage}
-		{editMessage}
-		{deleteMessage}
-		{rateMessage}
-		{regenerateResponse}
-		{continueResponse}
-		{mergeResponses}
-		{readOnly}
-	></svelte:self>
-{/if}

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -316,6 +316,8 @@
 	}
 
 	onMount(async () => {
+		console.log('ResponseMessage mounted');
+
 		await tick();
 	});
 </script>

src/lib/components/chat/Messages/UserMessage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 	import { toast } from 'svelte-sonner';
-	import { tick, createEventDispatcher, getContext } from 'svelte';
+	import { tick, createEventDispatcher, getContext, onMount } from 'svelte';
 
 	import { models, settings } from '$lib/stores';
 	import { user as _user } from '$lib/stores';
@@ -37,6 +37,10 @@
 	let editedContent = '';
 	let messageEditTextAreaElement: HTMLTextAreaElement;
 
+	$: if (message) {
+		console.log('message', message);
+	}
+
 	const copyToClipboard = async (text) => {
 		const res = await _copyToClipboard(text);
 		if (res) {
@@ -71,6 +75,10 @@
 	const deleteMessageHandler = async () => {
 		dispatch('delete', message.id);
 	};
+
+	onMount(() => {
+		console.log('UserMessage mounted');
+	});
 </script>
 
 <div class=" flex w-full user-message" dir={$settings.chatDirection} id="message-{message.id}">