fix(UI): use ref-based composition state to fix Safari IME bug

Author: ryo9999

src/components/EmptyChatMessageInput.tsx

@@ -14,6 +14,7 @@ const EmptyChatMessageInput = () => {
   const [message, setMessage] = useState('');
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const isComposing = useRef(false);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -47,12 +48,20 @@ const EmptyChatMessageInput = () => {
         setMessage('');
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+        if (e.key === 'Enter' && !e.shiftKey && !isComposing.current) {
           e.preventDefault();
           sendMessage(message);
           setMessage('');
         }
       }}
+      onCompositionStart={() => {
+        isComposing.current = true;
+      }}
+      onCompositionEnd={() => {
+        setTimeout(() => {
+          isComposing.current = false;
+        }, 0);
+      }}
       className="w-full"
     >
       <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-3 pt-5 pb-3 rounded-2xl w-full border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300">

src/components/MessageInput.tsx

@@ -13,6 +13,8 @@ const MessageInput = () => {
   const [textareaRows, setTextareaRows] = useState(1);
   const [mode, setMode] = useState<'multi' | 'single'>('single');
 
+  const isComposing = useRef(false);
+
   useEffect(() => {
     if (textareaRows >= 2 && message && mode === 'single') {
       setMode('multi');
@@ -54,12 +56,20 @@ const MessageInput = () => {
         setMessage('');
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !loading && !e.nativeEvent.isComposing) {
+        if (e.key === 'Enter' && !e.shiftKey && !loading && !isComposing.current) {
           e.preventDefault();
           sendMessage(message);
           setMessage('');
         }
       }}
+      onCompositionStart={() => {
+        isComposing.current = true;
+      }}
+      onCompositionEnd={() => {
+        setTimeout(() => {
+          isComposing.current = false;
+        }, 0);
+      }}
       className={cn(
         'relative bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-visible border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300',
         mode === 'multi' ? 'flex-col rounded-2xl' : 'flex-row rounded-full',