From 83ae37f154f950e6e6295a310b9958f126eaa425 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 8 Oct 2023 19:42:54 -0700
Subject: [PATCH] chat event stream behaviour updated

---
 src/routes/+page.svelte | 67 ++++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bc6ac34a..275370b5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,19 +18,41 @@
 
 	let textareaElement = '';
 
+	const splitStream = (splitOn) => {
+		let buffer = '';
+		return new TransformStream({
+			transform(chunk, controller) {
+				buffer += chunk;
+				const parts = buffer.split(splitOn);
+				parts.slice(0, -1).forEach((part) => controller.enqueue(part));
+				buffer = parts[parts.length - 1];
+			},
+			flush(controller) {
+				if (buffer) controller.enqueue(buffer);
+			}
+		});
+	};
+
 	const submitPrompt = async () => {
 		console.log('submitPrompt');
+
 		if (selectedModel !== '') {
 			console.log(prompt);
 
 			let user_prompt = prompt;
+
 			chatHistory[Object.keys(chatHistory).length] = {
 				role: 'user',
 				content: user_prompt
 			};
+
 			prompt = '';
 			textareaElement.style.height = '';
 
+			setTimeout(() => {
+				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+			}, 50);
+
 			const res = await fetch(`${ENDPOINT}/api/generate`, {
 				method: 'POST',
 				headers: {
@@ -47,36 +69,47 @@
 				role: 'assistant',
 				content: ''
 			};
+			window.scrollTo({ top: document.body.scrollHeight });
 
-			const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+			const reader = res.body
+				.pipeThrough(new TextDecoderStream())
+				.pipeThrough(splitStream('\n'))
+				.getReader();
 			while (true) {
 				const { value, done } = await reader.read();
 				if (done) break;
 
-				// toast.success(value);
 				try {
-					let data = JSON.parse(value);
-					console.log(data);
+					let lines = value.split('\n');
 
-					if (data.done == false) {
-						if (
-							chatHistory[Object.keys(chatHistory).length - 1].content == '' &&
-							data.response == '\n'
-						) {
-							continue;
-						} else {
-							chatHistory[Object.keys(chatHistory).length - 1].content += data.response;
+					for (const line of lines) {
+						if (line !== '') {
+							console.log(line);
+							let data = JSON.parse(line);
+
+							if (data.done == false) {
+								if (
+									chatHistory[Object.keys(chatHistory).length - 1].content == '' &&
+									data.response == '\n'
+								) {
+									continue;
+								} else {
+									chatHistory[Object.keys(chatHistory).length - 1].content += data.response;
+								}
+							} else {
+								context = data.context;
+								console.log(context);
+								chatHistory[Object.keys(chatHistory).length - 1].done = true;
+							}
 						}
-					} else {
-						context = data.context;
-						console.log(context);
-						chatHistory[Object.keys(chatHistory).length - 1].done = true;
 					}
 				} catch (error) {
 					console.log(error);
 				}
-				window.scrollTo(0, document.body.scrollHeight);
+				window.scrollTo({ top: document.body.scrollHeight });
 			}
+
+			window.scrollTo({ top: document.body.scrollHeight });
 		} else {
 			toast.error('Model not selected');
 		}