feat: Added new docs
This commit is contained in:
Deven Joshi
@@ -4,3 +4,47 @@ sidebar_position: 18
|
||||
title: Reactions
|
||||
---
|
||||
|
||||
Stream Chat has built-in support for user Reactions. Common examples are likes, comments, loves, etc. Reactions can be customized so that you are able to use any type of reaction your application requires.
|
||||
|
||||
|
||||
Similar to other objects in Stream Chat, reactions allow you to add custom data to the reaction of your choice. This is helpful if you want to customize the reaction logic.
|
||||
|
||||
<b>Note:</b> Custom data for reactions is limited to 1KB.
|
||||
|
||||
```dart
|
||||
await channel.sendReaction("messageID", "like", extraData: {"customField": 1});
|
||||
```
|
||||
|
||||
### Removing a Reaction
|
||||
|
||||
```dart
|
||||
await channel.deleteReaction("messageID", "like");
|
||||
```
|
||||
|
||||
### Paginating Reactions
|
||||
|
||||
Messages returned by the APIs automatically include the 10 most recent reactions.
|
||||
You can also retrieve more reactions and paginate using the following logic:
|
||||
|
||||
```dart
|
||||
// get the first 10 reactions
|
||||
await channel.getReactions("messageID", PaginationParams(limit: 10));
|
||||
|
||||
// get 3 reactions past the first 10
|
||||
await channel.getReactions("messageID", PaginationParams(limit: 3, offset:10));
|
||||
```
|
||||
|
||||
### Cumulative (Clap) Reactions
|
||||
|
||||
You can use the Reactions API to build something similar to Medium's clap reactions.
|
||||
If you are not familiar with this, Medium allows you to clap articles more than once and shows the sum of all claps from all users.
|
||||
|
||||
To do this, you only need to include a score for the reaction (ie. user X clapped 25 times) and the API will return the sum of all reaction scores as well as each user individual scores (ie. clapped 475 times, user Y clapped 14 times).
|
||||
|
||||
```dart
|
||||
// user claps 5 times on a message
|
||||
await channel.sendReaction("messageID", "like", score: 5);
|
||||
|
||||
// same user claps 20 times more
|
||||
await channel.sendReaction("messageID", "like", score: 25);
|
||||
```
|
||||
@@ -4,3 +4,28 @@ sidebar_position: 20
|
||||
title: Searching Messages
|
||||
---
|
||||
|
||||
Message search is built-in to the chat API. You can enable and/or disable the search indexing on a per channel type.
|
||||
The command shown below selects the channels in which John is a member.
|
||||
Next, it searches the messages in those channels for the keyword “'supercalifragilisticexpialidocious'”:
|
||||
|
||||
```dart
|
||||
final search = await client.search(
|
||||
Filter.in_('members', ['john']),
|
||||
query: 'supercalifragilisticexpialidocious',
|
||||
paginationParams: PaginationParams(
|
||||
limit: 2,
|
||||
offset: 0
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
Pagination works via the standard limit and offset parameters. The first argument, filter, uses a MongoDB style query expression.
|
||||
|
||||
We do not run MongoDB on the backend, so only a subset of the standard MongoDB filters are supported.
|
||||
Additionally, this endpoint can be used to search for messages that have attachments.
|
||||
|
||||
```dart
|
||||
// Search file of type videos
|
||||
final response = await channel.search(messageFilter: Filter.in_('attachments.type', ['video']));
|
||||
return response;
|
||||
```
|
||||
@@ -4,3 +4,51 @@ sidebar_position: 19
|
||||
title: Threads And Replies
|
||||
---
|
||||
|
||||
Threads and replies provide your users with a way to go into more detail about a specific topic.
|
||||
|
||||
This can be very helpful to keep the conversation organized and reduce noise.
|
||||
To create a thread you simply send a message with a `parent_id`. Have a look at the example below:
|
||||
|
||||
```dart
|
||||
final reply = await channel.sendMessage(
|
||||
Message(text: 'Hey, I am replying to a message!',
|
||||
parentId: parentID,
|
||||
showInChannel: false,
|
||||
));
|
||||
```
|
||||
|
||||
If you specify `show_in_channel`, the message will be visible both in a thread of replies as well as the main channel.
|
||||
Messages inside a thread can also have reactions, attachments and mention as any other message.
|
||||
|
||||
### Thread Pagination
|
||||
|
||||
When you read a channel you do not receive messages inside threads.
|
||||
The parent message includes the count of replies which it is usually what apps show as the link to the thread screen.
|
||||
Reading a thread and paginating its messages works in a very similar way as paginating a channel.
|
||||
|
||||
```dart
|
||||
// retrieve the first 20 messages inside the thread
|
||||
await channel.getReplies(parentMessageId, PaginationParams(limit: 20));
|
||||
|
||||
// retrieve the 20 more messages before the message with id "42"
|
||||
await channel.getReplies(parentMessageId, PaginationParams(limit: 20, lessThanOrEqual: '42'));
|
||||
```
|
||||
|
||||
### Quote Message
|
||||
|
||||
Instead of replying in a thread, it's also possible to quote a message. Quoting a message doesn't result in the creation of a thread;
|
||||
the message is quoted inline.
|
||||
|
||||
To quote a message, simply provide the `quoted_message_id` field when sending a message:
|
||||
|
||||
```dart
|
||||
// Create the initial message
|
||||
await channel.sendMessage(Message(id: 'first_message_id', text: 'The initial message' ));
|
||||
|
||||
// Quote the initial message
|
||||
final res = await channel.sendMessage(Message(
|
||||
id: 'message_with_quoted_message',
|
||||
text: 'This is the first message that quotes another message',
|
||||
quotedMessageId: 'first_message_id',
|
||||
));
|
||||
```
|
||||
@@ -4,3 +4,98 @@ sidebar_position: 17
|
||||
title: Uploading Files
|
||||
---
|
||||
|
||||
The `channel.sendImage` and `channel.sendFile` methods make it easy to upload files.
|
||||
|
||||
This functionality defaults to using the Stream CDN. If you would like, you can easily change the logic to upload to your own CDN of choice.
|
||||
The maximum file size is 20mb for the Stream Chat CDN.
|
||||
|
||||
```dart
|
||||
final client = StreamChatClient('api-key');
|
||||
var attachment = Attachment();
|
||||
|
||||
// Upload an image without monitoring send progress
|
||||
client.sendImage(image, channelId, channelType).then((response) {
|
||||
// Successful upload, you can now attach this image
|
||||
// to an message that you then send to a channel
|
||||
final imageUrl = response.file;
|
||||
attachment = attachment.copyWith(
|
||||
type: 'image',
|
||||
imageUrl: imageUrl,
|
||||
);
|
||||
final message = Message(attachments: [attachment]);
|
||||
client.sendMessage(message, channelId, channelType);
|
||||
}).catchError((error, stk) {
|
||||
// Handle error
|
||||
});
|
||||
|
||||
// Upload an file, monitoring the progress with a onSendProgress callback
|
||||
await client.sendFile(
|
||||
file,
|
||||
channelId,
|
||||
channelType,
|
||||
onSendProgress: (sent, total) {
|
||||
// Handle the send progress
|
||||
attachment = attachment.copyWith(
|
||||
uploadState: UploadState.inProgress(
|
||||
uploaded: sent,
|
||||
total: total,
|
||||
),
|
||||
);
|
||||
},
|
||||
).then((response) {
|
||||
// Successful upload, you can now attach this file
|
||||
// to an message that you then send to a channel
|
||||
final fileUrl = response.file;
|
||||
attachment = attachment.copyWith(
|
||||
type: 'file',
|
||||
assetUrl: fileUrl,
|
||||
uploadState: UploadState.success(),
|
||||
);
|
||||
final message = Message(attachments: [attachment]);
|
||||
client.sendMessage(message, channelId, channelType);
|
||||
}).catchError((error, stk) {
|
||||
// Handle error
|
||||
attachment = attachment.copyWith(
|
||||
uploadState: UploadState.failed(error: error),
|
||||
);
|
||||
});
|
||||
|
||||
// Alternatively you can call the sendMessage directly on the channel
|
||||
// which will automatically handle all the upload process of the provided
|
||||
// attachments.
|
||||
final channel = client.channel(channelType, id: channelId);
|
||||
|
||||
// Creating a message object with multiple local attachments
|
||||
final message = Message(text: 'Hello', attachments: [
|
||||
Attachment(
|
||||
type: 'image',
|
||||
file: AttachmentFile(path: 'imagePath/imageName.png'),
|
||||
),
|
||||
Attachment(
|
||||
type: 'file',
|
||||
file: AttachmentFile(path: 'filePath/fileName.pdf'),
|
||||
),
|
||||
]);
|
||||
|
||||
// Sending the message to the channel
|
||||
await channel.sendMessage(message);
|
||||
```
|
||||
|
||||
In the code example above, note how the message attachments are created after the files are uploaded. The React components support regular uploads, clipboard pasting, drag and drop, as well as URL enrichment via built-in open-graph scraping. As a bonus, the Stream CDN will automatically handle image resizing for you.
|
||||
|
||||
### Using Your Own CDN
|
||||
|
||||
All 5 SDKs make it easy to use your own CDN for uploads. The code examples below show how to change where files are uploaded:
|
||||
|
||||
```dart
|
||||
// Set a custom FileUploader implementation when building your client
|
||||
final client = StreamChatClient(
|
||||
'api-key',
|
||||
attachmentFileUploader: MyFileUploader(),
|
||||
);
|
||||
```
|
||||
|
||||
You'll have to create your own implementation of the `AttachmentFileUploader` interface,
|
||||
and any upload calls will be sent to that implementation.
|
||||
Take a look [at the interface](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat/lib/src/attachment_file_uploader.dart#L7)
|
||||
and [our own default implementation of it](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat/lib/src/attachment_file_uploader.dart#L58) for more info.
|
||||
Reference in New Issue
Block a user