> For the complete documentation index, see [llms.txt](https://docs.chatlayer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/integrateandcode/code-action.md).
# Editor 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.
{% hint style="info" %}
Observe que o termo *estado do diálogo* se refere à mesma coisa que *bloco*, no contexto de ferramentas de desenvolvimento.
{% endhint %}
### 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.
{% hint style="warning" %}
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.
{% 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
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.
```javascript
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.
```javascript
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.
```javascript
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ó.
```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',
// 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.
```javascript
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.
```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: "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.
```javascript
ChatlayerResponseBuilder()
.addHtml(`
Este é um cabeçalho
Infelizmente, mensagens em HTML só funcionarão no widget web.
`, { 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.
```javascript
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.
```javascript
// Enviar uma imagem
ChatlayerResponseBuilder()
.addMediaMessage({
type: "image",
url: ""
})
.send();
// Enviar um arquivo de áudio
ChatlayerResponseBuilder()
.addMediaMessage({
type: "audio",
url: ""
})
.send();
// Enviar um vídeo
ChatlayerResponseBuilder()
.addMediaMessage({
type: "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](https://lodash.com/docs/4.17.15).
```javascript
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 ](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. Acesse a [documentação](https://cryptojs.gitbook.io/docs) 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](/chatlayer-documentation-pt-br/buildabot/flow-logic/dialog-state/action-bot-dialog.md#delay)
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:
```javascript
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.*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/integrateandcode/code-action.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.