i chatbot

아이챗봇

React에서 대화형 인터페이스를 구축하기 위한 간단하고 우아한 구성 요소입니다. ??

시작하기

설치

 npm i i-chatbot --save

기본 사용법

구성요소 가져오기

 import ChatBot, { ChatBotUtil } from 'i-chatbot'

챗봇의 포스트백 이벤트를 처리할 메서드를 만듭니다. 콜백을 통해 사용자의 작업에 응답하려면 메시지 개체 배열을 반환해야 합니다.

  getStarted () {
    return [
      ChatBotUtil.textMessage(['Hi!', 'Hey there!'].any()),
      ChatBotUtil.textMessage(['How is life?', 'What's up?'].any(),
        ChatBotUtil.makeReplyButton('Great!', this.intro))
    ]
  }

  intro () {
    return [
      ChatBotUtil.textMessage('That's good to hear!')
    ]
  }

시작 콜백 메소드와 시작 버튼을 사용하여 ChatBot을 렌더링합니다.

 <ChatBot onGetStarted={this.getStarted}
         getStartedButton={ChatBotUtil.makeGetStartedButton('Get Started')} />

챗봇

소품

소품	기본	유형	설명
시작하기	-	기능	첫 번째 메시지를 반환하는 초기 콜백 메서드
getStarted버튼	-	물체	시작 버튼 매개변수

행동 양식

startOver(메시지)

시작 버튼이 설정되지 않은 경우 채팅 상태를 재설정하고 메시지 개체를 추가합니다.

ChatBotUtil

행동 양식

textMessage(텍스트, ...작업)

문자 메시지 개체를 만듭니다.

매개변수:

이름	유형	설명
텍스트	끈	메시지 텍스트
행위	사물)	빠른 답장 버튼 개체

userText메시지(텍스트)

사용자의 문자 메시지 개체를 만듭니다.

매개변수:

이름	유형	설명
텍스트	끈	메시지 텍스트

makeReplyButton(제목)

시작하기 버튼을 만듭니다.

매개변수:

이름	유형	설명
제목	끈	제목

makeReplyButton(제목, 포스트백)

빠른 답장 버튼을 만듭니다.

매개변수:

이름	유형	설명
제목	끈	제목
포스트백	끈	포스트백 값

makeTextInputField(제목, 포스트백)

텍스트 입력 필드를 만듭니다.

매개변수:

이름	유형	설명
보내다	끈	제출 버튼 제목
자리 표시자	끈	입력 필드에 대한 자리 표시자
포스트백	끈	포스트백 값

스타일

CSS 전처리기가 덜 ​​사용되기 때문입니다. demo/src/i-chatbot.less 에서 스타일을 복사하고 수정한 다음 앱으로 가져옵니다.

i-chatbot 으로 구축되었나요?

• Oleh Stasula의 개인 웹사이트
• 저스틴 케이스의 랜딩 페이지

i-chatbot 으로 멋진 것을 만드셨나요? 풀 요청을 제출하고 이 목록에 추가하세요!

할 일?

• 상향식 채팅 방향
• 더 나은 입력 검증
• 아바타 자리표시자

기부금 ?

크든 작든 여러분의 기여를 환영합니다!

프로젝트 구조, 개발 환경, 테스트 스위트, 코드 스타일 등에 대한 자세한 내용은 기여 가이드를 참조하세요. 모든 버전 업데이트는 변경 로그에 언급되어 있습니다.

라이센스?

라이브러리는 MIT 라이선스 조건에 따라 오픈 소스로 제공됩니다.