Spaces:
Running
Running
Mishig
commited on
Commit
•
09eb258
1
Parent(s):
7f7375d
[Assisntans filter] More UX fixes (#908)
Browse files* [Assisntans filter] More UX fixes
* rm unused
src/lib/components/chat/ChatInput.svelte
CHANGED
@@ -1,4 +1,5 @@
|
|
1 |
<script lang="ts">
|
|
|
2 |
import { createEventDispatcher, onMount } from "svelte";
|
3 |
|
4 |
export let value = "";
|
@@ -6,10 +7,7 @@
|
|
6 |
export let maxRows: null | number = null;
|
7 |
export let placeholder = "";
|
8 |
export let disabled = false;
|
9 |
-
// Approximate width from which we disable autofocus
|
10 |
-
const TABLET_VIEWPORT_WIDTH = 768;
|
11 |
|
12 |
-
let innerWidth = 0;
|
13 |
let textareaElement: HTMLTextAreaElement;
|
14 |
let isCompositionOn = false;
|
15 |
|
@@ -25,7 +23,7 @@
|
|
25 |
// blur to close keyboard on mobile
|
26 |
textareaElement.blur();
|
27 |
// refocus so that user on desktop can start typing without needing to reclick on textarea
|
28 |
-
if (
|
29 |
textareaElement.focus();
|
30 |
}
|
31 |
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
|
@@ -33,14 +31,12 @@
|
|
33 |
}
|
34 |
|
35 |
onMount(() => {
|
36 |
-
if (
|
37 |
textareaElement.focus();
|
38 |
}
|
39 |
});
|
40 |
</script>
|
41 |
|
42 |
-
<svelte:window bind:innerWidth />
|
43 |
-
|
44 |
<div class="relative min-w-0 flex-1">
|
45 |
<pre
|
46 |
class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
|
|
|
1 |
<script lang="ts">
|
2 |
+
import { isDesktop } from "$lib/utils/isDesktop";
|
3 |
import { createEventDispatcher, onMount } from "svelte";
|
4 |
|
5 |
export let value = "";
|
|
|
7 |
export let maxRows: null | number = null;
|
8 |
export let placeholder = "";
|
9 |
export let disabled = false;
|
|
|
|
|
10 |
|
|
|
11 |
let textareaElement: HTMLTextAreaElement;
|
12 |
let isCompositionOn = false;
|
13 |
|
|
|
23 |
// blur to close keyboard on mobile
|
24 |
textareaElement.blur();
|
25 |
// refocus so that user on desktop can start typing without needing to reclick on textarea
|
26 |
+
if (isDesktop(window)) {
|
27 |
textareaElement.focus();
|
28 |
}
|
29 |
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
|
|
|
31 |
}
|
32 |
|
33 |
onMount(() => {
|
34 |
+
if (isDesktop(window)) {
|
35 |
textareaElement.focus();
|
36 |
}
|
37 |
});
|
38 |
</script>
|
39 |
|
|
|
|
|
40 |
<div class="relative min-w-0 flex-1">
|
41 |
<pre
|
42 |
class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
|
src/lib/utils/isDesktop.ts
ADDED
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// Approximate width from which we disable autofocus
|
2 |
+
const TABLET_VIEWPORT_WIDTH = 768;
|
3 |
+
|
4 |
+
export function isDesktop(window: Window) {
|
5 |
+
const { innerWidth } = window;
|
6 |
+
return innerWidth > TABLET_VIEWPORT_WIDTH;
|
7 |
+
}
|
src/routes/assistants/+page.svelte
CHANGED
@@ -20,6 +20,7 @@
|
|
20 |
import { getHref } from "$lib/utils/getHref";
|
21 |
import { debounce } from "$lib/utils/debounce";
|
22 |
import { useSettingsStore } from "$lib/stores/settings";
|
|
|
23 |
|
24 |
export let data: PageData;
|
25 |
|
@@ -36,9 +37,15 @@
|
|
36 |
newKeys: { modelId: (e.target as HTMLSelectElement).value },
|
37 |
existingKeys: { behaviour: "delete_except", keys: ["user"] },
|
38 |
});
|
|
|
39 |
goto(newUrl);
|
40 |
};
|
41 |
|
|
|
|
|
|
|
|
|
|
|
42 |
const filterOnName = debounce(async (value: string) => {
|
43 |
filterValue = value;
|
44 |
|
@@ -52,7 +59,9 @@
|
|
52 |
existingKeys: { behaviour: "delete", keys: ["p"] },
|
53 |
});
|
54 |
await goto(newUrl);
|
55 |
-
|
|
|
|
|
56 |
isFilterInPorgress = false;
|
57 |
|
58 |
// there was a new filter query before server returned response
|
@@ -130,6 +139,7 @@
|
|
130 |
href={getHref($page.url, {
|
131 |
existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
|
132 |
})}
|
|
|
133 |
class="group"
|
134 |
><CarbonClose
|
135 |
class="text-xs group-hover:text-gray-800 dark:group-hover:text-gray-300"
|
@@ -150,6 +160,7 @@
|
|
150 |
href={getHref($page.url, {
|
151 |
existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
|
152 |
})}
|
|
|
153 |
class="flex items-center gap-1.5 rounded-full border px-3 py-1 {!assistantsCreator
|
154 |
? 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
|
155 |
: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
|
@@ -163,6 +174,7 @@
|
|
163 |
newKeys: { user: data.user.username },
|
164 |
existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q"] },
|
165 |
})}
|
|
|
166 |
class="flex items-center gap-1.5 truncate rounded-full border px-3 py-1 {assistantsCreator &&
|
167 |
createdByMe
|
168 |
? 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
|
|
|
20 |
import { getHref } from "$lib/utils/getHref";
|
21 |
import { debounce } from "$lib/utils/debounce";
|
22 |
import { useSettingsStore } from "$lib/stores/settings";
|
23 |
+
import { isDesktop } from "$lib/utils/isDesktop";
|
24 |
|
25 |
export let data: PageData;
|
26 |
|
|
|
37 |
newKeys: { modelId: (e.target as HTMLSelectElement).value },
|
38 |
existingKeys: { behaviour: "delete_except", keys: ["user"] },
|
39 |
});
|
40 |
+
resetFilter();
|
41 |
goto(newUrl);
|
42 |
};
|
43 |
|
44 |
+
const resetFilter = () => {
|
45 |
+
filterValue = "";
|
46 |
+
isFilterInPorgress = false;
|
47 |
+
};
|
48 |
+
|
49 |
const filterOnName = debounce(async (value: string) => {
|
50 |
filterValue = value;
|
51 |
|
|
|
59 |
existingKeys: { behaviour: "delete", keys: ["p"] },
|
60 |
});
|
61 |
await goto(newUrl);
|
62 |
+
if (isDesktop(window)) {
|
63 |
+
setTimeout(() => filterInputEl.focus(), 0);
|
64 |
+
}
|
65 |
isFilterInPorgress = false;
|
66 |
|
67 |
// there was a new filter query before server returned response
|
|
|
139 |
href={getHref($page.url, {
|
140 |
existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
|
141 |
})}
|
142 |
+
on:click={resetFilter}
|
143 |
class="group"
|
144 |
><CarbonClose
|
145 |
class="text-xs group-hover:text-gray-800 dark:group-hover:text-gray-300"
|
|
|
160 |
href={getHref($page.url, {
|
161 |
existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
|
162 |
})}
|
163 |
+
on:click={resetFilter}
|
164 |
class="flex items-center gap-1.5 rounded-full border px-3 py-1 {!assistantsCreator
|
165 |
? 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
|
166 |
: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
|
|
|
174 |
newKeys: { user: data.user.username },
|
175 |
existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q"] },
|
176 |
})}
|
177 |
+
on:click={resetFilter}
|
178 |
class="flex items-center gap-1.5 truncate rounded-full border px-3 py-1 {assistantsCreator &&
|
179 |
createdByMe
|
180 |
? 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
|