diff --git a/src/lib/components/notes/NoteEditor/Chat.svelte b/src/lib/components/notes/NoteEditor/Chat.svelte
index 6ec00aa08c..25d42817a0 100644
--- a/src/lib/components/notes/NoteEditor/Chat.svelte
+++ b/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 {
-									textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									if (textareaElement) {
+										textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									}
 
 									responseMessage.content += data.choices[0].delta.content ?? '';
 									messages = messages;
 
-									textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									if (textareaElement) {
+										textareaElement.style.height = textareaElement.scrollHeight + 'px';
+									}
 
 									await tick();
 								}
@@ -163,9 +168,9 @@
 
 			loading = true;
 			await chatCompletionHandler();
-
-			messages = messages.filter((message) => {
-				return message.content !== '';
+			messages = messages.map((message) => {
+				message.done = true;
+				return message;
 			});
 
 			loading = false;
diff --git a/src/lib/components/notes/NoteEditor/Chat/Message.svelte b/src/lib/components/notes/NoteEditor/Chat/Message.svelte
index b7ca0cf20a..1b0c50531c 100644
--- a/src/lib/components/notes/NoteEditor/Chat/Message.svelte
+++ b/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(() => {
-		textAreaElement.style.height = '';
-		textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+		if (textAreaElement) {
+			textAreaElement.style.height = '';
+			textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+		}
 	});
 </script>
 
@@ -50,25 +54,32 @@
 	<div class="flex-1">
 		<!-- $i18n.t('a user') -->
 		<!-- $i18n.t('an assistant') -->
-		<textarea
-			id="{message.role}-{idx}-textarea"
-			bind:this={textAreaElement}
-			class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
-			placeholder={$i18n.t(`Enter {{role}} message here`, {
-				role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
-			})}
-			rows="1"
-			on:input={(e) => {
-				textAreaElement.style.height = '';
-				textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
-			}}
-			on:focus={(e) => {
-				textAreaElement.style.height = '';
-				textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
 
-				// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
-			}}
-			bind:value={message.content}
-		/>
+		{#if !(message?.done ?? true) && message?.content === ''}
+			<div class="px-2">
+				<Skeleton size="sm" />
+			</div>
+		{:else}
+			<textarea
+				id="{message.role}-{idx}-textarea"
+				bind:this={textAreaElement}
+				class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
+				placeholder={$i18n.t(`Enter {{role}} message here`, {
+					role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
+				})}
+				rows="1"
+				on:input={(e) => {
+					textAreaElement.style.height = '';
+					textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+				}}
+				on:focus={(e) => {
+					textAreaElement.style.height = '';
+					textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+
+					// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+				}}
+				bind:value={message.content}
+			/>
+		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/notes/NoteEditor/Chat/Messages.svelte b/src/lib/components/notes/NoteEditor/Chat/Messages.svelte
index bccf3b55f7..f6bbcb149e 100644
--- a/src/lib/components/notes/NoteEditor/Chat/Messages.svelte
+++ b/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}