From 67f704c98d9c00797873211fc2d01af5028747a2 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 18 Sep 2024 03:13:37 +0200
Subject: [PATCH] enh: scroll to message from overview

---
 src/lib/components/chat/Chat.svelte          | 23 ++++++++++++++++++++
 src/lib/components/chat/ChatControls.svelte  |  4 ++++
 src/lib/components/chat/Messages.svelte      |  6 ++++-
 src/lib/components/chat/Overview.svelte      |  3 +--
 src/lib/components/chat/Overview/Flow.svelte |  6 ++++-
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 5a3bade59..a4f7f0cf7 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -143,6 +143,28 @@
 		})();
 	}
 
+	const showMessage = async (message) => {
+		let _messageId = JSON.parse(JSON.stringify(message.id));
+
+		let messageChildrenIds = history.messages[_messageId].childrenIds;
+
+		while (messageChildrenIds.length !== 0) {
+			_messageId = messageChildrenIds.at(-1);
+			messageChildrenIds = history.messages[_messageId].childrenIds;
+		}
+
+		history.currentId = _messageId;
+
+		await tick();
+		await tick();
+		await tick();
+
+		const messageElement = document.getElementById(`message-${message.id}`);
+		if (messageElement) {
+			messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	};
+
 	const chatEventHandler = async (event, cb) => {
 		if (event.chat_id === $chatId) {
 			await tick();
@@ -1812,6 +1834,7 @@
 	bind:files
 	{submitPrompt}
 	{stopResponse}
+	{showMessage}
 	modelId={selectedModelIds?.at(0) ?? null}
 	chatId={$chatId}
 	{eventTarget}
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index c7abe2dd1..81608b8c3 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -21,6 +21,7 @@
 	export let eventTarget: EventTarget;
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
+	export let showMessage: Function;
 	export let files;
 	export let modelId;
 
@@ -126,6 +127,9 @@
 					{:else if $showOverview}
 						<Overview
 							bind:history
+							on:nodeclick={(e) => {
+								showMessage(e.detail.node.data.message);
+							}}
 							on:close={() => {
 								showControls.set(false);
 							}}
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 3080bcac9..f62919b65 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -337,7 +337,11 @@
 		<div class="w-full pt-2">
 			{#key chatId}
 				{#each messages as message, messageIdx (message.id)}
-					<div class=" w-full {messageIdx === messages.length - 1 ? ' pb-12' : ''}">
+					<div
+						class=" w-full {messageIdx === messages.length - 1
+							? ' pb-12'
+							: ''} message-{message.id}"
+					>
 						<div
 							class="flex flex-col justify-between px-5 mb-3 {($settings?.widescreenMode ?? null)
 								? 'max-w-full'
diff --git a/src/lib/components/chat/Overview.svelte b/src/lib/components/chat/Overview.svelte
index a4d89bec9..a12a0d80a 100644
--- a/src/lib/components/chat/Overview.svelte
+++ b/src/lib/components/chat/Overview.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext, createEventDispatcher } from 'svelte';
 	import { useSvelteFlow, useNodesInitialized, useStore } from '@xyflow/svelte';
-	import { SvelteFlow, Controls, Background, BackgroundVariant } from '@xyflow/svelte';
 
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
@@ -148,6 +147,6 @@
 	</div>
 
 	{#if $nodes.length > 0}
-		<Flow {nodes} {nodeTypes} {edges} />
+		<Flow {nodes} {nodeTypes} {edges} on:nodeclick={(e) => dispatch('nodeclick', e.detail)} />
 	{/if}
 </div>
diff --git a/src/lib/components/chat/Overview/Flow.svelte b/src/lib/components/chat/Overview/Flow.svelte
index 93de776f0..f7ff30756 100644
--- a/src/lib/components/chat/Overview/Flow.svelte
+++ b/src/lib/components/chat/Overview/Flow.svelte
@@ -1,4 +1,8 @@
 <script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
 	import { theme } from '$lib/stores';
 	import { Background, Controls, SvelteFlow, BackgroundVariant } from '@xyflow/svelte';
 
@@ -22,7 +26,7 @@
 			: 'light'}
 	nodesConnectable={false}
 	nodesDraggable={false}
-	on:nodeclick={(event) => console.log('on node click', event.detail.node)}
+	on:nodeclick={(e) => dispatch('nodeclick', e.detail)}
 	oninit={() => {
 		console.log('Flow initialized');
 	}}