vue-advanced-chat icon indicating copy to clipboard operation
vue-advanced-chat copied to clipboard

(feature) emit new signal reset-message

Open rr-it opened this issue 3 years ago • 2 comments

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)

rr-it avatar May 03 '22 19:05 rr-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>

rr-it avatar May 03 '22 19:05 rr-it

Could you please add this new event in the README Events API section?

antoine92190 avatar May 07 '22 07:05 antoine92190