refac

src/lib/components/notes/NoteEditor/Chat.svelte

@@ -64,6 +64,19 @@
 			return;
 		}
 
+		let responseMessage;
+		if (messages.at(-1)?.role === 'assistant') {
+			responseMessage = messages.at(-1);
+		} else {
+			responseMessage = {
+				role: 'assistant',
+				content: '',
+				done: false
+			};
+			messages.push(responseMessage);
+			messages = messages;
+		}
+
 		const [res, controller] = await chatCompletion(
 			localStorage.token,
 			{
@@ -82,18 +95,6 @@
 			`${WEBUI_BASE_URL}/api`
 		);
 
-		let responseMessage;
-		if (messages.at(-1)?.role === 'assistant') {
-			responseMessage = messages.at(-1);
-		} else {
-			responseMessage = {
-				role: 'assistant',
-				content: ''
-			};
-			messages.push(responseMessage);
-			messages = messages;
-		}
-
 		await tick();
 		const textareaElement = document.getElementById(`assistant-${messages.length - 1}-textarea`);
 
@@ -128,12 +129,16 @@
 								if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
 									continue;
 								} else {
+									if (textareaElement) {
 										textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									}
 
 									responseMessage.content += data.choices[0].delta.content ?? '';
 									messages = messages;
 
+									if (textareaElement) {
 										textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									}
 
 									await tick();
 								}
@@ -163,9 +168,9 @@
 
 			loading = true;
 			await chatCompletionHandler();
-
+			messages = messages.map((message) => {
-			messages = messages.filter((message) => {
+				message.done = true;
-				return message.content !== '';
+				return message;
 			});
 
 			loading = false;

src/lib/components/notes/NoteEditor/Chat/Message.svelte

@@ -3,6 +3,8 @@
 
 	const i18n = getContext('i18n');
 
+	import Skeleton from '$lib/components/chat/Messages/Skeleton.svelte';
+
 	export let message;
 	export let idx;
 
@@ -11,8 +13,10 @@
 	let textAreaElement: HTMLTextAreaElement;
 
 	onMount(() => {
+		if (textAreaElement) {
 			textAreaElement.style.height = '';
 			textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+		}
 	});
 </script>
 
@@ -50,6 +54,12 @@
 	<div class="flex-1">
 		<!-- $i18n.t('a user') -->
 		<!-- $i18n.t('an assistant') -->
+
+		{#if !(message?.done ?? true) && message?.content === ''}
+			<div class="px-2">
+				<Skeleton size="sm" />
+			</div>
+		{:else}
 			<textarea
 				id="{message.role}-{idx}-textarea"
 				bind:this={textAreaElement}
@@ -70,5 +80,6 @@
 				}}
 				bind:value={message.content}
 			/>
+		{/if}
 	</div>
 </div>

src/lib/components/notes/NoteEditor/Chat/Messages.svelte

@@ -7,7 +7,7 @@
 	export let messages = [];
 </script>
 
-<div class="space-y-3">
+<div class="space-y-3 pb-20">
 	{#each messages as message, idx}
 		<Message
 			{message}