diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e22beb2..cb93818b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [Unreleased] +* **Fix**: [428](https://github.com/SimformSolutionsPvtLtd/chatview/pull/428) Fixed reply + configuration handling when using a custom text field. * **Fix**: [423](https://github.com/SimformSolutionsPvtLtd/chatview/pull/423) Rendering issue in attached image preview when sending message on web. * **Feat**: [420](https://github.com/SimformSolutionsPvtLtd/chatview/pull/420) Added support for diff --git a/example/lib/example_two/example_two_chat_screen.dart b/example/lib/example_two/example_two_chat_screen.dart index b48a9423..df08c87a 100644 --- a/example/lib/example_two/example_two_chat_screen.dart +++ b/example/lib/example_two/example_two_chat_screen.dart @@ -291,6 +291,65 @@ class _ExampleTwoChatScreenState extends State { const SnackBar(content: Text('Attach button pressed')), ), ), + replyMessageBuilder: (context, state) { + final repliedUser = state.replyTo.isNotEmpty + ? _chatController.getUserFromId(state.replyTo) + : null; + final replyTo = state.replyTo == _chatController.currentUser.id + ? PackageStrings.currentLocale.you + : repliedUser?.name ?? ''; + return Container( + padding: const EdgeInsets.fromLTRB(8, 8, 7.5, 7.5), + decoration: const BoxDecoration( + border: Border( + left: BorderSide( + color: AppColors.uiTwoReplyLineColor, + width: 4, + ), + ), + ), + child: Row( + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + replyTo, + style: const TextStyle( + fontStyle: FontStyle.normal, + fontWeight: FontWeight.w600, + fontSize: 14, + height: 1.3571428571, + letterSpacing: -0.01, + color: Color(0xFFD42A66), + ), + ), + const SizedBox(height: 1.5), + Text( + state.message, + style: const TextStyle( + fontSize: 12, + height: 1.33, + color: Color(0xFF0A0A0A), + ), + ), + ], + ), + ), + const SizedBox(width: 16), + SizedBox.square( + dimension: 32, + child: IconButton( + onPressed: () => ChatView.closeReplyMessageView(context), + padding: EdgeInsets.zero, + icon: SvgPicture.asset(AppIcons.closeCircular), + ), + ), + ], + ), + ); + }, featureActiveConfig: const FeatureActiveConfig( lastSeenAgoBuilderVisibility: false, enableOtherUserProfileAvatar: false, diff --git a/example/lib/widgets/custom_chat_bar.dart b/example/lib/widgets/custom_chat_bar.dart index 334482dd..c816d359 100644 --- a/example/lib/widgets/custom_chat_bar.dart +++ b/example/lib/widgets/custom_chat_bar.dart @@ -1,10 +1,10 @@ import 'dart:io'; +import 'package:audio_waveforms/audio_waveforms.dart'; import 'package:chatview/chatview.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; -import 'package:audio_waveforms/audio_waveforms.dart'; import '../../values/colors.dart'; import '../../values/icons.dart'; @@ -48,13 +48,7 @@ class _CustomChatBarState extends State { if (_replyMessage != null) { _replyMessage = widget.replyMessage; } - final repliedUser = _replyMessage?.replyTo.isNotEmpty ?? false - ? widget.chatController.getUserFromId(_replyMessage?.replyTo ?? '') - : null; - String replyTo = - _replyMessage?.replyTo == widget.chatController.currentUser.id - ? PackageStrings.currentLocale.you - : repliedUser?.name ?? ''; + return Container( color: AppColors.uiTwoBackground, child: SafeArea( @@ -62,60 +56,6 @@ class _CustomChatBarState extends State { child: Column( mainAxisSize: MainAxisSize.min, children: [ - if (_replyMessage?.message.isNotEmpty ?? false) - Container( - padding: const EdgeInsets.fromLTRB(8, 8, 7.5, 7.5), - decoration: const BoxDecoration( - border: Border( - left: BorderSide( - color: AppColors.uiTwoReplyLineColor, - width: 4, - ), - ), - ), - child: Row( - children: [ - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - replyTo, - style: const TextStyle( - fontStyle: FontStyle.normal, - fontWeight: FontWeight.w600, - fontSize: 14, - height: 1.3571428571, - letterSpacing: -0.01, - color: Color(0xFFD42A66), - ), - ), - const SizedBox(height: 1.5), - Text( - _replyMessage?.message ?? '', - style: const TextStyle( - fontSize: 12, - height: 1.33, - color: Color(0xFF0A0A0A), - ), - ), - ], - ), - ), - const SizedBox(width: 16), - SizedBox.square( - dimension: 32, - child: IconButton( - onPressed: () => ChatView.closeReplyMessageView( - context, - ), - padding: EdgeInsets.zero, - icon: SvgPicture.asset(AppIcons.closeCircular), - ), - ), - ], - ), - ), Padding( padding: const EdgeInsets.fromLTRB(7, 5.5, 9, 5.5), child: ValueListenableBuilder( diff --git a/lib/src/widgets/send_message_widget.dart b/lib/src/widgets/send_message_widget.dart index 7d1d0852..36bcd983 100644 --- a/lib/src/widgets/send_message_widget.dart +++ b/lib/src/widgets/send_message_widget.dart @@ -95,67 +95,77 @@ class SendMessageWidgetState extends State { chatListConfig.scrollToBottomButtonConfig; return Align( alignment: Alignment.bottomCenter, - child: isCustomTextField - ? Builder( - // Assign the key only when using a custom text field to measure its height, - // to preventing overlap with the message list. - key: chatViewIW?.chatTextFieldViewKey, - builder: (context) { - WidgetsBinding.instance.addPostFrameCallback( - (_) => context.calculateAndUpdateTextFieldHeight(), - ); - return widget.sendMessageBuilder?.call(_replyMessage) ?? - const SizedBox.shrink(); - }, - ) - : SizedBox( - width: MediaQuery.of(context).size.width, - child: Stack( + child: SizedBox( + width: MediaQuery.of(context).size.width, + child: Stack( + children: [ + // This has been added to prevent messages from being + // displayed below the text field + // when the user scrolls the message list. + Positioned( + right: 0, + left: 0, + bottom: 0, + child: Container( + height: MediaQuery.of(context).size.height / + ((!kIsWeb && Platform.isIOS) ? 24 : 28), + color: chatListConfig.chatBackgroundConfig.backgroundColor ?? + Colors.white, + ), + ), + Positioned( + right: 0, + left: 0, + bottom: 0, + child: Column( + mainAxisSize: MainAxisSize.min, children: [ - // This has been added to prevent messages from being - // displayed below the text field - // when the user scrolls the message list. - Positioned( - right: 0, - left: 0, - bottom: 0, - child: Container( - height: MediaQuery.of(context).size.height / - ((!kIsWeb && Platform.isIOS) ? 24 : 28), - color: - chatListConfig.chatBackgroundConfig.backgroundColor ?? - Colors.white, + if (chatViewIW + ?.featureActiveConfig.enableScrollToBottomButton ?? + true) + Align( + alignment: + scrollToBottomButtonConfig?.alignment?.alignment ?? + Alignment.bottomCenter, + child: Padding( + padding: scrollToBottomButtonConfig?.padding ?? + EdgeInsets.zero, + child: const ScrollToBottomButton(), + ), ), - ), - Positioned( - right: 0, - left: 0, - bottom: 0, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - if (chatViewIW?.featureActiveConfig - .enableScrollToBottomButton ?? - true) - Align( - alignment: scrollToBottomButtonConfig - ?.alignment?.alignment ?? - Alignment.bottomCenter, - child: Padding( - padding: scrollToBottomButtonConfig?.padding ?? - EdgeInsets.zero, - child: const ScrollToBottomButton(), - ), - ), - Padding( - key: chatViewIW?.chatTextFieldViewKey, - padding: EdgeInsets.fromLTRB( - bottomPadding4, - bottomPadding4, - bottomPadding4, - _bottomPadding, - ), - child: Stack( + Padding( + key: chatViewIW?.chatTextFieldViewKey, + padding: EdgeInsets.fromLTRB( + bottomPadding4, + bottomPadding4, + bottomPadding4, + _bottomPadding, + ), + child: isCustomTextField + ? Column( + mainAxisSize: MainAxisSize.min, + children: [ + ReplyMessageView( + key: _replyMessageTextFieldViewKey, + sendMessageConfig: widget.sendMessageConfig, + messageConfig: widget.messageConfig, + builder: widget.replyMessageBuilder, + onChange: (value) => _replyMessage = value, + ), + Builder( + builder: (context) { + WidgetsBinding.instance.addPostFrameCallback( + (_) => context + .calculateAndUpdateTextFieldHeight(), + ); + return widget.sendMessageBuilder + ?.call(_replyMessage) ?? + const SizedBox.shrink(); + }, + ), + ], + ) + : Stack( alignment: Alignment.bottomCenter, children: [ ReplyMessageView( @@ -198,13 +208,13 @@ class SendMessageWidgetState extends State { ), ], ), - ), - ], - ), ), ], ), ), + ], + ), + ), ); }