alfa
1.0.0
Alpha es un bot, o más bien una base para crear tu propio chatbot basado en web. Comenzamos este proyecto porque creemos que los chatbots pueden ser muy útiles y bastante divertidos; sin embargo, la situación actual tiene a la mayoría de los chatbots limitados a plataformas de mensajería existentes como Facebook, lo cual está bastante bien, pero ¿qué pasa si quieres que tu bot viva en otro lugar? la red ?
Puede crear su propio bot y definir sus propios estilos y reglas visuales , así como tener control ilimitado para la personalización y la lógica . Ya existen varias soluciones, pero pueden resultar limitantes, costosas y difíciles de implementar.
Aquí es donde Alpha resulta útil. Esta biblioteca está diseñada para permitirte construir tu propio bot de una manera muy sencilla. Sólo tienes que:
Descargar
Inserta tu propio árbol de preguntas y respuestas
Inserta tus propios colores e imágenes.
Alpha se encarga de toda la representación de la interfaz de usuario y del manejo del estado de la aplicación . Realmente no necesitas saber nada de React (o Javascript). Sin embargo, si conoce React y Redux, puede personalizar aún más la representación de la aplicación bot e incluso conectarla a cualquier motor de back-end o de IA de su elección.
Instalación
Personalizando el diálogo
Hacer recomendaciones
Personalizando la interfaz de usuario
Personalizando la aplicación React
Envío de correos electrónicos (por determinar)
Conexión a cualquier back-end (TBD)
Conexión a motores de IA (TBD)
Alpha está diseñado para ejecutarse en Docker . Sin embargo, puedes ejecutarlo localmente siempre que tengas NodeJS, así como npm o Yarn (¡preferiblemente!) en tu sistema.
Para instalar y ejecutar en su computadora, simplemente ejecute los siguientes comandos en su terminal. Necesitará tener Docker instalado (consulte a continuación las instrucciones sin Docker):
Clona este repositorio: git clone https://github.com/IcaliaLabs/alpha.git
Navegue al directorio: cd alpha
Dependencias de instalación: docker-compose run --rm alpha yarn install
Luego puedes levantar el servidor: docker-compose up alpha
¡Eso es todo! Debería ver el bot de demostración funcionando en su navegador si abre localhost:3000 * en su navegador.
Un par de puntos importantes cuando se ejecuta en modo de desarrollo:
La aplicación del bot tendrá habilitada la recarga en caliente , para que pueda experimentar los beneficios de Webpack + React.
Redux DevTools está habilitado de forma predeterminada para que pueda inspeccionar las acciones/cambios de estado de la aplicación en tiempo real.
El tiempo entre cada mensaje del bot se establece en 0 . Esto es para minimizar la frustración de los desarrolladores cuando repasan el flujo de la conversación una y otra vez; sin embargo, puedes cambiar este comportamiento si lo deseas en app/containers/BotContainer/sagas.js .
Heroku: Simplemente ejecuta git push heroku master . ¡Este robot está listo para Heroku!
Local con Docker: si puede compilar la imagen para ver cómo se comportará en producción, también armamos una compilación. Simplemente ejecuta:
docker-compose up release
Construirá la imagen y levantará el servidor de producción.
Si deseas instalar y ejecutar sin Docker, tendrás que instalar todas las dependencias directamente en tu directorio:
Para el desarrollo:
Clona este repositorio: git clone https://github.com/IcaliaLabs/alpha.git
Navegue al directorio: cd alpha
Ejecute npm install o yarn install para instalar las dependencias
Ejecute npm start para iniciar el servidor
Visita localhost:3000 en tu navegador
Para producción:
Este repositorio está listo para Heroku, solo haz git push heroku master
Si por alguna razón modifica los scripts de su package.json , asegúrese de considerar estos pasos antes de implementarlos en un servidor de producción.
Para AWS, puede seguir los mismos pasos que se enumeran aquí
Para Azure/Softlayer/otros servidores, tendrá que conectarse mediante ssh al servidor, extraer el repositorio, instalar las dependencias usando yarn y luego npm run build para crear la carpeta ./build . Finalmente puedes iniciar el servidor usando start:prod . Alternativamente, simplemente ejecute start:production y ejecutará estos pasos juntos en secuencia, además de las pruebas.
Toda la lógica detrás de lo que dice el bot, incluida la lógica de preguntas y respuestas, se encuentra dentro de BotMind, que se encuentra en app/BotMind/ . Llamamos burbujas a cada bot individual o entrada de usuario porque se representan como tales en la interfaz de usuario del chat.
Para personalizar el diálogo, solo necesita comprender y editar app/BotMind/_initialBubble.js y app/BotMind/BotMindFlows/index.js .
El archivo principal de BotMind es BotMind.js , pero este archivo solo actúa como recopilador y exportador de las funciones que se encuentran en _initialBubble.js , _nextBubble.js y _recommendationBubbles.js . Estos tres archivos, a su vez, llevan a cabo su lógica basándose en los árboles de preguntas y respuestas que se encuentran dentro de app/BotMind/BotMindFlows/ .
Aquí puede establecer en qué punto del árbol de conversación se inicia su bot cuando se inicializa o cuando el usuario selecciona reiniciar la conversación.
Este archivo contiene la lógica de a qué burbuja o diálogo debe saltar el bot en función del último mensaje del bot o del usuario. Realmente no necesita modificar este archivo, a menos que desee profundizar en una personalización mucho más detallada. Proceda bajo su propio riesgo.
Este archivo lleva a cabo la lógica de elegir una ruta cuando shouldEstimateRecommendation: true se pasa en una burbuja de diálogo. Este fichero actúa en base a los puntos acumulados por el Sistema de Bolsas durante la conversación. Realmente no necesita modificar este archivo, a menos que desee profundizar en una personalización mucho más detallada. Proceda bajo su propio riesgo.
BotMindFlows está disponible en app/BotMind/BotMindFlows/ . De forma predeterminada, aquí encontrará solo un archivo index.js , pero si su árbol de conversación comienza a crecer demasiado, puede crear sus propios archivos y usar index.js para combinarlos usando el operador de extensión como este.
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; Cada vez que BotMind analiza adónde ir (dentro de _nextBubble.js ), espera encontrar un conjunto de preguntas dentro de app/BotMind/BotMindFlows/index.js . Las preguntas se componen de... lo has adivinado, hashes individuales de preguntas y respuestas. Aquí puedes empezar a establecer la lógica y el flujo de la conversación. Por ejemplo, en nuestra demostración encontrará lo siguiente:
const questions = {start:{botPrompt: "Hola humano, mi nombre es Alpha, soy un chatbot increíble",answers: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "Mi propósito es ser un chatbot simple que guíe a los usuarios y sea capaz de tomar decisiones y hacer recomendaciones.",answers: [{nextId: "yourName"}]},yourName:{botPrompt: "Entonces, ¿cuál es tu nombre?",entrada: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {respuesta : common_greetings_negative,catchName: verdadero,nextId: "asYouCanSee", },],},
...}exportar preguntas predeterminadas;Cada hash de pregunta debe tener su propio ID único . Le recomendamos que haga que estas ID sean lo más claras posible , incluso si eso significa escribir un poco más, porque a medida que crece la biblioteca de conversaciones de su bot, recordar qué ID hace qué puede convertirse en un dolor de cabeza. Cada hash de pregunta ocupa las siguientes opciones:
botPrompt (se requiere [Cadena]): el mensaje del bot
respuestas ([Matriz] requerida): Las diferentes respuestas que puede tener el bot en función de lo que responde el usuario. La matriz se compone de hashes, cada uno de los cuales representa un posible resultado del flujo de conversación. Los hashes dentro de [ respuestas ] toman las siguientes opciones:
nextId (se requiere [Cadena]) : determina a qué ID de diálogo navegará el bot si se cumple esta respuesta. En el último mensaje de su bot o antes de saltar para estimar una recomendación ( ver más abajo ) , debe pasar null .
respuesta ([String | RegEx]) : la respuesta del usuario que activará este hash. Si está utilizando selectField o tagsField para predefinir respuestas para el usuario, estará bien usando cadenas; de lo contrario, es posible que desee usar RegEx (ver ejemplos).
sumToBags ([Array]) : aquí puedes comenzar a agregar puntos al BagsSystem para realizar controles de flujo más avanzados y/o emitir recomendaciones si ese es el propósito de tu bot. sumToBags normalmente tendrá este aspecto: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : indicará a React que almacene el nombre del usuario del mensaje del usuario en el estado de la aplicación.
catchCompanyName ([Boolean]) : Igual que el anterior pero para el nombre de una empresa.
catchMail ([Boolean]) : Igual que el anterior pero para direcciones de correo electrónico.
catchPhone ([Boolean]) : Igual que el anterior pero para números de teléfono.
deberíaEstimateRecommendation ([Boolean]) : indicará a BotMind que interrumpa el flujo regular y analice las bolsas de recomendaciones para hacer avanzar la conversación (ver ejemplos).
FinishConversation ([Boolean]) : le indicará al bot que finalice la conversación en el siguiente diálogo. Cuando esto sucede, la entrada del usuario se desactivará y el bot se "desconectará" hasta que el usuario seleccione "Reiniciar".
NOTA: si su solicitud de bot para esta parte del diálogo no espera ramificaciones, puede simplemente pasar nextId de esta manera:
answers: [
{
nextId: "hello"
}
] entrada ([Objeto]) : esto determina qué tipo de entrada está disponible para el usuario durante este botPrompt (campo de texto, etiquetas, selección, deshabilitado, etc.). De forma predeterminada, las entradas son campos de texto deshabilitados. Le recomendamos que utilice los ayudantes de StateFormatter incluidos al principio del archivo index.js .
type ([String]) : qué tipo de mensaje transmite el bot ("texto", "medio", "enlace" o "transformedText").
varName ([String]) : si elige "transformedText" como tipo de entrada, puede escribir @varName en botPrompt , que se referirá a esta opción. Cuando el bot muestre el mensaje, buscará la variable almacenada en el estado React ( ver más abajo ) y reemplazará @varName por el valor de esa variable.
Como se mencionó anteriormente, puede optar por almacenar algunos valores en el estado React y luego calcular una reacción/flujo/recomendación basada en estos valores. A esto lo llamamos Sistema de Bolsas.
El concepto del sistema de bolsas es que predefinimos unas " bolsas " que podemos llenar con " puntos " a medida que avanza la conversación. Finalmente, cuando decida llamar shouldEstimateRecommendation: true en uno de sus hashes de pregunta y respuesta, se llamará a _recommendationBubbles.js para decidir qué mostrar a continuación en función de cuántos puntos ha acumulado cada bolsa.
El primer paso es definir las bolsas que usará en /app/BotMind/recommendationBags.js . Si no define estas bolsas, el bot funcionará, pero no sabrá qué hacer cuando llame addToBags o shouldEstimateRecommendation . Las bolsas quedan así:
const recommendationBags = [
{
name: "redWine",
defaultValue: 0,
goToBubbleId: "redWine_start",
},
{
name: "whiteWine",
defaultValue: 0,
goToBubbleId: "whiteWine_start",
},
{
name: "roseWine",
defaultValue: 0,
goToBubbleId: "roseWine_start",
},
]
export default recommendationBags; Luego puedes definir cuándo agregar usando addToBags en tus flujos de preguntas y respuestas, por ejemplo:
question1:{
botPrompt: "Which of these are you having?",
input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
answers: [
...
{
answer: "Red Meat",
nextId: "question2",
sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
},
...
]
} Y cuando esté listo, simplemente llame shouldEstimateRecommendation de esta manera:
question2:{
botPrompt: "What will you serve for dessert?",
input: selectField(["Chocolate", ...]),
answers: [
...
{
answer: "Chocolate",
shouldEstimateRecommendation: true,
nextId: null,
sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
},
...
]
}, En este ejemplo, se llamará _recommendationBubbles.js y, por lo tanto, la siguiente burbuja del bot probablemente será la de redWine_start .
Nos hemos tomado la libertad de predefinir una interfaz de usuario para ahorrarle tiempo.
La gran mayoría de los estilos del Bot se rigen por un solo archivo, /app/customization/styleVariables.js , aquí puedes cambiar prácticamente todos los colores utilizados para todos los elementos, así como el fondo de la UI.
Si desea realizar más cambios en la interfaz de usuario, puede profundizar directamente en los archivos de las hojas de estilo . Hay un archivo global en /app/global-styles.js y algunos componentes o contenedores tienen sus propios archivos styledComponents.js en sus respectivas carpetas para componentes modulares particulares. Estos archivos utilizan Styled-Components , una biblioteca bastante impresionante para React/ES6 (que se considera oficialmente como una ayuda para las mejores prácticas). Estos archivos utilizan literales de plantilla etiquetados de Javascript para interpolar variables JS con CSS, pero no se asuste , estos pueden tratarse prácticamente como CSS/SCSS normal.
NOTA: Nuestra intención es migrar gradualmente a componentes de estilo modular 100% independientes, como los que se encuentran en /app/components/UserInput/styledComponents.js y deshacernos de prácticamente todo el código en /app/global-styles.js
Si sus deseos de personalización no se satisfacen simplemente jugando con el CSS de los componentes, puede personalizar prácticamente todo lo demás a su voluntad, pero más allá de este punto tendrá que lidiar con el lado React (+Redux) de la aplicación ( vea abajo ).
Todo el lado React de Alpha ha sido refactorizado tomando este increíble repositorio como base. Aprovechar las mejores prácticas mejor establecidas para React, a saber, el uso de:
redux
InmutableJS
Reseleccionar
Redux-Saga
Componentes con estilo
Si deseas jugar con el lado React de Alpha, será mejor que primero eches un vistazo a estos documentos .
Estamos seguros de que le gustaría enviar correos electrónicos automatizados al propietario del Bot y a los usuarios finales con un resumen de su conversación o algo así, y estamos trabajando para ofrecer la solución más flexible e independiente del back-end. Permitirá prácticamente simplemente "Plug & Play".
En este momento, su mejor opción es conectar esto a algún servidor Node o Express (o Rails 5.1.x) y aprovechar sus propias soluciones de correo. Puede echar un vistazo al archivo /app/BotMind/BotMailer.js que utilizamos para nuestra implementación basada en Rails, pero a partir de ahora hemos eliminado toda la lógica de envío de correo electrónico de /app/containers/BotContainer/sagas.js , por lo que tendrías que escribir tus propias sagas.
Este bot se basa únicamente en React + Webpack, lo que significa que debería poder conectarlo con cualquier marco, back-end, etc., siempre que funcione con Webpack.
Por el momento, el Bot puede conectarse sin problemas con cualquier API, pero tendrás que escribir tus propios creadores de acciones y sagas para obtener el comportamiento deseado.
Agregaremos documentación aquí a medida que adaptemos este bot para diferentes implementaciones.
Al igual que lo anterior, pretendemos permitir que este bot se conecte a otros motores de inteligencia artificial como Api.ai y Watson de IBM para mejorar las interacciones. Esta es una de nuestras principales tareas pendientes.
