Prevent premature submission on IME input (#16673)

* fix: Prevent premature submission on IME input

* chore: update webui static build

* refactor: Put IME completion checker in a helper function and add checking for `KeyboardEvent.eventKey === 229`

* chore: update webui static build

* chore: update webui static build

* chore: update webui static build

diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 33202076a0f3c69b2e7471f0145b4c059d6aa9d2..816fdb786a7afc127daf1ef9a092927791baadb5 100644 (file)
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index 6a7c0dd366e40f681a5d0350acf1f782e82da889..67a7fff54cb6bdfde0b90b20148e0fdf4234d504 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -26,6 +26,7 @@
                MimeTypeImage,
                MimeTypeText
        } from '$lib/enums/files';
+       import { isIMEComposing } from '$lib/utils/is-ime-composing';
 
        interface Props {
                class?: string;
@@ -97,7 +98,7 @@
        }
 
        async function handleKeydown(event: KeyboardEvent) {
-               if (event.key === 'Enter' && !event.shiftKey) {
+               if (event.key === 'Enter' && !event.shiftKey && !isIMEComposing(event)) {
                        event.preventDefault();
 
                        if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
index fed0cf712695ffeb336965753b2747a6e4fa1cee..7ade6bc61f3336451a7f5080412d3bbc6707ec47 100644 (file)
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
        import { getDeletionInfo } from '$lib/stores/chat.svelte';
        import { copyToClipboard } from '$lib/utils/copy';
+       import { isIMEComposing } from '$lib/utils/is-ime-composing';
        import ChatMessageAssistant from './ChatMessageAssistant.svelte';
        import ChatMessageUser from './ChatMessageUser.svelte';
 
@@ -93,7 +94,9 @@
        }
 
        function handleEditKeydown(event: KeyboardEvent) {
-               if (event.key === 'Enter' && !event.shiftKey) {
+               // Check for IME composition using isComposing property and keyCode 229 (specifically for IME composition on Safari)
+               // This prevents saving edit when confirming IME word selection (e.g., Japanese/Chinese input)
+               if (event.key === 'Enter' && !event.shiftKey && !isIMEComposing(event)) {
                        event.preventDefault();
                        handleSaveEdit();
                } else if (event.key === 'Escape') {

diff --git a/tools/server/webui/src/lib/utils/is-ime-composing.ts b/tools/server/webui/src/lib/utils/is-ime-composing.ts
new file mode 100644 (file)
index 0000000..9182ea4
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/is-ime-composing.ts
@@ -0,0 +1,5 @@
+export function isIMEComposing(event: KeyboardEvent) {
+       // Check for IME composition using isComposing property and keyCode 229 (specifically for IME composition on Safari, which is notorious for not supporting KeyboardEvent.isComposing)
+       // This prevents form submission when confirming IME word selection (e.g., Japanese/Chinese input)
+       return event.isComposing || event.keyCode === 229;
+}