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:

| Field | Description | | ------------------- | ---------------------------------------------------------------------------------------------------------- | | Agent Required | Indicates if the message comes from the bot or the user. | | Type Required | Indicates the type of the message. For now, the only supported type is text | | Message Required | String that indicates the message that will be shown to the user. | | Required | If the message is set to required, the "skip question" option won't be available. Default Value: false | | Finish | Indicates if the conversation should finish after this question. Default Value: false | | Delay | If set up, the typing component is shown with this duration. | | Action | link | | Conditional Message | ...... |

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.

| Field | Description | | ---------------- | --------------------------------------------------------------------------------- | | Type Required | Accept types: input, buttons and dropdown | | Field Required | String that is used to represent an unique user response | | Options | This represents the options to be displayed. Required for button and dropdown |

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:

| Name | Type | Default | Description | | --------- | -------- | --------------- | ---------------------------------------- | | dialog | Messages | [] | Required. Data of Messages | | labels | Labels | DEFAULT_LABELS | Labels for the "skip" and "send" buttons | | options | Options | DEFAULT_OPTIONS | Allow to enable and disable features |

Events

Available event's component:

| Name | Description | Data | | ------------------ | -------------------------------------------------------------- | ------------------------------------------------------------ | | response | Handles the user response to a message (action) | { field: 'isHappy', value: true, text: 'Yes' } | | skip | Go to the next message after the user has skipped an action | none | | registerDateTime | For every message, this event handles the DateTime it was sent | Fri Jul 15 2022 10:58:11 GMT-0300 (Brasilia Standard Time) |

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.