diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index d75c0e5..1d5c432 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -1,5 +1,5 @@ import { Conversation, KeyValuePair, Message, OpenAIModel } from "@/types"; -import { FC, MutableRefObject, useEffect, useRef, useState } from "react"; +import { FC, MutableRefObject, useCallback, useEffect, useRef, useState } from "react"; import { ChatInput } from "./ChatInput"; import { ChatLoader } from "./ChatLoader"; import { ChatMessage } from "./ChatMessage"; @@ -30,16 +30,17 @@ export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKey const chatContainerRef = useRef(null); const textareaRef = useRef(null); - const scrollToBottom = () => { + const scrollToBottom = useCallback(() => { if (autoScrollEnabled) { - messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + textareaRef.current?.focus(); } - }; + }, [autoScrollEnabled]); const handleScroll = () => { if (chatContainerRef.current) { const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current; - const bottomTolerance = 30; + const bottomTolerance = 5; if (scrollTop + clientHeight < scrollHeight - bottomTolerance) { setAutoScrollEnabled(false); @@ -51,9 +52,8 @@ export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKey useEffect(() => { scrollToBottom(); - textareaRef.current?.focus(); setCurrentMessage(conversation.messages[conversation.messages.length - 2]); - }, [conversation.messages]); + }, [conversation.messages, scrollToBottom]); useEffect(() => { const chatContainer = chatContainerRef.current;