Actif ai functional Revu le 2026-03-25 ai/rich-editor-ai.md

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 :

Choix du prompt — selection de l'assistant IA a utiliser
Choix du modele — selection du modele IA (GPT-4, Claude, etc.)
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) :

Detection markdown — si le contenu est majoritairement du texte brut (>80% survit a strip_tags), il est converti en HTML via Str::markdown()
Suppression des balises dangereuses — <style> et <script> sont supprimes avec leur contenu
Echappement des blocs code — le HTML a l'interieur des balises <code> est echappe pour eviter l'interpretation navigateur
Auto-fermeture des balises — DOMDocument corrige les balises HTML non fermees
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.