Solian/lib/widgets/chat/chat_message_input.dart
2024-09-10 21:53:05 +08:00

487 lines
15 KiB
Dart

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
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';
import 'package:solian/models/packet.dart';
import 'package:solian/providers/attachment_uploader.dart';
import 'package:solian/providers/auth.dart';
import 'package:solian/providers/stickers.dart';
import 'package:solian/providers/websocket.dart';
import 'package:solian/widgets/account/account_avatar.dart';
import 'package:solian/widgets/attachments/attachment_editor.dart';
import 'package:solian/widgets/auto_cache_image.dart';
import 'package:solian/widgets/chat/chat_event.dart';
import 'package:badges/badges.dart' as badges;
import 'package:uuid/uuid.dart';
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,
});
}
class ChatMessageInput extends StatefulWidget {
final Event? edit;
final Event? reply;
final String? placeholder;
final Channel channel;
final String realm;
final Function(Event) onSent;
final Function()? onReset;
const ChatMessageInput({
super.key,
this.edit,
this.reply,
this.placeholder,
required this.channel,
required this.realm,
required this.onSent,
this.onReset,
});
@override
State<ChatMessageInput> createState() => _ChatMessageInputState();
}
class _ChatMessageInputState extends State<ChatMessageInput> {
final TextEditingController _textController = TextEditingController();
final FocusNode _focusNode = FocusNode();
final List<String> _attachments = List.empty(growable: true);
Event? _editTo;
Event? _replyTo;
void _editAttachments() {
showModalBottomSheet(
context: context,
builder: (context) => AttachmentEditorPopup(
pool: 'messaging',
initialAttachments: _attachments,
onAdd: (value) {
setState(() {
_attachments.add(value);
});
},
onRemove: (value) {
setState(() {
_attachments.remove(value);
});
},
),
);
}
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 {
_focusNode.requestFocus();
final AuthProvider auth = Get.find();
final prof = auth.userProfile.value!;
if (auth.isAuthorized.isFalse) return;
final AttachmentUploaderController uploader = Get.find();
if (uploader.queueOfUpload.any(
((x) => x.isUploading),
)) {
context.showErrorDialog('attachmentUploadInProgress'.tr);
return;
}
Response resp;
final mentionedUserNames = _findMentionedUsers(_textController.text);
final mentionedUserIds = List<int>.empty(growable: true);
var client = auth.configureClient('auth');
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>(),
);
}
}
client = auth.configureClient('messaging');
if (_textController.text.trim().isEmpty && _attachments.isEmpty) return;
const uuid = Uuid();
final payload = {
'uuid': uuid.v4(),
'type': _editTo == null ? 'messages.new' : 'messages.edit',
'body': {
'text': _textController.text.trim(),
'algorithm': 'plain',
'attachments': List.from(_attachments),
'related_users': [
if (_replyTo != null) _replyTo!.sender.accountId,
...mentionedUserIds,
],
if (_replyTo != null) 'quote_event': _replyTo!.id,
if (_editTo != null) 'related_event': _editTo!.id,
if (_editTo != null && _editTo!.body['quote_event'] != null)
'quote_event': _editTo!.body['quote_event'],
}
};
// The local mock data
final sender = ChannelMember(
id: 0,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
account: Account.fromJson(prof),
channelId: widget.channel.id,
accountId: prof['id'],
notify: 0,
);
final message = Event(
id: 0,
uuid: payload['uuid'] as String,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
body: payload['body'] as Map<String, dynamic>,
type: payload['type'] as String,
sender: sender,
channelId: widget.channel.id,
senderId: sender.id,
);
if (_editTo == null) {
message.isPending = true;
widget.onSent(message);
}
_resetInput();
if (_editTo != null) {
resp = await client.put(
'/channels/${widget.realm}/${widget.channel.alias}/messages/${_editTo!.id}',
payload,
);
} else {
resp = await client.post(
'/channels/${widget.realm}/${widget.channel.alias}/messages',
payload,
);
}
if (resp.statusCode != 200) {
context.showErrorDialog(resp.bodyString);
}
}
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;
});
}
}
void _resetInput() {
if (widget.onReset != null) widget.onReset!();
_editTo = null;
_replyTo = null;
_textController.clear();
_attachments.clear();
setState(() {});
}
void _syncWidget() {
if (widget.edit != null && widget.edit!.type.startsWith('messages')) {
final body = EventMessageBody.fromJson(widget.edit!.body);
_editTo = widget.edit!;
_textController.text = body.text;
_attachments.addAll(
widget.edit!.body['attachments']?.cast<int>() ?? List.empty());
}
if (widget.reply != null) {
_replyTo = widget.reply!;
}
setState(() {});
}
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') {
insertText = '${suggestion.content} ';
startText = replaceText.replaceFirstMapped(
RegExp(r':(?:([-\w]+)~)?([-\w]+)$'),
(Match m) => insertText,
);
}
if (suggestion.type == 'users') {
insertText = '${suggestion.content} ';
startText = replaceText.replaceFirstMapped(
RegExp(r'(?:\s|^)@([-\w]+)$'),
(Match m) => insertText,
);
}
if (insertText.isNotEmpty && startText.isNotEmpty) {
_textController.text = startText + afterText;
_textController.selection = TextSelection(
baseOffset: startText.length,
extentOffset: startText.length,
);
}
}
@override
void didUpdateWidget(covariant ChatMessageInput oldWidget) {
_syncWidget();
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
super.initState();
_textController.addListener(_pingEnterMessageStatus);
}
@override
void dispose() {
_textController.removeListener(_pingEnterMessageStatus);
_textController.dispose();
_typingNotifyTimer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final notifyBannerActions = [
TextButton(
onPressed: _resetInput,
child: Text('cancel'.tr),
)
];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_replyTo != null)
MaterialBanner(
leading: const FaIcon(FontAwesomeIcons.reply, size: 18),
dividerColor: Colors.transparent,
padding: const EdgeInsets.only(left: 20),
backgroundColor: Theme.of(context)
.colorScheme
.surfaceContainerHighest
.withOpacity(0.5),
content: ChatEvent(
item: _replyTo!,
isContentPreviewing: true,
),
actions: notifyBannerActions,
),
if (_editTo != null)
MaterialBanner(
leading: const Icon(Icons.edit),
dividerColor: Colors.transparent,
padding: const EdgeInsets.only(left: 20),
backgroundColor: Theme.of(context)
.colorScheme
.surfaceContainerHighest
.withOpacity(0.5),
content: ChatEvent(
item: _editTo!,
isContentPreviewing: true,
),
actions: notifyBannerActions,
),
SizedBox(
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: TypeAheadField<ChatMessageSuggestion>(
direction: VerticalDirection.up,
hideOnEmpty: true,
hideOnLoading: true,
controller: _textController,
focusNode: _focusNode,
hideOnSelect: false,
debounceDuration: const Duration(milliseconds: 500),
onSelected: (value) {
_insertSuggestion(value);
},
itemBuilder: (context, item) => _buildSuggestion(item),
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(),
);
},
suggestionsCallback: (search) async {
final searchText = _textController.text
.substring(0, _textController.selection.baseOffset);
final emojiMatch = RegExp(r':(?:([-\w]+)~)?([-\w]+)$')
.firstMatch(searchText);
if (emojiMatch != null) {
final StickerProvider stickers = Get.find();
final emoteSearch = emojiMatch[2]!;
return stickers.availableStickers
.where(
(x) => x.textWarpedPlaceholder
.toUpperCase()
.contains(emoteSearch.toUpperCase()),
)
.map(
(x) => ChatMessageSuggestion(
type: 'emotes',
leading: AutoCacheImage(
x.imageUrl,
width: 28,
height: 28,
),
display: x.name,
content: x.textWarpedPlaceholder,
),
)
.toList();
}
final userMatch =
RegExp(r'(?:\s|^)@([-\w]+)$').firstMatch(searchText);
if (userMatch != null) {
final userSearch = userMatch[1]!.toLowerCase();
final AuthProvider auth = Get.find();
final client = auth.configureClient('auth');
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();
}
return null;
},
),
),
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),
),
color: Colors.teal,
onPressed: () => _editAttachments(),
),
IconButton(
icon: const Icon(Icons.send),
color: Theme.of(context).colorScheme.primary,
onPressed: () => _sendMessage(),
)
],
).paddingOnly(left: 20, right: 16),
),
],
);
}
}