feat: ✨ Add support for plus icon and action items in chat text field

Author: apurva780

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [2.4.2] (unreleased)
 
+* **Breaking**: [318](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/318)
+  Provide support for action item widgets on the chat text field with position options leading and trailing.
+  Also, provide a way to add plus/attach button to open the overlay for action items.
 * **Fix**: [266](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/266)
   Fix the keyboard overlapping the text field
 * **Feat**: [296](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/296)

doc/documentation.md

@@ -530,182 +530,83 @@ real-time messaging with supporting media uploads.
 
 # Migration Guide
 
-## Migration Guide for ChatView 2.0.0
-This guide will help you migrate your code from previous versions of ChatView to version 2.0.0.
+## Migration Guide for ChatView 3.0.0
+This guide will help you migrate your code from previous versions of ChatView to version 3.0.0.
 
 ## Key Changes
 
-### Renamed Properties
+### Add action item widgets list for text field
 
-- Renamed `sendBy` field to `sentBy` in `Message` class.
-- Renamed `chatUsers` field to `otherUsers` in `ChatController` class.
+- In this version, we have introduced a new way to add action items to the text field.
+- There are two ways you can add action items at leading and trailing positions of the text field.
+  - `textFieldLeadingActionWidgetBuilder`: This builder allows you to add list of action widgets at the leading position of the text field.
+  - `textFieldTrailingActionWidgetBuilder`: This builder allows you to add list of action widgets at the trailing position of the text field.
+- Add `CameraActionButton` and `GalleryActionButton` widgets as list to leading and trailing builder fo the text field for camera and gallery actions.
+- Now, you can add overlay action button to show overlay action items in the text field.
+  - With multiple action items
 
-### Moved Properties
+To show camera and gallery action items in the text field at leading position, you can use `textFieldLeadingActionWidgetBuilder`.
 
-- Moved `currentUser` field from `ChatView` widget to `ChatController` class.
-
-### Updated Methods
-
-- Updated `id` value in `copyWith` method of `Message` to have correct value.
-- Removed `showTypingIndicator` field from `ChatView` and replaced it with `ChatController.showTypingIndicator`.
-
-### JSON Serialization Changes
-
-The format for `fromJson` and `toJson` methods changed for several classes:
-
-#### ChatUser
-
-**Before (`ChatUser.fromJson`):**
-```dart
-ChatUser.fromJson(
-  { 
-    ...
-    'imageType': ImageType.asset,
-    ...
-  },
-),
-```
-
-**After (`ChatUser.fromJson`):**
 ```dart
-ChatUser.fromJson(
-  {
-    ...
-    'imageType': 'asset',
-    ...
-  },
-),
-```
-
-**Before (`ChatUser.toJson`):**
-```dart
-{
-  ...
-  imageType: ImageType.asset,
-  ...
-}
-```
-
-**After (`ChatUser.toJson`):**
-```dart
-{
-  ...
-  imageType: asset,
-  ...
-}
-```
-
-#### Message
-
-**Before (`Message.fromJson`):**
-```dart
-Message.fromJson(
-  {
-    ...
-    'createdAt': DateTime.now(),
-    'message_type': MessageType.text,
-    'voice_message_duration': Duration(seconds: 5),
-    ...
-  }
-)
-```
-
-**After (`Message.fromJson`):**
-```dart
-Message.fromJson(
-  {
-    ...
-    'createdAt': '2024-06-13T17:32:19.586412',
-    'message_type': 'text',
-    'voice_message_duration': '5000000',
-    ...
+textFieldConfig: TextFieldConfiguration(
+  textFieldLeadingActionWidgetBuilder: (context, controller) {
+    return [
+      CameraActionButton(
+        icon: const Icon(
+          Icons.camera_alt,
+        ),
+        onPressed: (path) {
+          if (path != null) {
+            _onSendTap(path, const ReplyMessage(), MessageType.image);
+          }
+        },
+      ),
+    GalleryActionButton(
+        icon: const Icon(
+          Icons.photo_library,
+        ),
+        onPressed: (path) {
+          if (path != null) {
+            _onSendTap(path, const ReplyMessage(), MessageType.image);
+          }
+        },
+      ),
+    ];
   }
-)
-```
-
-**Before (`Message.toJson`):**
-```dart
-{
-  ...
-  createdAt: 2024-06-13 17:23:19.454789,
-  message_type: MessageType.text,
-  voice_message_duration: 0:00:05.000000,
-  ...
-}
-```
-
-**After (`Message.toJson`):**
-```dart
-{
-  ...
-  createdAt: 2024-06-13T17:32:19.586412,
-  message_type: text,
-  voice_message_duration: 5000000,
-  ...
-}
+),
 ```
 
-#### ReplyMessage
+The same way you can add action items at trailing position of the text field using `textFieldTrailingActionWidgetBuilder`.
 
-**Before (`ReplyMessage.fromJson`):**
 ```dart
-ReplyMessage.fromJson(
-  {
-    ...
-    'message_type': MessageType.text,  
-    'voiceMessageDuration': Duration(seconds: 5),
-    ...
-  }
-)
-```
-
-**After (`ReplyMessage.fromJson`):**
-```dart
-ReplyMessage.fromJson(
-  {
-    ...
-    'message_type': 'text',  
-    'voiceMessageDuration': '5000000',
-    ...
+textFieldConfig: TextFieldConfiguration(
+  textFieldTrailingActionWidgetBuilder: (context, controller) {
+    return [
+      CameraActionButton(
+        icon: const Icon(
+          Icons.camera_alt,
+        ),
+        onPressed: (path) {
+          if (path != null) {
+            _onSendTap(path, const ReplyMessage(), MessageType.image);
+          }
+        },
+      ),
+      GalleryActionButton(
+        icon: const Icon(
+          Icons.photo_library,
+        ),
+        onPressed: (path) {
+          if (path != null) {
+            _onSendTap(path, const ReplyMessage(), MessageType.image);
+          }
+        },
+      ),
+    ];
   }
-)
-```
-
-**Before (`ReplyMessage.toJson`):**
-```dart
-{
-  ...
-  message_type: MessageType.text,
-  voiceMessageDuration: 0:00:05.000000,
-  ...
-}
-```
-
-**After (`ReplyMessage.toJson`):**
-```dart
-{
-  ...
-  message_type: text,
-  voiceMessageDuration: 5000000,
-  ...
-}
-```
-
-## Typing Indicator Changes
-
-**Before:**
-```dart
-ChatView(
-  showTypingIndicator: false,
 ),
 ```
 
-**After:**
-```dart
-// Use it with your ChatController instance
-_chatController.setTypingIndicator = true; // for showing indicator
-_chatController.setTypingIndicator = false; // for hiding indicator
-```
 
 # Contributors
 

example/lib/main.dart

@@ -43,28 +43,28 @@ class _ChatScreenState extends State<ChatScreen> {
     _chatController = ChatController(
       initialMessageList: Data.messageList,
       scrollController: ScrollController(),
-      currentUser: ChatUser(
+      currentUser: const ChatUser(
         id: '1',
         name: 'Flutter',
         profilePhoto: Data.profileImage,
       ),
       otherUsers: [
-        ChatUser(
+        const ChatUser(
           id: '2',
           name: 'Simform',
           profilePhoto: Data.profileImage,
         ),
-        ChatUser(
+        const ChatUser(
           id: '3',
           name: 'Jhon',
           profilePhoto: Data.profileImage,
         ),
-        ChatUser(
+        const ChatUser(
           id: '4',
           name: 'Mike',
           profilePhoto: Data.profileImage,
         ),
-        ChatUser(
+        const ChatUser(
           id: '5',
           name: 'Rich',
           profilePhoto: Data.profileImage,

lib/chatview.dart

@@ -39,5 +39,9 @@ export 'src/utils/chat_view_locale.dart';
 export 'src/utils/package_strings.dart';
 export 'src/values/enumeration.dart';
 export 'src/values/typedefs.dart';
+export 'src/widgets/action_widgets/camera_action_button.dart';
+export 'src/widgets/action_widgets/gallery_action_button.dart';
+export 'src/widgets/action_widgets/overlay_action_button.dart';
+export 'src/widgets/action_widgets/text_field_action_button.dart';
 export 'src/widgets/chat_view.dart';
 export 'src/widgets/chat_view_appbar.dart';

lib/src/models/config_models/send_message_configuration.dart

@@ -21,9 +21,9 @@
  */
 
 import 'package:audio_waveforms/audio_waveforms.dart';
+import 'package:chatview_utils/chatview_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:chatview_utils/chatview_utils.dart';
 import 'package:image_picker/image_picker.dart';
 
 import '../../values/typedefs.dart';
@@ -62,12 +62,6 @@ class SendMessageConfiguration {
   /// Enable/disable voice recording. Enabled by default.
   final bool allowRecordingVoice;
 
-  /// Enable/disable image picker from gallery. Enabled by default.
-  final bool enableGalleryImagePicker;
-
-  /// Enable/disable send image from camera. Enabled by default.
-  final bool enableCameraImagePicker;
-
   /// Color of mic icon when replying to some voice message.
   final Color? micIconColor;
 
@@ -89,8 +83,6 @@ class SendMessageConfiguration {
     this.replyMessageColor,
     this.closeIconColor,
     this.allowRecordingVoice = true,
-    this.enableCameraImagePicker = true,
-    this.enableGalleryImagePicker = true,
     this.voiceRecordingConfiguration,
     this.micIconColor,
     this.cancelRecordConfiguration,
@@ -168,6 +160,19 @@ class TextFieldConfiguration {
   /// Default is [true].
   final bool enabled;
 
+  /// List of widgets to be shown as action widget in text field.
+  final TextFieldTrailingActionWidgetBuilder?
+      textFieldTrailingActionWidgetBuilder;
+
+  /// List of widgets to be shown as leading action widget in text field.
+  final TextFieldLeadingActionWidgetBuilder?
+      textFieldLeadingActionWidgetBuilder;
+
+  /// hint text max lines in text field.
+  final int? hintMaxLines;
+
+  final bool hideLeadingActionsOnType;
+
   const TextFieldConfiguration({
     this.contentPadding,
     this.maxLines,
@@ -184,6 +189,10 @@ class TextFieldConfiguration {
     this.inputFormatters,
     this.textCapitalization,
     this.enabled = true,
+    this.textFieldTrailingActionWidgetBuilder,
+    this.textFieldLeadingActionWidgetBuilder,
+    this.hintMaxLines,
+    this.hideLeadingActionsOnType = true,
   });
 }
 

lib/src/models/models.dart

@@ -20,24 +20,25 @@
  * SOFTWARE.
  */
 export 'chat_bubble.dart';
+export 'config_models/chat_bubble_configuration.dart';
+export 'config_models/chat_view_states_configuration.dart';
+export 'config_models/emoji_message_configuration.dart';
+export 'config_models/feature_active_config.dart';
 export 'config_models/image_message_configuration.dart';
+export 'config_models/link_preview_configuration.dart';
+export 'config_models/message_configuration.dart';
+export 'config_models/message_list_configuration.dart';
 export 'config_models/message_reaction_configuration.dart';
 export 'config_models/profile_circle_configuration.dart';
-export 'config_models/chat_bubble_configuration.dart';
-export 'config_models/replied_message_configuration.dart';
-export 'config_models/swipe_to_reply_configuration.dart';
-export 'config_models/reply_popup_configuration.dart';
 export 'config_models/reaction_popup_configuration.dart';
-export 'config_models/message_list_configuration.dart';
-export 'config_models/emoji_message_configuration.dart';
-export 'config_models/message_configuration.dart';
-export 'config_models/send_message_configuration.dart';
-export 'config_models/link_preview_configuration.dart';
-export 'config_models/type_indicator_configuration.dart';
-export 'config_models/chat_view_states_configuration.dart';
+export 'config_models/replied_message_configuration.dart';
 export 'config_models/replied_msg_auto_scroll_config.dart';
-export 'config_models/feature_active_config.dart';
+export 'config_models/reply_popup_configuration.dart';
 export 'config_models/reply_suggestions_config.dart';
-export 'config_models/suggestion_list_config.dart';
 export 'config_models/scroll_to_bottom_button_config.dart';
+export 'config_models/send_message_configuration.dart';
+export 'config_models/suggestion_list_config.dart';
+export 'config_models/swipe_to_reply_configuration.dart';
+export 'config_models/type_indicator_configuration.dart';
 export 'config_models/voice_message_configuration.dart';
+export 'overlay_action_widget.dart';