vue-advanced-chat
vue-advanced-chat copied to clipboard
(feature) emit new signal reset-message
This enables two use cases:
- Handle message content before it is gone.
- Make changes to the UI e.g. in case there is no message typing anymore.
<template>
<chat-window
@reset-message="resetMessage"
>
</template>
<script>
export default {
name: 'ChatContainer',
components: {
ChatWindow
},
methods: {
resetMessage({message, roomId}) {
/*
* Do something here.
*/
},
}
}
</script>
What kind of change does this PR introduce? (check at least one)
- [x] Feature
Does this PR introduce a breaking change? (check one)
- [x] No
The PR fulfills these requirements:
- [x] All tests are passing
If adding a new feature, the PR's description includes:
- [x] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)
More complex example in combination with PR https://github.com/antoine92190/vue-advanced-chat/pull/306
For special rooms: show the footer with send button only, if a reply message is already selected.
<template>
<chat-window
:show-footer="showFooter"
@reset-message="resetMessage"
@message-action-handler="messageActionHandler"
>
</template>
<script>
export default {
name: 'ChatContainer',
components: {
ChatWindow
},
data() {
return {
messageActions: [
{
name: 'replyMessageCustom',
title: 'Reply'
}
],
showFooter: true,
}
},
created() {
this.regexSpecialRoomId = /^[0-9a-f]{32}$/
},
methods: {
resetMessages() {
this.showFooter = true
},
resetMessage({roomId}) {
if (this.regexSpecialRoomId.test(roomId)) {
this.showFooter = false
}
},
messageActionHandler({ action, message, roomId, methodCallback }) {
if (action.name === 'replyMessageCustom') {
if (this.regexSpecialRoomId.test(roomId)) {
this.showFooter = true
}
methodCallback({ action: {name: 'replyMessage'}, message })
}
}
}
}
</script>
Could you please add this new event in the README Events API section?