react native chatbot

네이티브 챗봇 반응

대화 채팅을 생성하는 반응형 네이티브 챗봇 구성 요소입니다. React-Simple-Chatbot을 기반으로 합니다.

시작하기

npm install react-native-chatbot --save

용법

 import ChatBot from 'react-native-chatbot' ;

const steps = [
  {
    id : '0' ,
    message : 'Welcome to react chatbot!' ,
    trigger : '1' ,
  } ,
  {
    id : '1' ,
    message : 'Bye!' ,
    end : true ,
  } ,
] ;

< ChatBot steps = { steps } / > 

선적 서류 비치

속성

이름	유형	기본	설명
avatarStyle	PropTypes.object		아바타 요소를 재정의하는 데 사용할 스타일 개체
avatarWrapperStyle	PropTypes.object		아바타 주변 요소를 재정의하는 데 사용하는 스타일 개체
botAvatar	PropTypes.string	img	봇 이미지 소스
botBubbleColor	PropTypes.string	#6E48AA	봇 버블 색상
botDelay	PropTypes.number	1000	봇 메시지 지연 시간
botFontColor	PropTypes.string	#fff	봇 글꼴 색상
bubbleStyle	PropTypes.object		버블 요소를 재정의하는 데 사용할 스타일 개체
optionStyle	PropTypes.object		옵션 컨테이너를 재정의하는 데 사용할 스타일 개체
optionElementStyle	PropTypes.object		옵션 요소를 재정의하는 데 사용할 스타일 개체
optionFontColor	PropTypes.string		옵션 글꼴 색상
optionBubbleColor	PropTypes.string		옵션 버블 색상
className	PropTypes.string		루트 요소에 클래스 이름 추가
contentStyle	PropTypes.object		스크롤 요소를 재정의하는 데 사용할 스타일 개체
customDelay	PropTypes.number	1000	맞춤 메시지 지연 시간
customStyle	PropTypes.object		사용자 정의 단계 요소를 재정의하는 데 사용할 스타일 개체
footerStyle	PropTypes.object		바닥글 요소를 재정의하는 데 사용할 스타일 개체
handleEnd({ renderedSteps, steps, values })	PropTypes.func		채팅 종료 시 콜백 기능
headerComponent	PropTypes.element		챗봇의 헤더 구성요소
hideUserAvatar	PropTypes.bool	false	true인 경우 사용자 아바타는 모든 단계에서 숨겨집니다.
inputStyle	PropTypes.object		입력 요소를 재정의하는 데 사용할 스타일 개체
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	키보드 보기의 수직 오프셋입니다. 키보드VerticalOffset을 확인하세요.
placeholder	PropTypes.string	Type the message ...	챗봇 입력 자리 표시자
steps	PropTypes.array		표시할 챗봇 단계
style	PropTypes.object		제출 버튼 요소를 재정의하는 데 사용할 스타일 개체
submitButtonStyle	PropTypes.object		버튼 요소를 재정의하는 데 사용할 스타일 개체
submitButtonContent	PropTypes.string 또는 PropTypes.element	SEND	버튼 내용을 재정의하는 데 사용할 문자열 또는 객체
userAvatar	PropTypes.string	img	사용자 이미지 소스
userBubbleStyle	PropTypes.string	img	사용자의 버블 요소를 재정의하는 데 사용할 스타일 개체
userBubbleColor	PropTypes.string	#fff	사용자 풍선 색상
userDelay	PropTypes.number	1000	사용자 메시지 지연 시간
userFontColor	PropTypes.string	#4a4a4a	사용자 글꼴 색상
scrollViewProps	PropTypes.object	#4a4a4a	스크롤 뷰 소품을 재정의하는 데 사용

단계

텍스트 단계

이름	유형	필수의	설명
id	String / Number	true	단계 ID입니다. 모든 단계에 필수
message	String / Function	true	문자 메시지입니다. 함수인 경우 ({ 이전 값, 단계 }) 매개변수를 수신합니다.
trigger	String / Number / Function	false	트리거될 다음 단계의 ID입니다. 함수인 경우 ({ value, steps }) 매개변수를 수신합니다.
avatar	String	false	이 단계에서 표시될 아바타입니다. 참고: 이 단계는 아바타가 나타나는 단계여야 합니다.
delay	Number	false	메시지가 표시될 때까지의 지연 시간을 설정하세요
end	Boolean	false	true인 경우 이 단계가 마지막 단계임을 나타냅니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

예:

 {
  id : '1' ,
  message : 'Hello World' ,
  trigger : '2' ,
} ,
{
  id : '2' ,
  message : ( { previousValue , steps } ) => 'Hello' ,
  end : true ,
} 

사용자 단계

이름	유형	필수의	설명
id	String / Number	true	단계 ID입니다. 모든 단계에 필수
user	Boolean	true	true인 경우 사용자 유형 작업을 기다리고 있음을 나타냅니다.
trigger	String / Number / Function	false	트리거될 다음 단계의 ID입니다. 함수인 경우 ({ value, steps }) 매개변수를 수신합니다.
validator	String / Number	false	사용자 속성이 true이면 유효성 검사기 함수를 전달하여 사용자가 입력한 텍스트의 유효성을 검사할 수 있습니다.
end	Boolean	false	true인 경우 이 단계가 마지막 단계임을 나타냅니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

예:

 {
  id : '1' ,
  user : true ,
  inputAttributes : {
    keyboardType : 'email-address'
  } ,
  end : true ,
} 

옵션 단계

이름	유형	필수의	설명
id	String / Number	true	단계 ID입니다. 모든 단계에 필수
options	Array	true	{ 라벨, 값, 트리거 } 속성이 포함된 옵션 배열
end	Boolean	false	true인 경우 이 단계가 마지막 단계임을 나타냅니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

예:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

맞춤 단계

이름	유형	필수의	설명
id	String / Number	true	단계 ID입니다. 모든 단계에 필수
component	Component	true	사용자 정의 반응 구성 요소
replace	Boolean	false	true인 경우 구성 요소가 다음 단계로 대체될 것임을 나타냅니다.
waitAction	Boolean	false	true인 경우 어떤 작업을 기다리고 있음을 나타냅니다. 작업을 실행하려면 구성 요소에서 TriggerNextStep 소품을 사용해야 합니다.
asMessage	Boolean	false	f true는 구성 요소가 텍스트 단계로 표시됨을 나타냅니다.
trigger	String / Number / Function	false	트리거될 다음 단계의 ID입니다. 함수인 경우 ({ value, steps }) 매개변수를 수신합니다.
delay	Number	false	구성요소가 표시될 때까지 지연 시간을 설정합니다.
end	Boolean	false	true인 경우 이 단계가 마지막 단계임을 나타냅니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

예:

 {
  id : '1' ,
  component : < CustomComponent / >
  trigger : '2'
} 

업데이트 단계

이름	유형	필수의	설명
id	String / Number	true	단계 ID입니다. 모든 단계에 필수
update	String / Number	true	업데이트할 다음 단계의 ID
trigger	String / Number / Function	false	트리거될 다음 단계의 ID입니다. 함수인 경우 ({ value, steps }) 매개변수를 수신합니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

예:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

맞춤형 구성요소

사용자 정의 단계를 선언할 때 채팅에서 렌더링할 사용자 정의 React 구성요소를 표시해야 합니다. 이 사용자 정의 구성 요소는 다음 속성을 받습니다.

이름	유형	설명
previousStep	PropTypes.object	이전 단계가 렌더링되었습니다.
step	PropTypes.object	렌더링된 현재 단계
steps	PropTypes.object	렌더링된 모든 단계
triggerNextStep({ value, trigger })	PropTypes.func	사용자 속성이 true인 경우 다음 단계를 트리거하는 콜백 함수입니다. 선택적으로 단계와 트리거될 다음 단계에서 설정할 값이 있는 객체를 전달할 수 있습니다.
inputAttributes	Object	입력 필드에 속성을 설정합니다(keyboardType, autoCapitalize, autoComplete).
metadata	Object	객체에 연결할 수 있는 키-값 쌍 세트입니다. 이는 개체에 대한 추가 정보를 구조화된 형식으로 저장하는 데 유용할 수 있습니다.

기여하는 방법

기여 가이드를 확인해주세요.

저자

루카스 바세티

이 프로젝트에 참여한 기여자 목록도 참조하세요.

기부

이 프로젝트가 마음에 드셨다면 기부하여 후원하실 수 있습니다 ❤️

특허

MIT · 루카스 바세티