diff --git a/src/features/docs/pages/getting-started.tsx b/src/features/docs/pages/getting-started.tsx new file mode 100644 index 0000000..1dfbbd3 --- /dev/null +++ b/src/features/docs/pages/getting-started.tsx @@ -0,0 +1,360 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' + +export function GettingStartedPage() { + return ( + + {h1({ children: 'Comece a Usar o Knowly' })} + + {p({ + children: ( + <> + Siga este guia passo a passo para começar a usar a plataforma Knowly + e criar sua primeira base de conhecimento de IA. + + ) + })} + + {h2({ children: 'Passo 1: Criar uma Conta' })} + {p({ + children: ( + <>Para começar, você precisa criar uma conta gratuita no Knowly: + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Acesse a página de{' '} + + cadastro + + + ) + })} + {li({ + children: <>Preencha seus dados: nome, e-mail e senha + })} + {li({ + children: <>Confirme seu e-mail através do link enviado + })} + {li({ + children: ( + <> + Faça login com suas credenciais + + ) + })} + + ) + })} + + {h2({ children: 'Passo 2: Criar uma Base de Conhecimento' })} + {p({ + children: ( + <> + Após fazer login, você pode criar sua primeira base de conhecimento: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Acesse "Minhas Bases" no menu do + usuário + + ) + })} + {li({ + children: ( + <> + Clique em "Nova Base" + + ) + })} + {li({ + children: ( + <> + Escolha um nome para sua base + + ) + })} + {li({ + children: ( + <> + Selecione o modelo de IA que deseja usar (ex: + Amazon Bedrock) + + ) + })} + {li({ + children: ( + <> + Faça upload dos documentos PDF que servirão + como base de conhecimento + + ) + })} + {li({ + children: ( + <> + Clique em "Criar Base" + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Aguarde alguns instantes enquanto o sistema processa seus + documentos. O tempo varia conforme a quantidade e tamanho dos + arquivos. + + ) + })} + + {h2({ children: 'Passo 3: Obter a Chave da Base' })} + {p({ + children: ( + <> + Depois que sua base estiver pronta, você precisa obter a chave de + API para integrá-la: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: <>Na lista de bases, clique na base que você criou + })} + {li({ + children: ( + <> + Na página de detalhes, copie a Chave da Base{' '} + (Base ID) + + ) + })} + {li({ + children: ( + <> + Copie também sua Chave de API (API Key) nas + configurações da conta + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Importante: Guarde essas chaves em um local seguro. + Você precisará delas para fazer requisições à API. + + ) + })} + + {h2({ children: 'Passo 4: Testar no Playground' })} + {p({ + children: ( + <> + Antes de integrar, você pode testar sua base de conhecimento no + Playground: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Clique em "Testar no Playground" na + página da base + + ) + })} + {li({ + children: ( + <> + Digite perguntas relacionadas aos documentos que você enviou + + ) + })} + {li({ + children: ( + <> + Veja as respostas geradas pela IA com base no conhecimento da + sua base + + ) + })} + + ) + })} + + {h2({ children: 'Passo 5: Integrar com seu Código' })} + {p({ + children: ( + <> + Agora você pode integrar a base de conhecimento ao seu sistema + usando nossa API REST: + + ) + })} + + {pre({ + children: `# Exemplo usando cURL +curl -X POST https://api.knowly.dev.br/chat \\ + -H "Content-Type: application/json" \\ + -d '{ + "kb_key": "knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd", + "model": "MISTRAL_SMALL", + "prompt": "Qual é o horário de atendimento?" + }'` + })} + + {p({ + children: ( + <> + Exemplo em JavaScript/Node.js: + + ) + })} + + {pre({ + children: `fetch('https://api.knowly.dev.br/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + model: 'MISTRAL_SMALL', + prompt: 'Qual é o horário de atendimento?' + }) +}) + .then(response => response.json()) + .then(data => console.log(data.response));` + })} + + {p({ + children: ( + <> + Exemplo em Python: + + ) + })} + + {pre({ + children: `import requests + +response = requests.post( + 'https://api.knowly.dev.br/chat', + headers={ + 'Content-Type': 'application/json', + }, + json={ + 'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + 'model': 'MISTRAL_SMALL', + 'prompt': 'Qual é o horário de atendimento?' + } +) + +data = response.json() +print(data['response'])` + })} + + {h2({ children: 'Próximos Passos' })} + {p({ + children: ( + <> + Agora que você já sabe como começar, explore mais recursos da + plataforma: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Aprenda mais sobre{' '} + + Modelos de Fundação + + + ) + })} + {li({ + children: ( + <> + Veja detalhes sobre{' '} + + + Gerenciamento de Bases de Conhecimento + + + + ) + })} + {li({ + children: ( + <> + Explore opções avançadas de{' '} + + Integração + + + ) + })} + {li({ + children: ( + <> + Gerencie sua{' '} + + Assinatura + + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Precisa de ajuda? Consulte nossa{' '} + + página de FAQ + {' '} + ou entre em{' '} + + contato + + . + + ) + })} + + ) +} + +export default GettingStartedPage diff --git a/src/features/docs/pages/integration-api.tsx b/src/features/docs/pages/integration-api.tsx new file mode 100644 index 0000000..52f5d09 --- /dev/null +++ b/src/features/docs/pages/integration-api.tsx @@ -0,0 +1,84 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' + +export function IntegrationApiPage() { + return ( + + {h1({ children: 'Integração via API' })} + + {h2({ children: 'Integração simples via API' })} + {p({ + children: ( + <> + Depois de criar sua base de conhecimento no Knowly, você pode + integrá-la facilmente ao seu sistema usando nossa API. O + funcionamento é parecido com a API da OpenAI, muito usada em + chatbots de atendimento, como no WhatsApp. + + ) + })} + + {h2({ children: 'Como funciona?' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Você envia um prompt (mensagem ou pergunta) + para a API, junto com sua chave de acesso. + + ) + })} + {li({ + children: ( + <> + A API responde com a melhor resposta baseada nos documentos + que você enviou para sua base. + + ) + })} + {li({ + children: ( + <> + É possível usar essa integração em sites, sistemas internos, + chatbots e muito mais. + + ) + })} + + ) + })} + + {h2({ children: 'Exemplo de requisição' })} + {pre({ + children: `POST https://api.knowly.dev.br/chat +Headers: + Content-Type: application/json +Body: +{ + "kb_key": "knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd", + "model": "MISTRAL_SMALL", + "prompt": "Como faço para atualizar meus dados cadastrais?" +}` + })} + + {p({ + children: ( + <> + A resposta virá em formato JSON, com o texto gerado pela IA usando o + conhecimento da sua base. Assim, você pode automatizar atendimentos, + responder dúvidas de clientes ou integrar a IA ao seu sistema de + forma simples e eficiente. + + ) + })} + + ) +} + +export default IntegrationApiPage diff --git a/src/features/docs/pages/integration-instagram.tsx b/src/features/docs/pages/integration-instagram.tsx new file mode 100644 index 0000000..234c1ab --- /dev/null +++ b/src/features/docs/pages/integration-instagram.tsx @@ -0,0 +1,426 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' + +export function IntegrationInstagramPage() { + return ( + + {h1({ children: 'Integração com Instagram' })} + + {p({ + children: ( + <> + Automatize respostas nas mensagens diretas (DMs) do Instagram usando + a API do Knowly para responder automaticamente perguntas dos + usuários com base na sua base de conhecimento. + + ) + })} + + {h2({ children: 'Passo 1: Configurar Instagram Business Account' })} + {p({ + children: ( + <> + Para usar a API do Instagram, você precisa ter uma{' '} + Conta Business do Instagram conectada a uma{' '} + Página do Facebook: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Acesse{' '} + + Meta Business Suite + + + ) + })} + {li({ + children: ( + <>Conecte sua conta do Instagram a uma Página do Facebook + ) + })} + {li({ + children: ( + <> + Converta para uma Conta Business no Instagram + + ) + })} + {li({ + children: ( + <> + Configure as permissões necessárias:{' '} + instagram_basic,{' '} + instagram_manage_messages + + ) + })} + + ) + })} + + {h2({ children: 'Passo 2: Obter Token de Acesso' })} + {p({ + children: ( + <> + No{' '} + + Meta for Developers + + , crie um app e obtenha um token de acesso com as permissões + necessárias para gerenciar mensagens do Instagram. + + ) + })} + + {h2({ children: 'Passo 3: Configurar Webhook' })} + {p({ + children: ( + <> + Configure um webhook para receber notificações de mensagens diretas: + + ) + })} + + {pre({ + children: `# URL do Webhook +https://seu-servidor.com/webhook/instagram + +# Assine o evento: messages +# Receberá notificações quando usuários enviarem DMs + +# Exemplo de payload recebido: +{ + "object": "instagram", + "entry": [{ + "id": "INSTAGRAM_BUSINESS_ACCOUNT_ID", + "time": 1704116400, + "messaging": [{ + "sender": { "id": "USER_ID" }, + "recipient": { "id": "PAGE_ID" }, + "timestamp": 1704116400, + "message": { + "mid": "MESSAGE_ID", + "text": "Qual é o horário de funcionamento?" + } + }] + }] +}` + })} + + {h2({ children: 'Passo 4: Integrar com Knowly API' })} + {p({ + children: ( + <> + Quando receber uma mensagem via webhook, consulte a API do Knowly e + envie a resposta de volta ao usuário: + + ) + })} + + {p({ + children: ( + <> + Exemplo em Node.js: + + ) + })} + + {pre({ + children: `const express = require('express'); +const app = express(); + +app.post('/webhook/instagram', async (req, res) => { + const { entry } = req.body; + + // Processar cada mensagem recebida + for (const event of entry) { + for (const messaging of event.messaging) { + const senderId = messaging.sender.id; + const messageText = messaging.message?.text; + + if (!messageText) continue; + + // Consultar API do Knowly + const knowlyResponse = await fetch('https://api.knowly.dev.br/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + model: 'MISTRAL_SMALL', + prompt: messageText + }) + }); + + const data = await knowlyResponse.json(); + const aiResponse = data.response; + + // Enviar resposta via Instagram Messaging API + await sendInstagramMessage(senderId, aiResponse); + } + } + + res.sendStatus(200); +}); + +// Função para enviar mensagem pelo Instagram +async function sendInstagramMessage(recipientId, message) { + const pageId = 'SEU_INSTAGRAM_BUSINESS_ACCOUNT_ID'; + + await fetch(\`https://graph.facebook.com/v18.0/\${pageId}/messages\`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer SEU_TOKEN_INSTAGRAM' + }, + body: JSON.stringify({ + recipient: { id: recipientId }, + message: { text: message } + }) + }); +} + +// Endpoint de verificação do webhook (obrigatório) +app.get('/webhook/instagram', (req, res) => { + const mode = req.query['hub.mode']; + const token = req.query['hub.verify_token']; + const challenge = req.query['hub.challenge']; + + if (mode === 'subscribe' && token === 'SEU_TOKEN_DE_VERIFICACAO') { + res.status(200).send(challenge); + } else { + res.sendStatus(403); + } +});` + })} + + {p({ + children: ( + <> + Exemplo em Python: + + ) + })} + + {pre({ + children: `from flask import Flask, request +import requests + +app = Flask(__name__) + +@app.route('/webhook/instagram', methods=['POST']) +def instagram_webhook(): + data = request.json + + # Processar mensagens + for entry in data.get('entry', []): + for messaging in entry.get('messaging', []): + sender_id = messaging['sender']['id'] + message_text = messaging.get('message', {}).get('text') + + if not message_text: + continue + + # Consultar API do Knowly + knowly_response = requests.post( + 'https://api.knowly.dev.br/chat', + headers={ + 'Content-Type': 'application/json', + }, + json={ + 'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + 'model': 'MISTRAL_SMALL', + 'prompt': message_text + } + ) + + ai_response = knowly_response.json()['response'] + + # Enviar resposta pelo Instagram + send_instagram_message(sender_id, ai_response) + + return '', 200 + +def send_instagram_message(recipient_id, message): + page_id = 'SEU_INSTAGRAM_BUSINESS_ACCOUNT_ID' + + requests.post( + f'https://graph.facebook.com/v18.0/{page_id}/messages', + headers={ + 'Content-Type': 'application/json', + 'Authorization': 'Bearer SEU_TOKEN_INSTAGRAM' + }, + json={ + 'recipient': {'id': recipient_id}, + 'message': {'text': message} + } + ) + +@app.route('/webhook/instagram', methods=['GET']) +def verify_webhook(): + mode = request.args.get('hub.mode') + token = request.args.get('hub.verify_token') + challenge = request.args.get('hub.challenge') + + if mode == 'subscribe' and token == 'SEU_TOKEN_DE_VERIFICACAO': + return challenge, 200 + return '', 403` + })} + + {h2({ children: 'Passo 5: Testar a Integração' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Envie uma mensagem direta para sua conta Business do Instagram + + ) + })} + {li({ + children: <>Verifique se o webhook está recebendo a notificação + })} + {li({ + children: ( + <> + Confirme que a API do Knowly está retornando respostas + adequadas + + ) + })} + {li({ + children: ( + <> + Valide se as respostas estão sendo enviadas corretamente ao + usuário + + ) + })} + + ) + })} + + {h2({ children: 'Funcionalidades Avançadas' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Respostas rápidas: Configure botões de + resposta rápida para melhorar a experiência + + ) + })} + {li({ + children: ( + <> + Mídia: Envie imagens ou vídeos junto com as + respostas quando apropriado + + ) + })} + {li({ + children: ( + <> + Templates: Use templates pré-aprovados para + respostas frequentes + + ) + })} + {li({ + children: ( + <> + Horário comercial: Configure respostas + automáticas apenas fora do horário comercial + + ) + })} + + ) + })} + + {h2({ children: 'Boas Práticas' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Transparência: Informe aos usuários que estão + interagindo com um assistente automático + + ) + })} + {li({ + children: ( + <> + Escalação: Ofereça opção de falar com + atendente humano quando necessário + + ) + })} + {li({ + children: ( + <> + Tempo de resposta: Configure timeout adequado + (máx. 10 segundos) + + ) + })} + {li({ + children: ( + <> + Monitoramento: Acompanhe métricas de + satisfação e qualidade das respostas + + ) + })} + {li({ + children: ( + <> + Políticas do Instagram: Respeite as + diretrizes de mensagens automatizadas da plataforma + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Com essa integração, você poderá responder automaticamente mensagens + diretas no Instagram, melhorando o engajamento com sua audiência e + fornecendo suporte instantâneo 24/7. + + ) + })} + + ) +} + +export default IntegrationInstagramPage diff --git a/src/features/docs/pages/integration-whatsapp.tsx b/src/features/docs/pages/integration-whatsapp.tsx new file mode 100644 index 0000000..7e43943 --- /dev/null +++ b/src/features/docs/pages/integration-whatsapp.tsx @@ -0,0 +1,296 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' + +export function IntegrationWhatsAppPage() { + return ( + + {h1({ children: 'Integração com WhatsApp Business' })} + + {p({ + children: ( + <> + Automatize o atendimento no WhatsApp Business usando a API do Knowly + para responder automaticamente mensagens de clientes com base na sua + base de conhecimento. + + ) + })} + + {h2({ children: 'Passo 1: Configurar o WhatsApp Business API' })} + {p({ + children: ( + <> + Primeiro, você precisa ter acesso à{' '} + WhatsApp Business API. Você pode configurar através + de: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Meta Business Platform - Acesse{' '} + + business.facebook.com + {' '} + e configure sua conta + + ) + })} + {li({ + children: ( + <> + Provedores terceiros - Como Twilio, + 360Dialog, ou MessageBird + + ) + })} + + ) + })} + + {h2({ children: 'Passo 2: Configurar Webhook' })} + {p({ + children: ( + <> + Configure um webhook para receber mensagens dos clientes. Este + endpoint receberá as mensagens enviadas ao seu número do WhatsApp + Business. + + ) + })} + + {p({ + children: ( + <> + Exemplo de configuração de webhook: + + ) + })} + + {pre({ + children: `# URL do Webhook +https://seu-servidor.com/webhook/whatsapp + +# Método: POST +# Receberá mensagens no formato: +{ + "from": "5511999999999", + "message": "Qual é o horário de atendimento?", + "timestamp": "2025-01-15T10:30:00Z" +}` + })} + + {h2({ children: 'Passo 3: Integrar com Knowly API' })} + {p({ + children: ( + <> + No seu servidor, ao receber uma mensagem via webhook, faça uma + requisição para a API do Knowly para obter a resposta: + + ) + })} + + {p({ + children: ( + <> + Exemplo em Node.js: + + ) + })} + + {pre({ + children: `// Servidor Express recebendo webhook do WhatsApp +app.post('/webhook/whatsapp', async (req, res) => { + const { from, message } = req.body; + + // Consultar API do Knowly + const knowlyResponse = await fetch('https://api.knowly.dev.br/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + model: 'MISTRAL_SMALL', + prompt: message + }) + }); + + const data = await knowlyResponse.json(); + const aiResponse = data.response; + + // Enviar resposta de volta para o WhatsApp + await sendWhatsAppMessage(from, aiResponse); + + res.sendStatus(200); +}); + +// Função para enviar mensagem pelo WhatsApp Business API +async function sendWhatsAppMessage(to, message) { + await fetch('https://graph.facebook.com/v18.0/SEU_PHONE_NUMBER_ID/messages', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer SEU_TOKEN_WHATSAPP' + }, + body: JSON.stringify({ + messaging_product: 'whatsapp', + to: to, + text: { body: message } + }) + }); +}` + })} + + {p({ + children: ( + <> + Exemplo em Python: + + ) + })} + + {pre({ + children: `from flask import Flask, request +import requests + +app = Flask(__name__) + +@app.route('/webhook/whatsapp', methods=['POST']) +def whatsapp_webhook(): + data = request.json + from_number = data['from'] + message = data['message'] + + # Consultar API do Knowly + knowly_response = requests.post( + 'https://api.knowly.dev.br/chat', + headers={ + 'Content-Type': 'application/json', + }, + json={ + 'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd', + 'model': 'MISTRAL_SMALL', + 'prompt': message + } + ) + + ai_response = knowly_response.json()['response'] + + # Enviar resposta pelo WhatsApp Business API + send_whatsapp_message(from_number, ai_response) + + return '', 200 + +def send_whatsapp_message(to, message): + requests.post( + f'https://graph.facebook.com/v18.0/SEU_PHONE_NUMBER_ID/messages', + headers={ + 'Content-Type': 'application/json', + 'Authorization': 'Bearer SEU_TOKEN_WHATSAPP' + }, + json={ + 'messaging_product': 'whatsapp', + 'to': to, + 'text': {'body': message} + } + )` + })} + + {h2({ children: 'Passo 4: Testar a Integração' })} + {ul({ + children: ( + <> + {li({ + children: ( + <>Envie uma mensagem para seu número do WhatsApp Business + ) + })} + {li({ + children: <>Verifique se o webhook está recebendo a mensagem + })} + {li({ + children: ( + <>Confirme que a API do Knowly está retornando respostas + ) + })} + {li({ + children: ( + <> + Valide se as respostas estão sendo enviadas de volta ao + cliente + + ) + })} + + ) + })} + + {h2({ children: 'Dicas Importantes' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Timeout: Configure um tempo limite razoável + para requisições (recomendado: 10-15 segundos) + + ) + })} + {li({ + children: ( + <> + Tratamento de erros: Implemente mensagens de + fallback caso a API não responda + + ) + })} + {li({ + children: ( + <> + Rate limiting: Respeite os limites de taxa do + WhatsApp Business API + + ) + })} + {li({ + children: ( + <> + Contexto: Considere manter histórico de + conversas para melhorar as respostas + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Com essa integração, seu WhatsApp Business responderá + automaticamente aos clientes usando o conhecimento da sua base, + proporcionando atendimento 24/7 e reduzindo a carga de trabalho da + equipe. + + ) + })} + + ) +} + +export default IntegrationWhatsAppPage diff --git a/src/features/docs/pages/next-steps.tsx b/src/features/docs/pages/next-steps.tsx new file mode 100644 index 0000000..94120c8 --- /dev/null +++ b/src/features/docs/pages/next-steps.tsx @@ -0,0 +1,324 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li } from '@/shared/components/typography' + +export function NextStepsPage() { + return ( + + {h1({ children: 'Próximos Passos' })} + + {p({ + children: ( + <> + Estamos constantemente inovando e desenvolvendo novas + funcionalidades para tornar o Knowly ainda mais poderoso e fácil de + usar. Confira o que estamos planejando para o futuro da plataforma. + + ) + })} + + {h2({ children: 'Roadmap de Novas Features' })} + + {h2({ children: 'Sistema de Chatbot Multi-Tenant (Em Desenvolvimento)' })} + {p({ + children: ( + <> + Nossa próxima grande funcionalidade é um{' '} + sistema de chatbot multi-tenant completo que + simplificará drasticamente a integração do Knowly em suas + plataformas. + + ) + })} + + {p({ + children: ( + <> + O que é? + + ) + })} + {p({ + children: ( + <> + Um sistema de chatbot gerenciado e hospedado pela Knowly que você + poderá integrar diretamente em seus canais de atendimento, sem + precisar se preocupar com infraestrutura, webhooks ou gerenciamento + de APIs. + + ) + })} + + {p({ + children: ( + <> + Benefícios: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Zero configuração de infraestrutura: Não será + mais necessário criar e manter servidores para consumir as + APIs das bases de conhecimento + + ) + })} + {li({ + children: ( + <> + Integração simplificada: Basta conectar suas + contas do WhatsApp Business, Instagram, ou outras plataformas + diretamente no painel do Knowly + + ) + })} + {li({ + children: ( + <> + Gerenciamento centralizado: Controle todos os + seus chatbots de diferentes plataformas em um único lugar + + ) + })} + {li({ + children: ( + <> + Multi-tenant: Suporte a múltiplas empresas e + organizações com isolamento completo de dados + + ) + })} + {li({ + children: ( + <> + Escalabilidade automática: Nossa + infraestrutura cuida de todo o dimensionamento automaticamente + + ) + })} + {li({ + children: ( + <> + Monitoramento em tempo real: Acompanhe + métricas de conversas, satisfação e performance dos chatbots + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Plataformas suportadas: + + ) + })} + {ul({ + children: ( + <> + {li({ children: 'WhatsApp Business' })} + {li({ children: 'Instagram Direct Messages' })} + {li({ children: 'Website (Widget de chat embarcado)' })} + {li({ children: 'Facebook Messenger (Em breve)' })} + {li({ children: 'Telegram (Em breve)' })} + {li({ children: 'Slack (Em breve)' })} + {li({ + children: + 'E-commerce (integração com Shopify, WooCommerce, etc.) (Em breve)' + })} + + ) + })} + + {p({ + children: ( + <> + Como funcionará: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Passo 1: No painel do Knowly, acesse a seção + "Chatbots" + + ) + })} + {li({ + children: ( + <> + Passo 2: Selecione a plataforma que deseja + integrar (WhatsApp, Instagram, Website, etc.) + + ) + })} + {li({ + children: ( + <> + Passo 3: Conecte sua conta seguindo o fluxo + de autenticação simplificado + + ) + })} + {li({ + children: ( + <> + Passo 4: Associe uma ou mais bases de + conhecimento ao chatbot + + ) + })} + {li({ + children: ( + <> + Passo 5: Configure opções como horário de + atendimento, mensagens de boas-vindas, e regras de escalação + + ) + })} + {li({ + children: ( + <> + Passo 6: Ative o chatbot e comece a receber + atendimentos automatizados! + + ) + })} + + ) + })} + + {h2({ children: 'Análises e Insights Avançados' })} + {p({ + children: ( + <> + Além do chatbot multi-tenant, estamos desenvolvendo um sistema + completo de análises para você entender melhor como seus clientes + interagem com a IA: + + ) + })} + {ul({ + children: ( + <> + {li({ + children: + 'Dashboard com métricas de performance das bases de conhecimento' + })} + {li({ + children: 'Análise de sentimento das conversas' + })} + {li({ + children: 'Identificação de perguntas frequentes não respondidas' + })} + {li({ + children: + 'Sugestões de melhoria para otimizar suas bases de conhecimento' + })} + {li({ + children: 'Relatórios de satisfação do cliente' + })} + + ) + })} + + {h2({ children: 'Customização Avançada de Respostas' })} + {ul({ + children: ( + <> + {li({ + children: + 'Templates personalizáveis para diferentes tipos de perguntas' + })} + {li({ + children: + 'Tom de voz configurável (formal, casual, técnico, etc.)' + })} + {li({ + children: + 'Regras de negócio customizadas para tratamento especial de certos tópicos' + })} + {li({ + children: 'Respostas com rich media (imagens, vídeos, carrosséis)' + })} + + ) + })} + + {h2({ children: 'Suporte Multilíngue' })} + {ul({ + children: ( + <> + {li({ + children: 'Detecção automática do idioma do usuário' + })} + {li({ + children: + 'Respostas em múltiplos idiomas a partir da mesma base de conhecimento' + })} + {li({ + children: 'Tradução automática de documentos' + })} + + ) + })} + + {h2({ children: 'Integrações com CRMs e Ferramentas' })} + {ul({ + children: ( + <> + {li({ + children: 'Integração nativa com Salesforce, HubSpot, Pipedrive' + })} + {li({ + children: + 'Webhooks personalizados para integração com qualquer sistema' + })} + {li({ + children: 'API de eventos para rastreamento de conversas' + })} + + ) + })} + + {h2({ children: 'Fique por Dentro' })} + {p({ + children: ( + <> + Estamos trabalhando arduamente para trazer essas funcionalidades o + mais rápido possível. O sistema de chatbot multi-tenant está em fase + avançada de desenvolvimento e será lançado em breve! + + ) + })} + + {p({ + children: ( + <> + Quer ser notificado quando essas features forem lançadas? Entre em{' '} + + contato conosco + {' '} + ou acompanhe nossas atualizações. + + ) + })} + + ) +} + +export default NextStepsPage diff --git a/src/features/home/pages/home-page.tsx b/src/features/home/pages/home-page.tsx index 3c2da9f..cc28c6a 100644 --- a/src/features/home/pages/home-page.tsx +++ b/src/features/home/pages/home-page.tsx @@ -16,6 +16,7 @@ import { import { ArrowDown, ArrowRight, Check } from 'lucide-react' import { BackgroundBlobs } from '@/shared/components/background-blobs' import { Footer } from '@/features/home/components/footer' +import { Link } from 'react-router-dom' const plans = [ { @@ -118,7 +119,7 @@ const owners = [ { name: 'Izabel Sampaio Goes', image: 'https://d1b8zs4rmj3xdl.cloudfront.net/iza.jpeg', - role: 'Estagiária de Ciência de Dados e IA na Evo Systems', + role: 'Estagiária de Business Analytics na Amazon', linkedin: 'https://www.linkedin.com/in/izabel-sampaio-goes/' }, { @@ -130,7 +131,8 @@ const owners = [ { name: 'Júlia Galhardi Cerqueira', image: 'https://d1b8zs4rmj3xdl.cloudfront.net/julia.jpeg', - role: 'Estagiária' + role: 'Estagiária', + linkedin: 'https://www.linkedin.com/in/j%C3%BAliacerqueira/' }, { name: 'Vinícius Berti', @@ -221,16 +223,16 @@ export function HomePage() { -

+

{words.map((word, index) => ( @@ -241,7 +243,7 @@ export function HomePage() { ))}

@@ -251,18 +253,27 @@ export function HomePage() { - - + + + - - + + @@ -274,25 +285,33 @@ export function HomePage() { whileInView="visible" transition={{ staggerChildren: 0.04 }} > - - Como o Knowly Funciona - +

+ Como o Knowly Funciona +

+

+ Três passos simples para transformar seus documentos em IA +

+ {process.map((content, idx) => ( - +
+ {idx + 1} +
+ {content.title} @@ -302,15 +321,15 @@ export function HomePage() { -

+

{content.content}

{idx < process.length - 1 && window.innerWidth >= 768 && ( - + )} {idx < process.length - 1 && window.innerWidth < 768 && ( - + )} ))} @@ -324,13 +343,18 @@ export function HomePage() { whileInView="visible" transition={{ staggerChildren: 0.04 }} > - - Preços - +

+ Preços Simples e Transparentes +

+

+ Escolha o plano perfeito para suas necessidades +

+ ( - - {plan.title} - - {plan.price}{' '} - - p/mês - + {idx === 1 && ( +
+ Mais Popular +
+ )} + + + {plan.title} + + + {plan.price} + + p/mês + - + {plan.features.map((feature, idx) => (
- +
+ +
{feature}
))} - - + + ))} @@ -381,19 +422,24 @@ export function HomePage() { }} variants={variants} > - - FAQ - +

+ Perguntas Frequentes +

+

+ Tudo o que você precisa saber sobre o Knowly +

+ - + {faqs.map((faq, i) => ( {faq.content} @@ -404,7 +450,7 @@ export function HomePage() { Acesse a página completa de FAQ @@ -386,13 +390,15 @@ echo $data['response'];` className="hover:bg-muted/50 flex w-full items-center justify-between rounded-lg p-2 transition-colors" >
- -

Exemplos de Código

+ +

+ Exemplos de Código +

{isCodeSectionExpanded ? ( - + ) : ( - + )} @@ -405,7 +411,7 @@ echo $data['response'];` >
{knowledgeBase.keys.length === 0 ? ( -
+
Crie uma API Key para ver os exemplos de código
) : ( @@ -418,9 +424,11 @@ echo $data['response'];` onClick={() => setSelectedLanguage(lang.id)} size="sm" variant={ - selectedLanguage === lang.id ? 'default' : 'outline' + selectedLanguage === lang.id + ? 'secondary' + : 'outline' } - className="flex items-center gap-1.5" + className="text-foreground flex items-center gap-1.5" > {lang.icon} {lang.name} @@ -468,12 +476,14 @@ echo $data['response'];` {/* Lista de arquivos */}
-

Arquivos

+

+ Arquivos +

{knowledgeBase.files.length === 0 ? ( -
+

Nenhum arquivo encontrado

@@ -499,12 +509,12 @@ echo $data['response'];`

{file.fileName}

-

+

{formatFileSize(file.sizeMB)}

@@ -528,7 +538,11 @@ echo $data['response'];` {/* Botões de ação */}
-
+ + {/* Sub-items */} + {hasSubItems && + isExpanded && + (!isCollapsed || isMobileOpen) && ( + + {item.subItems?.map((subItem) => { + const isSubItemActive = + location.pathname === subItem.path + return ( + + {subItem.label} + + ) + })} + )} - ) })} diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx index a00f9b0..fef5e4f 100644 --- a/src/shared/components/navbar.tsx +++ b/src/shared/components/navbar.tsx @@ -1,6 +1,6 @@ import brain from '@/assets/brain.png' import { Button } from '@/shared/components/button' -import { useNavigate } from 'react-router-dom' +import { Link, useNavigate } from 'react-router-dom' import { DropdownMenu, DropdownMenuContent, @@ -80,15 +80,12 @@ export function Navbar() { Preços - + Documentação - - + + FAQ - - - Sobre nós - + {theme === 'dark' ? ( @@ -241,18 +238,6 @@ export function Navbar() { > FAQ - - Sobre nós - )} diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx index 0c223fd..ada4dce 100644 --- a/src/shared/components/sidebar.tsx +++ b/src/shared/components/sidebar.tsx @@ -46,7 +46,7 @@ export function Sidebar() { return ( { - // Remove tudo que não é dígito - const cleanValue = value.replace(/\D/g, '') - - // Aplica a máscara conforme o usuário digita - if (cleanValue.length <= 3) { - return cleanValue - } else if (cleanValue.length <= 6) { - return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3)}` - } else if (cleanValue.length <= 9) { - return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6)}` - } else { - return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6, 9)}-${cleanValue.slice(9, 11)}` - } -} - -export const formatCNPJ = (value: string) => { - // Remove tudo que não é dígito - const cleanValue = value.replace(/\D/g, '') - - // Aplica a máscara conforme o usuário digita - if (cleanValue.length <= 2) { - return cleanValue - } else if (cleanValue.length <= 5) { - return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2)}` - } else if (cleanValue.length <= 8) { - return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5)}` - } else if (cleanValue.length <= 12) { - return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8)}` - } else { - return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8, 12)}-${cleanValue.slice(12, 14)}` - } -} - -export const formatPhone = (value: string) => { - // Remove tudo que não é dígito - const cleanValue = value.replace(/\D/g, '') - - // Aplica a máscara conforme o usuário digita - if (cleanValue.length <= 2) { - return cleanValue - } else if (cleanValue.length <= 6) { - return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2)}` - } else if (cleanValue.length <= 10) { - // Para telefone fixo (8 dígitos): (11) 5320-2121 - return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 6)}-${cleanValue.slice(6)}` - } else { - // Para celular (9 dígitos): (11) 95320-2121 - return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 7)}-${cleanValue.slice(7, 11)}` - } -} diff --git a/src/shared/utils/string-extensions.ts b/src/shared/utils/string-extensions.ts new file mode 100644 index 0000000..ebc39a6 --- /dev/null +++ b/src/shared/utils/string-extensions.ts @@ -0,0 +1,75 @@ +export const formatCPF = (value: string) => { + // Remove tudo que não é dígito + const cleanValue = value.replace(/\D/g, '') + + // Aplica a máscara conforme o usuário digita + if (cleanValue.length <= 3) { + return cleanValue + } else if (cleanValue.length <= 6) { + return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3)}` + } else if (cleanValue.length <= 9) { + return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6)}` + } else { + return `${cleanValue.slice(0, 3)}.${cleanValue.slice(3, 6)}.${cleanValue.slice(6, 9)}-${cleanValue.slice(9, 11)}` + } +} + +export const formatCNPJ = (value: string) => { + // Remove tudo que não é dígito + const cleanValue = value.replace(/\D/g, '') + + // Aplica a máscara conforme o usuário digita + if (cleanValue.length <= 2) { + return cleanValue + } else if (cleanValue.length <= 5) { + return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2)}` + } else if (cleanValue.length <= 8) { + return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5)}` + } else if (cleanValue.length <= 12) { + return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8)}` + } else { + return `${cleanValue.slice(0, 2)}.${cleanValue.slice(2, 5)}.${cleanValue.slice(5, 8)}/${cleanValue.slice(8, 12)}-${cleanValue.slice(12, 14)}` + } +} + +export const formatPhone = (value: string) => { + // Remove tudo que não é dígito + const cleanValue = value.replace(/\D/g, '') + + // Aplica a máscara conforme o usuário digita + if (cleanValue.length <= 2) { + return cleanValue + } else if (cleanValue.length <= 6) { + return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2)}` + } else if (cleanValue.length <= 10) { + // Para telefone fixo (8 dígitos): (11) 5320-2121 + return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 6)}-${cleanValue.slice(6)}` + } else { + // Para celular (9 dígitos): (11) 95320-2121 + return `(${cleanValue.slice(0, 2)}) ${cleanValue.slice(2, 7)}-${cleanValue.slice(7, 11)}` + } +} + +export const handleCPFChange = ( + value: string, + onChange: (value: string) => void +) => { + const formattedValue = formatCPF(value) + onChange(formattedValue) +} + +export const handleCNPJChange = ( + value: string, + onChange: (value: string) => void +) => { + const formattedValue = formatCNPJ(value) + onChange(formattedValue) +} + +export const handlePhoneChange = ( + value: string, + onChange: (value: string) => void +) => { + const formattedValue = formatPhone(value) + onChange(formattedValue) +}