Skip to content

Commit c1bac2c

Browse files
natecardnsarrazin
andauthored
Added enter to insert new line on mobile instead of default. (#1475)
* Added enter to insert new line on mobile instead of default. * fix: lint * Removed unnecessary if statement * feat: use virtual keyboard detection instead of viewport width --------- Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>
1 parent 88e062f commit c1bac2c

File tree

1 file changed

+26
-10
lines changed

1 file changed

+26
-10
lines changed

src/lib/components/chat/ChatInput.svelte

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { isDesktop } from "$lib/utils/isDesktop";
2+
import { browser } from "$app/environment";
33
import { createEventDispatcher, onMount } from "svelte";
44
55
export let value = "";
@@ -13,25 +13,41 @@
1313
1414
const dispatch = createEventDispatcher<{ submit: void }>();
1515
16+
function isVirtualKeyboard(): boolean {
17+
if (!browser) return false;
18+
19+
// Check for touch capability
20+
if (navigator.maxTouchPoints > 0) return true;
21+
22+
// Check for touch events
23+
if ("ontouchstart" in window) return true;
24+
25+
// Fallback to user agent string check
26+
const userAgent = navigator.userAgent.toLowerCase();
27+
28+
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
29+
}
30+
1631
$: minHeight = `${1 + minRows * 1.5}em`;
1732
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
1833
1934
function handleKeydown(event: KeyboardEvent) {
20-
// submit on enter
2135
if (event.key === "Enter" && !event.shiftKey && !isCompositionOn) {
2236
event.preventDefault();
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();
37+
if (isVirtualKeyboard()) {
38+
// Insert a newline at the cursor position
39+
const start = textareaElement.selectionStart;
40+
const end = textareaElement.selectionEnd;
41+
value = value.substring(0, start) + "\n" + value.substring(end);
42+
textareaElement.selectionStart = textareaElement.selectionEnd = start + 1;
43+
} else {
44+
dispatch("submit");
2845
}
29-
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
3046
}
3147
}
3248
3349
onMount(() => {
34-
if (isDesktop(window)) {
50+
if (!isVirtualKeyboard()) {
3551
textareaElement.focus();
3652
}
3753
});
@@ -44,7 +60,7 @@
4460
style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
4561

4662
<textarea
47-
enterkeyhint="send"
63+
enterkeyhint={!isVirtualKeyboard() ? "enter" : "send"}
4864
tabindex="0"
4965
rows="1"
5066
class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"

0 commit comments

Comments
 (0)