Skip to content

Commit 68d5ebf

Browse files
antoine92190antoine92190
authored
Merge pull request #104 from antoine92190/infinite-rooms
(feature) #72 Add infinite rooms
2 parents 387745f + 257780a commit 68d5ebf

File tree

5 files changed

+211
-89
lines changed

5 files changed

+211
-89
lines changed

‎README.md

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -164,48 +164,51 @@ fetchMessages({ room, options }) {
164164

165165
## Props API
166166

167-
| Prop | Type | Required | Default |
168-
| ----------------------------- | ---------------- | -------- | ------- |
169-
| height | String | - | 600px |
170-
| current-user-id (1) | [String, Number] | true | - |
171-
| rooms | Array | - | [ ] |
172-
| loading-rooms (2) | Boolean | - | false |
173-
| room-id (3) | [String, Number] | - | null |
174-
| load-first-room (4) | Boolean | - | true |
175-
| messages | Array | - | [ ] |
176-
| room-message (5) | String | - | null |
177-
| messages-loaded (6) | Boolean | - | false |
178-
| menu-actions (7) | Array | - | [ ] |
179-
| message-actions (8) | Array | - | (4) |
180-
| show-add-room | Boolean | - | true |
181-
| show-send-icon | Boolean | - | true |
182-
| show-files | Boolean | - | true |
183-
| show-audio | Boolean | - | true |
184-
| show-emojis | Boolean | - | true |
185-
| show-reaction-emojis | Boolean | - | true |
186-
| show-new-messages-divider (9) | Boolean | - | true |
187-
| show-footer (10) | Boolean | - | true |
188-
| text-messages (11) | Object | - | null |
189-
| text-formatting (12) | Boolean | - | true |
190-
| responsive-breakpoint (13) | Number | - | 900 |
191-
| single-room (14) | Boolean | - | false |
192-
| theme (15) | Sring | - | light |
193-
| accepted-files (16) | String | - | "\*" |
194-
| styles (17) | Object | - | (10) |
167+
| Prop | Type | Required | Default |
168+
| ------------------------------ | ---------------- | -------- | ------- |
169+
| height | String | - | 600px |
170+
| current-user-id (1) | [String, Number] | true | - |
171+
| rooms | Array | - | [ ] |
172+
| loading-rooms (2) | Boolean | - | false |
173+
| rooms-loaded (3) | Boolean | - | false |
174+
| room-id (4) | [String, Number] | - | null |
175+
| load-first-room (5) | Boolean | - | true |
176+
| messages | Array | - | [ ] |
177+
| room-message (6) | String | - | null |
178+
| messages-loaded (7) | Boolean | - | false |
179+
| menu-actions (8) | Array | - | [ ] |
180+
| message-actions (9) | Array | - | (4) |
181+
| show-add-room | Boolean | - | true |
182+
| show-send-icon | Boolean | - | true |
183+
| show-files | Boolean | - | true |
184+
| show-audio | Boolean | - | true |
185+
| show-emojis | Boolean | - | true |
186+
| show-reaction-emojis | Boolean | - | true |
187+
| show-new-messages-divider (10) | Boolean | - | true |
188+
| show-footer (11) | Boolean | - | true |
189+
| text-messages (12) | Object | - | null |
190+
| text-formatting (13) | Boolean | - | true |
191+
| responsive-breakpoint (14) | Number | - | 900 |
192+
| single-room (15) | Boolean | - | false |
193+
| theme (16) | Sring | - | light |
194+
| accepted-files (17) | String | - | "\*" |
195+
| styles (18) | Object | - | (10) |
195196

196197
(1) `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
197198

198199
(2) `loading-rooms` can be used to show/hide a spinner icon while rooms are loading
199200

200-
(3) `room-id` can be used to load a specific room at any time
201+
(3) `rooms-loaded` must be set to `true` when all rooms have been loaded. Meaning the user cannot scroll to load more paginated rooms
201202

202-
(4) `load-first-room` can be used to remove the default behaviour of opening the first room at initialization
203+
(4) `room-id` can be used to load a specific room at any time
203204

204-
(5) `room-message` can be used to add a default textarea value
205+
(5) `load-first-room` can be used to remove the default behaviour of opening the first room at initialization
205206

206-
(6) `messages-loaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
207+
(6) `room-message` can be used to add a default textarea value
207208

208-
(7) `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
209+
(7) `messages-loaded` must be set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top to load more paginated messages
210+
211+
(8) `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
209212
You can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:
210213

211214
```javascript
@@ -225,7 +228,7 @@ menu-actions="[
225228
]"
226229
```
227230

228-
(8) `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
231+
(9) `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
229232
You can then use the [message-action-handler](#events-api) event to call your own action after clicking a button. Ex:
230233

231234
```javascript
@@ -265,11 +268,11 @@ messageActions="[
265268
]"
266269
```
267270

268-
(9) `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
271+
(10) `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
269272

270-
(10) `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
273+
(11) `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
271274

272-
(11) `text-messages` can be used to replace default i18n texts. Ex:
275+
(12) `text-messages` can be used to replace default i18n texts. Ex:
273276

274277
```javascript
275278
text-messages="{
@@ -287,7 +290,7 @@ text-messages="{
287290
}"
288291
```
289292

290-
(12) `text-formatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
293+
(13) `text-formatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
291294

292295
| Style | Syntax | Example | Output |
293296
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -314,17 +317,17 @@ This is
314317
multiline code
315318
```
316319

317-
(13) `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
320+
(14) `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
318321

319-
(14) `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
322+
(15) `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
320323

321-
(15) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
324+
(16) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
322325

323-
(16) `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
326+
(17) `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
324327

325328
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files
326329

327-
(17) `styles` can be used to customize your own theme. Ex:
330+
(18) `styles` can be used to customize your own theme. Ex:
328331

329332
```javascript
330333
styles="{
@@ -566,22 +569,23 @@ messages="[
566569
| Event | Params | Fires when |
567570
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
568571
| fetch-messages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
569-
| send-message | `{ roomId, content, file (5), replyMessage (6) }` | A user has sent a message |
570-
| edit-message | `{ roomId, messageId, newContent, file (5), replyMessage (6) }` | A user has edited a message |
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 |
571575
| delete-message | `{ roomId, messageId }` | A user has deleted a message |
572576
| open-file | `{ message, action }` | A user has clicked to view or download a file |
573577
| add-room | - | A user clicks on the plus icon next to searchbar |
574-
| menu-action-handler (2) | `{ roomId, action }` | A user clicks on the vertical dots icon inside a room |
575-
| message-action-handler (3) | `{ roomId, action, message }` | A user clicks on the dropdown icon inside a message |
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 |
576580
| send-message-reaction | `{ roomId, messageId, reaction, remove }` | A user clicks on the emoji icon inside a message |
577581
| room-info | `room` | A user clicks the room header bar |
578-
| textarea-action-handler (4) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
582+
| textarea-action-handler (5) | `{ roomId, message }` | A user clicks on custom icon inside the footer |
579583
| typing-message | `{ message, roomId }` | A user is typing a message |
580584

581585
(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>
582586
(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.
583587

584-
(2) `menu-action-handler` is the result of the `menuActions` prop.<br>
588+
(3) `menu-action-handler` is the result of the `menuActions` prop.<br>
585589
When clicking a button from your `menuActions` array, `menuActionHandler` will give you the name of the button that was click.
586590
Then you can do whatever you want with it. Ex:
587591

@@ -598,7 +602,7 @@ menuActionHandler({ roomId, action }) {
598602
}
599603
```
600604

601-
(3) `message-action-handler` is the result of the `message-actions` prop.<br>
605+
(4) `message-action-handler` is the result of the `message-actions` prop.<br>
602606
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.
603607
Then you can do whatever you want with it. Ex:
604608

@@ -613,11 +617,11 @@ messageActionHandler({ roomId, action, message }) {
613617
}
614618
```
615619

616-
(4) `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
620+
(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.
617621

618-
(5) All file params contain: `{ blob, localURL, name, size, type }`
622+
(6) All file params contain: `{ blob, localURL, name, size, type }`
619623

620-
(6) `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
624+
(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.
621625

622626
## Named Slots
623627

@@ -727,6 +731,11 @@ messages: {
727731
}
728732
```
729733

734+
#### Notes
735+
736+
- You need to create a composite index to order rooms by last message received.
737+
The easiest way to do it is to create a room, then click the error message url in the browser debugging console.
738+
730739
## Use as a Web Component
731740

732741
### Clone vue-advance-chat project

‎demo/src/App.vue

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,22 @@ export default {
106106
const user3 = this.users[2]
107107
await usersRef.doc(user3._id).set(user3)
108108
109-
await roomsRef.add({ users: [user1._id, user2._id] })
110-
await roomsRef.add({ users: [user1._id, user3._id] })
111-
await roomsRef.add({ users: [user2._id, user3._id] })
112-
await roomsRef.add({ users: [user1._id, user2._id, user3._id] })
109+
await roomsRef.add({
110+
users: [user1._id, user2._id],
111+
lastUpdated: new Date()
112+
})
113+
await roomsRef.add({
114+
users: [user1._id, user3._id],
115+
lastUpdated: new Date()
116+
})
117+
await roomsRef.add({
118+
users: [user2._id, user3._id],
119+
lastUpdated: new Date()
120+
})
121+
await roomsRef.add({
122+
users: [user1._id, user2._id, user3._id],
123+
lastUpdated: new Date()
124+
})
113125
114126
this.updatingData = false
115127
}

0 commit comments

Comments
 (0)