docs: se agrego ejemplo de flujos hijos a MIGRATION.md

excelente trabajo como siempre

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["xyc.vscode-mdx-preview"]
+}

MIGRATION.md

@@ -2,9 +2,9 @@
 
 #### Versión (legacy)
 
-En la  ***versión (legacy)***  se implementas los flujos de esta manera, en dos archivos independientes.
+En la ***versión (legacy)*** se implementaban los flujos de esta manera, en dos archivos independientes.
 
-> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar.
+> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar 
 > __`response.json`__ donde se escriben los mensajes a responder.
 
 ```json
@@ -77,7 +77,7 @@ En la  ***versión (legacy)***  se implementas los flujos de esta manera, en dos
 
 #### Versión 2 (0.2.X)
 
-En esta versión es mucho más sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
+En esta versión es mucho más sencillo, abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
 
 ```js
 //app.js
@@ -126,6 +126,86 @@ const flowCatalogo = addKeyword(['imagen', 'foto'])
 }
 ```
 
+#### Flujos hijos
+
+A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo:
+
+ >          Menu Principal (Escoge zapatos o bolsos)
+ >           - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela)
+ >             - Submenu 1.1 (piel)
+ >           - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela)
+ >             - Submenu 2.1 (piel)
+
+El __submenu 1__ solo se va a disparar cuando el flujo anterior sea el __principal__, e igualmente el __submenu 1.1__, solo cuando el flujo anterior sea el __submenu 1__, ejemplo:
+
+```js
+/**
+ * Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo:
+ *
+ *          Menu Principal
+ *           - SubMenu 1
+ *             - Submenu 1.1
+ *           - Submenu 2
+ *             - Submenu 2.1
+ *
+ * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
+ */
+const flowBolsos2 = addKeyword(['bolsos2', '2'])
+    .addAnswer('🤯 *MUCHOS* bolsos ...')
+    .addAnswer('y mas bolsos... bla bla')
+
+const flowZapatos2 = addKeyword(['zapatos2', '2'])
+    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
+    .addAnswer('y algunas otras cosas.')
+
+const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
+    .addAnswer('🤯 Veo que elegiste zapatos')
+    .addAnswer('Tengo muchos zapatos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowZapatos2)]
+    )
+
+const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
+    .addAnswer('🙌 Veo que elegiste bolsos')
+    .addAnswer('Tengo muchos bolsos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos2)]
+    )
+
+/**
+ * Declarando flujo principal
+ */
+
+const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer(
+        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos), ...addChild(flowZapatos)]
+    )
+```
+
+
 > Forma parte de este proyecto.
 
 -   [Discord](https://link.codigoencasa.com/DISCORD)

packages/docs/src/routes/docs/advanced/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Avanzado

packages/docs/src/routes/docs/buttons_lists/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Botones y listas

packages/docs/src/routes/docs/install/index.mdx

@@ -8,3 +8,76 @@ contributors:
 ---
 
 # Instalación
+
+Instalar el bot muy sencillo, solo deberas ejecutar el siguiente comando 🚀
+
+```shell
+npm create bot-whatsapp@latest
+```
+
+Te va a preguntar que si quieres crear un bot, contesta con "Y" y la tecla `Enter`
+
+```shell
+🚀 Revisando tu Node.js
+Node.js compatible v18.12.0
+
+🙂 Revisando tu sistema operativo
+
+? Quieres crear un bot? (Y/n) »
+```
+
+A continuación te va pedir que selecciones el proveedor que quieres usar, puedes seleccionarlo moviendote sobre las opciones con las flechas arriba y abajo, y cuando estes sobre el que quieres, presiona la tecla de `Espacio` y después la tecla `Enter`.
+
+```shell
+? ¿Cuál proveedor de whatsapp quieres utilizar? » Espacio para seleccionar ↑/↓
+( )   whatsapp-web.js (gratis)
+( )   Venom (gratis)
+(x)   Baileys (gratis)
+( )   Twilio
+( )   API Oficial (Meta)
+```
+
+Continuamos con la selección de la base de datos que vamos a usar para guardar las conversaciones, de igual manera, usamos las flechas y barra de espacio para la selección:
+
+```shell
+? ¿Cuál base de datos quieres utilizar? » Espacio para seleccionar ↑/↓
+(x)   Memory
+( )   Mongo
+( )   MySQL
+( )   Json
+```
+
+Terminamos con la selección de preveedor y base de datos, y continuamos con la instalación:
+
+Hay que cambiarnos de directorio al que se acaba de crear, dependiendo de lo que seleccionamos previamente, en este caso es `base-baileys-memory`.
+Una vez que nos cambiamos de directorio ejecutamos el comando `npm install`.
+Y cuando termine la instalación ejecutamos `npm start`.
+
+```shell
+√ ¿Cuál base de datos quieres utilizar? » Memory
+success!
+
+⚡⚡⚡ INSTRUCCIONES ⚡⚡⚡
+cd base-bailey-memory
+npm install
+npm start
+```
+
+En el directorio del bot (**base-baileys-memory**) se va a crear un archivo `qr.png`, este archivo contiene un código QR, hay que escanear ese código desde la aplicación de Whatsapp en el telefono que queremos ligar al bot.
+
+```shell
+⚡⚡ ACCIÓN REQUERIDA ⚡⚡
+Debes escanear el QR Code para iniciar session reivsa qr.svg
+Recuerda que el QR se actualiza cada minuto
+Necesitas ayuda: https://link.codigoencasa.com/DISCORD
+```
+
+Una vez que escanemos el código nos va a aparecer el mensaje, y el bot está listo para recibir mensajes.
+
+```shell
+Proveedor conectado y listo
+```
+
+Desde **otro** celular, manda un mensaje al numero que acabas de ligar con el texto "hola", y debes de recibir un mensaje de "Bienvenido a mi tienda".
+
+**Listo.**

packages/docs/src/routes/docs/layout!.tsx

@@ -11,7 +11,9 @@ export default component$(() => {
             { name: 'Primeros pasos', link: '/docs' },
             { name: 'Instalación', link: '/docs/install' },
             { name: 'Configuración', link: '/docs/settings' },
+            { name: 'Botones y Listas', link: '/docs/buttons_lists' },
             { name: 'Migración', link: '/docs/migration' },
+            { name: 'Avanzado', link: '/docs/advanced' },
         ],
         extraOptions: [
             { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },

packages/docs/src/routes/docs/migration/index.mdx

@@ -7,4 +7,210 @@ contributors:
     - gabrielgrant
 ---
 
-# Migracion
+# Migración
+
+#### Versión (legacy)
+
+En la **_versión (legacy)_** se implementaban los flujos en dos archivos independientes, de la siguiente manera:
+
+> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado, tambien se necesitaba implementar
+> **`response.json`** donde se escriben los mensajes a responder.
+
+```json
+//initial.json
+[
+    {
+        "keywords": ["hola", "ola", "alo"],
+        "key": "hola"
+    },
+    {
+        "keywords": ["productos", "info"],
+        "key": "productos"
+    },
+    {
+        "keywords": ["adios", "bye"],
+        "key": "adios"
+    },
+    {
+        "keywords": ["imagen", "foto"],
+        "key": "catalogo"
+    }
+]
+```
+
+```json
+//response.json
+{
+    "hola": {
+        "replyMessage": ["Gracias a ti! \n"],
+        "media": null,
+        "trigger": null
+    },
+    "adios": {
+        "replyMessage": ["Que te vaya bien!!"]
+    },
+    "productos": {
+        "replyMessage": ["Más productos aquí"],
+        "trigger": null,
+        "actions": {
+            "title": "¿Que te interesa ver?",
+            "message": "Abajo unos botons",
+            "footer": "",
+            "buttons": [
+                { "body": "Telefonos" },
+                { "body": "Computadoras" },
+                { "body": "Otros" }
+            ]
+        }
+    },
+    "catalogo": {
+        "replyMessage": ["Te envio una imagen"],
+        "media": "https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif",
+        "trigger": null
+    }
+}
+```
+
+#### Versión 2 (0.2.X)
+
+En esta versión es mucho más sencillo, abajo encontrarás un ejemplo del mismo flujo anteriormente mostrado.
+
+```js
+//app.js
+const {
+    createBot,
+    createProvider,
+    createFlow,
+    addKeyword,
+    addChild,
+} = require('@bot-whatsapp/bot')
+
+const BaileysProvider = require('@bot-whatsapp/provider/baileys') //Provider
+const MockAdapter = require('@bot-whatsapp/database/mock') //Base de datos
+/**
+ * Declarando flujos principales.
+ */
+const flowHola = addKeyword(['hola', 'ola', 'alo']).addAnswer(
+    'Bienvenido a tu tienda online!'
+)
+
+const flowAdios = addKeyword(['adios', 'bye'])
+    .addAnswer('Que te vaya bien!!')
+    .addAnswer('Hasta luego!')
+
+const flowProductos = addKeyword(['productos', 'info']).addAnswer(
+    'Te envio una imagen',
+    {
+        buttons: [
+            { body: 'Telefonos' },
+            { body: 'Computadoras' },
+            { body: 'Otros' },
+        ],
+    }
+)
+
+const flowCatalogo = addKeyword(['imagen', 'foto']).addAnswer(
+    'Te envio una imagen',
+    { media: 'https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif' }
+)
+
+const main = async () => {
+    const adapterDB = new MockAdapter()
+    const adapterFlow = createFlow([
+        flowHola,
+        flowAdios,
+        flowProductos,
+        flowCatalogo,
+    ]) //Se crean los flujos.
+    const adapterProvider = createProvider(BaileysProvider)
+    createBot({
+        flow: adapterFlow,
+        provider: adapterProvider,
+        database: adapterDB,
+    })
+}
+```
+
+#### Flujos hijos
+
+A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo:
+
+>          Menu Principal (Escoge zapatos o bolsos)
+>           - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela)
+>             - Submenu 1.1 (piel)
+>           - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela)
+>             - Submenu 2.1 (piel)
+
+El `submenu 1` solo se va a disparar cuando el flujo anterior sea el `principal`, e igualmente el `submenu 1.1`, solo cuando el flujo anterior sea el `submenu 1`, ejemplo:
+
+```js
+/**
+ * Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo:
+ *
+ *          Menu Principal
+ *           - SubMenu 1
+ *             - Submenu 1.1
+ *           - Submenu 2
+ *             - Submenu 2.1
+ *
+ * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
+ */
+const flowBolsos2 = addKeyword(['bolsos2', '2'])
+    .addAnswer('🤯 *MUCHOS* bolsos ...')
+    .addAnswer('y mas bolsos... bla bla')
+
+const flowZapatos2 = addKeyword(['zapatos2', '2'])
+    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
+    .addAnswer('y algunas otras cosas.')
+
+const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
+    .addAnswer('🤯 Veo que elegiste zapatos')
+    .addAnswer('Tengo muchos zapatos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowZapatos2)]
+    )
+
+const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
+    .addAnswer('🙌 Veo que elegiste bolsos')
+    .addAnswer('Tengo muchos bolsos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos2)]
+    )
+/**
+ * Declarando flujo principal
+ */
+const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer(
+        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos), ...addChild(flowZapatos)]
+    )
+```
+
+> Forma parte de este proyecto.
+
+-   [Discord](https://link.codigoencasa.com/DISCORD)
+-   [Twitter](https://twitter.com/leifermendez)
+-   [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
+-   [Telegram](https://t.me/leifermendez)