cam/MAIA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

quick fix to autoscroll on chat window

Browse Source
This commit is contained in:
c-d-p
2025-04-21 20:25:16 +02:00
parent 4f57df8101
commit 5df6ae35cc
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
interfaces/nativeapp/src/screens/ChatScreen.tsx
View File

@@ -72,10 +72,6 @@ const ChatScreen = () => {
// Add user message optimistically
setMessages(prevMessages => [...prevMessages, userMessage]);
setIsLoading(true);
// Scroll to bottom after adding user message
setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
// --- Call Backend API ---
try {
console.log(`[ChatScreen] Sending to /nlp/process-command: ${textToSend}`);
@@ -116,14 +112,9 @@ const ChatScreen = () => {
setMessages(prevMessages => [...prevMessages, errorResponse]);
} finally {
setIsLoading(false);
// Scroll to bottom after receiving AI message(s)
setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
}
// --- End API Call ---
// NOTE: Removed `messages` from dependency array to prevent potential loops.
// State updates within useCallback using the functional form `setMessages(prev => ...)`
// don't require the state itself as a dependency.
}, []);
}, []); // Dependencies are correct
// --- Load messages from backend API on mount & handle initial question ---
useEffect(() => {
@@ -146,6 +137,8 @@ const ChatScreen = () => {
}));
setMessages(historyMessages);
historyLoadedSuccessfully = true; // Mark history as loaded
// ADDED BACK: Scroll after initial history is set, with a delay
setTimeout(() => flatListRef.current?.scrollToEnd({ animated: false }), 100);
} else {
console.warn("[ChatScreen] Received invalid history data:", response.data);
setMessages([]);
@@ -163,8 +156,9 @@ const ChatScreen = () => {
// Send initial question *after* history load attempt, if provided
if (initialQuestion) {
console.log("[ChatScreen] Initial question provided:", initialQuestion);
// Check if the initial question is already the last message from history (simple check)
const lastMessageText = messages[messages.length - 1]?.text;
// Use functional update form of setMessages to get the latest state
setMessages(currentMessages => {
const lastMessageText = currentMessages[currentMessages.length - 1]?.text;
if (lastMessageText !== initialQuestion) {
console.log("[ChatScreen] Sending initial question now.");
// Use a timeout to ensure history state update is processed before sending
@@ -172,6 +166,8 @@ const ChatScreen = () => {
} else {
console.log("[ChatScreen] Initial question seems to match last history message, not sending again.");
}
return currentMessages; // Return the state unchanged if not sending
});
} else {
console.log("[ChatScreen] No initial question provided.");
}
@@ -185,8 +181,7 @@ const ChatScreen = () => {
isMounted = false; // Cleanup function to set flag on unmount
console.log("[ChatScreen] Component unmounted.");
};
// Run only once on mount. `initialQuestion` is stable after mount.
// `sendMessageToApi` is memoized by useCallback.
// Dependencies are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialQuestion, sendMessageToApi]);
@@ -314,10 +309,8 @@ const ChatScreen = () => {
renderItem={renderMessage}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.messageList}
// Optimization: remove onContentSizeChange/onLayout if not strictly needed for scrolling
// onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: false })}
// onLayout={() => flatListRef.current?.scrollToEnd({ animated: false })}
// Consider initialScrollIndex or other props if performance is an issue
// ADDED: Scroll to end when content size changes
onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: false })}
/>
</View>