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:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user