# GSS-WebChat

使用步驟：（for user）
1. 下載專案後，用 browser 開啓 index.html 即可

使用步驟：（for developer）
1. 使用 VSCode 打開
2. 下指令 npm install
3. 下指令 npx webpack
4. 成功的話會建立出 dist\gss-webchat.js 檔案
5. 用 browser 開啓 index.html 即可

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

### botChatUI methods：
* openWebChat
* closeWebChat
* startConversation
* endConversation
* addMembers
* removeMembers
* sendMessage
* sendEvent
* setSendBox
* setLanguage
* getMessageNotifyCount
* getWatermark

[相關參數請參考這裡](https://git.gss.com.tw/TDS-TDD/Local_DirectLine/webchatcustomization_v4/blob/master/BotChatClient/Botchat/Scripts/BotChatUI.d.ts)

### 在 React 中使用 webchat:
1.在 react 專案資料夾的 public 資料夾中引入 gss-webchat.js 和 webchat-es5.js


2.在 public 資料夾中的 index.html 中引入下方的js檔


3.在 app.js 中使用 createBotChatUI 建立聊天機器人

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  var botChatUI = window.GSSWebChat.createBotChatUI({
    botId: 'WebChatSample',
    userId: 'Someone',
    directLineOptions: {
      domain: 'https://tdd-2012-2.gss.com.tw/LocalDirectline'
    },
    webChatOptions: {
      headerOptions: {
        text: '禰豆子機器人'
      },
      buttonOptions: {
        iconUrl: 'https://i.pinimg.com/originals/34/ed/17/34ed1783bb2ddd660686ac6a685270bf.jpg'
      },
      styleOptions: {
        typingAnimationDuration: 20000
      }
    }
  });

  botChatUI.startConversation();
  return (
  ...

4.結果

| 展開前 | 展開後 |
| -------- | -------- |
|| 

範例清單：

| Sample Name | Description | Link |
|--------------------------------------------------|-------------|------|
| [sample01-初始化](Samples/sample01-%E5%88%9D%E5%A7%8B%E5%8C%96) | 介紹基本設定，讓你可以在任何一個 Web Application 上長出一個 webChat button | [sample01-初始化 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample01-初始化/sample01.html) |
| [sample02-使用 polling 連接](Samples/sample02-%E4%BD%BF%E7%94%A8%20polling%20%E9%80%A3%E6%8E%A5) | webChat 預設是用 webSocket 的方式跟 LocalDirectLine 溝通，這邊展示用 polling 的方式來跟 LocalDirectLine 溝通 | [sample02-使用 polling 連接 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample02-%E4%BD%BF%E7%94%A8%20polling%20%E9%80%A3%E6%8E%A5/sample02.html) |
| [sample03-透過 Server 取得 token](Samples/sample03-%E9%80%8F%E9%81%8E%20Server%20%E5%8F%96%E5%BE%97%20token) | bot 的 token 預設是由前端 call LocalDirectLine 產生 token，若是想由 server 端產生，可由 server 端呼叫 genToken 的 api 取得 token 後再傳給 webChat |
| [sample04-保留對話紀錄](Samples/sample04-%E4%BF%9D%E7%95%99%E5%B0%8D%E8%A9%B1%E7%B4%80%E9%8C%84) |預設 webChat 在聊天完之後離開網頁再進來，聊天記錄都會不見，想要保留聊天記錄的話會需要使用 conversationID 來記錄使用者的聊天記錄 | [sample04-保留對話紀錄 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample04-保留對話紀錄/sample04.html) |
| [sample05-WebChat 的 style 調整](Samples/sample05-WebChat%20%E7%9A%84%20style%20%E8%AA%BF%E6%95%B4) | 提供對於 webChat 外觀的調整，如使用者頭像、bot 頭像等等 | [sample05-WebChat 的 style 調整 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample05-WebChat%20的%20style%20調整/sample05.html) |
| [sample06-設定聊天視窗的 header](Samples/sample06-%E8%A8%AD%E5%AE%9A%E8%81%8A%E5%A4%A9%E8%A6%96%E7%AA%97%E7%9A%84%20header) | 如果想要在聊天視窗上的 header 放入圖片或是 logo，可以參考這篇 |[sample06-設定聊天視窗的 header Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample06-%E8%A8%AD%E5%AE%9A%E8%81%8A%E5%A4%A9%E8%A6%96%E7%AA%97%E7%9A%84%20header/sample06.html) |
| [sample07-設定 WebChat 縮小的頭像靠邊](Samples/sample07-%E8%A8%AD%E5%AE%9A%20WebChat%20%E7%B8%AE%E5%B0%8F%E7%9A%84%E9%A0%AD%E5%83%8F%E9%9D%A0%E9%82%8A) | 預設 webChat 會佔用螢幕右下角的一塊區域，如果不想要螢幕顯示的內容被擋到，這邊有範例介紹如何讓 webChat 的頭像靠邊 |[sample07-設定 WebChat 縮小的頭像靠邊 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample07-設定%20WebChat%20縮小的頭像靠邊/sample07.html) |
| [sample08-WebChat 的事件處理](Samples/sample08-WebChat%20%E7%9A%84%E4%BA%8B%E4%BB%B6%E8%99%95%E7%90%86) | 可以透過 actionSubscribe 訂閱想要關注的事件，來針對不同事件進行處理 |[sample08-WebChat 的事件處理 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample08-WebChat%20的事件處理/sample08.html) |
| [sample09-使用 kendoUI](Samples/sample09-%E4%BD%BF%E7%94%A8%20kendoUI) | 展示在 webChat 的元件(卡片等)套用模組（如：kendo UI) 來跟網頁其他元素統一 |[sample09-使用 kendoUI Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample09-使用%20kendoUI/sample09.html) |
| [sample10-調整語系](Samples/sample10-%E8%AA%BF%E6%95%B4%E8%AA%9E%E7%B3%BB) | 如果想要調整 webChat 語系，可以參考這篇 |[sample10-調整語系 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample10-調整語系/sample10.html) |
| [sample11-未讀訊息通知](Samples/sample11-%E6%9C%AA%E8%AE%80%E8%A8%8A%E6%81%AF%E9%80%9A%E7%9F%A5) |展示在 webChat 關閉的時候提醒使用者有新的訊息傳送過來時，webChat 頭像右上角調出數字顯示有幾條未讀訊息 |[sample11-未讀訊息通知 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample11-未讀訊息通知/sample11.html)
| [sample12-WebChat 視窗開啟關閉監控](Samples/sample12-WebChat%20%E8%A6%96%E7%AA%97%E9%96%8B%E5%95%9F%E9%97%9C%E9%96%89%E7%9B%A3%E6%8E%A7) | 展示 webChat 監控是否開啟聊天視窗 |[sample12-WebChat 視窗開啟關閉監控 Demo](https://tdd-2012-2.gss.com.tw/WebChatReact/Samples/sample12-WebChat%20視窗開啟關閉監控/sample12.html) |