Solian/lib/widgets/chat/chat_message_input.dart

488 lines
15 KiB
Dart
Raw Normal View History

2024-08-23 14:43:04 +00:00
import 'dart:async';
import 'dart:convert';
2024-05-26 05:39:21 +00:00
import 'package:flutter/material.dart';
2024-08-06 10:18:40 +00:00
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
2024-05-26 05:39:21 +00:00
import 'package:get/get.dart';
import 'package:solian/exts.dart';
import 'package:solian/models/account.dart';
import 'package:solian/models/channel.dart';
import 'package:solian/models/event.dart';
2024-08-23 14:43:04 +00:00
import 'package:solian/models/packet.dart';
import 'package:solian/providers/attachment_uploader.dart';
2024-05-26 05:39:21 +00:00
import 'package:solian/providers/auth.dart';
2024-08-06 10:18:40 +00:00
import 'package:solian/providers/stickers.dart';
2024-08-23 14:43:04 +00:00
import 'package:solian/providers/websocket.dart';
2024-08-06 10:34:46 +00:00
import 'package:solian/widgets/account/account_avatar.dart';
2024-07-30 12:49:01 +00:00
import 'package:solian/widgets/attachments/attachment_editor.dart';
import 'package:solian/widgets/auto_cache_image.dart';
2024-06-27 16:59:11 +00:00
import 'package:solian/widgets/chat/chat_event.dart';
import 'package:badges/badges.dart' as badges;
2024-05-26 05:39:21 +00:00
import 'package:uuid/uuid.dart';
2024-08-06 10:18:40 +00:00
class ChatMessageSuggestion {
final String type;
final Widget leading;
final String display;
final String content;
ChatMessageSuggestion({
required this.type,
required this.leading,
required this.display,
required this.content,
});
}
2024-05-26 05:39:21 +00:00
class ChatMessageInput extends StatefulWidget {
final Event? edit;
final Event? reply;
2024-05-30 14:02:54 +00:00
final String? placeholder;
2024-05-26 05:39:21 +00:00
final Channel channel;
final String realm;
final Function(Event) onSent;
final Function()? onReset;
2024-05-26 05:39:21 +00:00
const ChatMessageInput({
super.key,
this.edit,
this.reply,
2024-05-30 14:02:54 +00:00
this.placeholder,
2024-05-26 05:39:21 +00:00
required this.channel,
required this.realm,
required this.onSent,
this.onReset,
2024-05-26 05:39:21 +00:00
});
@override
State<ChatMessageInput> createState() => _ChatMessageInputState();
}
class _ChatMessageInputState extends State<ChatMessageInput> {
2024-08-06 10:34:46 +00:00
final TextEditingController _textController = TextEditingController();
final FocusNode _focusNode = FocusNode();
2024-05-26 05:39:21 +00:00
final List<String> _attachments = List.empty(growable: true);
2024-05-26 05:39:21 +00:00
Event? _editTo;
Event? _replyTo;
2024-08-01 06:01:12 +00:00
void _editAttachments() {
2024-05-26 13:03:25 +00:00
showModalBottomSheet(
context: context,
2024-07-30 12:49:01 +00:00
builder: (context) => AttachmentEditorPopup(
pool: 'messaging',
2024-08-01 14:13:08 +00:00
initialAttachments: _attachments,
onAdd: (value) {
setState(() {
_attachments.add(value);
});
},
onRemove: (value) {
setState(() {
_attachments.remove(value);
});
},
2024-05-26 13:03:25 +00:00
),
);
}
2024-08-01 06:01:12 +00:00
List<String> _findMentionedUsers(String text) {
RegExp regExp = RegExp(r'@[a-zA-Z0-9_]+');
Iterable<RegExpMatch> matches = regExp.allMatches(text);
List<String> mentionedUsers =
matches.map((match) => match.group(0)!.substring(1)).toList();
return mentionedUsers;
}
Future<void> _sendMessage() async {
2024-05-26 05:39:21 +00:00
_focusNode.requestFocus();
final AuthProvider auth = Get.find();
2024-07-24 17:18:47 +00:00
final prof = auth.userProfile.value!;
if (auth.isAuthorized.isFalse) return;
2024-05-26 05:39:21 +00:00
final AttachmentUploaderController uploader = Get.find();
if (uploader.queueOfUpload.any(
((x) => x.isUploading),
)) {
context.showErrorDialog('attachmentUploadInProgress'.tr);
return;
}
2024-08-01 06:01:12 +00:00
Response resp;
final mentionedUserNames = _findMentionedUsers(_textController.text);
final mentionedUserIds = List<int>.empty(growable: true);
2024-05-26 05:39:21 +00:00
2024-09-16 03:57:16 +00:00
var client = await auth.configureClient('auth');
2024-08-01 06:01:12 +00:00
if (mentionedUserNames.isNotEmpty) {
resp = await client.get('/users?name=${mentionedUserNames.join(',')}');
if (resp.statusCode != 200) {
context.showErrorDialog(resp.bodyString);
return;
} else {
mentionedUserIds.addAll(
resp.body.map((x) => Account.fromJson(x).id).toList().cast<int>(),
);
}
}
2024-09-16 03:57:16 +00:00
client = await auth.configureClient('messaging');
2024-06-27 16:59:11 +00:00
if (_textController.text.trim().isEmpty && _attachments.isEmpty) return;
2024-06-27 20:34:35 +00:00
const uuid = Uuid();
2024-05-26 05:39:21 +00:00
final payload = {
2024-06-27 20:34:35 +00:00
'uuid': uuid.v4(),
2024-06-27 16:59:11 +00:00
'type': _editTo == null ? 'messages.new' : 'messages.edit',
'body': {
2024-08-07 10:31:26 +00:00
'text': _textController.text.trim(),
2024-06-27 16:59:11 +00:00
'algorithm': 'plain',
'attachments': List.from(_attachments),
'related_users': [
if (_replyTo != null) _replyTo!.sender.accountId,
2024-08-01 06:01:12 +00:00
...mentionedUserIds,
2024-06-27 16:59:11 +00:00
],
if (_replyTo != null) 'quote_event': _replyTo!.id,
if (_editTo != null) 'related_event': _editTo!.id,
2024-08-01 06:01:12 +00:00
if (_editTo != null && _editTo!.body['quote_event'] != null)
'quote_event': _editTo!.body['quote_event'],
2024-06-27 16:59:11 +00:00
}
2024-05-26 05:39:21 +00:00
};
2024-06-27 16:59:11 +00:00
// The local mock data
final sender = ChannelMember(
2024-05-26 05:39:21 +00:00
id: 0,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
2024-07-24 17:18:47 +00:00
account: Account.fromJson(prof),
2024-05-26 05:39:21 +00:00
channelId: widget.channel.id,
2024-07-24 17:18:47 +00:00
accountId: prof['id'],
2024-05-26 05:39:21 +00:00
notify: 0,
);
final message = Event(
2024-05-26 05:39:21 +00:00
id: 0,
uuid: payload['uuid'] as String,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
2024-06-27 16:59:11 +00:00
body: payload['body'] as Map<String, dynamic>,
2024-05-26 05:39:21 +00:00
type: payload['type'] as String,
sender: sender,
channelId: widget.channel.id,
senderId: sender.id,
);
2024-06-04 15:29:05 +00:00
2024-06-08 13:35:50 +00:00
if (_editTo == null) {
2024-06-27 16:59:11 +00:00
message.isPending = true;
2024-06-08 13:35:50 +00:00
widget.onSent(message);
}
2024-05-26 05:39:21 +00:00
2024-08-06 10:18:40 +00:00
_resetInput();
2024-05-26 05:39:21 +00:00
if (_editTo != null) {
2024-05-26 05:39:21 +00:00
resp = await client.put(
'/channels/${widget.realm}/${widget.channel.alias}/messages/${_editTo!.id}',
2024-05-26 05:39:21 +00:00
payload,
);
} else {
resp = await client.post(
'/channels/${widget.realm}/${widget.channel.alias}/messages',
2024-05-26 05:39:21 +00:00
payload,
);
}
if (resp.statusCode != 200) {
context.showErrorDialog(resp.bodyString);
}
}
2024-08-23 14:43:04 +00:00
Timer? _typingNotifyTimer;
bool _typingStatus = false;
Future<void> _sendTypingStatus() async {
final WebSocketProvider ws = Get.find();
ws.websocket?.sink.add(jsonEncode(
NetworkPackage(
method: 'status.typing',
endpoint: 'messaging',
payload: {
'channel_id': widget.channel.id,
},
).toJson(),
));
}
void _pingEnterMessageStatus() {
if (!_typingStatus) {
_sendTypingStatus();
_typingStatus = true;
}
if (_typingNotifyTimer == null || !_typingNotifyTimer!.isActive) {
_typingNotifyTimer?.cancel();
_typingNotifyTimer = Timer(const Duration(milliseconds: 1850), () {
_typingStatus = false;
});
}
}
2024-08-06 10:18:40 +00:00
void _resetInput() {
if (widget.onReset != null) widget.onReset!();
_editTo = null;
_replyTo = null;
2024-05-26 05:39:21 +00:00
_textController.clear();
2024-06-08 13:35:50 +00:00
_attachments.clear();
setState(() {});
2024-05-26 05:39:21 +00:00
}
2024-08-06 10:18:40 +00:00
void _syncWidget() {
2024-06-27 16:59:11 +00:00
if (widget.edit != null && widget.edit!.type.startsWith('messages')) {
final body = EventMessageBody.fromJson(widget.edit!.body);
_editTo = widget.edit!;
2024-06-27 16:59:11 +00:00
_textController.text = body.text;
2024-08-06 12:00:13 +00:00
_attachments.addAll(
widget.edit!.body['attachments']?.cast<String>() ?? List.empty(),
);
}
if (widget.reply != null) {
_replyTo = widget.reply!;
}
setState(() {});
}
2024-08-06 10:18:40 +00:00
Widget _buildSuggestion(ChatMessageSuggestion suggestion) {
return ListTile(
leading: suggestion.leading,
title: Text(suggestion.display),
subtitle: Text(suggestion.content),
);
}
void _insertSuggestion(ChatMessageSuggestion suggestion) {
final replaceText =
_textController.text.substring(0, _textController.selection.baseOffset);
var startText = '';
final afterText = replaceText == _textController.text
? ''
: _textController.text
.substring(_textController.selection.baseOffset + 1);
var insertText = '';
if (suggestion.type == 'emotes') {
2024-08-21 07:45:55 +00:00
insertText = '${suggestion.content} ';
2024-08-06 10:18:40 +00:00
startText = replaceText.replaceFirstMapped(
2024-08-06 17:47:53 +00:00
RegExp(r':(?:([-\w]+)~)?([-\w]+)$'),
2024-08-06 10:18:40 +00:00
(Match m) => insertText,
);
}
2024-08-06 10:34:46 +00:00
if (suggestion.type == 'users') {
2024-08-21 07:45:55 +00:00
insertText = '${suggestion.content} ';
2024-08-06 10:34:46 +00:00
startText = replaceText.replaceFirstMapped(
2024-08-06 17:47:53 +00:00
RegExp(r'(?:\s|^)@([-\w]+)$'),
2024-08-06 10:34:46 +00:00
(Match m) => insertText,
);
}
2024-08-06 10:18:40 +00:00
if (insertText.isNotEmpty && startText.isNotEmpty) {
_textController.text = startText + afterText;
_textController.selection = TextSelection(
baseOffset: startText.length,
extentOffset: startText.length,
);
}
}
@override
void didUpdateWidget(covariant ChatMessageInput oldWidget) {
2024-08-06 10:18:40 +00:00
_syncWidget();
super.didUpdateWidget(oldWidget);
}
2024-08-23 14:43:04 +00:00
@override
void initState() {
super.initState();
_textController.addListener(_pingEnterMessageStatus);
}
@override
void dispose() {
_textController.removeListener(_pingEnterMessageStatus);
_textController.dispose();
_typingNotifyTimer?.cancel();
super.dispose();
}
2024-05-26 05:39:21 +00:00
@override
Widget build(BuildContext context) {
final notifyBannerActions = [
TextButton(
2024-08-06 10:18:40 +00:00
onPressed: _resetInput,
child: Text('cancel'.tr),
)
];
2024-05-26 05:39:21 +00:00
2024-06-08 13:35:50 +00:00
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_replyTo != null)
MaterialBanner(
leading: const FaIcon(FontAwesomeIcons.reply, size: 18),
dividerColor: Colors.transparent,
2024-06-08 16:09:01 +00:00
padding: const EdgeInsets.only(left: 20),
backgroundColor: Theme.of(context)
.colorScheme
.surfaceContainerHighest
.withOpacity(0.5),
2024-06-27 16:59:11 +00:00
content: ChatEvent(
2024-06-08 13:35:50 +00:00
item: _replyTo!,
isContentPreviewing: true,
2024-06-05 15:55:21 +00:00
),
2024-06-08 13:35:50 +00:00
actions: notifyBannerActions,
),
if (_editTo != null)
MaterialBanner(
leading: const Icon(Icons.edit),
dividerColor: Colors.transparent,
2024-06-08 16:09:01 +00:00
padding: const EdgeInsets.only(left: 20),
backgroundColor: Theme.of(context)
.colorScheme
.surfaceContainerHighest
.withOpacity(0.5),
2024-06-27 16:59:11 +00:00
content: ChatEvent(
2024-06-08 13:35:50 +00:00
item: _editTo!,
isContentPreviewing: true,
2024-06-05 15:55:21 +00:00
),
2024-06-08 13:35:50 +00:00
actions: notifyBannerActions,
),
SizedBox(
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
2024-08-06 10:18:40 +00:00
child: TypeAheadField<ChatMessageSuggestion>(
direction: VerticalDirection.up,
hideOnEmpty: true,
hideOnLoading: true,
2024-06-08 13:35:50 +00:00
controller: _textController,
focusNode: _focusNode,
2024-08-06 10:18:40 +00:00
hideOnSelect: false,
2024-08-06 10:34:46 +00:00
debounceDuration: const Duration(milliseconds: 500),
2024-08-06 10:18:40 +00:00
onSelected: (value) {
_insertSuggestion(value);
},
2024-08-06 10:34:46 +00:00
itemBuilder: (context, item) => _buildSuggestion(item),
2024-08-06 10:18:40 +00:00
builder: (context, controller, focusNode) {
return TextField(
controller: _textController,
focusNode: _focusNode,
maxLines: null,
autocorrect: true,
keyboardType: TextInputType.text,
decoration: InputDecoration.collapsed(
hintText: widget.placeholder ??
'messageInputPlaceholder'.trParams({
'channel': '#${widget.channel.alias}',
}),
),
onSubmitted: (_) => _sendMessage(),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
);
},
2024-08-06 10:34:46 +00:00
suggestionsCallback: (search) async {
2024-08-06 10:18:40 +00:00
final searchText = _textController.text
.substring(0, _textController.selection.baseOffset);
2024-08-06 17:47:53 +00:00
final emojiMatch = RegExp(r':(?:([-\w]+)~)?([-\w]+)$')
.firstMatch(searchText);
2024-08-06 10:18:40 +00:00
if (emojiMatch != null) {
final StickerProvider stickers = Get.find();
final emoteSearch = emojiMatch[2]!;
return stickers.availableStickers
2024-08-06 17:47:53 +00:00
.where(
(x) => x.textWarpedPlaceholder
.toUpperCase()
.contains(emoteSearch.toUpperCase()),
)
2024-08-06 10:18:40 +00:00
.map(
(x) => ChatMessageSuggestion(
type: 'emotes',
leading: AutoCacheImage(
x.imageUrl,
width: 28,
height: 28,
),
2024-08-06 10:18:40 +00:00
display: x.name,
content: x.textWarpedPlaceholder,
),
)
.toList();
}
2024-08-06 10:34:46 +00:00
2024-08-06 17:47:53 +00:00
final userMatch =
RegExp(r'(?:\s|^)@([-\w]+)$').firstMatch(searchText);
2024-08-06 10:34:46 +00:00
if (userMatch != null) {
final userSearch = userMatch[1]!.toLowerCase();
final AuthProvider auth = Get.find();
2024-09-16 03:57:16 +00:00
final client = await auth.configureClient('auth');
2024-08-06 10:34:46 +00:00
final resp = await client.get(
'/users/search?probe=$userSearch',
);
final List<Account> result = resp.body
.map((x) => Account.fromJson(x))
.toList()
.cast<Account>();
return result
.map(
(x) => ChatMessageSuggestion(
type: 'users',
leading: AccountAvatar(content: x.avatar),
display: x.nick,
content: '@${x.name}',
),
)
.toList();
}
2024-08-06 10:18:40 +00:00
return null;
},
2024-06-05 15:55:21 +00:00
),
2024-06-08 13:35:50 +00:00
),
IconButton(
icon: badges.Badge(
badgeContent: Text(
_attachments.length.toString(),
style: const TextStyle(color: Colors.white),
),
showBadge: _attachments.isNotEmpty,
position: badges.BadgePosition.topEnd(
top: -12,
end: -8,
),
child: const Icon(Icons.file_present_rounded),
),
2024-06-08 13:35:50 +00:00
color: Colors.teal,
2024-08-01 06:01:12 +00:00
onPressed: () => _editAttachments(),
2024-06-08 13:35:50 +00:00
),
IconButton(
icon: const Icon(Icons.send),
color: Theme.of(context).colorScheme.primary,
2024-08-01 06:01:12 +00:00
onPressed: () => _sendMessage(),
2024-06-08 13:35:50 +00:00
)
],
).paddingOnly(left: 20, right: 16),
),
],
2024-05-26 05:39:21 +00:00
);
}
}