# Sbot Message Types

## Messages
- `Text Message`：
顯示文字訊息。
若文字含有連結則顯示連結與含有連結 metadata 的 CardActionArea，點擊後於新視窗開啟連結網頁。
可同時處理多條連結。

- `Image Message`：
顯示圖像訊息。
可點擊圖片開啟 ReactPhotoSwipe 放大瀏覽圖片。

- `Video Message`：
顯示影像訊息。
可支援影像連結如 youtube 與 mp4 檔案。

- `Location Message`：
顯示位置訊息。
可依 message 內的經緯度定位，點擊後可於新視窗開啟 google map。

## Template Messages

- `Confirm Template`：
顯示確認訊息。

- `Buttons Template`：
顯示圖片、文字描述與選項的訊息模版。
圖片可依照 message 調整背景色、顯示方式（Contain 或 Cover）、圖片寬高比（1:1 或 1.51:1）。

- `Carousel Template`：
顯示多個圖片、文字描述與選項的訊息模版。
可橫向捲動。
圖片可依照 message 調整背景色、顯示方式 （Contain 或 Cover）、圖片寬高比（1:1 或 1.51:1）。

- `Image Carousel Template`：
顯示多張固定比例（1:1）、內含有一個按鈕的圖片訊息。
可橫向捲動。

# User Interface

- `Chat App`：
初始化設定。

- `Chat Window`：
介面的主體。

- `Chat App Bar`：
顯示 Bot 頭像與名字的 App Bar，點擊右上按鈕可顯示主選單。
若螢幕寬度大於 960 px 時隱藏。

- `Chat Side Bar`：
顯示 Bot 資料與主選單的側邊欄。
若螢幕寬度小於 960 px 時隱藏。

- `Chat List`：
顯示訊息的主體。
傳送訊息後自動置底。
若沒有置底則顯示置底按鈕。

- `Chat Buttons`：
顯示預設的訊息選項按鈕，點擊按鈕後可傳送預設的訊息。
若按鈕數量超過畫面寬度可以橫向捲動。

- `Power By`:
顯示 Icon 與 Powerd By Sbot。
點擊 Icon 或文字將於新視窗打開 Sbot 的連結。

- `Chat Message Input`：
輸入框。
點擊分享按鈕顯示 Share Popover。
若 input 內有文字則傳送按鈕亮起並隱藏分享按鈕。
傳送訊息後記憶上次傳送的內容，可按 ArrowUp 於輸入欄再次顯示。
若輸入欄內已有文字的時候按到 ArrowUp，可按 ArrowDown 切換回目前正在打的訊息。
可按 Esc 清除輸入欄內的文字。

- `Share Popover`：
點擊分享按鈕後開啟。分享 Sbot 至選擇的社群或複製網址。
點擊複製按鈕可複製 Sbot 的連結，彈出 tooltip 顯示複製成功。

- `React Photo Swipe`：
點擊 Image Message 後開啟。向左滑動可瀏覽下一張圖片、向右滑動可瀏覽上一張圖片、向上向下滑動可關閉視窗。