Actions utilisateur

Actions utilisateur

Les actions utilisateur permettent à vos utilisateurs d’interagir avec l’agent au-delà du texte libre. Boutons de suggestions, actions rapides, confirmations, formulaires inline : ces interactions guidées améliorent l’expérience et réduisent les erreurs.

Actions de suggestion

Les suggestions apparaissent avant que l’utilisateur tape un message :

import { ChatProvider, ChatWindow, MessageInput } from "@openai/chatkit/react";

function ChatAvecSuggestions() {
  const suggestions = [
    { label: "Voir mes commandes", message: "Montrez-moi mes commandes récentes" },
    { label: "Contacter le support", message: "J'ai besoin d'aide avec un problème" },
    { label: "Mes factures", message: "Affichez mes dernières factures" },
    { label: "Statut de livraison", message: "Où en est ma livraison ?" },
  ];

  return (
    <ChatProvider endpoint="/api/chat">
      <ChatWindow
        welcomeMessage="Bonjour ! Comment puis-je vous aider aujourd'hui ?"
        suggestions={suggestions}
      />
      <MessageInput />
    </ChatProvider>
  );
}

Actions inline dans les messages

L’agent peut proposer des actions directement dans ses réponses :

import json
from agents import function_tool

@function_tool
def proposer_actions_commande(commande_id: str) -> str:
    """Propose des actions pour une commande."""
    return json.dumps({
        "__actions": [
            {
                "id": "suivre",
                "label": "Suivre la livraison",
                "icon": "truck",
                "message": f"Suivre la livraison de la commande {commande_id}",
            },
            {
                "id": "facture",
                "label": "Voir la facture",
                "icon": "document",
                "message": f"Afficher la facture de la commande {commande_id}",
            },
            {
                "id": "retour",
                "label": "Demander un retour",
                "icon": "return",
                "style": "outline",
                "message": f"Initier un retour pour la commande {commande_id}",
            },
        ]
    })

Côté frontend, rendez ces actions comme des boutons :

function ActionsWidget({ data, onAction }) {
  return (
    <div style={{
      display: "flex",
      flexWrap: "wrap",
      gap: "8px",
      margin: "12px 0",
    }}>
      {data.__actions.map((action) => (
        <button
          key={action.id}
          onClick={() => onAction("send_message", { content: action.message })}
          style={{
            padding: "8px 16px",
            background: action.style === "outline" ? "transparent" : "#2563EB",
            color: action.style === "outline" ? "#3B82F6" : "white",
            border: action.style === "outline" ? "1px solid #3B82F6" : "none",
            borderRadius: "8px",
            cursor: "pointer",
            fontSize: "13px",
          }}
        >
          {action.label}
        </button>
      ))}
    </div>
  );
}

Formulaires inline

Pour les saisies structurées, affichez un formulaire dans le chat :

import { useState } from "react";

function FormulaireWidget({ data, onAction }) {
  const [valeurs, setValeurs] = useState({});

  const handleSubmit = () => {
    onAction("submit_form", {
      formId: data.formId,
      values: valeurs,
    });
  };

  return (
    <div style={{
      padding: "16px",
      background: "#1E293B",
      borderRadius: "12px",
      margin: "8px 0",
    }}>
      <h4 style={{ color: "#F8FAFC", margin: "0 0 12px" }}>{data.titre}</h4>
      {data.champs.map((champ) => (
        <div key={champ.id} style={{ marginBottom: "12px" }}>
          <label style={{ display: "block", color: "#94A3B8", fontSize: "12px", marginBottom: "4px" }}>
            {champ.label}
          </label>
          <input
            type={champ.type || "text"}
            placeholder={champ.placeholder}
            onChange={(e) => setValeurs({ ...valeurs, [champ.id]: e.target.value })}
            style={{
              width: "100%",
              padding: "8px 12px",
              background: "#0F172A",
              border: "1px solid #475569",
              borderRadius: "8px",
              color: "#F8FAFC",
            }}
          />
        </div>
      ))}
      <button
        onClick={handleSubmit}
        style={{
          width: "100%",
          padding: "10px",
          background: "#2563EB",
          color: "white",
          border: "none",
          borderRadius: "8px",
          cursor: "pointer",
        }}
      >
        {data.submitLabel || "Envoyer"}
      </button>
    </div>
  );
}

Le tool côté agent qui déclenche le formulaire :

@function_tool
def demander_informations_retour() -> str:
    """Affiche un formulaire pour demander les informations de retour."""
    return json.dumps({
        "__widget": "formulaire",
        "formId": "retour-produit",
        "titre": "Demande de retour",
        "champs": [
            {"id": "raison", "label": "Raison du retour", "placeholder": "Ex: produit défectueux"},
            {"id": "description", "label": "Description", "placeholder": "Décrivez le problème..."},
        ],
        "submitLabel": "Soumettre la demande",
    })

Confirmations

Avant une action irréversible, demandez confirmation :

@function_tool
def confirmer_annulation(commande_id: str) -> str:
    """Demande confirmation avant d'annuler une commande."""
    return json.dumps({
        "__widget": "confirmation",
        "titre": "Confirmer l'annulation",
        "message": f"Voulez-vous vraiment annuler la commande {commande_id} ? Cette action est irréversible.",
        "actions": [
            {"id": "confirmer", "label": "Oui, annuler", "style": "danger"},
            {"id": "annuler", "label": "Non, garder la commande", "style": "secondary"},
        ],
    })

Points clés à retenir

• Les suggestions guident l’utilisateur dès le premier message
• Les actions inline proposent des choix contextuels dans les réponses
• Les formulaires inline collectent des données structurées sans quitter le chat
• Les confirmations protègent contre les actions irréversibles
• Chaque action envoie un message structuré à l’agent via onAction