# @chi0307/transform-chatbot-message

> 透過共用模板，會將以下 json 轉成 FB、Line、Slack 各自的訊息格式。

Latest version **1.2.1** (published 2021-07-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @chi0307/transform-chatbot-message
pnpm add @chi0307/transform-chatbot-message
yarn add @chi0307/transform-chatbot-message
bun add @chi0307/transform-chatbot-message
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-07-30 |
| First published | 2021-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Benson |
| Maintainers | chi0307 |

## Links

- npm: https://www.npmjs.com/package/@chi0307/transform-chatbot-message
- Repository: https://github.com/chi0307/transform-chatbot-message
- Homepage: https://github.com/chi0307/transform-chatbot-message#readme
- Issues: https://github.com/chi0307/transform-chatbot-message/issues
- npm.io page: https://npm.io/package/@chi0307/transform-chatbot-message

## Recent versions

- 1.2.1 (latest) — 2021-07-30
- 1.2.0 — 2021-07-30
- 1.1.2 — 2021-07-26
- 1.1.1 — 2021-07-26
- 1.1.0 — 2021-07-26
- 1.0.8 — 2021-07-06
- 1.0.7 — 2021-05-29
- 1.0.6 — 2021-05-29
- 1.0.5 — 2021-05-25
- 1.0.4 — 2021-05-23
- 1.0.3 — 2021-05-23
- 1.0.2 — 2021-05-22
- 1.0.1 — 2021-05-22
- 1.0.0 — 2021-05-22

## README

# FB、Line、Slack 共用 chatbot 模板

透過共用模板，會將以下 json 轉成 FB、Line、Slack 各自的訊息格式。

---

## 使用方式

```javascript
const {
  transformToLineMessage,
  transformToLineMessages,
  transformToFacebookMessage,
  transformToFacebookMessages,
  transformToSlackMessages,
} = require('@chi0307/transform-chatbot-message');

let message = {
  type: 'text',
  text: 'Hello World!!',
};

// Facebook 訊息結構
let facebookMessage = transformToFacebookMessage(message);
let FacebookPushMessage = {
  recipient: {
    id: FB_SENDER_PSID,
  },
  message: facebookMessage,
};

// Line 訊息結構
let lineMessage = transformToLineMessage(message);
let LinePushMessage = {
  to: LINE_USER_ID,
  messages: [lineMessage],
};

// Line 訊息使用 flex
let lineMessage = transformToLineMessage(message, { flex: true });
let LinePushMessage = {
  to: LINE_USER_ID,
  messages: [lineMessage],
};

// Slack 訊息結構
let slackMessages = transformToSlackMessages([message]);
let slackPushMessage = {
  token: SLACK_TOKEN,
  channel: CHANNEL_ID,
  blocks: slackMessages,
};
```

---

# Example

https://github.com/chi0307/transform-chatbot-message/tree/master/example

---

# GUI

可搭配網頁產生 json

https://chi0307.github.io/side/chatbot-json-toolbox

---

## 文字訊息

```javascript
{
  "type": "text",
  "text": String
}
```

| 欄位 | 說明     | Line 限制 | FB 限制   | Slack 限制 |
| ---- | -------- | --------- | --------- | ---------- |
| text | 文字訊息 | 5000 字元 | 2000 字元 | 3000 字元  |

---

## 圖片訊息

```javascript
{
  "type": "image",
  "imageUrl": String,
  "previewImageUrl": String
}
```

| 欄位            | 說明         | Line 限制                                                                                | FB 限制                                           | Slack 限制         |
| --------------- | ------------ | ---------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------ |
| imageUrl        | 圖片網址     | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>JPEG or PNG<br>Max file size: 10 MB | Max file size: 25 MB<br>fetched within 10 seconds | 網址長度 3000 字元 |
| previewImageUrl | 預覽圖片網址 | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>JPEG or PNG<br>Max file size: 1 MB  | 不適用                                            | 不適用             |

---

## 影片訊息

```javascript
{
  "type": "video",
  "videoUrl": String,
  "previewImageUrl": String
}
```

| 欄位            | 說明         | Line 限制                                                                               | FB 限制                                           | Slack 限制         |
| --------------- | ------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------ |
| videoUrl        | 影片網址     | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>mp4<br>Max file size: 200 MB       | Max file size: 25 MB<br>fetched within 75 seconds | 網址長度 3000 字元 |
| previewImageUrl | 影片縮圖網址 | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>JPEG or PNG<br>Max file size: 1 MB | 不適用                                            | 不適用             |

Slack 會用網址方式呈現影片訊息

---

## 聲音訊息

```javascript
{
  "type": "audio",
  "audioUrl": String,
  "duration": Number
}
```

| 欄位     | 說明     | Line 限制                                                                         | FB 限制                                           | Slack 限制         |
| -------- | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------ |
| audioUrl | 聲音網址 | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>m4a<br>Max file size: 200 MB | Max file size: 25 MB<br>fetched within 10 seconds | 網址長度 3000 字元 |
| duration | 聲音長度 | 聲音檔案長度 (milliseconds)                                                       | 不適用                                            | 不適用             |

Slack 會用網址方式呈現聲音訊息

---

## 按鈕訊息

可以使用 flex 結構

```javascript
{
  "type": "button",
  "altText": String,
  "title"?: String,
  "text": String,
  "buttons": Array<Action>
}
```

| 欄位    | 說明                      | Line 限制          | FB 限制   | Slack 限制          |
| ------- | ------------------------- | ------------------ | --------- | ------------------- |
| altText | 預覽文字訊息              | 400 字元           | 不適用    | 不適用              |
| title   | 訊息標題 (Optional)       | 40 字元 (Optional) | 不適用    | 150 字元 (Optional) |
| text    | 訊息內文                  | 160 字元           | 640 字元  | 3000 字元           |
| buttons | [按鈕事件](#按鈕事件)陣列 | 最多 4 個          | 最多 3 個 | 最多 5 個           |

Slack 會分解成不同的結構組合成按鈕訊息

---

## 輪播訊息

可以使用 flex 結構

```javascript
{
  "type": "carousel",
  "altText": String,
  "columns": Array<{
    "title": String,
    "text": String,
    "imageUrl"?: String,
    "buttons": Array<Action>,
  }>
}
```

| 欄位            | 說明                      | Line 限制                                                                                                                                            | FB 限制            | Slack 限制 |
| --------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------- |
| altText         | 預覽文字訊息              | 400 字元                                                                                                                                             | 不適用             | 不適用     |
| columns         | 輪播陣列                  | 最多 10 個                                                                                                                                           | 最多 10 個         | 無上限     |
| column.title    | 單一區塊標題              | 40 字元 (Optional)                                                                                                                                   | 80 字元            | 150 字元   |
| column.text     | 單一區塊內文              | 120 字元 (no image or title) <br> 60 字元 (message with an image or title)                                                                           | 80 字元 (Optional) | 3000 字元  |
| column.imageUrl | 單一區塊圖片 (Optional)   | 網址長度 1000 字元<br>HTTPS over TLS 1.2 or later<br>JPEG or PNG <br>Aspect ratio: 1:1.51<br>Max width: 1024px<br>Max file size: 10 MB<br>(Optional) | (Optional)         | (Optional) |
| column.buttons  | [按鈕事件](#按鈕事件)陣列 | 最多 3 個                                                                                                                                            | 最多 3 個          | 最多 5 個  |

如果 column.title 、 column.text 只填寫其中一個的時候，會自動填補到 Line text 與 FB title

Slack 會分解成不同的結構組合成輪播訊息

---

## 按鈕事件

### 回覆訊息 (PostBack)

```javascript
{
  "type": "postback",
  "title": String,
  "data": String
}
```

| 欄位  | 說明                                |
| ----- | ----------------------------------- |
| title | 按鈕文字與使用者顯示回傳文字        |
| data  | 回覆內容，需使用 webhook 接收並處理 |

---

### 打開網頁 (Url)

```javascript
{
  "type": "url",
  "title": String,
  "url": String
}
```

| 欄位  | 說明           |
| ----- | -------------- |
| title | 按鈕文字       |
| url   | 點擊後開啟網頁 |

---

### 打電話 (Phone)

```javascript
{
  "type": "phone",
  "title": String,
  "number": String
}
```

| 欄位  | 說明                                                         | 範例          |
| ----- | ------------------------------------------------------------ | ------------- |
| title | 按鈕文字                                                     |               |
| url   | 點擊後打電話<br>電話格式必須是 +<COUNTRY_CODE><PHONE_NUMBER> | +886912345678 |

---
_Source: https://npm.io/package/@chi0307/transform-chatbot-message · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._