Editor de código

Aprenda como conduzir a conversa escrevendo código JavaScript com a Ação de Código.

A ação de código permite que os desenvolvedores criem rapidamente lógica personalizada sobre o bot, escrevendo seus próprios blocos de código JavaScript. Normalmente, o editor de código é usado para realizar solicitações a sistemas externos ou para fazer operações com variáveis.

Observe que o termo estado do diálogo se refere à mesma coisa que bloco, no contexto de ferramentas de desenvolvimento.

Como começar

Para começar a usar a Ação de Código, crie um novo 'Action Dialogstate' e selecione o Código plugin como uma ação.

Argumentos no Editor de Código

Você pode passar argumentos para suas ações de código atribuindo chaves a eles. Suas chaves ficarão disponíveis para a args variável dentro do Editor de Código.

Função ChatlayerResponseBuilder

A ChatlayerResponseBuilder a função retorna uma instância auxiliar que permite conduzir sua conversa enviando mensagens como o bot, navegando para blocos ou até criando dados de sessão.

Para começar a manipular os dados da conversa na sua ação de código, basta chamar a função ChatlayerResponseBuilder() que retornará uma instância ChatlayerResponseBuilder .

A ChatlayerResponseBuilder tem uma interface fluente, isso significa que toda função que você chamar retornará a mesma instância. Isso facilita encadear várias chamadas de função quando, por exemplo, você quer exibir uma mensagem e manipular dados de sessão ao mesmo tempo.

Sempre que quiser publicar suas alterações na conversa, você deve chamar a send() função.

Se você não chamar a send() função em nenhum lugar da sua Ação de Código, os usuários não verão nenhum dos seus resultados após a execução do código.

ChatlayerResponseBuilder()
    .addSessionVariable("user", { address: { ... } })
    .addMessage("Obrigado por compartilhar seu endereço!")
    .send();

Outra forma de alcançar o mesmo resultado:

const builder = ChatlayerResponseBuilder();
builder.addSessionVariable("user", { address: { ... } });
builder.addMessage("Obrigado por compartilhar seu endereço!");
builder.send();

Definir variáveis ou enviar mensagens

A ChatlayerResponseBuilder tem a capacidade de definir variáveis ou adicionar mensagens ao chatbot. Ambos são mostrados no exemplo abaixo:

addSessionVariable(namespace: string, data: any): Insere uma variável em um determinado namespace dentro da sessão.

addMessage(message: string): Adiciona uma mensagem de texto a ser enviada pelo bot.

ChatlayerResponseBuilder()
    .addSessionVariable("user", 'Joachim')
    .addMessage("addSessionVariable concluído.")
    .send();

Para enriquecer ainda mais suas variáveis, você pode armazenar várias variáveis sobre o usuário em um objeto.

ChatlayerResponseBuilder()
    .addSessionVariable("user", { firstName: "Joachim", lastName: "Chatbot" })
    .send();

Se você quiser usar essa informação em uma mensagem do bot, basta digitar {user.lastName} e a informação ficará visível no chatbot!

Blocos seguintes ou anteriores

Com base no código, variáveis ou outras entradas, você pode direcionar a conversa para outros dialogstates. Com o código abaixo, você pode ir para o próximo dialogstate.

setNextDialogState(dialogstateId: string)

Encaminhe a conversa para o ID de dialogstate fornecido.

const { introductionDialogstate } = args;

const chatlayer = ChatlayerResponseBuilder();
chatlayer.setNextDialogState(introductionDialogstate);
chatlayer.send();

Funcionalidades de mensagens do bot

No editor de código, algumas funcionalidades de 'mensagem do bot' também estão disponíveis, como respostas rápidas ou botões. Para funcionalidades mais avançadas, essas mesmas opções podem ser criadas usando código.

addCarousel

No Editor de Código também é possível adicionar um carrossel, assim como em Messages. Isso pode agregar valor quando for necessário exibir conteúdo dinâmico ou combinar um bloco de Mensagem e Ação em um só.

ChatlayerResponseBuilder().addCarousel([
    {
        title: 'Item 1',
        imageUrl: 'https://st.depositphotos.com/1708346/1858/i/600/depositphotos_18582903-stock-photo-carousel-at-night.jpg',
        buttons: [
            { type: 'web_url', url: 'https://docs.chatlayer.ai', title: 'Docs' }
        ]
    },
    {
        title: 'Item 2',
        // Isso é opcional
        subTitle: 'Item 2 Subtitle',
        // Isso também é opcional, ele redirecionará um usuário para um determinado site quando ele clicar na imagem do carrossel
        webUrl: 'https://docs.chatlayer.ai',
        imageUrl: 'https://st.depositphotos.com/1708346/1858/i/600/depositphotos_18582903-stock-photo-carousel-at-night.jpg',
        buttons: [
            { type: 'web_url', url: 'https://docs.chatlayer.ai', title: 'Docs' }
        ]
    }
]).send();

addQuickReplies

Assim como no exemplo acima, as Respostas Rápidas também podem ser criadas no editor de código. Copiando o código abaixo, você pode adicionar quantos botões de resposta rápida forem necessários.

const quickReplies = [
[
  {
    title: "Opção 1",
    payload: {
      nextDialogstateId: args.setNextDialogstateDs,
      params: [
        // Isso será definido na sessão.0
        { key: "choice", value: "option1" },
      ],
    },
  },
  {
    title: "Opção 2",
    payload: {
      nextDialogstateId: args.addHtmlDs,
      params: [
        // Isso será definido na sessão.
        { key: "choice", value: "option1" },
      ],
    },
  },
];

ChatlayerResponseBuilder()
    .addQuickReplies({
        title: 'Como podemos ajudar você?', // este é o título das Respostas Rápidas
        quickReplies,
    })
    .send();

addButtonGroup

Com mensagens do bot também podemos adicionar botões, mas com código há mais variedade do que com a mensagem do bot.

Esses botões são criados com o código abaixo

const invoices = [
 "123",
 "456",
 "789"
]

const buttons = invoices.map((invoiceNumber, index) => ({
    type: 'postback',
    title: 'Escolher ' + invoiceNumber,
    payload: {
        nextDialogstateId: args.nextDialogstate,
        params: [
            { key: 'chosenNumber', value: invoiceNumber },
        ],
    },
}));

ChatlayerResponseBuilder()
    .addButtonGroup({
        title: "Esses botões 'postback' podem ser usados para navegar para um determinado diálogo do bot e definir uma variável quando um usuário clica neles.",
        buttons,
    })
    .addButtonGroup({
        title: 'Você também pode adicionar botões de URL.',
        buttons: [
            { type: 'web_url', title: 'docs', url: 'https://docs.chatlayer.ai' },
            { type: 'phone_number', title: 'Ligar 1207', payload: '1207'}
        ]
    })
    .send();

Aqui, as 'invoices' são as diferentes opções de botão exibidas. Com o .addButtonGroup você pode adicionar esses botões ou criar botões de URL.

Adicionar HTML ou Iframe

O HTML pode ser adicionado no chatbot para mostrar uma saída mais diversificada ao usuário.

ChatlayerResponseBuilder()
    .addHtml(`
        <h1>Este é um cabeçalho</h1>
        <p>Infelizmente, mensagens em HTML só funcionarão no widget web.</p>
    `, { withBalloon: true })
    .send();

Os iframes podem ser usados para incorporar outras páginas no chatbot. Um exemplo perfeito de quando você precisaria de um iframe é incorporar vídeos do YouTube.

ChatlayerResponseBuilder()
    .addIframe("https://www.youtube.com/watch?v=yaYzSQn9rL4", {
        withBalloon: false,
        height: "200px"
    })
    .send();

Adicionar mídia

A addMediaMessage o método suporta o envio de arquivos de imagem, áudio e vídeo por meio de ações de código.

// Enviar uma imagem
ChatlayerResponseBuilder()
    .addMediaMessage({
        type: "image",
        url: "<IMAGE_URL>"
    })
    .send();

// Enviar um arquivo de áudio
ChatlayerResponseBuilder()
    .addMediaMessage({
        type: "audio",
        url: "<AUDIO_URL>"
    })
    .send();

// Enviar um vídeo
ChatlayerResponseBuilder()
    .addMediaMessage({
        type: "video",
        url: "<VIDEO_URL>"
    })
    .send();

Biblioteca utilitária e chamadas de API

As funcionalidades a seguir existem no escopo da Ação de Código:

lodash (_)

Lodash é uma biblioteca utilitária de JavaScript. Você pode encontrar mais informações aqui.

const introductionDialogstate = _.get(args, 'introductionDialogstate');

const chatlayer = ChatlayerResponseBuilder();
chatlayer.setNextDialogState(introductionDialogstate);
chatlayer.send();

fetch

O Fetch permite realizar chamadas de API. Consulte a documentação para saber mais.

const url = 'https://gorest.co.in/public/v1/users';
const response = await fetch(url).then((res) => {
    // res.status >= 200 && res.status < 300
    if (res.ok) {
        return res;
    } else {
        throw new Error(res.statusText);
    }
});

const json = await response.json();

const person = _.get(json, 'results[0]');

const chatlayer = ChatlayerResponseBuilder();
chatlayer.addSessionVariable('profile', userProfile);
chatlayer.send();

CryptoJS

CryptoJS é uma coleção de algoritmos criptográficos padrão e seguros implementados em JavaScript. Acesse a documentação para saber mais.

Criando um pequeno atraso entre diálogos do bot

Recomendamos usar o bloco de atraso para criar uma pausa entre diálogos do bot. Você pode saber mais sobre como isso funciona aqui: Ação

Para criar um atraso entre segundos inteiros, como 1500 milissegundos ou 1,5 segundos, adicione um widget de Código à sua ação em vez do bloco Delay mostrado acima e cole o seguinte código:

const builder = ChatlayerResponseBuilder();

await new Promise((resolve)=>{_.delay(resolve,1500)});
builder.send();

Você pode ajustar a duração do atraso substituindo 1500 por 2500 (2,5 segundos), etc.