<template>
  <div class="app-container chatbot-container">
    <h1>Chatbot Joe</h1>
  </div>
</template>

<script>
export default {
  name: 'Chatbot',
  components: { },
  data() {
    return {}
  },
  mounted: () => {
    window.botpressWebChat.init({ host: process.env.BOTPRESS_HOST, botId: 'joinbot', enableReset: false,
      enableTranscriptDownload: false,
      hideWidget: true,
      extraStylesheet: '/assets/modules/channel-web/chat.css',
      botName: 'Joe'
    })
    setTimeout(() => {
      window.botpressWebChat.sendEvent({
        type: 'show',
        channel: 'web'
      })
      // window.botpressWebChat.sendEvent({ type: 'message', text: 'Hallo!' })
    }, 1500)
  },
  beforeDestroy: () => {
    document.getElementById('bp-widget').parentElement.removeChild(document.getElementById('bp-widget'))
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.chatbot-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  .document-btn {
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    margin-bottom: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
</style>
<style>
#bp-widget {
bottom: 0px;
right: 0px;
width: 70%;
height: 100% !important;
}

#bp-web-widget {
width:100%;
height:100%
}
</style>
