feat:✨Added a support for showing message time in message bubble. Removed enableSwipeToSeeTime(bool) & added messageTimePositionType(Enum) to FeatureActiveConfig class.(#115)

Author: jaiminrana05

CHANGELOG.md

@@ -1,70 +1,79 @@
+## [1.4.0] (UnReleased)
+
+* **Feat**: [115](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/115) Added
+  option for showing message sent/received time in message bubble. Removed 'enableSwipeToSeeTime'
+  & 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,12 +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
+      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',
@@ -32,6 +59,14 @@ class Data {
       sendBy: '1',
       status: MessageStatus.read,
     ),
+    Message(
+      id: '5',
+      message:
+          "Can you write the time and place of the meeting? Can you write the time and place of the meeting?",
+      createdAt: DateTime.now(),
+      sendBy: '1',
+      status: MessageStatus.read,
+    ),
     Message(
       id: '5',
       message: "That's fine",
@@ -105,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',
@@ -113,5 +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: '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,
+    ),
   ];
 }

example/lib/main.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:chatview/chatview.dart';
 import 'package:example/data.dart';
 import 'package:example/models/theme.dart';
@@ -81,6 +83,9 @@ class _ChatScreenState extends State<ChatScreen> {
         featureActiveConfig: const FeatureActiveConfig(
           lastSeenAgoBuilderVisibility: true,
           receiptsBuilderVisibility: true,
+          enableOtherUserProfileAvatar: true,
+          enableCurrentUserProfileAvatar: true,
+          messageTimePositionType: MessageTimePositionType.onRightSwipe,
         ),
         chatViewState: ChatViewState.hasMessages,
         chatViewStateConfig: ChatViewStateConfiguration(
@@ -129,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,
@@ -212,6 +217,17 @@ class _ChatScreenState extends State<ChatScreen> {
           backgroundColor: theme.reactionPopupColor,
         ),
         messageConfig: MessageConfiguration(
+          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,
             borderColor: theme.messageReactionBackGroundColor,
@@ -238,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/feature_active_config.dart

@@ -1,9 +1,10 @@
+import 'package:chatview/chatview.dart';
+
 class FeatureActiveConfig {
   const FeatureActiveConfig({
     this.enableSwipeToReply = true,
     this.enableReactionPopup = true,
     this.enableTextField = true,
-    this.enableSwipeToSeeTime = true,
     this.enableCurrentUserProfileAvatar = false,
     this.enableOtherUserProfileAvatar = true,
     this.enableReplySnackBar = true,
@@ -12,8 +13,8 @@ class FeatureActiveConfig {
     this.enableDoubleTapToLike = true,
     this.lastSeenAgoBuilderVisibility = true,
     this.receiptsBuilderVisibility = true,
-  });
-
+    this.messageTimePositionType = MessageTimePositionType.onRightSwipe,
+  }) ;
   /// Used for enable/disable swipe to reply.
   final bool enableSwipeToReply;
 
@@ -23,9 +24,6 @@ class FeatureActiveConfig {
   /// Used for enable/disable text field.
   final bool enableTextField;
 
-  /// Used for enable/disable swipe whole chat to see message created time.
-  final bool enableSwipeToSeeTime;
-
   /// Used for enable/disable current user profile circle.
   final bool enableCurrentUserProfileAvatar;
 
@@ -49,4 +47,8 @@ class FeatureActiveConfig {
 
   /// Controls the visibility of the message [receiptsBuilder]
   final bool receiptsBuilderVisibility;
+
+  /// Controls the Position of message created time.
+  /// default value: onRightSwipe
+  final MessageTimePositionType messageTimePositionType;
 }

lib/src/models/message_configuration.dart

@@ -19,10 +19,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import 'package:chatview/src/models/models.dart';
+import 'package:chatview/chatview.dart';
 import 'package:chatview/src/models/voice_message_configuration.dart';
 import 'package:flutter/material.dart';
 
+
 class MessageConfiguration {
   /// Provides configuration of image message appearance.
   final ImageMessageConfiguration? imageMessageConfig;
@@ -39,11 +40,19 @@ class MessageConfiguration {
   /// Configurations for voice message bubble
   final VoiceMessageConfiguration? voiceMessageConfig;
 
+  /// 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

@@ -30,7 +30,7 @@ enum MessageType {
   custom
 }
 
-/// Events, Wheter the user is still typing a message or has
+/// Events, Whether the user is still typing a message or has
 /// typed the message
 enum TypeWriterStatus { typing, typed }
 
@@ -52,3 +52,30 @@ extension ChatViewStateExtension on ChatViewState {
 
   bool get noMessages => this == ChatViewState.noData;
 }
+
+enum MessageTimePositionType {
+  /// Used for viewing the message created time inside the chatBubble.
+  insideChatBubble,
+
+  /// Used for viewing the message created time outside the chatBubble.
+  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 isOutSideChatBubbleAtBottom => this == outsideChatBubbleAtBottom;
+
+  bool get isOnRightSwipe => this == onRightSwipe;
+
+  bool get isOutSideChatBubbleAtTop => this == outsideChatBubbleAtTop;
+
+  bool get isDisable => this == disable;
+}

lib/src/values/typedefs.dart

@@ -35,3 +35,4 @@ typedef VoidCallBackWithFuture = Future<void> Function();
 typedef StringsCallBack = void Function(String emoji, String messageId);
 typedef StringWithReturnWidget = Widget Function(String separator);
 typedef DragUpdateDetailsCallback = void Function(DragUpdateDetails);
+typedef MessageDateTimeBuilder = Widget Function(DateTime date);