docs(bot): 📝 merged

2026-04-18 03:29:15 +00:00 · 2022-12-23 11:36:41 +01:00
parent 111368e9e4 be124cd7a2
commit 5be76e9d2d
12 changed files with 199 additions and 24 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+    "recommendations": ["xyc.vscode-mdx-preview"]
+}
--- a/MIGRATION.md
+++ b/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)
--- a/packages/bot/package.json
+++ b/packages/bot/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/bot",
-    "version": "0.0.25-alpha.0",
+    "version": "0.0.26-alpha.0",
    "description": "",
    "main": "./lib/bundle.bot.cjs",
    "scripts": {
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/cli",
-    "version": "0.0.32-alpha.0",
+    "version": "0.0.33-alpha.0",
    "description": "",
    "main": "index.js",
    "devDependencies": {
--- a/packages/create-bot-whatsapp/package.json
+++ b/packages/create-bot-whatsapp/package.json
@@ -1,6 +1,6 @@
 {
    "name": "create-bot-whatsapp",
-    "version": "0.0.43-alpha.0",
+    "version": "0.0.44-alpha.0",
    "description": "",
    "main": "./lib/bundle.create-bot-whatsapp.cjs",
    "files": [
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/database",
-    "version": "0.0.24-alpha.0",
+    "version": "0.0.25-alpha.0",
    "description": "Esto es el conector a  mysql, pg, mongo",
    "main": "./lib/mock/index.cjs",
    "keywords": [],
--- a/packages/docs/src/components/widgets/NavBar.tsx
+++ b/packages/docs/src/components/widgets/NavBar.tsx
@@ -10,7 +10,7 @@ export default component$(
    }: {
        options: {
            title: string
-            link: string
+            link?: string
            list: { link: string; name: string }[]
        }[]
    }) => {
@@ -25,19 +25,13 @@ export default component$(
 )

 export const UlCompoent = component$(
-    (porps: {
-        title: string
-        link: string
-        list: { link: string; name: string }[]
-    }) => {
+    (porps: { title: string; list: { link: string; name: string }[] }) => {
        return (
            <ul>
                <li class="mt-2 lg:mt-2">
-                    <a href={porps.link}>
-                        <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
-                            {porps.title}
-                        </h5>
-                    </a>
+                    <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
+                        {porps.title}
+                    </h5>
                    <LiComponent list={porps.list} />
                </li>
            </ul>
--- a/packages/docs/src/routes/docs/advanced/index.mdx
+++ b/packages/docs/src/routes/docs/advanced/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Avanzado
--- a/packages/docs/src/routes/docs/buttons_lists/index.mdx
+++ b/packages/docs/src/routes/docs/buttons_lists/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Botones y listas
--- a/packages/docs/src/routes/docs/layout!.tsx
+++ b/packages/docs/src/routes/docs/layout!.tsx
@@ -10,12 +10,13 @@ export default component$(() => {
        options: [
            {
                title: 'Primeros pasos',
-                link: '',
                list: [
                    { name: 'Vista rápida', link: '/docs' },
                    { name: 'Instalación', link: '/docs/install' },
                    { name: 'Configuración', link: '/docs/settings' },
                    { name: 'Migración', link: '/docs/migration' },
+                    { name: 'Botones y Listas', link: '/docs/buttons_lists' },
+                    { name: 'Avanzado', link: '/docs/advanced' },
                    { name: 'Contribuidores', link: '/docs/contribuiting' },
                ],
            },
--- a/packages/docs/src/routes/docs/migration/index.mdx
+++ b/packages/docs/src/routes/docs/migration/index.mdx
@@ -64,7 +64,7 @@ En la **_versión (legacy)_** se implementas los flujos de esta manera, en dos a

 #### 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 encontrarás un ejemplo del mismo flujo anteriormente mostrado.

 ```js
 //app.js
@@ -76,8 +76,8 @@ const {
    addChild,
 } = require('@bot-whatsapp/bot')

-const BaileysProvider = require('@bot-whatsapp/provider/baileys')
-const MockAdapter = require('@bot-whatsapp/database/mock')
+const BaileysProvider = require('@bot-whatsapp/provider/baileys') //Provider
+const MockAdapter = require('@bot-whatsapp/database/mock') //Base de datos
 /**
 * Declarando flujos principales.
 */
@@ -112,7 +112,7 @@ const main = async () => {
        flowAdios,
        flowProductos,
        flowCatalogo,
-    ])
+    ]) //Se crean los flujos.
    const adapterProvider = createProvider(BaileysProvider)
    createBot({
        flow: adapterFlow,
@@ -122,6 +122,83 @@ const main = async () => {
 }
 ```

+#### 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)
--- a/packages/provider/package.json
+++ b/packages/provider/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/provider",
-    "version": "0.0.30-alpha.0",
+    "version": "0.0.31-alpha.0",
    "description": "Esto es el conector a Twilio, Meta, etc...",
    "main": "./lib/mock/index.cjs",
    "keywords": [],