From 9083ee8a5d4a563995fd39a24ee0607622f730fb Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 7 Jan 2024 03:19:34 -0800
Subject: [PATCH] feat: reading indicator

---
 src/lib/components/chat/Messages.svelte | 50 ++++++++++++++++++++++++-
 src/routes/(app)/+page.svelte           |  4 ++
 src/routes/(app)/c/[id]/+page.svelte    |  5 +++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 2a388fd2..9f7fb7f6 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -10,11 +10,13 @@
 	import UserMessage from './Messages/UserMessage.svelte';
 	import ResponseMessage from './Messages/ResponseMessage.svelte';
 	import Placeholder from './Messages/Placeholder.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	export let chatId = '';
 	export let sendPrompt: Function;
 	export let regenerateResponse: Function;
 
+	export let processing = '';
 	export let bottomPadding = false;
 	export let autoScroll;
 	export let selectedModels;
@@ -218,7 +220,7 @@
 	{#key chatId}
 		{#each messages as message, messageIdx}
 			<div class=" w-full">
-				<div class="flex justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
+				<div class="flex flex-col justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
 					{#if message.role === 'user'}
 						<UserMessage
 							user={$user}
@@ -233,6 +235,52 @@
 							{showNextMessage}
 							{copyToClipboard}
 						/>
+
+						{#if processing !== ''}
+							<div class="flex my-2.5 ml-12 items-center w-fit space-x-2.5">
+								<div class=" dark:text-blue-100">
+									<svg
+										class=" w-4 h-4 translate-y-[0.5px]"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+										><style>
+											.spinner_qM83 {
+												animation: spinner_8HQG 1.05s infinite;
+											}
+											.spinner_oXPr {
+												animation-delay: 0.1s;
+											}
+											.spinner_ZTLf {
+												animation-delay: 0.2s;
+											}
+											@keyframes spinner_8HQG {
+												0%,
+												57.14% {
+													animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+													transform: translate(0);
+												}
+												28.57% {
+													animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+													transform: translateY(-6px);
+												}
+												100% {
+													transform: translate(0);
+												}
+											}
+										</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
+											class="spinner_qM83 spinner_oXPr"
+											cx="12"
+											cy="12"
+											r="2.5"
+										/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
+									>
+								</div>
+								<div class=" text-sm font-medium">
+									{processing}
+								</div>
+							</div>
+						{/if}
 					{:else}
 						<ResponseMessage
 							{message}
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 9b05c640..d433615c 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -22,6 +22,7 @@
 
 	let stopResponseFlag = false;
 	let autoScroll = true;
+	let processing = '';
 
 	let selectedModels = [''];
 
@@ -192,6 +193,7 @@
 
 		console.log(docs);
 		if (docs.length > 0) {
+			processing = 'Reading';
 			const query = history.messages[parentId].content;
 
 			let relevantContexts = await Promise.all(
@@ -215,6 +217,7 @@
 			history.messages[parentId].raContent = RAGTemplate(contextString, query);
 			history.messages[parentId].contexts = relevantContexts;
 			await tick();
+			processing = '';
 		}
 
 		await Promise.all(
@@ -660,6 +663,7 @@
 				chatId={$chatId}
 				{selectedModels}
 				{selectedModelfiles}
+				{processing}
 				bind:history
 				bind:messages
 				bind:autoScroll
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index c2677083..4305882f 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -21,8 +21,10 @@
 	import { RAGTemplate } from '$lib/utils/rag';
 
 	let loaded = false;
+
 	let stopResponseFlag = false;
 	let autoScroll = true;
+	let processing = '';
 
 	// let chatId = $page.params.id;
 	let selectedModels = [''];
@@ -210,6 +212,7 @@
 
 		console.log(docs);
 		if (docs.length > 0) {
+			processing = 'Reading';
 			const query = history.messages[parentId].content;
 
 			let relevantContexts = await Promise.all(
@@ -233,6 +236,7 @@
 			history.messages[parentId].raContent = RAGTemplate(contextString, query);
 			history.messages[parentId].contexts = relevantContexts;
 			await tick();
+			processing = '';
 		}
 
 		await Promise.all(
@@ -685,6 +689,7 @@
 					chatId={$chatId}
 					{selectedModels}
 					{selectedModelfiles}
+					{processing}
 					bind:history
 					bind:messages
 					bind:autoScroll