Skip to content

Commit dcff654

Browse files
antoine92190antoine92190
committed
(props) add roomMessage - default textarea value
1 parent 02d4924 commit dcff654

File tree

3 files changed

+39
-31
lines changed

3 files changed

+39
-31
lines changed

‎README.md

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -87,37 +87,40 @@ You can import it as a custom component:
8787

8888
## Props API
8989

90-
| Prop | Type | Required | Default |
91-
| ------------------------ | ---------------- | -------- | ------- |
92-
| height | String | - | 600px |
93-
| currentUserId (1) | [String, Number] | true | - |
94-
| rooms | Array | - | [ ] |
95-
| loadingRooms (2) | Boolean | - | false |
96-
| roomId (3) | [String, Number] | - | null |
97-
| messages | Array | - | [ ] |
98-
| messagesLoaded (4) | Boolean | - | false |
99-
| menuActions (5) | Array | - | [ ] |
100-
| messageActions (6) | Array | - | (4) |
101-
| showAddRoom | Boolean | - | true |
102-
| showFiles | Boolean | - | true |
103-
| showEmojis | Boolean | - | true |
104-
| showReactionEmojis | Boolean | - | true |
105-
| textFormatting (7) | Boolean | - | true |
106-
| textMessages (8) | Object | - | null |
107-
| responsiveBreakpoint (9) | Number | - | 900 |
108-
| singleRoom (10) | Boolean | - | false |
109-
| theme (11) | Sring | - | light |
110-
| styles (12) | Object | - | (10) |
90+
| Prop | Type | Required | Default |
91+
| ------------------------- | ---------------- | -------- | ------- |
92+
| height | String | - | 600px |
93+
| currentUserId (1) | [String, Number] | true | - |
94+
| rooms | Array | - | [ ] |
95+
| loadingRooms (2) | Boolean | - | false |
96+
| roomId (3) | [String, Number] | - | null |
97+
| messages | Array | - | [ ] |
98+
| roomMessage (4) | Object | - | null |
99+
| messagesLoaded (5) | Boolean | - | false |
100+
| menuActions (6) | Array | - | [ ] |
101+
| messageActions (7) | Array | - | (4) |
102+
| showAddRoom | Boolean | - | true |
103+
| showFiles | Boolean | - | true |
104+
| showEmojis | Boolean | - | true |
105+
| showReactionEmojis | Boolean | - | true |
106+
| textMessages (8) | Object | - | null |
107+
| textFormatting (9) | Boolean | - | true |
108+
| responsiveBreakpoint (10) | Number | - | 900 |
109+
| singleRoom (11) | Boolean | - | false |
110+
| theme (12) | Sring | - | light |
111+
| styles (13) | Object | - | (10) |
111112

112113
(1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
113114

114115
(2) `loadingRooms` can be used to show/hide a spinner icon while rooms are loading
115116

116117
(3) `roomId` can be used to load a specific room at any time
117118

118-
(4) `messagesLoaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
119+
(4) `roomMessage` can be used to add a default textarea value
119120

120-
(5) `menuActions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
121+
(5) `messagesLoaded` must be manually set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top anymore
122+
123+
(6) `menuActions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
121124
You can then use the [menuActionHandler](#events-api) event to call your own action after clicking a button. Ex:
122125

123126
```javascript
@@ -137,7 +140,7 @@ menuActions="[
137140
]"
138141
```
139142

140-
(6) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
143+
(7) `messageActions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
141144
You can then use the [messageActionHandler](#events-api) event to call your own action after clicking a button. Ex:
142145

143146
```javascript
@@ -177,7 +180,7 @@ messageActions="[
177180
]"
178181
```
179182

180-
(7) `textMessages` can be used to replace default i18n texts. Ex:
183+
(8) `textMessages` can be used to replace default i18n texts. Ex:
181184

182185
```javascript
183186
textMessages="{
@@ -190,7 +193,7 @@ textMessages="{
190193
}"
191194
```
192195

193-
(8) `textFormatting` 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"`.
196+
(9) `textFormatting` 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"`.
194197

195198
| Style | Syntax | Example | Output |
196199
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -217,13 +220,13 @@ This is
217220
multiline code
218221
```
219222

220-
(9) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
223+
(10) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
221224

222-
(10) `singleRoom` 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.
225+
(11) `singleRoom` 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.
223226

224-
(11) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
227+
(12) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
225228

226-
(12) `styles` can be used to customize your own theme. Ex:
229+
(13) `styles` can be used to customize your own theme. Ex:
227230

228231
```javascript
229232
styles="{

‎src/ChatWindow/ChatWindow.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
:rooms="rooms"
2626
:roomId="room.roomId || ''"
2727
:messages="messages"
28+
:roomMessage="roomMessage"
2829
:messagesLoaded="messagesLoaded"
2930
:menuActions="menuActions"
3031
:messageActions="messageActions"
@@ -97,7 +98,8 @@ export default {
9798
showEmojis: { type: Boolean, default: true },
9899
showReactionEmojis: { type: Boolean, default: true },
99100
textFormatting: { type: Boolean, default: true },
100-
newMessage: { type: Object, default: null }
101+
newMessage: { type: Object, default: null },
102+
roomMessage: { type: String, default: '' }
101103
},
102104
103105
data() {

‎src/ChatWindow/Room.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ export default {
259259
rooms: { type: Array, required: true },
260260
roomId: { type: [String, Number], required: true },
261261
messages: { type: Array, required: true },
262+
roomMessage: { type: String },
262263
messagesLoaded: { type: Boolean, required: true },
263264
menuActions: { type: Array, required: true },
264265
messageActions: { type: Array, required: true },
@@ -307,6 +308,7 @@ export default {
307308
this.$refs.scrollContainer.addEventListener('scroll', e => {
308309
this.hideOptions = true
309310
setTimeout(() => {
311+
if (!e.target) return
310312
this.scrollIcon =
311313
e.target.scrollHeight > 500 &&
312314
e.target.scrollHeight - e.target.scrollTop > 1000
@@ -327,6 +329,7 @@ export default {
327329
this.loadingMessages = true
328330
this.scrollIcon = false
329331
this.resetMessage(true)
332+
this.message = this.roomMessage
330333
}
331334
},
332335
messages(newVal, oldVal) {

0 commit comments

Comments
 (0)