# vue-simple-chatbot

> simple chatbot ui

Latest version **0.2.0** (published 2022-01-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-simple-chatbot
pnpm add vue-simple-chatbot
yarn add vue-simple-chatbot
bun add vue-simple-chatbot
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-01-01 |
| First published | 2021-12-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 530.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Mochammad Fadholi |
| Maintainers | asmfadholi11213018 |
| Keywords | vue-simple-chatbot, vue chatbot, chatbot ui, simple chatbot |

## Links

- npm: https://www.npmjs.com/package/vue-simple-chatbot
- Repository: https://github.com/asmfadholi/vue-simple-chatbot
- Homepage: https://github.com/asmfadholi/vue-simple-chatbot#readme
- Issues: https://github.com/asmfadholi/vue-simple-chatbot/issues
- npm.io page: https://npm.io/package/vue-simple-chatbot

## Recent versions

- 0.2.0 (latest) — 2022-01-01
- 0.1.5 — 2022-01-01
- 0.1.4 — 2021-12-31
- 0.1.3 — 2021-12-31
- 0.1.2 — 2021-12-31
- 0.1.1 — 2021-12-31
- 0.1.0 — 2021-12-31

## README

# Vue Simple Chatbot

<p align="center">
    <img width="300" alt="vue bot UI" src="https://raw.githubusercontent.com/asmfadholi/vue-simple-chatbot/main/chatbot.png">
</p>


## Getting Start

```bash
npm install vue-simple-chatbot --save

# or use yarn

yarn add vue-simple-chatbot
```

## Usage

### Import as local component

``` javascript
import VueChatbot from 'vue-simple-chatbot';

export default {
  name: 'App',
  components: {
    VueChatbot
  }
}
```

### Import as global component

``` javascript
import { createApp } from 'vue'
import VueChatbot from 'vue-simple-chatbot';
import App from './App.vue'

const app = createApp(App)

app.use(VueChatbot)

app.mount('#app')

```

### Use the component

``` vue
<template>
   <vue-chatbot :steps="steps">
        <template v-slot:header>
          <div>Hi, Chatbot Here</div>
       </template>
   </vue-chatbot>
</template>

<script>

export default {
    name: 'App',
    data() {
        return {
            steps: [
                {
                    id: '1',
                    hideInput: true,
                    message: 'Hello There...',
                    trigger: '2'
                },
                {
                    id: '2',
                    hideInput: true,
                    options: [
                        { id: '1', label: 'Please try again', trigger: '1' },
                        { id: '2', label: 'I am busy', trigger: '3' },
                        { id: '3', label: 'Ask me phone number', trigger: '4' },
                    ],
                },
                {
                    id: '4',
                    message: 'What is your phone number?',
                    trigger: 'phone',
                },
                {
                    id: 'phone',
                    user: true,
                    validator: (value) => {
                        if (isNaN(value)) {
                            return 'Value should be a number';
                        }
                        return true;
                    },
                    trigger: '3'
                },
                {
                    id: '3',
                    hideInput: true,
                    message: 'Enjoy your activities!',
                    end: true
                },
            ]
        }
    }
}

</script>

```

## Api Reference

### Props

| Name                  | Type     | Default       | Description |
| ---                   | ---      | ---           | ---         |
| `steps`               | Array    | []            | Step by step chat declare here, you can check through this doc [example](example/App.vue) |
| `width`               | String   | '350px'       | Define width of chat |
| `styleConfig`         | Object   | { theme: 'rgb(110, 72, 170)' }       | Set theme color of chat |
| `delay`               | Number   | 1000          | Set delay response chat both user and bot (1000 = 1 second) |
| `botAvatar`           | Image    | ![](src/assets/robot.png)        | Set bot image |
| `userAvatar`          | Image    | ![](src/assets/user.png)         | Set user image |

### Slot

| Name            | Description |
| ---             | ---         |
| `header`        | Replace header content, you can refer to this doc [example](example/App.vue) |

## Credit
Inspired by [React Simple Chatbot](https://lucasbassetti.com.br/react-simple-chatbot/)
## License
MIT

---
_Source: https://npm.io/package/vue-simple-chatbot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._