vue-converse
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    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](#action)
    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.

    TODO

    • Animate

    Future optional ideias

    • Optional sound effect when get's a new message

    Install

    npm i vue-converse

    DownloadsWeekly Downloads

    46

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    115 kB

    Total Files

    49

    Last publish

    Collaborators

    • flasafe