From 36862d886b915ee7700548632ac80ea85c5f028a Mon Sep 17 00:00:00 2001 From: Enzo Sakamoto Date: Mon, 20 Oct 2025 22:00:27 -0300 Subject: [PATCH 1/7] Checkpoint from VS Code for coding agent session --- src/features/docs/dump/about-project.tsx | 64 +++++++++ src/features/docs/dump/foundation-models.tsx | 125 ++++++++++++++++++ src/features/docs/dump/integration.tsx | 101 ++++++++++++++ src/features/docs/dump/knowledge-bases.tsx | 82 ++++++++++++ src/features/docs/dump/playground-testing.tsx | 83 ++++++++++++ .../docs/dump/subscription-management.tsx | 69 ++++++++++ 6 files changed, 524 insertions(+) create mode 100644 src/features/docs/dump/about-project.tsx create mode 100644 src/features/docs/dump/foundation-models.tsx create mode 100644 src/features/docs/dump/integration.tsx create mode 100644 src/features/docs/dump/knowledge-bases.tsx create mode 100644 src/features/docs/dump/playground-testing.tsx create mode 100644 src/features/docs/dump/subscription-management.tsx diff --git a/src/features/docs/dump/about-project.tsx b/src/features/docs/dump/about-project.tsx new file mode 100644 index 0000000..b9bf542 --- /dev/null +++ b/src/features/docs/dump/about-project.tsx @@ -0,0 +1,64 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsProjectPage() { + return ( + + + +
+ +
+ {h1({ children: 'Sobre o Projeto' })} + + {h2({ children: 'Por que criamos o Knowly?' })} + {p({ + children: ( + <> + A inteligência artificial está mudando a forma como empresas trabalham, trazendo mais agilidade e eficiência para o dia a dia. Mas, para a maioria dos negócios, usar IA ainda é caro e complicado: exige conhecimento técnico, tempo e investimento alto em tecnologia. + + ), + })} + {p({ + children: ( + <> + O Knowly nasceu para simplificar esse cenário. Queremos que qualquer empresa consiga aproveitar o poder dos grandes modelos de linguagem para responder dúvidas, organizar informações e automatizar tarefas, sem precisar se preocupar com detalhes técnicos ou infraestrutura. + + ), + })} + {p({ + children: ( + <> + Nossa plataforma permite que você envie seus próprios documentos e, em poucos cliques, já tenha uma base de conhecimento inteligente pronta para ser usada no seu atendimento, site ou operação interna. Tudo isso com segurança, praticidade e custos acessíveis. + + ), + })} + {p({ + children: ( + <> + O objetivo é ajudar empresas a inovar, ganhar tempo e focar no que realmente importa: crescer e atender melhor seus clientes, usando IA de verdade no dia a dia. + + ), + })} +
+ +
+ + + ) +} + +export default DocsProjectPage diff --git a/src/features/docs/dump/foundation-models.tsx b/src/features/docs/dump/foundation-models.tsx new file mode 100644 index 0000000..f94af64 --- /dev/null +++ b/src/features/docs/dump/foundation-models.tsx @@ -0,0 +1,125 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, + ul, + li, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsModelsPage() { + return ( + + + +
+ +
+ {h1({ children: 'Modelos de Fundação AWS' })} + + {h2({ children: 'O que são modelos de fundação?' })} + {p({ + children: ( + <> + Modelos de fundação são inteligências artificiais treinadas para entender e gerar textos, responder perguntas, resumir informações e até criar conteúdos. Eles servem como base para várias aplicações de IA, desde chatbots até análise de documentos. + + ), + })} + + {h2({ children: 'Principais modelos disponíveis na AWS' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Amazon Titan: Modelo versátil para tarefas do dia a dia, como responder perguntas, resumir textos e organizar informações. É uma ótima escolha para quem busca equilíbrio entre custo e desempenho. + + ), + })} + {li({ + children: ( + <> + Anthropic Claude: Ideal para conversas mais longas, respostas detalhadas e situações que exigem mais segurança e controle. Muito usado em chatbots avançados e assistentes virtuais. + + ), + })} + {li({ + children: ( + <> + AI21 Labs: Especialista em geração de textos criativos, artigos, e até mesmo conteúdos técnicos. Indicado para quem precisa de textos mais elaborados ou criativos. + + ), + })} + {li({ + children: ( + <> + Cohere: Focado em análise de linguagem, classificação de textos e extração de informações. Bom para automação de processos e análise de grandes volumes de dados. + + ), + })} + + ), + })} + + {h2({ children: 'Quando usar cada modelo?' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Precisa de respostas rápidas e gerais? Use o Amazon Titan. + + ), + })} + {li({ + children: ( + <> + Vai criar um chatbot ou assistente virtual que precisa conversar bastante? O Claude é uma ótima opção. + + ), + })} + {li({ + children: ( + <> + Quer gerar textos criativos ou técnicos? Experimente o AI21 Labs. + + ), + })} + {li({ + children: ( + <> + Precisa analisar, classificar ou organizar muitos textos? O Cohere pode ajudar. + + ), + })} + + ), + })} + + {p({ + children: ( + <> + Com esses modelos, você pode escolher a solução que mais combina com o seu projeto, sem se preocupar com a complexidade técnica. Basta selecionar o modelo e começar a usar! + + ), + })} +
+ +
+ + + ) +} + +export default DocsModelsPage diff --git a/src/features/docs/dump/integration.tsx b/src/features/docs/dump/integration.tsx new file mode 100644 index 0000000..55a97a7 --- /dev/null +++ b/src/features/docs/dump/integration.tsx @@ -0,0 +1,101 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, + ul, + li, + pre, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsIntegrationPage() { + return ( + + + +
+ +
+ {h1({ children: 'Como integrar com sua base de conhecimento' })} + + {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.ai/v1/query +Headers: + Authorization: Bearer SUA_CHAVE_DE_API +Body: +{ + "prompt": "Como faço para atualizar meus dados cadastrais?", + "baseId": "sua-base-id" +} +`} + + ), + })} + + {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 DocsIntegrationPage diff --git a/src/features/docs/dump/knowledge-bases.tsx b/src/features/docs/dump/knowledge-bases.tsx new file mode 100644 index 0000000..d6281d2 --- /dev/null +++ b/src/features/docs/dump/knowledge-bases.tsx @@ -0,0 +1,82 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, + ul, + li, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsBasesPage() { + return ( + + + +
+ +
+ {h1({ children: 'Gerenciando Bases de Conhecimento' })} + + {h2({ children: 'Como criar, editar e excluir suas bases' })} + {p({ + children: ( + <> + Gerenciar suas bases de conhecimento no Knowly é simples e rápido. Basta acessar as configurações do seu perfil após fazer login e selecionar a opção "Minhas bases". + + ), + })} + + {ul({ + children: ( + <> + {li({ + children: ( + <> + Para criar uma base: Clique em "Nova base", escolha um nome e envie os documentos que deseja usar. Pronto! Sua base estará disponível para consultas e integrações assim que terminar de ser criada. + + ), + })} + {li({ + children: ( + <> + Para editar: Selecione uma base existente na lista para ver detalhes, adicionar ou remover documentos, ou atualizar informações. + + ), + })} + {li({ + children: ( + <> + Para excluir: Escolha a base desejada e clique em "Excluir". Confirme a ação para remover a base do sistema. + + ), + })} + + ), + })} + + {p({ + children: ( + <> + + + + ), + })} +
+ +
+ + + ) +} + +export default DocsBasesPage diff --git a/src/features/docs/dump/playground-testing.tsx b/src/features/docs/dump/playground-testing.tsx new file mode 100644 index 0000000..2a52dae --- /dev/null +++ b/src/features/docs/dump/playground-testing.tsx @@ -0,0 +1,83 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, + ul, + li, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsTestsPage() { + return ( + + + +
+ +
+ {h1({ children: 'Testando sua Base de Conhecimento no Playground' })} + + {h2({ children: 'O que é o Playground?' })} + {p({ + children: ( + <> + O Playground é uma área do nosso site feita para você testar, na prática, as bases de conhecimento que criou. Ele funciona como um chat, parecido com o ChatGPT ou o Gemini, onde você pode conversar com a sua base e ver as respostas geradas pela inteligência artificial. + + ), + })} + + {h2({ children: 'Como funciona?' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Escolha qual base de conhecimento você quer testar. + + ), + })} + {li({ + children: ( + <> + Envie perguntas ou comandos (prompts) no chat, como faria em um atendimento real. + + ), + })} + {li({ + children: ( + <> + Veja as respostas geradas na hora, usando os documentos e informações que você cadastrou. + + ), + })} + + ), + })} + + {h2({ children: 'Por que usar o Playground?' })} + {p({ + children: ( + <> + O Playground é a maneira mais fácil e rápida de conferir se sua base está funcionando como esperado. Você pode testar diferentes perguntas, ajustar seus documentos e experimentar os modelos antes de integrar a IA ao seu site ou sistema. + + ), + })} +
+ +
+ + + ) +} + +export default DocsTestsPage diff --git a/src/features/docs/dump/subscription-management.tsx b/src/features/docs/dump/subscription-management.tsx new file mode 100644 index 0000000..f01a928 --- /dev/null +++ b/src/features/docs/dump/subscription-management.tsx @@ -0,0 +1,69 @@ +import { Background } from '@/shared/components/background' +import { Layout } from '@/shared/components/layout' +import { motion } from 'framer-motion' +import { + h1, + h2, + p, + ul, + li, +} from '@/shared/components/typography' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + + +export function DocsPlansPage() { + return ( + + + +
+ +
+ {h1({ children: 'Gerenciando seu Plano de Assinatura' })} + + {h2({ children: 'Como alterar seu plano' })} + {p({ + children: ( + <>Para gerenciar seu plano de assinatura no Knowly, é só acessar a área do usuário após fazer login. No menu lateral à esquerda, clique em "Assinatura". + ), + })} + {ul({ + children: ( + <> + {li({ + children: ( + <>Na seção "Plano atual", procure o botão "Mudar plano" no canto inferior direito. + ), + })} + {li({ + children: ( + <>Clique em "Mudar plano" para ver as opções disponíveis e escolher o plano que melhor atende às suas necessidades. + ), + })} + {li({ + children: ( + <>Confirme a alteração e pronto! Seu novo plano já estará ativo. + ), + })} + + ), + })} + {p({ + children: ( + <>Assim, você pode ajustar sua assinatura sempre que quiser, de forma rápida e sem complicação. + ), + })} +
+ +
+ + + ) +} + +export default DocsPlansPage From 17f17e8423c28d569a4683d7f6340c263f82a6d4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 01:11:41 +0000 Subject: [PATCH 2/7] Create documentation interface with sidebar navigation Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com> --- src/features/docs/dump/about-project.tsx | 37 +++-- src/features/docs/dump/foundation-models.tsx | 87 ++++++++---- src/features/docs/dump/integration.tsx | 45 +++--- src/features/docs/dump/knowledge-bases.tsx | 45 +++--- src/features/docs/dump/playground-testing.tsx | 46 +++--- .../docs/dump/subscription-management.tsx | 49 ++++--- src/features/docs/pages/about-project.tsx | 58 ++++++++ src/features/docs/pages/foundation-models.tsx | 130 +++++++++++++++++ src/features/docs/pages/integration.tsx | 84 +++++++++++ src/features/docs/pages/knowledge-bases.tsx | 64 +++++++++ .../docs/pages/playground-testing.tsx | 69 +++++++++ .../docs/pages/subscription-management.tsx | 67 +++++++++ src/routes/app-routes.tsx | 25 ++++ src/shared/components/docs-layout.tsx | 24 ++++ src/shared/components/docs-sidebar.tsx | 133 ++++++++++++++++++ src/shared/components/typography.tsx | 96 +++++++++++++ 16 files changed, 929 insertions(+), 130 deletions(-) create mode 100644 src/features/docs/pages/about-project.tsx create mode 100644 src/features/docs/pages/foundation-models.tsx create mode 100644 src/features/docs/pages/integration.tsx create mode 100644 src/features/docs/pages/knowledge-bases.tsx create mode 100644 src/features/docs/pages/playground-testing.tsx create mode 100644 src/features/docs/pages/subscription-management.tsx create mode 100644 src/shared/components/docs-layout.tsx create mode 100644 src/shared/components/docs-sidebar.tsx create mode 100644 src/shared/components/typography.tsx diff --git a/src/features/docs/dump/about-project.tsx b/src/features/docs/dump/about-project.tsx index b9bf542..e282799 100644 --- a/src/features/docs/dump/about-project.tsx +++ b/src/features/docs/dump/about-project.tsx @@ -1,14 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, -} from '@/shared/components/typography' +import { h1, h2, p } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsProjectPage() { return ( @@ -28,30 +23,44 @@ export function DocsProjectPage() { {p({ children: ( <> - A inteligência artificial está mudando a forma como empresas trabalham, trazendo mais agilidade e eficiência para o dia a dia. Mas, para a maioria dos negócios, usar IA ainda é caro e complicado: exige conhecimento técnico, tempo e investimento alto em tecnologia. + A inteligência artificial está mudando a forma como empresas + trabalham, trazendo mais agilidade e eficiência para o dia a + dia. Mas, para a maioria dos negócios, usar IA ainda é caro + e complicado: exige conhecimento técnico, tempo e + investimento alto em tecnologia. - ), + ) })} {p({ children: ( <> - O Knowly nasceu para simplificar esse cenário. Queremos que qualquer empresa consiga aproveitar o poder dos grandes modelos de linguagem para responder dúvidas, organizar informações e automatizar tarefas, sem precisar se preocupar com detalhes técnicos ou infraestrutura. + O Knowly nasceu para simplificar esse cenário. Queremos que + qualquer empresa consiga aproveitar o poder dos grandes + modelos de linguagem para responder dúvidas, organizar + informações e automatizar tarefas, sem precisar se preocupar + com detalhes técnicos ou infraestrutura. - ), + ) })} {p({ children: ( <> - Nossa plataforma permite que você envie seus próprios documentos e, em poucos cliques, já tenha uma base de conhecimento inteligente pronta para ser usada no seu atendimento, site ou operação interna. Tudo isso com segurança, praticidade e custos acessíveis. + Nossa plataforma permite que você envie seus próprios + documentos e, em poucos cliques, já tenha uma base de + conhecimento inteligente pronta para ser usada no seu + atendimento, site ou operação interna. Tudo isso com + segurança, praticidade e custos acessíveis. - ), + ) })} {p({ children: ( <> - O objetivo é ajudar empresas a inovar, ganhar tempo e focar no que realmente importa: crescer e atender melhor seus clientes, usando IA de verdade no dia a dia. + O objetivo é ajudar empresas a inovar, ganhar tempo e focar + no que realmente importa: crescer e atender melhor seus + clientes, usando IA de verdade no dia a dia. - ), + ) })} diff --git a/src/features/docs/dump/foundation-models.tsx b/src/features/docs/dump/foundation-models.tsx index f94af64..8abf58b 100644 --- a/src/features/docs/dump/foundation-models.tsx +++ b/src/features/docs/dump/foundation-models.tsx @@ -1,16 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, - ul, - li, -} from '@/shared/components/typography' +import { h1, h2, p, ul, li } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsModelsPage() { return ( @@ -30,9 +23,13 @@ export function DocsModelsPage() { {p({ children: ( <> - Modelos de fundação são inteligências artificiais treinadas para entender e gerar textos, responder perguntas, resumir informações e até criar conteúdos. Eles servem como base para várias aplicações de IA, desde chatbots até análise de documentos. + Modelos de fundação são inteligências artificiais treinadas + para entender e gerar textos, responder perguntas, resumir + informações e até criar conteúdos. Eles servem como base + para várias aplicações de IA, desde chatbots até análise de + documentos. - ), + ) })} {h2({ children: 'Principais modelos disponíveis na AWS' })} @@ -42,33 +39,46 @@ export function DocsModelsPage() { {li({ children: ( <> - Amazon Titan: Modelo versátil para tarefas do dia a dia, como responder perguntas, resumir textos e organizar informações. É uma ótima escolha para quem busca equilíbrio entre custo e desempenho. + Amazon Titan: Modelo versátil para + tarefas do dia a dia, como responder perguntas, + resumir textos e organizar informações. É uma ótima + escolha para quem busca equilíbrio entre custo e + desempenho. - ), + ) })} {li({ children: ( <> - Anthropic Claude: Ideal para conversas mais longas, respostas detalhadas e situações que exigem mais segurança e controle. Muito usado em chatbots avançados e assistentes virtuais. + Anthropic Claude: Ideal para + conversas mais longas, respostas detalhadas e + situações que exigem mais segurança e controle. Muito + usado em chatbots avançados e assistentes virtuais. - ), + ) })} {li({ children: ( <> - AI21 Labs: Especialista em geração de textos criativos, artigos, e até mesmo conteúdos técnicos. Indicado para quem precisa de textos mais elaborados ou criativos. + AI21 Labs: Especialista em geração de + textos criativos, artigos, e até mesmo conteúdos + técnicos. Indicado para quem precisa de textos mais + elaborados ou criativos. - ), + ) })} {li({ children: ( <> - Cohere: Focado em análise de linguagem, classificação de textos e extração de informações. Bom para automação de processos e análise de grandes volumes de dados. + Cohere: Focado em análise de + linguagem, classificação de textos e extração de + informações. Bom para automação de processos e análise + de grandes volumes de dados. - ), + ) })} - ), + ) })} {h2({ children: 'Quando usar cada modelo?' })} @@ -78,41 +88,58 @@ export function DocsModelsPage() { {li({ children: ( <> - Precisa de respostas rápidas e gerais? Use o Amazon Titan. + + Precisa de respostas rápidas e gerais? + {' '} + Use o Amazon Titan. - ), + ) })} {li({ children: ( <> - Vai criar um chatbot ou assistente virtual que precisa conversar bastante? O Claude é uma ótima opção. + + Vai criar um chatbot ou assistente virtual que + precisa conversar bastante? + {' '} + O Claude é uma ótima opção. - ), + ) })} {li({ children: ( <> - Quer gerar textos criativos ou técnicos? Experimente o AI21 Labs. + + Quer gerar textos criativos ou técnicos? + {' '} + Experimente o AI21 Labs. - ), + ) })} {li({ children: ( <> - Precisa analisar, classificar ou organizar muitos textos? O Cohere pode ajudar. + + Precisa analisar, classificar ou organizar muitos + textos? + {' '} + O Cohere pode ajudar. - ), + ) })} - ), + ) })} {p({ children: ( <> - Com esses modelos, você pode escolher a solução que mais combina com o seu projeto, sem se preocupar com a complexidade técnica. Basta selecionar o modelo e começar a usar! + Com esses modelos, você pode escolher a solução que mais + combina com o seu projeto, sem se preocupar com a + complexidade técnica. Basta selecionar o modelo e começar a + usar! - ), + ) })} diff --git a/src/features/docs/dump/integration.tsx b/src/features/docs/dump/integration.tsx index 55a97a7..ff273c3 100644 --- a/src/features/docs/dump/integration.tsx +++ b/src/features/docs/dump/integration.tsx @@ -1,17 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, - ul, - li, - pre, -} from '@/shared/components/typography' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsIntegrationPage() { return ( @@ -31,9 +23,12 @@ export function DocsIntegrationPage() { {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. + 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?' })} @@ -43,33 +38,36 @@ export function DocsIntegrationPage() { {li({ children: ( <> - Você envia um prompt (mensagem ou pergunta) para a API, junto com sua chave de acesso. + 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. + 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. + É 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.ai/v1/query Headers: Authorization: Bearer SUA_CHAVE_DE_API @@ -80,15 +78,18 @@ Body: } `} - ), + ) })} {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. + 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. - ), + ) })} diff --git a/src/features/docs/dump/knowledge-bases.tsx b/src/features/docs/dump/knowledge-bases.tsx index d6281d2..3e658b7 100644 --- a/src/features/docs/dump/knowledge-bases.tsx +++ b/src/features/docs/dump/knowledge-bases.tsx @@ -1,16 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, - ul, - li, -} from '@/shared/components/typography' +import { h1, h2, p, ul, li } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsBasesPage() { return ( @@ -30,9 +23,12 @@ export function DocsBasesPage() { {p({ children: ( <> - Gerenciar suas bases de conhecimento no Knowly é simples e rápido. Basta acessar as configurações do seu perfil após fazer login e selecionar a opção "Minhas bases". + Gerenciar suas bases de conhecimento no Knowly é simples e + rápido. Basta acessar as configurações do seu perfil após + fazer login e selecionar a opção{' '} + "Minhas bases". - ), + ) })} {ul({ @@ -41,35 +37,38 @@ export function DocsBasesPage() { {li({ children: ( <> - Para criar uma base: Clique em "Nova base", escolha um nome e envie os documentos que deseja usar. Pronto! Sua base estará disponível para consultas e integrações assim que terminar de ser criada. + Para criar uma base: Clique em{' '} + "Nova base", escolha um nome e envie + os documentos que deseja usar. Pronto! Sua base estará + disponível para consultas e integrações assim que + terminar de ser criada. - ), + ) })} {li({ children: ( <> - Para editar: Selecione uma base existente na lista para ver detalhes, adicionar ou remover documentos, ou atualizar informações. + Para editar: Selecione uma base existente na + lista para ver detalhes, adicionar ou remover + documentos, ou atualizar informações. - ), + ) })} {li({ children: ( <> - Para excluir: Escolha a base desejada e clique em "Excluir". Confirme a ação para remover a base do sistema. + Para excluir: Escolha a base desejada e clique + em "Excluir". Confirme a ação para + remover a base do sistema. - ), + ) })} - ), + ) })} {p({ - children: ( - <> - - - - ), + children: <> })} diff --git a/src/features/docs/dump/playground-testing.tsx b/src/features/docs/dump/playground-testing.tsx index 2a52dae..f622bbb 100644 --- a/src/features/docs/dump/playground-testing.tsx +++ b/src/features/docs/dump/playground-testing.tsx @@ -1,16 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, - ul, - li, -} from '@/shared/components/typography' +import { h1, h2, p, ul, li } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsTestsPage() { return ( @@ -24,15 +17,21 @@ export function DocsTestsPage() { className="w-full max-w-xl" >
- {h1({ children: 'Testando sua Base de Conhecimento no Playground' })} + {h1({ + children: 'Testando sua Base de Conhecimento no Playground' + })} {h2({ children: 'O que é o Playground?' })} {p({ children: ( <> - O Playground é uma área do nosso site feita para você testar, na prática, as bases de conhecimento que criou. Ele funciona como um chat, parecido com o ChatGPT ou o Gemini, onde você pode conversar com a sua base e ver as respostas geradas pela inteligência artificial. + O Playground é uma área do nosso site feita para você + testar, na prática, as bases de conhecimento que criou. Ele + funciona como um chat, parecido com o ChatGPT ou o Gemini, + onde você pode conversar com a sua base e ver as respostas + geradas pela inteligência artificial. - ), + ) })} {h2({ children: 'Como funciona?' })} @@ -41,36 +40,39 @@ export function DocsTestsPage() { <> {li({ children: ( - <> - Escolha qual base de conhecimento você quer testar. - - ), + <>Escolha qual base de conhecimento você quer testar. + ) })} {li({ children: ( <> - Envie perguntas ou comandos (prompts) no chat, como faria em um atendimento real. + Envie perguntas ou comandos (prompts) no chat, como + faria em um atendimento real. - ), + ) })} {li({ children: ( <> - Veja as respostas geradas na hora, usando os documentos e informações que você cadastrou. + Veja as respostas geradas na hora, usando os + documentos e informações que você cadastrou. - ), + ) })} - ), + ) })} {h2({ children: 'Por que usar o Playground?' })} {p({ children: ( <> - O Playground é a maneira mais fácil e rápida de conferir se sua base está funcionando como esperado. Você pode testar diferentes perguntas, ajustar seus documentos e experimentar os modelos antes de integrar a IA ao seu site ou sistema. + O Playground é a maneira mais fácil e rápida de conferir se + sua base está funcionando como esperado. Você pode testar + diferentes perguntas, ajustar seus documentos e experimentar + os modelos antes de integrar a IA ao seu site ou sistema. - ), + ) })}
diff --git a/src/features/docs/dump/subscription-management.tsx b/src/features/docs/dump/subscription-management.tsx index f01a928..e09a579 100644 --- a/src/features/docs/dump/subscription-management.tsx +++ b/src/features/docs/dump/subscription-management.tsx @@ -1,16 +1,9 @@ import { Background } from '@/shared/components/background' import { Layout } from '@/shared/components/layout' import { motion } from 'framer-motion' -import { - h1, - h2, - p, - ul, - li, -} from '@/shared/components/typography' +import { h1, h2, p, ul, li } from '@/shared/components/typography' import { BackgroundBlobs } from '@/shared/components/background-blobs' - export function DocsPlansPage() { return ( @@ -29,34 +22,52 @@ export function DocsPlansPage() { {h2({ children: 'Como alterar seu plano' })} {p({ children: ( - <>Para gerenciar seu plano de assinatura no Knowly, é só acessar a área do usuário após fazer login. No menu lateral à esquerda, clique em "Assinatura". - ), + <> + Para gerenciar seu plano de assinatura no Knowly, é só + acessar a área do usuário após fazer login. No menu lateral + à esquerda, clique em "Assinatura". + + ) })} {ul({ children: ( <> {li({ children: ( - <>Na seção "Plano atual", procure o botão "Mudar plano" no canto inferior direito. - ), + <> + Na seção "Plano atual", procure o + botão "Mudar plano" no canto inferior + direito. + + ) })} {li({ children: ( - <>Clique em "Mudar plano" para ver as opções disponíveis e escolher o plano que melhor atende às suas necessidades. - ), + <> + Clique em "Mudar plano" para ver as + opções disponíveis e escolher o plano que melhor + atende às suas necessidades. + + ) })} {li({ children: ( - <>Confirme a alteração e pronto! Seu novo plano já estará ativo. - ), + <> + Confirme a alteração e pronto! Seu novo plano já + estará ativo. + + ) })} - ), + ) })} {p({ children: ( - <>Assim, você pode ajustar sua assinatura sempre que quiser, de forma rápida e sem complicação. - ), + <> + Assim, você pode ajustar sua assinatura sempre que quiser, + de forma rápida e sem complicação. + + ) })} diff --git a/src/features/docs/pages/about-project.tsx b/src/features/docs/pages/about-project.tsx new file mode 100644 index 0000000..a488707 --- /dev/null +++ b/src/features/docs/pages/about-project.tsx @@ -0,0 +1,58 @@ +import { motion } from 'framer-motion' +import { h1, h2, p } from '@/shared/components/typography' + +export function AboutProjectPage() { + return ( + + {h1({ children: 'Sobre o Projeto' })} + + {h2({ children: 'Por que criamos o Knowly?' })} + {p({ + children: ( + <> + A inteligência artificial está mudando a forma como empresas + trabalham, trazendo mais agilidade e eficiência para o dia a dia. + Mas, para a maioria dos negócios, usar IA ainda é caro e complicado: + exige conhecimento técnico, tempo e investimento alto em tecnologia. + + ) + })} + {p({ + children: ( + <> + O Knowly nasceu para simplificar esse cenário. Queremos que qualquer + empresa consiga aproveitar o poder dos grandes modelos de linguagem + para responder dúvidas, organizar informações e automatizar tarefas, + sem precisar se preocupar com detalhes técnicos ou infraestrutura. + + ) + })} + {p({ + children: ( + <> + Nossa plataforma permite que você envie seus próprios documentos e, + em poucos cliques, já tenha uma base de conhecimento inteligente + pronta para ser usada no seu atendimento, site ou operação interna. + Tudo isso com segurança, praticidade e custos acessíveis. + + ) + })} + {p({ + children: ( + <> + O objetivo é ajudar empresas a inovar, ganhar tempo e focar no que + realmente importa: crescer e atender melhor seus clientes, usando IA + de verdade no dia a dia. + + ) + })} + + ) +} + +export default AboutProjectPage diff --git a/src/features/docs/pages/foundation-models.tsx b/src/features/docs/pages/foundation-models.tsx new file mode 100644 index 0000000..32d39d6 --- /dev/null +++ b/src/features/docs/pages/foundation-models.tsx @@ -0,0 +1,130 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li } from '@/shared/components/typography' + +export function FoundationModelsPage() { + return ( + + {h1({ children: 'Modelos de Fundação AWS' })} + + {h2({ children: 'O que são modelos de fundação?' })} + {p({ + children: ( + <> + Modelos de fundação são inteligências artificiais treinadas para + entender e gerar textos, responder perguntas, resumir informações e + até criar conteúdos. Eles servem como base para várias aplicações de + IA, desde chatbots até análise de documentos. + + ) + })} + + {h2({ children: 'Principais modelos disponíveis na AWS' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Amazon Titan: Modelo versátil para tarefas do + dia a dia, como responder perguntas, resumir textos e + organizar informações. É uma ótima escolha para quem busca + equilíbrio entre custo e desempenho. + + ) + })} + {li({ + children: ( + <> + Anthropic Claude: Ideal para conversas mais + longas, respostas detalhadas e situações que exigem mais + segurança e controle. Muito usado em chatbots avançados e + assistentes virtuais. + + ) + })} + {li({ + children: ( + <> + AI21 Labs: Especialista em geração de textos + criativos, artigos, e até mesmo conteúdos técnicos. Indicado + para quem precisa de textos mais elaborados ou criativos. + + ) + })} + {li({ + children: ( + <> + Cohere: Focado em análise de linguagem, + classificação de textos e extração de informações. Bom para + automação de processos e análise de grandes volumes de dados. + + ) + })} + + ) + })} + + {h2({ children: 'Quando usar cada modelo?' })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Precisa de respostas rápidas e gerais? Use o{' '} + Amazon Titan. + + ) + })} + {li({ + children: ( + <> + + Vai criar um chatbot ou assistente virtual que precisa + conversar bastante? + {' '} + O Claude é uma ótima opção. + + ) + })} + {li({ + children: ( + <> + Quer gerar textos criativos ou técnicos?{' '} + Experimente o AI21 Labs. + + ) + })} + {li({ + children: ( + <> + + Precisa analisar, classificar ou organizar muitos textos? + {' '} + O Cohere pode ajudar. + + ) + })} + + ) + })} + + {p({ + children: ( + <> + Com esses modelos, você pode escolher a solução que mais combina com + o seu projeto, sem se preocupar com a complexidade técnica. Basta + selecionar o modelo e começar a usar! + + ) + })} + + ) +} + +export default FoundationModelsPage diff --git a/src/features/docs/pages/integration.tsx b/src/features/docs/pages/integration.tsx new file mode 100644 index 0000000..e1c3c9e --- /dev/null +++ b/src/features/docs/pages/integration.tsx @@ -0,0 +1,84 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' + +export function IntegrationPage() { + return ( + + {h1({ children: 'Como integrar com sua base de conhecimento' })} + + {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.ai/v1/query +Headers: + Authorization: Bearer SUA_CHAVE_DE_API +Body: +{ + "prompt": "Como faço para atualizar meus dados cadastrais?", + "baseId": "sua-base-id" +}` + })} + + {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 IntegrationPage diff --git a/src/features/docs/pages/knowledge-bases.tsx b/src/features/docs/pages/knowledge-bases.tsx new file mode 100644 index 0000000..798803d --- /dev/null +++ b/src/features/docs/pages/knowledge-bases.tsx @@ -0,0 +1,64 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li } from '@/shared/components/typography' + +export function KnowledgeBasesPage() { + return ( + + {h1({ children: 'Gerenciando Bases de Conhecimento' })} + + {h2({ children: 'Como criar, editar e excluir suas bases' })} + {p({ + children: ( + <> + Gerenciar suas bases de conhecimento no Knowly é simples e rápido. + Basta acessar as configurações do seu perfil após fazer login e + selecionar a opção "Minhas bases". + + ) + })} + + {ul({ + children: ( + <> + {li({ + children: ( + <> + Para criar uma base: Clique em{' '} + "Nova base", escolha um nome e + envie os documentos que deseja usar. Pronto! Sua base estará + disponível para consultas e integrações assim que terminar de + ser criada. + + ) + })} + {li({ + children: ( + <> + Para editar: Selecione uma base existente na + lista para ver detalhes, adicionar ou remover documentos, ou + atualizar informações. + + ) + })} + {li({ + children: ( + <> + Para excluir: Escolha a base desejada e + clique em "Excluir". Confirme a + ação para remover a base do sistema. + + ) + })} + + ) + })} + + ) +} + +export default KnowledgeBasesPage diff --git a/src/features/docs/pages/playground-testing.tsx b/src/features/docs/pages/playground-testing.tsx new file mode 100644 index 0000000..70aa9c0 --- /dev/null +++ b/src/features/docs/pages/playground-testing.tsx @@ -0,0 +1,69 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li } from '@/shared/components/typography' + +export function PlaygroundTestingPage() { + return ( + + {h1({ children: 'Testando sua Base de Conhecimento no Playground' })} + + {h2({ children: 'O que é o Playground?' })} + {p({ + children: ( + <> + O Playground é uma área do nosso site feita para você testar, na + prática, as bases de conhecimento que criou. Ele funciona como um + chat, parecido com o ChatGPT ou o Gemini, onde você pode conversar + com a sua base e ver as respostas geradas pela inteligência + artificial. + + ) + })} + + {h2({ children: 'Como funciona?' })} + {ul({ + children: ( + <> + {li({ + children: <>Escolha qual base de conhecimento você quer testar. + })} + {li({ + children: ( + <> + Envie perguntas ou comandos (prompts) no chat, como faria em + um atendimento real. + + ) + })} + {li({ + children: ( + <> + Veja as respostas geradas na hora, usando os documentos e + informações que você cadastrou. + + ) + })} + + ) + })} + + {h2({ children: 'Por que usar o Playground?' })} + {p({ + children: ( + <> + O Playground é a maneira mais fácil e rápida de conferir se sua base + está funcionando como esperado. Você pode testar diferentes + perguntas, ajustar seus documentos e experimentar os modelos antes + de integrar a IA ao seu site ou sistema. + + ) + })} + + ) +} + +export default PlaygroundTestingPage diff --git a/src/features/docs/pages/subscription-management.tsx b/src/features/docs/pages/subscription-management.tsx new file mode 100644 index 0000000..7502526 --- /dev/null +++ b/src/features/docs/pages/subscription-management.tsx @@ -0,0 +1,67 @@ +import { motion } from 'framer-motion' +import { h1, h2, p, ul, li } from '@/shared/components/typography' + +export function SubscriptionManagementPage() { + return ( + + {h1({ children: 'Gerenciando seu Plano de Assinatura' })} + + {h2({ children: 'Como alterar seu plano' })} + {p({ + children: ( + <> + Para gerenciar seu plano de assinatura no Knowly, é só acessar a + área do usuário após fazer login. No menu lateral à esquerda, clique + em "Assinatura". + + ) + })} + {ul({ + children: ( + <> + {li({ + children: ( + <> + Na seção "Plano atual", procure o + botão "Mudar plano" no canto + inferior direito. + + ) + })} + {li({ + children: ( + <> + Clique em "Mudar plano" para ver as + opções disponíveis e escolher o plano que melhor atende às + suas necessidades. + + ) + })} + {li({ + children: ( + <> + Confirme a alteração e pronto! Seu novo plano já estará ativo. + + ) + })} + + ) + })} + {p({ + children: ( + <> + Assim, você pode ajustar sua assinatura sempre que quiser, de forma + rápida e sem complicação. + + ) + })} + + ) +} + +export default SubscriptionManagementPage diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx index 507a518..a2d14f9 100644 --- a/src/routes/app-routes.tsx +++ b/src/routes/app-routes.tsx @@ -19,6 +19,13 @@ import { PageWithSidebar } from '@/shared/components/page-with-sidebar' import { CreateBase } from '@/features/user-area/pages/create-base' import { CreateBasePipeline } from '@/features/user-area/pages/create-base-pipeline' import { PlaygroundPage } from '@/features/playground/pages/playground' +import { DocsLayout } from '@/shared/components/docs-layout' +import { AboutProjectPage } from '@/features/docs/pages/about-project' +import { FoundationModelsPage } from '@/features/docs/pages/foundation-models' +import { KnowledgeBasesPage } from '@/features/docs/pages/knowledge-bases' +import { IntegrationPage } from '@/features/docs/pages/integration' +import { PlaygroundTestingPage } from '@/features/docs/pages/playground-testing' +import { SubscriptionManagementPage as DocsSubscriptionPage } from '@/features/docs/pages/subscription-management' export function AppRoutes() { return ( @@ -60,6 +67,24 @@ export function AppRoutes() { } /> } /> + + }> + } /> + } + /> + } /> + } /> + } + /> + } + /> + ) diff --git a/src/shared/components/docs-layout.tsx b/src/shared/components/docs-layout.tsx new file mode 100644 index 0000000..2a6c774 --- /dev/null +++ b/src/shared/components/docs-layout.tsx @@ -0,0 +1,24 @@ +import { Outlet } from 'react-router-dom' +import { Navbar } from '@/shared/components/navbar' +import { Toaster } from 'react-hot-toast' +import { DocsSidebar } from '@/shared/components/docs-sidebar' +import { Background } from '@/shared/components/background' +import { BackgroundBlobs } from '@/shared/components/background-blobs' + +export function DocsLayout() { + return ( + <> + + + + + +
+
+ +
+
+ + + ) +} diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx new file mode 100644 index 0000000..f0505f5 --- /dev/null +++ b/src/shared/components/docs-sidebar.tsx @@ -0,0 +1,133 @@ +import { motion } from 'framer-motion' +import { Link, useLocation } from 'react-router-dom' +import { cn } from '@/shared/utils/cn' +import { + BookOpen, + Boxes, + Database, + Plug, + TestTube, + CreditCard, + Menu +} from 'lucide-react' +import { useState } from 'react' +import { Button } from '@/shared/components/button' + +export type DocsSidebarItem = { + label: string + icon: React.ReactNode + path: string +} + +const docsItems: DocsSidebarItem[] = [ + { + label: 'Sobre o Projeto', + icon: , + path: '/docs' + }, + { + label: 'Modelos de Fundação', + icon: , + path: '/docs/foundation-models' + }, + { + label: 'Bases de Conhecimento', + icon: , + path: '/docs/knowledge-bases' + }, + { + label: 'Integração', + icon: , + path: '/docs/integration' + }, + { + label: 'Playground e Testes', + icon: , + path: '/docs/playground-testing' + }, + { + label: 'Gerenciar Assinatura', + icon: , + path: '/docs/subscription-management' + } +] + +export function DocsSidebar() { + const location = useLocation() + const [isCollapsed, setIsCollapsed] = useState(false) + + function toggleSidebar() { + setIsCollapsed(!isCollapsed) + } + + const transition = { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] } + const variants = { + hidden: { filter: 'blur(10px)', opacity: 0 }, + visible: { filter: 'blur(0)', opacity: 1 } + } + + return ( + +
+ + + + + {!isCollapsed && ( + +

+ Documentação +

+ + )} + + + {docsItems.map((item) => { + const isActive = location.pathname === item.path + return ( + + + {item.icon} + {!isCollapsed && {item.label}} + + + ) + })} + +
+ + ) +} diff --git a/src/shared/components/typography.tsx b/src/shared/components/typography.tsx new file mode 100644 index 0000000..9ef1961 --- /dev/null +++ b/src/shared/components/typography.tsx @@ -0,0 +1,96 @@ +import { ReactNode } from 'react' +import { cn } from '@/shared/utils/cn' + +interface TypographyProps { + children: ReactNode + className?: string +} + +export function h1({ children, className }: TypographyProps) { + return ( +

+ {children} +

+ ) +} + +export function h2({ children, className }: TypographyProps) { + return ( +

+ {children} +

+ ) +} + +export function h3({ children, className }: TypographyProps) { + return ( +

+ {children} +

+ ) +} + +export function p({ children, className }: TypographyProps) { + return ( +

+ {children} +

+ ) +} + +export function ul({ children, className }: TypographyProps) { + return ( +
    + {children} +
+ ) +} + +export function li({ children, className }: TypographyProps) { + return ( +
  • + {children} +
    • + ) +} + +export function pre({ children, className }: TypographyProps) { + return ( + 
    +      {children}
+
    + ) +} + +export function code({ children, className }: TypographyProps) { + return ( + + {children} + + ) +} From 4568c89bd1b9a13df6f6cd0df054bb41e9122007 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 01:15:53 +0000 Subject: [PATCH 3/7] Enhance documentation styling with modern design patterns Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com> --- src/features/docs/pages/about-project.tsx | 5 ++- src/features/docs/pages/foundation-models.tsx | 5 ++- src/features/docs/pages/integration.tsx | 5 ++- src/features/docs/pages/knowledge-bases.tsx | 5 ++- .../docs/pages/playground-testing.tsx | 5 ++- .../docs/pages/subscription-management.tsx | 5 ++- src/shared/components/docs-layout.tsx | 8 +++-- src/shared/components/typography.tsx | 33 +++++++++++++++---- 8 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/features/docs/pages/about-project.tsx b/src/features/docs/pages/about-project.tsx index a488707..6e49858 100644 --- a/src/features/docs/pages/about-project.tsx +++ b/src/features/docs/pages/about-project.tsx @@ -3,11 +3,10 @@ import { h1, h2, p } from '@/shared/components/typography' export function AboutProjectPage() { return ( - {h1({ children: 'Sobre o Projeto' })} @@ -51,7 +50,7 @@ export function AboutProjectPage() { ) })} - + ) } diff --git a/src/features/docs/pages/foundation-models.tsx b/src/features/docs/pages/foundation-models.tsx index 32d39d6..407c874 100644 --- a/src/features/docs/pages/foundation-models.tsx +++ b/src/features/docs/pages/foundation-models.tsx @@ -3,11 +3,10 @@ import { h1, h2, p, ul, li } from '@/shared/components/typography' export function FoundationModelsPage() { return ( - {h1({ children: 'Modelos de Fundação AWS' })} @@ -123,7 +122,7 @@ export function FoundationModelsPage() { ) })} - + ) } diff --git a/src/features/docs/pages/integration.tsx b/src/features/docs/pages/integration.tsx index e1c3c9e..10a5a86 100644 --- a/src/features/docs/pages/integration.tsx +++ b/src/features/docs/pages/integration.tsx @@ -3,11 +3,10 @@ import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' export function IntegrationPage() { return ( - {h1({ children: 'Como integrar com sua base de conhecimento' })} @@ -77,7 +76,7 @@ Body: ) })} - + ) } diff --git a/src/features/docs/pages/knowledge-bases.tsx b/src/features/docs/pages/knowledge-bases.tsx index 798803d..78192e0 100644 --- a/src/features/docs/pages/knowledge-bases.tsx +++ b/src/features/docs/pages/knowledge-bases.tsx @@ -3,11 +3,10 @@ import { h1, h2, p, ul, li } from '@/shared/components/typography' export function KnowledgeBasesPage() { return ( - {h1({ children: 'Gerenciando Bases de Conhecimento' })} @@ -57,7 +56,7 @@ export function KnowledgeBasesPage() { ) })} - + ) } diff --git a/src/features/docs/pages/playground-testing.tsx b/src/features/docs/pages/playground-testing.tsx index 70aa9c0..1e7a64e 100644 --- a/src/features/docs/pages/playground-testing.tsx +++ b/src/features/docs/pages/playground-testing.tsx @@ -3,11 +3,10 @@ import { h1, h2, p, ul, li } from '@/shared/components/typography' export function PlaygroundTestingPage() { return ( - {h1({ children: 'Testando sua Base de Conhecimento no Playground' })} @@ -62,7 +61,7 @@ export function PlaygroundTestingPage() { ) })} - + ) } diff --git a/src/features/docs/pages/subscription-management.tsx b/src/features/docs/pages/subscription-management.tsx index 7502526..a6f0251 100644 --- a/src/features/docs/pages/subscription-management.tsx +++ b/src/features/docs/pages/subscription-management.tsx @@ -3,11 +3,10 @@ import { h1, h2, p, ul, li } from '@/shared/components/typography' export function SubscriptionManagementPage() { return ( - {h1({ children: 'Gerenciando seu Plano de Assinatura' })} @@ -60,7 +59,7 @@ export function SubscriptionManagementPage() { ) })} - + ) } diff --git a/src/shared/components/docs-layout.tsx b/src/shared/components/docs-layout.tsx index 2a6c774..709d8f4 100644 --- a/src/shared/components/docs-layout.tsx +++ b/src/shared/components/docs-layout.tsx @@ -13,9 +13,11 @@ export function DocsLayout() { -
    -
    - +
    +
    +
    + +
    diff --git a/src/shared/components/typography.tsx b/src/shared/components/typography.tsx index 9ef1961..5de1bf1 100644 --- a/src/shared/components/typography.tsx +++ b/src/shared/components/typography.tsx @@ -10,7 +10,8 @@ export function h1({ children, className }: TypographyProps) { return (

    @@ -23,7 +24,7 @@ export function h2({ children, className }: TypographyProps) { return (

    @@ -47,7 +48,12 @@ export function h3({ children, className }: TypographyProps) { export function p({ children, className }: TypographyProps) { return ( -

    +

    {children}

    ) @@ -55,7 +61,7 @@ export function p({ children, className }: TypographyProps) { export function ul({ children, className }: TypographyProps) { return ( -
      +
        {children}
      ) @@ -73,11 +79,11 @@ export function pre({ children, className }: TypographyProps) { return ( 
      -      {children}
+      {children}
      ) } @@ -86,7 +92,7 @@ export function code({ children, className }: TypographyProps) { return ( @@ -94,3 +100,16 @@ export function code({ children, className }: TypographyProps) { ) } + +export function blockquote({ children, className }: TypographyProps) { + return ( +
      + {children} +
      + ) +} From 6d09a04f8ef20558912bd6edd5168231be96fb6f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 01:33:01 +0000 Subject: [PATCH 4/7] Add mobile responsive design and fix collapsed sidebar icons Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com> --- src/shared/components/docs-layout.tsx | 2 +- src/shared/components/docs-sidebar.tsx | 200 +++++++++++++++++-------- 2 files changed, 138 insertions(+), 64 deletions(-) diff --git a/src/shared/components/docs-layout.tsx b/src/shared/components/docs-layout.tsx index 709d8f4..e4d293e 100644 --- a/src/shared/components/docs-layout.tsx +++ b/src/shared/components/docs-layout.tsx @@ -13,7 +13,7 @@ export function DocsLayout() { -
      +
      diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx index f0505f5..cc866d0 100644 --- a/src/shared/components/docs-sidebar.tsx +++ b/src/shared/components/docs-sidebar.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion, AnimatePresence } from 'framer-motion' import { Link, useLocation } from 'react-router-dom' import { cn } from '@/shared/utils/cn' import { @@ -8,46 +8,47 @@ import { Plug, TestTube, CreditCard, - Menu + Menu, + X } from 'lucide-react' -import { useState } from 'react' +import { useState, useEffect } from 'react' import { Button } from '@/shared/components/button' export type DocsSidebarItem = { label: string - icon: React.ReactNode + icon: React.ComponentType<{ className?: string }> path: string } const docsItems: DocsSidebarItem[] = [ { label: 'Sobre o Projeto', - icon: , + icon: BookOpen, path: '/docs' }, { label: 'Modelos de Fundação', - icon: , + icon: Boxes, path: '/docs/foundation-models' }, { label: 'Bases de Conhecimento', - icon: , + icon: Database, path: '/docs/knowledge-bases' }, { label: 'Integração', - icon: , + icon: Plug, path: '/docs/integration' }, { label: 'Playground e Testes', - icon: , + icon: TestTube, path: '/docs/playground-testing' }, { label: 'Gerenciar Assinatura', - icon: , + icon: CreditCard, path: '/docs/subscription-management' } ] @@ -55,11 +56,25 @@ const docsItems: DocsSidebarItem[] = [ export function DocsSidebar() { const location = useLocation() const [isCollapsed, setIsCollapsed] = useState(false) + const [isMobileOpen, setIsMobileOpen] = useState(false) function toggleSidebar() { setIsCollapsed(!isCollapsed) } + function toggleMobileSidebar() { + setIsMobileOpen(!isMobileOpen) + } + + function closeMobileSidebar() { + setIsMobileOpen(false) + } + + // Close mobile sidebar on route change + useEffect(() => { + setIsMobileOpen(false) + }, [location.pathname]) + const transition = { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] } const variants = { hidden: { filter: 'blur(10px)', opacity: 0 }, @@ -67,67 +82,126 @@ export function DocsSidebar() { } return ( - -
      - - + + {/* Mobile backdrop */} + + {isMobileOpen && ( + + )} + + + {/* Sidebar */} + +
      + {/* Desktop collapse button */} + - - {!isCollapsed && Menu} - - + + - {!isCollapsed && ( + {/* Mobile close button */} -

      - Documentação -

      +       - )} - - {docsItems.map((item) => { - const isActive = location.pathname === item.path - return ( - - +

      + Documentação +

      +       + )} + + + {docsItems.map((item) => { + const isActive = location.pathname === item.path + const IconComponent = item.icon + return ( + - {item.icon} - {!isCollapsed && {item.label}} - - - ) - })} - -
      -       + + + {(!isCollapsed || isMobileOpen) && ( + {item.label} + )} + +       + ) + })} + +
      +       + ) } From 01a60eb612fff582dea14cc5959ab79cc6848453 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 17:21:46 +0000 Subject: [PATCH 5/7] Add top spacing on mobile to separate menu button from content Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com> --- src/shared/components/docs-layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/docs-layout.tsx b/src/shared/components/docs-layout.tsx index e4d293e..a3a9428 100644 --- a/src/shared/components/docs-layout.tsx +++ b/src/shared/components/docs-layout.tsx @@ -14,7 +14,7 @@ export function DocsLayout() {
      -
      +
      From 53fe8e9dbe00b7bfbb1772a8dd91402528385ecc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 23:27:32 +0000 Subject: [PATCH 6/7] Remove dump directory and add documentation link to navbar Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com> --- src/features/docs/dump/about-project.tsx | 73 --------- src/features/docs/dump/foundation-models.tsx | 152 ------------------ src/features/docs/dump/integration.tsx | 102 ------------ src/features/docs/dump/knowledge-bases.tsx | 81 ---------- src/features/docs/dump/playground-testing.tsx | 85 ---------- .../docs/dump/subscription-management.tsx | 80 --------- src/shared/components/navbar.tsx | 15 ++ 7 files changed, 15 insertions(+), 573 deletions(-) delete mode 100644 src/features/docs/dump/about-project.tsx delete mode 100644 src/features/docs/dump/foundation-models.tsx delete mode 100644 src/features/docs/dump/integration.tsx delete mode 100644 src/features/docs/dump/knowledge-bases.tsx delete mode 100644 src/features/docs/dump/playground-testing.tsx delete mode 100644 src/features/docs/dump/subscription-management.tsx diff --git a/src/features/docs/dump/about-project.tsx b/src/features/docs/dump/about-project.tsx deleted file mode 100644 index e282799..0000000 --- a/src/features/docs/dump/about-project.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsProjectPage() { - return ( - - - -
      - -
      - {h1({ children: 'Sobre o Projeto' })} - - {h2({ children: 'Por que criamos o Knowly?' })} - {p({ - children: ( - <> - A inteligência artificial está mudando a forma como empresas - trabalham, trazendo mais agilidade e eficiência para o dia a - dia. Mas, para a maioria dos negócios, usar IA ainda é caro - e complicado: exige conhecimento técnico, tempo e - investimento alto em tecnologia. - - ) - })} - {p({ - children: ( - <> - O Knowly nasceu para simplificar esse cenário. Queremos que - qualquer empresa consiga aproveitar o poder dos grandes - modelos de linguagem para responder dúvidas, organizar - informações e automatizar tarefas, sem precisar se preocupar - com detalhes técnicos ou infraestrutura. - - ) - })} - {p({ - children: ( - <> - Nossa plataforma permite que você envie seus próprios - documentos e, em poucos cliques, já tenha uma base de - conhecimento inteligente pronta para ser usada no seu - atendimento, site ou operação interna. Tudo isso com - segurança, praticidade e custos acessíveis. - - ) - })} - {p({ - children: ( - <> - O objetivo é ajudar empresas a inovar, ganhar tempo e focar - no que realmente importa: crescer e atender melhor seus - clientes, usando IA de verdade no dia a dia. - - ) - })} -
      -       -
      -       -       - ) -} - -export default DocsProjectPage diff --git a/src/features/docs/dump/foundation-models.tsx b/src/features/docs/dump/foundation-models.tsx deleted file mode 100644 index 8abf58b..0000000 --- a/src/features/docs/dump/foundation-models.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p, ul, li } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsModelsPage() { - return ( - - - -
      - -
      - {h1({ children: 'Modelos de Fundação AWS' })} - - {h2({ children: 'O que são modelos de fundação?' })} - {p({ - children: ( - <> - Modelos de fundação são inteligências artificiais treinadas - para entender e gerar textos, responder perguntas, resumir - informações e até criar conteúdos. Eles servem como base - para várias aplicações de IA, desde chatbots até análise de - documentos. - - ) - })} - - {h2({ children: 'Principais modelos disponíveis na AWS' })} - {ul({ - children: ( - <> - {li({ - children: ( - <> - Amazon Titan: Modelo versátil para - tarefas do dia a dia, como responder perguntas, - resumir textos e organizar informações. É uma ótima - escolha para quem busca equilíbrio entre custo e - desempenho. - - ) - })} - {li({ - children: ( - <> - Anthropic Claude: Ideal para - conversas mais longas, respostas detalhadas e - situações que exigem mais segurança e controle. Muito - usado em chatbots avançados e assistentes virtuais. - - ) - })} - {li({ - children: ( - <> - AI21 Labs: Especialista em geração de - textos criativos, artigos, e até mesmo conteúdos - técnicos. Indicado para quem precisa de textos mais - elaborados ou criativos. - - ) - })} - {li({ - children: ( - <> - Cohere: Focado em análise de - linguagem, classificação de textos e extração de - informações. Bom para automação de processos e análise - de grandes volumes de dados. - - ) - })} - - ) - })} - - {h2({ children: 'Quando usar cada modelo?' })} - {ul({ - children: ( - <> - {li({ - children: ( - <> - - Precisa de respostas rápidas e gerais? - {' '} - Use o Amazon Titan. - - ) - })} - {li({ - children: ( - <> - - Vai criar um chatbot ou assistente virtual que - precisa conversar bastante? - {' '} - O Claude é uma ótima opção. - - ) - })} - {li({ - children: ( - <> - - Quer gerar textos criativos ou técnicos? - {' '} - Experimente o AI21 Labs. - - ) - })} - {li({ - children: ( - <> - - Precisa analisar, classificar ou organizar muitos - textos? - {' '} - O Cohere pode ajudar. - - ) - })} - - ) - })} - - {p({ - children: ( - <> - Com esses modelos, você pode escolher a solução que mais - combina com o seu projeto, sem se preocupar com a - complexidade técnica. Basta selecionar o modelo e começar a - usar! - - ) - })} -
      -       -
      -       -       - ) -} - -export default DocsModelsPage diff --git a/src/features/docs/dump/integration.tsx b/src/features/docs/dump/integration.tsx deleted file mode 100644 index ff273c3..0000000 --- a/src/features/docs/dump/integration.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p, ul, li, pre } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsIntegrationPage() { - return ( - - - -
      - -
      - {h1({ children: 'Como integrar com sua base de conhecimento' })} - - {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.ai/v1/query -Headers: - Authorization: Bearer SUA_CHAVE_DE_API -Body: -{ - "prompt": "Como faço para atualizar meus dados cadastrais?", - "baseId": "sua-base-id" -} -`} - - ) - })} - - {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 DocsIntegrationPage diff --git a/src/features/docs/dump/knowledge-bases.tsx b/src/features/docs/dump/knowledge-bases.tsx deleted file mode 100644 index 3e658b7..0000000 --- a/src/features/docs/dump/knowledge-bases.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p, ul, li } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsBasesPage() { - return ( - - - -
      - -
      - {h1({ children: 'Gerenciando Bases de Conhecimento' })} - - {h2({ children: 'Como criar, editar e excluir suas bases' })} - {p({ - children: ( - <> - Gerenciar suas bases de conhecimento no Knowly é simples e - rápido. Basta acessar as configurações do seu perfil após - fazer login e selecionar a opção{' '} - "Minhas bases". - - ) - })} - - {ul({ - children: ( - <> - {li({ - children: ( - <> - Para criar uma base: Clique em{' '} - "Nova base", escolha um nome e envie - os documentos que deseja usar. Pronto! Sua base estará - disponível para consultas e integrações assim que - terminar de ser criada. - - ) - })} - {li({ - children: ( - <> - Para editar: Selecione uma base existente na - lista para ver detalhes, adicionar ou remover - documentos, ou atualizar informações. - - ) - })} - {li({ - children: ( - <> - Para excluir: Escolha a base desejada e clique - em "Excluir". Confirme a ação para - remover a base do sistema. - - ) - })} - - ) - })} - - {p({ - children: <> - })} -
      -       -
      -       -       - ) -} - -export default DocsBasesPage diff --git a/src/features/docs/dump/playground-testing.tsx b/src/features/docs/dump/playground-testing.tsx deleted file mode 100644 index f622bbb..0000000 --- a/src/features/docs/dump/playground-testing.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p, ul, li } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsTestsPage() { - return ( - - - -
      - -
      - {h1({ - children: 'Testando sua Base de Conhecimento no Playground' - })} - - {h2({ children: 'O que é o Playground?' })} - {p({ - children: ( - <> - O Playground é uma área do nosso site feita para você - testar, na prática, as bases de conhecimento que criou. Ele - funciona como um chat, parecido com o ChatGPT ou o Gemini, - onde você pode conversar com a sua base e ver as respostas - geradas pela inteligência artificial. - - ) - })} - - {h2({ children: 'Como funciona?' })} - {ul({ - children: ( - <> - {li({ - children: ( - <>Escolha qual base de conhecimento você quer testar. - ) - })} - {li({ - children: ( - <> - Envie perguntas ou comandos (prompts) no chat, como - faria em um atendimento real. - - ) - })} - {li({ - children: ( - <> - Veja as respostas geradas na hora, usando os - documentos e informações que você cadastrou. - - ) - })} - - ) - })} - - {h2({ children: 'Por que usar o Playground?' })} - {p({ - children: ( - <> - O Playground é a maneira mais fácil e rápida de conferir se - sua base está funcionando como esperado. Você pode testar - diferentes perguntas, ajustar seus documentos e experimentar - os modelos antes de integrar a IA ao seu site ou sistema. - - ) - })} -
      -       -
      -       -       - ) -} - -export default DocsTestsPage diff --git a/src/features/docs/dump/subscription-management.tsx b/src/features/docs/dump/subscription-management.tsx deleted file mode 100644 index e09a579..0000000 --- a/src/features/docs/dump/subscription-management.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Background } from '@/shared/components/background' -import { Layout } from '@/shared/components/layout' -import { motion } from 'framer-motion' -import { h1, h2, p, ul, li } from '@/shared/components/typography' -import { BackgroundBlobs } from '@/shared/components/background-blobs' - -export function DocsPlansPage() { - return ( - - - -
      - -
      - {h1({ children: 'Gerenciando seu Plano de Assinatura' })} - - {h2({ children: 'Como alterar seu plano' })} - {p({ - children: ( - <> - Para gerenciar seu plano de assinatura no Knowly, é só - acessar a área do usuário após fazer login. No menu lateral - à esquerda, clique em "Assinatura". - - ) - })} - {ul({ - children: ( - <> - {li({ - children: ( - <> - Na seção "Plano atual", procure o - botão "Mudar plano" no canto inferior - direito. - - ) - })} - {li({ - children: ( - <> - Clique em "Mudar plano" para ver as - opções disponíveis e escolher o plano que melhor - atende às suas necessidades. - - ) - })} - {li({ - children: ( - <> - Confirme a alteração e pronto! Seu novo plano já - estará ativo. - - ) - })} - - ) - })} - {p({ - children: ( - <> - Assim, você pode ajustar sua assinatura sempre que quiser, - de forma rápida e sem complicação. - - ) - })} -
      -       -
      -       -       - ) -} - -export default DocsPlansPage diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx index 50ae156..a00f9b0 100644 --- a/src/shared/components/navbar.tsx +++ b/src/shared/components/navbar.tsx @@ -80,6 +80,9 @@ export function Navbar() { Preços + + Documentação + FAQ @@ -214,6 +217,18 @@ export function Navbar() { > Preços + + Documentação + Date: Tue, 21 Oct 2025 21:11:54 -0300 Subject: [PATCH 7/7] Fix sidebar z-index for improved layering on mobile --- src/shared/components/docs-sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx index cc866d0..e34d2da 100644 --- a/src/shared/components/docs-sidebar.tsx +++ b/src/shared/components/docs-sidebar.tsx @@ -108,7 +108,7 @@ export function DocsSidebar() { {/* Sidebar */}