diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..0d0e52b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["xyc.vscode-mdx-preview"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index ffa60fd..65e097a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,7 @@ "adapter", "ci", "starters", - "conflict" + "conflict", + "contexts" ] } diff --git a/MIGRATION.md b/MIGRATION.md index 8e4d1b4..329ac9b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,9 +2,9 @@ #### Versión (legacy) -En la ***versión (legacy)*** se implementas los flujos de esta manera, en dos archivos independientes. +En la ***versión (legacy)*** se implementaban los flujos de esta manera, en dos archivos independientes. -> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar. +> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar > __`response.json`__ donde se escriben los mensajes a responder. ```json @@ -77,7 +77,7 @@ En la ***versión (legacy)*** se implementas los flujos de esta manera, en dos #### Versión 2 (0.2.X) -En esta versión es mucho más sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado. +En esta versión es mucho más sencillo, abajo encontraras un ejemplo del mismo flujo anteriormente mostrado. ```js //app.js @@ -126,6 +126,86 @@ const flowCatalogo = addKeyword(['imagen', 'foto']) } ``` +#### Flujos hijos + +A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo: + + > Menu Principal (Escoge zapatos o bolsos) + > - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela) + > - Submenu 1.1 (piel) + > - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela) + > - Submenu 2.1 (piel) + +El __submenu 1__ solo se va a disparar cuando el flujo anterior sea el __principal__, e igualmente el __submenu 1.1__, solo cuando el flujo anterior sea el __submenu 1__, ejemplo: + +```js +/** + * Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo: + * + * Menu Principal + * - SubMenu 1 + * - Submenu 1.1 + * - Submenu 2 + * - Submenu 2.1 + * + * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal. + */ +const flowBolsos2 = addKeyword(['bolsos2', '2']) + .addAnswer('🤯 *MUCHOS* bolsos ...') + .addAnswer('y mas bolsos... bla bla') + +const flowZapatos2 = addKeyword(['zapatos2', '2']) + .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.') + .addAnswer('y algunas otras cosas.') + +const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS']) + .addAnswer('🤯 Veo que elegiste zapatos') + .addAnswer('Tengo muchos zapatos...bla bla') + .addAnswer( + ['Manda:', '*(2) Zapatos2*', 'para mas información'], + { capture: true }, + (ctx) => { + console.log('Aqui puedes ver más info del usuario...') + console.log('Puedes enviar un mail, hook, etc..') + console.log(ctx) + }, + [...addChild(flowZapatos2)] + ) + +const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS']) + .addAnswer('🙌 Veo que elegiste bolsos') + .addAnswer('Tengo muchos bolsos...bla bla') + .addAnswer( + ['Manda:', '*(2) Bolsos2*', 'para mas información.'], + { capture: true }, + (ctx) => { + console.log('Aqui puedes ver más info del usuario...') + console.log('Puedes enviar un mail, hook, etc..') + console.log(ctx) + }, + [...addChild(flowBolsos2)] + ) + +/** + * Declarando flujo principal + */ + +const flowPrincipal = addKeyword(['hola', 'ole', 'alo']) + .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?']) + .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...']) + .addAnswer( + ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'], + { capture: true }, + (ctx) => { + console.log('Aqui puedes ver más info del usuario...') + console.log('Puedes enviar un mail, hook, etc..') + console.log(ctx) + }, + [...addChild(flowBolsos), ...addChild(flowZapatos)] + ) +``` + + > Forma parte de este proyecto. - [Discord](https://link.codigoencasa.com/DISCORD) diff --git a/README.md b/README.md index 9054e8d..8e70144 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ -------- 🐤 Tablero de tareas : [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1) -🦊 Documentación: [https://bot-whatsapp.pages.dev/](https://bot-whatsapp.pages.dev/) +🦊 Documentación: [https://bot-whatsapp-codigoencasa.pages.dev/](https://bot-whatsapp-codigoencasa.pages.dev/) Video como hacer PR: https://youtu.be/Lxt8Acob6aU 🚀 __Roadmap:__ [https://github.com/users/leifermendez/projects/4/views/1](https://github.com/users/leifermendez/projects/4/views/1) @@ -42,8 +42,8 @@ Video como hacer PR: https://youtu.be/Lxt8Acob6aU - - Gonzalito87 + + HKong31
Null @@ -52,10 +52,17 @@ Video como hacer PR: https://youtu.be/Lxt8Acob6aU jzvi12
- Null + Zvi + + + Gonzalito87 +
+ Null + + tonyvazgar @@ -83,15 +90,7 @@ Video como hacer PR: https://youtu.be/Lxt8Acob6aU
Yonathan Suarez - - - - jlferrete -
- José Luis Ferrete - - - + diff --git a/packages/bot/core/core.class.js b/packages/bot/core/core.class.js index e545a55..91195c8 100644 --- a/packages/bot/core/core.class.js +++ b/packages/bot/core/core.class.js @@ -84,7 +84,7 @@ class CoreClass { this.databaseClass.save(ctxByNumber) } - // 📄 [options: fallback]: esta funcion se encarga de repetir el ultimo mensaje + // 📄 [options: fallBack]: esta funcion se encarga de repetir el ultimo mensaje const fallBack = () => { fallBackFlag = true msgToSend = this.flowClass.find(refToContinue?.keyword, true) || [] @@ -92,6 +92,27 @@ class CoreClass { 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 }) => { + if (!Array.isArray(listMsg)) + throw new Error('Esto debe ser un ARRAY') + + const parseListMsg = listMsg + .map(({ body }, index) => + toCtx({ + body, + from, + keyword: null, + index, + }) + ) + .slice(0, optListMsg.limit) + msgToSend = parseListMsg + this.sendFlow(msgToSend, from) + return + } + // 📄 Se encarga de revisar si el contexto del mensaje tiene callback y ejecutarlo const cbEveryCtx = (inRef) => { const indexFlow = this.flowClass.findIndexByRef(inRef) @@ -99,6 +120,7 @@ class CoreClass { messageCtxInComming, { fallBack, + flowDynamic, } ) } diff --git a/packages/bot/io/flow.class.js b/packages/bot/io/flow.class.js index 2c18268..cfd4afd 100644 --- a/packages/bot/io/flow.class.js +++ b/packages/bot/io/flow.class.js @@ -8,10 +8,7 @@ class FlowClass { if (!Array.isArray(_flow)) throw new Error('Esto debe ser un ARRAY') this.flowRaw = _flow - this.allCallbacks = _flow - .map((cbIn) => cbIn.ctx.callbacks) - .flat(2) - .map((c, i) => ({ callback: c?.callback, index: i })) + this.getAllCb(this.flowRaw) const mergeToJsonSerialize = Object.keys(_flow) .map((indexObjectFlow) => _flow[indexObjectFlow].toJson()) @@ -20,6 +17,17 @@ class FlowClass { this.flowSerialize = toSerialize(mergeToJsonSerialize) } + /** + * Buscar y aplanar todos los callbacks + * @param {*} inFlow + */ + getAllCb = (inFlow) => { + this.allCallbacks = inFlow + .map((cbIn) => cbIn.ctx.callbacks) + .flat(2) + .map((c, i) => ({ callback: c?.callback, index: i })) + } + find = (keyOrWord, symbol = false, overFlow = null) => { keyOrWord = `${keyOrWord}` let capture = false diff --git a/packages/bot/package.json b/packages/bot/package.json index b30e4b2..36331cd 100644 --- a/packages/bot/package.json +++ b/packages/bot/package.json @@ -1,6 +1,6 @@ { "name": "@bot-whatsapp/bot", - "version": "0.0.25-alpha.0", + "version": "0.0.26-alpha.0", "description": "", "main": "./lib/bundle.bot.cjs", "scripts": { diff --git a/packages/cli/interactive/index.js b/packages/cli/interactive/index.js index 3dc16c4..89ee601 100644 --- a/packages/cli/interactive/index.js +++ b/packages/cli/interactive/index.js @@ -1,8 +1,8 @@ const prompts = require('prompts') -const { yellow, red, cyan, bgMagenta } = require('kleur') -const { copyBaseApp } = require('../create-app') const { join } = require('path') +const { yellow, red, cyan, bgMagenta } = require('kleur') const { existsSync } = require('fs') +const { copyBaseApp } = require('../create-app') const { checkNodeVersion, checkOs } = require('../check') const bannerDone = () => { @@ -48,9 +48,9 @@ const startInteractive = async () => { message: '¿Cuál base de datos quieres utilizar?', choices: [ { title: 'Memory', value: 'memory' }, + { title: 'Json', value: 'json' }, { title: 'Mongo', value: 'mongo' }, { title: 'MySQL', value: 'mysql' }, - { title: 'Json', value: 'json', disabled: true }, ], max: 1, hint: 'Espacio para seleccionar', diff --git a/packages/cli/package.json b/packages/cli/package.json index dbefef2..bfa705d 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@bot-whatsapp/cli", - "version": "0.0.32-alpha.0", + "version": "0.0.33-alpha.0", "description": "", "main": "index.js", "devDependencies": { diff --git a/packages/contexts/package.json b/packages/contexts/package.json index 9d27195..29c2dcd 100644 --- a/packages/contexts/package.json +++ b/packages/contexts/package.json @@ -8,7 +8,8 @@ ], "exports": { "./mock": "./lib/mock/index.cjs", - "./dialogflow": "./lib/dialogflow/index.cjs" + "./dialogflow": "./lib/dialogflow/index.cjs", + "./dialogflowcx": "./lib/dialogflow-cx/index.cjs" }, "dependencies": { "@bot-whatsapp/bot": "*" diff --git a/packages/contexts/rollup-contexts.config.js b/packages/contexts/rollup-contexts.config.js index 59a7624..07c3d67 100644 --- a/packages/contexts/rollup-contexts.config.js +++ b/packages/contexts/rollup-contexts.config.js @@ -21,4 +21,13 @@ module.exports = [ }, plugins: [commonjs()], }, + { + input: join(__dirname, 'src', 'dialogflow-cx', 'index.js'), + output: { + banner: banner['banner.output'].join(''), + file: join(__dirname, 'lib', 'dialogflow-cx', 'index.cjs'), + format: 'cjs', + }, + plugins: [commonjs()], + }, ] diff --git a/packages/contexts/src/dialogflow-cx/dialogflow-cx.class.js b/packages/contexts/src/dialogflow-cx/dialogflow-cx.class.js new file mode 100644 index 0000000..e851ca4 --- /dev/null +++ b/packages/contexts/src/dialogflow-cx/dialogflow-cx.class.js @@ -0,0 +1,112 @@ +const { CoreClass } = require('@bot-whatsapp/bot') +const { SessionsClient } = require('@google-cloud/dialogflow-cx').v3beta1 +const { existsSync, readFileSync } = require('fs') +const { join } = require('path') + +/** + * Necesita extender de core.class + * handleMsg(messageInComming) // const { body, from } = messageInComming + */ + +const GOOGLE_ACCOUNT_PATH = join(process.cwd(), 'google-key.json') + +class DialogFlowCXContext extends CoreClass { + // Opciones del usuario + optionsDX = { + language: 'es', + location: '', + agentId: '', + } + projectId = null + configuration = null + sessionClient = null + + constructor(_database, _provider, _optionsDX = {}) { + super(null, _database, _provider) + this.optionsDX = { ...this.optionsDX, ..._optionsDX } + this.init() + } + + /** + * Verificar conexión con servicio de DialogFlow + */ + init = () => { + if (!existsSync(GOOGLE_ACCOUNT_PATH)) { + console.log(`[ERROR]: No se encontro ${GOOGLE_ACCOUNT_PATH}`) + /** + * Emitir evento de error para que se mueste por consola dicinedo que no tiene el json + * */ + } + + if (!this.optionsDX.location.length) + throw new Error('LOCATION_NO_ENCONTRADO') + if (!this.optionsDX.agentId.length) + throw new Error('AGENTID_NO_ENCONTRADO') + + const rawJson = readFileSync(GOOGLE_ACCOUNT_PATH, 'utf-8') + const { project_id, private_key, client_email } = JSON.parse(rawJson) + + this.projectId = project_id + + this.sessionClient = new SessionsClient({ + credentials: { private_key, client_email }, + apiEndpoint: `${this.optionsDX.location}-dialogflow.googleapis.com`, + }) + } + + /** + * GLOSSARY.md + * @param {*} messageCtxInComming + * @returns + */ + handleMsg = async (messageCtxInComming) => { + const languageCode = this.optionsDX.language + const { from, body } = messageCtxInComming + + /** + * 📄 Creamos session de contexto basado en el numero de la persona + * para evitar este problema. + * https://github.com/codigoencasa/bot-whatsapp/pull/140 + */ + + const session = this.sessionClient.projectLocationAgentSessionPath( + this.projectId, + this.optionsDX.location, + this.optionsDX.agentId, + from + ) + + const reqDialog = { + session, + queryInput: { + text: { + text: body, + }, + languageCode, + }, + } + + const [single] = (await this.sessionClient.detectIntent(reqDialog)) || [ + null, + ] + + const listMessages = single.queryResult.responseMessages.map((res) => { + if (res.message == 'text') { + return { answer: res.text.text[0] } + } + + if (res.message == 'payload') { + const { values } = res.payload.fields.buttons.listValue + const buttonsArray = values.map((values) => { + const { stringValue } = values.structValue.fields.body + return { body: stringValue } + }) + return { buttons: buttonsArray } + } + }) + + this.sendFlow(listMessages, from) + } +} + +module.exports = DialogFlowCXContext diff --git a/packages/contexts/src/dialogflow-cx/index.js b/packages/contexts/src/dialogflow-cx/index.js new file mode 100644 index 0000000..2a561c4 --- /dev/null +++ b/packages/contexts/src/dialogflow-cx/index.js @@ -0,0 +1,14 @@ +const DialogCXFlowClass = require('./dialogflow-cx.class') + +/** + * Crear instancia de clase Bot + * @param {*} args + * @returns + */ +const createBotDialog = async ({ database, provider }, _options) => + new DialogCXFlowClass(database, provider, _options) + +module.exports = { + createBotDialog, + DialogCXFlowClass, +} diff --git a/packages/create-bot-whatsapp/package.json b/packages/create-bot-whatsapp/package.json index 3e1f16a..8d0fa00 100644 --- a/packages/create-bot-whatsapp/package.json +++ b/packages/create-bot-whatsapp/package.json @@ -1,6 +1,6 @@ { "name": "create-bot-whatsapp", - "version": "0.0.43-alpha.0", + "version": "0.0.44-alpha.0", "description": "", "main": "./lib/bundle.create-bot-whatsapp.cjs", "files": [ diff --git a/packages/database/package.json b/packages/database/package.json index bf869cb..48ba464 100644 --- a/packages/database/package.json +++ b/packages/database/package.json @@ -1,6 +1,6 @@ { "name": "@bot-whatsapp/database", - "version": "0.0.24-alpha.0", + "version": "0.0.25-alpha.0", "description": "Esto es el conector a mysql, pg, mongo", "main": "./lib/mock/index.cjs", "keywords": [], diff --git a/packages/docs/package.json b/packages/docs/package.json index 3b6c476..c4fca4e 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -9,7 +9,7 @@ "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts", "build.types": "tsc --incremental --noEmit", "deploy": "wrangler pages dev ./dist", - "dev": "vite --mode ssr", + "dev": "vite --host --mode ssr", "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", "fmt": "prettier --write .", "fmt.check": "prettier --check .", @@ -24,6 +24,10 @@ "@builder.io/qwik-city": "0.0.128", "@fontsource/inter": "^4.5.14", "@iconify-json/tabler": "^1.1.49", + "@tailwindcss/aspect-ratio": "^0.4.0", + "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/line-clamp": "^0.3.1", + "@tailwindcss/typography": "^0.5.0", "@types/eslint": "8.4.10", "@types/node": "latest", "@typescript-eslint/eslint-plugin": "5.45.0", diff --git a/packages/docs/public/favicon.ico b/packages/docs/public/favicon.ico new file mode 100644 index 0000000..c3ab8a2 Binary files /dev/null and b/packages/docs/public/favicon.ico differ diff --git a/packages/docs/public/favicon.svg b/packages/docs/public/favicon.svg deleted file mode 100644 index 0ded7c1..0000000 --- a/packages/docs/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/docs/src/assets/fonts/FiraCode-VF.woff b/packages/docs/src/assets/fonts/FiraCode-VF.woff new file mode 100644 index 0000000..f7ac814 Binary files /dev/null and b/packages/docs/src/assets/fonts/FiraCode-VF.woff differ diff --git a/packages/docs/src/assets/fonts/FiraCode-VF.woff2 b/packages/docs/src/assets/fonts/FiraCode-VF.woff2 new file mode 100644 index 0000000..64ffe43 Binary files /dev/null and b/packages/docs/src/assets/fonts/FiraCode-VF.woff2 differ diff --git a/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf b/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000..8d43f3d Binary files /dev/null and b/packages/docs/src/assets/fonts/IBMPlexMono-Regular.ttf differ diff --git a/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf b/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf new file mode 100644 index 0000000..b8c3935 Binary files /dev/null and b/packages/docs/src/assets/fonts/IBMPlexMono-SemiBold.ttf differ diff --git a/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 b/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 new file mode 100644 index 0000000..e09a201 Binary files /dev/null and b/packages/docs/src/assets/fonts/Inter-italic-latin.var.woff2 differ diff --git a/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 b/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 new file mode 100644 index 0000000..44fabcb Binary files /dev/null and b/packages/docs/src/assets/fonts/Inter-roman-latin.var.woff2 differ diff --git a/packages/docs/src/assets/fonts/Pally-Variable.ttf b/packages/docs/src/assets/fonts/Pally-Variable.ttf new file mode 100644 index 0000000..b0ecd84 Binary files /dev/null and b/packages/docs/src/assets/fonts/Pally-Variable.ttf differ diff --git a/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf b/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf new file mode 100644 index 0000000..bdcfb27 Binary files /dev/null and b/packages/docs/src/assets/fonts/SourceSansPro-Regular.otf differ diff --git a/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf b/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf new file mode 100644 index 0000000..e6c5dff Binary files /dev/null and b/packages/docs/src/assets/fonts/SourceSerifPro-Regular.ttf differ diff --git a/packages/docs/src/assets/fonts/Synonym-Variable.ttf b/packages/docs/src/assets/fonts/Synonym-Variable.ttf new file mode 100644 index 0000000..bcbe0a1 Binary files /dev/null and b/packages/docs/src/assets/fonts/Synonym-Variable.ttf differ diff --git a/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 b/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 new file mode 100644 index 0000000..56c55c1 Binary files /dev/null and b/packages/docs/src/assets/fonts/Ubuntu-Mono-bold.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 new file mode 100644 index 0000000..c278686 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff new file mode 100644 index 0000000..31ee2e1 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css new file mode 100644 index 0000000..deddf7c --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: IBMPlexMono-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: IBMPlexMono-Regular; + src: url(IBMPlexMono-Regular-subset.woff2) format('woff2'), + url(IBMPlexMono-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+2C, U+2E, U+41-43, U+46, U+49, U+4B-4F, U+53-55, U+58, + U+61-65, U+67-69, U+6C-76; +} diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 new file mode 100644 index 0000000..dd6c410 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff new file mode 100644 index 0000000..fae3e2d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css new file mode 100644 index 0000000..e2fdf72 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css @@ -0,0 +1,13 @@ +.font { + font-family: IBMPlexMono-SemiBold; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: IBMPlexMono-SemiBold; + src: url(IBMPlexMono-SemiBold-subset.woff2) format('woff2'), + url(IBMPlexMono-SemiBold-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2E, U+30, U+38, U+39, U+41, U+42, U+44, U+47, + U+4E, U+4F, U+52-55, U+57, U+59, U+65, U+68, U+6F, U+72, U+74; +} diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 new file mode 100644 index 0000000..7482552 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff new file mode 100644 index 0000000..b5ef1d9 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Pally-Variable-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css b/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css new file mode 100644 index 0000000..74aa400 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/Pally-Variable.module.css @@ -0,0 +1,14 @@ +.font { + font-family: Pally-Variable; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: Pally-Variable; + src: url(Pally-Variable-subset.woff2) format('woff2'), + url(Pally-Variable-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+39, U+41-43, U+46, + U+49-4D, U+53, U+55, U+58, U+61-65, U+67-69, U+6B-77, U+79; + font-weight: 400 700; +} diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 new file mode 100644 index 0000000..722108f Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff new file mode 100644 index 0000000..c520f2b Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css new file mode 100644 index 0000000..b1a323f --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: SourceSerifPro-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: SourceSerifPro-Regular; + src: url(SourceSerifPro-Regular-subset.woff2) format('woff2'), + url(SourceSerifPro-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+2C, U+2E, U+41-44, U+49, U+4A, U+4C, U+53, U+55, + U+61-65, U+67-69, U+6B-76, U+79; +} diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 new file mode 100644 index 0000000..190f1ec Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff new file mode 100644 index 0000000..84a5c4d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/Synonym-Variable-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css b/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css new file mode 100644 index 0000000..b834dbb --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css @@ -0,0 +1,14 @@ +.font { + font-family: Synonym-Variable; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: Synonym-Variable; + src: url(Synonym-Variable-subset.woff2) format('woff2'), + url(Synonym-Variable-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+35, U+41-44, U+46, U+47, + U+49, U+4B-4F, U+53-55, U+57-59, U+61, U+63-65, U+67-69, U+6C-76; + font-weight: 400 700; +} diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 new file mode 100644 index 0000000..3d5d391 Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.woff2 differ diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff new file mode 100644 index 0000000..294ca4d Binary files /dev/null and b/packages/docs/src/assets/fonts/generated/TenorSans-Regular-subset.zopfli.woff differ diff --git a/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css b/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css new file mode 100644 index 0000000..819cfa3 --- /dev/null +++ b/packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css @@ -0,0 +1,13 @@ +.font { + font-family: TenorSans-Regular; +} + +/* This file was automatically generated by GlyphHanger 4.0.1 */ + +@font-face { + font-family: TenorSans-Regular; + src: url(TenorSans-Regular-subset.woff2) format('woff2'), + url(TenorSans-Regular-subset.zopfli.woff) format('woff'); + unicode-range: U+20, U+24, U+2E, U+30, U+36, U+46, U+49, U+4A, U+53, U+54, + U+61, U+63, U+65, U+69, U+6B, U+6E, U+6F, U+72-75, U+79; +} diff --git a/packages/docs/src/assets/images/chatbot-whatsapp.png b/packages/docs/src/assets/images/chatbot-whatsapp.png new file mode 100644 index 0000000..ba96492 Binary files /dev/null and b/packages/docs/src/assets/images/chatbot-whatsapp.png differ diff --git a/packages/docs/src/assets/images/desahogo.png b/packages/docs/src/assets/images/desahogo.png new file mode 100644 index 0000000..6c2ddce Binary files /dev/null and b/packages/docs/src/assets/images/desahogo.png differ diff --git a/packages/docs/src/assets/images/eyes.png b/packages/docs/src/assets/images/eyes.png new file mode 100644 index 0000000..7d57178 Binary files /dev/null and b/packages/docs/src/assets/images/eyes.png differ diff --git a/packages/docs/src/assets/images/leanga.png b/packages/docs/src/assets/images/leanga.png new file mode 100644 index 0000000..0d03d1b Binary files /dev/null and b/packages/docs/src/assets/images/leanga.png differ diff --git a/packages/docs/src/assets/images/qwik.png b/packages/docs/src/assets/images/qwik.png new file mode 100644 index 0000000..3ae7d8f Binary files /dev/null and b/packages/docs/src/assets/images/qwik.png differ diff --git a/packages/docs/src/assets/styles/fonts.css b/packages/docs/src/assets/styles/fonts.css new file mode 100644 index 0000000..c2b1344 --- /dev/null +++ b/packages/docs/src/assets/styles/fonts.css @@ -0,0 +1,44 @@ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: block; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/Inter-roman-latin.var.woff2') format('woff2'); +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: block; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/Inter-italic-latin.var.woff2') format('woff2'); +} + +@font-face { + font-family: 'Fira Code VF'; + font-weight: 300 700; + font-style: normal; + src: url('../fonts/FiraCode-VF.woff2') format('woff2-variations'), + url('../fonts/FiraCode-VF.woff') format('woff-variations'); +} + +.font-mono { + font-variant-ligatures: none; +} + +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/SourceSansPro-Regular.otf') format('opentype'); +} + +@font-face { + font-family: 'Ubuntu Mono'; + font-weight: 700; + font-style: normal; + src: url('../fonts/Ubuntu-Mono-bold.woff2') format('woff2'); +} diff --git a/packages/docs/src/assets/styles/global.css b/packages/docs/src/assets/styles/global.css index 8d4a039..24f0392 100644 --- a/packages/docs/src/assets/styles/global.css +++ b/packages/docs/src/assets/styles/global.css @@ -5,7 +5,7 @@ * the styles in here will be applied to the Document, without any sort of CSS scoping. * */ - +@import 'prism.css'; @tailwind base; @tailwind components; @tailwind utilities; @@ -24,31 +24,43 @@ } .slot h1 { - @apply mb-2 font-semibold text-2xl; + @apply my-2 font-semibold text-3xl; } .slot h2 { - @apply mb-2 font-semibold text-lg; + @apply mt-4 font-semibold text-xl; } .slot h3 { - @apply mb-2 font-semibold text-base; + @apply mt-4 font-semibold text-lg; } - .slot code { - @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full; + .slot p code { + @apply text-xs font-mono bg-stone-100 dark:bg-slate-600 dark:text-white text-red-500 p-1 rounded; } .slot pre { @apply w-full flex my-2; } + .slot pre code { + @apply p-3 rounded md:w-full max-w-screen-md overflow-x-auto w-fit bg-gray-800 dark:bg-slate-800 ease-in duration-75 text-gray-100 text-xs shadow-xl; + } + .slot a { - @apply text-sky-900 font-medium dark:text-sky-400; + @apply text-sky-900 font-medium dark:text-sky-400 dark:hover:text-white; } .slot hr { - @apply my-5; + @apply my-5 border-t-slate-100 dark:border-t-slate-800; + } + + .slot img { + @apply rounded drop-shadow-2xl; + } + + .slot ul { + @apply list-disc pl-5; } [data-aw-toggle-menu] path { @@ -63,6 +75,10 @@ @apply mt-2 text-sm text-slate-700 dark:text-slate-400; } + .coding p { + @apply m-0; + } + [data-aw-toggle-menu].expanded g > path:last-child { @apply rotate-45 translate-y-[-8px] translate-x-[14px]; } diff --git a/packages/docs/src/assets/styles/prism.css b/packages/docs/src/assets/styles/prism.css new file mode 100644 index 0000000..4d26bb5 --- /dev/null +++ b/packages/docs/src/assets/styles/prism.css @@ -0,0 +1,86 @@ +.token.tag, +.token.class-name, +.token.selector, +.token.selector .class, +.token.selector.class, +.token.function { + @apply text-pink-400; +} + +.token.attr-name, +.token.keyword, +.token.rule, +.token.pseudo-class, +.token.important { + @apply text-slate-300; +} + +.token.attr-value, +.token.class, +.token.string { + @apply text-sky-300; +} + +.token.punctuation, +.token.attr-equals { + @apply text-slate-500; +} + +.token.attr-value * { + @apply text-sky-300; +} + +.token.attr-value .attr-equals, +.token.attr-value .attr-equals + .punctuation, +.token.attr-value > .punctuation:last-child { + @apply text-slate-500; +} + +.token.property { + @apply text-sky-300; +} + +.token.unit { + @apply text-teal-200; +} + +.language-shell .token:not(.comment), +.token.atapply .token:not(.rule):not(.important):not(.punctuation) { + color: inherit; +} + +.language-css .token.function { + @apply text-teal-200; +} + +.token.comment, +.token.module, +.token.operator, +.token.combinator { + @apply text-slate-400; +} + +.token.unchanged { + @apply block; +} + +.token.deleted, +.token.inserted { + @apply block relative -mx-9 pl-8 pr-5 border-l-4 before:absolute before:top-0 before:left-4; +} + +.token.inserted { + @apply bg-teal-400/[0.15] border-teal-400 before:content-['+'] before:text-teal-400; +} + +.token.deleted { + @apply bg-rose-500/[0.15] border-rose-400 before:content-['-'] before:text-rose-400; +} + +pre[class^='language-diff-'] { + @apply flex px-9; +} + +pre[class^='language-diff-'] > code { + @apply flex-none min-w-full; +} diff --git a/packages/docs/src/components/atoms/Logo.tsx b/packages/docs/src/components/atoms/Logo.tsx index bd310f5..b5e1199 100644 --- a/packages/docs/src/components/atoms/Logo.tsx +++ b/packages/docs/src/components/atoms/Logo.tsx @@ -1,7 +1,7 @@ import { component$ } from '@builder.io/qwik' // @ts-ignore -import logoSrc from '~/assets/images/logo.png?width=64&height=64&png' +import logoSrc from '~/assets/images/chatbot-whatsapp.png?width=64&height=64&png' export default component$(() => ( @@ -13,6 +13,6 @@ export default component$(() => ( alt="Qwind Logo" loading="lazy" /> - Qwind + Chatbot )) diff --git a/packages/docs/src/components/core/RouterHead.tsx b/packages/docs/src/components/core/RouterHead.tsx index 3a3e0b4..b41415b 100644 --- a/packages/docs/src/components/core/RouterHead.tsx +++ b/packages/docs/src/components/core/RouterHead.tsx @@ -17,7 +17,7 @@ export const RouterHead = component$(() => { name="viewport" content="width=device-width, initial-scale=1.0" /> - + {head.meta.map((m) => ( diff --git a/packages/docs/src/components/icons/IconDiscord.tsx b/packages/docs/src/components/icons/IconDiscord.tsx new file mode 100644 index 0000000..8d70ef8 --- /dev/null +++ b/packages/docs/src/components/icons/IconDiscord.tsx @@ -0,0 +1,14 @@ +export const IconDiscord = () => ( + + + + +) diff --git a/packages/docs/src/components/widgets/Alert.tsx b/packages/docs/src/components/widgets/Alert.tsx new file mode 100644 index 0000000..0affbac --- /dev/null +++ b/packages/docs/src/components/widgets/Alert.tsx @@ -0,0 +1,14 @@ +import { component$, Slot } from '@builder.io/qwik' + +export default component$(() => { + return ( + + ) +}) diff --git a/packages/docs/src/components/widgets/CallToAction.tsx b/packages/docs/src/components/widgets/CallToAction.tsx index bbee471..3b1444b 100644 --- a/packages/docs/src/components/widgets/CallToAction.tsx +++ b/packages/docs/src/components/widgets/CallToAction.tsx @@ -5,31 +5,25 @@ export default component$(() => {
-
-

- Qwik +{' '} -
- - Tailwind CSS - -

-

- Be very surprised by these huge fake numbers you are - seeing on this page. - Don't waste more time! -

+
+ +
diff --git a/packages/docs/src/components/widgets/Collaborators.tsx b/packages/docs/src/components/widgets/Collaborators.tsx new file mode 100644 index 0000000..698c0a2 --- /dev/null +++ b/packages/docs/src/components/widgets/Collaborators.tsx @@ -0,0 +1,46 @@ +import { component$ } from '@builder.io/qwik' + +export default component$(() => { + return ( +
+
+

Contributors

+ + 204 + +
+
+ + + + + +
+
+ + + 198 others + +
+
+ ) +}) diff --git a/packages/docs/src/components/widgets/ExtraBar.tsx b/packages/docs/src/components/widgets/ExtraBar.tsx index 030951f..fda47b2 100644 --- a/packages/docs/src/components/widgets/ExtraBar.tsx +++ b/packages/docs/src/components/widgets/ExtraBar.tsx @@ -4,24 +4,22 @@ import { useLocation } from '@builder.io/qwik-city' /** * options = [] array con la lista de opciones de la documentacion */ -export default component$( - ({ - options = [], - }: { - options: { link: string; name: string; class?: string }[] - }) => { - const { pathname } = useLocation() - const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx` - return ( -
- -
- ) - } -) +export default component$(() => { + const { pathname } = useLocation() + const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx` + return ( +
+ +
+ ) +}) diff --git a/packages/docs/src/components/widgets/FAQs.tsx b/packages/docs/src/components/widgets/FAQs.tsx index 6377cb1..c9c9f70 100644 --- a/packages/docs/src/components/widgets/FAQs.tsx +++ b/packages/docs/src/components/widgets/FAQs.tsx @@ -51,7 +51,7 @@ export default component$(() => { FAQs

- Frequently Asked Questions + Preguntas Frecuentes

diff --git a/packages/docs/src/components/widgets/Features.tsx b/packages/docs/src/components/widgets/Features.tsx index 5f870e5..451211c 100644 --- a/packages/docs/src/components/widgets/Features.tsx +++ b/packages/docs/src/components/widgets/Features.tsx @@ -5,41 +5,38 @@ export default component$(() => { const items = [ [ { - title: 'Qwik + Tailwind CSS Integration', + title: 'Atención al cliente rápida y eficiente', description: - 'A seamless integration between two great frameworks that offer high productivity, performance and versatility.', - icon: 'tabler:brand-tailwind', + 'El chatbot puede ayudar a tus clientes a obtener respuestas a sus preguntas o solucionar problemas de manera rápida y sencilla, sin tener que esperar horas o incluso días por una respuesta.', }, { - title: 'Ready-to-use Components', + title: 'Automatización de tareas repetitiva', description: - 'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...', - icon: 'tabler:components', + 'Se pueden automatizar tareas repetitivas y ahorrar tiempo y esfuerzo en tareas administrativas, como enviar recordatorios a tus clientes sobre pagos pendientes o para confirmar citas o reservas.', }, { - title: 'Best Practices', + title: 'Experiencia personalizada para tus clientes', description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', - icon: 'tabler:list-check', + 'Podrás enviar mensajes automatizados con ofertas especiales o recomendaciones de productos basadas en el historial de compras de tus clientes, lo que significa que tus clientes pueden recibir una experiencia más personalizada.', }, ], [ { - title: 'Excellent Page Speed', + title: 'Análisis de datos y toma de decisiones informadas', description: - 'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.', + 'Te permite recopilar y analizar datos sobre tus clientes para ayudarte a entender mejor sus necesidades y preferencias, y ofrecerles un servicio aún más destacado.', icon: 'tabler:rocket', }, { - title: 'Search Engine Optimization (SEO)', + title: 'Mejora de la eficiencia', description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', + 'Te brinda la facilidad de manejar varias conversaciones al mismo tiempo, lo que significa que tus clientes no tendrán que esperar en una larga cola de mensajes para obtener atención. Esto puede ayudar a mejorar la eficiencia y la productividad en tu negocio.', icon: 'tabler:arrows-right-left', }, { - title: 'Open to new ideas and contributions', + title: 'Personalización y adaptación', description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', + 'Como proyecto open source, el chatbot de WhatsApp es totalmente personalizable y puede ser adaptado a las necesidades específicas de tu negocio o proyecto. Esto significa que puedes modificar el código fuente y adaptar el chatbot a tus necesidades exactas.', icon: 'tabler:bulb', }, ], @@ -50,16 +47,16 @@ export default component$(() => {

- Features + Caracteristicas

- What you get with{' '} - Qwind + Nuestras principales{' '} + funciones

- Sed ut perspiciatis unde omnis iste natus error sit - voluptatem accusantium doloremque rem aperiam, eaque - ipsa quae. + El secreto es mantener los procesos repetitivos en + procesos automatizados simples, por eso te mostramos en + que destacamos.

@@ -68,7 +65,7 @@ export default component$(() => { {subitems.map(({ title, description }) => (
-
+
diff --git a/packages/docs/src/components/widgets/Footer.tsx b/packages/docs/src/components/widgets/Footer.tsx index d7c3b8b..9aaace6 100644 --- a/packages/docs/src/components/widgets/Footer.tsx +++ b/packages/docs/src/components/widgets/Footer.tsx @@ -50,18 +50,10 @@ export default component$(() => { ] return ( -