Vuejs chatbot widget

<template>    <div id="app">      <Chat        iconColorProp="#e6e6e6"        messageOutColorProp="#4d9e93"        messageInColorProp="#f1f0f0"        messageBackgroundColorProp="#ffffff"        :messageListProp="messageList"        :initOpenProp="initOpen"        @onToggleOpen="handleToggleOpen"        @onMessageWasSent="handleMessageReceived"      />    </div></template> <script>import {Chat} from 'vue-chat-widget'import incomingMessageSound from '../assets/notification.mp3' // pick an audio file for chat response export default {  name: "app",  components: {    Chat,  },  data: () => {    return {      messageList: [],      initOpen: false,      toggledOpen: false    }  },  methods: {    // Send message from you    handleMessageReceived(message) {      this.messageList.push(message)    },    // Receive message from them (handled by you with your backend)    handleMessageResponse(message) {       if (message.length > 0) {            this.messageList.push({ body: message, author: 'them' })        }    },    // Chat toggled open event emitted    handleToggleOpen(open) {      this.toggledOpen = open      // connect/disconnect websocket or something    },    // Audible chat response noise, use whatever noise you want    handleMessageResponseSound() {      const audio = new Audio(incomingMessageSound)      audio.addEventListener('loadeddata', () => {        audio.play()      })    },  },  // init chat with a message  mounted() {    this.messageList.push({ body: 'Welcome to the chat, I\'m David!', author: 'them' })  },  watch: {    messageList: function(newList) {      const nextMessage = newList[newList.length - 1]      const isIncoming = (nextMessage || {}).author !== 'you'      if (isIncoming && this.toggledOpen) {        this.handleMessageResponseSound()      }    }  }}</script>

Source: npmjs.com

Similar codes

0 vote130 views1 answer
Vue router Async Scrolling
Javascript Vue
0 vote125 views1 answer
Vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
Javascript Vue
5 votes125 views1 answer
Comment in vue js
Javascript Vue
3 votes155 views1 answer
Vue.js force to reload re-render
Javascript Vue
0 vote127 views1 answer
Vue i18n command
Javascript Vue
0 vote125 views1 answer
Webpack vue global variable
Javascript Vue
2 votes127 views1 answer
Open url in new window vue
Javascript Vue
0 vote126 views1 answer
Vuejs pass data to router-view
Javascript Vue
0 vote133 views1 answer
Await vuex dispatch true
Javascript Vue
0 vote155 views1 answer
Vuejs v-model select
Javascript Vue