透過 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