feat:✨Handled message time for types of messages

Author: jaiminrana05

CHANGELOG.md

@@ -2,75 +2,78 @@
 
 * **Feat**: [115](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/115) Added
   option for showing message sent/received time in message bubble. Removed 'enableSwipeToSeeTime'
-  & added 'showMessageTimeIn' from FeatureActiveConfig class for the visibility of message time.
+  & added 'messageTimePositionType' to FeatureActiveConfig class for changing position of message
+  time.
 
 ## [1.3.1]
 
-* **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user 
-  to get callback when image is picked so user can perform operation like crop. Allow user to pass 
+* **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user
+  to get callback when image is picked so user can perform operation like crop. Allow user to pass
   configuration like height, width, image quality and preferredCameraDevice.
-* **Fix**: [95](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/95) Fix issue of 
+* **Fix**: [95](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/95) Fix issue of
   chat is added to bottom while `loadMoreData` callback.
-* **Fix**: [109](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/109) Added 
-  support for the hiding/Un-hiding gallery and camera buttons 
- 
+* **Fix**: [109](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/109) Added
+  support for the hiding/Un-hiding gallery and camera buttons
+
 ## [1.3.0]
 
 * **Feat**: [71](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/71) Added Callback
   when a user starts/stops composing typing a message.
 * **Fix**: [78](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/78) Fix issue of
   unmodifiable list.
-* **Feat**: [76](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/76) Message Receipts.
+* **Feat**: [76](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/76) Message
+  Receipts.
 * **Fix**: [81](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/81) Fix issue of
   TypingIndicator Rebuilding ChatView.
 * **Fix**: [94](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/94) Fixed deprecated
   `showRecentsTab` property with new `recentTabBehavior`.
 * Support for latest flutter version `3.10.5`.
-* Update dependencies `http` to version `1.1.0` and `image_picker` to version range `'>=0.8.9 <2.0.0'`.
-
+* Update dependencies `http` to version `1.1.0` and `image_picker` to version
+  range `'>=0.8.9 <2.0.0'`.
 
 ## [1.2.1]
 
 * **Fix**: [60](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/60) Fix image from
   file is not loaded.
 * **Fix**: [61](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/61) Fix issue of
   audio message is not working.
-* **Feat**: [65](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/65) Add callback 
+* **Feat**: [65](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/65) Add callback
   when user react on message.
 
-
 ## [1.2.0+1]
 
-* **Feat**: [42](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/42) Ability to 
+* **Feat**: [42](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/42) Ability to
   get callback on tap of profile circle avatar.
 * **Breaking**: Add `messageType` in `onSendTap` callback for encountering messages.
 * **Breaking**: Remove `onRecordingComplete` and you can get Recorded audio in `onSendTap` callback
   with `messageType`.
 * **Breaking**: Remove `onImageSelected` from `ImagePickerIconsConfiguration` and can get selected
   image in `onSendTap` callback with `messageType`.
-* **Feat**: [49](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/49) Add `onUrlDetect`
+* **Feat**: [49](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/49)
+  Add `onUrlDetect`
   callback for opening urls.
 * **Feat**: [51](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/51) Ability to
   get callback on long press of profile circle avatar.
 
 ## [1.1.0]
 
-* **Feat**: [37](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/37) Ability to 
+* **Feat**: [37](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/37) Ability to
   enable or disable specific features.
 * **Feat**: [34](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/34) Ability to
   add voice message.
 * **Breaking**: Remove `onEmojiTap` from `ReactionPopupConfiguration`, it can be handled internally.
-* **Breaking**: Remove `horizontalDragToShowMessageTime` from `ChatBackgroundConfiguration` and 
+* **Breaking**: Remove `horizontalDragToShowMessageTime` from `ChatBackgroundConfiguration` and
   add `enableSwipeToSeeTime` parameter with same feature in `FeatureActiveConfig`.
 * **Breaking**: Remove `showReceiverProfileCircle` and add `enableOtherUserProfileAvatar` parameter
   with same feature in `FeatureActiveConfig`.
-* * **Breaking**: Move `enablePagination` parameter from `ChatView` to `FeatureActiveConfig`.
+*
+    * **Breaking**: Move `enablePagination` parameter from `ChatView` to `FeatureActiveConfig`.
 
 ## [1.0.1]
 
-* **Fix**: [32](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/32) Fix issue of 
+* **Fix**: [32](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/32) Fix issue of
   while replying to image it highlights the link instead of the image.
-* **Fix**: [35](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/35) Fix issue of 
+* **Fix**: [35](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/35) Fix issue of
   removing reaction which is reacted accidentally.
 
 ## [1.0.0+1]

example/lib/data.dart

@@ -4,13 +4,39 @@ class Data {
   static const profileImage =
       "https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_showcaseview/master/example/assets/simform.png";
   static final messageList = [
+    Message(
+      id: '58',
+      message: "https://bit.ly/3JHS2Wl",
+      createdAt: DateTime.now(),
+      sendBy: '2',
+      reaction: Reaction(
+        reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
+        reactedUserIds: ['2', '3', '4'],
+      ),
+      status: MessageStatus.read,
+    ),
+    Message(
+      id: '88',
+      message: "https://bit.ly/3JHS2Wl",
+      createdAt: DateTime.now(),
+      sendBy: '1',
+      reaction: Reaction(
+        reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
+        reactedUserIds: ['2', '3', '4'],
+      ),
+      status: MessageStatus.read,
+    ),
     Message(
       id: '1',
       message: "Hi!",
       createdAt: DateTime.now(),
       sendBy: '1',
       // userId of who sends the message
       status: MessageStatus.read,
+      reaction: Reaction(
+        reactions: ['\u{2764}', '\u{2763}', '\u{2762}', '\u{2761}'],
+        reactedUserIds: ['2', '4', '3', '1'],
+      ),
     ),
     Message(
       id: '2',
@@ -114,6 +140,14 @@ class Data {
       sendBy: '1',
       reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
       status: MessageStatus.read,
+    ), Message(
+      id: '1321',
+      message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
+      createdAt: DateTime.now(),
+      messageType: MessageType.image,
+      sendBy: '2',
+      reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
+      status: MessageStatus.read,
     ),
     Message(
       id: '12',
@@ -122,20 +156,30 @@ class Data {
       sendBy: '2',
       status: MessageStatus.read,
     ),
+    // Message(
+    //     id: '13',
+    //     message: "",
+    //     createdAt: DateTime.now(),
+    //     sendBy: '2',
+    //     status: MessageStatus.read,
+    //     messageType: MessageType.voice),
+    // Message(
+    //     id: '14',
+    //     message: "",
+    //     createdAt: DateTime.now(),
+    //     sendBy: '1',
+    //     status: MessageStatus.read,
+    //     messageType: MessageType.voice),
     Message(
-      id: '13',
-      message: "",
-      createdAt: DateTime.now(),
-      sendBy: '2',
-      status: MessageStatus.read,
-      messageType: MessageType.voice
-    ),Message(
-      id: '14',
-      message: "",
+      id: '94',
+      message: "messageMe",
+      reaction: Reaction(
+        reactions: ['\u{2764}', '\u{2761}', '\u{2763}', '\u{2762}'],
+        reactedUserIds: ['2', '4', '3', '1'],
+      ),
       createdAt: DateTime.now(),
       sendBy: '1',
       status: MessageStatus.read,
-      messageType: MessageType.voice
     ),
   ];
 }

example/lib/main.dart

@@ -83,7 +83,9 @@ class _ChatScreenState extends State<ChatScreen> {
         featureActiveConfig: const FeatureActiveConfig(
           lastSeenAgoBuilderVisibility: true,
           receiptsBuilderVisibility: true,
-          messageTimePositionType: MessageTimePositionType.insideChatBubble,
+          enableOtherUserProfileAvatar: true,
+          enableCurrentUserProfileAvatar: true,
+          messageTimePositionType: MessageTimePositionType.onRightSwipe,
         ),
         chatViewState: ChatViewState.hasMessages,
         chatViewStateConfig: ChatViewStateConfiguration(
@@ -132,7 +134,7 @@ class _ChatScreenState extends State<ChatScreen> {
         ),
         chatBackgroundConfig: ChatBackgroundConfiguration(
           messageTimeIconColor: theme.messageTimeIconColor,
-          messageTimeTextStyle: TextStyle(color: theme.messageTimeTextColor),
+          messageTimeTextStyle: TextStyle(color: Colors.green),
           defaultGroupSeparatorConfig: DefaultGroupSeparatorConfiguration(
             textStyle: TextStyle(
               color: theme.chatHeaderColor,
@@ -215,8 +217,16 @@ class _ChatScreenState extends State<ChatScreen> {
           backgroundColor: theme.reactionPopupColor,
         ),
         messageConfig: MessageConfiguration(
-          messageDateTimeBuilder: (date) => Text(
+          messageDateTimeBuilder: (date) => const Text(
             '7:34 PM',
+            style: TextStyle(
+              color: Colors.black,
+            ),
+          ),
+          messageTimeTextStyle: const TextStyle(
+            color: Colors.green,
+            fontWeight: FontWeight.bold,
+            fontSize: 18,
           ),
           messageReactionConfig: MessageReactionConfiguration(
             backgroundColor: theme.messageReactionBackGroundColor,
@@ -244,7 +254,7 @@ class _ChatScreenState extends State<ChatScreen> {
             ),
           ),
           imageMessageConfig: ImageMessageConfiguration(
-            margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 15),
+            margin: const EdgeInsets.fromLTRB(12, 0, 12, 15),
             shareIconConfig: ShareIconConfiguration(
               defaultIconBackgroundColor: theme.shareIconBackgroundColor,
               defaultIconColor: theme.shareIconColor,

lib/src/models/message_configuration.dart

@@ -43,12 +43,16 @@ class MessageConfiguration {
   /// Allow user to set custom formatting of message time.
   final MessageDateTimeBuilder? messageDateTimeBuilder;
 
+  /// Used to give text style of message's time of a chat bubble
+  final TextStyle? messageTimeTextStyle;
+
   const MessageConfiguration({
     this.imageMessageConfig,
     this.messageReactionConfig,
     this.emojiMessageConfig,
     this.customMessageBuilder,
     this.voiceMessageConfig,
     this.messageDateTimeBuilder,
+    this.messageTimeTextStyle,
   });
 }

lib/src/values/enumaration.dart

@@ -56,18 +56,26 @@ extension ChatViewStateExtension on ChatViewState {
 enum MessageTimePositionType {
   /// Used for viewing the message created time inside the chatBubble.
   insideChatBubble,
+
   /// Used for viewing the message created time outside the chatBubble.
-  outsideChatBubble,
+  outsideChatBubbleAtBottom,
+
   /// Used for enable/disable swipe whole chat to see message created time.
   onRightSwipe,
+
+  /// Used for viewing the message created time outside the chatBubble.
+  outsideChatBubbleAtTop,
+
   /// Used for disabling the viewing of the message created time.
   disable;
 
   bool get isInsideChatBubble => this == insideChatBubble;
 
-  bool get isOutSideChatBubble => this == outsideChatBubble;
+  bool get isOutSideChatBubbleAtBottom => this == outsideChatBubbleAtBottom;
 
   bool get isOnRightSwipe => this == onRightSwipe;
 
+  bool get isOutSideChatBubbleAtTop => this == outsideChatBubbleAtTop;
+
   bool get isDisable => this == disable;
 }

lib/src/widgets/chat_bubble_widget.dart

@@ -127,7 +127,8 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
     final messagedUser = chatController?.getUserFromId(widget.message.sendBy);
     return Stack(
       children: [
-        if (featureActiveConfig?.messageTimePositionType.isOnRightSwipe ?? true) ...[
+        if (featureActiveConfig?.messageTimePositionType.isOnRightSwipe ??
+            true) ...[
           Visibility(
             visible: widget.slideAnimation?.value.dx == 0.0 ? false : true,
             child: Positioned.fill(
@@ -299,15 +300,36 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
       crossAxisAlignment:
           isMessageBySender ? CrossAxisAlignment.end : CrossAxisAlignment.start,
       children: [
-        if ((chatController?.chatUsers.length ?? 0) > 1 && !isMessageBySender)
+        if ((chatController?.chatUsers.length ?? 0) > 1)
           Padding(
             padding:
                 widget.chatBubbleConfig?.inComingChatBubbleConfig?.padding ??
                     const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-            child: Text(
-              messagedUser?.name ?? '',
-              style: widget.chatBubbleConfig?.inComingChatBubbleConfig
-                  ?.senderNameTextStyle,
+            child: Row(
+              mainAxisAlignment: isMessageBySender
+                  ? MainAxisAlignment.end
+                  : MainAxisAlignment.start,
+              children: [
+                if (!isMessageBySender)
+                  Text(
+                    messagedUser?.name ?? '',
+                    style: widget.chatBubbleConfig?.inComingChatBubbleConfig
+                        ?.senderNameTextStyle,
+                  ),
+                if (featureActiveConfig
+                        ?.messageTimePositionType.isOutSideChatBubbleAtTop ??
+                    false) ...[
+                  const SizedBox(width: 4),
+                  widget.messageConfig?.messageDateTimeBuilder
+                          ?.call(widget.message.createdAt) ??
+                      MessageTimeWidget(
+                        isCurrentUser: isMessageBySender,
+                        messageTime: widget.message.createdAt,
+                        messageTimeTextStyle:
+                            widget.messageConfig?.messageTimeTextStyle,
+                      ),
+                ]
+              ],
             ),
           ),
         if (replyMessage.isNotEmpty)
@@ -354,6 +376,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   ?.repliedMsgAutoScrollConfig.highlightScale ??
               1.1,
           onMaxDuration: _onMaxDuration,
+          profileCircleConfig: profileCircleConfig,
         ),
       ],
     );