Поделиться через

Общие сведения о веб-чате

  • Статья

ОБЛАСТЬ ПРИМЕНЕНИЯ: ПАКЕТ SDK версии 4

В этой статье содержатся сведения о компоненте веб-чата Bot Framework. Компонент веб-чата Bot Framework представляет собой веб-клиент с широкими возможностями настройки для пакета SDK для Bot Framework версии 4. Пакет SDK для Bot Framework версии 4 позволяет разработчикам моделировать беседы и создавать сложные приложения-боты.

Если вы хотите перейти с использования веб-чата версии 3 на использование версии 4, перейдите к этому разделу.

Начало работы с Веб-чат

Примечание.

Сведения о предыдущих версиях веб-чата (версия 3) см. на сайте GitHub.

Сначала создайте бота с помощью Azure AI Служба Bot. После создания бота необходимо получить Веб-чат секрет бота в портал Azure. Затем с помощью секрета создайте маркер и передайте его в свой веб-чат.

В следующем примере показано, как добавить элемент управления Веб-чат на веб-сайт.

<!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 и userAvatarInitials в метод renderWebChat необязательно. Дополнительные сведения о стиле см. в разделе "Почему styleOptions?". Дополнительные сведения о свойствах Веб-чат см. в разделе справочника по API Веб-чат.

Кроме того, если бот является региональным ботом (то есть ресурс бота находится в регионе, отличном от глобального), необходимо указать URL-адрес региональной прямой линии, задав его в дополнительном domain поле в методе window.WebChat.createDirectLine() . Укажите домен как europe.webchat.botframework.comunitedstates.webchat.botframework.com india.webchat.botframework.comили, независимо от того, что подходит для выбранного региона. Ознакомьтесь с ответом на вызов Европы: хранение и обработка данных ЕС в ЕС для получения сведений об местонахождении данных.

Интеграция с помощью JavaScript

Веб-чат разработан для интеграции с имеющимся веб-сайтом с помощью JavaScript или React. Интеграция с JavaScript дает вам некоторые стили и настраиваемость, дополнительные сведения см. в статье "Интеграция Веб-чат на веб-сайте".

Вы можете использовать полный стандартный пакет, botframework-webchat содержащий наиболее часто используемые функции.

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

Рабочий пример полного пакета веб-чата можно найти на сайте GitHub.

Интеграция с помощью React

Для полноценной настройки вы можете использовать React, чтобы реконструировать компоненты веб-чата.

Чтобы установить производственную сборку из npm, выполните команду 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
    );
  }
}

Кроме того, с помощью команды npm install botframework-webchat@master можно установить сборку разработки, синхронизированную с веткой master веб-чата на сайте GitHub.

Ознакомьтесь с рабочим примером веб-чата, созданного с помощью React, на сайте GitHub.

Совет

Если вы не знакомы с React и jsx, вы можете найти обучение на странице "Приступая к работе с Reacts".

Настройка пользовательского интерфейса веб-чата

Разработка веб-чата предполагает настройку без разветвления исходного кода. В приведенной ниже таблице описывается, какие настройки можно достичь при импорте Веб-чат различными способами. Этот список не является исчерпывающим.

Пользовательская настройка Пакет CDN React
Изменение цвета ✔️ ✔️
Изменение размеров ✔️ ✔️
Обновление и замена стилей CSS ✔️ ✔️
Прослушивание событий ✔️ ✔️
Взаимодействие с веб-страницей размещения ✔️ ✔️
Настраиваемые действия для преобразования для просмотра ✔️
Настраиваемые вложения для преобразования для просмотра ✔️
Добавление компонентов пользовательского интерфейса ✔️
Реконструирование всего пользовательского интерфейса ✔️

Ознакомьтесь с дополнительными сведениями о настройке веб-чата на сайте GitHub.

Примечание.

Сведения о сетях доставки содержимого (CDN) см. в этой статье.

Переход с использования версии 3 веб-чата на использование версии 4

Существует три возможных способа перехода с использования версии 3 на использование версии 4. Сравните начальный сценарий с приведенным ниже.

  • Чтобы обновить элемент управления Веб-чат, внедренный в пакет <iframe>внедрения, см. документацию в репозитории Веб-чат.
  • Чтобы обновить элемент управления Веб-чат, который не использует настройки, просмотрите пример Веб-чат 00.migration/a.v3-to-v4, описывающий процесс.
  • Сведения об обновлении вилированной версии высоконастройной Веб-чат см. в руководстве по миграции Веб-чат.

Справочник по API веб-чата

Существует несколько свойств, которые можно передать в компонент React веб-чата (<ReactWebChat>) или метод renderWebChat(). Краткое описание доступных свойств см. в Веб-чат справочнике по API. Кроме того, вы можете ознакомиться с исходным кодом, начиная с packages/component/src/Composer.js.

Совместимость с браузерами

Веб-чат поддерживает две последние версии современных браузеров, таких как Chrome, Microsoft Edge и FireFox. Если вам нужна Веб-чат в Интернете Обозреватель 11, ознакомьтесь с пакетом ES5 и демонстрацией.

  • Веб-чат не поддерживает интернет-Обозреватель старше версии 11
  • Настройка, как показано в примерах, отличных от ES5, не поддерживается для Обозреватель Интернета. Так как IE11 — это не современный браузер, он не поддерживает ES6, и многие примеры, использующие функции со стрелками и современные обещания, потребуется вручную преобразовать в ES5. Если вам нужна тяжелая настройка для вашего приложения, настоятельно рекомендуется разрабатывать приложение для современного браузера, например Google Chrome или Edge.
  • Реализация поддержки примеров IE11 (ES5) для веб-чата не планируется.
  • Для клиентов, которые хотят вручную перезаписать другие примеры для работы в IE11, рекомендуем рассмотреть возможность преобразования кода из ES6+ в ES5 с использованием полизаполнений и компиляторов, таких как babel.

Выполнение тестирования с помощью последних фрагментов кода веб-чата

В настоящее время тестирование невыпущенных компонентов доступно только с помощью упаковки MyGet.

Если вы хотите протестировать функцию или исправление ошибок, которое еще не выпущено, вы хотите указать пакет Веб-чат на ежедневный веб-канал Веб-чат, а не официальный канал npmjs.

В настоящее время вы можете получить доступ к веб-каналу чата с ежедневным обновлением, подписавшись на наш веб-канал MyGet. Для этого необходимо обновить реестр в проекте. Это изменение обратимо. В наших инструкциях описан процесс возвращения к подписке на официальный выпуск.

Подписка на получение сведений о новых фрагментах кода на сайте myget.org

Для этого вы можете добавить свои пакеты, а затем изменить реестр проекта.

  1. Добавьте зависимости своего проекта, кроме веб-чата.
  2. В корневом каталоге проекта создайте файл .npmrc.
  3. Добавьте в файл следующую строку: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/.
  4. Добавьте веб-чат в зависимости проекта npm i botframework-webchat --save.
  5. В ваших package-lock.jsonреестрах, на которые указываются теперь MyGet. В проекте веб-чата включен вышестоящий прокси-сервер, который перенаправляет пакеты, отличные от MyGet, в npmjs.com.

Повторная подписка на официальный выпуск npmjs.com

Для повторной регистрации требуется сброс реестра.

  1. Удалите .npmrc file.
  2. Удалите корневой элемент package-lock.json.
  3. Удалите каталог node_modules.
  4. Переустановите пакеты с помощью npm i.
  5. В ваших package-lock.jsonреестрах снова указываются https://npmjs.com/ .

Участие в разработке

Подробные сведения о создании проекта и рекомендации репозитория по запросам на вытягивание см. на этой странице.

В рамках этого проекта действуют правила поведения в отношении продуктов с открытым исходным кодом Майкрософт. Дополнительные сведения см. в разделе часто задаваемых вопросов о правилах поведения или обратитесь к opencode@microsoft.com с любыми дополнительными вопросами или комментариями.

Сообщение о проблемах с безопасностью

О проблемах с безопасностью и ошибках следует сообщать в частном порядке по электронной почте в Центр реагирования на вопросы безопасности (MSRC) по адресу secure@microsoft.com. Вы должны получить ответ в течение 24 часов. Если по какой-то причине вы этого не сделали, следуйте инструкциям по электронной почте, чтобы убедиться, что мы получили исходное сообщение. Дополнительные сведения, включая ключ MSRC PGP, можно найти в техническом центре безопасности.