qa-playground.vue

<template lang="pug">
.container
  VueBotUI(
    :messages="messages"
    @init="botInit"
    @msg-send="send"
    @destroy="botDestroy"
    :bot-typing="botTyping"
    :input-disable="disableInput"
  )
</template>

<script>
import consola from 'consola'
import { VueBotUI } from 'vue-bot-ui'

let ws = null
let wsT = null

export default {
  layout: 'admin',

  components: {
    VueBotUI
  },

  data() {
    return {
      shopId: 'tunasmart',
      shopIdTakeover: '',
      token:
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaG9wSWQiOiJ0dW5hc21hcnQiLCJwcmVtaXVtIjpmYWxzZSwiYXBwTmFtZSI6InNtYXJ0bWVudSJ9.U_d5AUkpGNd4dOkNgugttqcithvBPO3b6XbHDCiYHlA',
      message: '',
      messages: [],
      messagesT: [],
      botTyping: false,
      disableInput: false
    }
  },

  mounted() {
    this.$axios.get('/admin/flows/5e01fc48cfd73520ddd84b34').then((res) => {
      console.log(res)
    })
  },

  methods: {
    botInit() {
      if (this.message.length) return
      this.$axios
        .post('/bot/auth', {
          token: this.token
        })
        .then((res) => {
          const { ticket } = res.data
          ws = new WebSocket(
            `ws://localhost:6699/bot/chat/${this.shopId}/${encodeURIComponent(
              ticket
            )}`
          )
          ws.onopen = () => {
            consola.info('Socket opened!')
            // this.messages.push('Socket opened!')
          }
          ws.onclose = (e) => {
            consola.info('Socket closed!', e)
            // this.messages.push('Socket closed!')
          }
          ws.onmessage = (msg) => {
            consola.info('Received: ', msg)
            const msgData = JSON.parse(msg.data)
            if (!msgData.meta.internal) {
              this.disableInput = msgData.data.disableInput
              this.messages.push({
                agent: 'bot',
                ...msgData.data
              })
            } else {
              console.log(msgData.data)
              if (msgData.data.type === 'typing') {
                this.botTyping = msgData.data.value
              }
              if (msgData.data.type === 'last_messages') {
              }
            }
          }
        })
    },

    botDestroy() {
      ws.close()
    },

    send(message) {
      console.log(message)
      this.messages.push({
        agent: 'user',
        type: 'text',
        text: message.text
      })
      ws.send(
        JSON.stringify({
          type: 'text',
          message
        })
      )
    },

    takeOver() {
      this.$axios
        .post('/admin/conversation/takeover', { shopId: this.shopIdTakeover })
        .then((res) => {
          const { ticket } = res.data
          wsT = new WebSocket(
            `ws://localhost:6699/bot/chat/${this.shopId}/${encodeURIComponent(
              ticket
            )}/tuananh`
          )
          wsT.onopen = () => {
            consola.info('Socket opened!')
            this.messagesT.push({ text: 'Takeover Socket opened!' })
          }
          wsT.onclose = (e) => {
            consola.info('Socket closed!', e)
            this.messagesT.push({ text: 'Takeover Socket closed!' })
          }
          wsT.onmessage = (msg) => {
            consola.info('Received: ', msg)
            this.messagesT.push({ text: 'Stalk' + msg.data })
          }
        })
    }
  }
}
</script>