Migrate Textarea Component

apps/frontend/src/lib/components/ChatInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Textarea } from 'flowbite-svelte';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
 	import SubmitButton from './SubmitButton.svelte';
 	import * as m from '$lib/paraglide/messages.js';
 
@@ -31,25 +31,25 @@
 		<form
 			id="input_form"
 			onsubmit={onSubmit}
-			class="rounded-xl border border-gray-200 bg-white py-2 pr-3 pl-4 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-800/20"
+			class="rounded-xl border border-gray-200 bg-white px-4 py-2 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-800/20"
 		>
-			<div class="flex gap-0">
+			<div class="flex items-end gap-3">
 				<div class="min-w-0 flex-1">
 					<Textarea
 						id="user-input"
 						disabled={isStreaming}
 						{placeholder}
-						rows={2}
+						rows={1}
 						name="message"
 						bind:value
-						clearable
-						class="flex w-full resize-none items-center border-none bg-transparent text-base leading-6 text-gray-900 placeholder-gray-500 focus:ring-0 focus:outline-none dark:bg-transparent dark:text-white dark:placeholder-gray-400"
+						class="flex max-h-[calc(8*1.5rem+1rem)] w-full resize-none items-center overflow-y-auto border-none bg-transparent px-0 py-2 text-base leading-6 text-gray-900 placeholder-gray-500 focus:ring-0 focus:outline-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent dark:text-white dark:placeholder-gray-400"
+						style="max-height: calc(8 * 1.5rem + 1rem); min-height: calc(2 * 1.5rem);"
 						onkeydown={handleKeyPress}
 					></Textarea>
 				</div>
 
 				<!-- Submit button -->
-				<div class="flex shrink-0 items-start pt-1 pr-3">
+				<div class="flex shrink-0 items-end pb-2">
 					<SubmitButton {isStreaming} disabled={isStreaming || isEmpty} />
 				</div>
 			</div>

apps/frontend/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};

apps/frontend/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>