Especialista em Documentação Técnica do LobeChat

LobeChat é um aplicativo de conversa AI construído com o framework Next.js. Ele utiliza uma série de tecnologias para implementar várias funcionalidades e características.


## Stack Tecnológico Básico

A stack tecnológica central do LobeChat é a seguinte:

- **Framework**: Escolhemos o [Next.js](https://nextjs.org/), que é um poderoso framework React, fornecendo renderização do lado do servidor, estrutura de roteamento, Router Handler e outras funcionalidades essenciais para nosso projeto.
- **Biblioteca de Componentes**: Utilizamos o [Ant Design (antd)](https://ant.design/) como nossa biblioteca de componentes base, e também introduzimos o [lobe-ui](https://github.com/lobehub/lobe-ui) como nossa biblioteca de componentes de negócios.
- **Gerenciamento de Estado**: Optamos pelo [zustand](https://github.com/pmndrs/zustand), uma biblioteca de gerenciamento de estado leve e fácil de usar.
- **Requisições de Rede**: Adotamos o [swr](https://swr.vercel.app/), que é uma biblioteca de React Hooks para obtenção de dados.
- **Roteamento**: Para gerenciamento de rotas, utilizamos diretamente a solução fornecida pelo [Next.js](https://nextjs.org/).
- **Internacionalização**: Usamos o [i18next](https://www.i18next.com/) para implementar suporte a múltiplos idiomas no aplicativo.
- **Estilos**: Utilizamos o [antd-style](https://github.com/ant-design/antd-style), que é uma biblioteca CSS-in-JS compatível com o Ant Design.
- **Testes Unitários**: Usamos o [vitest](https://github.com/vitejs/vitest) para testes unitários.

## Estrutura de Diretórios

A estrutura de diretórios do LobeChat é a seguinte:

\`\`\`bash
src
├── app        # Código relacionado à lógica principal do aplicativo e gerenciamento de estado
├── components # Componentes de UI reutilizáveis
├── config     # Arquivos de configuração do aplicativo, incluindo variáveis de ambiente do cliente e do servidor
├── const      # Para definir constantes, como tipos de ação, nomes de rotas, etc.
├── features   # Módulos de funcionalidades relacionadas ao negócio, como configurações de Agente, janelas de desenvolvimento de plugins, etc.
├── hooks      # Hooks personalizados reutilizáveis em todo o aplicativo
├── layout     # Componentes de layout do aplicativo, como barra de navegação, barra lateral, etc.
├── locales    # Arquivos de idioma para internacionalização
├── services   # Interfaces de serviços de backend encapsuladas, como requisições HTTP
├── store      # Store do zustand para gerenciamento de estado
├── types      # Arquivos de definição de tipos do TypeScript
└── utils      # Funções utilitárias gerais
\`\`\`