1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1823],{64153:function(s,o,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/pt/quickstart",function(){return n(5582)}])},5582:function(s,o,n){"use strict";n.r(o),n.d(o,{__N_SSG:function(){return r},default:function(){return MDXContent}});var a=n(97997),e=n(11151),t=n(99686);function _createMdxContent(s){let o={a:"a",code:"code",h2:"h2",hr:"hr",p:"p",pre:"pre",...(0,e.ah)(),...s.components},{Button:n,CodeGroup:r,Note:i}=o;return n||_missingMdxReference("Button",!0),r||_missingMdxReference("CodeGroup",!0),i||_missingMdxReference("Note",!0),(0,a.BX)(a.HY,{children:[(0,a.tZ)(o.h2,{id:"install",children:"Install"}),"\n",(0,a.tZ)(o.p,{children:"Criar um bot \xe9 t\xe3o simples quanto executar o seguinte comando e seguir as instru\xe7\xf5es"}),"\n",(0,a.tZ)(i,{children:(0,a.BX)(o.p,{children:["Pr\xe9-requisitos a considerar antes de utilizar esta ferramenta,",(0,a.tZ)(o.a,{href:"https://nodejs.org/en",children:"Node"})," v20 ou superior e ",(0,a.tZ)(o.a,{href:"https://git-scm.com/download",children:"Git"})]})}),"\n",(0,a.BX)(r,{children:[(0,a.tZ)(o.pre,{language:"bash",code:"pnpm create builderbot@latest\n",children:(0,a.tZ)(o.code,{className:"language-bash",children:'<span><span style="color: var(--shiki-token-function)">pnpm</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">create</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">builderbot@latest</span></span>\n<span></span>'}),title:"pnpm"}),(0,a.tZ)(o.pre,{language:"bash",code:"npm create builderbot@latest\n",children:(0,a.tZ)(o.code,{className:"language-bash",children:'<span><span style="color: var(--shiki-token-function)">npm</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">create</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">builderbot@latest</span></span>\n<span></span>'}),title:"npm"})]}),"\n",(0,a.tZ)(o.p,{children:"Utilize a tecla espa\xe7o para seleccionar e a tecla enter para confirmar. A CLI realiza uma verifica\xe7\xe3o preliminar do n\xf3 e da vers\xe3o do sistema operativo, informando-o se cumpre os requisitos ou fornecendo-lhe informa\xe7\xf5es relevantes. Al\xe9m de gerar um projeto de base para voc\xea simplesmente iniciar"}),"\n",(0,a.tZ)("video",{className:"rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",autoPlay:!0,loop:!0,muted:!0,src:"https://bot-whatsapp.netlify.app/videos/console.webm"}),"\n",(0,a.tZ)(o.hr,{}),"\n",(0,a.tZ)(o.h2,{id:"requirements",children:"Requirements"}),"\n",(0,a.tZ)(o.p,{children:"Certifique-se de ter instalado o Node vers\xe3o 20 ou superior, abaixo voc\xea pode ver um exemplo para verificar a vers\xe3o do node que voc\xea est\xe1 usando."}),"\n",(0,a.tZ)(o.pre,{language:"bash",code:"node -v\nv20.10.0\n",children:(0,a.tZ)(o.code,{className:"language-bash",children:'<span><span style="color: var(--shiki-token-function)">node</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">-v</span></span>\n<span><span style="color: var(--shiki-token-function)">v20.10.0</span></span>\n<span></span>'})}),"\n",(0,a.tZ)("div",{className:"not-prose aling-block",children:(0,a.tZ)(n,{href:"https://nodejs.org/en",variant:"text",target:"_blank",arrow:"right",children:"Download node from its official website"})}),"\n",(0,a.tZ)(o.p,{children:"Recomenda-se ter o GIT instalado para uma opera\xe7\xe3o adequada. Se voc\xea estiver usando Linux ou Macos, provavelmente j\xe1 tem o GIT instalado por padr\xe3o."}),"\n",(0,a.tZ)(o.pre,{language:"bash",code:"git -v\ngit version XXXX\n",children:(0,a.tZ)(o.code,{className:"language-bash",children:'<span><span style="color: var(--shiki-token-function)">git</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">-v</span></span>\n<span><span style="color: var(--shiki-token-function)">git</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">version</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string)">XXXX</span></span>\n<span></span>'})}),"\n",(0,a.tZ)("div",{className:"not-prose aling-block",children:(0,a.tZ)(n,{href:"https://git-scm.com/downloads",variant:"text",target:"_blank",arrow:"right",children:"Download GIT from its official website"})}),"\n",(0,a.tZ)(o.hr,{}),"\n",(0,a.tZ)(o.h2,{id:"base-example",children:"Base Example"}),"\n",(0,a.BX)(o.p,{children:["Neste exemplo, podemos ver a base de um bot simples que responde \xe0s palavras-chave enviadas por um usu\xe1rio, as palavras
1s\xe3o: ",(0,a.tZ)(o.code,{children:"info, hello, hi"}),". Voc\xea pode ver como criar o bot e implementar o ",(0,a.tZ)(o.a,{href:"/concepts#flow",children:"flows"}),"."]}),"\n",(0,a.BX)(r,{children:[(0,a.tZ)(o.pre,{language:"ts",code:"import { createBot, createProvider, createFlow, addKeyword, MemoryDB } from '@builderbot/bot'\nimport { BaileysProvider } from '@builderbot/provider-baileys'\n\n/** send static messages */\nconst welcomeFlow = addKeyword<BaileysProvider, MemoryDB>(['hello', 'hi']).addAnswer('Ey! welcome')\n\n/** send dynamic message from db or other sources */\nconst infoFlow = addKeyword<BaileysProvider, MemoryDB>('info')\n .addAction(async (ctx, { flowDynamic }) => {\n await flowDynamic(`Welcome ${ctx.name}`)\n })\n\n/** send media files */\nconst mediaFlow = addKeyword<BaileysProvider, MemoryDB>('image')\n .addAnswer(`Send Image A`, { media: 'https://i.imgur.com/AsvWfUX.png' })\n .addAction(async (ctx, { flowDynamic }) => {\n await flowDynamic(`Welcome ${ctx.name}`)\n await flowDynamic(\n [\n {\n body: 'Send Image B',\n media: 'https://i.imgur.com/w0RtKnN.png'\n }\n ]\n )\n })\n\n/** initialization bot */\nconst main = async () => {\n\n const adapterDB = new MemoryDB()\n const adapterFlow = createFlow([welcomeFlow, infoFlow, mediaFlow])\n const adapterProvider = createProvider(BaileysProvider)\n\n adapterProvider.initHttpServer(3000)\n\n await createBot({\n flow: adapterFlow,\n provider: adapterProvider,\n database: adapterDB,\n })\n}\n\nmain()\n\n",children:(0,a.tZ)(o.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { createBot</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> createProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> createFlow</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> addKeyword</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> MemoryDB } </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'@builderbot/bot'</span></span>\n<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { BaileysProvider } </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'@builderbot/provider-baileys'</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send static messages */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">welcomeFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)"><</span><span style="color: var(--shiki-token-function)">BaileysProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">MemoryDB</span><span style="color: var(--shiki-color-text)">>([</span><span style="color: var(--shiki-token-string-expression)">'hello'</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'hi'</span><span style="color: var(--shiki-color-text)">])</span><span style="color: var(--shiki-token-function)">.addAnswer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'
1Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send dynamic message from db or other sources */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">infoFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)"><</span><span style="color: var(--shiki-token-function)">BaileysProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">MemoryDB</span><span style="color: var(--shiki-color-text)">>(</span><span style="color: var(--shiki-token-string-expression)">'info'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAction</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> (ctx</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { flowDynamic }) </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Welcome </span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-token-constant)">ctx</span><span style="color: var(--shiki-color-text)">.name</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send media files */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">mediaFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)"><</span><span style="color: var(--shiki-token-function)">BaileysProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">MemoryDB</span><span style="color: var(--shiki-color-text)">>(</span><span style="color: var(--shiki-token-string-expression)">'image'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAnswer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Send Image A`</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { media</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'https://i.imgur.com/AsvWfUX.png'</span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAction</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> (ctx</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { flowDynamic }) </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Welcome </span><span style="color: var(--shiki-token-keyword)">
1${</span><span style="color: var(--shiki-token-constant)">ctx</span><span style="color: var(--shiki-color-text)">.name</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span></span>\n<span><span style="color: var(--shiki-color-text)"> [</span></span>\n<span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> body</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'Send Image B'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> media</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'https://i.imgur.com/w0RtKnN.png'</span></span>\n<span><span style="color: var(--shiki-color-text)"> }</span></span>\n<span><span style="color: var(--shiki-color-text)"> ]</span></span>\n<span><span style="color: var(--shiki-color-text)"> )</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** initialization bot */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">main</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> () </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterDB</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">MemoryDB</span><span style="color: var(--shiki-color-text)">()</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([welcomeFlow</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> infoFlow</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> mediaFlow])</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterProvider</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(BaileysProvider)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterProvider</span><span style="color: var(--shiki-token-function)">.initHttpServer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">3000</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createBot</span><span style="color: var(--shiki-color-text)">({</span></span>\n<span><span style="color: var(--shiki-color-text)"> flow</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterFlow</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> provider</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterProvider</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> database</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterDB</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span><span style="color: var(--shiki-color-text)">}</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-function)">main</span><span style="color: var(--shiki-color-text)">()</span></span>\n<span></span>\n<span></span>'}),title:"main.ts"}),(0,a.tZ)(o.pre,{language:"js",code:"const { createBot, createProvider, createFlow, addKeyword, MemoryDB } = require('@builderbot/bot')\nconst { BaileysProvider } = require('@builderbot/bot')\n\n/** send static messages */\nconst welcomeFlow = addKeyword(['hello', 'hi']).addAnswer('Ey! wel
1come')\n\n/** send dynamic message from db or other sources */\nconst infoFlow = addKeyword('info')\n .addAction(async (ctx, { flowDynamic }) => {\n await flowDynamic(`Welcome ${ctx.name}`)\n })\n\n/** send media files */\nconst mediaFlow = addKeyword('image')\n .addAnswer(`Send Image A`, { media: 'https://i.imgur.com/AsvWfUX.png' })\n .addAction(async (ctx, { flowDynamic }) => {\n await flowDynamic(`Welcome ${ctx.name}`)\n await flowDynamic(\n [\n {\n body: 'Send Image B',\n media: 'https://i.imgur.com/w0RtKnN.png'\n }\n ]\n )\n })\n\n/** initialization bot */\nconst main = async () => {\n\n const adapterDB = new MemoryDB()\n const adapterFlow = createFlow([welcomeFlow, infoFlow])\n const adapterProvider = createProvider(BaileysProvider)\n\n adapterProvider.initHttpServer(3000)\n\n await createBot({\n flow: adapterFlow,\n provider: adapterProvider,\n database: adapterDB,\n })\n}\n\nmain()\n\n",children:(0,a.tZ)(o.code,{className:"language-js",children:'<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> { </span><span style="color: var(--shiki-token-constant)">createBot</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">createProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">createFlow</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">addKeyword</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">MemoryDB</span><span style="color: var(--shiki-color-text)"> } </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'@builderbot/bot'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> { </span><span style="color: var(--shiki-token-constant)">BaileysProvider</span><span style="color: var(--shiki-color-text)"> } </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'@builderbot/bot'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send static messages */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">welcomeFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)">([</span><span style="color: var(--shiki-token-string-expression)">'hello'</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'hi'</span><span style="color: var(--shiki-color-text)">])</span><span style="color: var(--shiki-token-function)">.addAnswer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'
1Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send dynamic message from db or other sources */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">infoFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'info'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAction</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> (ctx</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { flowDynamic }) </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Welcome </span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-token-constant)">ctx</span><span style="color: var(--shiki-color-text)">.name</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** send media files */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">mediaFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addKeyword</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'image'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAnswer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Send Image A`</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { media</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'https://i.imgur.com/AsvWfUX.png'</span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">.addAction</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> (ctx</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { flowDynamic }) </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">`Welcome </span><span style="color: var(--shiki-token-keyword)">
1${</span><span style="color: var(--shiki-token-constant)">ctx</span><span style="color: var(--shiki-color-text)">.name</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">flowDynamic</span><span style="color: var(--shiki-color-text)">(</span></span>\n<span><span style="color: var(--shiki-color-text)"> [</span></span>\n<span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> body</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'Send Image B'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> media</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'https://i.imgur.com/w0RtKnN.png'</span></span>\n<span><span style="color: var(--shiki-color-text)"> }</span></span>\n<span><span style="color: var(--shiki-color-text)"> ]</span></span>\n<span><span style="color: var(--shiki-color-text)"> )</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">/** initialization bot */</span></span>\n<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">main</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">async</span><span style="color: var(--shiki-color-text)"> () </span><span style="color: var(--shiki-token-keyword)">=></span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterDB</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">MemoryDB</span><span style="color: var(--shiki-color-text)">()</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterFlow</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([welcomeFlow</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> infoFlow])</span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterProvider</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(BaileysProvider)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">adapterProvider</span><span style="color: var(--shiki-token-function)">.initHttpServer</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">3000</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createBot</span><span style="color: var(--shiki-color-text)">({</span></span>\n<span><span style="color: var(--shiki-color-text)"> flow</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterFlow</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> provider</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterProvider</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> database</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> adapterDB</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span></span>\n<span><span style="color: var(--shiki-color-text)">}</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-function)">main</span><span style="color: var(--shiki-color-text)">()</span></span>\n<span></span>\n<span></span>'}),title:"main.js"})]}),"\n",(0,a.tZ)(o.hr,{}),"\n",(0,a.tZ)(t._,{})]})}var r=!0;function MDXContent(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:o}={...(0,e.ah)(),...s.components};return o?(0,a.tZ)(o,{...s,children:(0,a.tZ)(_createMdxContent,{...s})}):_createMdxContent(s)}function _missingMdxReference(s,o){throw Error("Expected "+(o?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}},86049:function(s,o,n){"use strict";n.d(o,{K:function(){return GridPattern}});var a=n(97997),e=n(11720);function GridPattern(s){let{width:o,height:n,x:t,y:r,squares:i,...l}=s,p=(0,e.useId)();return(0,a.BX)("svg",{"aria-hidden":"true",...l,children:[(0,a.tZ)("defs",{children:(0,a.tZ)("pattern",{id:p,width:o,height:n,patternUnits:"userSpaceOnUse",x:t,y:r,children:(0,a.tZ)("path",{d:`M.5 ${n}V.5H${o}`,fill:"none"})})}),(0,a.tZ)("rect",{width:"100%",height:"100%",strokeWidth:0,fill:`url(#${p})`}),i&&(0,a.tZ)("svg",{x:t,y:r,className:"overflow-visible",children:i.map(s=>{let[e,t]=s;return(0,a.tZ)("rect",{strokeWidth:"0",width:o+1,height:n+1,x:e*o,y:t*n},`${e}-${t}`)})})]})}},99686:function(s,o,n){"use strict";n.d(o,{_:function(){return Resources}});var a=n(97997),e=n(41664),t=n.n(e),r=n(65512),i=n(40406);function useMotionTemplate(s,...o){let n=s.length;return(0,r.N)(o.filter(i.i),function(){let a="";for(let e=0;e<n;e++){a+=s[e];let n=o[e];n&&(a+=(0,i.i)(n)?n.get():n)}return a})}var l=n(50508),p=n(4960),c=n(86049),k=n(68289);let h=[{href:"/showcases/modularize",name:"Modularize",description:"Learn how to modularise flows so that you can have a more maintainable bot.",icon:function(s){return(0,a.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...s,children:[(0,a.tZ)("path",{strokeWidth:"0",fillRule:"evenodd",clipRule:"evenodd",d:"M10 .5a9.5 9.5 0 0 1 5.598 17.177C14.466 15.177 12.383 13.5 10 13.5s-4.466 1.677-5.598 4.177A9.5 9.5 0 0 1 10 .5ZM12.5 8a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"}),(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M10 .5a9.5 9.5 0 0 1 5.598 17.177A9.458 9.458 0 0 1 10 19.5a9.458 9.458 0 0 1-5.598-1.823A9.5 9.5 0 0 1 10 .5Z"}),(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M4.402 17.677C5.534 15.177 7.617 13.5 10 13.5s4.466 1.677 5.598 4.177M10 5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"})]})},pattern:{y:16,squares:[[0,1],[1,3]]}},{href:"/tutorials/api-use",name:"Send Message",description:"How to send a message via HTTP to start conversations, you can send multimedia as well.",icon:function(s){return(0,a.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...s,children:[(0,a.tZ)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10 16.5c4.142 0 7.5-3.134 7.5-7s-3.358-7-7.5-7c-4.142 0-7.5 3.134-7.5 7 0 1.941.846 3.698 2.214 4.966L3.5 17.5c2.231 0 3.633-.553 4.513-1.248A8.014 8.014 0 0 0 10 16.5Z"}),(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 8.5h5M8.5 11.5h3"})]})},pattern:{y:-6,squares:[[-1,2],[1,3]]}},{href:"/deploy/docker",name:"Dockerizer",description:"A good practice is to dockerise your bots to make them more maintainable and effective.",icon:function(s){return(0,a.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...s,children:[(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M2.5 5.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-8Z"}),(0,a.tZ)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10 10 4.526 5.256c-.7-.607-.271-1.756.655-1.756h9.638c.926 0 1.355 1.15.655 1.756L10 10Z"})]})},pattern:{y:32,squares:[[0,2],[1,4]]}},{href:"/events",name:"Events",description:"Learning about events will make us more fluent when creating chatbots.",icon:function(s){return(0,a.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...s,children:[(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M10.046 16H1.955a.458.458 0 0 1-.455-.459C1.5 13.056 3.515 11 6 11h.5"}),(0,a.tZ)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 15.454C7.5 12.442 9.988 10 13 10s5.5 2.442 5.5 5.454a.545.545 0 0 1-.546.546H8.045a.545.545 0 0 1-.545-.546Z"}),(0,a.tZ)("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",d:"M6.5 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"}),(0,a.tZ)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"})]})},pattern:{y:22,squares:[[0,1]]}}];function ResourceIcon(s){let{icon:o}=s;return(0,a.tZ)("div",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-teal-300/10 dark:group-hover:ring-teal-400",children:(0,a.tZ)(o,{className:"h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-teal-300/10 dark:group-hover:stroke-teal-400"})})}function ResourcePattern(s){let{mouseX:o,mouseY:n,...e}=s,t=useMotionTemplate`radial-gradient(180px at ${o}px ${n}px, white, transparent)`,r={maskImage:t,WebkitMaskImage:t};return(0,a.BX)("div",{className:"pointer-events-none",children:[(0,a.tZ)("div",{className:"absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50",children:(0,a.tZ)(c.K,{width:72,height:56,x:"50%",className:"absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dar
1k:stroke-white/2.5",...e})}),(0,a.tZ)(l.E.div,{className:"absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#202D2E] dark:to-[#303428]",style:r}),(0,a.tZ)(l.E.div,{className:"absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100",style:r,children:(0,a.tZ)(c.K,{width:72,height:56,x:"50%",className:"absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10",...e})})]})}function Resource(s){let{resource:o}=s,n=(0,p.c)(0),e=(0,p.c)(0);return(0,a.BX)("div",{onMouseMove:function(s){let{currentTarget:o,clientX:a,clientY:t}=s,{left:r,top:i}=o.getBoundingClientRect();n.set(a-r),e.set(t-i)},className:"group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5",children:[(0,a.tZ)(ResourcePattern,{...o.pattern,mouseX:n,mouseY:e}),(0,a.tZ)("div",{className:"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20"}),(0,a.BX)("div",{className:"relative rounded-2xl px-4 pb-4 pt-16",children:[(0,a.tZ)(ResourceIcon,{icon:o.icon}),(0,a.tZ)("h3",{className:"mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white",children:(0,a.BX)(t(),{href:o.href,children:[(0,a.tZ)("span",{className:"absolute inset-0 rounded-2xl"}),o.name]})}),(0,a.tZ)("p",{className:"mt-1 text-sm text-zinc-600 dark:text-zinc-400",children:o.description})]})]},o.href)}function Resources(){return(0,a.BX)("div",{className:"my-16 xl:max-w-none",children:[(0,a.tZ)(k.X,{level:2,id:"resources",children:"Resources"}),(0,a.tZ)("div",{className:"not-prose mt-4 grid grid-cols-1 gap-8 border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4",children:h.map(s=>(0,a.tZ)(Resource,{resource:s},s.href))})]})}}},function(s){s.O(0,[2888,179],function(){return s(s.s=64153)}),_N_E=s.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.