gss-webchat v3.1.0

GSS-WebChat

整合 BotFramework-WebChat 的 webchat-es5.js 並客製其它功能，讓大家可以輕鬆將 webchat 功能整合到現有的 Web Application 之中。

BotFramework-WebChat 從 4.8 開始，開放自訂語系文字，所以 GSS-WebChat 從 3.1 開始支援，並之後不再客製 WebChat.js，詳細做法請參考 samples。

Browser suppor

• 所有支援 ES5 的瀏覽器(ex. IE 11)，詳細請參考 compatibility table。

Changes

爲了符合未來更多的客製需求，所以對 GSS-WebChat 進行了重構，原本的一些參數與方法會有所調整，請參考以下項目：

• GSSWebChat
  • createBotChatUI 改名爲 createMinimizableWebChat
  • 新增 createBasicWebChat, clearStorage
  • 移動 WebChatToggleStateObservable 至 WebChatAPI
• WebChatAPI
  • 由 BotChatUI 改名而來
  • clearSession 移至 GSSWebChat 並改名爲 clearStorage
  • getMessageNotifyCount 改名爲 getMessageUnreadCount
  • 新增 ActionObservable, ConnectFulfilledObservable, createMessageMutationObserver, isWebChatVisible, notifyUserAlreadyRead
• WebChatConfig.WebChatOptions
  • 移除 actionSubscribe 參數，改爲自行呼叫 WebChatAPI.ActionObservable.subscribe
  • 移除 domMutationSubscribe 參數，改爲自行呼叫 WebChatAPI.createMessageMutationObserver

How to use

1. 下載專案後，用 browser 開啓 index.html 即可操作。
2. 如果想知道 GSS-WebChat 有提供哪些功能，可以參考 samples。
3. 如果想知道如何將 GSS-WebChat 整合進去你的專案，可以參考 初始化(JS)。
4. 如果你的專案是 React，可以參考 初始化(React版)。

How to build

1. 使用 VSCode 打開專案
2. 下指令 npm install
3. 下指令 npx webpack
4. 成功的話，就會建立出 dist\gss-webchat.js 檔案

How to set up a local development environment

1. 安裝 Bot Connector
2. 執行 Bot (可以使用 Sample Bot)
3. 將 Bot 資料設定至 Bot Connector config
4. 執行 Bot Connector
5. 將 Bot Connector Domain 設定至 WebChat config directLineOptions.domain (如下列 code)
6. 執行 WebChat

directLineOptions: {
    domain: 'http://localhost:3000'
}

Features

• 未讀訊息
  • 歷史訊息
    • 載入歷史訊息後，如果有未讀訊息的部分，會將 scrollbar 移動到未讀訊息的 Tag。
  • MinimizableWebChat 關閉（縮小）狀態
    • webchat 關閉（縮小）狀態下，如果有 bot 訊息進來，除了 webchat button 會有訊息數量通知之外，打開 webchat 時，也會將 scrollbar 移動到未讀訊息的 Tag。（不論原本 scrollbar 的位置在哪裡）

Limits

• 目前僅供 create 一個 WebChat 在 html body 中。

GSSWebChat

在載入 GSS-WebChat.js 之後，即可在 window 底下找到 GSSWebChat 變數，所有 WebChat 的方法與物件都會在 GSSWebChat 這個 namespace 底下。

WebChat API

透過 GSSWebChat.createWebChat 建立 WebChat 之後，此 create method 會回傳該 WebChat (ex. MinimizableWebChat) 可以使用的 API。

WebChat API 相關參數請參考這裡

samples

以下列出 GSSWebChat 常見的使用範例。