add support for textArea autoheight + line break + tweak styling of input

src/lib/components/TextArea.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let value = '';
+	export let minRows = 1;
+	export let maxRows: null | number = null;
+	export let placeholder = '';
+	export let autofocus = false;
+
+	$: minHeight = `${1 + minRows * 1.5}em`;
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
+
+	function handleKeydown(event: KeyboardEvent) {
+		// submit on enter
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			// @ts-ignore - requestSubmit is not in the DOM typings
+			event.target?.form?.requestSubmit();
+		}
+	}
+</script>
+
+<div class="relative w-full">
+	<pre
+		class="invisible py-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{value + '\n'}</pre>
+
+	<textarea
+		tabindex="0"
+		rows="1"
+		class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar"
+		bind:value
+		on:keydown={handleKeydown}
+		{placeholder}
+		{autofocus}
+	/>
+</div>
+
+<style>
+	pre,
+	textarea {
+		font-family: inherit;
+		box-sizing: border-box;
+		line-height: 1.5;
+	}
+</style>

src/routes/+page.svelte

@@ -135,35 +135,41 @@
 			</div>
 		</div>
 		<div
-			class="flex items-center bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 h-32 w-full"
+			class="flex items-center bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-8 w-full"
 		>
 			<form
 				on:submit={onWrite}
 				class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
 			>
-				<svg
-					class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
-					xmlns="http://www.w3.org/2000/svg"
-					xmlns:xlink="http://www.w3.org/1999/xlink"
-					aria-hidden="true"
-					focusable="false"
-					role="img"
-					width="1em"
-					height="1em"
-					preserveAspectRatio="xMidYMid meet"
-					viewBox="0 0 32 32"
-					><path
-						d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
-						fill="currentColor"
-					/></svg
-				>
-				<input
-					class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
-					bind:value={message}
-					on:submit={onWrite}
-					placeholder="Ask anything"
-					autofocus
-				/>
+				<div class="flex flex-1 border-none bg-transparent">
+					<TextArea
+						placeholder="Ask anything"
+						bind:value={message}
+						on:submit={onWrite}
+						autofocus
+						maxRows={10}
+					/>
+					<button
+						class="p-1 px-[0.7rem] self-end my-1 h-[2.4rem] rounded-lg text-gray-500 hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-40 mr-1"
+					>
+						<svg
+							class="text-gray-300 pointer-events-none"
+							xmlns="http://www.w3.org/2000/svg"
+							xmlns:xlink="http://www.w3.org/1999/xlink"
+							aria-hidden="true"
+							focusable="false"
+							role="img"
+							width="1em"
+							height="1em"
+							preserveAspectRatio="xMidYMid meet"
+							viewBox="0 0 32 32"
+							><path
+								d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
+								fill="currentColor"
+							/></svg
+						></button
+					>
+				</div>
 			</form>
 		</div>
 	</div>