vue-abchat은
인공지능 챗봇 서비스를 편하게 구현하기 위한 vue.js component 입니다.
vue-abchat을 활용하면 ABC 보다 더 쉽게 챗봇을 서비스할 수 있습니다.
챗봇 서버에 Rest-api 요청으로 메세지를 보내면 응답 결과를 받아 chat 화면에 띄워줍니다.
현재 베타버전입니다.
데모 페이지: 예정
- Install
npm install vue-abchat
- Usage
<template>
<abchat :BASE_URL="'http://localhost:8000/'"></abchat>
</template>
<script>
// get component from node_modules
import abchat from 'vue-abchat.vue'
export default {
name: 'app',
// add component
components: {
abchat
}
}
</script>- Install
We use axios library
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-abchat/dist/abchat.min.js"></script>- Usage
<body>
<div id="app">
<abchat :base_url="'http://localhost:8000/'"></abchat>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app'
})
</script>현재 cdn 방식으로 설치할 경우 font-awesome 미적용으로 인해 신고를 할 수 없는 버그를 수정중입니다.
컴포넌트 형태로 배포하였기 때문에 사용을 원하는 vue 파일에서 직접 import 한 후 사용하시면 됩니다.
<template>
<abchat :base_url="'http://localhost:8000/'" :title="'sjchat'" button_title="'hello'"></abchat>
</template>| props | 역할 | 입력타입 |
|---|---|---|
:base_url (required)
|
챗봇을 위한 api 서버 url | String |
| :width | 채팅창의 가로 길이를 지정 (px) | Number |
| :height | 채팅창의 세로 길이를 지정(px) | Number |
| :title | 채팅창 상단의 제목 | String |
| :button_title | 채팅창 최소화 시 버튼에 나타나는 텍스트 | String |
<template>
<abchat :base_url="'http://localhost:8000/'" top left></abchat>
</template>| 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;} |
method : GET
요청방식 : BASE_URL/{{message}}
요청결과 예시:
{
"result": "POS"
}method: POST (신고 버튼 클릭시)
요청방식 : BASE_URL/db2
data : { "siren": {"result": `{question}`} }
