Condividi tramite

Panoramica di Web Chat

  • Articolo

SI APPLICA A: SDK v4

Questo articolo contiene i dettagli sul componente Bot Framework Web Chat. Il componente Bot Framework Web Chat è un client basato sul Web altamente personalizzabile per Bot Framework V4 SDK. Bot Framework SDK v4 consente agli sviluppatori di modellare la conversazione e di compilare applicazioni bot avanzate.

Se si intende eseguire la migrazione dalla versione 3 alla versione 4 di Web Chat, passare alla sezione sulla migrazione.

Introduzione a chat Web

Nota

Per le versioni precedenti di Web Chat (v3), vedere il ramo Web Chat v3.

Creare prima di tutto un bot usando l'servizio Bot di intelligenza artificiale di Azure. Dopo aver creato il bot, sarà necessario ottenere il segreto chat Web del bot in portale di Azure. Usare il segreto per generare un token e passarlo a Web Chat.

Nell'esempio seguente viene illustrato come aggiungere un controllo chat Web a un sito 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 e userAvatarInitials sono tutti parametri facoltativi da passare al metodo renderWebChat. Per altre informazioni sullo stile, vedere Why styleOptions?. Per altre informazioni sulle proprietà chat Web, vedere la sezione informazioni di riferimento sulle API chat Web.

Inoltre, se il bot è un bot a livello di area (ovvero la risorsa bot si trova in un'area diversa da "globale"), è necessario specificare l'URL della linea diretta a livello di area impostandolo in un campo aggiuntivo domain nel window.WebChat.createDirectLine() metodo . Specificare il dominio come europe.webchat.botframework.com, unitedstates.webchat.botframework.com o india.webchat.botframework.com, a seconda dell'area scelta. Per informazioni sulla residenza dei dati, leggere Risposta alla chiamata dell'Europa: Archiviazione ed elaborazione dei dati dell'UE nell'UE .

Integrazione con JavaScript

Web Chat è progettato per integrarsi con il sito Web esistente tramite JavaScript o React. L'integrazione con JavaScript consentirà di applicare stili e personalizzazioni. Per altre informazioni, vedere Integrare chat Web nel sito Web.

È possibile usare il pacchetto completo e tipico botframework-webchat che contiene le funzionalità più usate.

<!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>

Vedere l'esempio reale del bundle di Web Chat completo.

Integrazione con React

Per una personalizzazione completa, è possibile usare React per ricomporre i componenti di Web Chat.

Per installare la build di produzione da npm, eseguire 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
    );
  }
}

È anche possibile eseguire npm install botframework-webchat@master per installare una build di sviluppo sincronizzata con il ramo master GitHub di Web Chat.

Vedere un esempio reale di rendering eseguito su Web Chat tramite React.

Suggerimento

Se non si ha familiarità con React e jsx, è possibile trovare il training nella pagina Introduttiva di Reacts.

Personalizzare l'interfaccia utente di Web Chat

Web Chat è progettato per essere personalizzabile senza creare una copia tramite fork del codice sorgente. La tabella seguente illustra il tipo di personalizzazioni che è possibile ottenere quando si importa chat Web in modi diversi. Questo elenco non è esaustivo.

Personalizzazione Bundle della rete CDN React
Modificare i colori ✔️ ✔️
Modificare le dimensioni ✔️ ✔️
Aggiornare/sostituire gli stili CSS ✔️ ✔️
Essere in ascolto di eventi ✔️ ✔️
Interagire con la pagina Web di hosting ✔️ ✔️
Personalizzare il rendering di attività ✔️
Personalizzare il rendering di allegati ✔️
Aggiungere nuovi componenti dell'interfaccia utente ✔️
Ricomporre l'intera interfaccia utente ✔️

Per altre informazioni sulla personalizzazione, vedere l'articolo sulla personalizzazione di Web Chat.

Nota

Per informazioni sulle reti per la distribuzione di contenuti (CDN) vedere Reti per la distribuzione di contenuti (CDN)

Migrazione dalla versione 3 alla versione 4 di Web Chat

I percorsi possibili quando si esegue la migrazione dalla versione 3 alla versione 4 sono tre. Confrontare lo scenario iniziale con quello elencato di seguito.

  • Per aggiornare un controllo chat Web incorporato in un <iframe>oggetto , vedere la documentazione nel repository chat Web per il pacchetto di incorporamento.
  • Per aggiornare un controllo chat Web che usa poco o nessuna personalizzazione, esaminare l'esempio chat Web 00.migration/a.v3-to-v4, che descrive il processo.
  • Per aggiornare una versione fork di un chat Web altamente personalizzato, vedere le linee guida per la migrazione chat Web.

Riferimento all'API Web Chat

Esistono diverse proprietà che è possibile passare al componente React di Web Chat (<ReactWebChat>) o al metodo renderWebChat(). Per una breve descrizione delle proprietà disponibili, vedere informazioni di riferimento sulle API chat Web. Inoltre, è possibile esaminare il codice sorgente a partire da packages/component/src/Composer.js.

Compatibilità dei browser

Web Chat supporta le due versioni più recenti dei browser moderni, ad esempio Chrome, Edge e FireFox. Se è necessario chat Web in Internet Explorer 11, vedere il bundle e la demo di ES5.

  • chat Web non supporta Internet Explorer precedente alla versione 11
  • La personalizzazione come illustrato negli esempi non ES5 non è supportata per Internet Explorer. Poiché Internet Explorer 11 è un browser non moderno, non supporta ES6 e molti esempi che usano funzioni freccia e promesse moderne devono essere convertiti manualmente in ES5. Se hai bisogno di una personalizzazione pesante per la tua app, ti consigliamo vivamente di sviluppare la tua app per un browser moderno come Google Chrome o Edge.
  • Web Chat non prevede di supportare esempi per IE11 (ES5).
  • Per i clienti che desiderano riformulare manualmente altri esempi in modo che funzionino in Internet Explorer 11, è consigliabile prendere in considerazione la conversione di codice da ES6+ a ES5 usando polyfill e transpiler, ad esempio babel.

Come eseguire il test con gli aggiornamenti più recenti di Web Chat

Il test delle funzionalità non rilasciate è disponibile attualmente solo tramite il pacchetto MyGet.

Se vuoi testare una funzionalità o una correzione di bug che non è ancora stata rilasciata, vuoi puntare il pacchetto chat Web al feed giornaliero di chat Web, invece del feed ufficiale npmjs.

Per accedere ai feed giornalieri di Web Chat, eseguire una sottoscrizione del feed MyGet. A tale scopo, è necessario aggiornare il Registro di sistema nel progetto. Questa modifica è reversibile e vengono specificate anche le indicazioni per tornare alla sottoscrizione della versione ufficiale.

Eseguire la sottoscrizione degli ultimi aggiornamenti in myget.org

A tale scopo è possibile aggiungere i pacchetti e quindi modificare il Registro di sistema del progetto.

  1. Aggiungere le dipendenze del progetto diverso da Web Chat.
  2. Nella directory radice del progetto creare un file .npmrc.
  3. Aggiungere la riga seguente al file: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Aggiungere Web Chat alle dipendenze del progetto npm i botframework-webchat --save
  5. package-lock.jsonIn , i registri a cui puntano sono ora MyGet. Il progetto Web Chat ha un proxy di origine abilitato, che reindirizzerà i pacchetti non MyGet a npmjs.com.

Eseguire di nuovo la sottoscrizione al rilascio ufficiale npmjs.com

Per la riscrittura è necessario reimpostare il Registro di sistema.

  1. Eliminare il file .npmrc file in uso
  2. Eliminare la directory radice package-lock.json
  3. Rimuovere la directory node_modules in uso
  4. Reinstallare i pacchetti con npm i
  5. package-lock.jsonIn , i registri puntano di nuovo a https://npmjs.com/ .

Contributo

Per dettagli su come compilare il progetto e per le indicazioni sui repository per le richieste pull, vedere la pagina dei contributi.

Questo progetto ha adottato il codice di comportamento open source Microsoft. Per altre informazioni, vedere Code of Conduct FAQ (Domande frequenti sul Codice di comportamento) oppure contattare opencode@microsoft.com per eventuali altre domande o commenti.

Segnalazione dei problemi di sicurezza

I bug e problemi di sicurezza devono essere segnalati privatamente, tramite posta elettronica, al Microsoft Security Response Center (MSRC) all'indirizzo secure@microsoft.com. La risposta viene inviata in genere entro 24 ore. Se per qualche motivo non lo fai, segui tramite posta elettronica per assicurarti che il tuo messaggio originale sia stato ricevuto. Altre informazioni, ad esempio relative alla chiave MSRC PGP, sono disponibili sul sito Security TechCenter.