---
title: "Rich Editor - Assistant IA"
module: ai
type: functional
status: active
updated: 2026-03-25
---

# Rich Editor - Assistant IA

> Documentation fonctionnelle de l'assistant IA integre dans l'editeur rich text (documentation v3).

---

## Vue d'ensemble

L'editeur rich text (`RichEditor`) dispose d'un bouton **Assistant IA** dans son ribbon. Ce bouton ouvre une modale permettant de generer du contenu HTML via l'IA, puis de l'integrer directement dans l'editeur.

Le workflow se deroule en **3 etapes** :
1. **Choix du prompt** — selection de l'assistant IA a utiliser
2. **Choix du modele** — selection du modele IA (GPT-4, Claude, etc.)
3. **Generation** — saisie de la demande, generation, previsualisation et integration

---

## Acces

Le bouton IA apparait dans le groupe **IA** du ribbon de l'editeur rich text, sous forme d'un bouton avec l'icone `fa-solid fa-wand-magic-sparkles`.

Au clic, une modale s'ouvre avec le composant Livewire `ai.rich-editor-ai-chat`.

---

## Etape 1 : Choix du prompt

L'utilisateur voit deux sections en accordions :

| Section | Etat par defaut | Contenu |
|---------|----------------|---------|
| **Recommande** | Ouvert | Prompts dont le slug est dans la liste des recommandes (boutons bleus) |
| **Autres assistants** | Ferme | Tous les autres prompts accessibles (boutons gris) |

Les prompts recommandes sont definis par leurs slugs :
- `documentation-generator`
- `actualite-generator`

Seuls les prompts **actifs** et **accessibles par l'entite** de l'utilisateur sont affiches.

---

## Etape 2 : Choix du modele

Apres avoir selectionne un prompt, l'utilisateur choisit un modele IA :

| Section | Etat par defaut | Contenu |
|---------|----------------|---------|
| **Recommande** | Ouvert | Modeles avec `bldefault = true` (boutons bleus + badge provider) |
| **Parametres avances** | Ferme | Autres modeles actifs (boutons gris + badge provider) |

Si le prompt selectionne est lie a un provider specifique (`idprovider`), seuls les modeles de ce provider sont proposes. Sinon, tous les modeles actifs de tous les providers actifs sont affiches.

Si aucun modele n'a `bldefault = true`, le premier modele est automatiquement place dans la section "Recommande".

---

## Etape 3 : Generation

### Formulaire de saisie

| Element | Description |
|---------|-------------|
| **Checkbox "Inclure le contenu actuel"** | Active par defaut. Envoie le contenu de l'editeur comme contexte a l'IA |
| **Zone de texte** | Description de ce que l'utilisateur souhaite generer |
| **Bouton Generer** | Lance la generation (desactive si le message est vide) |

### Pendant la generation

Un skeleton de contenu s'affiche (titres, paragraphes simulees) avec un spinner.

### Resultat

Le contenu HTML genere est affiche dans une zone de previsualisation (max 500px de hauteur, scrollable).

Trois actions sont disponibles :

| Action | Comportement |
|--------|-------------|
| **Regenerer** | Relance la generation avec les memes parametres |
| **Ajouter en dessous** | Insere le contenu a la suite du contenu existant dans l'editeur |
| **Remplacer la documentation** | Remplace tout le contenu de l'editeur (avec dialogue de confirmation) |

### Gestion des erreurs

- Si le prompt ou le modele est introuvable, un message d'erreur s'affiche avec un bouton "Reessayer"
- En cas de limite IA atteinte (`AiLimitReachedException`), le message d'erreur du quota s'affiche
- Les erreurs inattendues sont logguees et un message generique est affiche

---

## Traitement du contenu genere

Le contenu retourne par l'IA passe par un pipeline de nettoyage (`cleanHtmlContent`) :

1. **Detection markdown** — si le contenu est majoritairement du texte brut (>80% survit a `strip_tags`), il est converti en HTML via `Str::markdown()`
2. **Suppression des balises dangereuses** — `<style>` et `<script>` sont supprimes avec leur contenu
3. **Echappement des blocs code** — le HTML a l'interieur des balises `<code>` est echappe pour eviter l'interpretation navigateur
4. **Auto-fermeture des balises** — `DOMDocument` corrige les balises HTML non fermees
5. **Fallback regex** — si `DOMDocument` echoue, un nettoyage basique supprime les balises `DOCTYPE`, `html`, `head`, `body`, `meta`

### Prompt de formatage

Le system prompt inclut des regles de formatage obligatoires pour que l'IA genere du HTML compatible avec l'editeur :
- HTML dans une seule `<div>` racine
- Styles inline (Calibri, tailles en pt, couleurs specifiques pour H1/H2/H3)
- Pas de `DOCTYPE`, `html`, `head`, `body`, `style`, `script`
- Tableaux bordes, code avec fond sombre, listes stylees
- Balises HTML echappees dans les blocs `<code>`

---

## Architecture technique

### Fichiers

| Fichier | Role |
|---------|------|
| `app/Livewire/Ai/RichEditorAiChat.php` | Composant Livewire (logique 3 etapes) |
| `resources/views/livewire/ai/rich-editor-ai-chat.blade.php` | Vue Blade (accordions Onyx, skeleton, formulaire) |
| `app/Livewire/RichEditor.php` | Composant RichEditor parent |
| `resources/views/livewire/rich-editor.blade.php` | Vue de l'editeur (ribbon + zone d'edition) |
| `public/assets/css/rich-editor.css` | Styles CSS du panneau AI et de l'editeur |

### Evenements Livewire

| Evenement | Direction | Description |
|-----------|-----------|-------------|
| `modalOpen` | Editor -> Modal | Ouvre la modale avec les parametres du composant |
| `richEditorAiInsert` | AiChat -> Editor | Insere le contenu genere (mode `append` ou `replace`) |
| `modalClose` | AiChat -> Modal | Ferme la modale apres integration |
| `pushNotifyCustom` | AiChat -> UI | Notification de succes |

### Integration avec AiManager

La generation utilise `AiManager` pour communiquer avec les providers IA :
- Le provider est deduit du modele selectionne (`$model->idprovider`)
- Le system prompt combine le prompt selectionne + les regles de formatage
- Les parametres du prompt (temperature, max_tokens) sont appliques si definis
- Le contenu de l'editeur est envoye comme contexte dans un echange user/assistant prealable

---

## Configuration admin

### Prompts

Les prompts sont geres dans **Administration > IA > Prompts**. Pour qu'un prompt apparaisse dans l'assistant rich editor :
- Il doit etre **actif** (`blactive = true`)
- Il doit etre **accessible par l'entite** de l'utilisateur (via `_id` ou `AiPromptEntity`)
- Son `lbcontext` n'a pas d'impact sur l'affichage (tous les contextes sont visibles)

Pour qu'un prompt apparaisse dans la section "Recommande", son `lbslug` doit etre `documentation-generator` ou `actualite-generator`.

### Modeles

Pour qu'un modele apparaisse dans la section "Recommande", il doit avoir `bldefault = true`.

### Providers

Les providers doivent etre **actifs** pour que leurs modeles soient proposes.