Оформлюйте картки повідомлень
Усе, що публікує бот, чи то з вебхука, у відповідь на команду чи під час оновлення кнопкою, є карткою. Добра картка з першого погляду каже, що сталося: кольоровий край, заголовок, статус, а під ними подробиці.
Що можна зробити
- Показуйте статусКольорова плашка на кшталт «Відкрито», «Злито» чи «Пройдено», з кількістю доданих і видалених рядків.
- Перелічуйте подробиціРядки «назва: значення», які учасники копіюють одним натисканням.
- Пишіть у markdownЖирний шрифт, вбудований код, блоки коду, цитати й прапорці.
- Показуйте, що ви працюєтеСпінер, поки бот думає, а потім його міркування за перемикачем.
У застосунку
Чотири картки такими, якими їх бачать учасники. Кожна з них це кілька рядків JSON.
Будова картки
Частини картки згори донизу. Пропустіть те, що вам не потрібно: картка лише із заголовком теж підходить.
- Шапка«Повідомлення від» та ім’я: назва вебхука або, для відповіді на команду, назва вашої спільноти. Відповідь може додати
badge, наприклад репозиторій. - Заголовок і статус
title, що стає посиланням, якщо задатиtitle_url, а поруч плашкаstatus. - ПідзаголовокДругий рядок жирним шрифтом,
sub_title. - ОписОсновний текст у markdown.
- ПоляРядки «назва: значення» з кнопкою копіювання.
- Нижній рядокЧас, а також додані й видалені рядки, якщо ви їх надсилаєте.
{
"message_container": {
"type": "embed_message",
"badge": "acme/web",
"color": "purple",
"title": "Pull request #212 opened",
"title_url": "https://github.com/acme/web/pull/212",
"status": { "label": "Open", "color": "green", "icon": "pull_request" },
"sub_title": "Faster search in the channel list",
"description": "Search now runs **per keystroke** with a 120 ms debounce.",
"fields": [
{ "field": "Author", "value": "maya" },
{ "field": "Reviewers", "value": "dani, sam" }
],
"additions": 86,
"deletions": 12,
"files_changed": 3
}
}Усі поля
Вони розміщуються в message_container. Картці потрібен опис або індикатор завантаження. Поля з позначкою «відповіді на команди» відкидаються, якщо ви публікуєте через вебхук.
| Поле | Тип | Що робить |
|---|---|---|
type | string | embed_message (за замовчуванням) або system_message. |
badge | string | Невеликий чип після імені в шапці, наприклад acme/web. Відповіді на команди |
avatar_url | string | Зображення поверх іконки картки. |
color | string | Колір краю. Див. кольори нижче. |
title | string | Перший рядок жирним шрифтом. |
title_url | string | Перетворює заголовок на посилання. |
sub_title | string | Другий рядок жирним шрифтом під заголовком. |
description | string | Основний текст у markdown. |
fields | array | [{ "field": "…", "value": "…" }]: рядки «назва: значення». |
image_url, image_base64 | string | Зображення на картці. |
images | array | [{ "image_url": "…" }]: галерея з кількох зображень. |
status | object або string | Кольорова плашка поруч із заголовком. Див. нижче. Відповіді на команди |
additions, deletions, files_changed | number | Статистика diff у нижньому рядку. Відповіді на команди |
loader, loader_text, loader_sub_text | boolean, string | Спінер замість основного тексту. |
thinking | string | Міркування за перемикачем Показати міркування. Відповіді на команди |
thinking розуміють markdown: **bold**, _italic_, ~~strike~~, `inline code`, блоки коду в потрійних лапках, > quotes, прапорці - [x], @згадки та :emoji:.Статус і статистика diff
Плашка статусу розповідає історію ще до того, як хтось прочитає текст. Вона стоїть поруч із заголовком, а якщо заголовка немає, то в нижньому рядку; статистика diff показується поруч із часом. Обидві працюють у відповідях на команди, і їх використовує вбудована інтеграція GitHub. Вебхук їх відкидає.
{
"message_container": {
"color": "red",
"title": "Build failed on main",
"status": { "label": "Failing", "color": "red" },
"description": "`search.test.js`: 2 of 212 tests failed."
}
}| Поле | Тип | Що робить |
|---|---|---|
status | object або string | Звичайний рядок стає міткою: "status": "Open". |
status.label | string | Текст плашки. Без нього плашки немає. |
status.color | string | green, purple, red, orange, yellow, blue або gray. |
status.icon | string | Необов’язкова іконка зі списку нижче. |
additions | number | Додані рядки, показуються зеленим як +86. |
deletions | number | Видалені рядки, показуються червоним як -12. |
files_changed | number | Змінені файли, показуються як 3 files. |
Іконки
| Значення | Іконка | Типове використання |
|---|---|---|
pull_request | git-pull-request | Відкрито pull request |
pull_request_closed | git-pull-request-closed | Закрито без злиття |
merge, merged | git-merge | Злито |
commit | git-commit | Надіслано коміт |
issue | circle-dot | Відкрито issue |
issue_closed | circle-check | Закрито issue |
check | circle-check | Тести пройдено, завдання виконано |
Відповідність, яка підходить для GitHub
Їх використовує вбудована інтеграція GitHub; скопіюйте їх для власних інструментів.
| Подія | Мітка | Колір | Іконка |
|---|---|---|---|
| Відкрито pull request | Open | green | pull_request |
| Чернетка | Draft | gray | pull_request |
| Злито | Merged | purple | merged |
| Закрито без злиття | Closed | red | pull_request_closed |
| Відкрито issue | Open | green | issue |
| Закрито issue | Closed | purple | issue_closed |
| Надіслано коміт | Commit | gray | commit |
| Тести пройдено | Passing | green | check |
| Тести не пройдено | Failing | red | немає |
Завантаження й міркування
Для всього, що займає якийсь час, як-от відповідь ШІ чи довге завдання, спершу опублікуйте картку зі спінером, а потім замініть її результатом. Індикатор завантаження працює у вебхуках і у відповідях на команди. У відповіді на команду ви також можете покласти міркування моделі в thinking: учасники бачать перемикач Показати міркування замість стіни тексту.
Спершу: індикатор завантаження
Потім: відповідь, міркування згорнуто
{
"message_container": {
"type": "embed_message",
"color": "blue",
"loader": true,
"loader_text": "Thinking…",
"loader_sub_text": "Reading the last 50 messages"
}
}{
"message_container": {
"type": "embed_message",
"color": "blue",
"sub_title": "maya: when is the standup?",
"description": "Standup is at **09:30**, in #daily.",
"thinking": "Checked the pinned messages and the recurring event in #daily…"
}
}| Поле | Тип | Що робить |
|---|---|---|
loader | boolean | true показує спінер замість основного тексту. |
loader_text | string | Рядок поруч зі спінером, наприклад «Думаю…». |
loader_sub_text | string | Менший рядок під ним. |
thinking | string | Згорнуті міркування під описом, у markdown. |
Щоб замінити індикатор завантаження відповіддю, оновіть повідомлення новою карткою без loader. Як це зробити, описано на сторінці оновлення наживо.
Довгі описи
Опис може мати до 50 000 байтів. Якщо він довший за перші 1 000, учасники бачать початок і кнопку Показати більше, яка завантажує решту, тож довгий звіт не заполонить канал.
Системні повідомлення
Задайте "type": "system_message" для оголошення, а не допису бота: вікна технічного обслуговування, зміни правил, усе, що говорить від імені самої спільноти. Воно приймає ті самі поля й кнопки.
{
"message_container": {
"type": "system_message",
"color": "orange",
"title": "Maintenance tonight",
"description": "The build servers are down from 22:00 to 23:00."
}
}Кольори
Колір краю є найшвидшим сигналом на картці. Щоразу використовуйте той самий колір для того самого виду новин.
| Колір | Для чого |
|---|---|
green | Успіх: пройдено, розгорнуто, готово |
red | Невдача: помилка, недоступно, відхилено |
orange | Попередження, на яке варто глянути |
yellow | Очікування на когось: схвалення, запитання |
blue | Інформація, за замовчуванням |
purple | Події в коді або щось особливе |
Зберіть свій embed
Редагуйте поля або JSON-payload. Вони синхронізуються в обидва боки. Повідомлення відображається точно так, як у каналі. Це справжнє тіло webhook-запиту; скопіюйте його, коли все буде готово.