Skip to content

Commit 0bd2e30

Browse files
antoine92190antoine92190
committed
(prop) add username-options
1 parent c7d18a5 commit 0bd2e30

File tree

5 files changed

+66
-42
lines changed

5 files changed

+66
-42
lines changed

‎README.md

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -221,12 +221,13 @@ fetchMessages({ room, options }) {
221221
| `rooms-list-opened` | Boolean | - | `true` |
222222
| `messages` | Array | - | `[]` |
223223
| `room-message`(6) | String | - | `null` |
224-
| `messages-loaded`(7) | Boolean | - | `false` |
225-
| `room-actions`(8) | Array | - | `[]` |
226-
| `menu-actions`(9) | Array | - | `[]` |
227-
| `message-actions`(10) | Array | - | (10) |
228-
| `templates-text`(11) | Array | - | `null` |
229-
| `auto-scroll`(12) | Object | - | `{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }` |
224+
| `username-options` (7) | Object | - | `{minUsers: 3, currentUser: false}` |
225+
| `messages-loaded`(8) | Boolean | - | `false` |
226+
| `room-actions`(9) | Array | - | `[]` |
227+
| `menu-actions`(10) | Array | - | `[]` |
228+
| `message-actions`(11) | Array | - | (11) |
229+
| `templates-text`(12) | Array | - | `null` |
230+
| `auto-scroll`(13) | Object | - | `{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }` |
230231
| `show-search` | Boolean | - | `true` |
231232
| `show-add-room` | Boolean | - | `true` |
232233
| `show-send-icon` | Boolean | - | `true` |
@@ -236,22 +237,22 @@ fetchMessages({ room, options }) {
236237
| `audio-sample-rate` | Number | - | `44100` |
237238
| `show-emojis` | Boolean | - | `true` |
238239
| `show-reaction-emojis` | Boolean | - | `true` |
239-
| `show-new-messages-divider`(13) | Boolean | - | `true` |
240-
| `show-footer`(14) | Boolean | - | `true` |
241-
| `text-messages`(15) | Object | - | `null` |
242-
| `text-formatting`(16) | Object | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |
243-
| `link-options`(17) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
244-
| `room-info-enabled` (18) | Boolean | - | `false` |
245-
| `textarea-action-enabled`(19) | Boolean | - | `false` |
240+
| `show-new-messages-divider`(14) | Boolean | - | `true` |
241+
| `show-footer`(15) | Boolean | - | `true` |
242+
| `text-messages`(16) | Object | - | `null` |
243+
| `text-formatting`(17) | Object | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |
244+
| `link-options`(18) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
245+
| `room-info-enabled` (19) | Boolean | - | `false` |
246+
| `textarea-action-enabled`(20) | Boolean | - | `false` |
246247
| `user-tags-enabled` | Boolean | - | `true` |
247248
| `emojis-suggestion-enabled` | Boolean | - | `true` |
248249
| `media-preview-enabled` | Boolean | - | `true` |
249-
| `responsive-breakpoint`(20) | Number | - | `900` |
250-
| `single-room`(21) | Boolean | - | `false` |
251-
| `scroll-distance`(22) | Number | - | `60` |
252-
| `theme`(23) | Sring | - | `light` |
253-
| `accepted-files`(24) | String | - | `*` |
254-
| `styles`(25) | Object | - | (23) |
250+
| `responsive-breakpoint`(21) | Number | - | `900` |
251+
| `single-room`(22) | Boolean | - | `false` |
252+
| `scroll-distance`(23) | Number | - | `60` |
253+
| `theme`(24) | Sring | - | `light` |
254+
| `accepted-files`(25) | String | - | `*` |
255+
| `styles`(26) | Object | - | (24) |
255256

256257
**(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.)
257258

@@ -265,9 +266,11 @@ fetchMessages({ room, options }) {
265266

266267
**(6)** `room-message` can be used to add a default textarea value
267268

268-
**(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
269+
**(7)** `username-options` can be used to show/hide room messages username according to the minimum number of users `minUsers` inside a room, and if the message user is the current user `currentUser`
269270

270-
**(8)** `room-actions` can be used to display your own buttons when clicking the dropdown icon of each room inside the rooms list.<br>
271+
**(8)** `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
272+
273+
**(9)** `room-actions` can be used to display your own buttons when clicking the dropdown icon of each room inside the rooms list.<br>
271274
You can then use the [room-action-handler](#events-api) event to call your own action after clicking a button. Ex:
272275

273276
```javascript
@@ -279,7 +282,7 @@ room-actions="[
279282
]"
280283
```
281284

282-
**(9)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
285+
**(10)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
283286
You can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:
284287

285288
```javascript
@@ -299,7 +302,7 @@ menu-actions="[
299302
]"
300303
```
301304

302-
**(10)** `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
305+
**(11)** `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
303306
You can then use the [message-action-handler](#events-api) event to call your own action after clicking a button. Ex:
304307

305308
```javascript
@@ -339,7 +342,7 @@ messageActions="[
339342
]"
340343
```
341344

342-
**(11)** `templates-text` can be used to add autocomplete templates text when typing `/` in the room textarea. Ex:
345+
**(12)** `templates-text` can be used to add autocomplete templates text when typing `/` in the room textarea. Ex:
343346

344347
```javascript
345348
templatesText="[
@@ -354,7 +357,7 @@ templatesText="[
354357
]"
355358
```
356359

357-
**(12)** `auto-scroll` can be used to change the auto scroll behaviour when sending/receiving a message. Ex:
360+
**(13)** `auto-scroll` can be used to change the auto scroll behaviour when sending/receiving a message. Ex:
358361

359362
```javascript
360363
auto-scroll="{
@@ -369,11 +372,11 @@ auto-scroll="{
369372
}"
370373
```
371374

372-
**(13)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
375+
**(14)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
373376

374-
**(14)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
377+
**(15)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
375378

376-
**(15)** `text-messages` can be used to replace default i18n texts. Ex:
379+
**(16)** `text-messages` can be used to replace default i18n texts. Ex:
377380

378381
```javascript
379382
text-messages="{
@@ -391,7 +394,7 @@ text-messages="{
391394
}"
392395
```
393396

394-
**(16)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.
397+
**(17)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.
395398

396399
- You can disable text formatting by passing the prop `:text-formatting="{disabled: true}"`.
397400
- You can change markdown characters, for example: `:text-formatting="{italic: '^'}"`
@@ -422,31 +425,31 @@ This is
422425
multiline code
423426
```
424427

425-
**(17)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
428+
**(18)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
426429

427430
```javascript
428431
:link-options="{ disabled: true, target: '_self', rel: null }"
429432
```
430433

431-
**(18)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
434+
**(19)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
432435
You can then use the [room-info](#events-api) event to call your own action after clicking the header.
433436

434-
**(19)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
437+
**(20)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
435438
You can then use the [textarea-action-handler](#events-api) event to call your own action after clicking the icon.
436439

437-
**(20)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
440+
**(21)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
438441

439-
**(21)** `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.
442+
**(22)** `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.
440443

441-
**(22)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.
444+
**(23)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.
442445

443-
**(23)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
446+
**(24)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
444447

445-
**(24)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
448+
**(25)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
446449

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

449-
**(25)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
452+
**(26)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
450453

451454
```javascript
452455
styles="{

‎src/lib/ChatWindow.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
:scroll-distance="scrollDistance"
6363
:accepted-files="acceptedFiles"
6464
:templates-text="templatesText"
65+
:username-options="usernameOptions"
6566
@toggle-rooms-list="toggleRoomsList"
6667
@room-info="roomInfo"
6768
@fetch-messages="fetchMessages"
@@ -189,7 +190,11 @@ export default {
189190
scrollDistance: { type: Number, default: 60 },
190191
acceptedFiles: { type: String, default: '*' },
191192
templatesText: { type: Array, default: null },
192-
mediaPreviewEnabled: { type: Boolean, default: true }
193+
mediaPreviewEnabled: { type: Boolean, default: true },
194+
usernameOptions: {
195+
type: Object,
196+
default: () => ({ minUsers: 3, currentUser: false })
197+
}
193198
},
194199
195200
emits: [

‎src/lib/Message/Message.vue

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
@mouseleave="onLeaveMessage"
5555
>
5656
<div
57-
v-if="roomUsers.length > 2 && message.senderId !== currentUserId"
57+
v-if="showUsername"
5858
class="vac-text-username"
5959
:class="{
6060
'vac-username-reply': !message.deleted && message.replyMessage
@@ -247,7 +247,8 @@ export default {
247247
showNewMessagesDivider: { type: Boolean, required: true },
248248
textFormatting: { type: Object, required: true },
249249
linkOptions: { type: Object, required: true },
250-
hideOptions: { type: Boolean, required: true }
250+
hideOptions: { type: Boolean, required: true },
251+
usernameOptions: { type: Object, required: true }
251252
},
252253
253254
emits: [
@@ -273,6 +274,16 @@ export default {
273274
},
274275
275276
computed: {
277+
showUsername() {
278+
if (
279+
!this.usernameOptions.currentUser &&
280+
this.message.senderId === this.currentUserId
281+
) {
282+
return false
283+
} else {
284+
return this.roomUsers.length >= this.usernameOptions.minUsers
285+
}
286+
},
276287
showDate() {
277288
return (
278289
this.index > 0 &&

‎src/lib/Room/Room.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
:text-formatting="textFormatting"
8383
:link-options="linkOptions"
8484
:hide-options="hideOptions"
85+
:username-options="usernameOptions"
8586
@message-added="onMessageAdded"
8687
@message-action-handler="messageActionHandler"
8788
@open-file="openFile"
@@ -387,7 +388,8 @@ export default {
387388
userTagsEnabled: { type: Boolean, required: true },
388389
emojisSuggestionEnabled: { type: Boolean, required: true },
389390
scrollDistance: { type: Number, required: true },
390-
templatesText: { type: Array, default: null }
391+
templatesText: { type: Array, default: null },
392+
usernameOptions: { type: Object, required: true }
391393
},
392394
393395
emits: [

‎types/index.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ export interface AutoScroll {
111111
}
112112
}
113113

114+
export type UsernameOptions = { minUsers: number; currentUser: StringNumber }
115+
114116
export interface Slots {
115117
'rooms-header': VNode[]
116118
'room-list-item': VNode[]
@@ -182,6 +184,7 @@ export interface Props {
182184
'responsive-breakpoint'?: boolean
183185
'single-room'?: boolean
184186
'accepted-files'?: string
187+
'username-options'?: UsernameOptions
185188
}
186189

187190
export interface AdvancedChatOptions {

0 commit comments

Comments
 (0)