alfa
1.0.0
Alpha é um bot, ou melhor, uma base para criar seu próprio chatbot baseado na web. Iniciamos este projeto porque achamos que os chatbots podem ser muito úteis e bastante divertidos, no entanto, a situação atual limita a maioria dos chatbots às plataformas de mensagens existentes, como o Facebook, o que é bastante aceitável, mas e se você quiser que seu bot viva em outro lugar? a web ?
Você pode criar seu próprio bot e definir seus próprios estilos e regras visuais , bem como ter controle ilimitado para personalização e lógica . Já existem várias soluções, mas podem ser limitantes, dispendiosas e difíceis de implementar.
É aqui que Alpha se torna útil. Esta biblioteca foi projetada para permitir que você crie seu próprio bot de uma forma muito simples. Você só precisa:
Download
Insira sua própria árvore de perguntas e respostas
Insira suas próprias cores e imagens
Alpha cuida de toda a renderização da UI e do tratamento do estado do aplicativo . Você realmente não precisa conhecer nenhum React (ou Javascript). No entanto, se você conhece React e Redux, pode personalizar ainda mais a renderização do aplicativo bot e até mesmo conectá-lo a qualquer back-end ou mecanismo de IA de sua escolha.
Instalação
Personalizando o Diálogo
Fazendo recomendações
Personalizando a IU
Personalizando o aplicativo React
Envio de e-mails (a definir)
Conectando-se a qualquer back-end (TBD)
Conectando-se a motores de IA (TBD)
Alpha foi desenvolvido para rodar no Docker . No entanto, você pode executá-lo localmente, desde que tenha NodeJS, bem como npm ou yarn (de preferência!) Em seu sistema.
Para instalar e rodar em seu computador basta executar os seguintes comandos em seu terminal. Você precisará ter o Docker instalado (veja abaixo as instruções sem o docker):
Clone este repositório: git clone https://github.com/IcaliaLabs/alpha.git
Navegue até o diretório: cd alpha
Instale dependências: docker-compose run --rm alpha yarn install
Então você pode levantar o servidor: docker-compose up alpha
É isso! você deverá ver o bot de demonstração instalado e funcionando em seu navegador se abrir localhost:3000 * em seu navegador.
Alguns pontos importantes ao executar no modo de desenvolvimento:
O aplicativo bot terá o Hot Reloading ativado, para que você possa experimentar os benefícios do Webpack + React.
Redux DevTools são habilitados por padrão para que você possa inspecionar as ações/alterações de estado do aplicativo em tempo real.
O tempo entre cada mensagem do bot é definido como 0 . Isso é para minimizar a frustração dos desenvolvedores quando eles repassam o fluxo da conversa repetidamente. No entanto, você pode alterar esse comportamento se desejar em app/containers/BotContainer/sagas.js .
Heroku: Basta executar git push heroku master . Este bot está pronto para Heroku!
Local com Docker: Se você puder compilar a imagem para ver como ela se comportará na produção, montamos um build também. Basta executar:
docker-compose up release
Ele construirá a imagem e levantará o servidor de produção.
Se desejar instalar e executar sem Docker você terá que instalar todas as dependências diretamente em seu diretório:
Para Desenvolvimento:
Clone este repositório: git clone https://github.com/IcaliaLabs/alpha.git
Navegue até o diretório: cd alpha
Execute npm install ou yarn install para instalar as dependências
Execute npm start para iniciar o servidor
Visite localhost:3000 no seu navegador
Para produção:
Este repositório está pronto para Heroku, basta fazer git push heroku master
Se por algum motivo você alterar os scripts do package.json , considere estas etapas antes de implantar em um servidor de produção.
Para AWS, você pode seguir as mesmas etapas listadas aqui
Para Azure/Softlayer/outros servidores, você terá que fazer ssh para o servidor, puxar o repositório, instalar as dependências usando yarn e então fazer npm run build para criar a pasta ./build . Finalmente você pode iniciar o servidor usando start:prod . Como alternativa, basta executar start:production e essas etapas serão executadas juntas em sequência, além de testes.
Toda a lógica por trás do que o bot diz, incluindo a lógica de perguntas e respostas, fica dentro do BotMind, que fica em app/BotMind/ . Chamamos cada bot individual ou entrada do usuário de Bubbles porque eles são renderizados como tal na interface do chat.
Para personalizar o diálogo, você só precisa entender e editar app/BotMind/_initialBubble.js e app/BotMind/BotMindFlows/index.js .
O arquivo principal do BotMind é BotMind.js , mas esse arquivo atua apenas como coletor e exportador das funções que residem em _initialBubble.js , _nextBubble.js e _recommendationBubbles.js . Esses três arquivos, por sua vez, executam sua lógica com base nas árvores de perguntas e respostas que ficam dentro de app/BotMind/BotMindFlows/ .
Aqui você pode definir em que ponto da árvore de conversa o seu bot inicia quando é inicializado ou quando o usuário seleciona reiniciar a conversa.
Este arquivo contém a lógica de para qual bolha ou diálogo o bot deve pular com base na última mensagem do bot ou do usuário. Você realmente não precisa alterar este arquivo, a menos que queira se aprofundar em uma personalização muito mais detalhada. Prossiga por sua própria conta e risco.
Este arquivo executa a lógica de escolha de um caminho quando shouldEstimateRecommendation: true é passado em um balão de diálogo. Este arquivo atua com base nos pontos acumulados pelo Sistema de Bolsas durante a conversa. Você realmente não precisa alterar este arquivo, a menos que queira se aprofundar em uma personalização muito mais detalhada. Prossiga por sua própria conta e risco.
Os BotMindFlows estão disponíveis em app/BotMind/BotMindFlows/ . Por padrão, aqui você encontrará apenas um arquivo index.js , mas se sua árvore de conversação começar a ficar muito grande, você poderá criar seus próprios arquivos e usar index.js para combiná-los usando o operador spread 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 o BotMind analisa para onde ir (dentro de _nextBubble.js ), ele espera encontrar um hash de perguntas dentro de app/BotMind/BotMindFlows/index.js . As perguntas são compostas de... você adivinhou, hashes individuais de perguntas e respostas. Aqui você pode começar a definir a lógica e o fluxo da conversa. Por exemplo, em nossa demonstração você encontrará o seguinte:
const questions = {start:{botPrompt: "Olá humano, meu nome é Alpha, sou um chatbot incrível",respostas: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "Meu objetivo é ser um chatbot simples que orienta os usuários e é capaz de tomar decisões e fazer recomendações.",responde: [{nextId: "seuNome"}]},seuNome:{botPrompt: "Então, qual é o seu nome?",input: textField(),respostas: [ {resposta: common_greetings,nextId: "greetings_notAName", }, {resposta : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}exportar perguntas padrão;Cada hash de pergunta deve ter seu próprio ID exclusivo . Recomendamos que você torne esses IDs o mais autoexplicativos possível , mesmo que isso signifique escrever um pouco mais, porque à medida que a biblioteca de conversas do seu bot cresce, lembrar qual ID faz o que pode se tornar um problema no A. Cada hash de pergunta ocupa as seguintes opções:
botPrompt ([String] obrigatório): A mensagem do bot
respostas ([Array] obrigatório): As diferentes respostas que o bot pode ter com base nas respostas do usuário. A matriz é composta de hashes, cada um representando um possível resultado do fluxo de conversação. Os hashes dentro de [ respostas ] têm as seguintes opções:
nextId ([String] obrigatório) : determina para qual ID de diálogo o bot navegará se esta resposta for atendida. Na última mensagem do seu bot ou antes de você pular para estimar uma recomendação ( veja abaixo ) , você deve passar null .
resposta ([String | RegEx]) : A resposta do usuário que acionará esse hash. Se você estiver usando selectField ou tagsField para pré-definir respostas para o usuário, você poderá usar strings, caso contrário, você pode querer usar RegEx (veja exemplos).
sumToBags ([Array]) : aqui você pode começar a adicionar pontos ao BagsSystem para fazer controles de fluxo mais avançados e/ou emitir recomendações se esse for o propósito do seu bot. sumToBags geralmente terá esta aparência: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : sinalizará ao React para armazenar o nome do usuário da mensagem do usuário no estado do aplicativo.
catchCompanyName ([Boolean]) : O mesmo que acima, mas para o nome de uma empresa.
catchMail ([Boolean]) : O mesmo que acima, mas para endereços de e-mail.
catchPhone ([Boolean]) : O mesmo que acima, mas para números de telefone.
shouldEstimateRecommendation ([Boolean]) : sinalizará ao BotMind para quebrar o fluxo regular e analisar os sacos de recomendação para avançar a conversa (ver exemplos).
finishConversation ([Boolean]) : sinalizará ao bot para encerrar a conversa no próximo diálogo. Quando isso acontecer, a entrada do usuário será desativada e o bot "ficará off-line" até que o usuário selecione "Reiniciar".
NOTA – se o seu botPrompt para esta parte do diálogo não espera ramificação, você pode simplesmente passar nextId assim:
answers: [
{
nextId: "hello"
}
] input ([Object]) : Determina que tipo de entrada está disponível para o usuário durante este botPrompt (campo de texto, tags, seleção, desabilitado, etc.). Por padrão, as entradas são campos de texto desabilitados. Recomendamos que você use os auxiliares StateFormatter incluídos no início do arquivo index.js .
type ([String]) : Que tipo de mensagem o bot está transmitindo ("texto", "mídia", "link" ou "transformedText").
varName ([String]) : Se você escolher "transformedText" como tipo de entrada, poderá escrever @varName no botPrompt , que se referirá a esta opção. Quando o bot renderizar a mensagem, ele procurará a variável armazenada no estado React ( veja abaixo ) e substituirá @varName pelo valor dessa variável.
Conforme mencionado acima, você pode optar por armazenar alguns valores no estado React e, posteriormente, calcular uma reação/fluxo/recomendação com base nesses valores. Chamamos isso de Sistema de Bolsas.
O conceito do sistema de malas é pré-definirmos algumas “ bolsas ” que podemos preencher com “ pontos ” à medida que a conversa avança. Finalmente, quando você decidir chamar shouldEstimateRecommendation: true em um de seus hashes de pergunta-resposta, _recommendationBubbles.js será acionado para decidir o que mostrar a seguir com base em quantos pontos cada sacola acumulou.
A primeira etapa é definir as malas que você usará em /app/BotMind/recommendationBags.js . Se você não definir essas malas, o bot funcionará, mas não saberá o que fazer quando você chamar addToBags ou shouldEstimateRecommendation . As sacolas ficam assim:
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; Depois você pode definir quando adicionar usando addToBags em seus fluxos de perguntas e respostas, por exemplo:
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}]
},
...
]
} E quando estiver pronto, basta ligar para shouldEstimateRecommendation assim:
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}]
},
...
]
}, Neste exemplo _recommendationBubbles.js será chamado e, portanto, o próximo bot bubble provavelmente será aquele em redWine_start .
Tomamos a liberdade de predefinir uma IU para economizar seu tempo.
A grande maioria dos estilos do Bot são governados por um único arquivo, /app/customization/styleVariables.js , aqui você pode alterar praticamente todas as cores usadas para todos os elementos, bem como o plano de fundo da UI.
Se desejar fazer mais alterações na interface do usuário, você pode acessar diretamente os arquivos da folha de estilo . Há um arquivo global em /app/global-styles.js e alguns componentes ou contêineres têm seus próprios arquivos styledComponents.js em suas respectivas pastas para componentes modulares específicos. Esses arquivos usam Styled-Components , uma biblioteca incrível para React/ES6 (que é oficialmente considerada uma ajuda de práticas recomendadas). Esses arquivos usam literais de modelo marcados em Javascript para interpolar vars JS com CSS, mas não se desespere , eles podem ser tratados praticamente como CSS/SCSS normais.
NOTA - Nossa intenção é migrar gradualmente para componentes 100% independentes e com estilo modular, como os encontrados em /app/components/UserInput/styledComponents.js e nos livrar de praticamente todo o código em /app/global-styles.js
Se seus desejos de personalização não forem satisfeitos apenas mexendo no CSS dos componentes, você pode personalizar praticamente todo o resto à sua vontade, mas além deste ponto você terá que lidar com o lado React (+Redux) do aplicativo ( Veja abaixo ).
Todo o lado React do Alpha foi refatorado tomando este repositório incrível como base. Aproveitando as melhores práticas mais bem estabelecidas para React, nomeadamente o uso de:
Redux
ImutávelJS
Selecionar novamente
Saga Redux
Componentes estilizados
Se você deseja mexer no lado React do Alpha, é melhor dar uma olhada nestes documentos primeiro.
Temos certeza de que você gostaria de enviar e-mails automatizados ao proprietário do bot e aos usuários finais com uma recapitulação de suas conversas ou algo assim, e estamos trabalhando em uma maneira de oferecer a solução mais flexível e agnóstica de back-end que ' permitirá praticamente apenas "Plug & Play".
No momento, sua melhor aposta é conectá-lo a algum servidor Node ou Express (ou Rails 5.1.x) e aproveitar suas próprias soluções de mailer. Você pode dar uma olhada no arquivo /app/BotMind/BotMailer.js que usamos para nossa implementação baseada em Rails, mas a partir de agora removemos toda a lógica send-Email do /app/containers/BotContainer/sagas.js , então você teria que escrever suas próprias sagas.
Este bot é baseado apenas em React + Webpack, o que significa que você deve ser capaz de conectá-lo a qualquer framework, back-end, etc., desde que funcione com Webpack.
No momento, o Bot pode se conectar perfeitamente a qualquer API, mas você terá que anotar seus próprios criadores de ações e sagas para obter o comportamento desejado.
Adicionaremos documentação aqui ao longo do caminho à medida que adaptamos este bot para diferentes implementações.
Assim como acima, pretendemos permitir que este bot se conecte a outros motores de inteligência artificial, como Api.ai e Watson da IBM, a fim de aprimorar as interações. Esta é uma das nossas principais tarefas.
