From aacab0be518776b2cbd1a2df126264eca5aa4447 Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Mon, 22 Dec 2025 09:46:03 +0800
Subject: [PATCH] feat(web): add auto-focus to composer input on desktop
 devices only

Adds touch device detection via media query (pointer: coarse) to prevent
triggering virtual keyboard on mobile. Input auto-focus is now conditional
on desktop environments where it improves keyboard-based interactions.
---
 web/src/components/AssistantChat/HappyComposer.tsx | 3 ++-
 web/src/hooks/usePlatform.ts                       | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index a9b47650..6982123a 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -100,7 +100,7 @@ export function HappyComposer(props: {
         })
     }, [composerText])
 
-    const { haptic: platformHaptic } = usePlatform()
+    const { haptic: platformHaptic, isTouch } = usePlatform()
     const activeWord = useActiveWord(inputState.text, inputState.selection, autocompletePrefixes)
     const [suggestions, selectedIndex, moveUp, moveDown, clearSuggestions] = useActiveSuggestions(
         activeWord,
@@ -433,6 +433,7 @@ export function HappyComposer(props: {
                         <div className="flex items-center px-4 py-3">
                             <ComposerPrimitive.Input
                                 ref={textareaRef}
+                                autoFocus={!controlsDisabled && !isTouch}
                                 placeholder="Type a message..."
                                 disabled={controlsDisabled}
                                 maxRows={5}
diff --git a/web/src/hooks/usePlatform.ts b/web/src/hooks/usePlatform.ts
index 3c7dcb51..849d5974 100644
--- a/web/src/hooks/usePlatform.ts
+++ b/web/src/hooks/usePlatform.ts
@@ -16,6 +16,8 @@ export type PlatformHaptic = {
 export type Platform = {
     /** Whether running in Telegram Mini App */
     isTelegram: boolean
+    /** Whether using a touch device (coarse pointer) */
+    isTouch: boolean
     /** Haptic feedback (falls back to Vibration API on browser) */
     haptic: PlatformHaptic
 }
@@ -67,17 +69,24 @@ const haptic: PlatformHaptic = {
 
 export function usePlatform(): Platform {
     const isTelegram = useMemo(() => isTelegramApp(), [])
+    const isTouch = useMemo(
+        () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
+        []
+    )
 
     return {
         isTelegram,
+        isTouch,
         haptic
     }
 }
 
 // Non-hook version for use outside React components
 export function getPlatform(): Platform {
+    const isTouch = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches
     return {
         isTelegram: isTelegramApp(),
+        isTouch,
         haptic
     }
 }