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.