LobeChat est une application de conversation AI 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 fournit des fonctionnalités clés telles que le rendu côté serveur, le framework de routage, le gestionnaire de route, 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 notre bibliothèque de composants métier.
- **Gestion d'état** : Nous avons opté pour [zustand](https://github.com/pmndrs/zustand), une bibliothèque de gestion d'état légère et facile à utiliser.
- **Requêtes réseau** : Nous utilisons [swr](https://swr.vercel.app/), une bibliothèque de hooks React pour la récupération de données.
- **Routage** : Pour la gestion des routes, nous utilisons directement la solution fournie par [Next.js](https://nextjs.org/).
- **Internationalisation** : Nous utilisons [i18next](https://www.i18next.com/) pour implémenter le support multilingue de 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.
## Structure du répertoire
La structure du répertoire de LobeChat est la suivante :
\`\`\`bash
src
├── app # Code principal de l'application et gestion d'état
├── components # Composants UI réutilisables
├── config # Fichiers de configuration de l'application, contenant les variables d'environnement côté client et côté serveur
├── const # Définitions de constantes, telles que les types d'action, les noms de route, etc.
├── features # Modules fonctionnels liés aux fonctionnalités métier, tels que les paramètres d'Agent, 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 de l'application, tels que la barre de navigation, la barre latérale, etc.
├── locales # Fichiers de langue pour l'internationalisation
├── services # Interfaces de services backend encapsulées, telles que les requêtes HTTP
├── store # Magasin zustand pour la gestion d'état
├── types # Fichiers de définition de types TypeScript
└── utils # Fonctions utilitaires générales
\`\`\`
