XiaoMo/ChatGPT-Next-Web
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix: #244 better scroll ux

Browse Source
This commit is contained in:
Yifei Zhang 2023-03-30 15:42:54 +00:00
parent 7827b40f17
commit 7599ae385b
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
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 (
@ -196,7 +196,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,7 +210,7 @@ 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;
}; };
@ -300,7 +300,7 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
) )
.concat( .concat(
userInput.length > 0 userInput.length > 0
@ -312,14 +312,24 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
); );
// auto scroll // auto scroll
useLayoutEffect(() => { useLayoutEffect(() => {
setTimeout(() => { setTimeout(() => {
const dom = latestMessageRef.current; const dom = latestMessageRef.current;
if (dom && !isIOS() && autoScroll) { const inputDom = inputRef.current;
// only scroll when input overlaped message body
let shouldScroll = true;
if (dom && inputDom) {
const domRect = dom.getBoundingClientRect();
const inputRect = inputDom.getBoundingClientRect();
shouldScroll = domRect.top > inputRect.top;
}
if (dom && autoScroll && shouldScroll) {
dom.scrollIntoView({ dom.scrollIntoView({
block: "end", block: "end",
}); });
@ -340,7 +350,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!),
); );
} }
}} }}
@ -586,7 +596,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);