# Editor de código

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

{% hint style="info" %}
Por favor, note que o termo *estado do diálogo* refere-se à mesma coisa que *bloco*, no contexto de ferramentas de desenvolvimento.
{% endhint %}

### Primeiros passos

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F2nvjWAREqLFIYg9trnFs%2Fimage.png?alt=media&#x26;token=778d0bbe-c655-43d2-aab1-6146c6419b0e" alt=""><figcaption></figcaption></figure>

#### Argumentos no Editor de Código

Você pode passar argumentos para suas Ações de Código atribuindo-lhes chaves. Suas chaves estarão disponíveis para a `args` variável dentro do Editor de Código.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F0LblDczzVr3AKRgNVq1o%2Fimage.png?alt=media&#x26;token=9f88c8f4-749b-4f0e-a7b9-926cad7f83b2" alt=""><figcaption></figcaption></figure>

### Função ChatlayerResponseBuilder

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

Para começar a manipular dados da conversa em sua ação de código, simplesmente chame a função `ChatlayerResponseBuilder()` que retornará uma `ChatlayerResponseBuilder` instância.&#x20;

O `ChatlayerResponseBuilder` possui uma interface fluente, isso significa que toda função que você chamar retornará a mesma instância. Isso facilita encadear múltiplas chamadas de função quando, por exemplo, você deseja mostrar uma mensagem e manipular dados de sessão ao mesmo tempo.&#x20;

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

{% hint style="warning" %}
Se você não chamar a `send()` função em nenhum lugar na 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.
{% endhint %}

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

Outra forma de alcançar o mesmo resultado:

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

#### Definir variáveis ou enviar mensagens

O `ChatlayerResponseBuilder` possui 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.&#x20;

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

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

Para aprimorar ainda mais suas variáveis, você pode armazenar múltiplas variáveis sobre o usuário em um objeto.&#x20;

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

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

### Próximos ou blocos anteriores

Com base em código, variáveis ou outra entrada, você pode direcionar a conversa para outros dialogstates. Com o código abaixo você pode ir para um próximo dialogstate.&#x20;

#### setNextDialogState(dialogstateId: string)

Encaminha a conversa para o ID do dialogstate fornecido.&#x20;

```javascript
const { introductionDialogstate } = args;

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

### Funcionalidades de Mensagem 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 aprofundadas, essas mesmas opções podem ser criadas usando código.&#x20;

#### addCarousel

No Editor de Código também é possível adicionar um carrossel, assim como em Mensagens. Isso pode agregar valor quando conteúdo dinâmico precisa ser exibido ou para combinar um bloco de Mensagem e Ação em um só.

```javascript
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',
        // Isto é opcional
        subTitle: 'Legenda do Item 2',
        // Isto também é opcional, redirecionará o usuário para um certo site quando clicarem 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 o exemplo acima, Respostas Rápidas também podem ser criadas no editor de código. Ao copiar o código abaixo você pode adicionar quantos botões de Resposta Rápida forem necessários.

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

ChatlayerResponseBuilder()
    .addQuickReplies({
        title: 'Como podemos ajudá-lo?', // 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 na mensagem do bot.

![Esses botões são criados com o código abaixo](https://181262846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-MPsWBdT5sOTYrrBzq2h%2F-MPs_S7fWejbqjNYfOSh%2Fimage.png?alt=media\&token=0ffff088-3634-40eb-bc99-984c84e93396)

```javascript
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: "Estes botões 'postback' podem ser usados para navegar para um determinado diálogo do bot e definir uma variável quando um usuário clicar 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, os '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.&#x20;

### Adicionar HTML ou Iframe

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

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

Iframes podem ser usados para incorporar outras páginas no chatbot. Um exemplo perfeito de por que você precisaria de um iframe é incorporar vídeos do Youtube.

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

### Adicionar mídia

O `addMediaMessage` o método suporta o envio de imagens, arquivos de áudio e vídeo através de ações de código.

```javascript
// 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

A funcionalidade a seguir existe dentro do escopo da Ação de Código:

#### lodash (\_)

Lodash é uma biblioteca utilitária JavaScript. Você pode encontrar mais informações [aqui](https://lodash.com/docs/4.17.15).&#x20;

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

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

#### fetch

Fetch permite que você realize chamadas de API. Por favor, consulte sua [documentação ](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)para saber mais.

```javascript
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. Por favor, acesse seu [documentação](https://cryptojs.gitbook.io/docs) para saber mais.

### Criando um pequeno atraso entre diálogos do bot

Recomendamos usar o bloco de delay para criar um atraso entre diálogos do bot. Você pode aprender mais sobre como isso funciona aqui: [#delay](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/action-bot-dialog#delay "mention")

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

```javascript
const builder = ChatlayerResponseBuilder();

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

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F4shvVdwehTWm7cgfPCzi%2Fimage.png?alt=media&#x26;token=6c73f979-a1d0-42ab-b691-f4a7fb711deb" alt=""><figcaption></figcaption></figure>

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