fix(chat): keep mobile send from losing focus

src/app/chat/components/chat-input-bar.tsx

@@ -10,6 +10,7 @@ import { ChatSendButton } from "./chat-send-button";
 import styles from "./chat-input-bar.module.css";
 
 const log = new Logger("AppChatComponentsChatInputBar");
+const POINTER_SEND_CLICK_DEDUPE_MS = 500;
 
 export interface ChatInputBarProps {
   disabled?: boolean;
@@ -19,12 +20,15 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
   const dispatch = useChatDispatch();
   const [input, setInput] = useState("");
   const [isFocused, setIsFocused] = useState(false);
+  const barRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const lastPointerSendAtRef = useRef(0);
 
   const hasContent = input.trim().length > 0;
 
   useKeyboardHeight({
     targetRef: textareaRef,
+    containerRef: barRef,
     active: isFocused,
     onKeyboardDismiss: () => {
       log.important("info", "[chat-input-bar] keyboard dismissed", {
@@ -51,9 +55,23 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
     setIsFocused(focused);
   };
 
-  const handleSend = () => {
+  const handleSend = (source: "click" | "keyboard" | "pointerdown") => {
-    if (!hasContent) return;
+    if (source === "click") {
+      const elapsed = Date.now() - lastPointerSendAtRef.current;
+      if (elapsed >= 0 && elapsed < POINTER_SEND_CLICK_DEDUPE_MS) {
+        log.important("info", "[chat-input-bar] suppress duplicate click", {
+          elapsed,
+          contentLength: input.length,
+          hasContent,
+          disabled,
+          isFocused,
+        });
+        return;
+      }
+    }
+    if (disabled || !hasContent) return;
     log.debug("[chat-input-bar] handleSend", {
+      source,
       contentLength: input.length,
       contentPreview: input.slice(0, 50),
       hasContent,
@@ -61,6 +79,7 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
       isFocused,
     });
     log.important("info", "[chat-input-bar] send", {
+      source,
       contentLength: input.length,
       hasContent,
       disabled,
@@ -71,21 +90,30 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
     textareaRef.current?.focus();
   };
 
+  const handlePointerDownSend = () => {
+    lastPointerSendAtRef.current = Date.now();
+    handleSend("pointerdown");
+  };
+
   return (
-    <div className={`${styles.bar} ${isFocused ? styles.barFocused : ""}`}>
+    <div
+      ref={barRef}
+      className={`${styles.bar} ${isFocused ? styles.barFocused : ""}`}
+    >
       <div className={`${styles.row} ${isFocused ? styles.rowFocused : ""}`}>
         <ChatInputTextField
           ref={textareaRef}
           value={input}
           onChange={handleInputChange}
-          onSubmit={handleSend}
+          onSubmit={() => handleSend("keyboard")}
           onFocusChange={handleFocusChange}
           disabled={disabled}
         />
         <ChatSendButton
           disabled={disabled}
           hasContent={hasContent}
-          onClick={handleSend}
+          onClick={() => handleSend("click")}
+          onPointerDownSend={handlePointerDownSend}
         />
       </div>
     </div>

src/app/chat/components/chat-send-button.tsx

@@ -18,12 +18,14 @@ export interface ChatSendButtonProps {
   disabled: boolean;
   hasContent: boolean;
   onClick: () => void;
+  onPointerDownSend: () => void;
 }
 
 export function ChatSendButton({
   disabled,
   hasContent,
   onClick,
+  onPointerDownSend,
 }: ChatSendButtonProps) {
   return (
     <button
@@ -32,6 +34,13 @@ export function ChatSendButton({
         hasContent && !disabled ? styles.buttonActive : styles.buttonEmpty
       }`}
       disabled={disabled}
+      onPointerDown={(event) => {
+        if (event.pointerType === "mouse") return;
+        if (disabled) return;
+        event.preventDefault();
+        if (!hasContent) return;
+        onPointerDownSend();
+      }}
       onClick={onClick}
       aria-label="Send message"
     >

src/hooks/use-keyboard-height/index.ts

@@ -51,6 +51,7 @@ interface KeyboardSnapshot {
 
 export function useKeyboardHeight({
   targetRef,
+  containerRef,
   active = false,
   onKeyboardDismiss,
 }: UseKeyboardHeightOptions = {}): void {
@@ -172,6 +173,13 @@ export function useKeyboardHeight({
 
     const handlePointerDown = (event: PointerEvent | TouchEvent) => {
       const target = targetRef?.current;
+      const container = containerRef?.current;
+      if (event.target instanceof Node && container?.contains(event.target)) {
+        log.important("info", "[keyboard] keep active for input container tap", {
+          snapshot: formatSnapshot(readKeyboardSnapshot()),
+        });
+        return;
+      }
       if (!target || event.target === target) return;
       if (event.target instanceof Node && target.contains(event.target)) return;
       release("outside-interaction");
@@ -215,6 +223,7 @@ export function useKeyboardHeight({
     };
   }, [
     active,
+    containerRef,
     targetRef,
   ]);
 }

src/hooks/use-keyboard-height/types.ts

@@ -2,6 +2,7 @@ import type { RefObject } from "react";
 
 export interface UseKeyboardHeightOptions {
   targetRef?: RefObject<HTMLElement | null>;
+  containerRef?: RefObject<HTMLElement | null>;
   active?: boolean;
   onKeyboardDismiss?: () => void;
 }