Skip to content

Commit 87e034e

Browse files
antoine92190antoine92190
committed
(docs) add multiple files support
1 parent 7c735a4 commit 87e034e

File tree

1 file changed

+43
-39
lines changed

1 file changed

+43
-39
lines changed

‎README.md

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ You can then use the [textarea-action-handler](#events-api) event to call your o
397397

398398
**(21)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
399399

400-
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files
400+
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
401401

402402
**(22)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
403403

@@ -481,7 +481,7 @@ rooms="[
481481

482482
### Messages prop
483483

484-
Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported.<br><br>
484+
Message objects are rendered differently depending on their type. Text, emoji, image, video and file types are supported.<br><br>
485485
Each message object has a `senderId` field which holds the id of the corresponding agent. If `senderId` matches the `currentUserId` prop, specific UI and actions will be implemented.<br><br>
486486
Notes:
487487

@@ -514,15 +514,17 @@ messages="[
514514
deleted: false,
515515
disableActions: false,
516516
disableReactions: false,
517-
file: {
518-
name: 'My File',
519-
size: 67351,
520-
type: 'png',
521-
audio: true,
522-
duration: 14.4,
523-
url: 'https://firebasestorage.googleapis.com/...',
524-
preview: 'data:image/png;base64,iVBORw0KGgoAA...'
525-
},
517+
files: [
518+
{
519+
name: 'My File',
520+
size: 67351,
521+
type: 'png',
522+
audio: true,
523+
duration: 14.4,
524+
url: 'https://firebasestorage.googleapis.com/...',
525+
preview: 'data:image/png;base64,iVBORw0KGgoAA...'
526+
}
527+
],
526528
reactions: {
527529
😁: [
528530
1234, // USER_ID
@@ -535,15 +537,17 @@ messages="[
535537
replyMessage: {
536538
content: 'Reply Message',
537539
senderId: 4321,
538-
file: {
539-
name: 'My Replied File',
540-
size: 67351,
541-
type: 'png',
542-
audio: true,
543-
duration: 14.4,
544-
url: 'https://firebasestorage.googleapis.com/...',
545-
preview: 'data:image/png;base64,iVBORw0KGgoAA...'
546-
}
540+
files: [
541+
{
542+
name: 'My Replied File',
543+
size: 67351,
544+
type: 'png',
545+
audio: true,
546+
duration: 14.4,
547+
url: 'https://firebasestorage.googleapis.com/...',
548+
preview: 'data:image/png;base64,iVBORw0KGgoAA...'
549+
}
550+
]
547551
},
548552
}
549553
]"
@@ -553,24 +557,24 @@ messages="[
553557

554558
## Events API
555559

556-
| <div style="width:230px">Event</div> | Params | Fires when a user |
557-
| ------------------------------------ | ------------------------------------------------------------------------ | ----------------------------------------------- |
558-
| `fetch-messages`(1) | `{ room, options }` | Scrolled on top to load more messages |
559-
| `fetch-more-rooms`(2) | - | Scrolled to load more rooms |
560-
| `send-message` | `{ roomId, content, file(9), replyMessage(10), usersTag }` | Sent a message |
561-
| `edit-message` | `{ roomId, messageId, newContent, file(9), replyMessage(10) ,usersTag }` | Edited a message |
562-
| `delete-message` | `{ roomId, message }` | Deleted a message |
563-
| `open-file` | `{ message, action }` | Clicked to view or download a file |
564-
| `open-user-tag`(3) | `{ user }` | Clicked on a user tag inside a message |
565-
| `add-room` | - | Clicked on the plus icon next to searchbar |
566-
| `room-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
567-
| `menu-action-handler`(5) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
568-
| `message-action-handler`(6) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
569-
| `send-message-reaction` | `{ roomId, messageId, reaction, remove }` | Clicked on the emoji icon inside a message |
570-
| `room-info` (7) | `room` | Clicked the room header bar |
571-
| `toggle-rooms-list` | `{ opened }` | Clicked on the toggle icon inside a room header |
572-
| `textarea-action-handler`(8) | `{ roomId, message }` | Clicked on custom icon inside the footer |
573-
| `typing-message` | `{ message, roomId }` | Started typing a message |
560+
| <div style="width:230px">Event</div> | Params | Fires when a user |
561+
| ------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------- |
562+
| `fetch-messages`(1) | `{ room, options }` | Scrolled on top to load more messages |
563+
| `fetch-more-rooms`(2) | - | Scrolled to load more rooms |
564+
| `send-message` | `{ roomId, content, files(9), replyMessage(10), usersTag }` | Sent a message |
565+
| `edit-message` | `{ roomId, messageId, newContent, files(9), replyMessage(10) ,usersTag }` | Edited a message |
566+
| `delete-message` | `{ roomId, message }` | Deleted a message |
567+
| `open-file` | `{ message, file }` | Clicked to view or download a file |
568+
| `open-user-tag`(3) | `{ user }` | Clicked on a user tag inside a message |
569+
| `add-room` | - | Clicked on the plus icon next to searchbar |
570+
| `room-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
571+
| `menu-action-handler`(5) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
572+
| `message-action-handler`(6) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
573+
| `send-message-reaction` | `{ roomId, messageId, reaction, remove }` | Clicked on the emoji icon inside a message |
574+
| `room-info` (7) | `room` | Clicked the room header bar |
575+
| `toggle-rooms-list` | `{ opened }` | Clicked on the toggle icon inside a room header |
576+
| `textarea-action-handler`(8) | `{ roomId, message }` | Clicked on custom icon inside the footer |
577+
| `typing-message` | `{ message, roomId }` | Started typing a message |
574578

575579
**(1)** `fetch-messages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`.<br>
576580
**(1)** `fetch-messages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top.
@@ -635,7 +639,7 @@ messageActionHandler({ roomId, action, message }) {
635639

636640
**(8)** `textarea-action-handler` is the result of the [`textarea-action-enabled`](#props-api) prop.<br>
637641

638-
**(9)** All file params contain: `{ blob, localURL, name, size, type, extension }`
642+
**(9)** Array of files where each file contain: `{ blob, localURL, name, size, type, extension }`
639643

640644
**(10)** `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
641645

0 commit comments

Comments
 (0)