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

apurva010 · 2025-06-05T05:28:30Z

Description

ScreenRecording_06-05-2025.10-44-06_1.MP4

Checklist

The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
I have followed the Contributor Guide when preparing my PR.
I have updated/added tests for ALL new/updated/fixed functionality.
I have updated/added relevant documentation in docs and added dartdoc comments with ///.
I have updated/added relevant examples in examples or docs.

Breaking Change?

Yes, this PR is a breaking change.
No, this PR is not a breaking change.

Related Issues

Closes #301 and #318

Copilot

Pull Request Overview

This PR adds support for a plus icon and additional action items in the chat text field, introducing overlay functionality and new configuration options. Key changes include:

Implementation of an animated overlay for action items triggered by the plus icon.
Introduction of new configuration fields (actionItems, plusIcon, plusIconColor, actionWidgetList, onPressedPlusIcon) in the text field configuration.
Addition of the ActionItems enum and ActionWidget class to support these new features.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
lib/src/widgets/chatui_textfield.dart	Added overlay, animation, and plus icon logic to support extra action items.
lib/src/values/enumeration.dart	Introduced the ActionItems enum with helper getters.
lib/src/models/config_models/send_message_configuration.dart	Updated TextFieldConfiguration with new fields and added the ActionWidget class.
CHANGELOG.md	Updated changelog to document the new feature.

Comments suppressed due to low confidence (2)

lib/src/widgets/chatui_textfield.dart:90

[nitpick] Consider adding unit tests to cover the overlay display logic and animation transitions to ensure robust behavior.

void _showOverlay(List<ActionWidget> plusOptions, {GlobalKey? plusIconKey}) {

lib/src/widgets/chatui_textfield.dart:157

Verify that 'withValues' is the intended method for adjusting color opacity; if it is not part of the updated API, consider using 'withOpacity' for clarity and consistency.

color: Colors.black.withValues(alpha: 0.08),

vatsaltanna-simformsolutions · 2025-06-05T06:54:30Z

lib/src/models/config_models/send_message_configuration.dart

+  final List<ActionItems> actionItems;
+
+  /// Color of plus icon in text field
+  final Color? plusIconColor;


Instead of Plus Icon let's call it Custom Action, so user can add whatever icon they want, like we have seen in whatsapp for attachments

aditya-css

Please add migration guide in readme and also add a separate section that shows how to add icons next to textfield and the overlay one.

aditya-css · 2025-06-06T08:13:02Z

lib/src/models/config_models/send_message_configuration.dart

+}
+
+/// Represents a widget that can be used in the plus/attach modal sheet.
+class ActionWidget {


Please move this to a separate file for this.

aditya-css · 2025-06-06T08:13:27Z

lib/src/utils/helper.dart

+import 'package:chatview/chatview.dart';
+import 'package:image_picker/image_picker.dart';
+
+Future<String?> onIconPressed(


Please rename this.

aditya-css · 2025-06-06T08:13:56Z

lib/src/utils/helper.dart

+      imageQuality: config?.imageQuality,
+      preferredCameraDevice: config?.preferredCameraDevice ?? CameraDevice.rear,
+    );
+    String? imagePath = image?.path;


Suggested change

String? imagePath = image?.path;

var imagePath = image?.path;

aditya-css · 2025-06-06T08:14:41Z

lib/src/utils/helper.dart

+      preferredCameraDevice: config?.preferredCameraDevice ?? CameraDevice.rear,
+    );
+    String? imagePath = image?.path;
+    if (config?.onImagePicked != null) {


Seems like an unnecessary check. Please remove it.

It is a callback for image picked.

aditya-css · 2025-06-06T08:17:34Z

lib/src/utils/helper.dart

+    if (config?.onImagePicked != null) {
+      String? updatedImagePath = await config?.onImagePicked!(imagePath);
+      if (updatedImagePath != null) imagePath = updatedImagePath;
+    }


You can rewrite the lines from 16 to 21 as:

final imagePath = await config?.onImagePicked?.call(imagePath); return imagePath ?? image?.path;

aditya-css · 2025-06-06T08:38:25Z

lib/src/widgets/chatui_textfield.dart

                        if ((sendMessageConfig?.allowRecordingVoice ?? false) &&
                            !kIsWeb &&
-                            (Platform.isIOS || Platform.isAndroid))
+                            (Platform.isIOS || Platform.isAndroid)) ...{


The bracket seems unnecessary.

aditya-css · 2025-06-06T08:38:58Z

lib/src/widgets/message_view.dart

 import 'package:chatview/chatview.dart';
+import 'package:chatview/src/extensions/extensions.dart';
 import 'package:chatview/src/widgets/chat_view_inherited_widget.dart';


Please use relative import.

aditya-css · 2025-06-06T08:44:52Z

lib/src/models/config_models/send_message_configuration.dart

@@ -168,6 +160,11 @@ class TextFieldConfiguration {
  /// Default is [true].
  final bool enabled;

+  /// List of options to show in the plus/attach modal sheet
+  final List<ActionWidget> actionWidgetList;


I believe you can remove this.

aditya-css · 2025-06-06T08:45:58Z

lib/src/widgets/action_widgets/custom_action_button.dart

+import 'package:flutter/material.dart';
+
+/// Custom action button that displays a plus icon and shows a horizontal row of options when pressed.
+class CustomActionButton extends TextFieldActionButton {


Please rename this to OverlayActionButton.

aditya-css · 2025-06-06T08:47:12Z

lib/src/widgets/action_widgets/custom_action_button.dart

+    required this.actionWidgets,
+  });
+
+  final List<ActionWidget> actionWidgets;


Suggested change

final List<ActionWidget> actionWidgets;

final List<OverlayActionWidget> actions;

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch from 1e7b83e to 8d78667 Compare June 5, 2025 05:28

apurva010 requested a review from aditya-css June 5, 2025 05:29

vatsaltanna-simformsolutions requested a review from Copilot June 5, 2025 06:50

Copilot AI reviewed Jun 5, 2025

View reviewed changes

vatsaltanna-simformsolutions reviewed Jun 5, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 2 times, most recently from acd28cf to 8ecfa00 Compare June 5, 2025 13:59

aditya-css requested changes Jun 6, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 3 times, most recently from 91d731d to 01c4d8c Compare June 12, 2025 12:33

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

9238657

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch from 01c4d8c to 9238657 Compare June 12, 2025 12:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

apurva010 commented Jun 5, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

vatsaltanna-simformsolutions Jun 5, 2025

Uh oh!

aditya-css left a comment

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

apurva010 Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

aditya-css Jun 6, 2025

Uh oh!

Uh oh!

	String? imagePath = image?.path;
	var imagePath = image?.path;

	final List<ActionWidget> actionWidgets;
	final List<OverlayActionWidget> actions;

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

apurva010 commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Breaking Change?

Related Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aditya-css left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

apurva010 commented Jun 5, 2025 •

edited

Loading