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/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..388623fe 100644 --- a/lib/src/widgets/send_message_widget.dart +++ b/lib/src/widgets/send_message_widget.dart @@ -95,83 +95,80 @@ 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, + Padding( + key: chatViewIW?.chatTextFieldViewKey, + padding: EdgeInsets.fromLTRB( + bottomPadding4, + bottomPadding4, + bottomPadding4, + _bottomPadding, + ), + child: Stack( + alignment: Alignment.bottomCenter, 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, + ReplyMessageView( + key: _replyMessageTextFieldViewKey, + sendMessageConfig: widget.sendMessageConfig, + messageConfig: widget.messageConfig, + builder: widget.replyMessageBuilder, + onChange: (value) => _replyMessage = value, + ), + if (widget.sendMessageConfig.shouldSendImageWithText) + SelectedImageViewWidget( + key: _selectedImageViewWidgetKey, + sendMessageConfig: widget.sendMessageConfig, ), - child: Stack( - alignment: Alignment.bottomCenter, - children: [ - ReplyMessageView( - key: _replyMessageTextFieldViewKey, - sendMessageConfig: widget.sendMessageConfig, - messageConfig: widget.messageConfig, - builder: widget.replyMessageBuilder, - onChange: (value) => _replyMessage = value, - ), - if (widget - .sendMessageConfig.shouldSendImageWithText) - SelectedImageViewWidget( - key: _selectedImageViewWidgetKey, - sendMessageConfig: widget.sendMessageConfig, - ), - ChatUITextField( + isCustomTextField + ? Builder( + builder: (context) { + WidgetsBinding.instance.addPostFrameCallback( + (_) => context + .calculateAndUpdateTextFieldHeight(), + ); + return widget.sendMessageBuilder + ?.call(_replyMessage) ?? + const SizedBox.shrink(); + }, + ) + : ChatUITextField( focusNode: _focusNode, textEditingController: _textEditingController, onPressed: _onPressed, @@ -196,15 +193,15 @@ class SendMessageWidgetState extends State { } }, ), - ], - ), - ), ], ), ), ], ), ), + ], + ), + ), ); } @@ -272,6 +269,10 @@ class SendMessageWidgetState extends State { _replyMessageTextFieldViewKey.currentState!.replyMessage.value = _replyMessage; } + // Scroll to ensure the reply widget is visible and messages are not overlapped + WidgetsBinding.instance.addPostFrameCallback((_) { + chatViewIW?.chatController.scrollToLastMessage(); + }); } void onCloseTap() {