1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5047],{32879:function(o,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/pt/concepts",function(){return n(13985)}])},13985:function(o,s,n){"use strict";n.r(s),n.d(s,{__N_SSG:function(){return p},default:function(){return MDXContent}});var e=n(97997),a=n(11151),r=n(65928),t=n(38706),i=n(86156),l=n(99686);function _createMdxContent(o){let s={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,a.ah)(),...o.components},{Button:n,CodeGroup:p}=s;return n||_missingMdxReference("Button",!0),p||_missingMdxReference("CodeGroup",!0),(0,e.BX)(e.HY,{children:[(0,e.tZ)(s.h1,{children:"Concepts"}),"\n",(0,e.tZ)(s.p,{children:"A biblioteca baseia-se em tr\xeas componentes fundamentais para o seu correcto funcionamento: o fluxo, encarregado de construir o contexto da conversa e de oferecer uma interface amig\xe1vel ao programador; o fornecedor, que actua como um conector que permite alternar facilmente entre os fornecedores do WhatsApp sem o risco de afectar outras partes do bot; e a base de dados, que em conson\xe2ncia com esta filosofia do conector, facilita a altera\xe7\xe3o da camada de persist\xeancia de dados sem a necessidade de reescrever o fluxo de trabalho."}),"\n",(0,e.tZ)(r.G,{chart:`flowchart LR 2 a{Flow}-->b[(Database)]-->c(((Provider)))`}),"\n",(0,e.tZ)(s.hr,{}),"\n",(0,e.tZ)(s.h2,{id:"flow",children:"Flow"}),"\n",(0,e.tZ)(s.p,{children:"Refere-se \xe0 cria\xe7\xe3o de sequ\xeancias estruturadas de intera\xe7\xf5es, como na constru\xe7\xe3o de fluxos de conversa\xe7\xe3o. Dois m\xe9todos principais s\xe3o addKeyword e addAnswer, que permitem que palavras-chave sejam associadas a respostas espec\xedficas, fornecendo op\xe7\xf5es para personalizar o fluxo da conversa."}),"\n",(0,e.BX)(p,{children:[(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword } from '@builderbot/bot'\n\naddKeyword(['hello','hi']).addAnswer('Ey! welcome')\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { addKeyword } </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>\n<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-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)">'Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>'}),title:"app.ts"}),(0,e.tZ)(s.pre,{language:"js",code:"const { addKeyword } = require('@builderbot/bot') \n\naddKeyword(['hello','hi']).addAnswer('Ey! welcome')\n",children:(0,e.tZ)(s.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)">addKeyword</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-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-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)">'
2Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>'}),title:"app.js"})]}),"\n",(0,e.BX)(s.p,{children:["Alguns exemplos de como usar a palavra-chave add na qual voc\xea pode colocar a __keyword__ou uma lista de ",(0,e.tZ)(s.strong,{children:"keywords"})," que ser\xe1 usada para iniciar um fluxo de conversa\xe7\xe3o"]}),"\n",(0,e.tZ)(s.pre,{language:"ts",code:"// Example with single keyword\naddKeyword('hello').addAnswer('Ey! welcome')\n\n// Example with multi keywords\naddKeyword(['hello','hi']).addAnswer('Ey! welcome')\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-comment)">// Example with single keyword</span></span>\n<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-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)">'Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">// Example with multi keywords</span></span>\n<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-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)">'Ey! welcome'</span><span style="color: var(--shiki-color-text)">)</span></span>\n<span></span>'})}),"\n",(0,e.tZ)(s.p,{children:"Para uma r\xe1pida compreens\xe3o da opera\xe7\xe3o, preparamos um exemplo b\xe1sico de como implementar"}),"\n",(0,e.tZ)("div",{className:"not-prose aling-block",children:(0,e.tZ)(n,{href:"/uses-cases",variant:"text",arrow:"right",children:"View more examples"})}),"\n",(0,e.tZ)(s.hr,{}),"\n",(0,e.tZ)(s.h2,{id:"provider",children:"Provider"}),"\n",(0,e.BX)(s.p,{children:["\xc9 uma pe\xe7a-chave usada para entregar a mensagem ao fornecedor escolhido. No caso de voc\xea estar construindo um bot para o whatsapp, voc\xea deve usar um adaptador como ",(0,e.tZ)(s.strong,{children:"Meta"}),", ",(0,e.tZ)(s.strong,{children:"Twilio"}),", ",(0,e.tZ)(s.strong,{children:"Baileys"}),", etc ou mesmo se quiser se conectar ao ",(0,e.tZ)(s.strong,{children:"Telegram"}),"."]}),"\n",(0,e.BX)(p,{children:[(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { BaileysProvider } from '@builderbot/provider-baileys'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(BaileysProvider),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">import</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-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-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)">
2import</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)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(BaileysProvider)</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"app.ts"}),(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { WPPConnectProviderClass } from '@builderbot/provider-wppconnect'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(WPPConnectProviderClass),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">import</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-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-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)">
2import</span><span style="color: var(--shiki-color-text)"> { WPPConnectProviderClass } </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-wppconnect'</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(WPPConnectProviderClass)</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"provider.wppconnect.ts"}),(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { MetaProvider } from '@builderbot/provider-meta'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(MetaProvider, {\n jwtToken: 'jwtToken',\n numberId: 'numberId',\n verifyToken: 'verifyToken',\n version: 'v16.0',\n }),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">import</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-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-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)">
2import</span><span style="color: var(--shiki-color-text)"> { MetaProvider } </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-meta'</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(MetaProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> jwtToken</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)">'jwtToken'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> numberId</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)">'numberId'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> verifyToken</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)">'verifyToken'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> version</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)">'v16.0'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"provider.meta.ts"})]}),"\n",(0,e.tZ)("div",{className:"not-prose aling-block",children:(0,e.tZ)(n,{href:"/providers",variant:"text",arrow:"right",children:"More information about the providers "})}),"\n",(0,e.tZ)(s.hr,{}),"\n",(0,e.tZ)(s.h2,{id:"database",children:"Database"}),"\n",(0,e.tZ)(s.p,{children:"Assim como os fornecedores podem ser facilmente trocados entre adaptadores, podemos fazer o mesmo com a base de dados. Agora, o importante a entender \xe9 como funciona. O principal objetivo do banco de dados dentro da inicializa\xe7\xe3o \xe9 fornecer ao bot um registro dos diferentes eventos que ocorreram entre diferentes conversas."}),"\n",(0,e.BX)(s.p,{children:["Est\xe1 pronto para implementar adaptadores de ",(0,e.tZ)(s.a,{href:"/databases#mongo",children:"Mongo"}),", ",(0,e.tZ)(s.a,{href:"/databases#my-sql",children:"MySQL"}),", ",(0,e.tZ)(s.a,{href:"/databases#postgres",children:"Postgres"}),", entre outros."]}),"\n",(0,e.BX)(p,{children:[(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { BaileysProvider } from '@builderbot/provider-baileys'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(BaileysProvider),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">
2import</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-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-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)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(BaileysProvider)</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"app.ts"}),(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { WPPConnectProviderClass } from '@builderbot/provider-wppconnect'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(WPPConnectProviderClass),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">
2import</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-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-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)"> { WPPConnectProviderClass } </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-wppconnect'</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(WPPConnectProviderClass)</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"provider.wppconnect.ts"}),(0,e.tZ)(s.pre,{language:"ts",code:"import { addKeyword, MemoryDB, createProvider, createFlow } from '@builderbot/bot'\nimport { MetaProvider } from '@builderbot/provider-meta'\n\n// ...stuff code...\n\nconst main = async () => {\n \n await createBot({\n database: new MemoryDB(),\n provider: createProvider(MetaProvider, {\n jwtToken: 'jwtToken',\n numberId: 'numberId',\n verifyToken: 'verifyToken',\n version: 'v16.0',\n }),\n flow: createFlow([flowDemo])\n })\n}\n\nmain()\n",children:(0,e.tZ)(s.code,{className:"language-ts",children:'<span><span style="color: var(--shiki-token-keyword)">
2import</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-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-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)"> { MetaProvider } </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-meta'</span></span>\n<span></span>\n<span><span style="color: var(--shiki-token-comment)">// ...stuff code...</span></span>\n<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 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)">createBot</span><span style="color: var(--shiki-color-text)">({</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)"> </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 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)"> </span><span style="color: var(--shiki-token-function)">createProvider</span><span style="color: var(--shiki-color-text)">(MetaProvider</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> {</span></span>\n<span><span style="color: var(--shiki-color-text)"> jwtToken</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)">'jwtToken'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> numberId</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)">'numberId'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> verifyToken</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)">'verifyToken'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> version</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)">'v16.0'</span><span style="color: var(--shiki-token-punctuation)">,</span></span>\n<span><span style="color: var(--shiki-color-text)"> })</span><span style="color: var(--shiki-token-punctuation)">,</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)"> </span><span style="color: var(--shiki-token-function)">createFlow</span><span style="color: var(--shiki-color-text)">([flowDemo])</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>'}),title:"provider.meta.ts"})]}),"\n",(0,e.tZ)("div",{className:"not-prose aling-block",children:(0,e.tZ)(n,{href:"/databases",variant:"text",arrow:"right",children:"More information about the databases "})}),"\n",(0,e.tZ)(s.hr,{}),"\n",(0,e.tZ)(i.t,{}),"\n",(0,e.tZ)(l._,{}),"\n",(0,e.tZ)(t.T,{users:["leifermendez","elimeleth"]})]})}var p=!0;function MDXContent(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,a.ah)(),...o.components};return s?(0,e.tZ)(s,{...o,children:(0,e.tZ)(_createMdxContent,{...o})}):_createMdxContent(o)}function _missingMdxReference(o,s){throw Error("Expected "+(s?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}},38706:function(o,s,n){"use strict";n.d(s,{T:function(){return Contributors}});var e=n(97997),a=n(11720),r=n(25675),t=n.n(r),i=n(93077);let l=(0,i.createCache)((0,i.memoryStore)(),{max:100,ttl:864e5,ttlAutopurge:!0}),getProfiles=async function(){let o,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];s=s.map(o=>o.toLowerCase());let fetchUser=async o=>{let s=await l.get(`contributors-${o}`);if(s)return s;let n=await fetch(`https://api.github.com/users/${o}`,{next:{revalidate:3600}});if(!n.ok)throw Error(`Failed to fetch GitHub user: ${o}`);let e=await n.json();return await l.set(`contributors-${o}`,e,864e5),e};o=await Promise.all(s.map(async o=>{try{let s=await fetchUser(o);return{id:s.id,name:s.login.toLowerCase(),avatar:s.avatar_url,profile:s.html_url,contributions:s.contributions}}catch(o){return console.error(o.message),null}}));let n=o.filter(o=>null!==o);return n};function Contributors(o){let{users:s,mode:n}=o,[r,i]=(0,a.useState)([]);return((0,a.useEffect)(()=>{(async function(){try{let o=await getProfiles(s);i(o)}catch(o){console.error("Error fetching profiles:",o)}})()},[]),r.length)?(0,e.tZ)("div",{className:"place-content-center",children:(0,e.tZ)("ul",{className:"flex flex-wrap gap-2 p-0 m-0",children:r.map(o=>(0,e.BX)("li",{className:"list-none p-0 m-0 flex gap-2 bg-gray-100 dark:bg-white/2.5 dark:ring-1 dark:ring-white/10 rounded-2xl",children:[(0,e.tZ)("a",{href:o.profile,target:"_blank",children:(0,e.tZ)(t(),{src:o.avatar,alt:o.name,width:30,height:30,className:"rounded-full hover:shadow-md transition-all shadow-slate-400 m-0 bg-fuchsia-200"})}),n?(0,e.tZ)("span",{className:"lowercase mr-3",children:o.name}):(0,e.tZ)(e.HY,{})]},"contributor-"+o.id))})}):(0,e.tZ)("div",{className:"min-h-[30px]"})}},86049:function(o,s,n){"use strict";n.d(s,{K:function(){return GridPattern}});var e=n(97997),a=n(11720);function GridPattern(o){let{width:s,height:n,x:r,y:t,squares:i,...l}=o,p=(0,a.useId)();return(0,e.BX)("svg",{"aria-hidden":"true",...l,children:[(0,e.tZ)("defs",{children:(0,e.tZ)("pattern",{id:p,width:s,height:n,patternUnits:"userSpaceOnUse",x:r,y:t,children:(0,e.tZ)("path",{d:`M.5 ${n}V.5H${s}`,fill:"none"})})}),(0,e.tZ)("rect",{width:"100%",height:"100%",strokeWidth:0,fill:`url(#${p})`}),i&&(0,e.tZ)("svg",{x:r,y:t,className:"overflow-visible",children:i.map(o=>{let[a,r]=o;return(0,e.tZ)("rect",{strokeWidth:"0",width:s+1,height:n+1,x:a*s,y:r*n},`${a}-${r}`)})})]})}},86156:function(o,s,n){"use strict";n.d(s,{t:function(){return Guides}});var e=n(97997),a=n(5682),r=n(68289);let t=[{href:"/uses-cases#my-first-bot",name:"My first chatbot",description:"Learn how build your first chatbot in few minutes"},{href:"/concepts",name:"Concepts",description:"Understand the essential concepts for building bots"},{href:"/add-functions",name:"Add Functions",description:"The key to learning how to write flows is add-functions."},{href:"/plugins",name:"Plugins",description:"Unlimitate and start implementing the community plugins."}];function Guides(){return(0,e.BX)("div",{className:"my-16 xl:max-w-none",children:[(0,e.tZ)(r.X,{level:2,id:"guides",children:"Guides"}),(0,e.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:t.map(o=>(0,e.BX)("div",{children:[(0,e.tZ)("h3",{className:"text-sm font-semibold text-zinc-900 dark:text-white",children:o.name}),(0,e.tZ)("p",{className:"mt-1 text-sm text-zinc-600 dark:text-zinc-400",children:o.description}),(0,e.tZ)("p",{className:"mt-4",children:(0,e.tZ)(a.z,{href:o.href,variant:"text",arrow:"right",children:"Read more"})})]},o.href))})]})}},99686:function(o,s,n){"use strict";n.d(s,{_:function(){return Resources}});var e=n(97997),a=n(41664),r=n.n(a),t=n(65512),i=n(40406);
2function useMotionTemplate(o,...s){let n=o.length;return(0,t.N)(s.filter(i.i),function(){let e="";for(let a=0;a<n;a++){e+=o[a];let n=s[a];n&&(e+=(0,i.i)(n)?n.get():n)}return e})}var l=n(50508),p=n(4960),c=n(86049),k=n(68289);let d=[{href:"/showcases/modularize",name:"Modularize",description:"Learn how to modularise flows so that you can have a more maintainable bot.",icon:function(o){return(0,e.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...o,children:[(0,e.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,e.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,e.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(o){return(0,e.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...o,children:[(0,e.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,e.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(o){return(0,e.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...o,children:[(0,e.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,e.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(o){return(0,e.BX)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...o,children:[(0,e.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,e.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,e.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,e.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(o){let{icon:s}=o;return(0,e.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,e.tZ)(s,{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(o){let{mouseX:s,mouseY:n,...a}=o,r=useMotionTemplate`radial-gradient(180px at ${s}px ${n}px, white, transparent)`,t={maskImage:r,WebkitMaskImage:r};return(0,e.BX)("div",{className:"pointer-events-none",children:[(0,e.tZ)("div",{className:"absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50",children:(0,e.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
2k:stroke-white/2.5",...a})}),(0,e.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:t}),(0,e.tZ)(l.E.div,{className:"absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100",style:t,children:(0,e.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",...a})})]})}function Resource(o){let{resource:s}=o,n=(0,p.c)(0),a=(0,p.c)(0);return(0,e.BX)("div",{onMouseMove:function(o){let{currentTarget:s,clientX:e,clientY:r}=o,{left:t,top:i}=s.getBoundingClientRect();n.set(e-t),a.set(r-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,e.tZ)(ResourcePattern,{...s.pattern,mouseX:n,mouseY:a}),(0,e.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,e.BX)("div",{className:"relative rounded-2xl px-4 pb-4 pt-16",children:[(0,e.tZ)(ResourceIcon,{icon:s.icon}),(0,e.tZ)("h3",{className:"mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white",children:(0,e.BX)(r(),{href:s.href,children:[(0,e.tZ)("span",{className:"absolute inset-0 rounded-2xl"}),s.name]})}),(0,e.tZ)("p",{className:"mt-1 text-sm text-zinc-600 dark:text-zinc-400",children:s.description})]})]},s.href)}function Resources(){return(0,e.BX)("div",{className:"my-16 xl:max-w-none",children:[(0,e.tZ)(k.X,{level:2,id:"resources",children:"Resources"}),(0,e.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:d.map(o=>(0,e.tZ)(Resource,{resource:o},o.href))})]})}}},function(o){o.O(0,[152,3077,9501,2888,179],function(){return o(o.s=32879)}),_N_E=o.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.