Перейти до основного вмісту
Розробникам Картки повідомлень

Оформлюйте картки повідомлень

Усе, що публікує бот, чи то з вебхука, у відповідь на команду чи під час оновлення кнопкою, є карткою. Добра картка з першого погляду каже, що сталося: кольоровий край, заголовок, статус, а під ними подробиці.

Що можна зробити

  • Показуйте статусКольорова плашка на кшталт «Відкрито», «Злито» чи «Пройдено», з кількістю доданих і видалених рядків.
  • Перелічуйте подробиціРядки «назва: значення», які учасники копіюють одним натисканням.
  • Пишіть у markdownЖирний шрифт, вбудований код, блоки коду, цитати й прапорці.
  • Показуйте, що ви працюєтеСпінер, поки бот думає, а потім його міркування за перемикачем.

У застосунку

Чотири картки такими, якими їх бачать учасники. Кожна з них це кілька рядків JSON.

Будова картки

Частини картки згори донизу. Пропустіть те, що вам не потрібно: картка лише із заголовком теж підходить.

  1. Шапка«Повідомлення від» та ім’я: назва вебхука або, для відповіді на команду, назва вашої спільноти. Відповідь може додати badge, наприклад репозиторій.
  2. Заголовок і статусtitle, що стає посиланням, якщо задати title_url, а поруч плашка status.
  3. ПідзаголовокДругий рядок жирним шрифтом, sub_title.
  4. ОписОсновний текст у markdown.
  5. ПоляРядки «назва: значення» з кнопкою копіювання.
  6. Нижній рядокЧас, а також додані й видалені рядки, якщо ви їх надсилаєте.
json
{
  "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. Картці потрібен опис або індикатор завантаження. Поля з позначкою «відповіді на команди» відкидаються, якщо ви публікуєте через вебхук.

ПолеТипЩо робить
typestringembed_message (за замовчуванням) або system_message.
badgestringНевеликий чип після імені в шапці, наприклад acme/web. Відповіді на команди
avatar_urlstringЗображення поверх іконки картки.
colorstringКолір краю. Див. кольори нижче.
titlestringПерший рядок жирним шрифтом.
title_urlstringПеретворює заголовок на посилання.
sub_titlestringДругий рядок жирним шрифтом під заголовком.
descriptionstringОсновний текст у markdown.
fieldsarray[{ "field": "…", "value": "…" }]: рядки «назва: значення».
image_url, image_base64stringЗображення на картці.
imagesarray[{ "image_url": "…" }]: галерея з кількох зображень.
statusobject або stringКольорова плашка поруч із заголовком. Див. нижче. Відповіді на команди
additions, deletions, files_changednumberСтатистика diff у нижньому рядку. Відповіді на команди
loader, loader_text, loader_sub_textboolean, stringСпінер замість основного тексту.
thinkingstringМіркування за перемикачем Показати міркування. Відповіді на команди
Опис і thinking розуміють markdown: **bold**, _italic_, ~~strike~~, `inline code`, блоки коду в потрійних лапках, > quotes, прапорці - [x], @згадки та :emoji:.

Статус і статистика diff

Плашка статусу розповідає історію ще до того, як хтось прочитає текст. Вона стоїть поруч із заголовком, а якщо заголовка немає, то в нижньому рядку; статистика diff показується поруч із часом. Обидві працюють у відповідях на команди, і їх використовує вбудована інтеграція GitHub. Вебхук їх відкидає.

json
{
  "message_container": {
    "color": "red",
    "title": "Build failed on main",
    "status": { "label": "Failing", "color": "red" },
    "description": "`search.test.js`: 2 of 212 tests failed."
  }
}
ПолеТипЩо робить
statusobject або stringЗвичайний рядок стає міткою: "status": "Open".
status.labelstringТекст плашки. Без нього плашки немає.
status.colorstringgreen, purple, red, orange, yellow, blue або gray.
status.iconstringНеобов’язкова іконка зі списку нижче.
additionsnumberДодані рядки, показуються зеленим як +86.
deletionsnumberВидалені рядки, показуються червоним як -12.
files_changednumberЗмінені файли, показуються як 3 files.

Іконки

ЗначенняІконкаТипове використання
pull_requestgit-pull-requestВідкрито pull request
pull_request_closedgit-pull-request-closedЗакрито без злиття
merge, mergedgit-mergeЗлито
commitgit-commitНадіслано коміт
issuecircle-dotВідкрито issue
issue_closedcircle-checkЗакрито issue
checkcircle-checkТести пройдено, завдання виконано

Відповідність, яка підходить для GitHub

Їх використовує вбудована інтеграція GitHub; скопіюйте їх для власних інструментів.

ПодіяМіткаКолірІконка
Відкрито pull requestOpengreenpull_request
ЧернеткаDraftgraypull_request
ЗлитоMergedpurplemerged
Закрито без злиттяClosedredpull_request_closed
Відкрито issueOpengreenissue
Закрито issueClosedpurpleissue_closed
Надіслано комітCommitgraycommit
Тести пройденоPassinggreencheck
Тести не пройденоFailingredнемає

Завантаження й міркування

Для всього, що займає якийсь час, як-от відповідь ШІ чи довге завдання, спершу опублікуйте картку зі спінером, а потім замініть її результатом. Індикатор завантаження працює у вебхуках і у відповідях на команди. У відповіді на команду ви також можете покласти міркування моделі в thinking: учасники бачать перемикач Показати міркування замість стіни тексту.

assistant
System
Повідомлення від Assistant
Думаю…Читаю останні 50 повідомлень

Спершу: індикатор завантаження

assistant
System
Повідомлення від Assistant

maya: коли стендап?

Стендап о 09:30, у #daily.
Переглянув закріплені повідомлення й регулярну подію в #daily.

Потім: відповідь, міркування згорнуто

json
{
  "message_container": {
    "type": "embed_message",
    "color": "blue",
    "loader": true,
    "loader_text": "Thinking…",
    "loader_sub_text": "Reading the last 50 messages"
  }
}
json
{
  "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…"
  }
}
ПолеТипЩо робить
loaderbooleantrue показує спінер замість основного тексту.
loader_textstringРядок поруч зі спінером, наприклад «Думаю…».
loader_sub_textstringМенший рядок під ним.
thinkingstringЗгорнуті міркування під описом, у markdown.

Щоб замінити індикатор завантаження відповіддю, оновіть повідомлення новою карткою без loader. Як це зробити, описано на сторінці оновлення наживо.

Довгі описи

Опис може мати до 50 000 байтів. Якщо він довший за перші 1 000, учасники бачать початок і кнопку Показати більше, яка завантажує решту, тож довгий звіт не заполонить канал.

Системні повідомлення

Задайте "type": "system_message" для оголошення, а не допису бота: вікна технічного обслуговування, зміни правил, усе, що говорить від імені самої спільноти. Воно приймає ті самі поля й кнопки.

json
{
  "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-запиту; скопіюйте його, коли все буде готово.

Шаблони
Кнопки
Попередній перегляд
Тіло webhook

Що далі