refac: rich text input styling

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 {

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));

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}

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();

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 words = findWordIndices(prompt);
-
-			if (words.length > 0) {
-				const word = words.at(0);
-				chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
-			}
+		const chatInputContainerElement = document.getElementById('chat-input-container');
+		if (chatInputContainerElement) {
+			chatInputContainerElement.style.height = '';
+			chatInputContainerElement.style.height =
+				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+
+			const chatInputElement = document.getElementById('chat-input');
+			chatInputElement?.focus();
 		}
 
 		await tick();

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>