Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Comment configurer votre expérience de chat en libre-service agentic de bout en bout
<a name="setup-agentic-selfservice-end-to-end"></a>

**Note**  
Les agents d'orchestration AI nécessitent l'activation du streaming de chat pour les contacts de chat. Si le streaming de chat n'est pas activé, certains messages ne s'afficheront pas. Consultez [Activer le streaming de messages pour le chat alimenté par l'IA](message-streaming-ai-chat.md).

## Qu'est-ce que le streaming de messagerie AI ?
<a name="what-is-ai-message-streaming"></a>

AI Message Streaming est une fonctionnalité d'Amazon Connect qui permet l'**affichage progressif des réponses des agents intelligents lors des** interactions par chat. Au lieu d'attendre que l'IA génère une réponse complète avant de montrer quoi que ce soit au client, le streaming affiche le texte tel qu'il est généré, créant ainsi une expérience conversationnelle plus naturelle.

### Comment ça marche
<a name="how-streaming-works"></a>

Avec les réponses de chat standard, les clients attendent que l'IA génère sa réponse complète, puis le message complet apparaît en une seule fois. Avec AI Message Streaming, les clients voient s'**agrandir une bulle de texte** dans laquelle les mots apparaissent progressivement au fur et à mesure que l'IA les génère, comme si vous regardiez quelqu'un taper en temps réel.

**Note**  
**Documentation officielle** : Pour la référence technique complète, voir[Activer le streaming de messages pour le chat alimenté par l'IA](message-streaming-ai-chat.md).

### Avantages de l'affichage progressif du texte
<a name="benefits-progressive-text"></a>

Le streaming de messages par intelligence artificielle offre plusieurs avantages clés en termes d'expérience client :
+ **Réduction du temps d'attente perçu** : les clients constatent une activité immédiate plutôt que de regarder une centrifugeuse
+ **Flux de conversation plus naturel : le** texte progressif imite la saisie humaine, créant ainsi une interaction plus engageante
+ **Meilleur engagement** : les clients peuvent commencer à lire la réponse alors qu'elle est encore en cours de génération
+ **Messages d'expédition** : les agents d'intelligence artificielle peuvent envoyer des messages intermédiaires tels que « Un moment pendant que je passe en revue votre compte » pendant le traitement

### Chat standard et chat en streaming
<a name="standard-vs-streaming-chat"></a>

Le tableau suivant compare l'expérience client entre le chat standard et le chat en streaming :


| Aspect | Chat standard | Chat en streaming | 
| --- | --- | --- | 
| Affichage des réponses | Le message complet apparaît en une seule fois | Le texte apparaît progressivement (bulle croissante) | 
| L'expérience client | Attendre une réponse complète avec indicateur de chargement | Voir les mots apparaître en temps réel | 
| Temps d'attente perçu | Plus longtemps (en attente d'une réponse complète) | Plus court (retour visuel immédiat) | 
| Sensation de conversation | Transactionnel | Naturel, comme discuter avec une personne | 
| Messages d'expédition | Non disponible | L'IA peut envoyer des mises à jour de statut intermédiaires | 
| Gestion du délai d'expiration Lex | Soumis aux délais d'expiration de Lex | Élimine les limites de délai d'expiration de Lex | 

## État de l'habilitation
<a name="enablement-status"></a>

La disponibilité de AI Message Streaming dépend de la date de création de votre instance Amazon Connect et de sa configuration.

### Activation automatique pour les nouvelles instances
<a name="automatic-enablement-new-instances"></a>

Le streaming des messages AI est activé par défaut sur les instances Amazon Connect créées **après décembre 2025**. L'attribut d'`MESSAGE_STREAMING`instance est automatiquement défini sur `true` pour ces instances, aucune configuration supplémentaire n'est donc requise.

**Important**  
Si vous utilisez un AWS compte avec une instance Amazon Connect créée **avant décembre 2025**, vous devrez peut-être activer manuellement AI Message Streaming. Suivez les instructions de la documentation [Activer le streaming de messages pour le chat alimenté par l'IA](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html) pour vérifier `MESSAGE_STREAMING` l'attribut de votre instance et l'activer si nécessaire.

### Autorisations Amazon Lex Bot
<a name="amazon-lex-bot-permissions"></a>

AI Message Streaming nécessite une `lex:RecognizeMessageAsync` autorisation pour fonctionner correctement. Cette autorisation permet à Amazon Connect d'invoquer l'API de reconnaissance de messages asynchrone qui permet le streaming des réponses.

**Pour les nouvelles associations de robots Lex** : lorsque vous associez un nouveau bot Amazon Lex à votre instance Amazon Connect, l'`lex:RecognizeMessageAsync`autorisation requise est **automatiquement incluse** dans la politique basée sur les ressources du bot. Aucune configuration supplémentaire n'est nécessaire.

**Important**  
Si un bot Amazon Lex était associé à votre instance Amazon Connect **avant** l'activation d'AI Message Streaming, vous devrez peut-être mettre à jour la politique basée sur les ressources du bot pour inclure l'`lex:RecognizeMessageAsync`autorisation.  
Pour mettre à jour votre politique actuelle relative aux robots Lex :  
Accédez à la console Amazon Lex
Sélectionnez votre bot et accédez à Politique basée sur les **ressources**
Ajoutez l'`lex:RecognizeMessageAsync`action à la déclaration de politique qui accorde l'accès à Amazon Connect
Enregistrez la politique mise à jour
Pour obtenir des instructions détaillées, consultez la section sur [les autorisations du robot Lex](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions) dans la AWS documentation.

## Créer un widget de communication
<a name="create-communications-widget"></a>

Le widget de communication Amazon Connect est une interface de chat intégrée que vous pouvez ajouter à n'importe quel site Web. Dans cette section, vous allez créer et configurer un widget pour tester le streaming de messages AI. Vous pouvez ignorer cette section si vous prévoyez d'utiliser votre propre widget de chat client.

### Étape 1 : Accédez au widget de communication
<a name="navigate-to-widget"></a>

1. Dans la console Amazon Connect, accédez à votre instance

1. Cliquez sur **Canaux** dans le menu de navigation de gauche

1. Cliquez sur le **widget Communications**

1. Vous verrez la page de gestion du widget de communication

**Note**  
**Qu'est-ce que le widget de communication ?** Le widget de communication est la solution de out-of-the-box chat d'Amazon Connect. Il fournit une interface de chat entièrement fonctionnelle que vous pouvez intégrer dans des sites Web à l'aide d'un simple JavaScript extrait de code. Le widget gère toute la complexité de l'établissement des connexions, de la gestion des sessions et de l'affichage des messages.

### Étape 2 : créer un nouveau widget
<a name="create-new-widget"></a>

1. Cliquez sur **Ajouter un widget** pour créer un nouveau widget de communication

1. Entrez les détails suivants :
   + **Nom:** **AI-Streaming-Demo-Widget**
   + **Description:** **Widget for testing AI Message Streaming**

1. Sous **Options de communication**, assurez-vous que l'option **Ajouter un chat** est sélectionnée.

1. Sélectionnez **Self Service Test Flow comme flux** de contacts dans le chat

1. Cliquez sur **Enregistrer et continuer** pour accéder à la page de configuration

**Sélection du flux de contacts**  
Assurez-vous de sélectionner un flux de contacts qui :  
Les paramètres de base sont-ils configurés (crée une session AI, journalisation, etc.)
Routes vers votre Lex bot grâce à l'intégration d'AI Agent
Dispose d'une gestion d'erreur appropriée pour les déconnexions
Si vous n'avez pas encore créé de flux de contacts, complétez d'abord [la section Création du flux](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/).

### Étape 3 : Personnaliser l'apparence du widget
<a name="customize-widget-appearance"></a>

Personnalisez l'apparence de votre widget de chat en fonction de votre marque et sélectionnez **Enregistrer et continuer**.

### Étape 4 : Configuration des domaines autorisés
<a name="configure-allowed-domains"></a>

Le widget de communication ne se charge que sur les sites Web explicitement autorisés. Cette fonctionnalité de sécurité empêche toute utilisation non autorisée de votre widget.

1. Faites défiler l'écran vers le bas jusqu'à **Domaines autorisés**

1. Cliquez sur **Ajouter un domaine** et ajoutez le domaine suivant pour les tests sur localhost :
   + **http://localhost**

1. Sélectionnez **Non** sous Sécurité

1. Si vous prévoyez de déployer ultérieurement sur un site Web de production, ajoutez également ces domaines et assurez-vous de configurer la sécurité (par exemple,**https://www.example.com**)

### Étape 5 : Enregistrer et obtenir le code du widget
<a name="save-get-widget-code"></a>

1. Cliquez sur **Enregistrer et continuez** pour enregistrer la configuration de votre widget

1. Après la création, vous verrez la page de **détails du widget** avec votre code d'intégration

1. **Important** : copiez et enregistrez les valeurs suivantes à partir de l'extrait de code intégré :
   + **URI du client** : URL du JavaScript fichier du widget
   + **ID du widget** - Un identifiant unique pour votre widget
   + **Snippet ID : chaîne** de configuration codée en Base64

### Étape 6 : Configuration de l'environnement de test local
<a name="setup-local-testing"></a>

Pour tester le widget localement, vous allez créer un simple fichier HTML qui charge le widget de communication.

1. Créez un nouveau dossier sur votre ordinateur à des fins de test (par exemple,`ai-streaming-test`)

1. Téléchargez l'image d'arrière-plan de la page de démonstration et enregistrez-la `background.jpg` dans votre dossier de test

1. Créez un nouveau fichier appelé `index.html` dans votre dossier de test avec le contenu suivant :

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>
```

### Étape 7 : Remplacer les valeurs de remplacement
<a name="replace-placeholder-values"></a>

Remplacez les valeurs de l'espace réservé dans le fichier HTML par les valeurs réelles de votre widget :


| Placeholder | Remplacer par | Exemple | 
| --- | --- | --- | 
| REPLACE\$1WITH\$1CLIENT\$1URI | L'URI de votre client à partir de l'étape 5 | https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js | 
| REPLACE\$1WITH\$1WIDGET\$1ID | L'identifiant de votre widget indiqué à l'étape 5 | amazon\$1connect\$1widget\$1abc123 | 
| REPLACE\$1WITH\$1SNIPPET\$1ID | Votre identifiant de snippet obtenu à l'étape 5 | QVFJREFIaWJYbG...(longue chaîne Base64) | 

### Étape 8 : démarrer un serveur Web local
<a name="start-local-web-server"></a>

Pour tester le widget, vous devez diffuser le fichier HTML à partir d'un serveur Web local. Voici plusieurs options :

**Option A : Python (si installé)**  


```
python -m http.server 8001
```

**Option B : Node.js (si installé)**  


```
npx http-server -p 8001
```

**Option C : extension du serveur VS Code Live**  

+ Installez l'extension « Live Server » dans VS Code
+ Cliquez avec le bouton droit sur `index.html` et sélectionnez « Ouvrir avec Live Server »

Après avoir démarré le serveur, ouvrez votre navigateur et accédez à : `http://localhost:8001`

Vous devriez voir la page de démonstration avec un bouton de chat orange dans le coin inférieur droit.

## Testez l'expérience de streaming
<a name="test-streaming-experience"></a>

Maintenant que votre widget est chargé, il est temps de tester AI Message Streaming et d'observer l'affichage progressif du texte en action.

### Ce qu'il faut rechercher : streaming ou non-streaming
<a name="what-to-look-for"></a>

Comprendre la différence entre les réponses en streaming et les réponses non diffusées vous permet de vérifier que le streaming de messages AI fonctionne :


| Comportement | Sans diffusion en continu (standard) | Streaming (diffusion de messages par IA) | 
| --- | --- | --- | 
| Affichage initial | Indicateur de chargement ou points de saisie | Le texte commence à apparaître immédiatement | 
| Apparence du texte | Le message complet apparaît en une seule fois | Les mots apparaissent progressivement (bulle croissante) | 
| Délai de réponse | Attendez que l'IA ait fini de générer | Voir la réponse au fur et à mesure qu'elle est générée | 
| Effet visuel | « Pop » du texte complet | Texte fluide et fluide, comme si vous regardiez quelqu'un taper |