vue-converse v4.3.7

vue-converse

Build a form using a chat interface.

Install

npm install vue-converse

// or
yarn add vue-converse

Usage

Import VueConverse as a component where you want to use it.

import VueConverse from 'vue-converse'

Use it on your app by passing the required props:

<VueConverse
  :dialog="messages"
  @skip="getNextBotMessage"
  @response="handleResponse"
/>

Handling the response

data () {
  return {
    questionnaire: {}, // keep responses
    messages: [
      {
        type: 'text',
        text: 'How are you doing?',
        action: {
          type: 'buttons',
          field: 'fellings',
          options: [
            {
              label: 'Great',
              value: false,
              style: 'btn btn-green',
            },
            {
              label: 'Not so good',
              value: true,
            },
          ],
        },
      },
    ],
    dialog: [],
    currentDialog: 0,
  }
},

methods: {
  handleResponse({ field, response }) {
    this.questionnaire[field] = response // update your response data

    this.dialog.push({ // append messages to chat
      agent: 'user',
      type: 'text',
      text: response,
    })

    this.getNextBotMessage() // ask something else
  },

  getNextBotMessage() {
    this.currentDialog += 1
    const nextMessage = this.messages[this.currentDialog]
    this.dialog.push(nextMessage)
  }
}

Message structure:

Action

The action is optional and represents what the user can do after the bot's message. The supported action types are: input, buttons and dropdown.

If the action type is buttons or dropdown, you should set up a required field options, that contains an array of the options that will be displayed to the user.

Example:

const messages = [
  {
    agent: 'bot',
    type: 'text',
    text: 'Hi, what\'s your name'
    delay: 2000,
    finish: false
    conditionalMessage: {}
    action: {
      required: true
      type: 'buttons',
      field: 'name',
      options: [
        {
          label: 'I don\'t know', // Button/Select label
          value: 'NOT_SURE', // Button/Select value
        },
      ],
    }
  },
  ...
]

Props

Available props's component:

Events

Available event's component:

Features

DateTime

VueConverse is able to display the time when the message was sent in chat and/or pass the DateTime to a registerDateTime event.

Both options are disabled by default and can be enabled by passing the option object to VueConverse as props, like so:

<VueConverse
  ...
  :options="{ displayDateTime: true, registerDateTime: true }"
  @registerDateTime="registerDateTime"
/>

Remember to always pass the registerDateTime event in case you want to have access to this data.