singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

fix: #1201 wont close prompt list when blur

Browse Source
This commit is contained in:
Yidadaa 2023-05-03 15:55:46 +08:00
parent 328ecd1cfb
commit c1b6828ed4
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/chat.tsx
View File

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