mobile-chat-bot v0.0.2

Vue Bot UI

This is a fork of Chea Bonnaks vue-chat-ui. I have had problems to use the original project in fullscreen. So I forked the original one and customized it.

For the one who is finding a customizable chatbot UI.

I build for my private project, but I tried to bring as many options as I think someone need it, so feel free to use it.

Demo page is coming soon.

Install

npm install vue-bot-ui

// or
yarn add vue-bot-ui

Usage

Import & register the component

import { VueBotUI } from 'vue-bot-ui'

export default {
  components: {
    VueBotUI,
  },
  ...
}

And use it:

<VueBotUI
  :messages="data"
  :options="botOptions"
  @msg-send="messageSendHandler"
/>

data () {
  return {
    data: [], // See Data example below
    botOptions: {
      // See the list of options below
    }
  }
}

Props

List of available props to use in the component:

Options

List of available options to customize UI:

Components & Events

This is the most important part you need to know, because you need these to integrate your bot API. Take a look my App.vue file if you need an example.

Events

Use msg-send to get the message from user and trigger request to bot API.

Components

Common pattern / Example data:

const messages = [
  {
    agent: 'bot', // Required. 'bot' or 'user'
    type: 'text', // Required. Bubble message component type: 'text' / 'button'
    text: 'Hello. How can I help you', // Required. The message
    disableInput: false, // Disable message input or not
    ...
  },
  {
    agent: 'user',
    type: 'text', // always
    text: 'I need a new laptop',
  },
  ...
]

Component list:

Current components supported by this package, path to files: components/MessageBubble/..

• SingleText - type: 'text'

{
  agent: 'bot',
  type: 'text',
  text: 'Hello. How can I help you',
  disableInput: false,
}

• ButtonOptions - type: 'button'

{
  agent: 'bot',
  type: 'button',
  text: 'Select the option below',
  disableInput: true,
  options: [
    {
      text: 'Open Google',
      value: 'https://google.com',
      action: 'url'
    },
    {
      text: 'Submit Support Ticket',
      value: 'submit_ticket',
      action: 'postback' // Request to API
    },
    ...
  ],
}

• Other components are coming soon...

Slots

List of available slots:

Not found what your need?

You can overwrite the CSS by class name. Each type and state has separate class for you to customize.

Feature request: Feel free to open an issue to ask for a new feature.

Developers / Build

# Clone repo
git clone https://github.com/JuzSer/vue-bot-ui

# Install packages
yarn

# Development & Demo - http://localhost:1901
yarn serve

# Build main library
yarn build-bundle

Todo:

Many things...

• Events
• Loading / Typing indicators
• Disable message input on loading, vice versa...
• Properties for target of button options
• Add more message bubble components (video, images,...)
• Add more events
• Test
• Accessibility

Thanks

• The icons and images from FlatIcon
• Placeholder image from Placehold.it
• Time ago from date-fns

Thank you! :tada: