feat: improve chat keyboard handling and MonthSelector memory efficiency

- Add KeyboardAvoidingView with platform-specific behavior to chat screen
- Implement auto-scroll to end on new messages and keyboard show
- Configure keyboardDismissMode and keyboardShouldPersistTaps for better UX
- Lazy-load MonthSelector data only when modal opens, clear on close
- Add .env to gitignore
This commit is contained in:
2026-01-07 18:40:00 +01:00
parent 613bafa5f5
commit d86b18173f
4 changed files with 62 additions and 38 deletions

View File

@@ -323,16 +323,7 @@ const MonthSelector = ({
const listRef = useRef<React.ComponentRef<typeof FlashList<MonthItem>>>(null);
const INITIAL_RANGE = 12; // 12 months before and after current
const [monthSelectorData, setMonthSelectorData] = useState<MonthItem[]>(() =>
generateMonths(currentYear, currentMonthIndex, INITIAL_RANGE),
);
// Reset data when current month changes
useEffect(() => {
setMonthSelectorData(
generateMonths(currentYear, currentMonthIndex, INITIAL_RANGE),
);
}, [currentYear, currentMonthIndex]);
const [monthSelectorData, setMonthSelectorData] = useState<MonthItem[]>([]);
const appendMonths = (direction: "start" | "end", count: number) => {
setMonthSelectorData((prevData) => {
@@ -378,6 +369,10 @@ const MonthSelector = ({
useEffect(() => {
if (modalVisible) {
// Generate fresh data centered on current month
setMonthSelectorData(
generateMonths(currentYear, currentMonthIndex, INITIAL_RANGE),
);
Animated.timing(heightAnim, {
toValue: 200,
duration: 200,
@@ -385,8 +380,10 @@ const MonthSelector = ({
}).start();
} else {
heightAnim.setValue(0);
// Clear data when closing
setMonthSelectorData([]);
}
}, [modalVisible, heightAnim]);
}, [modalVisible, heightAnim, currentYear, currentMonthIndex]);
const renderItem = ({ item }: { item: MonthItem }) => (
<Pressable

View File

@@ -1,6 +1,6 @@
import { View, Text, TextInput, Pressable } from "react-native";
import { View, Text, TextInput, Pressable, KeyboardAvoidingView, Platform, Keyboard } from "react-native";
import currentTheme from "../../Themes";
import { useState } from "react";
import { useState, useRef, useEffect } from "react";
import Header from "../../components/Header";
import BaseBackground from "../../components/BaseBackground";
import { FlashList } from "@shopify/flash-list";
@@ -31,6 +31,18 @@ type ChatInputProps = {
const Chat = () => {
const { messages, addMessage, updateMessage } = useChatStore();
const listRef = useRef<FlashList<MessageData>>(null);
useEffect(() => {
const keyboardDidShow = Keyboard.addListener("keyboardDidShow", scrollToEnd);
return () => keyboardDidShow.remove();
}, []);
const scrollToEnd = () => {
setTimeout(() => {
listRef.current?.scrollToEnd({ animated: true });
}, 100);
};
const handleEventResponse = async (
action: "confirm" | "reject",
@@ -61,6 +73,7 @@ const Chat = () => {
conversationId: response.conversationId,
};
addMessage(botMessage);
scrollToEnd();
} catch (error) {
console.error(`Failed to ${action} event:`, error);
// Revert on error
@@ -76,6 +89,7 @@ const Chat = () => {
content: text,
};
addMessage(userMessage);
scrollToEnd();
try {
// Fetch server response
@@ -90,6 +104,7 @@ const Chat = () => {
conversationId: response.conversationId,
};
addMessage(botMessage);
scrollToEnd();
} catch (error) {
console.error("Failed to send message:", error);
}
@@ -98,30 +113,38 @@ const Chat = () => {
return (
<BaseBackground>
<ChatHeader />
<FlashList
data={messages}
renderItem={({ item }) => (
<ChatMessage
side={item.side}
content={item.content}
proposedChange={item.proposedChange}
respondedAction={item.respondedAction}
onConfirm={() =>
handleEventResponse(
"confirm",
item.id,
item.conversationId!,
item.proposedChange,
)
}
onReject={() =>
handleEventResponse("reject", item.id, item.conversationId!)
}
/>
)}
keyExtractor={(item) => item.id}
/>
<ChatInput onSend={handleSend} />
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<FlashList
ref={listRef}
data={messages}
renderItem={({ item }) => (
<ChatMessage
side={item.side}
content={item.content}
proposedChange={item.proposedChange}
respondedAction={item.respondedAction}
onConfirm={() =>
handleEventResponse(
"confirm",
item.id,
item.conversationId!,
item.proposedChange,
)
}
onReject={() =>
handleEventResponse("reject", item.id, item.conversationId!)
}
/>
)}
keyExtractor={(item) => item.id}
keyboardDismissMode="interactive"
keyboardShouldPersistTaps="handled"
/>
<ChatInput onSend={handleSend} />
</KeyboardAvoidingView>
</BaseBackground>
);
};