fix(cli): ⚡ refactor

2026-04-18 03:29:15 +00:00 · 2023-01-16 09:42:43 +01:00
parent 6683715ad6 e72794a296
commit b393c11af6
134 changed files with 4606 additions and 1505 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
-packages/docs/*
+packages/docs/*
+packages/portal/*
--- a/.github/workflows/check-providers.yml
+++ b/.github/workflows/check-providers.yml
@@ -1,54 +0,0 @@
-name: Rev Providers
-
-on:
-    pull_request:
-        branches:
-            - dev
-
-jobs:
-    check-npm:
-        name: Install Dependencies
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v3
-
-            - name: Setup Node
-              uses: actions/setup-node@v3
-              with:
-                  node-version: 16.x
-                  cache: 'yarn'
-                  registry-url: https://registry.npmjs.org/
-
-            - run: corepack enable
-
-            - name: Install NPM Dependencies
-              run: yarn install --immutable --network-timeout 300000
-
-            - name: Check Baileys
-              run: yarn node ./scripts/checker.js --name=baileys --stable=true
-
-            - name: Check Venom
-              run: yarn node ./scripts/checker.js --name=venom --stable=true
-
-            - name: Check web-whatsapp
-              run: yarn node ./scripts/checker.js --name=web-whatsapp --stable=true
-
-            - name: Check Meta
-              run: yarn node ./scripts/checker.js --name=meta --stable=true
-
-            - name: Check Twilio
-              run: yarn node ./scripts/checker.js --name=twilio --stable=true
-
-            - name: Add and commit changes to gh-pages branch
-              run: |
-                  git config --local user.email 'action@github.com'
-                  git config --local user.name 'GitHub Action'
-                  git add .
-                  git commit -m 'major'
-
-            - name: Push changes
-              uses: ad-m/github-push-action@master
-              with:
-                  github_token: ${{ secrets.GITHUB_TOKEN }}
-                  branch: feature/providers-major
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,7 +29,7 @@ jobs:
              run: yarn install --immutable --network-timeout 300000

            - name: Build Package
-              run: yarn build
+              run: yarn build:full

            - name: Build Eslint rules
              run: yarn lint:fix
@@ -56,3 +56,51 @@ jobs:

            - name: Unit Tests
              run: yarn test
+
+    ############ UNIT TEST ############
+    check-providers:
+        name: Check Providers Versions
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'yarn'
+                  registry-url: https://registry.npmjs.org/
+
+            - run: corepack enable
+
+            - name: Install NPM Dependencies
+              run: yarn install --immutable --network-timeout 300000
+
+            - name: Check Baileys
+              run: yarn node ./scripts/checker.js --name=baileys --stable=true
+
+            - name: Check Venom
+              run: yarn node ./scripts/checker.js --name=venom --stable=true
+
+            - name: Check web-whatsapp
+              run: yarn node ./scripts/checker.js --name=web-whatsapp --stable=true
+
+            - name: Check Meta
+              run: yarn node ./scripts/checker.js --name=meta --stable=true
+
+            - name: Check Twilio
+              run: yarn node ./scripts/checker.js --name=twilio --stable=true
+
+            - name: Add and commit changes to gh-pages branch
+              run: |
+                  git config --local user.email 'action@github.com'
+                  git config --local user.name 'GitHub Action'
+                  git add .
+                  git commit -m 'major'
+
+            - name: Push changes
+              uses: ad-m/github-push-action@master
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  branch: feature/providers-major
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -13,7 +13,7 @@ name: 'CodeQL'

 on:
    push:
-        branches: ['main', dev, next-release]
+        branches: [release/next]
    pull_request:
        # The branches below must be a subset of the branches above
        branches: ['main']
@@ -22,6 +22,7 @@ on:

 jobs:
    analyze:
+        if: ${{ !github.event.act }}
        name: Analyze
        runs-on: ubuntu-latest
        permissions:
--- a/.github/workflows/contributors.yml
+++ b/.github/workflows/contributors.yml
@@ -1,12 +1,8 @@
 name: Revisando Colaboradores
+
 on:
-    push:
-        branches:
-            - main
-    pull_request:
-        branches:
-            - dev
-        types: [closed]
+    schedule:
+        - cron: '0 9 * * *'

 jobs:
    contrib-readme-job:
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@@ -13,6 +13,7 @@ on:
 jobs:
    ############ DOCUMENTATION BUILD ############
    build-documentation:
+        if: ${{ !github.event.act }}
        name: Build Package
        runs-on: ubuntu-latest

--- a/.github/workflows/netlify.yml
+++ b/.github/workflows/netlify.yml
@@ -3,12 +3,11 @@ name: 📄 (PROD) Desplegando documentacion
 on:
    push:
        branches:
-            - main
-            - next-release
+            - release/next

 jobs:
    ############ DOCUMENTATION BUILD ############
-    build-documentation:
+    build-documentation-prod:
        name: Build Package
        runs-on: ubuntu-latest

--- a/.github/workflows/releases-dev.yml
+++ b/.github/workflows/releases-dev.yml
@@ -3,7 +3,7 @@ name: 🚀 (DEV) Liberando versiones
 on:
    push:
        branches:
-            - next-release
+            - release/next

 jobs:
    ############ RELEASE ############
@@ -27,7 +27,7 @@ jobs:
              run: yarn install --immutable --network-timeout 300000

            - name: Build Package
-              run: yarn build
+              run: yarn build:full

            - name: Release @bot-whatsapp/bot
              run: yarn node ./scripts/release.js --name=bot --version=  --token="${{ secrets.NPM_TOKEN }}"
@@ -44,6 +44,12 @@ jobs:
            - name: Release @bot-whatsapp/provider
              run: yarn node ./scripts/release.js --name=provider --version=  --token="${{ secrets.NPM_TOKEN }}"

+            - name: Release @bot-whatsapp/contexts
+              run: yarn node ./scripts/release.js --name=contexts --version=  --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/portal
+              run: yarn node ./scripts/release.js --name=portal --version=  --token="${{ secrets.NPM_TOKEN }}"
+
            - name: Commit Versioning & Push changes
              uses: stefanzweifel/git-auto-commit-action@v4
              with:
--- a/.github/workflows/releases.yml
+++ b/.github/workflows/releases.yml
@@ -2,12 +2,12 @@ name: 🚀⚡ Liberando versiones

 on:
    push:
-        tags:
-            - 'v*.*.*'
-
+        branches:
+            - release/production
 jobs:
    ############ RELEASE ############
-    release:
+    release-prod:
+        if: ${{ !github.event.act }}
        name: Release
        runs-on: ubuntu-latest
        steps:
@@ -27,32 +27,53 @@ jobs:

            - run: corepack enable

+            - name: Set User
+              run: git config --global user.email "leifer.contacto@gmail.com" && git config --global user.name "Leifer Mendez"
+
            - name: Install NPM Dependencies
              run: yarn install --immutable --network-timeout 300000

-            - name: Build Package
-              run: yarn build
-
-            - name: Release @bot-whatsapp/bot
-              run: yarn node ./scripts/release.js --name=bot --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
-
-            - name: Release @bot-whatsapp/cli
-              run: yarn node ./scripts/release.js --name=cli --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
-
-            - name: Release @bot-whatsapp/create-bot-whatsapp
-              run: yarn node ./scripts/release.js --name=create-bot-whatsapp --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
-
-            - name: Release @bot-whatsapp/database
-              run: yarn node ./scripts/release.js --name=database --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
-
-            - name: Release @bot-whatsapp/provider
-              run: yarn node ./scripts/release.js --name=provider --version="${{ steps.vars.outputs.tag }}" --token="${{ secrets.NPM_TOKEN }}"
-
            - name: Set CHANGELOG
              run: yarn release

+            - name: get-npm-version
+              id: package-version
+              uses: martinbeentjes/npm-get-version-action@main
+
+            - name: Build Package
+              run: yarn build:full
+
+            - name: Release @bot-whatsapp/bot
+              run: yarn node ./scripts/release.js --name=bot --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/cli
+              run: yarn node ./scripts/release.js --name=cli --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/create-bot-whatsapp
+              run: yarn node ./scripts/release.js --name=create-bot-whatsapp --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/database
+              run: yarn node ./scripts/release.js --name=database --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/provider
+              run: yarn node ./scripts/release.js --name=provider --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/contexts
+              run: yarn node ./scripts/release.js --name=contexts --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release @bot-whatsapp/portal
+              run: yarn node ./scripts/release.js --name=portal --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.NPM_TOKEN }}"
+
+            - name: Release Github
+              run: yarn node ./scripts/github.js --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.OCTO_TOKEN }}"
+
+            - name: 'Run if changes have been detected'
+              run: |
+                  git add .
+                  git commit -m "chore(version): pre release"
+
            - name: Commit Versioning & Push changes
+              if: github.event_name == 'push'
              uses: stefanzweifel/git-auto-commit-action@v4
              with:
-                  commit_message: 'release(version): 🚀 - "${{ steps.vars.outputs.tag }}" release'
-                  branch: dev
+                  commit_message: 'chore(version): launch release 🚀 "${{ steps.package-version.outputs.current-version}}"'
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,10 @@ mediaSend/*
 !mediaSend/nota-de-voz.mp3
 .env
 .wwebjs_auth
+/session
+/session/*
+/tokens
+/tokens/*
 packages/cli/config.json
 config.json
 .yarnrc.yml
@@ -38,3 +42,4 @@ yarn-error.log
 .npmrc
 # Local Netlify folder
 .netlify
+.secrets
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,107 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [0.1.17](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.16...v0.1.17) (2023-01-13)
+
+
+### Features
+
+* mod de starters para habiltar portal ([eceb170](https://github.com/leifermendez/bot-whatsapp/commit/eceb170df03721dca4183b658c863b94fa04bc84))
+
+
+### Bug Fixes
+
+* **ci:** pre-release ([aaec075](https://github.com/leifermendez/bot-whatsapp/commit/aaec0751408ab49483d428810d94aaf7d46acb94))
+* correccion en starters app.js para portal QR ([f430380](https://github.com/leifermendez/bot-whatsapp/commit/f430380b4f23d41702395c96c628bf13bf443278))
+* **starters:** :zap: added dockerfile ([230981e](https://github.com/leifermendez/bot-whatsapp/commit/230981e2676361149cb2a99def7f705e75009260))
+
+### [0.1.16](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.15...v0.1.16) (2023-01-11)
+
+### [0.1.15](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.14...v0.1.15) (2023-01-11)
+
+### [0.1.14](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.13...v0.1.14) (2023-01-11)
+
+### [0.1.13](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.12...v0.1.13) (2023-01-11)
+
+### [0.1.12](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.10...v0.1.12) (2023-01-11)
+
+### [0.1.9-pre](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.9...v0.1.9-pre) (2023-01-10)
+
+### [0.1.7-pre-1](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-alpha...v0.1.7-pre-1) (2023-01-10)
+
+### [0.1.7-alpha](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-pre...v0.1.7-alpha) (2023-01-10)
+
+### [0.1.11](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.10...v0.1.11) (2023-01-11)
+
+### [0.1.9-pre](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.9...v0.1.9-pre) (2023-01-10)
+
+### [0.1.7-pre-1](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-alpha...v0.1.7-pre-1) (2023-01-10)
+
+### [0.1.7-alpha](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-pre...v0.1.7-alpha) (2023-01-10)
+
+### [0.1.10](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.8...v0.1.10) (2023-01-11)
+
+
+### Bug Fixes
+
+* :fire: update qr package ([ecde23f](https://github.com/leifermendez/bot-whatsapp/commit/ecde23fdea65def209aa874af35a3f293e6b1a91))
+
+### [0.1.8](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-pre...v0.1.8) (2023-01-10)
+
+### [0.1.7](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.7-pre...v0.1.7) (2023-01-10)
+
+### [0.1.6](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.5...v0.1.6) (2023-01-10)
+
+
+### Features
+
+* :zap: new portal web for qr scan ([cb2e869](https://github.com/leifermendez/bot-whatsapp/commit/cb2e8692a3f94c8b24993cd11dd564f094b0e4ef))
+* :zap: new portal web for qr scan ([9e93795](https://github.com/leifermendez/bot-whatsapp/commit/9e93795e6fce38890045389da95184fef1fbe0da))
+* :zap: new portal web for qr scan ([3c178ea](https://github.com/leifermendez/bot-whatsapp/commit/3c178ea113b140535a51f5dcd521dbb66251670e))
+* :zap: new portal web for qr scan ([1f1f564](https://github.com/leifermendez/bot-whatsapp/commit/1f1f564f4e2e3aa13b84de500fe215e0c45c2770))
+* :zap: new portal web for qr scan ([3de5f4b](https://github.com/leifermendez/bot-whatsapp/commit/3de5f4b77a10e30632ff7555f5af5d8e93cb2019))
+* :zap: qr code filename ([d794f60](https://github.com/leifermendez/bot-whatsapp/commit/d794f604ac8a835e523709dbf18c9b1609bbd00e))
+* :zap: qr portal ([246ecdc](https://github.com/leifermendez/bot-whatsapp/commit/246ecdc11a8c4e652867c842b612dc4ce73f9828))
+* :zap: qr portal ([af8b401](https://github.com/leifermendez/bot-whatsapp/commit/af8b401d075e1c35065589ede61476461ce86b4d))
+* agregamos  dockerfile y webserver a starters ([f9e3bbc](https://github.com/leifermendez/bot-whatsapp/commit/f9e3bbc6655060408e4fdbe1d7e920c2ed4fca53))
+
+
+### Bug Fixes
+
+* :zap: add Dockerfile, starter ([4e0d33c](https://github.com/leifermendez/bot-whatsapp/commit/4e0d33c6bb46ad259774f6d0c38c6c0b5f8ca4a9))
+* :zap: fix inject port args ([20f752e](https://github.com/leifermendez/bot-whatsapp/commit/20f752e6c1b1f7d11948fc4f2f8950f7834df7d9))
+* :zap: fix inject port args ([7a23eb0](https://github.com/leifermendez/bot-whatsapp/commit/7a23eb0cc6f93ec21c5ab34e46981ae7a93f42ff))
+* **provider:** :zap: fix send image baileys ([2ddea54](https://github.com/leifermendez/bot-whatsapp/commit/2ddea5468d235035478d4e91e63c821da19da179))
+* **provider:** :zap: fix send image baileys ([391e11c](https://github.com/leifermendez/bot-whatsapp/commit/391e11ce738cd64792b5237d69f3739b0263c198))
+* **provider:** :zap: fix send image baileys ([5d10cb9](https://github.com/leifermendez/bot-whatsapp/commit/5d10cb9026da60043e9a2f86117ebb04d0631a3f))
+* **provider:** fix error docker as root user ([5a033da](https://github.com/leifermendez/bot-whatsapp/commit/5a033da83aee1f614120bccf27c9f330500cc7b0))
+
+### [0.1.4](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.5...v0.1.4) (2023-01-10)
+
+
+### Features
+
+* :zap: new portal web for qr scan ([cb2e869](https://github.com/leifermendez/bot-whatsapp/commit/cb2e8692a3f94c8b24993cd11dd564f094b0e4ef))
+* :zap: new portal web for qr scan ([9e93795](https://github.com/leifermendez/bot-whatsapp/commit/9e93795e6fce38890045389da95184fef1fbe0da))
+* :zap: new portal web for qr scan ([3c178ea](https://github.com/leifermendez/bot-whatsapp/commit/3c178ea113b140535a51f5dcd521dbb66251670e))
+* :zap: new portal web for qr scan ([1f1f564](https://github.com/leifermendez/bot-whatsapp/commit/1f1f564f4e2e3aa13b84de500fe215e0c45c2770))
+* :zap: new portal web for qr scan ([3de5f4b](https://github.com/leifermendez/bot-whatsapp/commit/3de5f4b77a10e30632ff7555f5af5d8e93cb2019))
+* :zap: qr code filename ([d794f60](https://github.com/leifermendez/bot-whatsapp/commit/d794f604ac8a835e523709dbf18c9b1609bbd00e))
+* :zap: qr portal ([246ecdc](https://github.com/leifermendez/bot-whatsapp/commit/246ecdc11a8c4e652867c842b612dc4ce73f9828))
+* :zap: qr portal ([af8b401](https://github.com/leifermendez/bot-whatsapp/commit/af8b401d075e1c35065589ede61476461ce86b4d))
+* agregamos  dockerfile y webserver a starters ([f9e3bbc](https://github.com/leifermendez/bot-whatsapp/commit/f9e3bbc6655060408e4fdbe1d7e920c2ed4fca53))
+
+
+### Bug Fixes
+
+* :zap: add Dockerfile, starter ([4e0d33c](https://github.com/leifermendez/bot-whatsapp/commit/4e0d33c6bb46ad259774f6d0c38c6c0b5f8ca4a9))
+* :zap: fix inject port args ([20f752e](https://github.com/leifermendez/bot-whatsapp/commit/20f752e6c1b1f7d11948fc4f2f8950f7834df7d9))
+* :zap: fix inject port args ([7a23eb0](https://github.com/leifermendez/bot-whatsapp/commit/7a23eb0cc6f93ec21c5ab34e46981ae7a93f42ff))
+* **provider:** :zap: fix send image baileys ([2ddea54](https://github.com/leifermendez/bot-whatsapp/commit/2ddea5468d235035478d4e91e63c821da19da179))
+* **provider:** :zap: fix send image baileys ([391e11c](https://github.com/leifermendez/bot-whatsapp/commit/391e11ce738cd64792b5237d69f3739b0263c198))
+* **provider:** :zap: fix send image baileys ([5d10cb9](https://github.com/leifermendez/bot-whatsapp/commit/5d10cb9026da60043e9a2f86117ebb04d0631a3f))
+* **provider:** fix error docker as root user ([5a033da](https://github.com/leifermendez/bot-whatsapp/commit/5a033da83aee1f614120bccf27c9f330500cc7b0))
+
 ### [0.1.3](https://github.com/leifermendez/bot-whatsapp/compare/v0.1.2...v0.1.3) (2023-01-04)


--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/root",
-    "version": "0.1.3",
+    "version": "0.1.17",
    "description": "Bot de wahtsapp open source para MVP o pequeños negocios",
    "main": "app.js",
    "private": true,
@@ -13,12 +13,15 @@
        "contexts:rollup": "rollup --config ./packages/contexts/rollup-contexts.config.js",
        "database:rollup": "rollup --config ./packages/database/rollup-database.config.js",
        "create-bot-whatsapp:rollup": "rollup --config ./packages/create-bot-whatsapp/rollup-create.config.js",
+        "portal:rollup": "rollup --config ./packages/portal/rollup-portal.config.js",
        "format:check": "prettier --check ./packages",
        "format:write": "prettier --write ./packages",
        "fmt.staged": "pretty-quick --staged",
        "lint:check": "eslint ./packages",
        "lint:fix": "eslint --fix ./packages",
-        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup",
+        "build:portal-web": "cd ./packages/portal/ && yarn run build.types && yarn run build.client && yarn run build.server && yarn run lint --fix",
+        "build:full": "yarn run build:portal-web && yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup && yarn run portal:rollup",
+        "build": "yarn run cli:rollup && yarn run bot:rollup && yarn run provider:rollup && yarn run database:rollup && yarn run contexts:rollup && yarn run create-bot-whatsapp:rollup && yarn run portal:rollup",
        "copy.lib": "node ./scripts/move.js",
        "test.unit": "node ./node_modules/uvu/bin.js packages test",
        "test.coverage": "node ./node_modules/c8/bin/c8.js npm run test.unit",
@@ -39,6 +42,7 @@
        "packages/database",
        "packages/provider",
        "packages/contexts",
+        "packages/portal",
        "packages/docs"
    ],
    "keywords": [
@@ -63,6 +67,7 @@
    "devDependencies": {
        "@commitlint/cli": "^17.3.0",
        "@commitlint/config-conventional": "^17.3.0",
+        "@octokit/core": "^4.1.0",
        "@rollup/plugin-commonjs": "^23.0.2",
        "@rollup/plugin-json": "^5.0.1",
        "@rollup/plugin-node-resolve": "^15.0.1",
--- a/packages/bot/core/core.class.js
+++ b/packages/bot/core/core.class.js
@@ -8,6 +8,9 @@ const { createWriteStream } = require('fs')
 const logger = new Console({
    stdout: createWriteStream(`${process.cwd()}/core.class.log`),
 })
+
+const QueuePrincipal = new Queue()
+
 /**
 * [ ] Escuchar eventos del provider asegurarte que los provider emitan eventos
 * [ ] Guardar historial en db
@@ -84,20 +87,40 @@ class CoreClass {
            this.databaseClass.save(ctxByNumber)
        }

+        // 📄 Esta funcion se encarga de enviar un array de mensajes dentro de este ctx
+        const sendFlow = async (messageToSend, numberOrId) => {
+            const queue = []
+            for (const ctxMessage of messageToSend) {
+                const delayMs = ctxMessage?.options?.delay || 0
+                if (delayMs) await delay(delayMs)
+                QueuePrincipal.enqueue(() =>
+                    Promise.all([
+                        this.sendProviderAndSave(numberOrId, ctxMessage),
+                        resolveCbEveryCtx(ctxMessage),
+                    ])
+                )
+            }
+            return Promise.all(queue)
+        }
+
        // 📄 [options: fallBack]: esta funcion se encarga de repetir el ultimo mensaje
-        const fallBack = () => {
+        const fallBack = async () => {
            fallBackFlag = true
-            msgToSend = this.flowClass.find(refToContinue?.keyword, true) || []
-            this.sendFlow(msgToSend, from)
+            await this.sendProviderAndSave(from, refToContinue)
+            QueuePrincipal.queue = []
            return refToContinue
        }

        // 📄 [options: flowDynamic]: esta funcion se encarga de responder un array de respuesta esta limitado a 5 mensajes
        // para evitar bloque de whatsapp
-        const flowDynamic = (listMsg = [], optListMsg = { limit: 3 }) => {
+        const flowDynamic = async (
+            listMsg = [],
+            optListMsg = { limit: 5, fallback: false }
+        ) => {
            if (!Array.isArray(listMsg))
                throw new Error('Esto debe ser un ARRAY')

+            fallBackFlag = optListMsg.fallback
            const parseListMsg = listMsg
                .map(({ body }, index) =>
                    toCtx({
@@ -108,26 +131,38 @@ class CoreClass {
                    })
                )
                .slice(0, optListMsg.limit)
-            msgToSend = parseListMsg
-            this.sendFlow(msgToSend, from)
+            for (const msg of parseListMsg) {
+                await this.sendProviderAndSave(from, msg)
+            }
            return
        }

+        // 📄 Se encarga de revisar si el contexto del mensaje tiene callback o fallback
+        const resolveCbEveryCtx = async (ctxMessage) => {
+            if (prevMsg?.options?.capture) return cbEveryCtx(prevMsg?.ref)
+            if (!ctxMessage?.options?.capture)
+                return await cbEveryCtx(ctxMessage?.ref)
+        }
+
        // 📄 Se encarga de revisar si el contexto del mensaje tiene callback y ejecutarlo
-        const cbEveryCtx = (inRef) => {
-            this.flowClass.allCallbacks[inRef](messageCtxInComming, {
+        const cbEveryCtx = async (inRef) => {
+            if (!this.flowClass.allCallbacks[inRef]) return Promise.resolve()
+            return this.flowClass.allCallbacks[inRef](messageCtxInComming, {
                fallBack,
                flowDynamic,
            })
        }

+        if (prevMsg?.ref) resolveCbEveryCtx(prevMsg)
+
        // 📄 [options: callback]: Si se tiene un callback se ejecuta
-        if (!fallBackFlag) {
-            if (refToContinue?.options?.capture) cbEveryCtx(refToContinue?.ref)
-            for (const ite of this.flowClass.find(body)) {
-                if (!ite?.options?.capture) cbEveryCtx(ite?.ref)
-            }
-        }
+        //TODO AQUI
+        // if (!fallBackFlag) {
+        //     if (prevMsg?.options?.capture) cbEveryCtx(prevMsg?.ref)
+        //     for (const ite of this.flowClass.find(body)) {
+        //         if (!ite?.options?.capture) cbEveryCtx(ite?.ref)
+        //     }
+        // }

        // 📄🤘(tiene return) [options: nested(array)]: Si se tiene flujos hijos los implementa
        if (!fallBackFlag && prevMsg?.options?.nested?.length) {
@@ -138,11 +173,12 @@ class CoreClass {

            msgToSend = this.flowClass.find(body, false, flowStandalone) || []

-            for (const ite of msgToSend) {
-                cbEveryCtx(ite?.ref)
-            }
+            // //TODO AQUI
+            // for (const ite of msgToSend) {
+            //     cbEveryCtx(ite?.ref)
+            // }

-            this.sendFlow(msgToSend, from)
+            sendFlow(msgToSend, from)
            return
        }

@@ -153,13 +189,13 @@ class CoreClass {

            if (['string', 'boolean'].includes(typeCapture) && valueCapture) {
                msgToSend = this.flowClass.find(refToContinue?.ref, true) || []
-                this.sendFlow(msgToSend, from)
+                sendFlow(msgToSend, from)
                return
            }
        }

        msgToSend = this.flowClass.find(body) || []
-        this.sendFlow(msgToSend, from)
+        sendFlow(msgToSend, from)
    }

    /**
@@ -176,18 +212,6 @@ class CoreClass {
        ])
    }

-    sendFlow = async (messageToSend, numberOrId) => {
-        const queue = []
-        for (const ctxMessage of messageToSend) {
-            const delayMs = ctxMessage?.options?.delay || 0
-            if (delayMs) await delay(delayMs)
-            Queue.enqueue(() =>
-                this.sendProviderAndSave(numberOrId, ctxMessage)
-            )
-        }
-        return Promise.all(queue)
-    }
-
    /**
     * @private
     * @param {*} message
--- a/packages/bot/package.json
+++ b/packages/bot/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/bot",
-    "version": "0.0.41-alpha.0",
+    "version": "0.0.66-alpha.0",
    "description": "",
    "main": "./lib/bundle.bot.cjs",
    "scripts": {
@@ -28,5 +28,9 @@
    },
    "dependencies": {
        "dotenv": "^16.0.3"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/bot"
    }
 }
--- a/packages/bot/rollup-bot.config.js
+++ b/packages/bot/rollup-bot.config.js
@@ -10,6 +10,7 @@ module.exports = [
            banner: banner['banner.output'].join(''),
            file: join(__dirname, 'lib', 'bundle.bot.cjs'),
            format: 'cjs',
+            sourcemap: true,
        },
        plugins: [commonjs(), nodeResolve()],
    },
--- a/packages/bot/utils/queue.js
+++ b/packages/bot/utils/queue.js
@@ -1,8 +1,8 @@
 class Queue {
-    static queue = []
-    static pendingPromise = false
+    queue = []
+    pendingPromise = false

-    static enqueue(promise) {
+    enqueue(promise) {
        return new Promise((resolve, reject) => {
            this.queue.push({
                promise,
@@ -13,7 +13,7 @@ class Queue {
        })
    }

-    static dequeue() {
+    dequeue() {
        if (this.workingOnPromise) {
            return false
        }
--- a/packages/cli/check/index.js
+++ b/packages/cli/check/index.js
@@ -1,38 +1,65 @@
 const { red, yellow, green, bgCyan } = require('kleur')
+const { exec } = require('node:child_process')

 const checkNodeVersion = () => {
-    console.log(bgCyan('🚀 Revisando tu Node.js'))
-    const version = process.version
-    const majorVersion = parseInt(version.replace('v', '').split('.').shift())
-    if (majorVersion < 16) {
-        console.error(
-            red(
-                `🔴 Se require Node.js 16 o superior. Actualmente esta ejecutando Node.js ${version}`
-            )
+    return new Promise((resolve, reject) => {
+        console.log(bgCyan('🚀 Revisando tu Node.js'))
+        const version = process.version
+        const majorVersion = parseInt(
+            version.replace('v', '').split('.').shift()
        )
-        process.exit(1)
-    }
-    console.log(green(`Node.js compatible ${version}`))
-    console.log(``)
+        if (majorVersion < 16) {
+            console.error(
+                red(
+                    `🔴 Se require Node.js 16 o superior. Actualmente esta ejecutando Node.js ${version}`
+                )
+            )
+            console.log(``)
+            reject('ERROR_NODE')
+        }
+        console.log(green(`Node.js: ${version} compatible ✅`))
+        console.log(``)
+        resolve()
+    })
 }

 const checkOs = () => {
-    console.log(bgCyan('🙂 Revisando tu sistema operativo'))
-    const os = process.platform
-    if (!os.includes('win32')) {
-        const messages = [
-            `El sistema operativo actual (${os}) posiblemente requiera`,
-            `una configuración adicional referente al puppeteer`,
-            ``,
-            `Recuerda pasar por el WIKI`,
-            `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalación`,
-            ``,
-        ]
+    return new Promise((resolve, reject) => {
+        console.log(bgCyan('🙂 Revisando tu sistema operativo'))
+        const os = process.platform
+        if (!os.includes('win32')) {
+            const messages = [
+                `El sistema operativo actual (${os}) posiblemente requiera`,
+                `una configuración adicional referente al puppeteer`,
+                ``,
+                `Recuerda pasar por el WIKI`,
+                `🔗 https://github.com/leifermendez/bot-whatsapp/wiki/Instalación`,
+                ``,
+            ]

-        console.log(yellow(messages.join(' \n')))
-    }
-
-    console.log(``)
+            console.log(yellow(messages.join(' \n')))
+        }
+        console.log(green(`OS: compatible ✅`))
+        console.log(``)
+        resolve()
+    })
 }

-module.exports = { checkNodeVersion, checkOs }
+const checkGit = () => {
+    return new Promise((resolve, reject) => {
+        console.log(bgCyan('🤓 Revisando GIT'))
+        exec('git --version', (error) => {
+            if (error) {
+                console.error(red(`🔴 Se require instalar GIT`))
+                console.log(``)
+                reject('ERROR_GIT')
+            } else {
+                console.log(green(`Git: Compatible ✅`))
+                console.log(``)
+                resolve()
+            }
+        })
+    })
+}
+
+module.exports = { checkNodeVersion, checkOs, checkGit }
--- a/packages/cli/interactive/index.js
+++ b/packages/cli/interactive/index.js
@@ -1,9 +1,9 @@
 const prompts = require('prompts')
 const { join } = require('path')
-const { yellow, red, cyan, bgMagenta } = require('kleur')
+const { yellow, red, cyan, bgMagenta, bgRed } = require('kleur')
 const { existsSync } = require('fs')
 const { copyBaseApp } = require('../create-app')
-const { checkNodeVersion, checkOs } = require('../check')
+const { checkNodeVersion, checkOs, checkGit } = require('../check')

 const bannerDone = () => {
    console.log(``)
@@ -21,6 +21,22 @@ const bannerDone = () => {
 }

 const startInteractive = async () => {
+    try {
+        console.clear()
+        await checkNodeVersion()
+        checkOs()
+        await checkGit()
+        console.clear()
+        await nextSteps()
+    } catch (e) {
+        console.error(bgRed(`Ups! 🙄 algo no va bien.`))
+        console.error(
+            bgRed(`Revisa los requerimientos minimos en la documentacion`)
+        )
+    }
+}
+
+const nextSteps = async () => {
    const questions = [
        {
            type: 'text',
@@ -58,9 +74,6 @@ const startInteractive = async () => {
        },
    ]

-    console.clear()
-    checkNodeVersion()
-    checkOs()
    const onCancel = () => {
        console.log('¡Proceso cancelado!')
        return true
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/cli",
-    "version": "0.0.48-alpha.0",
+    "version": "0.0.72-alpha.0",
    "description": "",
    "main": "index.js",
    "devDependencies": {
@@ -15,5 +15,9 @@
    ],
    "bin": {
        "bot": "./bin/cli.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/cli"
    }
 }
--- a/packages/contexts/package.json
+++ b/packages/contexts/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/contexts",
-    "version": "0.0.1",
+    "version": "0.0.16-alpha.0",
    "description": "",
    "main": "./lib/bundle.contexts.cjs",
    "files": [
@@ -13,5 +13,9 @@
    },
    "dependencies": {
        "@bot-whatsapp/bot": "*"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/contexts"
    }
 }
--- a/packages/contexts/src/dialogflow/dialogflow.class.js
+++ b/packages/contexts/src/dialogflow/dialogflow.class.js
@@ -97,13 +97,21 @@ class DialogFlowContext extends CoreClass {
            })

            customPayload = {
-                media: fields?.media?.stringValue,
-                buttons: mapButtons,
+                options: {
+                    media: fields?.media?.stringValue,
+                    buttons: mapButtons,
+                },
            }
+
+            const ctxFromDX = {
+                ...customPayload,
+                answer: fields?.answer?.stringValue,
+            }
+            this.sendFlow([ctxFromDX], from)
+            return
        }

        const ctxFromDX = {
-            ...customPayload,
            answer: queryResult?.fulfillmentText,
        }

--- 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.59-alpha.0",
+    "version": "0.0.93-alpha.0",
    "description": "",
    "main": "./lib/bundle.create-bot-whatsapp.cjs",
    "files": [
@@ -11,5 +11,9 @@
    "bin": "./bin/create.js",
    "dependencies": {
        "@bot-whatsapp/cli": "*"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/create-bot-whatsapp"
    }
 }
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/database",
-    "version": "0.0.40-alpha.0",
+    "version": "0.0.64-alpha.0",
    "description": "Esto es el conector a  mysql, pg, mongo",
    "main": "./lib/mock/index.cjs",
    "keywords": [],
@@ -19,5 +19,9 @@
        "./mongo": "./lib/mongo/index.cjs",
        "./json": "./lib/json/index.cjs",
        "./mysql": "./lib/mysql/index.cjs"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/database"
    }
 }
--- a/packages/docs/src/components/widgets/Hero.tsx
+++ b/packages/docs/src/components/widgets/Hero.tsx
@@ -47,13 +47,20 @@ export default component$(() => {
                                            npm create bot-whatsapp@latest
                                        </code>
                                    </div>
-                                    <div class="flex w-full sm:w-auto">
+                                    <div class="flex w-full sm:w-auto gap-3">
                                        <a
                                            href="/docs"
                                            class="btn  bg-gray-50 dark:bg-transparent"
                                        >
                                            Ver documentación
                                        </a>
+                                        <a
+                                            target={'_blank'}
+                                            href="https://youtu.be/DEIyGyJNGa8"
+                                            class="btn  bg-gray-50 dark:bg-transparent"
+                                        >
+                                            Ver video
+                                        </a>
                                    </div>
                                </div>
                            </div>
--- a/packages/docs/src/routes/docs/flows/index.mdx
+++ b/packages/docs/src/routes/docs/flows/index.mdx
@@ -1,6 +1,6 @@
 import Navigation from '../../../components/widgets/Navigation'

-# Flow (Flujos)
+# Flow

 Los flujos hace referencia al hecho de construir un flujo de conversion. Esto es un flow podemos observar que estan presente dos metodos importantes **addKeyword** y el **addAnswer**.

@@ -23,6 +23,142 @@ const flowPrincipal = addKeyword(['hola', 'alo'])

 ---

+## addKeyword()
+
+Esta funcion se utliza para iniciar un flujo de conversion. <br /> Recibe un `string` o un `array`
+de string `['hola','buenas']`.
+
+**Opciones**
+
+-   sensitive: Sensible a mayusculas y minusculas por defecto `false`
+
+```js
+const { addKeyword } = require('@bot-whatsapp/bot')
+
+const flowString = addKeyword('hola')
+
+const flowArray = addKeyword(['hola', 'alo'])
+
+const flowSensitive = addKeyword(['hola', 'alo'], {
+    sensitive: true,
+})
+```
+
+---
+
+## addAnswer()
+
+Esta funcion se utliza para responder un mensaje despues del `addKeyword()`
+
+**Opciones**
+
+-   delay: 0 (milisegundos)
+-   media: url de imagen
+-   buttons: array `[{body:'Boton1'}, {body:'Boton2'}, {body:'Boton3'}]`
+-   capture: false (para esperar respuesta)
+-   child: Objecto tipo flujo o arra de flujos hijos
+
+```js
+const { addKeyword } = require('@bot-whatsapp/bot')
+
+const flowString = addKeyword('hola').addAnswer(
+    'Este mensaje se enviara 1 segundo despues',
+    {
+        delay: 1000,
+    }
+)
+
+const flowString = addKeyword('hola').addAnswer(
+    'Este mensaje envia una imagen',
+    {
+        media: 'https://i.imgur.com/0HpzsEm.png',
+    }
+)
+
+const flowString = addKeyword('hola').addAnswer(
+    'Este mensaje envia tres botones',
+    {
+        buttons: [
+            { body: 'Boton 1' },
+            { body: 'Boton 2' },
+            { body: 'Boton 3' },
+        ],
+    }
+)
+
+const flowString = addKeyword('hola').addAnswer(
+    'Este mensaje espera una respueta del usuario',
+    {
+        capture: true,
+    }
+)
+```
+
+---
+
+## ctx
+
+Este argumento se utiliza para obtener el contexto de la conversación
+
+```js
+const { addKeyword } = require('@bot-whatsapp/bot')
+
+const flowString = addKeyword('hola').addAnswer(
+    'Indica cual es tu email',
+    null,
+    (ctx) => {
+        console.log('👉 Informacion del contexto: ', ctx)
+    }
+)
+```
+
+---
+
+## fallBack()
+
+Esta funcion se utliza para volver a enviar el ultimo mensaje abajo un ejemplo.
+En el ejemplo de abajo esperamos que el usuario ingrese un mensaje que contenga `@` sino contiene
+se repetira el mensaje `Indica cual es tu email`
+
+```js
+const { addKeyword } = require('@bot-whatsapp/bot')
+
+const flowString = addKeyword('hola').addAnswer(
+    'Indica cual es tu email',
+    null,
+    (ctx, { fallBack }) => {
+        if (!ctx.body.includes('@')) return fallBack()
+    }
+)
+```
+
+---
+
+## flowDynamic()
+
+Esta funcion se utliza para devolver mensajes dinamicos que pueden venir de una API o Base de datos.
+La funcion recibe un array que debe contener la siguiente estrucutura:
+
+`[{body:'Mensaje}, {body:'Mensaje2}]`
+
+```js
+const { addKeyword } = require('@bot-whatsapp/bot')
+
+const flowString = addKeyword('hola')
+    .addAnswer('Indica cual es tu email', null, async (ctx, {flowDynamic}) => {
+        const mensajesDB = () => {
+            const categories = db.find(...)
+            const mapDatos = categories.map((c) => ({body:c.name}))
+            return mapDatos
+        }
+        await flowDynamic(mensajesDB())
+    })
+
+
+```
+
+---
+
 <Navigation
    pages={[
        { name: 'Conceptos', link: '/docs/essential' },
--- a/packages/docs/src/routes/docs/providers/index.mdx
+++ b/packages/docs/src/routes/docs/providers/index.mdx
@@ -1,7 +1,7 @@
 import Alert from '../../../components/widgets/Alert'
 import Navigation from '../../../components/widgets/Navigation'

-# Provider (Proveedor)
+# Proveedores

 <Alert>
    ⚡ Dependiendo del tipo de proveedor que utlices puede que necesites pasar
@@ -33,9 +33,21 @@ Los proveedores disponibles hasta el momento son los siguientes:

 ---

+### Twilio: Configuración
+
+Estamos trabajando en el apartado de la documentación lo más claro posible. Puedes encontrar los [detalles aquí](/docs/providers/twilio)
+
+---
+
+### Meta: Configuración
+
+Estamos trabajando en el apartado de la documentación lo más claro posible. Puedes encontrar los [detalles aquí](/docs/providers/meta)
+
+---
+
 <Navigation
    pages={[
-        { name: 'Conversaciones', link: '/docs/flows' },
+        { name: 'Conversaciones', link: '/docs/providers' },
        { name: 'Base de datos', link: '/docs/database' },
    ]}
 />
--- a/packages/docs/src/routes/docs/providers/meta/index.mdx
+++ b/packages/docs/src/routes/docs/providers/meta/index.mdx
@@ -0,0 +1,159 @@
+import Alert from '../../../../components/widgets/Alert'
+import Navigation from '../../../../components/widgets/Navigation'
+
+# Meta
+
+La Plataforma de WhatsApp Business permite a medianas y grandes empresas comunicarse con sus clientes a gran escala.
+Puedes iniciar conversaciones con clientes en apenas unos minutos, enviarles notificaciones de atención al cliente o actualizaciones de compras, ofrecerles un nivel de servicio personalizado y
+prestarles ayuda a través del canal que ellos prefieran.
+
+### Requerimientos
+
+-   Registrar una cuenta de [facebook developers](https://developers.facebook.com/apps)
+
+---
+
+### Requerimientos
+
+Debes crear una aplicación nueva. Para ello haz clic en el botón **Crear aplicación**
+
+![](https://i.imgur.com/DKgjwj9.png)
+
+---
+
+En esta pantalla debes de seleccionar **Empresa o Business**
+
+![](https://i.imgur.com/tapmpMk.png)
+
+---
+
+En el siguiente paso debes escribir un nombre al tu aplicación también colocar un email de contacto y seleccionar la aplicación de Test Business
+
+![](https://i.imgur.com/cfHLJTJ.png)
+
+---
+
+Ahora dirígete a la sección de Ajustes de WhatsApp.
+
+![](https://i.imgur.com/37gMMM5.png)
+
+---
+
+Está la parte donde encontraras el token acceso y también puedes ver el número **desde donde** se envía los mensajes de WhatsApp
+y **a donde** se va a enviar.
+Como estás en la versión de prueba, deberás dar de alta los números a los que quieres enviar.
+
+![](https://i.imgur.com/bkSAZn2.png)
+
+---
+
+En esta misma página puedes encontrar el apartado de **Webhook** que pronto necesitaremos usar
+
+![](https://i.imgur.com/L3PRcj7.png)
+
+---
+
+En el **archivo principal** del bot donde estás implementando la función del adaptador de meta vas a colocar los siguientes datos:
+
+-   **numberId:** Lo puedes encontrar en la pagina anterior
+-   **jwtToken:** Lo puedes encontrar en la pagina anterior
+-   **verifyToken:** Puedes escribir lo que quieras es como una palabra clave
+
+<Alert>
+    En el ejemplo de abajo puedes ver como una sugerencia de como puede ser
+    utilizando variables de entorno
+</Alert>
+
+```js
+const main = async () => {
+    const adapterDB = new MockAdapter()
+    const adapterFlow = createFlow([flowPrincipal])
+
+    const adapterProvider = createProvider(MetaProvider, {
+        jwtToken: process.env.JWTOKEN, //EAARBW3ZBGU0UBAACDjtQIzI8JuEa.............
+        numberId: process.env.NUMBER_ID, //103975305758520
+        verifyToken: process.env.VERIFY_TOKEN, //LO_QUE_SEA
+    })
+
+    createBot({
+        flow: adapterFlow,
+        provider: adapterProvider,
+        database: adapterDB,
+    })
+}
+
+main()
+```
+
+---
+
+Luego de ejecutar el bot encontraras un mensaje en la consola similar al siguiente.
+Donde podrás encontrar la URL para tu **webhook**
+
+```shell
+$ npm start
+
+> bot-whatsapp-base-meta-memory@1.0.0 start
+> node app.js
+
+
+[meta]: Agregar esta url "WHEN A MESSAGE COMES IN"
+[meta]: POST http://localhost:3000/webhook
+[meta]: Más información en la documentacion
+```
+
+---
+
+## ¿Ahora que hago?
+
+Podrás observar que el bot inicia un servicio HTTP (endpoint) que debe estar en un servidor en linea para que puedas conectarlo con Meta.
+
+---
+
+### Opción 1:
+
+Puedes hacer pruebas en local atrevés de un servidor proxy tunnel. 
+Descarga **[ngork](https://ngrok.com/download)** es una herramienta gratuita que nos ayudara con esto.
+
+![](https://i.imgur.com/TjjBtRh.png)
+
+---
+
+Esto genera una URL en línea que podemos usar en la parte de **WebHook** de Meta
+
+![](https://i.imgur.com/NXHMDsf.png)
+
+---
+
+![](https://i.imgur.com/tpov3D1.png)
+
+---
+
+![](https://i.imgur.com/haRGylR.png)
+
+---
+
+![](https://i.imgur.com/cMaIzeC.png)
+
+---
+
+### Opción 2:
+
+Si ya tienes desplegado tu bot en un servidor tienes que obtener la IP publica o subdominio que te proporcionaron. **Ejemplo** si estas usando
+[Railway](https://railway.app/) puedes ir a la seccion de ajustes y generar un subdominio. Ya tendriamos el **WebHook**
+`https://base-twilio-memory-production.up.railway.app/twilio-hook`
+
+![](https://i.imgur.com/Yg2BYqB.png)
+
+---
+
+![](https://i.imgur.com/dIbyEwp.png)
+
+---
+
+<Navigation
+    pages={[
+        { name: 'Proveedores', link: '/docs/providers' },
+        { name: 'Meta', link: '/docs/providers/meta' },
+    ]}
+/>
--- a/packages/docs/src/routes/docs/providers/twilio/index.mdx
+++ b/packages/docs/src/routes/docs/providers/twilio/index.mdx
@@ -0,0 +1,152 @@
+import Alert from '../../../../components/widgets/Alert'
+import Navigation from '../../../../components/widgets/Navigation'
+
+# Twilio
+
+Twilio es una plataforma de desarrollo que permite a los desarrolladores construir aplicaciones de comunicación en la nube y sistemas web. Las API de comunicaciones de Twilio permiten a las empresas proporcionar la experiencia de comunicación adecuada para sus clientes dentro de la web y las aplicaciones móviles. Al usar las API de Twilio, los desarrolladores pueden agregar rápidamente esta funcionalidad a una aplicación, como mensajes de voz, videollamadas, mensajes de texto y más.
+
+<Alert>
+    Twilio te proporciona una cuenta **Sandbox** para que puedas probar
+    gratuitamente el servicio
+</Alert>
+
+### Requerimientos
+
+-   Registrar una cuenta de [twilio](https://www.twilio.com/try-twilio)
+
+---
+
+### Requerimientos
+
+Debemos aceptar los términos y condiciones y luego activar la cuenta sandbox
+
+![](https://i.imgur.com/53RyhZD.png)
+
+---
+
+Observamos que ahora tenemos un número de WhatsApp y una frase. El número proporcionado es un **número de pruebas** que te ofrece Twilio, luego que actives un plan de pago puedes comprar un número para tu uso. 
+Guarda ese número como un contacto de WhatsApp en tu móvil y después envíale el mensaje que te asignan. En el ejemplo de la pantalla sale **join score-state**
+
+![](https://i.imgur.com/Eb69grk.png)
+
+---
+
+Luego Twilio te responde con un mensaje confirmando la verificación de la conexión. **Este paso solo es necesario cuando estás en modo Sandbox.**
+
+![](https://i.imgur.com/cTWNxBF.png)
+
+---
+
+Ahora dirígete a la sección de Ajustes de WhatsApp ubicada en la consola de Twilio.
+
+![](https://i.imgur.com/UQG8LkW.png)
+
+---
+
+En esta sección puedes configurar los **Webhook** que conectaran con el chatbot.
+
+**¿No sabes cuál es tu link?** continúa leyendo esta guía más adelante entenderás
+
+![](https://i.imgur.com/WovZGPm.png)
+
+---
+
+También necesitarás el **Account SID y Auth Token** estos datos los consigues [console.twilio.com](https://console.twilio.com).
+
+**¿Que hago con estos datos?** guardalos o tenlos ubicados porque los necesitaremos en las siguientes pantallas
+
+![](https://i.imgur.com/RxlxEEm.png)
+
+---
+
+En el **archivo principal** del bot donde estás implementando la función del adaptador de twilio vas a colocar los siguientes datos:
+
+-   **ACC_SID:** Lo encontraras en console.twilio puedes ver la pantalla anterior
+-   **ACC_TOKEN:** Lo encontraras en console.twilio puedes ver la pantalla anterior
+-   **ACC_VENDOR:** Es el numero de whatsapp (si ya tienes el plan de pago de Twilio usa el numero que compraste), si aun estas en modo
+    sandbox utliza el numero proporcionado en el paso numero 2
+
+<Alert>
+    En el ejemplo de abajo puedes ver como una sugerencia de como puede ser
+    utilizando variables de entorno
+</Alert>
+
+```js
+const main = async () => {
+    const adapterDB = new MockAdapter()
+    const adapterFlow = createFlow([flowPrincipal])
+
+    const adapterProvider = createProvider(TwilioProvider, {
+        accountSid: process.env.ACC_SID, //AC4695aa720b4d700a***************
+        authToken: process.env.ACC_TOKEN, //3f6fae09f7a1c3534***************
+        vendorNumber: process.env.ACC_VENDOR, //+14155238886
+    })
+
+    createBot({
+        flow: adapterFlow,
+        provider: adapterProvider,
+        database: adapterDB,
+    })
+}
+```
+
+---
+
+Luego de ejecutar el bot encontraras un mensaje en la consola similar al siguiente.
+Donde podrás encontrar la URL para tu **webhook**
+
+```shell
+$ npm start
+
+> bot-whatsapp-base-twilio-memory@1.0.0 start
+> node app.js
+
+
+[Twilio]: Agregar esta url "WHEN A MESSAGE COMES IN"
+[Twilio]: POST http://localhost:3000/twilio-hook
+[Twilio]: Más información en la documentacion
+```
+
+---
+
+## ¿Ahora que hago?
+
+Podrás observar que el bot inicia un servicio HTTP (endpoint) que debe estar en un servidor en linea para que puedas conectarlo con Twilio.
+
+---
+
+### Opción 1:
+
+Puedes hacer pruebas en local atrevés de un servidor proxy tunnel. 
+Descarga **[ngork](https://ngrok.com/download)** es una herramienta gratuita que nos ayudara con esto.
+
+![](https://i.imgur.com/TjjBtRh.png)
+
+---
+
+Esto genera una URL en línea que podemos usar en la parte de **WebHook** de Twilio
+
+![](https://i.imgur.com/S9zXROt.png)
+
+---
+
+### Opción 2:
+
+Si ya tienes desplegado tu bot en un servidor tienes que obtener la IP publica o subdominio que te proporcionaron. **Ejemplo** si estas usando
+[Railway](https://railway.app/) puedes ir a la seccion de ajustes y generar un subdominio. Ya tendriamos el **WebHook**
+`https://base-twilio-memory-production.up.railway.app/twilio-hook`
+
+![](https://i.imgur.com/Yg2BYqB.png)
+
+---
+
+![](https://i.imgur.com/dpv6RTR.png)
+
+---
+
+<Navigation
+    pages={[
+        { name: 'Proveedores', link: '/docs/providers' },
+        { name: 'Meta', link: '/docs/providers/meta' },
+    ]}
+/>
--- a/packages/docs/src/routes/docs/requirements/index.mdx
+++ b/packages/docs/src/routes/docs/requirements/index.mdx
@@ -4,14 +4,8 @@ import Navigation from '../../../components/widgets/Navigation'

 A continuación se describen los puntos técnicos que debes de tener en cuenta antes de trabajar con esta herramienta

-   Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
-
---
-
-## ¿Como instalar Node?
-
-   **Windows**: [Ver video](https://youtu.be/xRXHQlqA3Ak?t=376). Necesita ayuda para instalar Node en Windows. A continuación te comparto un video en el minuto exacto donde explico como instalar.
-   **Ubuntu**: Te comparto un recurso de **[Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es)** donde explica como instalar node en Ubuntu.
+-   Node v16 o superior - **[descargar node](https://nodejs.org/es/download/)**
+-   Git - **[descargar Git](https://git-scm.com/download/win)**

 ---

@@ -26,6 +20,34 @@ v18.12.1

 ---

+## ¿Como instalar Node?
+
+-   **Windows**: [Ver video](https://youtu.be/xRXHQlqA3Ak?t=376). Si necesitas ayuda para instalar Node en Windows. A continuación te comparto un video en el minuto exacto donde explico como instalar.
+-   **Ubuntu**: Te comparto un recurso de **[Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es)** donde explica como instalar node en Ubuntu.
+
+---
+
+## ¿Como saber que tengo Git?
+
+Solo debes ejecutar el siguiente comando y esperar que te mande la versión que tienes instalada, si te manda un error de comando no reconocido es que no lo tienes instalado.
+
+```shell
+$ git -v
+git
+```
+
+---
+
+## ¿Como instalar Git?
+
+-   Solo es necesario instalar Git si estás usando **Windows**, ya que Mac y Linux lo traen preinstalado.
+-   Lo puedes descargar desde esta **[liga](https://git-scm.com/download/win)** .
+-   Descarga la versión necesaria para tu sistema operativo (32-bit o 64-bit).
+-   Una vez terminada la descarga, ejecuta el archivo descargado y dale "Siguiente" en todas las pantallas.
+-   Haz clic en el botón de "Finalizar".
+
+---
+
 <Navigation
    pages={[
        { name: 'Vista rápida', link: '/docs' },
--- a/packages/portal/.eslintignore
+++ b/packages/portal/.eslintignore
@@ -0,0 +1,33 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
--- a/packages/portal/.eslintrc.cjs
+++ b/packages/portal/.eslintrc.cjs
@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:qwik/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'prefer-spread': 'off',
+    'no-case-declarations': 'off',
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/consistent-type-imports': 'warn',
+  },
+};
--- a/packages/portal/.gitignore
+++ b/packages/portal/.gitignore
@@ -0,0 +1,38 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases
--- a/packages/portal/.prettierignore
+++ b/packages/portal/.prettierignore
@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules
--- a/packages/portal/README.md
+++ b/packages/portal/README.md
@@ -0,0 +1,71 @@
+# Qwik City App ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## Project Structure
+
+This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
+```
+
+- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
+
+- `src/components`: Recommended directory for components.
+
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
+
+## Add Integrations and deployment
+
+Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
+
+```shell
+npm run qwik add # or `yarn qwik add`
+```
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+
+```shell
+npm start # or `yarn start`
+```
+
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
+
+```shell
+npm run preview # or `yarn preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
+
+```shell
+npm run build # or `yarn build`
+```
+
+## Static Site Generator (Node.js)
+
+```
+npm run build.server
+```
--- a/packages/portal/adaptors/static/vite.config.ts
+++ b/packages/portal/adaptors/static/vite.config.ts
@@ -0,0 +1,19 @@
+import { staticAdaptor } from '@builder.io/qwik-city/adaptors/static/vite'
+import { extendConfig } from '@builder.io/qwik-city/vite'
+import baseConfig from '../../vite.config'
+
+export default extendConfig(baseConfig, () => {
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['@qwik-city-plan'],
+            },
+        },
+        plugins: [
+            staticAdaptor({
+                origin: 'https://bot-whatsapp.netlify.app',
+            }),
+        ],
+    }
+})
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -0,0 +1,52 @@
+{
+    "name": "@bot-whatsapp/portal",
+    "version": "0.0.22-alpha.0",
+    "description": "Portal WEB para escanear QR",
+    "main": "./lib/portal.http.cjs",
+    "scripts": {
+        "build": "qwik build",
+        "build.client": "vite build",
+        "build.preview": "vite build --ssr src/entry.preview.tsx",
+        "build.server": "vite build -c adaptors/static/vite.config.ts",
+        "build.types": "tsc --incremental --noEmit",
+        "deploy": "echo 'Run \"npm run qwik add\" to install a server adaptor'",
+        "dev": "vite --mode ssr",
+        "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+        "fmt": "prettier --write .",
+        "fmt.check": "prettier --check .",
+        "lint": "eslint \"src/**/*.ts*\"",
+        "preview": "qwik build preview && vite preview --open",
+        "start": "vite --open --mode ssr",
+        "qwik": "qwik"
+    },
+    "files": [
+        "./dist/*",
+        "./lib/portal.http.cjs"
+    ],
+    "devDependencies": {
+        "@builder.io/qwik": "0.16.2",
+        "@builder.io/qwik-city": "0.0.128",
+        "@types/eslint": "8.4.10",
+        "@types/node": "^18.11.18",
+        "@types/node-fetch": "latest",
+        "@typescript-eslint/eslint-plugin": "5.48.0",
+        "@typescript-eslint/parser": "5.48.0",
+        "eslint": "8.31.0",
+        "eslint-plugin-qwik": "0.16.2",
+        "node-fetch": "3.3.0",
+        "prettier": "2.8.1",
+        "typescript": "4.9.4",
+        "undici": "5.14.0",
+        "vite": "4.0.3",
+        "vite-tsconfig-paths": "3.5.0"
+    },
+    "dependencies": {
+        "kleur": "^4.1.5",
+        "polka": "^0.5.2",
+        "serve-static": "^1.13.1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/portal"
+    }
+}
--- a/packages/portal/portal.http.js
+++ b/packages/portal/portal.http.js
@@ -0,0 +1,67 @@
+const { join } = require('path')
+const { createReadStream, existsSync } = require('fs')
+const { bgYellow, cyan, yellow } = require('kleur')
+const polka = require('polka')
+
+const HTTP_PORT = process.env.PORT || 3000
+const QR_FILE = process.env.QR_FILE ?? 'bot'
+const PUBLIC_URL =
+    process.env.PUBLIC_URL ??
+    process.env.RAILWAY_STATIC_URL ??
+    'http://localhost'
+
+const dir = [join(__dirname, 'dist'), join(__dirname, '..', 'dist')].find((i) =>
+    existsSync(i)
+)
+const serve = require('serve-static')(dir)
+
+/**
+ * Iniciamos Portal WEB para escanear QR
+ * @param {port:3000, publicSite:'http://mistio.com', qrFile:'qr.png', dir:__dirname}
+ */
+const start = (args) => {
+    const injectArgs = {
+        port: HTTP_PORT,
+        publicSite: PUBLIC_URL,
+        name: QR_FILE,
+        ...args,
+    }
+    const { port, publicSite, name } = injectArgs
+
+    const banner = () => {
+        console.log(``)
+        console.log(bgYellow(`🚩 ESCANEAR QR 🚩`))
+        console.log(cyan(`Existen varias maneras de escanear el QR code`))
+        console.log(
+            cyan(`- Tambien puedes visitar `),
+            yellow(`${publicSite}:${port}`)
+        )
+        console.log(
+            cyan(`- Se ha creado un archivo que finaliza `),
+            yellow('qr.png')
+        )
+        console.log(``)
+    }
+
+    polka()
+        .use(serve)
+        .get('qr.png', (_, res) => {
+            const qrSource = [
+                join(process.cwd(), `${name}.qr.png`),
+                join(__dirname, '..', `${name}.qr.png`),
+                join(__dirname, `${name}.qr.png`),
+            ].find((i) => existsSync(i))
+
+            const qrMark = [
+                join(__dirname, 'dist', 'water-mark.png'),
+                join(__dirname, '..', 'dist', 'water-mark.png'),
+            ].find((i) => existsSync(i))
+            const fileStream = createReadStream(qrSource ?? qrMark)
+
+            res.writeHead(200, { 'Content-Type': 'image/png' })
+            fileStream.pipe(res)
+        })
+        .listen(port, () => banner())
+}
+
+module.exports = start
--- a/packages/portal/public/favicon.svg
+++ b/packages/portal/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>
--- a/packages/portal/public/manifest.json
+++ b/packages/portal/public/manifest.json
@@ -0,0 +1,9 @@
+{
+    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+    "name": "qwik-project-name",
+    "short_name": "Welcome to Qwik",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "A Qwik project app."
+}
--- a/packages/portal/public/robots.txt
+++ b/packages/portal/public/robots.txt
--- a/packages/portal/public/water-mark.png
+++ b/packages/portal/public/water-mark.png
--- a/packages/portal/rollup-portal.config.js
+++ b/packages/portal/rollup-portal.config.js
@@ -0,0 +1,13 @@
+const banner = require('../../config/banner.rollup.json')
+const { join } = require('path')
+const commonjs = require('@rollup/plugin-commonjs')
+
+module.exports = {
+    input: join(__dirname, 'portal.http.js'),
+    output: {
+        banner: banner['banner.output'].join(''),
+        file: join(__dirname, 'lib', 'portal.http.cjs'),
+        format: 'cjs',
+    },
+    plugins: [commonjs()],
+}
--- a/packages/portal/src/components/header/header.css
+++ b/packages/portal/src/components/header/header.css
@@ -0,0 +1,36 @@
+header {
+    display: flex;
+    background: white;
+}
+
+header .logo a {
+    display: inline-block;
+    padding: 10px 10px 7px 20px;
+    text-decoration: none;
+}
+
+header ul {
+    margin: 0;
+    padding: 3px 10px 0 0;
+    list-style: none;
+    flex: 1;
+    text-align: right;
+}
+
+header li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+header li a {
+    display: inline-block;
+    padding: 15px 10px;
+    text-decoration: none;
+    color: #1a1a1a;
+    font-weight: 500;
+}
+
+header li a:hover {
+    text-decoration: underline;
+}
--- a/packages/portal/src/components/header/header.tsx
+++ b/packages/portal/src/components/header/header.tsx
@@ -0,0 +1,47 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import { BotLogo } from '../icons/bot'
+import styles from './header.css?inline'
+
+export default component$(() => {
+    useStylesScoped$(styles)
+
+    return (
+        <header>
+            <div class="logo">
+                <a
+                    href="https://github.com/codigoencasa/bot-whatsapp"
+                    target="_blank"
+                    title="qwik"
+                >
+                    <BotLogo />
+                </a>
+            </div>
+            <ul>
+                <li>
+                    <a
+                        href="https://github.com/codigoencasa/bot-whatsapp"
+                        target="_blank"
+                    >
+                        Docs
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="https://github.com/codigoencasa/bot-whatsapp/tree/main/starters/apps"
+                        target="_blank"
+                    >
+                        Examples
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="https://www.youtube.com/watch?v=1u0TTbjK5bo&list=PL_WGMLcL4jzViIlmyDZPnhAdkc8RXGkFh"
+                        target="_blank"
+                    >
+                        Tutorials
+                    </a>
+                </li>
+            </ul>
+        </header>
+    )
+})
--- a/packages/portal/src/components/icons/bot.css
+++ b/packages/portal/src/components/icons/bot.css
@@ -0,0 +1,12 @@
+.logo {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    align-content: center;
+    color: #1a1a1a;
+}
+
+.logo h1 {
+    font-size: 1.5rem;
+    margin: 0;
+}
--- a/packages/portal/src/components/icons/bot.tsx
+++ b/packages/portal/src/components/icons/bot.tsx
--- a/packages/portal/src/components/icons/qwik.tsx
+++ b/packages/portal/src/components/icons/qwik.tsx
@@ -0,0 +1,38 @@
+export const QwikLogo = () => (
+    <svg
+        width="100"
+        height="35"
+        viewBox="0 0 167 53"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z"
+            fill="black"
+        />
+        <path
+            d="M91.133 11.1426C93.4033 17.4406 95.3242 23.7386 96.993 30.0948C99.205 23.5836 101.087 17.2856 102.542 11.1426H108.15C110.265 17.4406 112.031 23.7386 113.447 30.0948C115.97 23.196 117.949 16.8787 119.404 11.1426H125.71C123.033 20.173 120.064 28.777 116.785 36.8966H109.256C108.402 32.3039 107.044 26.7617 105.22 20.1536C104.056 25.2889 102.445 30.8893 100.33 36.8966H92.8018C90.2793 27.5174 87.5434 18.9522 84.6328 11.1426H91.133Z"
+            fill="black"
+        />
+        <path
+            d="M132.832 7.55758C129.999 7.55758 129.203 6.85996 129.203 3.97257C129.203 1.39523 130.018 0.794495 132.832 0.794495C135.665 0.794495 136.46 1.39523 136.46 3.97257C136.46 6.85996 135.665 7.55758 132.832 7.55758ZM129.649 11.1426H136.053V36.8966H129.649V11.1426Z"
+            fill="black"
+        />
+        <path
+            d="M166.303 11.1426C161.763 17.5956 158.581 21.5295 156.815 22.9441C158.27 23.8937 162.17 28.8933 167.002 36.916H159.628C153.613 27.7887 150.742 23.8549 149.325 23.2542V36.916H142.922V0H149.325V23.2348C150.78 22.169 153.963 18.1382 158.872 11.1426H166.303Z"
+            fill="black"
+        />
+        <path
+            d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z"
+            fill="#18B6F6"
+        />
+        <path
+            d="M45.8232 20.5411L44.038 17.2468L43.1066 15.5609L42.738 14.902L42.6992 14.9408L37.8094 6.47238C36.587 4.34075 34.2974 3.02301 31.8137 3.04239L27.5255 3.15865L14.7384 3.19741C12.313 3.21679 10.101 4.49577 8.87853 6.56927L1.09766 21.9945L15.0101 4.72831L33.2496 24.7656L30.0091 28.0406L31.9495 43.7178L31.9689 43.679V43.7178H31.9301L31.9689 43.7565L33.4824 45.2293L40.8364 52.4187C41.1469 52.7094 41.6514 52.3606 41.4379 51.9924L36.8975 43.0589L44.8142 28.4282L45.0664 28.1375C45.1634 28.0212 45.2604 27.905 45.3381 27.7887C46.8904 25.6764 47.1038 22.8472 45.8232 20.5411Z"
+            fill="#AC7EF4"
+        />
+        <path
+            d="M33.3076 24.6882L15.0099 4.74774L17.61 20.3668L12.9531 24.882L31.9105 43.6985L30.203 28.0794L33.3076 24.6882Z"
+            fill="white"
+        />
+    </svg>
+)
--- a/packages/portal/src/components/qr/qr.css
+++ b/packages/portal/src/components/qr/qr.css
@@ -0,0 +1,12 @@
+div img {
+    display: block;
+    background-color: #f0f0f0;
+    width: 350px;
+    height: 350px;
+    object-fit: contain;
+    border-radius: 10px;
+}
+div {
+    display: flex;
+    justify-content: center;
+}
--- a/packages/portal/src/components/qr/qr.tsx
+++ b/packages/portal/src/components/qr/qr.tsx
@@ -0,0 +1,31 @@
+import {
+    component$,
+    useClientEffect$,
+    useStore,
+    useStylesScoped$,
+} from '@builder.io/qwik'
+import style from './qr.css?inline'
+
+export const QR = component$(() => {
+    useStylesScoped$(style)
+    const state = useStore({
+        count: 0,
+    })
+
+    useClientEffect$(() => {
+        setInterval(() => {
+            state.count++
+        }, 800)
+    })
+
+    return (
+        <div>
+            <img
+                width={350}
+                height={350}
+                src={'qr.png?time=' + state.count}
+                alt="QR"
+            />
+        </div>
+    )
+})
--- a/packages/portal/src/components/router-head/router-head.tsx
+++ b/packages/portal/src/components/router-head/router-head.tsx
@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik'
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
+
+export const RouterHead = component$(() => {
+    const head = useDocumentHead()
+    const loc = useLocation()
+
+    return (
+        <>
+            <title>{head.title}</title>
+
+            <link rel="canonical" href={loc.href} />
+            <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1.0"
+            />
+            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+            {head.meta.map((m) => (
+                <meta {...m} />
+            ))}
+
+            {head.links.map((l) => (
+                <link {...l} />
+            ))}
+
+            {head.styles.map((s) => (
+                <style {...s.props} dangerouslySetInnerHTML={s.style} />
+            ))}
+        </>
+    )
+})
--- a/packages/portal/src/entry.dev.tsx
+++ b/packages/portal/src/entry.dev.tsx
@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import type { RenderOptions } from '@builder.io/qwik'
+import { render } from '@builder.io/qwik'
+import Root from './root'
+
+export default function (opts: RenderOptions) {
+    return render(document, <Root />, opts)
+}
--- a/packages/portal/src/entry.preview.tsx
+++ b/packages/portal/src/entry.preview.tsx
@@ -0,0 +1,20 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node'
+import render from './entry.ssr'
+import qwikCityPlan from '@qwik-city-plan'
+
+/**
+ * The default export is the QwikCity adaptor used by Vite preview.
+ */
+export default createQwikCity({ render, qwikCityPlan })
--- a/packages/portal/src/entry.ssr.tsx
+++ b/packages/portal/src/entry.ssr.tsx
@@ -0,0 +1,28 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import type { RenderToStreamOptions } from '@builder.io/qwik/server'
+import { renderToStream } from '@builder.io/qwik/server'
+import { manifest } from '@qwik-client-manifest'
+import Root from './root'
+
+export default function (opts: RenderToStreamOptions) {
+    return renderToStream(<Root />, {
+        manifest,
+        ...opts,
+        // Use container attributes to set attributes on the html tag.
+        containerAttributes: {
+            lang: 'en-us',
+            ...opts.containerAttributes,
+        },
+    })
+}
--- a/packages/portal/src/global.css
+++ b/packages/portal/src/global.css
@@ -0,0 +1,125 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
+
+:root {
+    --qwik-dark-blue: #1a1a1a;
+    --qwik-light-blue: #349713;
+    --qwik-light-purple: #73da51;
+    --qwik-dark-purple: #3f9622;
+}
+
+body {
+    background-color: #fafafa;
+    font-family: 'Inter', sans-serif, ui-sans-serif, system-ui, -apple-system,
+        BlinkMacSystemFont, sans-serif;
+    padding: 20px 20px 40px 20px;
+}
+
+main {
+    max-width: 760px;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+    overflow: hidden;
+}
+
+h1,
+h2 {
+    margin: 0 0 5px 0;
+}
+
+.lightning {
+    filter: hue-rotate(180deg);
+}
+
+section {
+    padding: 20px;
+}
+
+ul {
+    list-style-type: square;
+    margin: 5px 0 30px 0;
+    padding-left: 25px;
+}
+
+li {
+    padding: 8px 0;
+}
+
+li::marker {
+    color: var(--qwik-light-blue);
+}
+
+a,
+a:visited {
+    color: var(--qwik-dark-blue);
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+table.commands {
+    margin: 0 0 30px 0;
+}
+
+.commands td {
+    padding: 5px;
+}
+
+.commands td:first-child {
+    white-space: nowrap;
+    padding-right: 20px;
+}
+
+code {
+    font-family: Menlo, Monaco, Courier New, monospace;
+    font-size: 0.9em;
+    background-color: rgb(224, 224, 224);
+    padding: 2px 4px;
+    border-radius: 3px;
+    border-bottom: 2px solid #bfbfbf;
+}
+
+footer {
+    padding: 15px;
+    text-align: center;
+    font-size: 0.8em;
+}
+
+footer a {
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+a.mindblow {
+    margin: 0 auto;
+    display: block;
+    background: var(--qwik-dark-purple);
+    padding: 10px 20px;
+    border-radius: 10px;
+    border: 0;
+    color: white;
+    text-decoration: none;
+    font-size: 20px;
+    width: fit-content;
+    border-bottom: 4px solid black;
+    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
+            16 0,
+        auto; /*!emojicursor.app*/
+}
+
+a.mindblow:hover {
+    border-bottom-width: 0px;
+    margin-bottom: 4px;
+    transform: translateY(4px);
+}
--- a/packages/portal/src/root.tsx
+++ b/packages/portal/src/root.tsx
@@ -0,0 +1,29 @@
+import { component$, useStyles$ } from '@builder.io/qwik'
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'
+import { RouterHead } from './components/router-head/router-head'
+
+import globalStyles from './global.css?inline'
+
+export default component$(() => {
+    /**
+     * The root of a QwikCity site always start with the <QwikCityProvider> component,
+     * immediately followed by the document's <head> and <body>.
+     *
+     * Dont remove the `<head>` and `<body>` elements.
+     */
+    useStyles$(globalStyles)
+
+    return (
+        <QwikCityProvider>
+            <head>
+                <meta charSet="utf-8" />
+                <link rel="preconnect" href="https://rsms.me/" />
+                <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+                <RouterHead />
+            </head>
+            <body lang="en">
+                <RouterOutlet />
+            </body>
+        </QwikCityProvider>
+    )
+})
--- a/packages/portal/src/routes/index.css
+++ b/packages/portal/src/routes/index.css
@@ -0,0 +1,23 @@
+.page {
+    display: grid;
+    padding: 1rem;
+    gap: 2rem;
+}
+
+.page .qr-section.links {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.page .btn-link {
+    background: white;
+    box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+        rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+    padding: 10px;
+    border-radius: 5px;
+    font-weight: 600;
+    text-decoration: none;
+    color: #1a1a1a;
+    border: solid 1px #afafaf;
+}
--- a/packages/portal/src/routes/index.tsx
+++ b/packages/portal/src/routes/index.tsx
@@ -0,0 +1,61 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+import { QR } from '~/components/qr/qr'
+
+import style from './index.css?inline'
+
+export default component$(() => {
+    useStylesScoped$(style)
+
+    return (
+        <div class={'page'}>
+            <div class={'qr-section'}>
+                <QR />
+            </div>
+            <div class={'qr-section intructions'}>
+                <h1>Whatsapp QR</h1>
+                <p>
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes, recibir y responder
+                    mensajes de manera automatizada, y hacer un seguimiento de
+                    las interacciones con los clientes. <br /> Además, nuestro
+                    Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div class={'qr-section links'}>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://bot-whatsapp.netlify.app/"
+                    >
+                        Ver documentación
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://www.youtube.com/watch?v=1u0TTbjK5bo&list=PL_WGMLcL4jzViIlmyDZPnhAdkc8RXGkFh"
+                    >
+                        Ver videos
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://opencollective.com/bot-whatsapp"
+                    >
+                        Comprar café
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export const head: DocumentHead = {
+    title: '🤖 Crear chatbot WhatsApp en minutos',
+    meta: [
+        {
+            name: 'description',
+            content: '🤖 Crear chatbot WhatsApp en minutos',
+        },
+    ],
+}
--- a/packages/portal/src/routes/layout.tsx
+++ b/packages/portal/src/routes/layout.tsx
@@ -0,0 +1,20 @@
+import { component$, Slot } from '@builder.io/qwik'
+import Header from '../components/header/header'
+
+export default component$(() => {
+    return (
+        <>
+            <main>
+                <Header />
+                <section>
+                    <Slot />
+                </section>
+            </main>
+            <footer>
+                <a href="https://qwik.builder.io/" target="_blank">
+                    Made with <strong>Qwik</strong>
+                </a>
+            </footer>
+        </>
+    )
+})
--- a/packages/portal/src/routes/service-worker.ts
+++ b/packages/portal/src/routes/service-worker.ts
@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'
+
+setupServiceWorker()
+
+addEventListener('install', () => self.skipWaiting())
+
+addEventListener('activate', () => self.clients.claim())
+
+declare const self: ServiceWorkerGlobalScope
--- a/packages/portal/tsconfig.json
+++ b/packages/portal/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "target": "ES2017",
+        "module": "ES2020",
+        "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@builder.io/qwik",
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "incremental": true,
+        "isolatedModules": true,
+        "outDir": "tmp",
+        "noEmit": true,
+        "types": ["node", "vite/client"],
+        "paths": {
+            "~/*": ["./src/*"]
+        }
+    },
+    "files": ["./.eslintrc.cjs"],
+    "include": ["src"]
+}
--- a/packages/portal/vite.config.ts
+++ b/packages/portal/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { qwikCity } from '@builder.io/qwik-city/vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig(() => {
+    return {
+        plugins: [
+            qwikCity(),
+            qwikVite({
+                entryStrategy: {
+                    type: 'single',
+                },
+            }),
+            tsconfigPaths(),
+        ],
+        preview: {
+            headers: {
+                'Cache-Control': 'public, max-age=600',
+            },
+        },
+    }
+})
--- a/packages/provider/package.json
+++ b/packages/provider/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@bot-whatsapp/provider",
-    "version": "0.0.46-alpha.0",
+    "version": "0.0.70-alpha.0",
    "description": "Esto es el conector a Twilio, Meta, etc...",
    "main": "./lib/mock/index.cjs",
    "keywords": [],
@@ -22,5 +22,9 @@
        "./venom": "./lib/venom/index.cjs",
        "./baileys": "./lib/baileys/index.cjs",
        "./meta": "./lib/meta/index.cjs"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/codigoencasa/bot-whatsapp/tree/main/packages/provider"
    }
 }
--- a/packages/provider/src/baileys/index.js
+++ b/packages/provider/src/baileys/index.js
@@ -4,7 +4,7 @@ const pino = require('pino')
 const rimraf = require('rimraf')
 const mime = require('mime-types')
 const { join } = require('path')
-const { existsSync, createWriteStream } = require('fs')
+const { existsSync, createWriteStream, readFileSync } = require('fs')
 const { Console } = require('console')

 const {
@@ -24,19 +24,18 @@ const logger = new Console({
    stdout: createWriteStream(`${process.cwd()}/baileys.log`),
 })

-const NAME_DIR_SESSION = `sessions`
-const PATH_BASE = join(process.cwd(), NAME_DIR_SESSION)
-
 /**
 * ⚙️ BaileysProvider: Es una clase tipo adaptor
 * que extiende clases de ProviderClass (la cual es como interfaz para sber que funciones rqueridas)
 * https://github.com/adiwajshing/Baileys
 */
 class BaileysProvider extends ProviderClass {
+    globalVendorArgs = { name: `bot` }
    vendor
    saveCredsGlobal = null
-    constructor() {
+    constructor(args) {
        super()
+        this.globalVendorArgs = { ...this.globalVendorArgs, ...args }
        this.initBailey().then()
    }

@@ -44,6 +43,7 @@ class BaileysProvider extends ProviderClass {
     * Iniciar todo Bailey
     */
    initBailey = async () => {
+        const NAME_DIR_SESSION = `${this.globalVendorArgs.name}_sessions`
        const { state, saveCreds } = await useMultiFileAuthState(
            NAME_DIR_SESSION
        )
@@ -70,6 +70,7 @@ class BaileysProvider extends ProviderClass {
                    }

                    if (statusCode === DisconnectReason.loggedOut) {
+                        const PATH_BASE = join(process.cwd(), NAME_DIR_SESSION)
                        rimraf(PATH_BASE, (err) => {
                            if (err) return
                        })
@@ -88,12 +89,15 @@ class BaileysProvider extends ProviderClass {
                if (qr) {
                    this.emit('require_action', {
                        instructions: [
-                            `Debes escanear el QR Code para iniciar session reivsa qr.png`,
+                            `Debes escanear el QR Code para iniciar ${this.globalVendorArgs.name}.qr.png`,
                            `Recuerda que el QR se actualiza cada minuto `,
                            `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
                        ],
                    })
-                    await baileyGenerateImage(qr)
+                    await baileyGenerateImage(
+                        qr,
+                        `${this.globalVendorArgs.name}.qr.png`
+                    )
                }
            })

@@ -137,7 +141,7 @@ class BaileysProvider extends ProviderClass {
                }

                const btnCtx =
-                    payload?.message?.templateButtonReplyMessage
+                    payload?.message?.buttonsResponseMessage
                        ?.selectedDisplayText

                if (btnCtx) payload.body = btnCtx
@@ -167,8 +171,8 @@ class BaileysProvider extends ProviderClass {
    sendMedia = async (number, imageUrl, text) => {
        const fileDownloaded = await baileyDownloadMedia(imageUrl)
        return this.vendor.sendMessage(number, {
-            image: { url: fileDownloaded },
-            text,
+            image: readFileSync(fileDownloaded),
+            caption: text,
        })
    }

@@ -229,20 +233,22 @@ class BaileysProvider extends ProviderClass {
     */

    sendButtons = async (number, text, buttons) => {
-        const numberClean = number.replace('+', '')
+        const numberClean = baileyCleanNumber(number)
+
        const templateButtons = buttons.map((btn, i) => ({
-            index: `${i}`,
-            quickReplyButton: {
-                displayText: btn.body,
-                id: `id-btn-${i}`,
-            },
+            buttonId: `id-btn-${i}`,
+            buttonText: { displayText: btn.body },
+            type: 1,
        }))

-        return this.vendor.sendMessage(`${numberClean}@c.us`, {
+        const buttonMessage = {
            text,
            footer: '',
-            templateButtons: templateButtons,
-        })
+            buttons: templateButtons,
+            headerType: 1,
+        }
+
+        return this.vendor.sendMessage(numberClean, buttonMessage)
    }

    /**
--- a/packages/provider/src/baileys/utils.js
+++ b/packages/provider/src/baileys/utils.js
@@ -15,8 +15,8 @@ const baileyCleanNumber = (number, full = false) => {
 * Hace promesa el write
 * @param {*} base64
 */
-const baileyGenerateImage = async (base64) => {
-    const PATH_QR = `${process.cwd()}/qr.png`
+const baileyGenerateImage = async (base64, name = 'qr.png') => {
+    const PATH_QR = `${process.cwd()}/${name}`
    let qr_svg = qr.image(base64, { type: 'png', margin: 4 })

    const writeFilePromise = () =>
--- a/packages/provider/src/twilio/package.json
+++ b/packages/provider/src/twilio/package.json
@@ -1,5 +1,5 @@
 {
    "dependencies": {
-        "twilio": "3.84.0"
+        "twilio": "3.84.1"
    }
 }
--- a/packages/provider/src/venom/index.js
+++ b/packages/provider/src/venom/index.js
@@ -20,9 +20,11 @@ const logger = new Console({
 * https://github.com/orkestral/venom
 */
 class VenomProvider extends ProviderClass {
+    globalVendorArgs = { name: `bot` }
    vendor
-    constructor() {
+    constructor(args) {
        super()
+        this.globalVendorArgs = { ...this.globalVendorArgs, ...args }
        this.init().then(() => this.initBusEvents())
    }

@@ -30,15 +32,19 @@ class VenomProvider extends ProviderClass {
     * Iniciamos el Proveedor Venom
     */
    init = async () => {
+        const NAME_DIR_SESSION = `${this.globalVendorArgs.name}_sessions`
        try {
            const client = await venom.create(
                {
-                    session: 'session-base',
+                    session: NAME_DIR_SESSION,
                    multidevice: true,
+                    disableSpins: true,
+                    disableWelcome: true,
+                    logger,
+                    logQR: false,
                },
                (base) => this.generateQr(base),
-                undefined,
-                { logQR: false }
+                undefined
            )
            this.vendor = client
        } catch (e) {
@@ -61,12 +67,12 @@ class VenomProvider extends ProviderClass {
        console.clear()
        this.emit('require_action', {
            instructions: [
-                `Debes escanear el QR Code para iniciar session reivsa qr.png`,
+                `Debes escanear el QR Code para iniciar ${this.globalVendorArgs.name}.qr.png`,
                `Recuerda que el QR se actualiza cada minuto `,
                `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
            ],
        })
-        await venomGenerateImage(qr)
+        await venomGenerateImage(qr, `${this.globalVendorArgs.name}.qr.png`)
    }

    /**
--- a/packages/provider/src/venom/utils.js
+++ b/packages/provider/src/venom/utils.js
@@ -10,8 +10,8 @@ const venomCleanNumber = (number, full = false) => {
    return number
 }

-const venomGenerateImage = async (base) => {
-    const PATH_QR = `${process.cwd()}/qr.png`
+const venomGenerateImage = async (base, name = 'qr.png') => {
+    const PATH_QR = `${process.cwd()}/${name}`
    const matches = base.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/)
    if (matches.length !== 3) {
        return new Error('Invalid input string')
--- a/packages/provider/src/web-whatsapp/index.js
+++ b/packages/provider/src/web-whatsapp/index.js
@@ -19,11 +19,23 @@ const logger = new Console({
 * https://github.com/pedroslopez/whatsapp-web.js
 */
 class WebWhatsappProvider extends ProviderClass {
+    globalVendorArgs = { name: `bot` }
    vendor
-    constructor() {
+    constructor(args) {
        super()
+        this.globalVendorArgs = { ...this.globalVendorArgs, ...args }
        this.vendor = new Client({
-            authStrategy: new LocalAuth(),
+            authStrategy: new LocalAuth({
+                clientId: `${this.globalVendorArgs.name}_sessions`,
+            }),
+            puppeteer: {
+                headless: true,
+                args: [
+                    '--no-sandbox',
+                    '--disable-setuid-sandbox',
+                    '--unhandled-rejections=strict',
+                ],
+            },
        })

        const listEvents = this.busEvents()
@@ -60,12 +72,15 @@ class WebWhatsappProvider extends ProviderClass {
            func: async (qr) => {
                this.emit('require_action', {
                    instructions: [
-                        `Debes escanear el QR Code para iniciar session reivsa qr.png`,
+                        `Debes escanear el QR Code para iniciar ${this.globalVendorArgs.name}.qr.png`,
                        `Recuerda que el QR se actualiza cada minuto `,
                        `Necesitas ayuda: https://link.codigoencasa.com/DISCORD`,
                    ],
                })
-                await wwebGenerateImage(qr)
+                await wwebGenerateImage(
+                    qr,
+                    `${this.globalVendorArgs.name}.qr.png`
+                )
            },
        },
        {
--- a/packages/provider/src/web-whatsapp/utils.js
+++ b/packages/provider/src/web-whatsapp/utils.js
@@ -11,8 +11,8 @@ const wwebCleanNumber = (number, full = false) => {
    return number
 }

-const wwebGenerateImage = async (base64) => {
-    const PATH_QR = `${process.cwd()}/qr.png`
+const wwebGenerateImage = async (base64, name = 'qr.png') => {
+    const PATH_QR = `${process.cwd()}/${name}`
    let qr_svg = qr.image(base64, { type: 'png', margin: 4 })

    const writeFilePromise = () =>
--- a/scripts/github.js
+++ b/scripts/github.js
@@ -0,0 +1,47 @@
+const process = require('node:process')
+const { Octokit } = require('@octokit/core')
+
+const [PKG_ARG, GITHUB_TOKEN] = process.argv.slice(2) || [null]
+
+/**
+ * Publicar Release en Github
+ * @param {*} name
+ * @param {*} tag_name
+ * @param {*} auth
+ * @param {*} owner
+ * @param {*} repo
+ */
+const githubGithubRelease = async (
+    name = '',
+    tag_name = '',
+    auth = '',
+    owner = 'codigoencasa',
+    repo = 'bot-whatsapp'
+) => {
+    const octokit = new Octokit({
+        auth,
+    })
+
+    await octokit.request(`POST /repos/${owner}/${repo}/releases`, {
+        owner,
+        repo,
+        tag_name,
+        name,
+        body: 'Description of the release',
+        draft: false,
+        prerelease: false,
+        generate_release_notes: true,
+    })
+}
+
+const main = async () => {
+    if (PKG_ARG) {
+        const githubToken = GITHUB_TOKEN ? GITHUB_TOKEN.split('=').at(1) : null
+        const pkgNumber = PKG_ARG ? PKG_ARG.split('=').at(1) : null
+
+        if (pkgNumber)
+            await githubGithubRelease(`v${pkgNumber}`, pkgNumber, githubToken)
+    }
+}
+
+main()
--- a/scripts/move.js
+++ b/scripts/move.js
@@ -10,10 +10,20 @@ const copyLibPkg = async (pkgName, to) => {
    await fs.copy(FROM, TO)
 }

-Promise.all([
-    copyLibPkg('create-bot-whatsapp', appDir),
-    copyLibPkg('bot', appDir),
-    copyLibPkg('database', appDir),
-    copyLibPkg('provider', appDir),
-    copyLibPkg('contexts', appDir),
-]).then(() => console.log('Todas las librerías copiadas'))
+const listLib = [
+    'create-bot-whatsapp',
+    'bot',
+    'database',
+    'provider',
+    'contexts',
+    'portal',
+]
+
+const main = async () => {
+    for (const iterator of listLib) {
+        await copyLibPkg(iterator, appDir)
+        console.log(`${iterator}: Copiado ✅`)
+    }
+}
+
+main()
--- a/starters/apps/base-baileys-json/Dockerfile
+++ b/starters/apps/base-baileys-json/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-baileys-json/README.md
+++ b/starters/apps/base-baileys-json/README.md
@@ -5,26 +5,8 @@
 </p>


-**Con esta librería, puedes construir flujos automatizados de conversación de manera agnóstica al proveedor de WhatsApp,** configurar respuestas automatizadas para preguntas frecuentes, recibir y responder mensajes de manera automatizada, y hacer un seguimiento de las interacciones con los clientes.  Además, puedes configurar fácilmente disparadores que te ayudaran a expandir las funcionalidades sin límites. **[Ver más informacion](https://bot-whatsapp.netlify.app/)**
+**Con esta librería, puedes construir flujos automatizados de conversación de manera agnóstica al proveedor de WhatsApp,** configurar respuestas automatizadas para preguntas frecuentes, recibir y responder mensajes de manera automatizada, y hacer un seguimiento de las interacciones con los clientes.  Además, puedes configurar fácilmente disparadores que te ayudaran a expandir las funcionalidades sin límites. **[Ver documentación](https://bot-whatsapp.netlify.app/)**

-```js
-const main = async () => {
-    const adapterDB = new MockAdapter()
-    const adapterFlow = createFlow([flowPrincipal])
-
-    const adapterProvider = createProvider(BaileysProvider, {
-        accountSid: process.env.ACC_SID,
-        authToken: process.env.ACC_TOKEN,
-        vendorNumber: process.env.ACC_VENDOR,
-    })
-
-    createBot({
-        flow: adapterFlow,
-        provider: adapterProvider,
-        database: adapterDB,
-    })
-}
-```

 ```
 npm install
--- a/starters/apps/base-baileys-json/app.js
+++ b/starters/apps/base-baileys-json/app.js
@@ -5,84 +5,90 @@ const {
    addKeyword,
 } = require('@bot-whatsapp/bot')

+const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')

-/**
- * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
-
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
    const adapterDB = new JsonFileAdapter()
    const adapterFlow = createFlow([flowPrincipal])
    const adapterProvider = createProvider(BaileysProvider)
+
    createBot({
        flow: adapterFlow,
        provider: adapterProvider,
        database: adapterDB,
    })
+
+    QRPortalWeb()
 }

 main()
--- a/starters/apps/base-baileys-json/package.json
+++ b/starters/apps/base-baileys-json/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-bailey-json",
+    "name": "base-bailey-json",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
@@ -13,6 +13,7 @@
        "@bot-whatsapp/cli": "latest",
        "@bot-whatsapp/database": "latest",
        "@bot-whatsapp/provider": "latest",
+        "@bot-whatsapp/portal": "latest",
        "@adiwajshing/baileys": "4.4.0",
        "mime-types": "2.1.35",
        "wa-sticker-formatter": "4.3.2"
--- a/starters/apps/base-baileys-memory/Dockerfile
+++ b/starters/apps/base-baileys-memory/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-baileys-memory/README.md
+++ b/starters/apps/base-baileys-memory/README.md
@@ -5,26 +5,8 @@
 </p>


-**Con esta librería, puedes construir flujos automatizados de conversación de manera agnóstica al proveedor de WhatsApp,** configurar respuestas automatizadas para preguntas frecuentes, recibir y responder mensajes de manera automatizada, y hacer un seguimiento de las interacciones con los clientes.  Además, puedes configurar fácilmente disparadores que te ayudaran a expandir las funcionalidades sin límites. **[Ver más informacion](https://bot-whatsapp.netlify.app/)**
+**Con esta librería, puedes construir flujos automatizados de conversación de manera agnóstica al proveedor de WhatsApp,** configurar respuestas automatizadas para preguntas frecuentes, recibir y responder mensajes de manera automatizada, y hacer un seguimiento de las interacciones con los clientes.  Además, puedes configurar fácilmente disparadores que te ayudaran a expandir las funcionalidades sin límites. **[Ver documentación](https://bot-whatsapp.netlify.app/)**

-```js
-const main = async () => {
-    const adapterDB = new MockAdapter()
-    const adapterFlow = createFlow([flowPrincipal])
-
-    const adapterProvider = createProvider(BaileysProvider, {
-        accountSid: process.env.ACC_SID,
-        authToken: process.env.ACC_TOKEN,
-        vendorNumber: process.env.ACC_VENDOR,
-    })
-
-    createBot({
-        flow: adapterFlow,
-        provider: adapterProvider,
-        database: adapterDB,
-    })
-}
-```

 ```
 npm install
--- a/starters/apps/base-baileys-memory/app.js
+++ b/starters/apps/base-baileys-memory/app.js
@@ -5,84 +5,90 @@ const {
    addKeyword,
 } = require('@bot-whatsapp/bot')

+const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MockAdapter = require('@bot-whatsapp/database/mock')

-/**
- * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
-
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
    const adapterDB = new MockAdapter()
    const adapterFlow = createFlow([flowPrincipal])
    const adapterProvider = createProvider(BaileysProvider)
+
    createBot({
        flow: adapterFlow,
        provider: adapterProvider,
        database: adapterDB,
    })
+
+    QRPortalWeb()
 }

 main()
--- a/starters/apps/base-baileys-memory/package.json
+++ b/starters/apps/base-baileys-memory/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-bailey-memory",
+    "name": "base-bailey-memory",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
@@ -13,6 +13,7 @@
        "@bot-whatsapp/cli": "latest",
        "@bot-whatsapp/database": "latest",
        "@bot-whatsapp/provider": "latest",
+        "@bot-whatsapp/portal": "latest",
        "@adiwajshing/baileys": "4.4.0",
        "mime-types": "2.1.35",
        "wa-sticker-formatter": "4.3.2"
--- a/starters/apps/base-baileys-mongo/Dockerfile
+++ b/starters/apps/base-baileys-mongo/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-baileys-mongo/app.js
+++ b/starters/apps/base-baileys-mongo/app.js
@@ -5,6 +5,7 @@ const {
    addKeyword,
 } = require('@bot-whatsapp/bot')

+const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')

@@ -27,58 +28,72 @@ const MONGO_DB_NAME = 'db_bot'
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
@@ -93,6 +108,7 @@ const main = async () => {
        provider: adapterProvider,
        database: adapterDB,
    })
+    QRPortalWeb()
 }

 main()
--- a/starters/apps/base-baileys-mongo/package.json
+++ b/starters/apps/base-baileys-mongo/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-bailey-mongo",
+    "name": "base-bailey-mongo",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
@@ -13,6 +13,7 @@
        "@bot-whatsapp/cli": "latest",
        "@bot-whatsapp/database": "latest",
        "@bot-whatsapp/provider": "latest",
+        "@bot-whatsapp/portal": "latest",
        "@adiwajshing/baileys": "4.4.0",
        "mime-types": "2.1.35",
        "mongodb": "^4.12.1",
--- a/starters/apps/base-baileys-mysql/Dockerfile
+++ b/starters/apps/base-baileys-mysql/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-baileys-mysql/app.js
+++ b/starters/apps/base-baileys-mysql/app.js
@@ -5,6 +5,7 @@ const {
    addKeyword,
 } = require('@bot-whatsapp/bot')

+const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')

@@ -28,58 +29,72 @@ const MYSQL_DB_NAME = 'bot'
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
@@ -96,6 +111,7 @@ const main = async () => {
        provider: adapterProvider,
        database: adapterDB,
    })
+    QRPortalWeb()
 }

 main()
--- a/starters/apps/base-baileys-mysql/package.json
+++ b/starters/apps/base-baileys-mysql/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-bailey-mysql",
+    "name": "base-bailey-mysql",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
@@ -13,6 +13,7 @@
        "@bot-whatsapp/cli": "latest",
        "@bot-whatsapp/database": "latest",
        "@bot-whatsapp/provider": "latest",
+        "@bot-whatsapp/portal": "latest",
        "@adiwajshing/baileys": "4.4.0",
        "mime-types": "2.1.35",
        "mysql2": "^2.3.3",
--- a/starters/apps/base-meta-json/Dockerfile
+++ b/starters/apps/base-meta-json/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-meta-json/app.js
+++ b/starters/apps/base-meta-json/app.js
@@ -20,58 +20,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
--- a/starters/apps/base-meta-json/package.json
+++ b/starters/apps/base-meta-json/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-meta-json",
+    "name": "base-meta-json",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
--- a/starters/apps/base-meta-memory/Dockerfile
+++ b/starters/apps/base-meta-memory/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-meta-memory/app.js
+++ b/starters/apps/base-meta-memory/app.js
@@ -20,58 +20,72 @@ const MockAdapter = require('@bot-whatsapp/database/mock')
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
--- a/starters/apps/base-meta-memory/package.json
+++ b/starters/apps/base-meta-memory/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-meta-memory",
+    "name": "base-meta-memory",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
--- a/starters/apps/base-meta-mongo/Dockerfile
+++ b/starters/apps/base-meta-mongo/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-meta-mongo/app.js
+++ b/starters/apps/base-meta-mongo/app.js
@@ -27,58 +27,72 @@ const MONGO_DB_NAME = 'db_bot'
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
--- a/starters/apps/base-meta-mongo/package.json
+++ b/starters/apps/base-meta-mongo/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-meta-mongo",
+    "name": "base-meta-mongo",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
--- a/starters/apps/base-meta-mysql/Dockerfile
+++ b/starters/apps/base-meta-mysql/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-meta-mysql/app.js
+++ b/starters/apps/base-meta-mysql/app.js
@@ -28,58 +28,72 @@ const MYSQL_DB_NAME = 'bot'
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
--- a/starters/apps/base-meta-mysql/package.json
+++ b/starters/apps/base-meta-mysql/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-meta-mysql",
+    "name": "base-meta-mysql",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
--- a/starters/apps/base-twilio-json/Dockerfile
+++ b/starters/apps/base-twilio-json/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:18-bullseye as bot
+WORKDIR /app
+COPY package*.json ./
+RUN npm i
+COPY . .
+ARG RAILWAY_STATIC_URL
+ARG PUBLIC_URL
+ARG PORT
+CMD ["npm", "start"]
--- a/starters/apps/base-twilio-json/app.js
+++ b/starters/apps/base-twilio-json/app.js
@@ -20,58 +20,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
 * 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 flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])

-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-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)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)

 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
    .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)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
    )

 const main = async () => {
--- a/starters/apps/base-twilio-json/package.json
+++ b/starters/apps/base-twilio-json/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "bot-whatsapp-base-twilio-json",
+    "name": "base-twilio-json",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
@@ -11,7 +11,7 @@
    "dependencies": {
        "body-parser": "^1.20.1",
        "polka": "^0.5.2",
-        "twilio": "3.84.0",
+        "twilio": "3.84.1",
        "@bot-whatsapp/bot": "latest",
        "@bot-whatsapp/cli": "latest",
        "@bot-whatsapp/database": "latest",
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>