feat(front): hide bottom disclaimer when focused on mobile

src/lib/components/chat/ChatInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
 	import { createEventDispatcher, onMount } from "svelte";
 
 	import HoverTooltip from "$lib/components/HoverTooltip.svelte";
@@ -24,7 +23,7 @@
 	import { captureScreen } from "$lib/utils/screenshot";
 	import IconScreenshot from "../icons/IconScreenshot.svelte";
 	import { loginModalOpen } from "$lib/stores/loginModal";
-
+	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
 	interface Props {
 		files?: File[];
 		mimeTypes?: string[];
@@ -37,6 +36,7 @@
 		modelIsMultimodal?: boolean;
 		children?: import("svelte").Snippet;
 		onPaste?: (e: ClipboardEvent) => void;
+		focused?: boolean;
 	}
 
 	let {
@@ -51,6 +51,7 @@
 		modelIsMultimodal = false,
 		children,
 		onPaste,
+		focused = $bindable(false),
 	}: Props = $props();
 
 	const onFileChange = async (e: Event) => {
@@ -85,21 +86,6 @@
 		};
 	});
 
-	function isVirtualKeyboard(): boolean {
-		if (!browser) return false;
-
-		// Check for touch capability
-		if (navigator.maxTouchPoints > 0 && screen.width <= 768) return true;
-
-		// Check for touch events
-		if ("ontouchstart" in window) return true;
-
-		// Fallback to user agent string check
-		const userAgent = navigator.userAgent.toLowerCase();
-
-		return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
-	}
-
 	function adjustTextareaHeight() {
 		if (!textareaElement) {
 			return;
@@ -180,6 +166,8 @@
 		}}
 		{placeholder}
 		{disabled}
+		onfocus={() => (focused = true)}
+		onblur={() => (focused = false)}
 	></textarea>
 
 	{#if !showNoTools}

src/lib/components/chat/ChatWindow.svelte

@@ -38,6 +38,7 @@
 	import type { ToolFront } from "$lib/types/Tool";
 	import { loginModalOpen } from "$lib/stores/loginModal";
 	import { beforeNavigate } from "$app/navigation";
+	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
 
 	interface Props {
 		messages?: Message[];
@@ -230,6 +231,7 @@
 		)
 	);
 	let isFileUploadEnabled = $derived(activeMimeTypes.length > 0);
+	let focused = $state(false);
 </script>
 
 <svelte:window
@@ -411,8 +413,11 @@
 					e.preventDefault();
 					handleSubmit();
 				}}
-				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' : ''}"
+				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": true,
+					"opacity-30": isReadOnly,
+					"max-sm:mb-4": focused && isVirtualKeyboard(),
+				}}
 			>
 				{#if onDrag && isFileUploadEnabled}
 					<FileDropzone bind:files bind:onDrag mimeTypes={activeMimeTypes} />
@@ -436,6 +441,7 @@
 								disabled={isReadOnly || lastIsError}
 								modelHasTools={currentModel.tools}
 								modelIsMultimodal={currentModel.multimodal}
+								bind:focused
 							/>
 						{/if}
 
@@ -474,7 +480,10 @@
 				{/if}
 			</form>
 			<div
-				class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2"
+				class={{
+					"mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2": true,
+					"max-sm:hidden": focused && isVirtualKeyboard(),
+				}}
 			>
 				<p>
 					Model:

src/lib/utils/isVirtualKeyboard.ts

@@ -0,0 +1,16 @@
+import { browser } from "$app/environment";
+
+export function isVirtualKeyboard(): boolean {
+	if (!browser) return false;
+
+	// Check for touch capability
+	if (navigator.maxTouchPoints > 0 && screen.width <= 768) return true;
+
+	// Check for touch events
+	if ("ontouchstart" in window) return true;
+
+	// Fallback to user agent string check
+	const userAgent = navigator.userAgent.toLowerCase();
+
+	return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+}