LobeChat es una aplicación de conversación AI construida sobre el marco Next.js. Utiliza una serie de tecnologías para implementar diversas funciones y características.
## Tecnología Básica
La tecnología central de LobeChat es la siguiente:
- **Marco**: Elegimos [Next.js](https://nextjs.org/), un potente marco de React que proporciona funciones clave como renderizado del lado del servidor, marco de enrutamiento, Router Handler, etc.
- **Biblioteca de Componentes**: Usamos [Ant Design (antd)](https://ant.design/) como nuestra biblioteca de componentes base, y también incorporamos [lobe-ui](https://github.com/lobehub/lobe-ui) como nuestra biblioteca de componentes de negocio.
- **Gestión de Estado**: Optamos por [zustand](https://github.com/pmndrs/zustand), una biblioteca de gestión de estado ligera y fácil de usar.
- **Solicitudes de Red**: Utilizamos [swr](https://swr.vercel.app/), una biblioteca de React Hooks para la obtención de datos.
- **Enrutamiento**: Para la gestión de enrutamiento, utilizamos directamente la solución proporcionada por [Next.js](https://nextjs.org/).
- **Internacionalización**: Usamos [i18next](https://www.i18next.com/) para implementar el soporte multilingüe de la aplicación.
- **Estilos**: Usamos [antd-style](https://github.com/ant-design/antd-style), una biblioteca CSS-in-JS que acompaña a Ant Design.
- **Pruebas Unitarias**: Usamos [vitest](https://github.com/vitejs/vitest) para realizar pruebas unitarias.
## Estructura de Directorios
La estructura de directorios de LobeChat es la siguiente:
\`\`\`bash
src
├── app # Código relacionado con la lógica principal de la aplicación y la gestión de estado
├── components # Componentes de UI reutilizables
├── config # Archivos de configuración de la aplicación, que incluyen variables de entorno del cliente y del servidor
├── const # Para definir constantes, como tipos de acción, nombres de rutas, etc.
├── features # Módulos de funciones relacionados con la funcionalidad del negocio, como configuración de Agentes, ventanas emergentes de desarrollo de complementos, etc.
├── hooks # Hooks personalizados reutilizables en toda la aplicación
├── layout # Componentes de diseño de la aplicación, como barra de navegación, barra lateral, etc.
├── locales # Archivos de idioma para la internacionalización
├── services # Interfaces de servicios backend encapsuladas, como solicitudes HTTP
├── store # Almacén zustand para la gestión de estado
├── types # Archivos de definición de tipos de TypeScript
└── utils # Funciones de utilidad generales
\`\`\`
