jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: Enhance ChatView scroll behavior and LLM response tracking (#8767)

Browse source 
* 🐛 (chat-view.tsx): fix parameter name from stream_url to _stream_url to improve clarity
✨ (chat-view.tsx): add logic to handle scrolling behavior based on chat history updates and message content changes

* ♻️ (chat-view.tsx): refactor updateChat function parameters to remove unused _stream_url parameter and improve code readability
This commit is contained in:
Cristhian Zanforlin Lousa 2025-06-27 16:06:42 -03:00 • committed by GitHub
commit 6f7b0c8313
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 43 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
View file

@ -24,6 +24,8 @@ import { useFileHandler } from "../chatInput/hooks/use-file-handler";
import ChatMessage from "../chatMessage/chat-message";
import { ChatScrollAnchor } from "./chat-scroll-anchor";
const TIME_TO_DISABLE_SCROLL = 2000;
const MemoizedChatMessage = memo(ChatMessage, (prevProps, nextProps) => {
return (
prevProps.chat.message === nextProps.chat.message &&
@ -129,11 +131,7 @@ export default function ChatView({
// trigger focus on chat when new session is set
}, [focusChat]);
function updateChat(
chat: ChatMessageType,
message: string,
stream_url?: string,
) {
function updateChat(chat: ChatMessageType, message: string) {
chat.message = message;
if (chat.componentId)
updateFlowPool(chat.componentId, {
@ -151,7 +149,7 @@ export default function ChatView({
!!playgroundPage,
);
const onDrop = (e) => {
const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND && playgroundPage) {
e.stopPropagation();
return;
@ -186,6 +184,8 @@ export default function ChatView({
const [canScroll, setCanScroll] = useState<boolean>(false);
const [scrolledUp, setScrolledUp] = useState<boolean>(false);
const [isLlmResponding, setIsLlmResponding] = useState<boolean>(false);
const [lastMessageContent, setLastMessageContent] = useState<string>("");
const handleScroll = () => {
if (!messagesRef.current) return;
@ -209,8 +209,43 @@ export default function ChatView({
useEffect(() => {
setPlaygroundScrollBehaves("smooth");
setCanScroll(true);
}, [chatHistory?.length]);
if (!chatHistory || chatHistory.length === 0) {
setCanScroll(true);
return;
}
const lastMessage = chatHistory[chatHistory.length - 1];
const currentMessageContent =
typeof lastMessage.message === "string"
? lastMessage.message
: JSON.stringify(lastMessage.message);
const isNewMessage = lastMessage.isSend;
const isStreamingUpdate =
!lastMessage.isSend &&
currentMessageContent !== lastMessageContent &&
currentMessageContent.length > lastMessageContent.length;
if (isStreamingUpdate) {
if (!isLlmResponding) {
setIsLlmResponding(true);
setCanScroll(true);
setTimeout(() => {
setCanScroll(false);
}, TIME_TO_DISABLE_SCROLL);
}
} else if (isNewMessage || lastMessage.isSend) {
setCanScroll(true);
if (isLlmResponding) {
setIsLlmResponding(false);
}
}
setLastMessageContent(currentMessageContent);
}, [chatHistory, isLlmResponding, lastMessageContent]);
return (
<div