etalab-ia / albert-frontend

Frontend app to interact with Albert API. Albert is a conversational agent that uses official French data sources to answer administrative agents questions.

Albert Frontend

English version below

⚠️ DISCLAIMER : Ce projet est devenu open source très récemment, voici quelques mises en garde :

• Le code peut contenir des composants et du code qui ne vous sont pas utiles et qui sont utilisés spécifiquement pour France Services, le projet sera scindé dans le futur.
• L'accessibilité du projet n'est pas totale selon les critères du RGAA
• La documentation n'est pas complète

🎯 Objectif général

Ce repo a pour but de fournir une interface visuelle pour interagir avec l'API d'Albert (le projet de chatbot LLM du gouvernement français).

🛠️ Configuration

Pile technologique

ViteJS
React
Tailwind

DSFR

DSFR est déjà installé, voici quelques ressources utiles :

• Basics : marges, taille de police, design, picto etc.
• Composants
• Accessibilité : Critères RGAA

Gestion des états

Redux 👉 pour la gestion globale de l'état du client
React-Query 👉 pour les requêtes API, la mise en cache et la gestion asynchrone du state.

Validation

Nous utilisons Valibot pour valider les entrées des utilisateurs, c'est une alternative légère aux bibliothèques populaires comme Zod.

Plus

Implémentation d'un combineReducers pour gérer les différents états de l'application, disponible dans /utils/reducer/reducer.jsx. Pour l'utiliser, un Store enveloppe le composant Root.

Lancer le projet

Les scripts sont disponibles dans package.json

Installer les dépendances :
npm i

Mode développement

Créer un fichier tailwind :
npx tailwind -i src/style/style.css -o style.css

Lancer le mode dev :
npm run dev

Mode production

Consulter les Vite docs

Variables d'environnement

Nous utilisons ViteJS pour construire le projet donc chaque nom de variable d'environnement est préfixé par VITE_.

VITE_API_URL -- url pour les requêtes de l'api.
VITE_MATOMO_URL -- l'url de l'instance de matomo pour l'analyse (optionnel)
VITE_ENVIRONMENT_NAME -- une varialbe optionnelle utilisée pour afficher des fonctionnalités spécifiques pour les usagers de France Services.

VITE_MODEL_NAME -- le modèle à utiliser pour les requêtes, vous pouvez trouver une liste ici ici
VITE_MODEL_MODE -- chaque modèle possède plusieurs modes lui permettant de répondre différemment: rag, rag-gt VITE_MODEL_TEMPERATURE -- la température utilisée par le modèle pour générer la réponse. Entre 1 et 100

API

Voici tous les points d'accès utilisés par Albert Note : La documentation des endpoints n'est pas encore complète.

Albert front utilise tanstack-query (react-query) pour interagir avec le backend.
Les fonctions sont situées dans le dossier src/api et peuvent être importées via @api.

Tous les points d'entrée de l'api sont référencés dans src/api/routes.ts

États Redux

• stream : Gère la réponse du bot en cours, il est aussi utilisé pour vérifier si le bot est en streaming ou non.
• user : Tous les messages utilisateur/agent de la conversation, ainsi que les sources du message actuel.

---

English version

English version

⚠️ DISCLAIMER: This project went open source very recently, here are some caveats:

• The code might contain components and code that are of no use to you and that are used specifically for France Services, the project will be splitted in the future.
• The Accessibility of the project is not total according to the RGAA criterias
• The documentation is not complete

🎯 General objective

This repo aims to provide a visual interface to interact with Albert's (the French governement's LLM chatbot project) API

🛠️ Configuration

Tech stack

ViteJS
React
Tailwind

DSFR

DSFR is already installed, here are some useful resources:

• Basics: margins, font size, design, picto etc.
• Components
• Accessibility: RGAA criterias

State management

Redux 👉 for global client state management
React-Query 👉 for querying, caching and async state management

Validation

We use Valibot to validate users input, this is a lightweight alternative to popular libraries like Zod.

More

Implementation of a combineReducers to manage the application's various states, available in /utils/reducer/reducer.jsx. To use it, a Store wraps the Root component.

Launch project

Scripts are available in package.json

Install dependencies:
npm i

Dev mode

Create tailwind file:
npx tailwind -i src/style/style.css -o style.css

Launch dev mode:
npm run dev

Production mode

Check out the Vite docs

Environment variables

We are using ViteJS to build the project so every env variable name is prefixed with VITE_.

VITE_API_URL -- url for api queries.
VITE_MATOMO_URL -- the url to the matomo instance for analytics (optionnal)
VITE_ENVIRONMENT_NAME -- and extra variable currently used to display different features in the UI for FranceServices.

VITE_MODEL_NAME -- the model to use for queries, you can find a list in here
VITE_MODEL_MODE -- model mode for instance 'rag'
VITE_MODEL_TEMPERATURE -- the temperature used by the model to generate the response. between 1 and 100

API

Here are all the endpoints used by Albert. Note: The endpoints documentation is not complete yet

Albert front uses tanstack-query (react-query) to interact with the backend.
Functions are located in the src/api folder and can be importe via @api.

All the api's endpoints are referenced in src/api/routes.ts

Redux states

• stream: Handles the current bot's response, it is also used to check if the bot is streaming or not.
• user: current chat and stream ids, message history