Skip to content

Commit 237cce3

Browse files
antoine92190antoine92190
committed
(docs) add users tag
1 parent 382adb0 commit 237cce3

File tree

1 file changed

+36
-23
lines changed

1 file changed

+36
-23
lines changed

‎README.md

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ styles="{
393393
backgroundReply: 'rgba(0, 0, 0, 0.08)',
394394
colorReplyUsername: '#0a0a0a',
395395
colorReply: '#6e6e6e',
396+
colorTag: '#0d579c',
396397
backgroundImage: '#ddd',
397398
colorNewMessages: '#1976d2',
398399
backgroundReaction: '#eee',
@@ -566,28 +567,40 @@ messages="[
566567

567568
## Events API
568569

569-
| Event | Params | Fires when |
570-
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
571-
| fetch-messages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
572-
| fetch-more-rooms (2) | - | A user has scrolled to load more rooms |
573-
| send-message | `{ roomId, content, file (6), replyMessage (7) }` | A user has sent a message |
574-
| edit-message | `{ roomId, messageId, newContent, file (6), replyMessage (7) }` | A user has edited a message |
575-
| delete-message | `{ roomId, messageId }` | A user has deleted a message |
576-
| open-file | `{ message, action }` | A user has clicked to view or download a file |
577-
| add-room | - | A user clicks on the plus icon next to searchbar |
578-
| menu-action-handler (3) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
579-
| message-action-handler (4) | `{ roomId, action, message }` | A user clicks on the dropdown icon inside a message |
580-
| send-message-reaction | `{ roomId, messageId, reaction, remove }` | A user clicks on the emoji icon inside a message |
581-
| room-info | `room` | A user clicks the room header bar |
582-
| toggle-rooms-list | `{ opened }` | A user clicks on the toggle icon inside a room header |
583-
| textarea-action-handler (5) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
584-
| typing-message | `{ message, roomId }` | A user is typing a message |
570+
| Event | Params | Fires when |
571+
| --------------------------- | ------------------------------------------------------------------------ | ----------------------------------------------------- |
572+
| fetch-messages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
573+
| fetch-more-rooms (2) | - | A user has scrolled to load more rooms |
574+
| send-message | `{ roomId, content, file (7), replyMessage (8), usersTag }` | A user has sent a message |
575+
| edit-message | `{ roomId, messageId, newContent, file (6), replyMessage (8),usersTag }` | A user has edited a message |
576+
| delete-message | `{ roomId, messageId }` | A user has deleted a message |
577+
| open-file | `{ message, action }` | A user has clicked to view or download a file |
578+
| open-user-tag (3) | `{ user }` | A user has clicked on a user tag inside a message |
579+
| add-room | - | A user clicks on the plus icon next to searchbar |
580+
| menu-action-handler (4) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
581+
| message-action-handler (5) | `{ roomId, action, message }` | A user clicks on the dropdown icon inside a message |
582+
| send-message-reaction | `{ roomId, messageId, reaction, remove }` | A user clicks on the emoji icon inside a message |
583+
| room-info | `room` | A user clicks the room header bar |
584+
| toggle-rooms-list | `{ opened }` | A user clicks on the toggle icon inside a room header |
585+
| textarea-action-handler (6) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
586+
| typing-message | `{ message, roomId }` | A user is typing a message |
585587

586588
(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>
587589
(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.
588590

589-
(3) `menu-action-handler` is the result of the `menuActions` prop.<br>
590-
When clicking a button from your `menuActions` array, `menuActionHandler` will give you the name of the button that was click.
591+
(2) `fetch-more-rooms` is triggered when scrolling down the rooms list, and should be a method implementing a pagination system.
592+
593+
(3) `open-user-tag` is triggered when clicking a user tag inside a message. When creating a user tag by typing `@` in the footer textarea and sending the message, the tag will be identified with the below pattern:
594+
595+
```javascript
596+
<usertag>TAGGED_USER_ID</usertag>
597+
```
598+
599+
This will make the tag clickable inside a message. Ex: [message tag content](#messages-collection-inside-a-room-document)<br>
600+
`send-message` and `edit-message` events will handle that pattern for you and pass it in the `content` param.
601+
602+
(4) `menu-action-handler` is the result of the [`menu-actions`](#props-api) prop.<br>
603+
When clicking a button from your `menu-actions` array, `menu-action-handler` will give you the name of the button that was click.
591604
Then you can do whatever you want with it. Ex:
592605

593606
```javascript
@@ -603,7 +616,7 @@ menuActionHandler({ roomId, action }) {
603616
}
604617
```
605618

606-
(4) `message-action-handler` is the result of the `message-actions` prop.<br>
619+
(5) `message-action-handler` is the result of the `message-actions` prop.<br>
607620
When clicking a message menu button from your `message-actions` array, `message-action-handler` will give you the name of the button that was click and the corresponding message data.
608621
Then you can do whatever you want with it. Ex:
609622

@@ -618,11 +631,11 @@ messageActionHandler({ roomId, action, message }) {
618631
}
619632
```
620633

621-
(5) `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
634+
(6) `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
622635

623-
(6) All file params contain: `{ blob, localURL, name, size, type, extension }`
636+
(7) All file params contain: `{ blob, localURL, name, size, type, extension }`
624637

625-
(7) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
638+
(8) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
626639

627640
## Named Slots
628641

@@ -724,7 +737,7 @@ chatRooms: {
724737
```javascript
725738
messages: {
726739
MESSAGE_ID_1: {
727-
content: 'My first message',
740+
content: 'My first message to <usertag>John</usertag>',
728741
sender_id: 2,
729742
timestamp: 'December 11, 2019 at 4:00:00 PM',
730743
seen: true

0 commit comments

Comments
 (0)