diff --git a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.module.scss b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.module.scss index 17d0054..186ee76 100644 --- a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.module.scss +++ b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.module.scss @@ -10,3 +10,9 @@ justify-content: center; padding-top: 16px; } + +.suggestions.suggestions { + position: sticky; + bottom: 0; + padding: 0 16px 36px; +} diff --git a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx index 46cfbcb..819db9b 100644 --- a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx +++ b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx @@ -7,7 +7,7 @@ import { useChat } from "@/providers/chat-provider"; import { useChatStore } from "@/providers/chat-store-provider"; import { formatTime } from "@/shared/utils/date"; -import { ChatMessages } from ".."; +import { ChatMessages, Suggestions } from ".."; import styles from "./ChatMessagesWrapper.module.scss"; @@ -20,9 +20,10 @@ export default function ChatMessagesWrapper() { messagesWrapperRef, loadOlder, scrollToBottom, + send, } = useChat(); - const { suggestionsHeight, _hasHydrated } = useChatStore(state => state); + const { _hasHydrated } = useChatStore(state => state); const isInitialScrollDone = useRef(false); @@ -48,47 +49,19 @@ export default function ChatMessagesWrapper() { }, [socketMessages]); useEffect(() => { - if ( - socketMessages.length > 0 && - !isInitialScrollDone.current && - _hasHydrated - ) { - scrollToBottom(); + if (socketMessages.length > 0 && _hasHydrated) { const timeout = setTimeout(() => { - isInitialScrollDone.current = true; - }, 1000); + scrollToBottom(); + }); return () => clearTimeout(timeout); } }, [socketMessages.length, scrollToBottom, _hasHydrated]); - // useEffect(() => { - // if (suggestionsHeight) { - // const timeout = setTimeout(() => { - // scrollToBottom(); - // console.log("scrollToBottom 2"); - // }, 0); - // return () => clearTimeout(timeout); - // } - // }, [suggestionsHeight, scrollToBottom]); - - useEffect(() => { - if (messagesWrapperRef.current?.style.paddingBottom) { - scrollToBottom(); - } - }, [ - scrollToBottom, - messagesWrapperRef.current?.style.paddingBottom, - messagesWrapperRef, - ]); - return (