react native chatbot

Reagir Chatbot Nativo

Um componente react nativo do chatbot para criar chats de conversação. Baseado em react-simple-chatbot.

Primeiros passos

npm install react-native-chatbot --save

Uso

 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 } / > 

Documentação

Propriedades

Nome	Tipo	Padrão	Descrição
avatarStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento avatar
avatarWrapperStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento circundante do avatar
botAvatar	PropTypes.string	img	Fonte da imagem do bot
botBubbleColor	PropTypes.string	#6E48AA	Cor da bolha do bot
botDelay	PropTypes.number	1000	O tempo de atraso das mensagens do bot
botFontColor	PropTypes.string	#fff	Cor da fonte do bot
bubbleStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento bolha
optionStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o contêiner de opções
optionElementStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento de opção
optionFontColor	PropTypes.string		Opção de cor da fonte
optionBubbleColor	PropTypes.string		Opção de cor da bolha
className	PropTypes.string		Adicione um nome de classe ao elemento raiz
contentStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento de rolagem
customDelay	PropTypes.number	1000	O tempo de atraso das mensagens personalizadas
customStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento de etapa personalizado
footerStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento de rodapé
handleEnd({ renderedSteps, steps, values })	PropTypes.func		A função de retorno de chamada quando o chat termina
headerComponent	PropTypes.element		Componente de cabeçalho para o chatbot
hideUserAvatar	PropTypes.bool	false	Se for verdade, o avatar do usuário ficará oculto em todas as etapas
inputStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento de entrada
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Deslocamento vertical da visualização do teclado. Verifique o tecladoVerticalOffset
placeholder	PropTypes.string	Type the message ...	Espaço reservado de entrada do chatbot
steps	PropTypes.array		As etapas do chatbot para exibir
style	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento do botão enviar
submitButtonStyle	PropTypes.object		O objeto de estilo a ser usado para substituir o elemento do botão
submitButtonContent	PropTypes.string ou PropTypes.element	SEND	A string ou objeto a ser usado para substituir o conteúdo do botão
userAvatar	PropTypes.string	img	Fonte da imagem do usuário
userBubbleStyle	PropTypes.string	img	O objeto de estilo a ser usado para substituir o elemento bolha do usuário
userBubbleColor	PropTypes.string	#fff	Cor do balão do usuário
userDelay	PropTypes.number	1000	O tempo de atraso das mensagens do usuário
userFontColor	PropTypes.string	#4a4a4a	Cor da fonte do usuário
scrollViewProps	PropTypes.object	#4a4a4a	Use para substituir adereços de visualização de rolagem

Passos

Etapa de texto

Nome	Tipo	Obrigatório	Descrição
id	String / Number	true	O ID da etapa. Necessário para qualquer etapa
message	String / Function	true	A mensagem de texto. Se for função, receberá ({ previousValue, steps }) parâmetros
trigger	String / Number / Function	false	O ID da próxima etapa a ser acionada. Se for função, receberá ({valor, etapas}) parâmetros
avatar	String	false	o avatar a ser mostrado apenas nesta etapa. Nota: esta etapa deve ser uma etapa em que o avatar aparece
delay	Number	false	definir o tempo de atraso para a mensagem ser mostrada
end	Boolean	false	se verdadeiro, indica que esta etapa é a última
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Exemplo:

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

Etapa do usuário

Nome	Tipo	Obrigatório	Descrição
id	String / Number	true	O ID da etapa. Necessário para qualquer etapa
user	Boolean	true	se verdadeiro, indica que você está aguardando uma ação de tipo de usuário
trigger	String / Number / Function	false	O ID da próxima etapa a ser acionada. Se for função, receberá ({valor, etapas}) parâmetros
validator	String / Number	false	se o atributo do usuário for verdadeiro você pode passar uma função validadora para validar o texto digitado pelo usuário
end	Boolean	false	se verdadeiro, indica que esta etapa é a última
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Exemplo:

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

Etapa de opções

Nome	Tipo	Obrigatório	Descrição
id	String / Number	true	O ID da etapa. Necessário para qualquer etapa
options	Array	true	Matriz de opções com propriedades {rótulo, valor, gatilho}
end	Boolean	false	se verdadeiro, indica que esta etapa é a última
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Exemplo:

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

Etapa personalizada

Nome	Tipo	Obrigatório	Descrição
id	String / Number	true	O ID da etapa. Necessário para qualquer etapa
component	Component	true	Componente React Personalizado
replace	Boolean	false	se verdadeiro, indica que o componente será substituído pela próxima etapa
waitAction	Boolean	false	se verdadeiro, indica que você está aguardando alguma ação. Você deve usar a propriedade triggerNextStep em seu componente para executar a ação
asMessage	Boolean	false	f true indica que o componente será exibido como uma etapa de texto
trigger	String / Number / Function	false	O ID da próxima etapa a ser acionada. Se for função, receberá ({valor, etapas}) parâmetros
delay	Number	false	definir o tempo de atraso para o componente ser mostrado
end	Boolean	false	se verdadeiro, indica que esta etapa é a última
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Exemplo:

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

Etapa de atualização

Nome	Tipo	Obrigatório	Descrição
id	String / Number	true	O ID da etapa. Necessário para qualquer etapa
update	String / Number	true	O ID da próxima etapa a ser atualizada
trigger	String / Number / Function	false	O ID da próxima etapa a ser acionada. Se for função, receberá ({valor, etapas}) parâmetros
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Exemplo:

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

Componente personalizado

Ao declarar uma etapa customizada, você precisa indicar um componente React customizado para ser renderizado no chat. Este componente personalizado receberá as seguintes propriedades.

Nome	Tipo	Descrição
previousStep	PropTypes.object	Etapa anterior renderizada
step	PropTypes.object	Etapa atual renderizada
steps	PropTypes.object	Todas as etapas renderizadas
triggerNextStep({ value, trigger })	PropTypes.func	Função de retorno de chamada para acionar a próxima etapa quando o atributo do usuário for verdadeiro. Opcionalmente você pode passar um objeto com valor a ser definido na etapa e a próxima etapa a ser acionada
inputAttributes	Object	Defina quaisquer atributos no campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares de valores-chave que você pode anexar a um objeto. Isto pode ser útil para armazenar informações adicionais sobre o objeto em um formato estruturado

Como contribuir

Por favor, verifique o guia de contribuição

Autores

Lucas Bassetti

Veja também a lista de colaboradores que participaram deste projeto.

Doar

Se você gostou deste projeto, você pode doar para apoiá-lo ❤️

Licença

MIT · Lucas Bassetti