From 2fcf9fe489d00dc62ce602fa3befaa50c9bbae33 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Mon, 22 Jan 2024 11:15:51 +0100 Subject: [PATCH 1/5] fix: fix chat autoscrolling if position of previous chat not at the bottom (Issue #501) --- src/components/Chat/Chat.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index b72d82afaa..bfb4a4019e 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -121,6 +121,7 @@ export const Chat = memo(() => { setIsShowChatSettings(false); if (selectedConversations.length > 0) { + handleScroll(); const mergedMessages: MergedMessages[] = []; for (let i = 0; i < selectedConversations[0].messages.length; i++) { if (selectedConversations[0].messages[i].role === Role.System) continue; From caf5a1aefd4f8ed7cb3aa35e62d5c92cc7176232 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Mon, 22 Jan 2024 16:01:01 +0100 Subject: [PATCH 2/5] add missing dependency --- src/components/Chat/Chat.tsx | 50 ++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index bfb4a4019e..b65961d490 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -117,31 +117,6 @@ export const Chat = memo(() => { (conv) => conv.messages.length > 0, ); - useEffect(() => { - setIsShowChatSettings(false); - - if (selectedConversations.length > 0) { - handleScroll(); - const mergedMessages: MergedMessages[] = []; - for (let i = 0; i < selectedConversations[0].messages.length; i++) { - if (selectedConversations[0].messages[i].role === Role.System) continue; - - mergedMessages.push( - selectedConversations.map((conv) => [ - conv, - conv.messages[i] || { role: Role.Assistant, content: '' }, - i, - ]), - ); - } - setMergedMessages([...mergedMessages]); - } - - if (selectedConversations.some((conv) => conv.messages.length === 0)) { - setShowScrollDownButton(false); - } - }, [selectedConversations]); - useEffect(() => { const modelIds = models.map((model) => model.id); const isNotAllowedModel = @@ -266,6 +241,31 @@ export const Chat = memo(() => { }; }, [messagesEndRef]); + useEffect(() => { + setIsShowChatSettings(false); + + if (selectedConversations.length > 0) { + handleScroll(); + const mergedMessages: MergedMessages[] = []; + for (let i = 0; i < selectedConversations[0].messages.length; i++) { + if (selectedConversations[0].messages[i].role === Role.System) continue; + + mergedMessages.push( + selectedConversations.map((conv) => [ + conv, + conv.messages[i] || { role: Role.Assistant, content: '' }, + i, + ]), + ); + } + setMergedMessages([...mergedMessages]); + } + + if (selectedConversations.some((conv) => conv.messages.length === 0)) { + setShowScrollDownButton(false); + } + }, [handleScroll, selectedConversations]); + const handleClearConversation = useCallback( (conversation: Conversation) => { if (conversation) { From 6d57ee66957341f5c028eb36d9dfab10a491d8a4 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Thu, 25 Jan 2024 13:10:57 +0100 Subject: [PATCH 3/5] call handleScroll to count heigth only once --- src/components/Chat/Chat.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index b65961d490..9f988adee0 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -107,6 +107,7 @@ export const Chat = memo(() => { const nextMessageBoxRef = useRef(null); const [inputHeight, setInputHeight] = useState(142); const [notAllowedType, setNotAllowedType] = useState(null); + const [isSended, setIsSended] = useState(false); const disableAutoScrollTimeoutRef = useRef>(); const showReplayControls = useMemo(() => { @@ -230,6 +231,7 @@ export const Chat = memo(() => { threshold: 0.1, }, ); + const messagesEndElement = messagesEndRef.current; if (messagesEndElement) { observer.observe(messagesEndElement); @@ -245,7 +247,11 @@ export const Chat = memo(() => { setIsShowChatSettings(false); if (selectedConversations.length > 0) { - handleScroll(); + if (isSended) { + handleScroll(); + setIsSended(false); + } + const mergedMessages: MergedMessages[] = []; for (let i = 0; i < selectedConversations[0].messages.length; i++) { if (selectedConversations[0].messages[i].role === Role.System) continue; @@ -437,6 +443,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); + setIsSended(true); }, [dispatch, selectedConversations], ); @@ -454,6 +461,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); + setIsSended(true); }, [dispatch, selectedConversations]); const onEditMessage = useCallback( @@ -467,6 +475,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); + setIsSended(true); }, [dispatch, selectedConversations], ); From 2ee10bcc8b525eda7afb679e142046e3d299826e Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Thu, 25 Jan 2024 13:12:39 +0100 Subject: [PATCH 4/5] add missing dependency --- src/components/Chat/Chat.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 9f988adee0..f8ff73505f 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -270,7 +270,7 @@ export const Chat = memo(() => { if (selectedConversations.some((conv) => conv.messages.length === 0)) { setShowScrollDownButton(false); } - }, [handleScroll, selectedConversations]); + }, [handleScroll, isSended, selectedConversations]); const handleClearConversation = useCallback( (conversation: Conversation) => { From 23ccb85db30fe8b05d0f529cbf22fe1a5d8b54bb Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Thu, 25 Jan 2024 13:27:41 +0100 Subject: [PATCH 5/5] replace state with ref --- src/components/Chat/Chat.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index f8ff73505f..c4c3966c8d 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -107,7 +107,7 @@ export const Chat = memo(() => { const nextMessageBoxRef = useRef(null); const [inputHeight, setInputHeight] = useState(142); const [notAllowedType, setNotAllowedType] = useState(null); - const [isSended, setIsSended] = useState(false); + const isSentRef = useRef(false); const disableAutoScrollTimeoutRef = useRef>(); const showReplayControls = useMemo(() => { @@ -247,9 +247,9 @@ export const Chat = memo(() => { setIsShowChatSettings(false); if (selectedConversations.length > 0) { - if (isSended) { + if (isSentRef.current) { handleScroll(); - setIsSended(false); + isSentRef.current = false; } const mergedMessages: MergedMessages[] = []; @@ -270,7 +270,7 @@ export const Chat = memo(() => { if (selectedConversations.some((conv) => conv.messages.length === 0)) { setShowScrollDownButton(false); } - }, [handleScroll, isSended, selectedConversations]); + }, [handleScroll, selectedConversations]); const handleClearConversation = useCallback( (conversation: Conversation) => { @@ -443,7 +443,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); - setIsSended(true); + isSentRef.current = true; }, [dispatch, selectedConversations], ); @@ -461,7 +461,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); - setIsSended(true); + isSentRef.current = true; }, [dispatch, selectedConversations]); const onEditMessage = useCallback( @@ -475,7 +475,7 @@ export const Chat = memo(() => { activeReplayIndex: 0, }), ); - setIsSended(true); + isSentRef.current = true; }, [dispatch, selectedConversations], );