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

Merge pull request #404 from cyhhao/pr2

Browse Source 
optimize: scrolling experience
This commit is contained in:
Yifei Zhang 2023-04-03 15:33:01 +08:00 committed by GitHub
commit d923869dc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/chat.tsx
View File

@ -370,7 +370,8 @@ export function Chat(props: {
chatStore.onUserInput(userInput).then(() => setIsLoading(false)); chatStore.onUserInput(userInput).then(() => setIsLoading(false));
setUserInput(""); setUserInput("");
setPromptHints([]); setPromptHints([]);
inputRef.current?.focus(); if (!isMobileScreen()) inputRef.current?.focus();
setAutoScroll(true);
}; };
// stop response // stop response
@ -527,7 +528,11 @@ export function Chat(props: {
className={styles["chat-body"]} className={styles["chat-body"]}
ref={scrollRef} ref={scrollRef}
onScroll={(e) => onChatBodyScroll(e.currentTarget)} onScroll={(e) => onChatBodyScroll(e.currentTarget)}
onTouchStart={() => inputRef.current?.blur()} onWheel={() => setAutoScroll(false)}
onTouchStart={() => {
inputRef.current?.blur();
setAutoScroll(false);
}}
> >
{messages.map((message, i) => { {messages.map((message, i) => {
const isUser = message.role === "user"; const isUser = message.role === "user";
@ -588,7 +593,6 @@ export function Chat(props: {
if (!isMobileScreen()) return; if (!isMobileScreen()) return;
setUserInput(message.content); setUserInput(message.content);
}} }}
onMouseOver={() => inputRef.current?.blur()}
> >
<Markdown content={message.content} /> <Markdown content={message.content} />
</div> </div>
@ -623,9 +627,6 @@ export function Chat(props: {
setAutoScroll(false); setAutoScroll(false);
setTimeout(() => setPromptHints([]), 500); setTimeout(() => setPromptHints([]), 500);
}} }}
onMouseOver={() => {
inputRef.current?.focus();
}}
autoFocus={!props?.sideBarShowing} autoFocus={!props?.sideBarShowing}
/> />
<IconButton <IconButton