AI Toolkit

Vue d’ensemble

L’AI Toolkit ajoute trois interfaces liées à l’éditeur :

• Ask AI — une boîte de dialogue lancée depuis la barre d’outils, avec sept modes en un clic (relecture, réécriture, raccourcissement, développement, résumé, traduction, justification), un sélecteur de portée sélection/document et un aperçu dans le texte avant application.
• AI Chat — un panneau latéral ancré pour les échanges en plusieurs tours. Tient compte de la portée, avec des prompts rapides et des actions copier/appliquer/insérer/remplacer sur chaque réponse de l’IA.
• AI Review — une file persistante de suggestions en attente, acceptées et rejetées. Synchronisation facultative avec un registre côté serveur pour une relecture d’une session à l’autre.

Les trois partagent le même hook aiToolkitResolver et le même contrat d’opérations : une suggestion prévisualisée dans une interface peut donc être acceptée, rejetée ou transmise dans une autre.

Mode démo. Sans résolveur configuré, le plugin fournit un defaultResolveAction déterministe, pour que vous puissiez utiliser Ask AI, Chat et Review en local, sans clé d’API, sans appel réseau et avec une sortie prévisible.

Installation

Chargez la feuille de style et le script de l’AI Toolkit après le bundle principal de l’éditeur. Par défaut, le plugin injecte automatiquement un bouton Ask AI dans les préréglages de barre d’outils standard default, basic, full et mobile à son chargement.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/plugins/aitoolkit.css" />

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<!-- aitoolkit.js is bundled inside all_plugins.js.
     Include it separately only if you are loading plugins piecemeal. -->

<div id="editor"></div>
<script>
  var editor = new RichTextEditor("#editor", {
    toolbar: "full",
    aiToolkitPersistenceKey: "my-editor-ai"
  });
</script>

Configuration. Le fichier rte.js que vous avez téléchargé comporte en tête un bloc RTE_DefaultConfig modifiable, en texte lisible — ouvrez-le et modifiez les valeurs par défaut de l’IA (clé de persistance, libellé, point de terminaison du résolveur, etc.) à côté de tous les autres réglages de l’éditeur. Aucun fichier de configuration séparé n’est à charger. aitoolkit.css doit être présent dès que le bouton IA peut s’afficher (même avec la barre d’outils par défaut), sinon le menu déroulant de l’IA aura une taille incorrecte. Pour garder l’IA activée sans injection automatique du bouton, définissez aiToolkitAutoToolbarButtons: false, puis ajoutez aiassist uniquement aux barres d’outils où vous le voulez.

var editor = new RichTextEditor("#editor", {
  toolbar: "default",
  aiToolkitAutoToolbarButtons: false
});

Trois interfaces

Modes intégrés

Chaque mode est une entrée { id, title, description } dans config.aiToolkitDialogModes. Les modes apparaissent dans la liste déroulante Action de la boîte de dialogue Ask AI et peuvent être appelés via runQuickAction(id).

Ce sont des bouchons déterministes destinés au résolveur de démo. Dès que vous branchez aiToolkitResolver, c’est votre fonction qui décide du traitement de chaque mode. Vous pouvez aussi enregistrer de nouveaux modes — voir Actions personnalisées.

Le hook aiToolkitResolver

C’est le point d’extension. Le résolveur reçoit une requête structurée et renvoie un résultat (ou une Promise qui se résout en résultat). L’éditeur se charge de l’affichage, de l’aperçu, de la relecture et de l’application.

var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  aiToolkitResolver: async function (request) {
    var reply = await fetch("/api/ai", {
      method: "POST",
      body: JSON.stringify({
        mode: request.mode,
        text: request.source,
        language: request.language
      })
    }).then(function (r) { return r.json(); });

    return {
      result: reply.text,             // string: the AI output
      reason: reply.explanation,      // string: why this change
      operations: [{                  // structured plan (optional)
        type: "preview-suggestion",
        text: reply.text,
        reason: reply.explanation
      }]
    };
  }
});

Forme de la requête

Forme de la réponse

Renvoyez un objet simple avec n’importe lesquels des champs suivants. Tous sont facultatifs ; omettez ceux dont vous n’avez pas besoin.

Vous pouvez aussi renvoyer une chaîne ou une Promise. Une chaîne devient { result: <that string> } ; une Promise est attendue.

Types d’opérations

Les opérations constituent le plan structuré que peut renvoyer votre résolveur. L’éditeur les exécute dans l’ordre (ou une par une, à l’initiative de l’utilisateur, depuis le panneau du plan).

Des types d’opérations personnalisés peuvent être enregistrés avec editor.aiToolkit.registerOperationHandler(type, handler).

editor.aiToolkit.registerOperationHandler("insert-callout", function (op, ctx) {
  // ctx = { snapshot, resolved, request, action, editor }
  ctx.editor.insertHTML(
    '<aside class="callout">' + ctx.editor.htmlEncode(op.text) + '</aside>'
  );
  return true; // mark the operation as handled
});

API de programmation

Toutes les interfaces peuvent être ouvertes et pilotées depuis le code via editor.aiToolkit.

// Open the Ask AI dialog
editor.aiToolkit.openDialog({ presetMode: "rewrite", autoRun: false });

// Quick actions (no dialog) - target: selection if present, else whole document
editor.aiToolkit.runQuickAction("proofread");
editor.aiToolkit.runQuickAction("translate", { language: "spanish" });

// Panels
editor.aiToolkit.openChatPanel({ focusComposer: true });
editor.aiToolkit.openReviewPanel({ focusPanel: true });
editor.aiToolkit.closeChatPanel();
editor.aiToolkit.closeReviewPanel();
editor.aiToolkit.toggleChatPanel();
editor.aiToolkit.toggleReviewPanel();

// Resolve without rendering - useful for tests + headless flows
editor.aiToolkit.resolveAction("rewrite", { source: "hello world" })
  .then(function (resolved) { console.log(resolved.result); });

// Swap the resolver at runtime
editor.aiToolkit.setResolver(myResolver);

// Review queue
var pending = editor.aiToolkit.getSuggestions();
editor.aiToolkit.clearSuggestions();
editor.aiToolkit.saveSuggestionLedger();
editor.aiToolkit.loadSuggestionLedger();

Actions et modes personnalisés

Enregistrez des actions propres à votre domaine (par exemple une réécriture SEO, une vérification de clauses juridiques, un ajustement du ton). Elles s’intègrent à la même boîte de dialogue, au même chat et à la même interface de relecture.

// Add a new dialog mode (appears in the Action dropdown)
editor.aiToolkit.registerDialogMode({
  id: "seo",
  title: "SEO rewrite",
  description: "Rewrite for stronger keyword coverage while preserving meaning."
});

// Register the action with a target (where output goes by default)
editor.aiToolkit.registerAction({
  id: "seo",
  title: "SEO rewrite",
  target: "selection-preview",
  resolverMode: "seo"          // passed as request.mode to your resolver
});

// Your resolver handles it just like built-in modes
config.aiToolkitResolver = function (request) {
  if (request.mode === "seo") { /* call your SEO service */ }
  /* ... */
};

Persistance et registre distant

Les suggestions du panneau AI Review sont conservées dans localStorage sous une clé que vous contrôlez. Définissez aiToolkitPersistenceKey pour limiter la portée à une instance de l’éditeur (par exemple à un document).

new RichTextEditor("#editor", {
  aiToolkitPersistenceKey: "doc-42-review",     // localStorage scope
  aiToolkitSuggestionLedgerUrl: "/api/ai/ledger", // optional GET/POST for cross-session sync
  aiToolkitReviewLogUrl: "/api/ai/review-log",    // optional activity feed endpoint
  aiToolkitReviewSyncInterval: 15000               // ms between sync polls (default 15s)
});

Lorsque l’URL du registre est définie, le plugin effectue un GET à l’ouverture et un POST à chaque acceptation ou rejet : la file de relecture survit ainsi d’une session à l’autre et peut être partagée entre relecteurs.

BYOK (apportez votre propre clé)

Important : l’éditeur n’accepte ni ne stocke de clés d’API. Les clés ont leur place dans le gestionnaire de secrets de votre serveur.

Le modèle BYOK recommandé :

1. Votre interface d’administration permet à un locataire de choisir un fournisseur et de coller une clé. Le formulaire envoie un POST à votre backend.
2. Votre backend écrit la clé dans votre gestionnaire de secrets, avec une portée limitée au locataire.
3. Le aiToolkitResolver de l’éditeur envoie un POST à /api/ai avec le cookie de session. Aucune clé dans le navigateur.
4. Votre backend récupère la clé du locataire, appelle le fournisseur et renvoie une réponse épurée.

Consultez la démo BYOK pour un formulaire d’administration fonctionnel, un résolveur routé et une esquisse de serveur de style Express.

Référence de configuration

L’essayer

Chaque interface ci-dessus fonctionne sans clé d’API dans les démos publiques :

• Démo de l’AI Toolkit — Ask AI, actions rapides, Chat, panneau Review
• Démo BYOK — formulaire de réglages d’administration + résolveur routé + esquisse côté serveur
• Présentation de l’AI Toolkit — page de présentation avec une maquette d’éditeur en direct