LobeChat là một ứng dụng hội thoại AI được xây dựng trên nền tảng Next.js. Nó sử dụng một loạt công nghệ để thực hiện các chức năng và tính năng khác nhau.
## Công nghệ cơ bản
Công nghệ cốt lõi của LobeChat như sau:
- **Khung**: Chúng tôi đã chọn [Next.js](https://nextjs.org/), đây là một khung React mạnh mẽ, cung cấp cho dự án của chúng tôi khả năng render phía máy chủ, khung định tuyến, Router Handler và các chức năng quan trọng khác.
- **Thư viện thành phần**: Chúng tôi đã sử dụng [Ant Design (antd)](https://ant.design/) làm thư viện thành phần cơ bản, đồng thời đưa vào [lobe-ui](https://github.com/lobehub/lobe-ui) làm thư viện thành phần cho doanh nghiệp của chúng tôi.
- **Quản lý trạng thái**: Chúng tôi đã chọn [zustand](https://github.com/pmndrs/zustand), một thư viện quản lý trạng thái nhẹ và dễ sử dụng.
- **Yêu cầu mạng**: Chúng tôi sử dụng [swr](https://swr.vercel.app/), một thư viện React Hooks để lấy dữ liệu.
- **Định tuyến**: Chúng tôi sử dụng giải pháp do [Next.js](https://nextjs.org/) cung cấp cho quản lý định tuyến.
- **Quốc tế hóa**: Chúng tôi sử dụng [i18next](https://www.i18next.com/) để thực hiện hỗ trợ đa ngôn ngữ cho ứng dụng.
- **Phong cách**: Chúng tôi sử dụng [antd-style](https://github.com/ant-design/antd-style), một thư viện CSS-in-JS tương thích với Ant Design.
- **Kiểm tra đơn vị**: Chúng tôi sử dụng [vitest](https://github.com/vitejs/vitest) để thực hiện kiểm tra đơn vị.
## Cấu trúc thư mục
Cấu trúc thư mục của LobeChat như sau:
\`\`\`bash
src
├── app # Mã liên quan đến logic chính và quản lý trạng thái của ứng dụng
├── components # Các thành phần UI có thể tái sử dụng
├── config # Tệp cấu hình của ứng dụng, bao gồm biến môi trường phía khách hàng và biến môi trường phía máy chủ
├── const # Để định nghĩa các hằng số, như loại hành động, tên định tuyến, v.v.
├── features # Các mô-đun chức năng liên quan đến chức năng doanh nghiệp, như cài đặt Agent, cửa sổ phát triển plugin, v.v.
├── hooks # Các Hook tùy chỉnh có thể tái sử dụng trên toàn ứng dụng
├── layout # Các thành phần bố cục của ứng dụng, như thanh điều hướng, thanh bên, v.v.
├── locales # Tệp ngôn ngữ quốc tế hóa
├── services # Các giao diện dịch vụ backend đã được đóng gói, như yêu cầu HTTP
├── store # Cửa hàng zustand để quản lý trạng thái
├── types # Tệp định nghĩa kiểu TypeScript
└── utils # Các hàm tiện ích chung
\`\`\`
