🧭 Módulo 4: Flujos con addAction, menús y capturas avanzadas

En este módulo aprenderás a usar addAction(), que te permite definir acciones personalizadas al recibir mensajes de WhatsApp. Con esta función puedes capturar respuestas, ejecutar lógica, validar entradas y dirigir la conversación hacia otros flujos.

---

4.1 ¿Qué hace addAction()?

La función addAction() ejecuta acciones lógicas dentro de un flujo. Puede mostrar mensajes, capturar entradas del usuario, validar datos o saltar a otros flujos.

const { addKeyword } = require("@bot-whatsapp/bot");

const flowPrincipal = addKeyword(["hola", "alo"]).addAction(
  async (_, { flowDynamic }) => {
    return await flowDynamic("👋 ¡Hola! ¿En qué puedo ayudarte?");
  }
);

Explicación:

• El bot responde dinámicamente usando flowDynamic().
• addAction() permite más control que addAnswer(), ya que puede incluir lógica y condiciones.

---

4.2 Ejemplo inicial con captura

const flowPrincipal = addKeyword(["hola"])
  .addAction(async (_, { flowDynamic }) => {
    return await flowDynamic("Buenas 👋 ¿Cuál es tu nombre?");
  })
  .addAction({ capture: true }, async (ctx, { flowDynamic, state }) => {
    await state.update({ name: ctx.body });
    return await flowDynamic(`Gracias por tu nombre, *${ctx.body}*!`);
  })
  .addAnswer("✨ ¡Encantado de conocerte!");

Aquí, el bot:

1. Pregunta el nombre.
2. Captura la siguiente respuesta del usuario (capture: true).
3. Guarda el valor con state.update().
4. Responde de forma personalizada.

---

4.3 Menú básico (con números)

const flowMenuBasico = addKeyword(["menu"])
  .addAnswer("📋 *Menú principal*")
  .addAnswer(
    "Selecciona una opción:\n1️⃣ Ver productos\n2️⃣ Soporte\n3️⃣ Contacto",
    { capture: true },
    async (ctx, { flowDynamic, gotoFlow }) => {
      const opcion = ctx.body.trim();
      switch (opcion) {
        case "1":
          return gotoFlow(flowProductos);
        case "2":
          return gotoFlow(flowSoporte);
        case "3":
          return gotoFlow(flowContacto);
        default:
          return flowDynamic("❌ Opción inválida. Escribe 1, 2 o 3.");
      }
    }
  );

Subflujos

const flowProductos = addKeyword("productos").addAnswer(
  "🛍️ Tenemos zapatos, bolsos y accesorios."
);

const flowSoporte = addKeyword("soporte").addAnswer(
  "🧰 Cuéntame tu problema, te ayudaremos."
);

const flowContacto = addKeyword("contacto").addAnswer(
  "📞 Puedes escribirnos al WhatsApp +51 999 888 777"
);

Este menú es ideal para bots de tiendas, atención o trámites simples.

---

4.4 Menú avanzado con validación y subniveles

const flowMenuAvanzado = addKeyword(["inicio", "menu avanzado"])
  .addAction(async (_, { flowDynamic }) => {
    await flowDynamic("🌐 Bienvenido al *Centro Virtual de Atención*");
    await flowDynamic(
      "Selecciona una opción:\n1️⃣ Información\n2️⃣ Consultas\n3️⃣ Servicios"
    );
  })
  .addAction({ capture: true }, async (ctx, { flowDynamic, gotoFlow }) => {
    const opcion = ctx.body.trim();
    if (["1", "2", "3"].includes(opcion)) {
      if (opcion === "1") return gotoFlow(flowInfo);
      if (opcion === "2") return gotoFlow(flowConsultas);
      if (opcion === "3") return gotoFlow(flowServicios);
    } else {
      return await flowDynamic(
        "🚫 Opción no válida. Por favor escribe 1, 2 o 3."
      );
    }
  });

// Submenús
const flowInfo = addKeyword("info")
  .addAnswer("📚 Ofrecemos atención 24/7 y respuestas automáticas.")
  .addAnswer("¿Quieres volver al menú principal?", {
    buttons: [{ body: "Regresar al menú" }],
  });

const flowConsultas = addKeyword("consultas").addAnswer(
  "💬 Escribe tu consulta y uno de nuestros agentes te ayudará."
);

const flowServicios = addKeyword("servicios").addAnswer(
  "🛠️ Servicios disponibles:\n- Certificados\n- Trámites\n- Soporte técnico."
);

Aquí combinamos:

• addAction con validación.
• Submenús y botones para navegación.
• Flujos separados para modularidad y escalabilidad.

---

4.5 Ejemplo de inicio automático con EVENTS.WELCOME

const { EVENTS } = require("@bot-whatsapp/bot");

const flowInicio = addKeyword(EVENTS.WELCOME)
  .addAnswer("👋 ¡Bienvenido al chatbot!")
  .addAnswer("Escribe *menu* para comenzar o *ayuda* para más información.");

Se ejecuta cuando el usuario inicia una conversación por primera vez o no hay coincidencia de palabra clave.

---

4.6 Glue code para unir todo

const { createBot, createProvider, createFlow } = require("@bot-whatsapp/bot");
const { BaileysProvider } = require("@bot-whatsapp/provider-baileys");
const { JsonFileAdapter } = require("@bot-whatsapp/database-json");

const main = async () => {
  const adapterDB = new JsonFileAdapter();
  const adapterFlow = createFlow([
    flowInicio,
    flujoPrincipal,
    flowMenuBasico,
    flowProductos,
    flowSoporte,
    flowContacto,
    flowMenuAvanzado,
    flowInfo,
    flowConsultas,
    flowServicios,
  ]);
  const adapterProvider = createProvider(BaileysProvider);

  await createBot({
    flow: adapterFlow,
    provider: adapterProvider,
    database: adapterDB,
  });
};

main();

---

✅ Resumen del Módulo 4

Funcionalidad	Descripción
addAction	Ejecuta lógica personalizada dentro de flujos.
capture: true	Captura la siguiente respuesta del usuario.
gotoFlow	Permite saltar entre flujos.
EVENTS.WELCOME	Inicia automáticamente un flujo al abrir chat.
Menú básico y avanzado	Guían al usuario con opciones organizadas.

---

📦 Siguiente paso: En el Módulo 5, aprenderás a integrar APIs externas y bases de datos reales (por ejemplo, guardar usuarios, pedidos o formularios directamente desde el chat).