diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 8fc39e31..a7808bb0 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -54,7 +54,7 @@ import styles from "./home.module.scss"; import chatStyle from "./chat.module.scss"; import { ListItem, Modal, showModal } from "./ui-lib"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { Path } from "../constant"; import { Avatar } from "./emoji"; import { MaskAvatar, MaskConfig } from "./mask"; @@ -235,7 +235,10 @@ export function PromptHints(props: {
props.onPromptSelect(prompt)} + onClick={() => { + console.log("click hint"); + props.onPromptSelect(prompt); + }} >
{prompt.title}
{prompt.content}
@@ -373,7 +376,7 @@ export function Chat() { const navigate = useNavigate(); const onChatBodyScroll = (e: HTMLElement) => { - const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20; + const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 100; setHitBottom(isTouchBottom); }; @@ -400,7 +403,7 @@ export function Chat() { () => { const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1; const inputRows = Math.min( - 5, + 20, Math.max(2 + Number(!isMobileScreen), rows), ); setInputRows(inputRows); @@ -569,12 +572,9 @@ export function Chat() { } }; - // Auto focus - useEffect(() => { - if (isMobileScreen) return; - inputRef.current?.focus(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + const location = useLocation(); + const isChat = location.pathname === Path.Chat; + const autoFocus = isChat; // only focus in chat page return (
@@ -764,16 +764,9 @@ export function Chat() { value={userInput} onKeyDown={onInputKeyDown} onFocus={() => setAutoScroll(true)} - onBlur={() => { - setTimeout(() => { - if (document.activeElement !== inputRef.current) { - setAutoScroll(false); - setPromptHints([]); - } - }, 100); - }} - autoFocus + onBlur={() => setAutoScroll(false)} rows={inputRows} + autoFocus={autoFocus} /> }