Skip to content

Commit

Permalink
feat: ✨ added reply suggestions functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@vatsaltanna-simformsolutions
vatsaltanna-simformsolutions committed Jun 4, 2024
1 parent 78f8a1b commit 1e5e2f0
Show file tree
Hide file tree
Showing 20 changed files with 771 additions and 309 deletions.
66 changes: 31 additions & 35 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
## [2.0.0] (Unreleased)

* **Fix**: [182](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/182) Fix
send message not working when user start texting after newLine.
* **Feat**: [156](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/156) Added
default avatar, error builder for asset, network and base64 profile image and
cached_network_image for network images.
* **Breaking**: [173](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/173) Added
callback to sort message in chat.
* **Fix**: [181](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/181) Removed
deprecated field `showTypingIndicator` from ChatView.
* **Feat**: [179](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/179) Added reply
suggestions functionality
* **Feat**: [161](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/161) Added field
to set top padding of chat text field.
* **Feat**: [157](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/157) Added onTap
of reacted user from reacted user list.
* **Feat**: [121](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/121) Added support
for configuring the audio recording quality.
* **Feat**: [93](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/93) Added support
that provide date pattern to change chat separation.
* **Fix**: [139](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/139) Added
support to customize view for the reply of any message.
* **Fix**: [174](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/174) Fix
wrong username shown while replying to any messages.
* **Fix**: [134](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/134)
Added a reply message view for custom message type.
* **Feat**: [157](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/157)
Added onTap of reacted user from reacted user list.
* **Fix**: [174](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/174) Fix wrong
username shown while replying to any messages.
* **Fix**: [134](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/134) Added a
reply message view for custom message type.
* **Fix**: [137](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/137) Added
support for cancel voice recording and field to provide cancel record icon.
* **Feat**: [93](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/93) Added support
that provide date pattern to change chat separation.
* **Fix**: [142](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/142) Added
field to provide base64 string data for profile picture.
* **Fix**: [165](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/165) Fix issue
of user reaction callback provides incorrect message object when user react on any message
with double or from reaction sheet.
* **Fix**: [164](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/164)
Add flag to enable/disable chat text field.
* **Feat**: [121](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/121)Added support
for configuring the audio recording quality.
* **Fix**: [131](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/131)
Fix unsupported operation while running on the web.
* **Fix**: [142](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/142) Added field
to provide base64 string data for profile picture.
* **Fix**: [165](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/165) Fix issue of
user reaction callback provides incorrect message object when user react on any message with
double or from reaction sheet.
* **Fix**: [164](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/164) Add flag to
enable/disable chat text field.
* **Fix**: [131](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/131) Fix
unsupported operation while running on the web.
* **Fix**: [160](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/160) Added
configuration for emoji picker sheet.
* **Fix**: [130](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/130) Added
report button for receiver message and update onMoreTap, onReportTap callback.
* **Fix**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added
flag to hide user name in chat.
* **Feat**: [161](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/161) Added
field to set top padding of chat text field.

* **Fix**: [130](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/130) Added report
button for receiver message and update onMoreTap, onReportTap callback.
* **Fix**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added flag
to hide user name in chat.
* **Fix**: [181](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/181) Removed
deprecated field `showTypingIndicator` from ChatView.
* **Fix**: [182](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/182) Fix
send message not working when user start texting after newLine.

## [1.3.1]

Expand Down
109 changes: 104 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
![Banner](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_chat_ui/main/preview/banner.png)

# ChatView
[![chatview](https://img.shields.io/pub/v/chatview?label=chatview)](https://pub.dev/packages/chatview)
[![chatview](https://img.shields.io/pub/v/chatview?label=chatview)](https://pub.dev/packages/chatview)

A Flutter package that allows you to integrate Chat View with highly customization options such as one on one
chat, group chat, message reactions, reply messages, link preview and configurations for overall view.
Expand Down Expand Up @@ -34,7 +34,7 @@ ChatView(
),
```

## Installing
## Installing

1. Add dependency to `pubspec.yaml`

Expand Down Expand Up @@ -434,7 +434,7 @@ ChatView(
```

17. Callback when a user starts/stops typing in `TextFieldConfiguration`

```dart
ChatView(
...
Expand All @@ -459,7 +459,7 @@ ChatView(
```

18. Passing customReceipts builder or handling stuffs related receipts see `ReceiptsWidgetConfig` in outgoingChatBubbleConfig.

```dart
ChatView(
...
Expand Down Expand Up @@ -812,6 +812,103 @@ ChatView(
)
```

31. Reply Suggestions functionalities.

* Add reply suggestions
```dart
_chatController.addReplySuggestions([
SuggestionItemData(text: 'Thanks.'),
SuggestionItemData(text: 'Thank you very much.'),
SuggestionItemData(text: 'Great.')
]);
```
* Remove reply suggestions
```dart
_chatController.removeReplySuggestions();
```
* Update Sugestions Config
```dart
replySuggestionsConfig: ReplySuggestionsConfig(
itemConfig: SuggestionItemConfig(
decoration: BoxDecoration(),
textStyle: TextStyle(),
padding: EdgetInsets.all(8),
customItemBuilder: (index, suggestionItemData) => Container()
),
listConfig: SuggestionListConfig(
decoration: BoxDecoration(),
padding: EdgetInsets.all(8),
itemSeparatorWidth: 8,
axisAlignment: SuggestionListAlignment.left
)
onTap: (item) =>
_onSendTap(item.text, const ReplyMessage(), MessageType.text),
autoDismissOnSelection: true
),
```

32. Added a `replyMessageBuilder` to customize view for the reply.

```dart
ChatView(
...
replyMessageBuilder: (context, state) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(14),
),
),
margin: const EdgeInsets.only(
bottom: 17,
right: 0.4,
left: 0.4,
),
padding: const EdgeInsets.fromLTRB(10, 10, 10, 30),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
state.message,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
IconButton(
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
icon: const Icon(
Icons.close,
size: 16,
),
onPressed: () => ChatView.closeReplyMessageView(context),
),
],
),
],
),
),
);
},
...
)
```

33. Added callback `messageSorter` to sort message in `ChatBackgroundConfiguration`.
```dart
Expand All @@ -832,7 +929,7 @@ ChatView(

## How to use

Check out [blog](https://medium.com/simform-engineering/chatview-a-cutting-edge-chat-ui-solution-7367b1f9d772) for better understanding and basic implementation.
Check out [blog](https://medium.com/simform-engineering/chatview-a-cutting-edge-chat-ui-solution-7367b1f9d772) for better understanding and basic implementation.

Also, for whole example, check out the **example** app in the [example](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/tree/main/example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Expand All @@ -844,6 +941,8 @@ Also, for whole example, check out the **example** app in the [example](https://
<td align="center"><a href="https://github.com/vatsaltanna"><img src="https://avatars.githubusercontent.com/u/25323183?s=100" width="100px;" alt=""/><br /><sub><b>Vatsal Tanna</b></sub></a></td>
<td align="center"><a href="https://github.com/DhvanitVaghani"><img src="https://avatars.githubusercontent.com/u/64645989?v=4" width="100px;" alt=""/><br /><sub><b>Dhvanit Vaghani</b></sub></a></td>
<td align="center"><a href="https://github.com/Ujas-Majithiya"><img src="https://avatars.githubusercontent.com/u/56400956?v=4" width="100px;" alt=""/><br /><sub><b>Ujas Majithiya</b></sub></a></td>
<td align="center"><a href="https://github.com/apurva780"><img src="https://avatars.githubusercontent.com/u/65003381?v=4" width="100px;" alt=""/><br /><sub><b>Apurva Kanthraviya</b></sub></a></td>

</tr>
</table>
<br/>
Expand Down
41 changes: 39 additions & 2 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,20 @@ class _ChatScreenState extends State<ChatScreen> {
_chatController.setTypingIndicator = !_chatController.showTypingIndicator;
}

void receiveMessage() async {
_chatController.addMessage(Message(
id: DateTime.now().toString(),
message: 'I will schedule the meeting.',
createdAt: DateTime.now(),
sendBy: '2'));
await Future.delayed(const Duration(milliseconds: 500));
_chatController.addReplySuggestions([
SuggestionItemData(text: 'Thanks.'),
SuggestionItemData(text: 'Thank you very much.'),
SuggestionItemData(text: 'Great.')
]);
}

@override
Widget build(BuildContext context) {
return Scaffold(
Expand Down Expand Up @@ -125,6 +139,14 @@ class _ChatScreenState extends State<ChatScreen> {
color: theme.themeIconColor,
),
),
IconButton(
tooltip: 'Simulate Message receive',
onPressed: receiveMessage,
icon: Icon(
Icons.supervised_user_circle,
color: theme.themeIconColor,
),
),
],
),
chatBackgroundConfig: ChatBackgroundConfiguration(
Expand Down Expand Up @@ -266,6 +288,22 @@ class _ChatScreenState extends State<ChatScreen> {
swipeToReplyConfig: SwipeToReplyConfiguration(
replyIconColor: theme.swipeToReplyIconColor,
),
replySuggestionsConfig: ReplySuggestionsConfig(
itemConfig: SuggestionItemConfig(
decoration: BoxDecoration(
color: theme.textFieldBackgroundColor,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: theme.outgoingChatBubbleColor ?? Colors.white,
),
),
textStyle: TextStyle(
color: isDarkTheme ? Colors.white : Colors.black,
),
),
onTap: (item) =>
_onSendTap(item.text, const ReplyMessage(), MessageType.text),
),
),
);
}
Expand All @@ -275,10 +313,9 @@ class _ChatScreenState extends State<ChatScreen> {
ReplyMessage replyMessage,
MessageType messageType,
) {
final id = int.parse(Data.messageList.last.id) + 1;
_chatController.addMessage(
Message(
id: id.toString(),
id: DateTime.now().toString(),
createdAt: DateTime.now(),
message: message,
sendBy: currentUser.id,
Expand Down
24 changes: 24 additions & 0 deletions lib/src/controller/chat_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
*/
import 'dart:async';

import 'package:chatview/src/widgets/suggestions/suggestion_list.dart';
import 'package:flutter/material.dart';

import '../models/models.dart';
Expand All @@ -42,6 +43,19 @@ class ChatController {
/// For more functionalities see [ValueNotifier].
ValueNotifier<bool> get typingIndicatorNotifier => _showTypingIndicator;

/// Allow user to add reply suggestions defaults to empty.
final ValueNotifier<List<SuggestionItemData>> _replySuggestion =
ValueNotifier([]);

/// newSuggestions as [ValueNotifier] for [SuggestionList] widget's [ValueListenableBuilder].
/// Use this to listen when suggestion gets added
/// ```dart
/// chatcontroller.newSuggestions.addListener((){});
/// ```
/// For more functionalities see [ValueNotifier].
ValueNotifier<List<SuggestionItemData>> get newSuggestions =>
_replySuggestion;

/// Getter for typingIndicator value instead of accessing [_showTypingIndicator.value]
/// for better accessibility.
bool get showTypingIndicator => _showTypingIndicator.value;
Expand Down Expand Up @@ -74,6 +88,16 @@ class ChatController {
messageStreamController.sink.add(initialMessageList);
}

/// Used to add reply suggestions.
void addReplySuggestions(List<SuggestionItemData> suggestions) {
_replySuggestion.value = suggestions;
}

/// Used to remove reply suggestions.
void removeReplySuggestions() {
_replySuggestion.value = [];
}

/// Function for setting reaction on specific chat bubble
void setReaction({
required String emoji,
Expand Down
12 changes: 12 additions & 0 deletions lib/src/extensions/extensions.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
import 'package:chatview/chatview.dart';
import 'package:chatview/src/widgets/chat_view_inherited_widget.dart';
import 'package:chatview/src/widgets/profile_image_widget.dart';
import 'package:chatview/src/widgets/suggestions/suggestions_config_inherited_widget.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../utils/constants/constants.dart';
Expand Down Expand Up @@ -129,4 +130,15 @@ extension ChatViewStateTitleExtension on String? {
/// Extension on State for accessing inherited widget.
extension StatefulWidgetExtension on State {
ChatViewInheritedWidget? get provide => ChatViewInheritedWidget.of(context);

ReplySuggestionsConfig? get suggestionsConfig =>
SuggestionsConfigIW.of(context)?.suggestionsConfig;
}

/// Extension on State for accessing inherited widget.
extension BuildContextExtension on BuildContext {
ChatViewInheritedWidget? get provide => ChatViewInheritedWidget.of(this);

ReplySuggestionsConfig? get suggestionsConfig =>
SuggestionsConfigIW.of(this)?.suggestionsConfig;
}
4 changes: 4 additions & 0 deletions lib/src/models/models.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,7 @@ export 'chat_view_states_configuration.dart';
export 'reaction.dart';
export 'replied_msg_auto_scroll_config.dart';
export 'feature_active_config.dart';
export 'suggestion_item_data.dart';
export 'suggestions_config.dart';
export 'suggestion_list_config.dart';
export 'suggestion_item_config.dart';
2 changes: 1 addition & 1 deletion lib/src/models/profile_circle.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class ProfileCircleConfiguration {

/// Progress indicator builder for network image
final NetworkImageProgressIndicatorBuilder?
networkImageProgressIndicatorBuilder;
networkImageProgressIndicatorBuilder;

const ProfileCircleConfiguration({
this.onAvatarTap,
Expand Down
Loading

0 comments on commit 1e5e2f0

Please sign in to comment.