vue bot ui 다운로드 - vue bot ui 소스 코드 다운로드

vue bot ui

AI 소스 코드

vent to toggle & close the board manually

다운로드

Vue 봇 UI

맞춤형 챗봇 UI를 찾고 계시는 분.

개인 프로젝트를 위해 빌드했지만 누군가가 필요하다고 생각하는 만큼 많은 옵션을 가져오려고 노력했으니 마음껏 사용해 보세요.

데모 페이지가 곧 제공될 예정입니다.

뷰 봇 UI

설치하다

npm install vue-bot-ui

// or
yarn add vue-bot-ui

용법

구성요소 가져오기 및 등록

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

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

그리고 그것을 사용하십시오 :

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

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

소품

구성 요소에서 사용할 수 있는 소품 목록:

이름	유형	기본	설명
`messages`	정렬	[]	필수의 . 메시지 데이터
`options`	물체	아래를 참조하세요	UI를 맞춤설정하는 몇 가지 옵션
`bot-typing`	부울	거짓	`true` 인 경우 봇 입력 표시기가 표시됩니다.
`input-disable`	부울	거짓	`true` 이면 메시지 입력이 비활성화됩니다.
`is-open`	부울	거짓	`true` 인 경우 보드는 init에서 열립니다.
`open-delay`	숫자	한정되지 않은	init에서 열기 전 지연 시간(ms)입니다. `true` 되려면 `is-open` 필요합니다.

옵션

UI를 사용자 정의하는 데 사용 가능한 옵션 목록:

이름	유형	기본	설명
`botTitle`	끈	'챗봇'	보드 헤더에 표시될 봇 이름
`colorScheme`	끈	'#1b53d0'	버블버튼 및 보드 헤더의 배경색
`textColor`	끈	'#fff'	풍선 버튼 아이콘 및 보드 헤더 제목 색상
`bubbleBtnSize`	숫자	56	풍선 버튼 크기(px)
`animation`	부울	진실	버블 버튼 아이콘 및 보드 표시 애니메이션을 비활성화하려면 `false` 로 설정하세요.
`boardContentBg`	끈	'#fff'	보드 메시지 상자의 배경색
`botAvatarSize`	숫자	32	봇 아바타 크기(px)
`botAvatarImg`	끈	'http://placehold.it/200x200'	아바타 이미지
`msgBubbleBgBot`	끈	'#f0f0f0'	Bot 메시지의 배경색
`msgBubbleColorBot`	끈	'#000'	Bot 메시지의 텍스트 색상
`msgBubbleBgUser`	끈	'#4356e0'	사용자 메시지의 배경색
`msgBubbleColorUser`	끈	'#fff'	사용자 메시지의 텍스트 색상
`inputPlaceholder`	끈	'메시지'	메시지 입력을 위한 자리 표시자
`inputDisableBg`	끈	'#fff'	비활성화된 입력의 배경색, `opacity: 0.2`
`inputDisablePlaceholder`	끈	null	비활성화된 입력에 대한 자리 표시자 메시지

구성 요소 및 이벤트

봇 API를 통합하려면 이 부분이 필요하기 때문에 알아야 할 가장 중요한 부분입니다. 예제가 필요하면 내 App.vue 파일을 살펴보세요.

이벤트

이름	매개변수	설명
`init`		보드가 열릴 때마다 화재가 발생합니다.
`msg-send`	값(객체)	사용자가 보내기를 누르거나 옵션을 선택하면 실행됩니다.
`destroy`		보드가 닫힐 때 화재 발생

msg-send 사용하여 사용자로부터 메시지를 받고 봇 API에 대한 요청을 트리거합니다.

트리거 이벤트:

이름	설명
`botui-open`	보드를 열려면
`botui-close`	보드를 닫으려면
`botui-toggle`	보드 열기/닫기를 전환하려면

구성요소

일반적인 패턴/예제 데이터:

 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' ,
  } ,
  ...
]

구성 요소 목록:

이 패키지에서 지원하는 현재 구성 요소, 파일 경로: 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
    } ,
    ...
  ] ,
}

다른 구성 요소도 곧 제공될 예정입니다.

슬롯

사용 가능한 슬롯 목록:

이름	설명
`header`	봇 이름이 포함된 보드 헤더입니다.
`actions`	입력 메시지의 보내기 버튼 옆에 있는 슬롯입니다. 여기에 추가 작업(이모지, 첨부 등)을 추가할 수 있습니다.
`sendButton`	보내기 버튼 아이콘을 텍스트로 변경할 수 있습니다.
`bubbleButton`	BubbleIcon 및 CloseIcon이 기본적으로 포함된 버블 버튼입니다.
`botTyping`	기본적으로 점 3개 표시가 포함된 봇 입력 메시지 풍선입니다.

필요한 것을 찾지 못하셨나요?

클래스 이름으로 CSS를 덮어쓸 수 있습니다. 각 유형과 상태에는 사용자 정의할 수 있는 별도의 클래스가 있습니다.

기능 요청 : 새로운 기능을 요청하려면 언제든지 이슈를 열어주세요.

개발자 / 빌드

 # 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