implemented in-chat search with text highlighting, added search navigation UI, and integrated scrollable list for message jumping
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
|
||||
|
||||
import '../../../api/marianumcloud/talk/chat/get_chat_response.dart';
|
||||
import '../../../api/marianumcloud/talk/room/get_room_response.dart';
|
||||
@@ -10,9 +13,11 @@ import '../../../state/app/modules/chat/bloc/chat_state.dart';
|
||||
import '../../../theming/app_theme.dart';
|
||||
import '../../../widget/clickable_app_bar.dart';
|
||||
import '../../../widget/user_avatar.dart';
|
||||
import 'data/chat_search_controller.dart';
|
||||
import 'details/chat_info.dart';
|
||||
import 'talk_navigator.dart';
|
||||
import 'widgets/chat_bubble.dart';
|
||||
import 'widgets/chat_search_app_bar.dart';
|
||||
import 'widgets/chat_textfield.dart';
|
||||
|
||||
class ChatView extends StatefulWidget {
|
||||
@@ -32,14 +37,139 @@ class ChatView extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _ChatViewState extends State<ChatView> {
|
||||
final ScrollController _listController = ScrollController();
|
||||
final ItemScrollController _itemScrollController = ItemScrollController();
|
||||
final TextEditingController _searchTextController = TextEditingController();
|
||||
final Map<int, int> _matchIndices = {};
|
||||
|
||||
bool _searchActive = false;
|
||||
String _searchQuery = '';
|
||||
List<ChatSearchMatch> _matches = const [];
|
||||
int _activeMatchIndex = 0;
|
||||
GetChatResponse? _matchesComputedFor;
|
||||
String? _matchesComputedQuery;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchTextController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant ChatView oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (widget.room.token != oldWidget.room.token && _searchActive) {
|
||||
_exitSearchMode();
|
||||
}
|
||||
}
|
||||
|
||||
void _refresh() {
|
||||
context.read<ChatBloc>().setToken(widget.room.token);
|
||||
}
|
||||
|
||||
void _enterSearchMode() {
|
||||
setState(() {
|
||||
_searchActive = true;
|
||||
_searchQuery = '';
|
||||
_matches = const [];
|
||||
_activeMatchIndex = 0;
|
||||
_matchesComputedFor = null;
|
||||
_matchesComputedQuery = null;
|
||||
_searchTextController.clear();
|
||||
});
|
||||
}
|
||||
|
||||
void _exitSearchMode() {
|
||||
setState(() {
|
||||
_searchActive = false;
|
||||
_searchQuery = '';
|
||||
_matches = const [];
|
||||
_activeMatchIndex = 0;
|
||||
_matchIndices.clear();
|
||||
_matchesComputedFor = null;
|
||||
_matchesComputedQuery = null;
|
||||
_searchTextController.clear();
|
||||
});
|
||||
}
|
||||
|
||||
void _onSearchChanged(String q) {
|
||||
final chatResponse = context.read<ChatBloc>().state.data?.chatResponse;
|
||||
setState(() {
|
||||
_searchQuery = q;
|
||||
_activeMatchIndex = 0;
|
||||
if (chatResponse != null) {
|
||||
_recomputeMatches(chatResponse);
|
||||
} else {
|
||||
_matches = const [];
|
||||
_matchesComputedFor = null;
|
||||
_matchesComputedQuery = null;
|
||||
}
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted && _matches.isNotEmpty) _scrollToActiveMatch();
|
||||
});
|
||||
}
|
||||
|
||||
void _recomputeMatches(GetChatResponse response) {
|
||||
_matches = ChatSearchController.findMatches(response, _searchQuery);
|
||||
_activeMatchIndex = _activeMatchIndex.clamp(
|
||||
0,
|
||||
math.max(0, _matches.length - 1),
|
||||
);
|
||||
_matchesComputedFor = response;
|
||||
_matchesComputedQuery = _searchQuery;
|
||||
}
|
||||
|
||||
void _goToPreviousMatch() {
|
||||
if (_matches.isEmpty) return;
|
||||
setState(() {
|
||||
_activeMatchIndex = (_activeMatchIndex + 1) % _matches.length;
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback(
|
||||
(_) => _scrollToActiveMatch(),
|
||||
);
|
||||
}
|
||||
|
||||
void _goToNextMatch() {
|
||||
if (_matches.isEmpty) return;
|
||||
setState(() {
|
||||
_activeMatchIndex =
|
||||
(_activeMatchIndex - 1 + _matches.length) % _matches.length;
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback(
|
||||
(_) => _scrollToActiveMatch(),
|
||||
);
|
||||
}
|
||||
|
||||
void _scrollToActiveMatch() {
|
||||
if (_matches.isEmpty) return;
|
||||
if (!_itemScrollController.isAttached) return;
|
||||
final id = _matches[_activeMatchIndex].messageId;
|
||||
final idx = _matchIndices[id];
|
||||
if (idx == null) return;
|
||||
_itemScrollController.scrollTo(
|
||||
index: idx,
|
||||
alignment: 0.4,
|
||||
duration: const Duration(milliseconds: 350),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildMessages(GetChatResponse response) {
|
||||
if (_searchActive &&
|
||||
(response != _matchesComputedFor ||
|
||||
_searchQuery != _matchesComputedQuery)) {
|
||||
_recomputeMatches(response);
|
||||
}
|
||||
|
||||
final matchIds = _matches.map((m) => m.messageId).toSet();
|
||||
final activeId = _matches.isNotEmpty
|
||||
? _matches[_activeMatchIndex].messageId
|
||||
: null;
|
||||
final highlightQuery =
|
||||
_searchActive && _searchQuery.trim().isNotEmpty ? _searchQuery : null;
|
||||
|
||||
final messages = <Widget>[];
|
||||
final chronologicalMatchIndex = <int, int>{};
|
||||
var lastDate = DateTime.now();
|
||||
for (final element in response.sortByTimestamp()) {
|
||||
final elementDate = DateTime.fromMillisecondsSinceEpoch(
|
||||
@@ -65,6 +195,15 @@ class _ChatViewState extends State<ChatView> {
|
||||
);
|
||||
}
|
||||
|
||||
final isMatch = matchIds.contains(element.id);
|
||||
final highlight = isMatch
|
||||
? (element.id == activeId
|
||||
? SearchHighlight.active
|
||||
: SearchHighlight.secondary)
|
||||
: SearchHighlight.none;
|
||||
|
||||
if (isMatch) chronologicalMatchIndex[element.id] = messages.length;
|
||||
|
||||
messages.add(
|
||||
ChatBubble(
|
||||
context: context,
|
||||
@@ -76,6 +215,8 @@ class _ChatViewState extends State<ChatView> {
|
||||
refetch: ({bool renew = false}) => _refresh(),
|
||||
isRead: element.id <= commonRead,
|
||||
selfId: widget.selfId,
|
||||
highlightQuery: highlightQuery,
|
||||
matchHighlight: highlight,
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -94,32 +235,60 @@ class _ChatViewState extends State<ChatView> {
|
||||
refetch: ({bool renew = false}) => _refresh(),
|
||||
),
|
||||
);
|
||||
chronologicalMatchIndex.updateAll((_, v) => v + 1);
|
||||
}
|
||||
|
||||
final total = messages.length;
|
||||
_matchIndices
|
||||
..clear()
|
||||
..addEntries(
|
||||
chronologicalMatchIndex.entries.map(
|
||||
(e) => MapEntry(e.key, (total - 1) - e.value),
|
||||
),
|
||||
);
|
||||
|
||||
return messages;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Scaffold(
|
||||
backgroundColor: const Color(0xffefeae2),
|
||||
appBar: ClickableAppBar(
|
||||
onTap: () => TalkNavigator.pushSplitView(context, ChatInfo(widget.room)),
|
||||
appBar: AppBar(
|
||||
title: Row(
|
||||
children: [
|
||||
widget.avatar,
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.room.displayName,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
appBar: _searchActive
|
||||
? ChatSearchAppBar(
|
||||
controller: _searchTextController,
|
||||
matchCount: _matches.length,
|
||||
activeIndex: _matches.isEmpty ? -1 : _activeMatchIndex,
|
||||
onChanged: _onSearchChanged,
|
||||
onClose: _exitSearchMode,
|
||||
onPrevious: _matches.isEmpty ? null : _goToPreviousMatch,
|
||||
onNext: _matches.isEmpty ? null : _goToNextMatch,
|
||||
)
|
||||
: ClickableAppBar(
|
||||
onTap: () =>
|
||||
TalkNavigator.pushSplitView(context, ChatInfo(widget.room)),
|
||||
appBar: AppBar(
|
||||
title: Row(
|
||||
children: [
|
||||
widget.avatar,
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.room.displayName,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.search),
|
||||
tooltip: 'In Chat suchen',
|
||||
onPressed: _enterSearchMode,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
body: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
@@ -137,11 +306,16 @@ class _ChatViewState extends State<ChatView> {
|
||||
isReady: (state) =>
|
||||
state.chatResponse != null &&
|
||||
state.currentToken == widget.room.token,
|
||||
child: (state, _) => ListView(
|
||||
reverse: true,
|
||||
controller: _listController,
|
||||
children: _buildMessages(state.chatResponse!).reversed.toList(),
|
||||
),
|
||||
child: (state, _) {
|
||||
final items =
|
||||
_buildMessages(state.chatResponse!).reversed.toList();
|
||||
return ScrollablePositionedList.builder(
|
||||
reverse: true,
|
||||
itemScrollController: _itemScrollController,
|
||||
itemCount: items.length,
|
||||
itemBuilder: (ctx, idx) => items[idx],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
ColoredBox(
|
||||
|
||||
Reference in New Issue
Block a user