🐛 Fix message jumps in search
This commit is contained in:
@@ -14,6 +14,7 @@ import "package:island/pods/chat/chat_subscribe.dart";
|
||||
import "package:island/pods/chat/messages_notifier.dart";
|
||||
import "package:island/pods/network.dart";
|
||||
import "package:island/pods/chat/chat_online_count.dart";
|
||||
import "package:island/screens/chat/search_messages.dart";
|
||||
import "package:island/services/file_uploader.dart";
|
||||
import "package:island/screens/chat/chat.dart";
|
||||
import "package:island/services/responsive.dart";
|
||||
@@ -142,6 +143,7 @@ class ChatRoomScreen extends HookConsumerWidget {
|
||||
final attachmentProgress = useState<Map<String, Map<int, double>>>({});
|
||||
|
||||
var isLoading = false;
|
||||
var isScrollingToMessage = false; // Flag to prevent scroll conflicts
|
||||
|
||||
final listController = useMemoized(() => ListController(), []);
|
||||
|
||||
@@ -330,6 +332,94 @@ class ChatRoomScreen extends HookConsumerWidget {
|
||||
|
||||
const messageKeyPrefix = 'message-';
|
||||
|
||||
// Helper function for scroll animation
|
||||
void performScrollAnimation({
|
||||
required int index,
|
||||
required ListController listController,
|
||||
required ScrollController scrollController,
|
||||
required String messageId,
|
||||
required WidgetRef ref,
|
||||
}) {
|
||||
// Update flashing message first
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({messageId}));
|
||||
|
||||
// Use multiple post-frame callbacks to ensure stability
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
try {
|
||||
listController.animateToItem(
|
||||
index: index,
|
||||
scrollController: scrollController,
|
||||
alignment: 0.5,
|
||||
duration:
|
||||
(estimatedDistance) => Duration(
|
||||
milliseconds:
|
||||
(estimatedDistance * 0.5).clamp(200, 800).toInt(),
|
||||
),
|
||||
curve: (estimatedDistance) => Curves.easeOutCubic,
|
||||
);
|
||||
|
||||
// Reset the scroll flag after animation completes
|
||||
Future.delayed(const Duration(milliseconds: 800), () {
|
||||
isScrollingToMessage = false;
|
||||
});
|
||||
} catch (e) {
|
||||
// If animation fails, reset the flag
|
||||
isScrollingToMessage = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Robust scroll-to-message function to prevent jumping back
|
||||
void scrollToMessage({
|
||||
required String messageId,
|
||||
required List<LocalChatMessage> messageList,
|
||||
required MessagesNotifier messagesNotifier,
|
||||
required ListController listController,
|
||||
required ScrollController scrollController,
|
||||
required WidgetRef ref,
|
||||
}) {
|
||||
// Prevent concurrent scroll operations
|
||||
if (isScrollingToMessage) return;
|
||||
isScrollingToMessage = true;
|
||||
|
||||
final messageIndex = messageList.indexWhere((m) => m.id == messageId);
|
||||
|
||||
if (messageIndex == -1) {
|
||||
// Message not in current list, need to load it first
|
||||
messagesNotifier.jumpToMessage(messageId).then((index) {
|
||||
if (index != -1) {
|
||||
// Wait for UI to rebuild before animating
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
performScrollAnimation(
|
||||
index: index,
|
||||
listController: listController,
|
||||
scrollController: scrollController,
|
||||
messageId: messageId,
|
||||
ref: ref,
|
||||
);
|
||||
});
|
||||
} else {
|
||||
isScrollingToMessage = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Message is already in list, scroll directly with slight delay
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
performScrollAnimation(
|
||||
index: messageIndex,
|
||||
listController: listController,
|
||||
scrollController: scrollController,
|
||||
messageId: messageId,
|
||||
ref: ref,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> uploadAttachment(int index) async {
|
||||
final attachment = attachments.value[index];
|
||||
if (attachment.isOnCloud) return;
|
||||
@@ -445,43 +535,14 @@ class ChatRoomScreen extends HookConsumerWidget {
|
||||
}
|
||||
},
|
||||
onJump: (messageId) {
|
||||
final messageIndex = messageList.indexWhere(
|
||||
(m) => m.id == messageId,
|
||||
scrollToMessage(
|
||||
messageId: messageId,
|
||||
messageList: messageList,
|
||||
messagesNotifier: messagesNotifier,
|
||||
listController: listController,
|
||||
scrollController: scrollController,
|
||||
ref: ref,
|
||||
);
|
||||
if (messageIndex == -1) {
|
||||
messagesNotifier.jumpToMessage(messageId).then((index) {
|
||||
if (index != -1) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
listController.animateToItem(
|
||||
index: index,
|
||||
scrollController: scrollController,
|
||||
alignment: 0.5,
|
||||
duration:
|
||||
(estimatedDistance) =>
|
||||
Duration(milliseconds: 250),
|
||||
curve: (estimatedDistance) => Curves.easeInOut,
|
||||
);
|
||||
});
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({messageId}));
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
listController.animateToItem(
|
||||
index: messageIndex,
|
||||
scrollController: scrollController,
|
||||
alignment: 0.5,
|
||||
duration:
|
||||
(estimatedDistance) => Duration(milliseconds: 250),
|
||||
curve: (estimatedDistance) => Curves.easeInOut,
|
||||
);
|
||||
});
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({messageId}));
|
||||
},
|
||||
progress: attachmentProgress.value[message.id],
|
||||
showAvatar: isLastInGroup,
|
||||
@@ -528,46 +589,40 @@ class ChatRoomScreen extends HookConsumerWidget {
|
||||
'chatDetail',
|
||||
pathParameters: {'id': id},
|
||||
);
|
||||
if (result is String && messages.valueOrNull != null) {
|
||||
// Jump to the message that was selected in search
|
||||
final messageList = messages.valueOrNull!;
|
||||
final messageIndex = messageList.indexWhere(
|
||||
(m) => m.id == result,
|
||||
);
|
||||
if (messageIndex == -1) {
|
||||
messagesNotifier.jumpToMessage(result).then((index) {
|
||||
if (index != -1) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (result is SearchMessagesResult &&
|
||||
messages.valueOrNull != null) {
|
||||
final messageId = result.messageId;
|
||||
|
||||
// Jump to the message and trigger flash effect
|
||||
messagesNotifier.jumpToMessage(messageId).then((index) {
|
||||
if (index != -1 && context.mounted) {
|
||||
// Update flashing message
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({messageId}));
|
||||
|
||||
// Scroll to the message with animation
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
try {
|
||||
listController.animateToItem(
|
||||
index: index,
|
||||
scrollController: scrollController,
|
||||
alignment: 0.5,
|
||||
duration:
|
||||
(estimatedDistance) =>
|
||||
Duration(milliseconds: 250),
|
||||
curve: (estimatedDistance) => Curves.easeInOut,
|
||||
(estimatedDistance) => Duration(
|
||||
milliseconds:
|
||||
(estimatedDistance * 0.5)
|
||||
.clamp(200, 800)
|
||||
.toInt(),
|
||||
),
|
||||
curve: (estimatedDistance) => Curves.easeOutCubic,
|
||||
);
|
||||
});
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({result}));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
listController.animateToItem(
|
||||
index: messageIndex,
|
||||
scrollController: scrollController,
|
||||
alignment: 0.5,
|
||||
duration:
|
||||
(estimatedDistance) => Duration(milliseconds: 250),
|
||||
curve: (estimatedDistance) => Curves.easeInOut,
|
||||
);
|
||||
});
|
||||
ref
|
||||
.read(flashingMessagesProvider.notifier)
|
||||
.update((set) => set.union({result}));
|
||||
}
|
||||
} catch (e) {
|
||||
// If animation fails, just update flashing state
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
@@ -410,7 +410,7 @@ class ChatDetailScreen extends HookConsumerWidget {
|
||||
if (result is SearchMessagesResult) {
|
||||
// Navigate back to room screen with message to jump to
|
||||
if (context.mounted) {
|
||||
context.pop(result.messageId);
|
||||
context.pop(result);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -32,6 +32,9 @@ class SearchMessagesScreen extends HookConsumerWidget {
|
||||
final withAttachments = useState(false);
|
||||
final searchState = useState(SearchState.idle);
|
||||
final searchResultCount = useState<int?>(null);
|
||||
final searchResults = useState<AsyncValue<List<dynamic>>>(
|
||||
const AsyncValue.data([]),
|
||||
);
|
||||
|
||||
// Debounce timer for search optimization
|
||||
final debounceTimer = useRef<Timer?>(null);
|
||||
@@ -39,61 +42,47 @@ class SearchMessagesScreen extends HookConsumerWidget {
|
||||
final messagesNotifier = ref.read(
|
||||
messagesNotifierProvider(roomId).notifier,
|
||||
);
|
||||
final messages = ref.watch(messagesNotifierProvider(roomId));
|
||||
|
||||
// Optimized search function with debouncing
|
||||
void performSearch(String query) {
|
||||
void performSearch(String query) async {
|
||||
if (query.trim().isEmpty) {
|
||||
searchState.value = SearchState.idle;
|
||||
searchResultCount.value = null;
|
||||
messagesNotifier.clearSearch();
|
||||
searchResults.value = const AsyncValue.data([]);
|
||||
return;
|
||||
}
|
||||
|
||||
searchState.value = SearchState.searching;
|
||||
searchResults.value = const AsyncValue.loading();
|
||||
|
||||
// Cancel previous search if still active
|
||||
debounceTimer.value?.cancel();
|
||||
|
||||
// Debounce search to avoid excessive API calls
|
||||
debounceTimer.value = Timer(const Duration(milliseconds: 300), () {
|
||||
messagesNotifier.searchMessages(
|
||||
query.trim(),
|
||||
withLinks: withLinks.value,
|
||||
withAttachments: withAttachments.value,
|
||||
);
|
||||
debounceTimer.value = Timer(const Duration(milliseconds: 300), () async {
|
||||
try {
|
||||
final results = await messagesNotifier.getSearchResults(
|
||||
query.trim(),
|
||||
withLinks: withLinks.value,
|
||||
withAttachments: withAttachments.value,
|
||||
);
|
||||
searchResults.value = AsyncValue.data(results);
|
||||
searchState.value =
|
||||
results.isEmpty ? SearchState.noResults : SearchState.results;
|
||||
searchResultCount.value = results.length;
|
||||
} catch (error, stackTrace) {
|
||||
searchResults.value = AsyncValue.error(error, stackTrace);
|
||||
searchState.value = SearchState.error;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update search state based on messages state
|
||||
useEffect(() {
|
||||
messages.when(
|
||||
data: (messageList) {
|
||||
if (searchState.value == SearchState.searching) {
|
||||
searchState.value =
|
||||
messageList.isEmpty
|
||||
? SearchState.noResults
|
||||
: SearchState.results;
|
||||
searchResultCount.value = messageList.length;
|
||||
}
|
||||
},
|
||||
loading: () {
|
||||
if (searchController.text.trim().isNotEmpty) {
|
||||
searchState.value = SearchState.searching;
|
||||
}
|
||||
},
|
||||
error: (error, stack) {
|
||||
searchState.value = SearchState.error;
|
||||
},
|
||||
);
|
||||
return null;
|
||||
}, [messages]);
|
||||
// Search state is now managed locally in performSearch
|
||||
|
||||
useEffect(() {
|
||||
// Clear search when screen is disposed
|
||||
return () {
|
||||
debounceTimer.value?.cancel();
|
||||
messagesNotifier.clearSearch();
|
||||
// Note: Don't access ref here as widget may be disposed
|
||||
// Flashing messages will be cleared by the next screen or jump operation
|
||||
};
|
||||
@@ -228,7 +217,7 @@ class SearchMessagesScreen extends HookConsumerWidget {
|
||||
|
||||
// Search results section
|
||||
Expanded(
|
||||
child: messages.when(
|
||||
child: searchResults.value.when(
|
||||
data: (messageList) {
|
||||
switch (searchState.value) {
|
||||
case SearchState.idle:
|
||||
|
||||
Reference in New Issue
Block a user