fix: Correct chat scroll behavior for both sort modes

Add scrollToLatestMessage helper that respects sortNewestFirst setting:
- When newest first: scroll to top (offset 0)
- When oldest first: scroll to end

Applied to keyboard show, voice messages, and content size changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-24 20:57:23 -08:00
parent 45ac102157
commit fa5d4ffb23

View File

@ -476,18 +476,29 @@ export default function ChatScreen() {
autoSelect();
}, []);
// Scroll to end when keyboard shows
// Helper function to scroll to the latest message based on sort mode
const scrollToLatestMessage = useCallback((animated = true) => {
if (sortNewestFirst) {
// When newest first, latest messages are at top (index 0)
flatListRef.current?.scrollToOffset({ offset: 0, animated });
} else {
// When oldest first, latest messages are at bottom
flatListRef.current?.scrollToEnd({ animated });
}
}, [sortNewestFirst]);
// Scroll to latest when keyboard shows
useEffect(() => {
const keyboardShowListener = Keyboard.addListener(
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
() => {
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: true });
scrollToLatestMessage(true);
}, 100);
}
);
return () => keyboardShowListener.remove();
}, []);
}, [scrollToLatestMessage]);
const openBeneficiaryPicker = useCallback(() => {
setShowBeneficiaryPicker(true);
@ -588,14 +599,14 @@ export default function ChatScreen() {
setMessages(prev => [...prev, voiceMessage]);
// Scroll to bottom
// Scroll to latest message (respects sort mode)
setTimeout(() => {
flatListRef.current?.scrollToEnd({ animated: true });
scrollToLatestMessage(true);
}, 100);
// Also store in transcript context for persistence
addTranscriptEntry(role, text);
}, [hasShownVoiceSeparator, addTranscriptEntry]);
}, [hasShownVoiceSeparator, addTranscriptEntry, scrollToLatestMessage]);
// Cached API token for WellNuo
const apiTokenRef = useRef<string | null>(null);
@ -887,9 +898,7 @@ export default function ChatScreen() {
contentContainerStyle={styles.messagesList}
showsVerticalScrollIndicator={false}
onContentSizeChange={() => {
if (!sortNewestFirst) {
flatListRef.current?.scrollToEnd({ animated: true });
}
scrollToLatestMessage(true);
}}
/>