Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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. 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)
Expand Down
198 changes: 32 additions & 166 deletions doc/documentation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,182 +530,48 @@ 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 for text field

- Renamed `sendBy` field to `sentBy` in `Message` class.
- Renamed `chatUsers` field to `otherUsers` in `ChatController` class.
- Add `CameraActionButton` and `GalleryActionButton` widgets to 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, you can use `textFieldActionWidgets`.

- 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',
...
}
)
```

**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

**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',
...
}
)
```

**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,
...
textFieldConfig: TextFieldConfiguration(
textFieldActionWidgets: [
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);
}
},
),
],
),
...
```

**After:**
```dart
// Use it with your ChatController instance
_chatController.setTypingIndicator = true; // for showing indicator
_chatController.setTypingIndicator = false; // for hiding indicator
```

# Contributors

Expand Down
10 changes: 5 additions & 5 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions lib/chatview.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
25 changes: 16 additions & 9 deletions lib/src/models/config_models/send_message_configuration.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;

Expand All @@ -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,
Expand Down Expand Up @@ -168,6 +160,17 @@ class TextFieldConfiguration {
/// Default is [true].
final bool enabled;

/// List of widgets to be shown as action widget in text field.
final List<Widget>? textFieldTrailingActionWidgets;

/// List of widgets to be shown as leading action widget in text field.
final List<Widget>? textFieldLeadingActionWidgets;

/// hint text max lines in text field.
final int? hintMaxLines;

final bool hideLeadingActionsOnType;

const TextFieldConfiguration({
this.contentPadding,
this.maxLines,
Expand All @@ -184,6 +187,10 @@ class TextFieldConfiguration {
this.inputFormatters,
this.textCapitalization,
this.enabled = true,
this.textFieldLeadingActionWidgets,
this.textFieldTrailingActionWidgets,
this.hintMaxLines,
this.hideLeadingActionsOnType = true,
});
}

Expand Down
27 changes: 14 additions & 13 deletions lib/src/models/models.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
15 changes: 15 additions & 0 deletions lib/src/models/overlay_action_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import 'package:chatview/chatview.dart';
import 'package:flutter/material.dart';

/// Represents a widget that can be used in the plus/attach modal sheet.
class OverlayActionWidget {
final Widget icon;
final String label;
final VoidCallBack onTap;

const OverlayActionWidget({
required this.icon,
required this.label,
required this.onTap,
});
}
Loading