Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2025-07-23 06:31:13 -04:00
Code Issues Projects Releases Packages Wiki Activity

new chat widget

Browse source
This commit is contained in:
Christien Rioux 2025-05-17 18:02:17 -04:00
parent 063eeb8d12
commit 1a9cca0667
44 changed files with 1904 additions and 981 deletions
Download patch file Download diff file Expand all files Collapse all files

333
lib/chat/views/chat_component_widget.dart
View file

@ -1,11 +1,13 @@
import 'dart:async';
import 'dart:convert';
import 'dart:math';
import 'package:async_tools/async_tools.dart';
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:fast_immutable_collections/fast_immutable_collections.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_core/flutter_chat_core.dart' as core;
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:veilid_support/veilid_support.dart';
@ -16,11 +18,15 @@ import '../../conversation/conversation.dart';
import '../../notifications/notifications.dart';
import '../../theme/theme.dart';
import '../chat.dart';
import 'chat_builders/chat_builders.dart';
const onEndReachedThreshold = 0.75;
const _kScrollTag = 'kScrollTag';
const kSeqId = 'seqId';
const maxMessageLength = 2048;
class ChatComponentWidget extends StatelessWidget {
const ChatComponentWidget({
class ChatComponentWidget extends StatefulWidget {
const ChatComponentWidget._({
required super.key,
required TypedKey localConversationRecordKey,
required void Function() onCancel,
@ -29,10 +35,14 @@ class ChatComponentWidget extends StatelessWidget {
_onCancel = onCancel,
_onClose = onClose;
/////////////////////////////////////////////////////////////////////
@override
Widget build(BuildContext context) {
// Create a single-contact chat and its associated state
static Widget singleContact({
required BuildContext context,
required TypedKey localConversationRecordKey,
required void Function() onCancel,
required void Function() onClose,
Key? key,
}) {
// Get the account info
final accountInfo = context.watch<AccountInfoCubit>().state;
@ -45,19 +55,19 @@ class ChatComponentWidget extends StatelessWidget {
// Get the active conversation cubit
final activeConversationCubit = context
.select<ActiveConversationsBlocMapCubit, ActiveConversationCubit?>(
(x) => x.tryOperateSync(_localConversationRecordKey,
(x) => x.tryOperateSync(localConversationRecordKey,
closure: (cubit) => cubit));
if (activeConversationCubit == null) {
return waitingPage(onCancel: _onCancel);
return waitingPage(onCancel: onCancel);
}
// Get the messages cubit
final messagesCubit = context.select<ActiveSingleContactChatBlocMapCubit,
SingleContactMessagesCubit?>(
(x) => x.tryOperateSync(_localConversationRecordKey,
(x) => x.tryOperateSync(localConversationRecordKey,
closure: (cubit) => cubit));
if (messagesCubit == null) {
return waitingPage(onCancel: _onCancel);
return waitingPage(onCancel: onCancel);
}
// Make chat component state
@ -70,26 +80,65 @@ class ChatComponentWidget extends StatelessWidget {
activeConversationCubit: activeConversationCubit,
messagesCubit: messagesCubit,
),
child: Builder(builder: _buildChatComponent));
child: ChatComponentWidget._(
key: ValueKey(localConversationRecordKey),
localConversationRecordKey: localConversationRecordKey,
onCancel: onCancel,
onClose: onClose));
}
/////////////////////////////////////////////////////////////////////
@override
State<ChatComponentWidget> createState() => _ChatComponentWidgetState();
Widget _buildChatComponent(BuildContext context) {
////////////////////////////////////////////////////////////////////////////
final TypedKey _localConversationRecordKey;
final void Function() _onCancel;
final void Function() _onClose;
}
class _ChatComponentWidgetState extends State<ChatComponentWidget> {
////////////////////////////////////////////////////////////////////
@override
void initState() {
_chatController = core.InMemoryChatController();
_textEditingController = TextEditingController();
_scrollController = ScrollController();
_chatStateProcessor = SingleStateProcessor<ChatComponentState>();
final _chatComponentCubit = context.read<ChatComponentCubit>();
_chatStateProcessor.follow(_chatComponentCubit.stream,
_chatComponentCubit.state, _updateChatState);
super.initState();
}
@override
void dispose() {
unawaited(_chatStateProcessor.close());
_chatController.dispose();
_scrollController.dispose();
_textEditingController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scaleScheme = theme.extension<ScaleScheme>()!;
final scaleConfig = theme.extension<ScaleConfig>()!;
final scale = scaleScheme.scale(ScaleKind.primary);
final scaleTheme = theme.extension<ScaleTheme>()!;
final scale = scaleTheme.scheme.scale(ScaleKind.primary);
final textTheme = theme.textTheme;
final chatTheme = makeChatTheme(scaleScheme, scaleConfig, textTheme);
final errorChatTheme = (ChatThemeEditor(chatTheme)
..inputTextColor = scaleScheme.errorScale.primary
..sendButtonIcon = Image.asset(
'assets/icon-send.png',
color: scaleScheme.errorScale.primary,
package: 'flutter_chat_ui',
))
.commit();
final scaleChatTheme = scaleTheme.chatTheme();
// final errorChatTheme = chatTheme.copyWith(color:)
// ..inputTextColor = scaleScheme.errorScale.primary
// ..sendButtonIcon = Image.asset(
// 'assets/icon-send.png',
// color: scaleScheme.errorScale.primary,
// package: 'flutter_chat_ui',
// ))
// .commit();
// Get the enclosing chat component cubit that contains our state
// (created by ChatComponentWidget.builder())
@ -110,9 +159,8 @@ class ChatComponentWidget extends StatelessWidget {
final title = chatComponentState.title;
if (chatComponentCubit.scrollOffset != 0) {
chatComponentState.scrollController.position.correctPixels(
chatComponentState.scrollController.position.pixels +
chatComponentCubit.scrollOffset);
_scrollController.position.correctPixels(
_scrollController.position.pixels + chatComponentCubit.scrollOffset);
chatComponentCubit.scrollOffset = 0;
}
@ -138,7 +186,7 @@ class ChatComponentWidget extends StatelessWidget {
IconButton(
iconSize: 24,
icon: Icon(Icons.close, color: scale.borderText),
onPressed: _onClose)
onPressed: widget._onClose)
.paddingLTRB(0, 0, 8, 0)
]),
),
@ -164,7 +212,7 @@ class ChatComponentWidget extends StatelessWidget {
chatComponentCubit.scrollOffset = scrollOffset;
//
singleFuture(chatComponentState.chatKey, () async {
singleFuture((chatComponentCubit, _kScrollTag), () async {
await _handlePageForward(
chatComponentCubit, messageWindow, notification);
});
@ -182,7 +230,7 @@ class ChatComponentWidget extends StatelessWidget {
chatComponentCubit.scrollOffset = scrollOffset;
//
singleFuture(chatComponentState.chatKey, () async {
singleFuture((chatComponentCubit, _kScrollTag), () async {
await _handlePageBackward(
chatComponentCubit, messageWindow, notification);
});
@ -190,82 +238,181 @@ class ChatComponentWidget extends StatelessWidget {
return false;
},
child: ValueListenableBuilder(
valueListenable: chatComponentState.textEditingController,
valueListenable: _textEditingController,
builder: (context, textEditingValue, __) {
final messageIsValid =
utf8.encode(textEditingValue.text).lengthInBytes <
2048;
_messageIsValid(textEditingValue.text);
var sendIconColor = scaleTheme.config.preferBorders
? scale.border
: scale.borderText;
if (!messageIsValid ||
_textEditingController.text.isEmpty) {
sendIconColor = sendIconColor.withAlpha(128);
}
return Chat(
key: chatComponentState.chatKey,
theme: messageIsValid ? chatTheme : errorChatTheme,
messages: messageWindow.window.toList(),
scrollToBottomOnSend: isFirstPage,
scrollController: chatComponentState.scrollController,
inputOptions: InputOptions(
inputClearMode: messageIsValid
? InputClearMode.always
: InputClearMode.never,
textEditingController:
chatComponentState.textEditingController),
// isLastPage: isLastPage,
// onEndReached: () async {
// await _handlePageBackward(
// chatComponentCubit, messageWindow);
// },
//onEndReachedThreshold: onEndReachedThreshold,
//onAttachmentPressed: _handleAttachmentPressed,
//onMessageTap: _handleMessageTap,
//onPreviewDataFetched: _handlePreviewDataFetched,
usePreviewData: false, //
onSendPressed: (pt) {
try {
if (!messageIsValid) {
context.read<NotificationsCubit>().error(
text: translate('chat.message_too_long'));
return;
}
_handleSendPressed(chatComponentCubit, pt);
} on FormatException {
context.read<NotificationsCubit>().error(
text: translate('chat.message_too_long'));
}
},
listBottomWidget: messageIsValid
? null
: Text(translate('chat.message_too_long'),
style: TextStyle(
color:
scaleScheme.errorScale.primary))
.toCenter(),
//showUserAvatars: false,
//showUserNames: true,
user: localUser,
emptyState: const EmptyChatWidget());
currentUserId: localUser.id,
resolveUser: (id) async {
if (id == localUser.id) {
return localUser;
}
return chatComponentState.remoteUsers.get(id);
},
chatController: _chatController,
onMessageSend: (text) =>
_handleSendPressed(chatComponentCubit, text),
theme: scaleChatTheme.chatTheme,
builders: core.Builders(
// Chat list builder
chatAnimatedListBuilder: (context, itemBuilder) =>
ChatAnimatedListReversed(
scrollController: _scrollController,
itemBuilder: itemBuilder),
// Text message builder
textMessageBuilder: (context, message, index) =>
VcTextMessageWidget(
message: message,
index: index,
// showTime: true,
// showStatus: true,
),
// Composer builder
composerBuilder: (ctx) => VcComposerWidget(
autofocus: true,
textInputAction: isAnyMobile
? TextInputAction.newline
: TextInputAction.send,
shiftEnterAction: isAnyMobile
? ShiftEnterAction.send
: ShiftEnterAction.newline,
textEditingController: _textEditingController,
maxLength: maxMessageLength,
keyboardType: TextInputType.multiline,
sendIconColor: sendIconColor,
topWidget: messageIsValid
? null
: Text(translate('chat.message_too_long'),
style: TextStyle(
color: scaleTheme
.scheme.errorScale.primary))
.toCenter(),
),
),
timeFormat: core.DateFormat.jm(),
);
}))).expanded(),
],
);
}
void _handleSendPressed(
ChatComponentCubit chatComponentCubit, types.PartialText message) {
final text = message.text;
/////////////////////////////////////////////////////////////////////
bool _messageIsValid(String text) =>
utf8.encode(text).lengthInBytes < maxMessageLength;
Future<void> _updateChatState(ChatComponentState chatComponentState) async {
// Update message window state
final data = chatComponentState.messageWindow.asData;
if (data == null) {
await _chatController.setMessages([]);
return;
}
final windowState = data.value;
await _chatController.setMessages(windowState.window.toList());
// final newMessagesSet = windowState.window.toSet();
// final newMessagesById =
// Map.fromEntries(newMessagesSet.map((m) => MapEntry(m.id, m)));
// final newMessagesBySeqId = Map.fromEntries(
// newMessagesSet.map((m) => MapEntry(m.metadata![kSeqId], m)));
// final oldMessagesSet = _chatController.messages.toSet();
// if (oldMessagesSet.isEmpty) {
// await _chatController.setMessages(windowState.window.toList());
// return;
// }
// // See how many messages differ by equality (not identity)
// // If there are more than `replaceAllMessagesThreshold` differences
// // just replace the whole list of messages
// final diffs = newMessagesSet.diffAndIntersect(oldMessagesSet,
// diffThisMinusOther: true, diffOtherMinusThis: true);
// final addedMessages = diffs.diffThisMinusOther!;
// final removedMessages = diffs.diffOtherMinusThis!;
// final replaceAllPaginationLimit = windowState.windowCount / 3;
// if ((addedMessages.length >= replaceAllPaginationLimit) ||
// removedMessages.length >= replaceAllPaginationLimit) {
// await _chatController.setMessages(windowState.window.toList());
// return;
// }
// // Remove messages that are gone, and replace the ones that have changed
// for (final m in removedMessages) {
// final newm = newMessagesById[m.id];
// if (newm != null) {
// await _chatController.updateMessage(m, newm);
// } else {
// final newm = newMessagesBySeqId[m.metadata![kSeqId]];
// if (newm != null) {
// await _chatController.updateMessage(m, newm);
// addedMessages.remove(newm);
// } else {
// await _chatController.removeMessage(m);
// }
// }
// }
// // // Check for append
// if (addedMessages.isNotEmpty) {
// if (_chatController.messages.isNotEmpty &&
// (addedMessages.first.metadata![kSeqId] as int) >
// (_chatController.messages.reversed.last.metadata![kSeqId]
// as int)) {
// await _chatController.insertAllMessages(addedMessages.reversedView,
// index: 0);
// }
// // Check for prepend
// else if (_chatController.messages.isNotEmpty &&
// (addedMessages.last.metadata![kSeqId] as int) <
// (_chatController.messages.reversed.first.metadata![kSeqId]
// as int)) {
// await _chatController.insertAllMessages(
// addedMessages.reversedView,
// );
// }
// // Otherwise just replace
// // xxx could use a better algorithm here to merge added messages in
// else {
// await _chatController.setMessages(windowState.window.toList());
// }
// }
}
void _handleSendPressed(ChatComponentCubit chatComponentCubit, String text) {
if (text.startsWith('/')) {
chatComponentCubit.runCommand(text);
return;
}
chatComponentCubit.sendMessage(message);
if (!_messageIsValid(text)) {
context
.read<NotificationsCubit>()
.error(text: translate('chat.message_too_long'));
return;
}
chatComponentCubit.sendMessage(text: text);
}
// void _handleAttachmentPressed() async {
// //
// }
Future<void> _handlePageForward(
ChatComponentCubit chatComponentCubit,
WindowState<types.Message> messageWindow,
WindowState<core.Message> messageWindow,
ScrollNotification notification) async {
debugPrint(
'_handlePageForward: messagesState.length=${messageWindow.length} '
@ -299,7 +446,7 @@ class ChatComponentWidget extends StatelessWidget {
Future<void> _handlePageBackward(
ChatComponentCubit chatComponentCubit,
WindowState<types.Message> messageWindow,
WindowState<core.Message> messageWindow,
ScrollNotification notification,
) async {
debugPrint(
@ -335,8 +482,8 @@ class ChatComponentWidget extends StatelessWidget {
//chatComponentCubit.scrollOffset = 0;
}
////////////////////////////////////////////////////////////////////////////
final TypedKey _localConversationRecordKey;
final void Function() _onCancel;
final void Function() _onClose;
late final core.ChatController _chatController;
late final TextEditingController _textEditingController;
late final ScrollController _scrollController;
late final SingleStateProcessor<ChatComponentState> _chatStateProcessor;
}