Skip to content

Commit ca4e87a

Browse files
antoine92190antoine92190
committed
(feat) add messageActions & messageActionHandler
1 parent 67353a1 commit ca4e87a

File tree

7 files changed

+259
-201
lines changed

7 files changed

+259
-201
lines changed

‎README.md

Lines changed: 76 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,12 @@ You can import it as a custom component:
8181
| messages | Array | - | [ ] |
8282
| messagesLoaded (2) | Boolean | - | false |
8383
| menuActions (3) | Array | - | [ ] |
84+
| messageActions (4) | Array | - | (4) |
8485
| showFiles | Boolean | - | true |
8586
| showEmojis | Boolean | - | true |
86-
| textMessages (4) | Object | - | null |
87-
| theme (5) | Sring | - | light |
88-
| colors (6) | Object | - | (6) |
87+
| textMessages (5) | Object | - | null |
88+
| theme (6) | Sring | - | light |
89+
| colors (7) | Object | - | (6) |
8990

9091
(1) `loadingRooms` can be used to show/hide a spinner icon while rooms are loading
9192

@@ -111,7 +112,47 @@ menuActions="[
111112
]"
112113
```
113114

114-
(4) `textMessages` can be used to replace default texts. Ex:
115+
(4) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
116+
You can then use the [messageActionHandler](#events-api) event to call your own action after clicking a button. Ex:
117+
118+
```javascript
119+
messageActions="[
120+
{
121+
name: 'addMessageToFavorite',
122+
title: 'Add To Favorite'
123+
},
124+
{
125+
name: 'shareMessage',
126+
title: 'Share Message'
127+
}
128+
]"
129+
```
130+
131+
You can use built-in `messageActions` names to trigger specific UI modifications when clicked.<br>
132+
Currently, `replyMessage`, `editMessage` and `deleteMessage` action names are available.<br>
133+
If `messageActions` is not set, it will use the default values below.<br>
134+
If you don't want to display this `messageActions`menu, you can pass it an empty array.
135+
136+
```javascript
137+
messageActions="[
138+
{
139+
name: 'replyMessage',
140+
title: 'Reply'
141+
},
142+
{
143+
name: 'editMessage',
144+
title: 'Edit Message',
145+
onlyMe: true
146+
},
147+
{
148+
name: 'deleteMessage',
149+
title: 'Delete Message',
150+
onlyMe: true
151+
}
152+
]"
153+
```
154+
155+
(5) `textMessages` can be used to replace default texts. Ex:
115156

116157
```javascript
117158
textMessages="{
@@ -123,9 +164,9 @@ textMessages="{
123164
}"
124165
```
125166

126-
(5) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
167+
(6) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
127168

128-
(6) `colors` can be use to create your own theme. Ex:
169+
(7) `colors` can be use to create your own theme. Ex:
129170

130171
```javascript
131172
colors="{
@@ -169,12 +210,10 @@ colors="{
169210
sendDisabled: '#9ca6af',
170211
emoji: '#1976d2',
171212
document: '#1976d2',
172-
pencil: '#1976d2',
173-
pencilEdited: '#9e9e9e',
174-
trash: '#f44336',
213+
pencil: '#9e9e9e',
175214
checkmark: '#0696c7',
176215
eye: '#fff',
177-
reply: '#000'
216+
dropdown: '#9e9e9e'
178217
}
179218
}"
180219
```
@@ -229,15 +268,16 @@ messages="[
229268

230269
## Events API
231270

232-
| Event | Params | Fires when |
233-
| --------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
234-
| fetchMessages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
235-
| sendMessage | `{ roomId, content, file (3), replyMessage (4) }` | A user has sent a message |
236-
| editMessage | `{ roomId, messageId, newContent, file (3), replyMessage (4) }` | A user has edited a message |
237-
| deleteMessage | `{ roomId, messageId }` | A user has deleted a message |
238-
| openFile | `{ message }` | A user has clicked to view or download a file |
239-
| addRoom | - | A user clicks on the plus icon next to searchbar |
240-
| menuActionHandler (2) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
271+
| Event | Params | Fires when |
272+
| ------------------------ | --------------------------------------------------------------- | ----------------------------------------------------- |
273+
| fetchMessages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
274+
| sendMessage | `{ roomId, content, file (4), replyMessage (5) }` | A user has sent a message |
275+
| editMessage | `{ roomId, messageId, newContent, file (4), replyMessage (5) }` | A user has edited a message |
276+
| deleteMessage | `{ roomId, messageId }` | A user has deleted a message |
277+
| openFile | `{ message }` | A user has clicked to view or download a file |
278+
| addRoom | - | A user clicks on the plus icon next to searchbar |
279+
| menuActionHandler (2) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
280+
| messageActionHandler (3) | `{ roomId, action }` | A user clicks on the dropdown icon inside a message |
241281

242282
(1) `fetchMessages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top
243283

@@ -258,9 +298,24 @@ menuActionHandler({ roomId, action }) {
258298
}
259299
```
260300

261-
(3) All file params contain: `{ blob, localURL, name, size, type }`
301+
(3) `messageActionHandler` is the result of the `messageActions` prop.<br>
302+
When clicking a button from your `messageActions` array, `messageActionHandler` will give you the name of the button that was click.
303+
Then you can do whatever you want with it. Ex:
304+
305+
```javascript
306+
messageActionHandler({ roomId, action }) {
307+
switch (action.name) {
308+
case 'addMessageToFavorite':
309+
// call a method to add a message to the favorite list
310+
case 'shareMessage':
311+
// call a method to share the message with another user
312+
}
313+
}
314+
```
315+
316+
(4) All file params contain: `{ blob, localURL, name, size, type }`
262317

263-
(4) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked
318+
(5) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked
264319

265320
## Using with Firestore
266321

‎demo/src/ChatContainer.vue

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
@openFile="openFile"
6161
@addRoom="addRoom"
6262
@menuActionHandler="menuActionHandler"
63+
@messageActionHandler="messageActionHandler"
6364
/>
6465
</div>
6566
</template>
@@ -104,18 +105,9 @@ export default {
104105
removeUserId: '',
105106
removeUsers: [],
106107
menuActions: [
107-
{
108-
name: 'inviteUser',
109-
title: 'Invite User'
110-
},
111-
{
112-
name: 'removeUser',
113-
title: 'Remove User'
114-
},
115-
{
116-
name: 'deleteRoom',
117-
title: 'Delete Room'
118-
}
108+
{ name: 'inviteUser', title: 'Invite User' },
109+
{ name: 'removeUser', title: 'Remove User' },
110+
{ name: 'deleteRoom', title: 'Delete Room' }
119111
]
120112
}
121113
},
@@ -458,6 +450,10 @@ export default {
458450
}
459451
},
460452
453+
messageActionHandler({ action, roomId }) {
454+
// do something
455+
},
456+
461457
addRoom() {
462458
this.resetForms()
463459
this.addNewRoom = true

0 commit comments

Comments
 (0)