Vue d’ensemble de Chat Web

  • Article

S'APPLIQUE À : SDK v4

Cet article décrit en détail le composant Bot Framework Web Chat. Le composant Bot Framework Web Chat est un client web hautement personnalisable pour le kit SDK Bot Framework v4. Le kit SDK Bot Framework v4 permet aux développeurs de modéliser une conversation et de créer des applications de bot évoluées.

Si vous avez besoin de migrer de la version 3 vers la version 4 de Web Chat, passez directement à la section consacrée à la migration.

Bien démarrer avec Chat Web

Remarque

Pour les versions précédentes de Web Chat (v3), rendez-vous dans la branche Web Chat v3.

Tout d’abord, créez un bot à l’aide d’Azure AI Bot Service. Une fois le bot créé, vous devez obtenir le secret Chat Web du bot dans Portail Azure. Utilisez ensuite la clé secrète pour générer un jeton et transmettez celui-ci à votre Web Chat.

L’exemple suivant montre comment ajouter un contrôle Chat Web à un site web.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale, botAvatarInitials et userAvatarInitials sont tous des paramètres facultatifs à transmettre à la méthode renderWebChat. Pour plus d’informations sur le style, consultez Pourquoi styleOptions ?. Pour en savoir plus sur les propriétés Chat Web, consultez la section référence de l’API Chat Web.

En outre, si votre bot est un bot régional (ce qui signifie que votre ressource de bot se trouve dans une région autre que « globale »), vous devez spécifier l’URL de ligne directe régionale en la définissant dans un champ supplémentaire domain dans la window.WebChat.createDirectLine() méthode. Spécifiez le domaine comme étant l’un europe.webchat.botframework.comunitedstates.webchat.botframework.com ou l’autre india.webchat.botframework.comdes domaines appropriés pour votre région choisie. Lisez l’appel de l’Europe réponse : stockage et traitement des données de l’UE dans l’UE pour obtenir des informations sur la résidence des données.

Intégration JavaScript

Web Chat est conçu pour s’intégrer à votre site web existant à l’aide de JavaScript ou React. L’intégration à JavaScript vous donnera un style et une personnalisation, pour plus d’informations, consultez Intégrer Chat Web dans votre site web.

Vous pouvez utiliser le package complet et typique botframework-webchat qui contient les fonctionnalités les plus utilisées.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Consultez l’exemple fonctionnel de l’offre groupée complète Web Chat.

Intégration React

Pour une personnalisation complète, vous pouvez modifier les composants Web Chat à l’aide de React.

Pour installer la build de production à partir de npm, exécutez npm install botframework-webchat.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

Vous pouvez également exécuter npm install botframework-webchat@master pour installer une version de développement qui est synchronisée avec la branche master GitHub de Web Chat.

Reportez-vous à un exemple fonctionnel d’affichage de Web Chat via React.

Conseil

Si vous débutez avec React et jsx, vous trouverez une formation sur la page Prise en main de Reacts.

Personnaliser l’interface utilisateur de Discussion Web

Web Chat est conçu pour être personnalisable sans duplication de code source. Le tableau ci-dessous décrit le type de personnalisations que vous pouvez réaliser lorsque vous importez des Chat Web de différentes manières. Cette liste n’est pas exhaustive.

Personnalisation Offre groupée CDN React
Modifier les couleurs ✔️ ✔️
Modifier les tailles ✔️ ✔️
Mettre à jour/remplacer les styles CSS ✔️ ✔️
Écouter les événements ✔️ ✔️
Interagir avec la page web d’hébergement ✔️ ✔️
Activités de rendu personnalisées ✔️
Pièces jointes de rendu personnalisées ✔️
Ajouter de nouveaux composants d’interface utilisateur ✔️
Recomposer l’interface utilisateur entière ✔️

Reportez-vous à la personnalisation de Web Chat pour en savoir plus sur la personnalisation.

Remarque

Pour plus d’informations sur les réseaux de distribution de contenu (CDN), consultez Réseaux de distribution de contenu (CDN)

Migration de Web Chat v3 vers v4

La migration de la v3 vers la v4 peut s’effectuer de trois manières différentes. Comparez votre scénario de début avec celui indiqué ci-dessous.

  • Pour mettre à niveau un contrôle Chat Web incorporé dans un <iframe>, consultez la documentation du dépôt Chat Web pour le package incorporé.
  • Pour mettre à niveau un contrôle Chat Web qui utilise peu à aucune personnalisation, passez en revue l’exemple Chat Web 00.migration/a.v3-to-v4, qui décrit le processus.
  • Pour mettre à niveau une version dupliqué d’un Chat Web hautement personnalisé, consultez les instructions de migration Chat Web.

Référence de l’API Web Chat

Il y existe plusieurs propriétés que vous pouvez passer dans votre composant Web Chat React (<ReactWebChat>) ou la méthode renderWebChat(). Pour obtenir une brève description des propriétés disponibles, consultez Chat Web informations de référence sur l’API. En outre, n’hésitez pas à examiner le code source à partir packages/component/src/Composer.jsde .

Compatibilité des navigateurs

Web Chat supporte les deux dernières versions des navigateurs modernes, tels que Chrome, Edge et FireFox. Si vous avez besoin de Chat Web dans Internet Explorer 11, consultez le bundle et la démonstration ES5.

  • Chat Web ne prend pas en charge Internet Explorer antérieure à la version 11
  • La personnalisation comme indiqué dans les exemples non-ES5 n’est pas prise en charge pour Internet Explorer. Étant donné que IE11 est un navigateur non moderne, il ne prend pas en charge ES6, et de nombreux exemples qui utilisent des fonctions de flèche et des promesses modernes doivent être convertis manuellement en ES5. Si vous avez besoin d’une personnalisation importante pour votre application, nous vous recommandons vivement de développer votre application pour un navigateur moderne comme Google Chrome ou Edge.
  • La prise en charge d’exemples pour IE11 (ES5) dans Web Chat n’est pas prévue.
  • Pour les clients qui souhaitent réécrire manuellement nos autres exemples en vue de les utiliser avec IE11, nous recommandons d’envisager la conversion du code ES6+ en ES5 en intégrant des polyfills et des transpilers tels que babel.

Comment tester une application avec les dernières nouveautés de Web Chat

Pour le moment, le test des fonctionnalités non encore publiées n'est disponible que par le biais du package MyGet.

Si vous souhaitez tester une fonctionnalité ou un correctif de bogue qui n’a pas encore été publié, vous devez pointer votre package Chat Web vers le flux quotidien de Chat Web, par opposition au flux npmjs officiel.

Actuellement, vous pouvez accéder aux nouveautés quotidiennes de Web Chat en vous abonnant à notre flux MyGet. Pour ce faire, vous devez mettre à jour le Registre dans votre projet. Cette modification n’est pas définitive. Nos instructions expliquent comment se réabonner à la version officielle.

Abonnez-vous aux dernières informations disponibles sur myget.org

Pour ce faire, vous pouvez ajouter vos packages et modifier le registre de votre projet.

  1. Ajoutez vos dépendances de projet autres que les dépendances Web Chat.
  2. Dans le répertoire racine de votre projet, créez un fichier .npmrc
  3. Ajoutez la ligne suivante à votre fichier : registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Ajoutez Web Chat à vos dépendances de projet npm i botframework-webchat --save
  5. Dans votre package-lock.json, les registres pointés sont maintenant MyGet. Le projet Web Chat a un proxy source amont activé, ce qui permet de rediriger les packages non MyGet vers npmjs.com.

Réinscrire à la publication officielle sur npmjs.com

La réinscription nécessite que vous réinitialisiez votre registre.

  1. Supprimer votre .npmrc file
  2. Supprimer votre package-lock.json racine
  3. Supprimer votre répertoire node_modules
  4. Réinstaller vos packages avec npm i
  5. Dans votre package-lock.json, les registres pointent à https://npmjs.com/ nouveau.

Contribution

Consultez notre page de contribution pour plus d’informations sur la façon de générer le projet et les directives de notre référentiel pour les demandes de tirage.

Ce projet a adopté le Code de conduite Open Source de Microsoft. Pour plus d'informations, consultez la FAQ du Code de conduite ou contactez opencode@microsoft.com pour toute question ou commentaire supplémentaire.

Signaler des problèmes de sécurité

Les bogues et problèmes de sécurité doivent être signalés en privé, par e-mail, à Microsoft Security Response Center (MSRC) à secure@microsoft.com. Vous devez recevoir une réponse dans les 24 heures. Si, pour une raison quelconque, vous ne le faites pas, suivez par e-mail pour vous assurer que nous avons reçu votre message d’origine. Pour plus d’informations, notamment sur la clé PGP MSRC, reportez-vous au site web du TechCenter sur la sécurité.