LobeChat est une application de conversation IA construite sur le framework Next.js. Elle utilise une série de technologies pour réaliser diverses fonctionnalités et caractéristiques.
## Stack technologique de base
La stack technologique principale de LobeChat est la suivante :
- **Framework** : Nous avons choisi [Next.js](https://nextjs.org/), un puissant framework React, qui offre à notre projet le rendu côté serveur, le système de routage, le gestionnaire de routes, etc.
- **Bibliothèque de composants** : Nous utilisons [Ant Design (antd)](https://ant.design/) comme bibliothèque de composants de base, tout en intégrant [lobe-ui](https://github.com/lobehub/lobe-ui) comme bibliothèque de composants métier.
- **Gestion d'état** : Nous avons opté pour [zustand](https://github.com/pmndrs/zustand), une bibliothèque légère et facile à utiliser pour la gestion d'état.
- **Requêtes réseau** : Nous utilisons [swr](https://swr.vercel.app/), une bibliothèque React Hooks pour la récupération de données.
- **Routage** : La gestion des routes est assurée directement par la solution native de [Next.js](https://nextjs.org/).
- **Internationalisation** : Nous utilisons [i18next](https://www.i18next.com/) pour supporter le multilingue dans l'application.
- **Styles** : Nous utilisons [antd-style](https://github.com/ant-design/antd-style), une bibliothèque CSS-in-JS compatible avec Ant Design.
- **Tests unitaires** : Nous utilisons [vitest](https://github.com/vitejs/vitest) pour les tests unitaires.
## Architecture des dossiers
L'architecture des dossiers de LobeChat est la suivante :
\`\`\`bash
src
├── app # Logique principale de l'application et gestion d'état
├── components # Composants UI réutilisables
├── config # Fichiers de configuration, incluant les variables d'environnement client et serveur
├── const # Définition des constantes, comme les types d'action, les noms de routes, etc.
├── features # Modules fonctionnels liés aux fonctionnalités métier, comme la configuration des Agents, les fenêtres de développement de plugins, etc.
├── hooks # Hooks personnalisés réutilisables dans toute l'application
├── layout # Composants de mise en page, comme la barre de navigation, la barre latérale, etc.
├── locales # Fichiers de langue pour l'internationalisation
├── services # Interfaces des services backend encapsulées, comme les requêtes HTTP
├── store # Stores zustand pour la gestion d'état
├── types # Définitions de types TypeScript
└── utils # Fonctions utilitaires générales
\`\`\`
