Opções

A biblioteca do Forge estende o Zod. Ou seja, você pode usar qualquer esquema Zod para validar os dados que quer guardar no seu bloco. O Forge armazena os metadados de layout nos esquemas usando a API meta() do Zod, para que o editor do GG.chatbot renderize as entradas corretas.

As opções estendem o esquema z.ZodObject<any>.

O Forge oferece funções práticas para criar o esquema de opções. Embora você possa usar esquemas Zod puros, recomendamos fortemente as funções option.

Veja um exemplo de esquema criado com os auxiliares option e o meta():

option.object({
  token: option.string.meta({ layout: {
    label: 'Token',
    isRequired: true,
    placeholder: 'Type your token...',
    helperText: 'You can find your token [here](https://).',
  } }),
  role: option.enum(['user', 'admin']).meta({ layout: {
    defaultValue: 'user',
    label: 'Role',
  } }),
  phoneNumber: option.string.meta({ layout: {
    accordion: 'Advanced settings',
    label: 'Phone number',
    placeholder: 'Type your phone number...',
  } }),
  address: option.string.meta({ layout: {
    accordion: 'Advanced settings',
    label: 'Address',
    placeholder: 'Type your address...',
  } }),
  isTestModeEnabled: option.boolean.meta({ layout: {
    label: 'Test mode',
    defaultValue: true,
    helperText: 'Enable test mode to use a test account.',
  } }),
})

Object

option.object({
  //...
})

String

Exemplo:

option.string.meta({ layout: {
  label: 'Name',
  placeholder: 'Type a name...',
  withVariableButton: false,
} })

Number

Exemplo:

option.number.meta({ layout: {
  label: 'Temperature',
  defaultValue: 1,
  direction: 'row',
} })

Boolean

option.boolean.meta({ layout: {
  label: 'Test mode',
  moreInfoTooltip: 'Enable test mode to use a test account.',
} })

Enum

Exemplo:

option.enum(['user', 'admin']).meta({ layout: {
  label: 'Role',
  defaultValue: 'user',
} })

Uniões discriminadas

Exemplo:

option.discriminatedUnion('type', [
  option.object({
    type: option.literal('user'),
    name: option.string.meta({ layout: { placeholder: 'Type a name...' } }),
  }),
  option.object({
    type: option.literal('admin'),
    name: option.string.meta({ layout: { placeholder: 'Type a name...' } }),
    phoneNumber: option.string.meta({ layout: {
      placeholder: 'Type a phone number...',
    } }),
  }),
])

Literal

Usado principalmente em uniões discriminadas. Não aparece no editor do GG.chatbot.

Exemplo:

option.literal('user')

Array

Use para coletar uma lista de valores.

Exemplo:

Uma lista de nomes

option.array(option.string.meta({ layout: { placeholder: 'Type a name...' } })).meta({ layout: {
  label: 'Names',
  itemLabel: 'name',
} })

Auxiliares

Save Response Array

Use para salvar em variáveis a resposta de um vetor de opções.

Por exemplo, se você quer que o usuário possa salvar a resposta de uma requisição HTTP em variáveis:

option.saveResponseArray(['Message content', 'Total tokens']).meta({ layout: {
  accordion: 'Save response',
} })

Você informa a lista de todos os valores de resposta que podem ser salvos.

Exemplo de layout com vetor de respostas salvas

Propriedades de layout

labelstring

O rótulo da opção. Costuma aparecer logo acima da entrada.

placeholderstring

O texto de exemplo da entrada.

helperTextstring

O texto de apoio da entrada. Costuma aparecer abaixo dela.

accordionstring

O nome da seção recolhível em que a opção aparece. Por exemplo, para agrupar duas propriedades na mesma seção chamada "Advanced settings":

option.object({
  temperature: option.number.meta({ layout: {
    accordion: 'Advanced settings',
  } }),
  humidity: option.number.meta({ layout: {
    accordion: 'Advanced settings',
  } }),
})

direction'row' | 'column'padrão: column

A direção da entrada. Com row, o rótulo aparece à esquerda dela.

defaultValueany

O valor padrão da entrada.

moreInfoTooltipstring

A dica exibida quando o usuário passa o mouse sobre o ícone de informação da entrada.

withVariableButtonbooleanpadrão: true

Define se o botão de variável aparece ao lado da entrada.

inputType'variableDropdown' | 'textarea' | 'password'

O tipo de entrada a exibir.

isRequiredbooleanpadrão: false

Define se a entrada é obrigatória. Com true, exibe uma estrela vermelha ao lado do rótulo.

fetcherstring

Defina isto se quiser que sua entrada ofereça uma lista suspensa com itens buscados dinamicamente.

option.string.meta({ layout: {
  fetcher: 'fetchModels',
} })

O fetchModels deve corresponder ao id do buscador definido na propriedade fetchers da ação. Veja Fetcher para mais informações.

Apenas para vetores

itemLabelstring

O rótulo dos itens de uma opção do tipo vetor. Aparece ao lado do texto "Add" no botão de adicionar.

isOrderedbooleanpadrão: false

Define se a ordem dos itens do vetor importa. Exibe botões de "mais" acima e abaixo ao passar o mouse sobre um item.

On this page