xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 07:36:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: chat-body scrolls to bottom after submitting in mobile phone

Browse Source
This commit is contained in:
leedom 2023-03-30 20:32:08 +08:00
parent 9eb77207fb
commit ef40e98026
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/components/home.tsx
View File

@ -102,7 +102,7 @@ export function ChatList() {
state.currentSessionIndex, state.currentSessionIndex,
state.selectSession, state.selectSession,
state.removeSession, state.removeSession,
] ],
); );
return ( return (
@ -183,6 +183,7 @@ export function Chat(props: {
]); ]);
const fontSize = useChatStore((state) => state.config.fontSize); const fontSize = useChatStore((state) => state.config.fontSize);
const chatBodyRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const [userInput, setUserInput] = useState(""); const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -196,7 +197,7 @@ export function Chat(props: {
setPromptHints(promptStore.search(text)); setPromptHints(promptStore.search(text));
}, },
100, 100,
{ leading: true, trailing: true } { leading: true, trailing: true },
); );
const onPromptSelect = (prompt: Prompt) => { const onPromptSelect = (prompt: Prompt) => {
@ -210,11 +211,18 @@ export function Chat(props: {
if (!dom) return; if (!dom) return;
const paddingBottomNum: number = parseInt( const paddingBottomNum: number = parseInt(
window.getComputedStyle(dom).paddingBottom, window.getComputedStyle(dom).paddingBottom,
10 10,
); );
dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum; dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
}; };
const scrollBottom = () => {
setTimeout(() => {
const dom = chatBodyRef.current;
dom && (dom.scrollTop = dom?.scrollHeight ?? 0);
}, 1000 * 0.5);
};
// only search prompts when user input is short // only search prompts when user input is short
const SEARCH_TEXT_LIMIT = 30; const SEARCH_TEXT_LIMIT = 30;
const onInput = (text: string) => { const onInput = (text: string) => {
@ -241,6 +249,7 @@ export function Chat(props: {
setUserInput(""); setUserInput("");
setPromptHints([]); setPromptHints([]);
inputRef.current?.focus(); inputRef.current?.focus();
scrollBottom();
}; };
// stop response // stop response
@ -300,7 +309,7 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
) )
.concat( .concat(
userInput.length > 0 userInput.length > 0
@ -312,7 +321,7 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
); );
// auto scroll // auto scroll
@ -340,7 +349,7 @@ export function Chat(props: {
const newTopic = prompt(Locale.Chat.Rename, session.topic); const newTopic = prompt(Locale.Chat.Rename, session.topic);
if (newTopic && newTopic !== session.topic) { if (newTopic && newTopic !== session.topic) {
chatStore.updateCurrentSession( chatStore.updateCurrentSession(
(session) => (session.topic = newTopic!) (session) => (session.topic = newTopic!),
); );
} }
}} }}
@ -383,7 +392,7 @@ export function Chat(props: {
</div> </div>
</div> </div>
<div className={styles["chat-body"]}> <div ref={chatBodyRef} className={styles["chat-body"]}>
{messages.map((message, i) => { {messages.map((message, i) => {
const isUser = message.role === "user"; const isUser = message.role === "user";
@ -586,7 +595,7 @@ export function Home() {
state.newSession, state.newSession,
state.currentSessionIndex, state.currentSessionIndex,
state.removeSession, state.removeSession,
] ],
); );
const loading = !useHasHydrated(); const loading = !useHasHydrated();
const [showSideBar, setShowSideBar] = useState(true); const [showSideBar, setShowSideBar] = useState(true);