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.selectSession,
state.removeSession,
]
],
);
return (
@ -196,7 +196,7 @@ export function Chat(props: {
setPromptHints(promptStore.search(text));
},
100,
{ leading: true, trailing: true }
{ leading: true, trailing: true },
);
const onPromptSelect = (prompt: Prompt) => {
@ -210,7 +210,7 @@ export function Chat(props: {
if (!dom) return;
const paddingBottomNum: number = parseInt(
window.getComputedStyle(dom).paddingBottom,
10
10,
);
dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
};
@ -300,7 +300,7 @@ export function Chat(props: {
preview: true,
},
]
: []
: [],
)
.concat(
userInput.length > 0
@ -312,14 +312,24 @@ export function Chat(props: {
preview: true,
},
]
: []
: [],
);
// auto scroll
useLayoutEffect(() => {
setTimeout(() => {
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({
block: "end",
});
@ -340,7 +350,7 @@ export function Chat(props: {
const newTopic = prompt(Locale.Chat.Rename, session.topic);
if (newTopic && newTopic !== session.topic) {
chatStore.updateCurrentSession(
(session) => (session.topic = newTopic!)
(session) => (session.topic = newTopic!),
);
}
}}
@ -586,7 +596,7 @@ export function Home() {
state.newSession,
state.currentSessionIndex,
state.removeSession,
]
],
);
const loading = !useHasHydrated();
const [showSideBar, setShowSideBar] = useState(true);