diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 87231feee..15a206826 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -218,7 +218,7 @@ flex: 1; overflow: auto; padding: 20px; - margin-bottom: 100px; + margin-bottom: 160px; } .chat-body-title { diff --git a/app/components/home.tsx b/app/components/home.tsx index a44e5f16e..251451c20 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -282,10 +282,9 @@ export function Chat(props: { }; // for auto-scroll - const latestMessageRef = useRef(null); - + const chatBodyRef = useRef(null); // wont scroll while hovering messages - const [autoScroll, setAutoScroll] = useState(false); + const [autoScroll, setAutoScroll] = useState(true); // preview messages const messages = (session.messages as RenderMessage[]) @@ -317,15 +316,12 @@ export function Chat(props: { // auto scroll useLayoutEffect(() => { setTimeout(() => { - const dom = latestMessageRef.current; - if (dom && !isIOS() && autoScroll) { - dom.scrollIntoView({ - block: "end", - }); + const chatBody = chatBodyRef.current; + if (chatBody && !isIOS() && autoScroll) { + chatBody.scrollTo(0, chatBody.scrollHeight) } }, 500); }); - return (
@@ -382,10 +378,10 @@ export function Chat(props: {
-
+
{messages.map((message, i) => { const isUser = message.role === "user"; - + return (
); })} -
- - -