chore: decouple selected message list from chat input row rendering (#2300)

pull/1817/head
ggurdin 7 months ago committed by GitHub
parent b4c1e1aa54
commit 642dfaf4de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -13,9 +13,12 @@ import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/pages/chat/input_bar.dart'; import 'package:fluffychat/pages/chat/input_bar.dart';
import 'package:fluffychat/pangea/choreographer/widgets/send_button.dart'; import 'package:fluffychat/pangea/choreographer/widgets/send_button.dart';
import 'package:fluffychat/pangea/choreographer/widgets/start_igc_button.dart'; import 'package:fluffychat/pangea/choreographer/widgets/start_igc_button.dart';
import 'package:fluffychat/pangea/common/utils/error_handler.dart';
import 'package:fluffychat/pangea/learning_settings/constants/language_constants.dart'; import 'package:fluffychat/pangea/learning_settings/constants/language_constants.dart';
import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
import 'package:fluffychat/pangea/toolbar/reading_assistance_input_row/reading_assistance_input_bar.dart'; import 'package:fluffychat/pangea/toolbar/reading_assistance_input_row/reading_assistance_input_bar.dart';
import 'package:fluffychat/pangea/toolbar/widgets/message_selection_overlay.dart'; import 'package:fluffychat/pangea/toolbar/widgets/message_selection_overlay.dart';
import 'package:fluffychat/utils/error_reporter.dart';
import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/utils/platform_infos.dart';
class PangeaChatInputRow extends StatefulWidget { class PangeaChatInputRow extends StatefulWidget {
@ -52,6 +55,73 @@ class PangeaChatInputRowState extends State<PangeaChatInputRow> {
ChatController get _controller => widget.controller; ChatController get _controller => widget.controller;
LanguageModel? get activel1 =>
_controller.pangeaController.languageController.activeL1Model();
LanguageModel? get activel2 =>
_controller.pangeaController.languageController.activeL2Model();
String hintText() {
if (_controller.choreographer.itController.willOpen) {
return L10n.of(context).buildTranslation;
}
return activel1 != null &&
activel2 != null &&
activel1!.langCode != LanguageKeys.unknownLanguage &&
activel2!.langCode != LanguageKeys.unknownLanguage
? L10n.of(context).writeAMessageLangCodes(
activel1!.langCodeShort.toUpperCase(),
activel2!.langCodeShort.toUpperCase(),
)
: L10n.of(context).writeAMessage;
}
void _deleteErrorEventsAction() async {
try {
if (widget.overlayController == null ||
widget.overlayController!.event.status != EventStatus.error) {
throw Exception(
'Tried to delete failed to send events but one event is not failed to sent',
);
}
await widget.overlayController!.event.cancelSend();
_controller.clearSelectedEvents();
} catch (e, s) {
ErrorReporter(
context,
'Error while delete error events action',
).onErrorCallback(e, s);
}
}
void _sendAgainAction() {
if (widget.overlayController == null) {
ErrorHandler.logError(
e: "No selected events in send again action",
s: StackTrace.current,
data: {"roomId": _controller.room.id},
);
_controller.clearSelectedEvents();
return;
}
final event = widget.overlayController!.event;
if (event.status.isError) {
event.sendAgain();
}
final allEditEvents = event
.aggregatedEvents(
_controller.timeline!,
RelationshipTypes.edit,
)
.where((e) => e.status.isError);
for (final e in allEditEvents) {
e.sendAgain();
}
_controller.clearSelectedEvents();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = Theme.of(context); final theme = Theme.of(context);
@ -61,263 +131,250 @@ class PangeaChatInputRowState extends State<PangeaChatInputRow> {
} }
const height = 48.0; const height = 48.0;
final activel1 =
_controller.pangeaController.languageController.activeL1Model();
final activel2 =
_controller.pangeaController.languageController.activeL2Model();
String hintText() {
if (_controller.choreographer.itController.willOpen) {
return L10n.of(context).buildTranslation;
}
return activel1 != null &&
activel2 != null &&
activel1.langCode != LanguageKeys.unknownLanguage &&
activel2.langCode != LanguageKeys.unknownLanguage
? L10n.of(context).writeAMessageLangCodes(
activel1.langCodeShort.toUpperCase(),
activel2.langCodeShort.toUpperCase(),
)
: L10n.of(context).writeAMessage;
}
return Column( return Column(
children: [ children: [
// if (!controller.selectMode) WritingAssistanceInputRow(controller), // if (!controller.selectMode) WritingAssistanceInputRow(controller),
CompositedTransformTarget( CompositedTransformTarget(
link: _controller.choreographer.inputLayerLinkAndKey.link, link: _controller.choreographer.inputLayerLinkAndKey.link,
child: Row( child: Container(
key: widget.overlayController != null padding:
? null EdgeInsets.all(widget.overlayController != null ? 8.0 : 0.0),
: _controller.choreographer.inputLayerLinkAndKey.key, decoration: BoxDecoration(
crossAxisAlignment: CrossAxisAlignment.center, color: widget.overlayController != null
mainAxisAlignment: MainAxisAlignment.spaceBetween, ? Theme.of(context).cardColor
children: widget.overlayController != null : null,
? <Widget>[ borderRadius: const BorderRadius.all(
if (_controller.selectedEvents Radius.circular(8.0),
.every((event) => event.status == EventStatus.error)) ),
SizedBox( ),
height: height, child: Row(
child: TextButton( key: widget.overlayController != null
style: TextButton.styleFrom( ? null
foregroundColor: theme.colorScheme.error, : _controller.choreographer.inputLayerLinkAndKey.key,
), crossAxisAlignment: CrossAxisAlignment.center,
onPressed: _controller.deleteErrorEventsAction, mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Row( children: widget.overlayController != null
children: <Widget>[ ? <Widget>[
const Icon(Icons.delete), if (widget.overlayController!.event.status ==
Text(L10n.of(context).delete), EventStatus.error)
], SizedBox(
height: height,
child: TextButton(
style: TextButton.styleFrom(
foregroundColor: theme.colorScheme.error,
),
onPressed: _deleteErrorEventsAction,
child: Row(
children: <Widget>[
const Icon(Icons.delete),
Text(L10n.of(context).delete),
],
),
), ),
), ),
), if (widget.overlayController!.event
if (_controller.selectedEvents.isNotEmpty && .getDisplayEvent(_controller.timeline!)
_controller.selectedEvents.first .status
.getDisplayEvent(_controller.timeline!) .isSent)
.status ReadingAssistanceInputBar(
.isSent && _controller,
!_controller.selectedEvents.every( widget.overlayController!,
(event) => event.status == EventStatus.error,
))
widget.overlayController != null
? ReadingAssistanceInputBar(
_controller,
widget.overlayController!,
)
: const SizedBox(height: height),
if (_controller.selectedEvents.length == 1 &&
_controller.selectedEvents.first
.getDisplayEvent(_controller.timeline!)
.status
.isError)
SizedBox(
height: height,
child: TextButton(
onPressed: _controller.sendAgainAction,
child: Row(
children: <Widget>[
Text(L10n.of(context).tryToSendAgain),
const SizedBox(width: 4),
const Icon(Icons.send_outlined, size: 16),
],
),
), ),
), if (widget.overlayController!.event
] .getDisplayEvent(_controller.timeline!)
: <Widget>[ .status
const SizedBox(width: 4), .isError)
AnimatedContainer( SizedBox(
duration: FluffyThemes.animationDuration, height: height,
curve: FluffyThemes.animationCurve, child: TextButton(
height: height, onPressed: _sendAgainAction,
width: child: Row(
_controller.sendController.text.isEmpty ? height : 0, children: <Widget>[
alignment: Alignment.center, Text(L10n.of(context).tryToSendAgain),
clipBehavior: Clip.hardEdge, const SizedBox(width: 4),
decoration: const BoxDecoration(), const Icon(Icons.send_outlined, size: 16),
child: PopupMenuButton<String>( ],
icon: const Icon(Icons.add_outlined),
onSelected: _controller.onAddPopupMenuButtonSelected,
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'file',
child: ListTile(
leading: const CircleAvatar(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
child: Icon(Icons.attachment_outlined),
),
title: Text(L10n.of(context).sendFile),
contentPadding: const EdgeInsets.all(0),
), ),
), ),
PopupMenuItem<String>( ),
value: 'image', ]
child: ListTile( : <Widget>[
leading: const CircleAvatar( const SizedBox(width: 4),
backgroundColor: Colors.blue, AnimatedContainer(
foregroundColor: Colors.white, duration: FluffyThemes.animationDuration,
child: Icon(Icons.image_outlined), curve: FluffyThemes.animationCurve,
), height: height,
title: Text(L10n.of(context).sendImage), width: _controller.sendController.text.isEmpty
contentPadding: const EdgeInsets.all(0), ? height
), : 0,
), alignment: Alignment.center,
if (PlatformInfos.isMobile) clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: PopupMenuButton<String>(
icon: const Icon(Icons.add_outlined),
onSelected: _controller.onAddPopupMenuButtonSelected,
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[
PopupMenuItem<String>( PopupMenuItem<String>(
value: 'camera', value: 'file',
child: ListTile( child: ListTile(
leading: const CircleAvatar( leading: const CircleAvatar(
backgroundColor: Colors.purple, backgroundColor: Colors.green,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon(Icons.camera_alt_outlined), child: Icon(Icons.attachment_outlined),
), ),
title: Text(L10n.of(context).openCamera), title: Text(L10n.of(context).sendFile),
contentPadding: const EdgeInsets.all(0), contentPadding: const EdgeInsets.all(0),
), ),
), ),
if (PlatformInfos.isMobile)
PopupMenuItem<String>( PopupMenuItem<String>(
value: 'camera-video', value: 'image',
child: ListTile( child: ListTile(
leading: const CircleAvatar( leading: const CircleAvatar(
backgroundColor: Colors.red, backgroundColor: Colors.blue,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon(Icons.videocam_outlined), child: Icon(Icons.image_outlined),
), ),
title: Text(L10n.of(context).openVideoCamera), title: Text(L10n.of(context).sendImage),
contentPadding: const EdgeInsets.all(0), contentPadding: const EdgeInsets.all(0),
), ),
), ),
if (PlatformInfos.isMobile) if (PlatformInfos.isMobile)
PopupMenuItem<String>( PopupMenuItem<String>(
value: 'location', value: 'camera',
child: ListTile( child: ListTile(
leading: const CircleAvatar( leading: const CircleAvatar(
backgroundColor: Colors.brown, backgroundColor: Colors.purple,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon(Icons.gps_fixed_outlined), child: Icon(Icons.camera_alt_outlined),
),
title: Text(L10n.of(context).openCamera),
contentPadding: const EdgeInsets.all(0),
), ),
title: Text(L10n.of(context).shareLocation),
contentPadding: const EdgeInsets.all(0),
), ),
), if (PlatformInfos.isMobile)
], PopupMenuItem<String>(
value: 'camera-video',
child: ListTile(
leading: const CircleAvatar(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
child: Icon(Icons.videocam_outlined),
),
title: Text(L10n.of(context).openVideoCamera),
contentPadding: const EdgeInsets.all(0),
),
),
if (PlatformInfos.isMobile)
PopupMenuItem<String>(
value: 'location',
child: ListTile(
leading: const CircleAvatar(
backgroundColor: Colors.brown,
foregroundColor: Colors.white,
child: Icon(Icons.gps_fixed_outlined),
),
title: Text(L10n.of(context).shareLocation),
contentPadding: const EdgeInsets.all(0),
),
),
],
),
), ),
), if (kIsWeb)
if (kIsWeb) Container(
Container( height: height,
height: height, width: height,
width: height, alignment: Alignment.center,
alignment: Alignment.center, child: IconButton(
child: IconButton( tooltip: L10n.of(context).emojis,
tooltip: L10n.of(context).emojis, icon: PageTransitionSwitcher(
icon: PageTransitionSwitcher( transitionBuilder: (
transitionBuilder: ( Widget child,
Widget child, Animation<double> primaryAnimation,
Animation<double> primaryAnimation, Animation<double> secondaryAnimation,
Animation<double> secondaryAnimation, ) {
) { return SharedAxisTransition(
return SharedAxisTransition( animation: primaryAnimation,
animation: primaryAnimation, secondaryAnimation: secondaryAnimation,
secondaryAnimation: secondaryAnimation, transitionType:
transitionType: SharedAxisTransitionType.scaled, SharedAxisTransitionType.scaled,
fillColor: Colors.transparent, fillColor: Colors.transparent,
child: child, child: child,
); );
}, },
child: Icon( child: Icon(
_controller.showEmojiPicker _controller.showEmojiPicker
? Icons.keyboard ? Icons.keyboard
: Icons.add_reaction_outlined, : Icons.add_reaction_outlined,
key: ValueKey(_controller.showEmojiPicker), key: ValueKey(_controller.showEmojiPicker),
),
), ),
onPressed: _controller.emojiPickerAction,
), ),
onPressed: _controller.emojiPickerAction,
), ),
), Expanded(
Expanded( child: Padding(
child: Padding( padding: const EdgeInsets.symmetric(vertical: 0.0),
padding: const EdgeInsets.symmetric(vertical: 0.0), child: InputBar(
child: InputBar( room: _controller.room,
room: _controller.room, minLines: 1,
minLines: 1, maxLines: 8,
maxLines: 8, autofocus: !PlatformInfos.isMobile,
autofocus: !PlatformInfos.isMobile, keyboardType: TextInputType.multiline,
keyboardType: TextInputType.multiline, textInputAction: AppConfig.sendOnEnter ??
textInputAction: AppConfig.sendOnEnter ?? true && PlatformInfos.isMobile
true && PlatformInfos.isMobile ? TextInputAction.send
? TextInputAction.send : null,
: null, onSubmitted: (String value) =>
onSubmitted: (String value) => _controller.onInputBarSubmitted(value, context),
_controller.onInputBarSubmitted(value, context), onSubmitImage: _controller.sendImageFromClipBoard,
onSubmitImage: _controller.sendImageFromClipBoard, focusNode: _controller.inputFocus,
focusNode: _controller.inputFocus, controller: _controller.sendController,
controller: _controller.sendController, decoration: InputDecoration(
decoration: InputDecoration( contentPadding: const EdgeInsets.only(
contentPadding: const EdgeInsets.only( left: 6.0,
left: 6.0, right: 6.0,
right: 6.0, bottom: 6.0,
bottom: 6.0, top: 3.0,
top: 3.0, ),
hintText: hintText(),
disabledBorder: InputBorder.none,
hintMaxLines: 1,
border: InputBorder.none,
enabledBorder: InputBorder.none,
filled: false,
), ),
hintText: hintText(), onChanged: _controller.onInputBarChanged,
disabledBorder: InputBorder.none,
hintMaxLines: 1,
border: InputBorder.none,
enabledBorder: InputBorder.none,
filled: false,
), ),
onChanged: _controller.onInputBarChanged,
), ),
), ),
), StartIGCButton(
StartIGCButton( controller: _controller,
controller: _controller, ),
), Container(
Container( height: height,
height: height, width: height,
width: height, alignment: Alignment.center,
alignment: Alignment.center, child: PlatformInfos.platformCanRecord &&
child: PlatformInfos.platformCanRecord && _controller.sendController.text.isEmpty &&
_controller.sendController.text.isEmpty && !_controller.choreographer.itController.willOpen
!_controller.choreographer.itController.willOpen ? FloatingActionButton.small(
? FloatingActionButton.small( tooltip: L10n.of(context).voiceMessage,
tooltip: L10n.of(context).voiceMessage, onPressed: _controller.voiceMessageAction,
onPressed: _controller.voiceMessageAction, elevation: 0,
elevation: 0, heroTag: null,
heroTag: null, shape: RoundedRectangleBorder(
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(height),
borderRadius: BorderRadius.circular(height), ),
), backgroundColor: theme.bubbleColor,
backgroundColor: theme.bubbleColor, foregroundColor: theme.onBubbleColor,
foregroundColor: theme.onBubbleColor, child: const Icon(Icons.mic_none_outlined),
child: const Icon(Icons.mic_none_outlined), )
) : ChoreographerSendButton(controller: _controller),
: ChoreographerSendButton(controller: _controller), ),
), ],
], ),
), ),
), ),
], ],

@ -112,19 +112,11 @@ class ReadingAssistanceInputBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Expanded( return Expanded(
child: Container( child: ConstrainedBox(
width: overlayController.maxWidth,
constraints: BoxConstraints( constraints: BoxConstraints(
maxHeight: (MediaQuery.of(context).size.height / 2) - maxHeight: (MediaQuery.of(context).size.height / 2) -
AppConfig.toolbarButtonsHeight, AppConfig.toolbarButtonsHeight,
), ),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: const BorderRadius.all(
Radius.circular(8.0),
),
),
child: AnimatedSize( child: AnimatedSize(
duration: const Duration( duration: const Duration(
milliseconds: AppConfig.overlayAnimationDuration, milliseconds: AppConfig.overlayAnimationDuration,

Loading…
Cancel
Save