i chatbot

i-chatbot

Componente simple y elegante para crear interfaces conversacionales en React. ??

Empezando

Instalación

 npm i i-chatbot --save

Uso básico

Importar componente

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

Cree métodos que manejarán eventos de devolución de datos desde un chatbot. Debería devolver una serie de objetos de mensaje para responder a la acción del usuario con una devolución de llamada.

  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!')
    ]
  }

Renderice ChatBot con un método de devolución de llamada de inicio y un botón de inicio.

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

chatbot

Accesorios

Apuntalar	Por defecto	Tipo	Descripción
enGetStarted	-	función	Método de devolución de llamada inicial para devolver los primeros mensajes
botón de inicio	-	objeto	Parámetros del botón de inicio

Métodos

empezar de nuevo (mensaje)

Restablece un estado de chat y agrega un objeto de mensaje si no se establece un botón de inicio.

ChatBotUtil

Métodos

mensaje de texto (texto, ...acciones)

Crea un objeto de mensaje de texto.

Parámetros:

Nombre	Tipo	Descripción
texto	cadena	Texto del mensaje
comportamiento	objeto(s)	Objeto de botón(es) de respuesta rápida

mensaje de texto de usuario (texto)

Crea un objeto de mensaje de texto de un usuario.

Parámetros:

Nombre	Tipo	Descripción
texto	cadena	Texto del mensaje

makeReplyButton (título)

Crea un botón de inicio.

Parámetros:

Nombre	Tipo	Descripción
título	cadena	Título

makeReplyButton (título, devolución de datos)

Crea un botón de respuesta rápida.

Parámetros:

Nombre	Tipo	Descripción
título	cadena	Título
devolución de datos	cadena	valor de devolución

makeTextInputField (título, devolución de datos)

Crea un campo de entrada de texto.

Parámetros:

Nombre	Tipo	Descripción
enviar	cadena	Título del botón de enviar
marcador de posición	cadena	Marcador de posición para el campo de entrada
devolución de datos	cadena	valor de devolución

Estilo

Como el preprocesador CSS se usa MENOS. Copie y modifique estilos desde demo/src/i-chatbot.less y luego importe en su aplicación.

¿Construido con i-chatbot ?

• Sitio web personal de Oleh Stasula
• Página de inicio de Justin Case

¿Has creado algo interesante con i-chatbot ? ¡Envíe una solicitud de extracción y agréguela a esta lista!

Hacer ?

• Dirección de chat ascendente
• Mejor validación de entrada
• Marcador de posición de avatar

Contribución ?

¡Tu contribución es bienvenida, no importa cuán grande o pequeña sea!

Eche un vistazo a la guía de contribución para obtener detalles sobre la estructura del proyecto, el entorno de desarrollo, el conjunto de pruebas, el estilo del código, etc. Todas las actualizaciones de la versión se mencionan en el registro de cambios.

¿Licencia?

La biblioteca está disponible como código abierto según los términos de la licencia MIT.