Bladeren bron

feat: chat input focus on new chat

Timothy J. Baek 1 jaar geleden
bovenliggende
commit
260a8b8b83

+ 3 - 0
src/lib/components/chat/MessageInput.svelte

@@ -293,6 +293,9 @@
 	};
 
 	onMount(() => {
+		const chatInput = document.getElementById('chat-textarea');
+		window.setTimeout(() => chatInput?.focus(), 0);
+
 		const dropZone = document.querySelector('body');
 
 		const onDragOver = (e) => {

+ 7 - 8
src/lib/components/layout/Sidebar.svelte

@@ -101,17 +101,16 @@
 			: 'invisible'}"
 	>
 		<div class="px-2 flex justify-center space-x-2">
-			<button
+			<a
 				id="sidebar-new-chat-button"
 				class="flex-grow flex justify-between rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
+				href="/"
 				on:click={async () => {
-					goto('/');
-
+					await goto('/');
 					const newChatButton = document.getElementById('new-chat-button');
-
-					if (newChatButton) {
-						newChatButton.click();
-					}
+					setTimeout(() => {
+						newChatButton?.click();
+					}, 0);
 				}}
 			>
 				<div class="flex self-center">
@@ -141,7 +140,7 @@
 						/>
 					</svg>
 				</div>
-			</button>
+			</a>
 		</div>
 
 		{#if $user?.role === 'admin'}

+ 3 - 0
src/routes/(app)/+page.svelte

@@ -134,6 +134,9 @@
 		settings.set({
 			..._settings
 		});
+
+		const chatInput = document.getElementById('chat-textarea');
+		setTimeout(() => chatInput?.focus(), 0);
 	};
 
 	const scrollToBottom = () => {

+ 3 - 0
src/routes/(app)/c/[id]/+page.svelte

@@ -99,6 +99,9 @@
 			if (await loadChat()) {
 				await tick();
 				loaded = true;
+
+				const chatInput = document.getElementById('chat-textarea');
+				chatInput?.focus();
 			} else {
 				await goto('/');
 			}