Skip to content

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

Notifications You must be signed in to change notification settings

etalab-ia/franceservices-frontend

Repository files navigation

Albert France services

English version below

🎯 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 :

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 variable 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.

🛠️ Configuration

Tool & server development


English version

English version

🎯 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:

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages