Fetcher

Sua ação pode ter uma propriedade fetchers, que é um vetor de referências a buscadores. Eles permitem preencher listas suspensas dinamicamente, buscando dados de APIs externas.

Definir o buscador na sua ação

Primeiro, exporte uma constante de buscador e referencie-a na ação:

No arquivo da ação (actions/createChatCompletion.ts):

import { createAction } from "@typebot.io/forge";
import { auth } from "../auth";

// Export the fetcher constant
export const modelsFetcher = {
  id: "fetchModels",
} as const;

export const createChatCompletion = createAction({
  name: "Create chat completion",
  auth,
  options: option.object({
    model: option.string.meta({ layout: {
      fetcher: modelsFetcher.id, // Reference the fetcher by its id
      label: "Model",
      placeholder: "Select a model",
    } }),
    // ... other options
  }),
  fetchers: [modelsFetcher], // Register the fetcher
  // ...
});

Implementar o handler do buscador

A lógica do buscador deve ser definida no seu arquivo de handlers, com createFetcherHandler:

No arquivo de handlers (handlers.ts):

import { createActionHandler, createFetcherHandler } from "@typebot.io/forge";
import { parseUnknownError } from "@typebot.io/lib/parseUnknownError";
import { ky } from "@typebot.io/lib/ky";
import {
  createChatCompletion,
  modelsFetcher,
} from "./actions/createChatCompletion";

export default [
  createActionHandler(createChatCompletion, {
    server: async ({ credentials, options, variables, logs }) => {
      // Action implementation
    },
  }),
  createFetcherHandler(
    createChatCompletion, // Pass the action as first parameter
    modelsFetcher.id, // Pass the fetcher id
    async ({ credentials, options }) => {
      if (!credentials?.apiKey)
        return {
          data: [],
        };

      try {
        const response = await ky
          .get("https://api.example.com/models", {
            headers: {
              authorization: `Bearer ${credentials.apiKey}`,
            },
          })
          .json<{ data: { id: string; name: string }[] }>();

        return {
          data: response.data.map((model) => ({
            value: model.id,
            label: model.name,
          })),
        };
      } catch (err) {
        return {
          error: await parseUnknownError({ err }),
        };
      }
    }
  ),
];

Formato da resposta do buscador

A função do buscador precisa devolver um objeto com a propriedade data ou error:

Sucesso: { data: (string | { label: string; value: string })[] }
Erro: { error: string | { description: string; details?: string; context?: string } }

O vetor data pode conter:

Textos simples: ["model-1", "model-2", "model-3"]
Objetos com label e value: [{ label: "GPT-4", value: "gpt-4" }, { label: "GPT-3.5", value: "gpt-3.5-turbo" }]

Parâmetros disponíveis

O handler do buscador recebe os seguintes parâmetros:

credentials: as credenciais autenticadas da ação
options: os valores atuais de todas as opções da ação (útil quando há dependências entre elas)

Ao passar a ação como primeiro parâmetro do createFetcherHandler, o TypeScript infere automaticamente os tipos corretos de credentials e options.

Definir o buscador na sua ação

Implementar o handler do buscador

Formato da resposta do buscador

Parâmetros disponíveis

On this page