react native chatbot

Reaccionar chatbot nativo

Un componente de chatbot nativo de reacción para crear chats de conversación. Basado en reaccionar-simple-chatbot.

Empezando

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

Documentación

Propiedades

Nombre	Tipo	Por defecto	Descripción
avatarStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de avatar.
avatarWrapperStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento circundante del avatar.
botAvatar	PropTypes.string	img	Fuente de imagen del bot
botBubbleColor	PropTypes.string	#6E48AA	Color de la burbuja del robot
botDelay	PropTypes.number	1000	El tiempo de retraso de los mensajes del bot.
botFontColor	PropTypes.string	#fff	Color de fuente del robot
bubbleStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de burbuja.
optionStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el contenedor de opciones.
optionElementStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de opción.
optionFontColor	PropTypes.string		Color de fuente de opción
optionBubbleColor	PropTypes.string		Color de burbuja de opción
className	PropTypes.string		Agregar un nombre de clase al elemento raíz
contentStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de desplazamiento.
customDelay	PropTypes.number	1000	El tiempo de retraso de los mensajes personalizados.
customStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de paso personalizado
footerStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de pie de página
handleEnd({ renderedSteps, steps, values })	PropTypes.func		La función de devolución de llamada cuando finaliza el chat.
headerComponent	PropTypes.element		Componente de encabezado para el chatbot
hideUserAvatar	PropTypes.bool	false	Si es verdadero, el avatar del usuario estará oculto en todos los pasos.
inputStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento de entrada.
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Desplazamiento vertical de la vista del teclado. Comprobar tecladoVerticalOffset
placeholder	PropTypes.string	Type the message ...	Marcador de posición de entrada del chatbot
steps	PropTypes.array		Los pasos del chatbot para mostrar
style	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento del botón de envío.
submitButtonStyle	PropTypes.object		El objeto de estilo que se utilizará para anular el elemento del botón.
submitButtonContent	PropTypes.string o PropTypes.element	SEND	La cadena u objeto que se utilizará para anular el contenido del botón.
userAvatar	PropTypes.string	img	Fuente de imagen de usuario
userBubbleStyle	PropTypes.string	img	El objeto de estilo que se utilizará para anular el elemento de burbuja del usuario.
userBubbleColor	PropTypes.string	#fff	Color de la burbuja del usuario
userDelay	PropTypes.number	1000	El tiempo de retraso de los mensajes de los usuarios.
userFontColor	PropTypes.string	#4a4a4a	Color de fuente del usuario
scrollViewProps	PropTypes.object	#4a4a4a	Úselo para anular los accesorios de vista de desplazamiento

Pasos

Paso de texto

Nombre	Tipo	Requerido	Descripción
id	String / Number	true	La identificación del paso. Requerido para cualquier paso
message	String / Function	true	El mensaje de texto. Si funciona, recibirá ({ valor anterior, pasos }) parámetros
trigger	String / Number / Function	false	La identificación del siguiente paso que se activará. Si es funcional, recibirá ({ valor, pasos }) parámetros
avatar	String	false	el avatar que se mostrará justo en este paso. Nota: este paso debe ser un paso en el que aparezca el avatar.
delay	Number	false	establecer el tiempo de retraso para que se muestre el mensaje
end	Boolean	false	si es verdadero indica que este paso es el último
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Ejemplo:

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

Paso del usuario

Nombre	Tipo	Requerido	Descripción
id	String / Number	true	La identificación del paso. Requerido para cualquier paso
user	Boolean	true	Si es verdadero, indica que estás esperando una acción de tipo de usuario.
trigger	String / Number / Function	false	La identificación del siguiente paso que se activará. Si es funcional, recibirá ({ valor, pasos }) parámetros
validator	String / Number	false	Si el atributo de usuario es verdadero, puede pasar una función de validación para validar el texto escrito por el usuario.
end	Boolean	false	si es verdadero indica que este paso es el último
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Ejemplo:

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

Paso de opciones

Nombre	Tipo	Requerido	Descripción
id	String / Number	true	La identificación del paso. Requerido para cualquier paso
options	Array	true	Matriz de opciones con propiedades {etiqueta, valor, disparador}
end	Boolean	false	si es verdadero indica que este paso es el último
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Ejemplo:

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

Paso personalizado

Nombre	Tipo	Requerido	Descripción
id	String / Number	true	La identificación del paso. Requerido para cualquier paso
component	Component	true	Componente de reacción personalizado
replace	Boolean	false	si es verdadero, indica que el componente será reemplazado en el siguiente paso
waitAction	Boolean	false	Si es verdadero, indica que estás esperando alguna acción. Debe utilizar el accesorio triggerNextStep en su componente para ejecutar la acción.
asMessage	Boolean	false	Si es verdadero, indica que el componente se mostrará como un paso de texto.
trigger	String / Number / Function	false	La identificación del siguiente paso que se activará. Si es funcional, recibirá ({ valor, pasos }) parámetros
delay	Number	false	establezca el tiempo de retardo para que se muestre el componente
end	Boolean	false	si es verdadero indica que este paso es el último
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Ejemplo:

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

Paso de actualización

Nombre	Tipo	Requerido	Descripción
id	String / Number	true	La identificación del paso. Requerido para cualquier paso
update	String / Number	true	La identificación del siguiente paso a actualizar.
trigger	String / Number / Function	false	La identificación del siguiente paso que se activará. Si es funcional, recibirá ({ valor, pasos }) parámetros
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Ejemplo:

 {
  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

Cuando declaras un paso personalizado, debes indicar un componente de React personalizado que se representará en el chat. Este componente personalizado recibirá las siguientes propiedades.

Nombre	Tipo	Descripción
previousStep	PropTypes.object	Paso anterior renderizado
step	PropTypes.object	Paso actual renderizado
steps	PropTypes.object	Todos los pasos renderizados
triggerNextStep({ value, trigger })	PropTypes.func	Función de devolución de llamada para activar el siguiente paso cuando el atributo del usuario es verdadero. Opcionalmente, puede pasar un objeto con un valor que se establecerá en el paso y que se activará el siguiente paso.
inputAttributes	Object	Establezca cualquier atributo en el campo de entrada (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Conjunto de pares clave-valor que puede adjuntar a un objeto. Esto puede resultar útil para almacenar información adicional sobre el objeto en un formato estructurado.

Cómo contribuir

Por favor consulte la guía de contribución

Autores

Lucas Bassetti

Vea también la lista de contribuyentes que participaron en este proyecto.

Donar

Si te gustó este proyecto, puedes donar para apoyarlo ❤️

Licencia

MIT · Lucas Bassetti