透過 Microsoft BotFramework-WebChat 的 botchat.js 連接 Botframework 做的 Chatbot ，輕鬆整合到 Web Application 之中

問題

我們透過 Microsoft BotFramework 來製作 Chatbot 程式後，除了可以接各透的 IM Channel 外，最快速的就是將它整合到現有的 Web Application 之中。Microsoft BotFramework-WebChat 已有提供範例讓我們去整合。
但是一般的網站並不需要一下子就顯示 WebChat ，而是在下方需要一個機器人的小圖示，按下去之後再顯示出 WebChat 。

解法

依上面的需求，我們需要 2 個 div, 一個放網頁下方的小圖示(WebChatButton), 另一個是放 WebChat (WebChatDialog)。
所以預設的 html 如下，

<div ID="WebChatButtonD" onclick="開啟WebChat的function"></div><div id="WebChatDialog"></div>

透過 botchat.js 來建立 WebChat 需要一些設定值，所以就先定訂這些設定值的 interface ，如下，

interface IBotChatUIConfig {
  botId: string, 
  botName: string,
  userId: string,
  userName: string,
  botChatIconUrl: string, //下方機器人的圖示
  chatTitle: string, // WebChat Header 的文字
  directLineOptions: any, //DirectLine 的設定
  locale: string,  //語系
  showWebChatButton: boolean // 是否顯示下方的機器人圖示 
}

再來可以透過 BotChatUI 來封裝要一開始顯示出網頁下方的機器人圖示，按下後，要開啟 WebChat ，而按下 WebChat 的 Header 後，要將 WebChat Hide 起來，並顯示出機器人的圖示。

另外，我們也可以透過調整 css 來讓 WebChat 長的不一樣，例如我們可以在 WebChat 中也顯示機器人的圖示。

所以在即有的 Web Application 之中只要加入 WebChatCustomization 的 Botchat 目錄中的檔案，然後在要加入 WebChat 的網頁中加入以下的 Script 及設定您要的值，您就會有美美的 WebChat 了哦!

<!-- chatbot -->
<link href="Botchat/CSS/botchat.css" rel="stylesheet" />
<link href="Botchat/CSS/botchat-fullwindow.css" rel="stylesheet" />
<link href="Botchat/CSS/botchatCustom.css" rel="stylesheet" />
<script src="Botchat/Scripts/botchat-es5.js"></script>
<script src="Botchat/Scripts/BotChatUI.js"></script>
<script>
	var botChatUI = new BotChatUI({
		botId: 'RainmakerBot',
		botName: '小亂機器人',
		userId: 'Rainmaker',
		userName: '亂馬客',
		chatTitle: '小亂機器人, 按我可縮小',
		locale: 'zh-tw',
		directLineOptions: {
			secret: '',
			token: '',
			domain: 'http://localhost:3000/directline/gssbot',
			pollingInterval: 1000,
			webSocket: false
		},
		botChatIconUrl: 'https://avatars2.githubusercontent.com/u/11240907?s=400&u=597a9c2ae536885dae848ed245dc2dfb591a8c28&v=4',
		showWebChatButton: true
	});
</script>
<!-- chatbot -->

因為我想讓 IE 也可以 run ，所以我加入的是 botchat-es5.js。如果您不考慮 IE 的話，可以使用 botchat.js。
在 BotChatUI.ts 中，有特別處理，開啟 WebChat 時才建立 DirectLine 及 WebChat，關閉 WebChat 時，會先儲存 DirectLine 的 ConversationId，並 close 連線。重新開啟 WebChat 時，才知道原本的 ConversationId 是什麼，重新將原本的內容 Load 回來。
為什麼要這樣子呢? 因為我們是使用 offline Direct Line，目前還不 Support WebSocket ，所以 WebChat 會一直 Polling。所以當關掉 WebChat 時，DirectLine close 後，它就不會再 polling。
那要怎麼讓它重新再連線呢? 目前我們的做法是將原本的 WebChat 移掉再重新建立。詳細可以參考 BotChatUI.ts startConversation / endConversation functions。
而重新連的方式，如果有更好的方式會更新上去，如果大家知道的話，也請跟大家分享。

參考資料

WebChatCustomization