# vue-abchat
[](https://www.npmjs.org/package/vue-abchat)
[](https://packagephobia.now.sh/result?p=vue-abchat)
[](http://npm-stat.com/charts.html?package=vue-abchat)
## Intro
`vue-abchat`은
인공지능 챗봇 서비스를 편하게 구현하기 위한 vue.js component 입니다.
`vue-abchat`을 활용하면 ABC 보다 더 쉽게 챗봇을 서비스할 수 있습니다.
챗봇 서버에 Rest-api 요청으로 메세지를 보내면 응답 결과를 받아 chat 화면에 띄워줍니다.
현재 베타버전입니다.
데모 페이지: `예정`
## Installation
##### npm / node.js
- Install
```
npm install vue-abchat
```
- Usage
##### *.vue
```vue
```
##### CDN
- Install
*We use axios library*
```html
```
- Usage
```html
```
> 현재 cdn 방식으로 설치할 경우 font-awesome 미적용으로 인해 신고를 할 수 없는 버그를 수정중입니다.
## Usage
컴포넌트 형태로 배포하였기 때문에 사용을 원하는 vue 파일에서 직접 import 한 후 사용하시면 됩니다.
##### props로 customizing 가능
```vue
```
##### 현재 지원하는 props 목록
| props | 역할 | 입력타입 |
| ---------------------- | --------------------------------------- | -------- |
| :base_url `(required)` | 챗봇을 위한 api 서버 url | String |
| :width | 채팅창의 가로 길이를 지정 (px) | Number |
| :height | 채팅창의 세로 길이를 지정(px) | Number |
| :title | 채팅창 상단의 제목 | String |
| :button_title | 채팅창 최소화 시 버튼에 나타나는 텍스트 | String |
##### attribute로 customizing 가능
```vue
```
##### 지원하는 attribute 목록
| attribute | 역할 |
| ------------------ | ------------------------------------ |
| top | css {position: fixed; top: 30px;} |
| bottom `(Default)` | css {position: fixed; bottom: 30px;} |
| left | css {position: fixed; left: 30px;} |
| right`(Default)` | css {position: fixed; right: 30px;} |
---
#### 데이터 요청 및 응답 방식
##### `Rest-api`
method : `GET`
요청방식 : `BASE_URL/{{message}}`
요청결과 예시:
```json
{
"result": "POS"
}
```
method: `POST` (신고 버튼 클릭시)
요청방식 : `BASE_URL/db2`
```json
data : { "siren": {"result": `{question}`} }
```
## 예시화면
##### 버튼을 클릭하면 채팅창이 열립니다.
##### 채팅창 기본 화면
##### 채팅을 입력하면 Rest-api 형식으로 서버에 요청한 뒤 응답된 결과를 출력합니다.
##### C버튼을 누르면 채팅을 지울 수 있습니다.
# License
[MIT](LICENSE)