From e252ca1dc4579ab7ca327c9616d9232a6917b1fd Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 19 Oct 2024 03:15:40 -0700
Subject: [PATCH] refac: rich text input styling

---
 src/app.css                                    |  2 +-
 src/lib/components/chat/Chat.svelte            |  8 ++++----
 src/lib/components/chat/MessageInput.svelte    |  2 +-
 src/lib/components/chat/Messages.svelte        | 18 ++++++------------
 src/lib/components/chat/Placeholder.svelte     | 18 +++++++-----------
 src/lib/components/common/RichTextInput.svelte |  4 ++--
 6 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/app.css b/src/app.css
index eb3e18710..c20656fb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -189,7 +189,7 @@ input[type='number'] {
 }
 
 .ProseMirror {
-	@apply h-full -translate-y-[1px];
+	@apply h-full  min-h-fit max-h-full;
 }
 
 .ProseMirror:focus {
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 1732c3387..777632204 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -823,11 +823,11 @@
 			);
 		} else {
 			// Reset chat input textarea
-			const chatTextAreaElement = document.getElementById('chat-input');
+			const chatInputContainer = document.getElementById('chat-input-container');
 
-			if (chatTextAreaElement) {
-				chatTextAreaElement.value = '';
-				chatTextAreaElement.style.height = '';
+			if (chatInputContainer) {
+				chatInputContainer.value = '';
+				chatInputContainer.style.height = '';
 			}
 
 			const _files = JSON.parse(JSON.stringify(files));
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 478b2653b..419629476 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -512,7 +512,7 @@
 								<div
 									bind:this={chatInputContainerElement}
 									id="chat-input-container"
-									class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-1 rounded-xl resize-none h-[48px] overflow-auto"
+									class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
 								>
 									<RichTextInput
 										bind:this={chatInputElement}
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 7495a3ad7..7a95575e9 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -330,20 +330,14 @@
 
 				await tick();
 
-				const chatInputElement = document.getElementById('chat-input');
-				if (chatInputElement) {
+				const chatInputContainerElement = document.getElementById('chat-input-container');
+				if (chatInputContainerElement) {
 					prompt = p;
 
-					chatInputElement.style.height = '';
-					chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px';
-					chatInputElement.focus();
-
-					const words = findWordIndices(prompt);
-
-					if (words.length > 0) {
-						const word = words.at(0);
-						chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
-					}
+					chatInputContainerElement.style.height = '';
+					chatInputContainerElement.style.height =
+						Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+					chatInputContainerElement.focus();
 				}
 
 				await tick();
diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index ada351cdf..42bd28ca6 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -57,18 +57,14 @@
 		console.log(prompt);
 		await tick();
 
-		const chatInputElement = document.getElementById('chat-input');
-		if (chatInputElement) {
-			chatInputElement.style.height = '';
-			chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px';
-			chatInputElement.focus();
+		const chatInputContainerElement = document.getElementById('chat-input-container');
+		if (chatInputContainerElement) {
+			chatInputContainerElement.style.height = '';
+			chatInputContainerElement.style.height =
+				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
 
-			const words = findWordIndices(prompt);
-
-			if (words.length > 0) {
-				const word = words.at(0);
-				chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
-			}
+			const chatInputElement = document.getElementById('chat-input');
+			chatInputElement?.focus();
 		}
 
 		await tick();
diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 885e14e72..59d6be99f 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -226,7 +226,7 @@
 			}
 			return true;
 		}
-		return true;
+		return false;
 	}
 
 	onMount(() => {
@@ -412,4 +412,4 @@
 	});
 </script>
 
-<div bind:this={element} class="relative w-full h-full {className}"></div>
+<div bind:this={element} class="relative w-full h-full min-h-fit {className}"></div>