From edc85febf85397500ae75e855970fe372f8441a3 Mon Sep 17 00:00:00 2001
From: Yuta Hinokuma <higumachan@users.noreply.github.com>
Date: Sat, 8 Feb 2025 21:04:17 +0900
Subject: [PATCH] :bug: Fixed a problem with IME's(i.e. Japanese IME input)
 Enter to Confirm sending a message.

---
 ui/desktop/src/components/Input.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
index 24d00f7a85..f90b778ef3 100644
--- a/ui/desktop/src/components/Input.tsx
+++ b/ui/desktop/src/components/Input.tsx
@@ -17,6 +17,8 @@ export default function Input({
   onStop,
 }: InputProps) {
   const [value, setValue] = useState('');
+  // State to track if the IME is composing (i.e., in the middle of Japanese IME input)
+  const [isComposing, setIsComposing] = useState(false);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -41,12 +43,22 @@ export default function Input({
   useAutosizeTextArea(textAreaRef.current, value);
 
   const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = evt.target?.value;
+    const val = evt.target.value;
     setValue(val);
   };
 
+  // Handlers for composition events, which are crucial for proper IME behavior
+  const handleCompositionStart = (evt: React.CompositionEvent<HTMLTextAreaElement>) => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = (evt: React.CompositionEvent<HTMLTextAreaElement>) => {
+    setIsComposing(false);
+  };
+
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (evt.key === 'Enter' && !evt.shiftKey) {
+    // Only trigger submit on Enter if not composing (IME input in progress) and shift is not pressed
+    if (evt.key === 'Enter' && !evt.shiftKey && !isComposing) {
       evt.preventDefault();
       if (value.trim()) {
         handleSubmit(new CustomEvent('submit', { detail: { value } }));
@@ -76,18 +88,14 @@ export default function Input({
       onSubmit={onFormSubmit}
       className="flex relative h-auto px-[16px] pr-[68px] py-[1rem] border-t border-borderSubtle"
     >
-      {/* loading */}
-      {/* {isLoading && (
-        <div className="absolute top-[-2px] left-0 w-full h-[2px]">
-          <div className="absolute w-[300px] h-[2px] bg-gradient-to-r from-blockTeal to-blockOrange animate-gradient-loader"></div>
-        </div>
-      )} */}
       <textarea
         autoFocus
         id="dynamic-textarea"
         placeholder="What can goose help with?"
         value={value}
         onChange={handleChange}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
         onKeyDown={handleKeyDown}
         disabled={disabled}
         ref={textAreaRef}