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)
 
+* **Feat**: [318](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/318)
+  Provide support for action items on the chat text field. Also, provide a way to add plus/attach
+  button to open the overlay for action items.
 * **Fix**: [303](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/303)
   Hit ENTER button on PC keyboard, then send out message immediately
 * **Fix**: [289](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/289)

example/lib/main.dart

@@ -43,7 +43,7 @@ class _ChatScreenState extends State<ChatScreen> {
     _chatController = ChatController(
       initialMessageList: Data.messageList,
       scrollController: ScrollController(),
-      currentUser: ChatUser(
+      currentUser: const ChatUser(
         id: '1',
         name: 'Flutter',
         profilePhoto: Data.profileImage,

lib/src/models/config_models/send_message_configuration.dart

@@ -21,11 +21,12 @@
  */
 
 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/enumeration.dart';
 import '../../values/typedefs.dart';
 
 class SendMessageConfiguration {
@@ -168,6 +169,21 @@ class TextFieldConfiguration {
   /// Default is [true].
   final bool enabled;
 
+  /// List of action items to show in the text field
+  final List<ActionItems> actionItems;
+
+  /// Color of plus icon in text field
+  final Color? plusIconColor;
+
+  /// Icon to show in the text field for plus/attach action
+  final Icon? plusIcon;
+
+  /// List of options to show in the plus/attach modal sheet
+  final List<ActionWidget> actionWidgetList;
+
+  /// Callback when plus icon is pressed
+  final VoidCallBack? onPressedPlusIcon;
+
   const TextFieldConfiguration({
     this.contentPadding,
     this.maxLines,
@@ -184,6 +200,27 @@ class TextFieldConfiguration {
     this.inputFormatters,
     this.textCapitalization,
     this.enabled = true,
+    this.actionItems = const [
+      ActionItems.camera,
+      ActionItems.gallery,
+    ],
+    this.plusIcon,
+    this.plusIconColor,
+    this.actionWidgetList = const [],
+    this.onPressedPlusIcon,
+  });
+}
+
+/// Represents a widget that can be used in the plus/attach modal sheet.
+class ActionWidget {
+  final Widget icon;
+  final String label;
+  final VoidCallBack onTap;
+
+  const ActionWidget({
+    required this.icon,
+    required this.label,
+    required this.onTap,
   });
 }
 

lib/src/values/enumeration.dart

@@ -22,8 +22,8 @@
 
 // Different types Message of ChatView
 
-import 'package:flutter/material.dart';
 import 'package:chatview_utils/chatview_utils.dart';
+import 'package:flutter/material.dart';
 
 enum ShowReceiptsIn { all, lastMessage }
 
@@ -73,3 +73,16 @@ enum SuggestionItemsType {
 
   bool get isMultilineType => this == SuggestionItemsType.multiline;
 }
+
+/// Represents the type of action items in the chat view text field.
+enum ActionItems {
+  camera,
+  gallery,
+  plus;
+
+  bool get isCamera => this == ActionItems.camera;
+
+  bool get isGallery => this == ActionItems.gallery;
+
+  bool get isPlus => this == ActionItems.plus;
+}