BotFramework-WebChat: 高度可定制的Web聊天客户端

BotFramework-WebChat

BotFramework-WebChat简介

BotFramework-WebChat是Microsoft Bot Framework的一个重要组件,它为开发者提供了一个功能丰富、高度可定制的Web聊天客户端。通过使用BotFramework-WebChat,开发人员可以轻松地将聊天机器人功能集成到自己的网站或Web应用程序中。

BotFramework-WebChat具有以下主要特点:

高度可定制 - 支持自定义样式、布局和组件
多种集成方式 - 可以通过CDN、npm包或React组件使用
丰富的功能 - 支持文本、语音、富媒体消息等多种交互方式
良好的可访问性 - 遵循Web可访问性标准
多语言支持 - 内置多种语言本地化
开源项目 - 代码开源,社区活跃

如何使用BotFramework-WebChat

使用BotFramework-WebChat有以下几种方式:

1. 通过CDN集成

最简单的方法是通过CDN引入WebChat的JavaScript文件,然后使用renderWebChat方法渲染聊天窗口:

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

2. 通过npm安装使用

对于React应用,可以通过npm安装WebChat包:

npm install botframework-webchat

然后在React组件中使用:

import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default () => {
  return (
    <ReactWebChat 
      directLine={window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' })}
      userID="YOUR_USER_ID"  
    />
  );
}

自定义WebChat UI

BotFramework-WebChat提供了丰富的自定义选项,包括:

修改颜色、字体、大小等样式
自定义渲染活动和附件
添加新的UI组件
重新组合整个UI

以下是一些常见的自定义示例:

修改聊天气泡样式

const styleOptions = {
  bubbleBackground: 'rgba(0, 0, 255, .1)',
  bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};

window.WebChat.renderWebChat(
  {
    directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
    styleOptions
  }, 
  document.getElementById('webchat')
);

自定义头像

const styleOptions = {
  botAvatarImage: 'https://example.com/bot-avatar.png',
  botAvatarInitials: 'BF',
  userAvatarImage: 'https://example.com/user-avatar.png', 
  userAvatarInitials: 'WC'
};

// 在renderWebChat调用中使用styleOptions

添加自定义活动渲染

const attachmentMiddleware = () => next => card => {
  switch (card.attachment.contentType) {
    case 'application/vnd.microsoft.card.hero':
      return <MyCustomHeroCard attachment={card.attachment} />;
    default:
      return next(card);
  }
}

// 在renderWebChat调用中使用attachmentMiddleware

语音功能

BotFramework-WebChat支持多种语音引擎,包括:

Direct Line Speech (推荐)
Cognitive Services Speech Services
浏览器内置语音API

要启用Direct Line Speech,可以这样配置:

import { createDirectLineSpeechAdapters } from 'botframework-webchat';

const adapters = await createDirectLineSpeechAdapters({
  fetchCredentials: async () => ({
    region: 'YOUR_REGION',
    authorizationToken: 'YOUR_AUTHORIZATION_TOKEN'
  })
});

window.WebChat.renderWebChat(
  {
    ...adapters
  },
  document.getElementById('webchat')
);

辅助功能和本地化

WebChat遵循Web可访问性标准,支持屏幕阅读器和键盘导航。它还提供了多语言支持,可以通过设置locale属性来切换语言:

window.WebChat.renderWebChat(
  {
    directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
    locale: 'zh-CN' // 设置为中文
  },
  document.getElementById('webchat')  
);