Chat input UI updates (#1641)

* remove extra margin

* chatinput

* add missing auto

* fix: lint

* feat: add fixed to parent container to prevent bouncy scroll on ios

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

src/lib/components/chat/ChatInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 
 	import HoverTooltip from "$lib/components/HoverTooltip.svelte";
 	import IconInternet from "$lib/components/icons/IconInternet.svelte";
@@ -31,7 +31,6 @@
 	export let placeholder = "";
 	export let loading = false;
 	export let disabled = false;
-
 	export let assistant: Assistant | undefined = undefined;
 
 	export let modelHasTools = false;
@@ -54,6 +53,21 @@
 
 	const dispatch = createEventDispatcher<{ submit: void }>();
 
+	onMount(() => {
+		if (!isVirtualKeyboard()) {
+			textareaElement.focus();
+		}
+		function onFormSubmit() {
+			adjustTextareaHeight();
+		}
+
+		const formEl = textareaElement.closest("form");
+		formEl?.addEventListener("submit", onFormSubmit);
+		return () => {
+			formEl?.removeEventListener("submit", onFormSubmit);
+		};
+	});
+
 	function isVirtualKeyboard(): boolean {
 		if (!browser) return false;
 
@@ -70,30 +84,24 @@
 	}
 
 	function adjustTextareaHeight() {
-		if (!textareaElement) return;
 		textareaElement.style.height = "auto";
-		const newHeight = Math.min(textareaElement.scrollHeight, parseInt("96em"));
-		textareaElement.style.height = `${newHeight}px`;
-		if (!textareaElement.parentElement) return;
-		textareaElement.parentElement.style.height = `${newHeight}px`;
+		textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+
+		if (textareaElement.selectionStart === textareaElement.value.length) {
+			textareaElement.scrollTop = textareaElement.scrollHeight;
+		}
 	}
 
-	async function handleKeydown(event: KeyboardEvent) {
-		if (event.key === "Enter" && !event.shiftKey && !isCompositionOn) {
+	function handleKeydown(event: KeyboardEvent) {
+		if (
+			event.key === "Enter" &&
+			!event.shiftKey &&
+			!isCompositionOn &&
+			!isVirtualKeyboard() &&
+			value.trim() !== ""
+		) {
 			event.preventDefault();
-			if (isVirtualKeyboard()) {
-				// Insert a newline at the cursor position
-				const start = textareaElement.selectionStart;
-				const end = textareaElement.selectionEnd;
-				value = value.substring(0, start) + "\n" + value.substring(end);
-				textareaElement.selectionStart = textareaElement.selectionEnd = start + 1;
-			} else {
-				if (value.trim() !== "") {
-					dispatch("submit");
-					await tick();
-					adjustTextareaHeight();
-				}
-			}
+			dispatch("submit");
 		}
 	}
 
@@ -110,13 +118,6 @@
 	$: documentParserIsOn =
 		modelHasTools && files.length > 0 && files.some((file) => file.type.startsWith("application/"));
 
-	onMount(() => {
-		if (!isVirtualKeyboard()) {
-			textareaElement.focus();
-		}
-		adjustTextareaHeight();
-	});
-
 	$: extraTools = $page.data.tools
 		.filter((t: ToolFront) => $settings.tools?.includes(t._id))
 		.filter(
@@ -125,29 +126,27 @@
 		) satisfies ToolFront[];
 </script>
 
-<div class="min-h-full flex-1" on:paste>
-	<div class="relative w-full min-w-0">
-		<textarea
-			enterkeyhint={!isVirtualKeyboard() ? "enter" : "send"}
-			tabindex="0"
-			rows="1"
-			class="scrollbar-custom max-h-[96em] w-full resize-none scroll-p-3 overflow-y-auto overflow-x-hidden border-0 bg-transparent px-3 py-2.5 outline-none focus:ring-0 focus-visible:ring-0 max-sm:p-2.5 max-sm:text-[16px]"
-			class:text-gray-400={disabled}
-			bind:value
-			bind:this={textareaElement}
-			{disabled}
-			on:keydown={handleKeydown}
-			on:compositionstart={() => (isCompositionOn = true)}
-			on:compositionend={() => (isCompositionOn = false)}
-			on:input={adjustTextareaHeight}
-			on:beforeinput
-			{placeholder}
-		/>
-	</div>
+<div class="flex min-h-full flex-1 flex-col" on:paste>
+	<textarea
+		rows="1"
+		tabindex="0"
+		inputmode="text"
+		class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none focus:ring-0 focus-visible:ring-0 max-sm:text-[16px] sm:px-3"
+		class:text-gray-400={disabled}
+		bind:value
+		bind:this={textareaElement}
+		on:keydown={handleKeydown}
+		on:compositionstart={() => (isCompositionOn = true)}
+		on:compositionend={() => (isCompositionOn = false)}
+		on:input={adjustTextareaHeight}
+		on:beforeinput
+		{placeholder}
+		{disabled}
+	/>
+
 	{#if !assistant}
 		<div
-			class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2 px-3 pb-2.5 pt-0.5 text-gray-500
-			dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2.5"
+			class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5 pt-1.5 text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2"
 		>
 			<HoverTooltip
 				label="Search the web"
@@ -299,7 +298,7 @@
 					TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 max-sm:hidden"
 				>
 					<a
-						class="base-tool flex !size-[20px] items-center justify-center rounded-full bg-white/10"
+						class="base-tool flex !size-[20px] items-center justify-center rounded-full border !border-gray-200 !bg-white !transition-none dark:!border-gray-500 dark:!bg-transparent"
 						href={`${base}/tools`}
 						title="Browse more tools"
 					>
@@ -321,10 +320,10 @@
 	}
 
 	.base-tool {
-		@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
+		@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap border border-transparent text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
 	}
 
 	.active-tool {
-		@apply rounded-full bg-purple-500/15 pl-1 pr-2 text-purple-600 hover:text-purple-600  dark:bg-purple-600/40 dark:text-purple-300;
+		@apply rounded-full !border-purple-200 bg-purple-100 pl-1 pr-2 text-purple-600 hover:text-purple-600  dark:!border-purple-700 dark:bg-purple-600/40 dark:text-purple-200;
 	}
 </style>

src/lib/components/chat/ChatWindow.svelte

@@ -2,7 +2,6 @@
 	import type { Message, MessageFile } from "$lib/types/Message";
 	import { createEventDispatcher, onDestroy, tick } from "svelte";
 
-	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
 	import CarbonExport from "~icons/carbon/export";
 	import CarbonCheckmark from "~icons/carbon/checkmark";
 	import CarbonCaretDown from "~icons/carbon/caret-down";
@@ -376,7 +375,7 @@
 		{/if}
 
 		<div class="w-full">
-			<div class="flex w-full pb-3">
+			<div class="flex w-full *:mb-3">
 				{#if loading}
 					<StopGeneratingBtn classNames="ml-auto" on:click={() => dispatch("stop")} />
 				{:else if lastIsError}
@@ -390,19 +389,17 @@
 							}
 						}}
 					/>
-				{:else}
+				{:else if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
 					<div class="ml-auto gap-2">
-						{#if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
-							<ContinueBtn
-								on:click={() => {
-									if (lastMessage && lastMessage.ancestors) {
-										dispatch("continue", {
-											id: lastMessage?.id,
-										});
-									}
-								}}
-							/>
-						{/if}
+						<ContinueBtn
+							on:click={() => {
+								if (lastMessage && lastMessage.ancestors) {
+									dispatch("continue", {
+										id: lastMessage?.id,
+									});
+								}
+							}}
+						/>
 					</div>
 				{/if}
 			</div>
@@ -410,7 +407,7 @@
 				tabindex="-1"
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
 				on:submit|preventDefault={handleSubmit}
-				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
+				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 dark:border-gray-600 dark:bg-gray-700
             {isReadOnly ? 'opacity-30' : ''}"
 			>
 				{#if onDrag && isFileUploadEnabled}
@@ -453,13 +450,26 @@
 							</button>
 						{:else}
 							<button
-								class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"
+								class="btn absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none enabled:hover:bg-white enabled:hover:shadow-inner disabled:opacity-60 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:hover:enabled:bg-black"
 								disabled={!message || isReadOnly}
 								type="submit"
 								aria-label="Send message"
 								name="submit"
 							>
-								<CarbonSendAltFilled />
+								<svg
+									width="1em"
+									height="1em"
+									viewBox="0 0 32 32"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										fill-rule="evenodd"
+										clip-rule="evenodd"
+										d="M17.0606 4.23197C16.4748 3.64618 15.525 3.64618 14.9393 4.23197L5.68412 13.4871C5.09833 14.0729 5.09833 15.0226 5.68412 15.6084C6.2699 16.1942 7.21965 16.1942 7.80544 15.6084L14.4999 8.91395V26.7074C14.4999 27.5359 15.1715 28.2074 15.9999 28.2074C16.8283 28.2074 17.4999 27.5359 17.4999 26.7074V8.91395L24.1944 15.6084C24.7802 16.1942 25.7299 16.1942 26.3157 15.6084C26.9015 15.0226 26.9015 14.0729 26.3157 13.4871L17.0606 4.23197Z"
+										fill="currentColor"
+									/>
+								</svg>
 							</button>
 						{/if}
 					</div>

src/routes/+layout.svelte

@@ -234,7 +234,7 @@
 />
 
 <div
-	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
+	class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
 		? 'md:grid-cols-[290px,1fr]'
 		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
 >