[Assisntans filter] More UX fixes (#908)

* [Assisntans filter] More UX fixes

* rm unused

src/lib/components/chat/ChatInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { isDesktop } from "$lib/utils/isDesktop";
 	import { createEventDispatcher, onMount } from "svelte";
 
 	export let value = "";
@@ -6,10 +7,7 @@
 	export let maxRows: null | number = null;
 	export let placeholder = "";
 	export let disabled = false;
-	// Approximate width from which we disable autofocus
-	const TABLET_VIEWPORT_WIDTH = 768;
 
-	let innerWidth = 0;
 	let textareaElement: HTMLTextAreaElement;
 	let isCompositionOn = false;
 
@@ -25,7 +23,7 @@
 			// blur to close keyboard on mobile
 			textareaElement.blur();
 			// refocus so that user on desktop can start typing without needing to reclick on textarea
-			if (innerWidth > TABLET_VIEWPORT_WIDTH) {
+			if (isDesktop(window)) {
 				textareaElement.focus();
 			}
 			dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
@@ -33,14 +31,12 @@
 	}
 
 	onMount(() => {
-		if (innerWidth > TABLET_VIEWPORT_WIDTH) {
+		if (isDesktop(window)) {
 			textareaElement.focus();
 		}
 	});
 </script>
 
-<svelte:window bind:innerWidth />
-
 <div class="relative min-w-0 flex-1">
 	<pre
 		class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"

src/lib/utils/isDesktop.ts

@@ -0,0 +1,7 @@
+// Approximate width from which we disable autofocus
+const TABLET_VIEWPORT_WIDTH = 768;
+
+export function isDesktop(window: Window) {
+	const { innerWidth } = window;
+	return innerWidth > TABLET_VIEWPORT_WIDTH;
+}

src/routes/assistants/+page.svelte

@@ -20,6 +20,7 @@
 	import { getHref } from "$lib/utils/getHref";
 	import { debounce } from "$lib/utils/debounce";
 	import { useSettingsStore } from "$lib/stores/settings";
+	import { isDesktop } from "$lib/utils/isDesktop";
 
 	export let data: PageData;
 
@@ -36,9 +37,15 @@
 			newKeys: { modelId: (e.target as HTMLSelectElement).value },
 			existingKeys: { behaviour: "delete_except", keys: ["user"] },
 		});
+		resetFilter();
 		goto(newUrl);
 	};
 
+	const resetFilter = () => {
+		filterValue = "";
+		isFilterInPorgress = false;
+	};
+
 	const filterOnName = debounce(async (value: string) => {
 		filterValue = value;
 
@@ -52,7 +59,9 @@
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
 		await goto(newUrl);
-		setTimeout(() => filterInputEl.focus(), 0);
+		if (isDesktop(window)) {
+			setTimeout(() => filterInputEl.focus(), 0);
+		}
 		isFilterInPorgress = false;
 
 		// there was a new filter query before server returned response
@@ -130,6 +139,7 @@
 						href={getHref($page.url, {
 							existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
 						})}
+						on:click={resetFilter}
 						class="group"
 						><CarbonClose
 							class="text-xs group-hover:text-gray-800 dark:group-hover:text-gray-300"
@@ -150,6 +160,7 @@
 					href={getHref($page.url, {
 						existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
 					})}
+					on:click={resetFilter}
 					class="flex items-center gap-1.5 rounded-full border px-3 py-1 {!assistantsCreator
 						? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'
 						: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
@@ -163,6 +174,7 @@
 							newKeys: { user: data.user.username },
 							existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q"] },
 						})}
+						on:click={resetFilter}
 						class="flex items-center gap-1.5 truncate rounded-full border px-3 py-1 {assistantsCreator &&
 						createdByMe
 							? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'