alpha
1.0.0
Alpha est un bot, ou plutôt une base pour créer votre propre chatbot basé sur le Web. Nous avons lancé ce projet parce que nous pensons que les chatbots peuvent être très utiles et assez amusants. Cependant, dans l'état actuel des choses, la plupart des chatbots sont limités aux plateformes de messagerie existantes telles que Facebook, ce qui est tout à fait correct, mais que se passe-t-il si vous souhaitez que votre bot vive ailleurs sur Facebook ? le net ?
Vous pouvez créer votre propre bot et définir vos propres styles et règles visuels , ainsi qu'un contrôle illimité sur la personnalisation et la logique . Diverses solutions existent déjà, mais elles peuvent être contraignantes, coûteuses et difficiles à mettre en œuvre.
C'est là qu'Alpha s'avère utile. Cette bibliothèque est conçue pour vous permettre de créer votre propre bot de manière très simple. Il vous suffit de :
Télécharger
Insérez votre propre arbre de questions et réponses
Insérez vos propres couleurs et images
Alpha s'occupe de l'ensemble du rendu de l'interface utilisateur et de la gestion de l' état de l'application . Vous n'avez pas vraiment besoin de connaître React (ou Javascript d'ailleurs). Cependant, si vous connaissez React et Redux, vous pouvez personnaliser davantage le rendu de l'application bot et même la connecter à n'importe quel moteur back-end ou IA de votre choix.
Installation
Personnaliser le dialogue
Faire des recommandations
Personnalisation de l'interface utilisateur
Personnalisation de l'application React
Envoi d'e-mails (à déterminer)
Connexion à n'importe quel back-end (à déterminer)
Connexion aux moteurs d'IA (à déterminer)
Alpha est conçu pour fonctionner sur Docker . Cependant, vous pouvez l'exécuter localement tant que vous avez NodeJS ainsi que npm ou Yarn (de préférence !) dans votre système.
Pour installer et exécuter sur votre ordinateur, exécutez simplement les commandes suivantes dans votre terminal. Vous devrez avoir Docker installé (voir ci-dessous pour les instructions sans Docker) :
Clonez ce dépôt : git clone https://github.com/IcaliaLabs/alpha.git
Accédez au répertoire : cd alpha
Installer les dépendances : docker-compose run --rm alpha yarn install
Ensuite, vous pouvez soulever le serveur : docker-compose up alpha
C'est ça! vous devriez voir le robot de démonstration opérationnel dans votre navigateur si vous ouvrez localhost:3000 * dans votre navigateur.
Quelques points importants lors de l'exécution en mode développement :
L'application bot aura le rechargement à chaud activé, afin que vous puissiez profiter des avantages de Webpack + React.
Les Redux DevTools sont activés par défaut afin que vous puissiez inspecter les actions/changements d'état de l'application en temps réel.
Le temps entre chaque message du bot est défini sur 0 . Ceci vise à minimiser la frustration des développeurs lorsqu'ils parcourent le flux de conversation encore et encore, mais vous pouvez modifier ce comportement si vous le souhaitez sur app/containers/BotContainer/sagas.js .
Heroku : Exécutez simplement git push heroku master . Ce bot est prêt pour Heroku !
Local avec Docker : si vous pouvez compiler l'image pour voir comment elle se comportera en production, nous assemblons également une version. Exécutez simplement :
docker-compose up release
Il construira l'image et lèvera le serveur de production.
Si vous souhaitez installer et exécuter sans Docker vous devrez installer toutes les dépendances directement dans votre répertoire :
Pour le développement :
Clonez ce dépôt : git clone https://github.com/IcaliaLabs/alpha.git
Accédez au répertoire : cd alpha
Exécutez npm install ou yarn install pour installer les dépendances
Exécutez npm start pour démarrer le serveur
Visitez localhost:3000 dans votre navigateur
Pour la fabrication :
Ce dépôt est prêt pour Heroku, faites simplement git push heroku master
Si, pour une raison quelconque, vous modifiez les scripts de votre package.json , veillez à prendre en compte ces étapes avant de procéder au déploiement sur un serveur de production.
Pour AWS, vous pouvez suivre les mêmes étapes répertoriées ici
Pour Azure/Softlayer/autres serveurs, vous devrez vous connecter au serveur, extraire le dépôt, installer les dépendances à l'aide yarn , puis exécuter npm run build afin de créer le dossier ./build . Enfin, vous pouvez démarrer le serveur en utilisant start:prod . Alternativement, exécutez simplement start:production et il exécutera ces étapes ensemble dans l'ordre, ainsi que des tests.
Toute la logique derrière ce que dit le bot, y compris la logique de questions-réponses, se trouve à l'intérieur du BotMind qui se trouve dans app/BotMind/ . Nous appelons chaque bot individuel ou entrée utilisateur Bulles, car ils sont affichés comme tels dans l'interface utilisateur du chat.
Afin de personnaliser le dialogue, il vous suffit de comprendre et de modifier app/BotMind/_initialBubble.js et app/BotMind/BotMindFlows/index.js .
Le fichier principal de BotMind est BotMind.js , mais ce fichier agit uniquement en tant que collecteur et exportateur des fonctions résidant dans _initialBubble.js , _nextBubble.js et _recommendationBubbles.js . Ces trois fichiers exécutent à leur tour leur logique basée sur les arborescences de questions et réponses qui se trouvent dans app/BotMind/BotMindFlows/ .
Ici, vous pouvez définir à quel point de l'arborescence de conversation votre bot démarre lorsqu'il est initialisé ou lorsque l'utilisateur choisit de redémarrer la conversation.
Ce fichier contient la logique de la bulle ou du dialogue vers lequel le bot doit accéder en fonction du dernier message du bot ou de l'utilisateur. Vous n'avez pas vraiment besoin de modifier ce fichier, sauf si vous souhaitez approfondir une personnalisation beaucoup plus fine. Procédez à vos propres risques.
Ce fichier exécute la logique de choix d'un chemin lorsque shouldEstimateRecommendation: true est passé dans une bulle de dialogue. Ce fichier agit en fonction des points accumulés par le système de sacs au cours de la conversation. Vous n'avez pas vraiment besoin de modifier ce fichier, sauf si vous souhaitez approfondir une personnalisation beaucoup plus fine. Procédez à vos propres risques.
Les BotMindFlows vivent sur app/BotMind/BotMindFlows/ . Par défaut, vous ne trouverez ici qu'un fichier index.js , mais si votre arbre de conversation commence à devenir trop volumineux, vous pouvez créer vos propres fichiers et utiliser index.js pour les combiner en utilisant l'opérateur spread comme celui-ci.
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; Chaque fois que BotMind analyse où aller (à l'intérieur _nextBubble.js ), il s'attend à trouver un hachage de questions dans app/BotMind/BotMindFlows/index.js . Les questions sont constituées de... vous l'aurez deviné, des hachages de questions-réponses individuelles. Ici, vous pouvez commencer à définir la logique et le déroulement de la conversation. Par exemple, dans notre démo, vous trouverez ce qui suit :
const questions = {start:{botPrompt : "Bonjour, humain, je m'appelle Alpha, je suis un chatbot génial", réponses : [{nextId: "myPurpose"}] },myPurpose :{botPrompt : "Mon objectif est d'être un simple chatbot qui guide les utilisateurs et est capable de prendre des décisions et de faire des recommandations.", répond : [{nextId : "yourName"}]},yourName :{botPrompt : "Alors, quel est votre nom ?",input : textField(),answers : [ {answer : common_greetings,nextId : "greetings_notAName", }, {answer : common_greetings_negative,catchName : true,nextId : "asYouCanSee", },],},
...}exporter les questions par défaut ;Chaque hachage de question doit avoir son propre identifiant unique . Nous vous recommandons de rendre ces identifiants aussi explicites que possible , même si cela implique d'écrire un peu plus, car à mesure que la bibliothèque de conversations de votre bot s'agrandit, se souvenir de quel identifiant fait quoi peut devenir pénible dans le A. Chaque hachage de question prend les options suivantes :
botPrompt ([String] requis) : le message du bot
réponses ([Array] requis) : les différentes réponses que le bot peut avoir en fonction des réponses de l'utilisateur. Le tableau est composé de hachages, chacun représentant un résultat possible du flux de conversation. Les hachages à l'intérieur de [ réponses ] prennent les options suivantes :
nextId ([String] obligatoire) : détermine l'ID de dialogue vers lequel le bot accédera si cette réponse est satisfaite. Sur le dernier message de votre bot ou avant de passer à l'estimation d'une recommandation ( voir ci-dessous ) , vous devez alors passer null .
réponse ([String | RegEx]) : La réponse de l'utilisateur qui déclenchera ce hachage. Si vous utilisez selectField ou tagsField pour prédéfinir des réponses pour l'utilisateur, vous n'aurez aucun problème à utiliser des chaînes, sinon vous souhaiterez peut-être utiliser RegEx (voir exemples).
sumToBags ([Array]) : ici, vous pouvez commencer à ajouter des points au BagsSystem afin d'effectuer des contrôles de flux plus avancés et/ou d'émettre des recommandations si tel est le but de votre bot. sumToBags ressemblera généralement à ceci : sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : signalera à React de stocker le nom de l'utilisateur à partir du message de l'utilisateur dans l'état de l'application.
catchCompanyName ([Boolean]) : Identique à ci-dessus mais pour un nom de société.
catchMail ([Boolean]) : Idem que ci-dessus mais pour les adresses email.
catchPhone ([Boolean]) : Identique à ci-dessus mais pour les numéros de téléphone.
ShouldEstimateRecommendation ([Boolean]) : Signalera au BotMind d'interrompre le flux régulier et d'analyser les sacs de recommandation afin de faire avancer la conversation (voir exemples).
finishConversation ([Boolean]) : Signalera au bot de terminer la conversation lors du prochain dialogue. Lorsque cela se produit, la saisie de l'utilisateur sera désactivée et le bot se "déconnectera" jusqu'à ce que l'utilisateur sélectionne "Redémarrer".
REMARQUE – si votre botPrompt pour cette partie de dialogue n’attend pas de ramification, vous pouvez simplement transmettre nextId comme ceci :
answers: [
{
nextId: "hello"
}
] input ([Object]) : Ceci détermine quel type d'entrée est disponible pour l'utilisateur lors de ce botPrompt (champ de texte, balises, sélection, désactivé, etc.). Par défaut, les entrées sont des champs de texte désactivés. Nous vous recommandons d'utiliser les assistants StateFormatter inclus au début du fichier index.js .
type ([String]) : quel type de message le bot transmet-il ("texte", "média", "lien" ou "transformedText").
varName ([String]) : Si vous choisissez "transformedText" comme type d'entrée, vous pouvez écrire @varName dans le botPrompt , qui fera référence à cette option. Lorsque le bot rend le message, il recherchera la variable stockée dans l' état React ( voir ci-dessous ) et remplacera @varName par la valeur de cette variable.
Comme mentionné ci-dessus, vous pouvez choisir de stocker certaines valeurs dans l'état React, puis de calculer ultérieurement une réaction/un flux/une recommandation basée sur ces valeurs. Nous appelons cela le système de sacs.
Le concept du système de sacs est que nous prédéfinissons des « sacs » que nous pouvons remplir de « points » au fur et à mesure de la conversation. Enfin, lorsque vous décidez d'appeler shouldEstimateRecommendation: true sur l'un de vos hachages question-réponse, _recommendationBubbles.js sera appelé à l'action pour décider quoi afficher ensuite en fonction du nombre de points accumulés par chaque sac.
La première étape consiste à définir les sacs que vous utiliserez dans /app/BotMind/recommendationBags.js . Si vous ne définissez pas ces sacs, le bot fonctionnera, mais ne saura pas quoi faire lorsque vous appellerez addToBags ou shouldEstimateRecommendation . Les sacs ressemblent à ceci :
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; Ensuite, vous pouvez définir quand ajouter en utilisant addToBags dans vos flux de questions-réponses, par exemple :
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}]
},
...
]
} Et lorsque vous êtes prêt, appelez simplement shouldEstimateRecommendation comme ceci :
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}]
},
...
]
}, Dans cet exemple, _recommendationBubbles.js sera appelé, et donc la prochaine bulle de bot sera probablement celle de redWine_start .
Nous avons pris la liberté de prédéfinir une UI pour vous faire gagner du temps.
La grande majorité des styles du Bot sont régis par un seul fichier, /app/customization/styleVariables.js , ici vous pouvez modifier à peu près toutes les couleurs utilisées pour tous les éléments, ainsi que l'arrière-plan de l'interface utilisateur.
Si vous souhaitez apporter d'autres modifications à l'interface utilisateur, vous pouvez accéder directement aux fichiers de feuille de style . Il existe un fichier global dans /app/global-styles.js et certains composants ou conteneurs ont leurs propres fichiers styledComponents.js dans leurs dossiers respectifs pour des composants modulaires particuliers. Ces fichiers utilisent Styled-Components , une bibliothèque assez géniale pour React/ES6 (qui est officiellement considérée comme une aide aux meilleures pratiques). Ces fichiers utilisent les littéraux de modèle balisés de Javascript pour interpoler les variables JS avec CSS, mais ne paniquez pas , ceux-ci peuvent être traités à peu près comme du CSS/SCSS classique.
REMARQUE - Notre intention est de migrer progressivement vers des composants 100 % indépendants et de style modulaire tels que ceux trouvés dans /app/components/UserInput/styledComponents.js et de nous débarrasser de la quasi-totalité du code dans /app/global-styles.js
Si vos souhaits de personnalisation ne sont pas satisfaits simplement en jouant avec le CSS des composants, vous pouvez personnaliser à peu près tout le reste à votre guise, mais au-delà de ce point, vous devrez gérer le côté React (+ Redux) de l'application ( voir ci-dessous ).
Tout le côté React d'Alpha a été refactorisé en prenant ce superbe dépôt comme base. Tirer parti des meilleures pratiques les plus établies pour React, à savoir l'utilisation de :
Redux
ImmuableJS
Sélectionner de nouveau
Redux-Saga
Composants stylisés
Si vous souhaitez jouer avec le côté React d'Alpha, vous feriez mieux de jeter d'abord un œil à ces documents .
Nous sommes sûrs que vous aimeriez envoyer des e-mails automatisés au propriétaire du Bot et aux utilisateurs finaux avec un récapitulatif de leur conversation ou autre, et nous travaillons sur un moyen d'offrir la solution la plus flexible et la plus indépendante du back-end. Cela permettra de pratiquement simplement "Plug & Play".
À l'heure actuelle, votre meilleur pari est de le connecter à un serveur Node ou Express (ou Rails 5.1.x) et d'exploiter leurs propres solutions de messagerie. Vous pouvez jeter un œil au fichier /app/BotMind/BotMailer.js que nous utilisons pour notre implémentation basée sur Rails, mais pour l'instant nous avons supprimé toute la logique d'envoi d'e-mail du /app/containers/BotContainer/sagas.js , vous devrez donc écrire vos propres sagas.
Ce bot est basé uniquement sur React + Webpack, ce qui signifie que vous devriez pouvoir le connecter à n'importe quel framework, back-end, etc., tant qu'il fonctionne avec Webpack.
Pour le moment, le Bot peut se connecter de manière transparente à n'importe quelle API, mais vous devrez écrire vos propres créateurs d'action et sagas pour obtenir le comportement souhaité.
Nous ajouterons de la documentation ici au fur et à mesure que nous adapterons ce bot à différentes implémentations.
Comme ci-dessus, nous avons l'intention de permettre à ce bot de se connecter à d'autres moteurs d'intelligence artificielle tels que Api.ai et Watson d'IBM afin d'améliorer les interactions. C'est l'une de nos principales choses à faire.
