Skip to content

Commit a6f1ad1

Browse files
japanshah-simformjapanshah-simform
committed
fix: 🐛 ensure images are properly added to preview when sending messages with text
1 parent 5385ee5 commit a6f1ad1

8 files changed

Lines changed: 350 additions & 108 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
Rendering issue in attached image preview when sending message on web.
55
* **Feat**: [420](https://github.com/SimformSolutionsPvtLtd/chatview/pull/420) Added support for
66
`playerMode` in `VoiceMessageConfiguration` with `single` and `multi`.
7+
* **Breaking**: [430](https://github.com/SimformSolutionsPvtLtd/chatview/pull/430) Removed
8+
`shouldSendImageWithText` parameter. The example app now demonstrates an image preview screen with optional text
9+
captions using `GalleryActionButton` and a custom preview handler to achieve similar functionality.
710

811
## [3.0.0]
912

‎doc/documentation.md‎

Lines changed: 91 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Flutter applications with [Flexible Backend Integration](https://pub.dev/package
66
## Preview
77

88
| ChatList | ChatView |
9-
|------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|
9+
| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
1010
| ![ChatList_Preview](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/chatview/main/preview/chatlist.gif) | ![ChatView Preview](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/chatview/main/preview/chatview.gif) |
1111

1212
## Features
@@ -46,20 +46,19 @@ For a live web demo, visit [Chat View Example](https://simformsolutionspvtltd.gi
4646
## Compatibility with [chatview_connect](https://pub.dev/packages/chatview_connect)
4747

4848
| chatview version | [chatview_connect](https://pub.dev/packages/chatview_connect) version |
49-
|------------------|-----------------------------------------------------------------------|
49+
| ---------------- | --------------------------------------------------------------------- |
5050
| `>=2.4.1 <3.0.0` | `0.0.1` |
5151
| `>= 3.0.0` | `3.0.0` |
5252

5353
## Compatible Message Types
5454

5555
| Message Types | Android | iOS | MacOS | Web | Linux | Windows |
56-
|:---------------:|:-------:|:---:|:-----:|:---:|:-----:|:-------:|
56+
| :-------------: | :-----: | :-: | :---: | :-: | :---: | :-----: |
5757
| Text messages | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
5858
| Image messages | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
59-
| Voice messages | ✔️ | ✔️ | ❌ | ❌ | ❌ | ❌ |
59+
| Voice messages | ✔️ | ✔️ | ❌ | ❌ | ❌ | ❌ |
6060
| Custom messages | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
6161

62-
6362
# Installation
6463

6564
## Adding the dependency
@@ -84,6 +83,7 @@ import 'package:chatview/chatview.dart';
8483
### For Image Picker
8584

8685
#### iOS
86+
8787
Add the following keys to your _Info.plist_ file, located in `<project root>/ios/Runner/Info.plist`:
8888

8989
```xml
@@ -98,24 +98,30 @@ Add the following keys to your _Info.plist_ file, located in `<project root>/ios
9898
### For Voice Messages
9999

100100
#### iOS
101-
* Add this row in `ios/Runner/Info.plist`:
101+
102+
- Add this row in `ios/Runner/Info.plist`:
103+
102104
```xml
103105
<key>NSMicrophoneUsageDescription</key>
104106
<string>This app requires Mic permission.</string>
105107
```
106108

107-
* This plugin requires iOS 13.0 or higher. Add this line in `Podfile`:
109+
- This plugin requires iOS 13.0 or higher. Add this line in `Podfile`:
110+
108111
```ruby
109112
platform :ios, '13.0'
110113
```
111114

112115
#### Android
113-
* Change the minimum Android SDK version to 21 (or higher) in your `android/app/build.gradle` file:
116+
117+
- Change the minimum Android SDK version to 21 (or higher) in your `android/app/build.gradle` file:
118+
114119
```gradle
115120
minSdkVersion 21
116121
```
117122

118-
* Add RECORD_AUDIO permission in `AndroidManifest.xml`:
123+
- Add RECORD_AUDIO permission in `AndroidManifest.xml`:
124+
119125
```xml
120126
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
121127
```
@@ -499,7 +505,7 @@ ChatList(
499505
)
500506
```
501507

502-
## ChatList States Configuration
508+
## ChatList States Configuration
503509

504510
```dart
505511
ChatList(
@@ -597,7 +603,7 @@ void onSendTap(String message, ReplyMessage replyMessage, MessageType messageTyp
597603
replyMessage: replyMessage,
598604
messageType: messageType,
599605
);
600-
606+
601607
// Add message to chat controller
602608
chatController.addMessage(newMessage);
603609
}
@@ -677,14 +683,14 @@ ChatView(
677683

678684
### Loading Old Reply Messages
679685

680-
The `loadOldReplyMessage` callback is essential for handling replies to messages that aren't
681-
currently loaded in the chat view. When a user taps on a replied message, ChatView automatically
682-
searches for the original message in the current message list. If the original message isn't
683-
found (typically because it's an older message), this callback is triggered to load the
686+
The `loadOldReplyMessage` callback is essential for handling replies to messages that aren't
687+
currently loaded in the chat view. When a user taps on a replied message, ChatView automatically
688+
searches for the original message in the current message list. If the original message isn't
689+
found (typically because it's an older message), this callback is triggered to load the
684690
necessary historical messages.
685691

686-
It is recommended to fetch messages such that the target message would fall in the middle of the
687-
loaded messages, i.e., if the target message id is 25 and page size is 20, then load messages
692+
It is recommended to fetch messages such that the target message would fall in the middle of the
693+
loaded messages, i.e., if the target message id is 25 and page size is 20, then load messages
688694
with ids from 15 to 35.
689695

690696
#### Example:
@@ -858,7 +864,6 @@ ChatView(
858864
)
859865
```
860866

861-
862867
## Text Selection Config
863868

864869
```dart
@@ -867,17 +872,17 @@ ChatView(
867872
textSelectionConfig: TextSelectionConfig(
868873
// Use platform-specific text selection controls (default is null for platform default)
869874
selectionControls: null,
870-
875+
871876
// Focus node for managing text selection focus
872877
focusNode: FocusNode(),
873-
878+
874879
// Callback triggered when text selection changes
875880
onSelectionChanged: (SelectedContent? content) {
876881
if (content != null) {
877882
debugPrint('Selected text: ${content.plainText}');
878883
}
879884
},
880-
885+
881886
// Customize the context menu shown during text selection
882887
contextMenuBuilder: (context, selectableRegionState) {
883888
return AdaptiveTextSelectionToolbar(
@@ -897,10 +902,10 @@ ChatView(
897902
],
898903
);
899904
},
900-
905+
901906
// Configure the magnifier shown during text selection
902907
magnifierConfiguration: const TextMagnifierConfiguration(),
903-
908+
904909
// Customize text selection theme (colors, handle size, etc.)
905910
themeData: const TextSelectionThemeData(
906911
cursorColor: Colors.blue,
@@ -914,7 +919,7 @@ ChatView(
914919

915920
## Two-Way Pagination
916921

917-
ChatView supports two-way pagination for efficiently loading messages in both directions -
922+
ChatView supports two-way pagination for efficiently loading messages in both directions -
918923
loading older messages when scrolling to the top and newer messages when scrolling to the bottom.
919924
This feature enables lazy loading and memory optimization for large chat histories.
920925

@@ -961,7 +966,7 @@ Widget build(BuildContext context) {
961966
limit: 20,
962967
),
963968
};
964-
969+
965970
// Add the loaded messages to the chat controller
966971
_chatController.loadMoreData(
967972
newMessages,
@@ -979,7 +984,7 @@ Widget build(BuildContext context) {
979984
2. **Error Handling**: Always handle API errors gracefully in your `loadMoreData` callback
980985
3. **Loading States**: Use the built-in loading indicators or customize them for better UX
981986
4. **Pagination State**: Properly manage `isLastPage` to prevent unnecessary API calls
982-
5. **Reference Messages**: Use the provided reference message for cursor-based pagination for
987+
5. **Reference Messages**: Use the provided reference message for cursor-based pagination for
983988
better performance
984989

985990
## Link Preview Configuration
@@ -1018,7 +1023,7 @@ ChatView(
10181023
flashingCircleBrightColor: Colors.grey,
10191024
flashingCircleDarkColor: Colors.black,
10201025
// For custom indicator
1021-
// padding: const EdgeInsets.only(left: 12),
1026+
// padding: const EdgeInsets.only(left: 12),
10221027
// customIndicator: Container(
10231028
// margin: const EdgeInsets.only(left: 8),
10241029
// decoration: const BoxDecoration(
@@ -1125,6 +1130,7 @@ ChatView(
11251130
```
11261131

11271132
## Internationalization
1133+
11281134
ChatView supports internationalization (i18n) for various languages. You can set the locale using the `PackageString.setLocale('en')`.
11291135

11301136
```dart
@@ -1151,51 +1157,65 @@ PackageStrings.addLocaleObject(
11511157
PackageStrings.setLocale('es');
11521158
```
11531159

1154-
## Send Image With Message
1155-
You can send images along with your messages by enabling the `shouldSendImageWithText` flag in `sendMessageConfig` all the other things will be handled by the package itself. Here's how to do it:
1156-
1157-
```dart
1158-
sendMessageConfig: SendMessageConfiguration(
1159-
shouldSendImageWithText: true, // Enable sending images with text
1160-
),
1161-
```
1160+
## Image Preview and Sending Flow
11621161

1163-
You can also customize the view by using the `selectedImageViewBuilder` field of the `sendMessageConfig`:
1162+
You can customize the view for sending images by using the `GalleryActionButton` in `trailingActions`. Here's a practical example that opens an image preview screen before sending:
11641163

11651164
```dart
11661165
sendMessageConfig: SendMessageConfiguration(
1167-
shouldSendImageWithText: true,
1168-
selectedImageViewBuilder: (images, onImageRemove) {
1169-
if (images.isNotEmpty) {
1170-
return SizedBox(
1171-
width: MediaQuery.sizeOf(context).width,
1172-
child: Stack(
1173-
children: [
1174-
Image.file(
1175-
File(images.first),
1176-
height: 100,
1177-
),
1178-
Positioned(
1179-
right: 0,
1180-
top: 0,
1181-
child: IconButton(
1182-
icon: const Icon(
1183-
Icons.close,
1166+
textFieldConfig: TextFieldConfiguration(
1167+
trailingActions: (context, controller) => [
1168+
GalleryActionButton(
1169+
icon: Icon(
1170+
Icons.photo_rounded,
1171+
size: 30,
1172+
color: _theme.iconColor,
1173+
),
1174+
onPressed: (path, replyMessage) {
1175+
if (path?.isEmpty ?? true) return;
1176+
// Open fullscreen image preview before sending
1177+
Navigator.of(context).push(
1178+
MaterialPageRoute<void>(
1179+
fullscreenDialog: true,
1180+
builder: (_) => ImagePreviewScreen(
1181+
imagePath: path!,
1182+
replyMessage: replyMessage,
1183+
chatName: widget.chat.name,
1184+
onSend: (imagePath, caption, reply) {
1185+
// Create a timestamp for unique message IDs
1186+
final timeStamp = DateTime.now().microsecondsSinceEpoch;
1187+
// Add image message
1188+
_chatController.addMessage(
1189+
Message(
1190+
id: '${timeStamp}_img',
1191+
message: imagePath,
1192+
createdAt: DateTime.now(),
1193+
messageType: MessageType.image,
1194+
sentBy: _chatController.currentUser.id,
1195+
replyMessage: reply ?? const ReplyMessage(),
1196+
),
1197+
);
1198+
1199+
// Add caption if provided
1200+
if (caption.isNotEmpty) {
1201+
_chatController.addMessage(
1202+
Message(
1203+
id: '${timeStamp}_cap',
1204+
message: caption,
1205+
createdAt: DateTime.now(),
1206+
messageType: MessageType.text,
1207+
sentBy: _chatController.currentUser.id,
1208+
),
1209+
);
1210+
}
1211+
},
11841212
),
1185-
onPressed: () {
1186-
onImageRemove.call(
1187-
imagePath: images.first,
1188-
);
1189-
},
1190-
),
11911213
),
1192-
],
1193-
),
1194-
);
1195-
} else {
1196-
return const SizedBox.shrink();
1197-
}
1198-
},
1214+
);
1215+
},
1216+
),
1217+
],
1218+
),
11991219
),
12001220
```
12011221

@@ -1205,10 +1225,10 @@ Easily connect Chatview UI to any backend using the [**Chatview Connect**](https
12051225
package. It offers ready-to-use solutions for
12061226
real-time messaging with supporting media uploads.
12071227

1208-
12091228
# Migration Guide
12101229

12111230
## Migration Guide for ChatView 3.0.0
1231+
12121232
This guide will help you migrate your code from previous versions of ChatView to version 3.0.0.
12131233

12141234
## Key Changes
@@ -1220,6 +1240,7 @@ encapsulates the recorder settings for both iOS and Android platforms. The `andr
12201240
property has been removed so whatever format will be given by the encoder that will be used.
12211241

12221242
Previous Usage:
1243+
12231244
```dart
12241245
ChatView(
12251246
sendMessageConfig: SendMessageConfiguration(
@@ -1234,6 +1255,7 @@ ChatView(
12341255
```
12351256

12361257
New Usage:
1258+
12371259
```dart
12381260
ChatView(
12391261
sendMessageConfig: SendMessageConfiguration(
@@ -1255,6 +1277,7 @@ ChatView(
12551277
### Text Field Action Items
12561278

12571279
You can now add action buttons to the input field using two builders:
1280+
12581281
- `leadingActions`: widgets shown before the text field.
12591282
- `trailingActions`: widgets shown after the text field.
12601283

@@ -1310,7 +1333,7 @@ textFieldConfig: TextFieldConfiguration(
13101333
## Main Contributors
13111334

13121335
| ![img](https://avatars.githubusercontent.com/u/25323183?v=4&s=200) | ![img](https://avatars.githubusercontent.com/u/56400956?v=4&s=200) | ![img](https://avatars.githubusercontent.com/u/65003381?v=4&s=200) | ![img](https://avatars.githubusercontent.com/u/41247722?v=4&s=200) | ![img](https://avatars.githubusercontent.com/u/72062416?v=4&s=200) |
1313-
|:------------------------------------------------------------------:|:------------------------------------------------------------------:|:------------------------------------------------------------------:|:------------------------------------------------------------------:|:------------------------------------------------------------------:|
1336+
| :----------------------------------------------------------------: | :----------------------------------------------------------------: | :----------------------------------------------------------------: | :----------------------------------------------------------------: | :----------------------------------------------------------------: |
13141337
| [Vatsal Tanna](https://github.com/vatsaltanna) | [Ujas Majithiya](https://github.com/Ujas-Majithiya) | [Apurva Kanthraviya](https://github.com/apurva780) | [Aditya Chavda](https://github.com/aditya-chavda) | [Yash Dhrangdhariya](https://github.com/Yash-Dhrangdhariya) |
13151338

13161339
## How to Contribute

0 commit comments

Comments
 (0)