Ugrás a fő tartalomra
Fejlesztők Üzenetkártyák

Tervezz üzenetkártyákat

Minden, amit egy bot küld, legyen az webhookból, parancsra adott válaszból vagy gombnyomás utáni frissítésből, kártya. Egy jó kártya egy pillantással elmondja, mi történt: színes szegély, cím, státusz, alatta a részletek.

Mire használhatod

  • Mutass státusztSzínes címke, például Open, Merged vagy Passing, a hozzáadott és törölt sorok számával.
  • Sorold fel a részleteketCímke–érték sorok, amelyeket a tagok egy koppintással kimásolhatnak.
  • Írj markdownbanFélkövér, soron belüli kód, kódblokkok, idézetek és jelölőnégyzetek.
  • Mutasd, hogy dolgozolForgó jelző, amíg a botod gondolkodik, utána pedig a gondolatmenete egy kapcsoló mögött.

Az alkalmazásban

Négy kártya, ahogy a tagok látják őket. Mindegyik csak néhány sor JSON.

Egy kártya felépítése

A kártya részei fentről lefelé. Hagyd el, amire nincs szükséged: egy csak címből álló kártya is rendben van.

  1. Fejléc„Message from” és egy név: a webhook neve, vagy parancsra adott válasznál a közösséged neve. A válasz egy badge jelvényt is kaphat, például a repository nevét.
  2. Cím és státuszA title, amely linkké válik, ha megadod a title_url mezőt, mellette a status címkével.
  3. AlcímEgy második félkövér sor, sub_title.
  4. LeírásA törzs, markdownban.
  5. MezőkCímke–érték sorok, másolás gombbal.
  6. LáblécAz időpont, valamint a hozzáadott és törölt sorok, ha elküldöd őket.
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
  }
}

Összes mező

Ezek a message_container objektumba kerülnek. A kártyához leírás vagy betöltésjelző kell. A „Parancsválaszok” jelölésű mezők kimaradnak, ha webhookon keresztül küldesz.

MezőTípusMit csinál
typestringembed_message (alapértelmezett) vagy system_message.
badgestringKis jelvény a név után a fejlécben, például acme/web. Parancsválaszok
avatar_urlstringKép, amely a kártya ikonjára kerül.
colorstringA szegély színe. Lásd a színeket lejjebb.
titlestringA félkövér első sor.
title_urlstringLinkké alakítja a címet.
sub_titlestringMásodik félkövér sor a cím alatt.
descriptionstringA törzs, markdownban.
fieldsarray[{ "field": "…", "value": "…" }]: címke–érték sorok.
image_url, image_base64stringKép a kártyán.
imagesarray[{ "image_url": "…" }]: több képből álló galéria.
statusobject vagy stringSzínes címke a cím mellett. Lásd lejjebb. Parancsválaszok
additions, deletions, files_changednumberDiff-statisztika a láblécben. Parancsválaszok
loader, loader_text, loader_sub_textboolean, stringForgó jelző a törzs helyett.
thinkingstringGondolatmenet egy Show thinking kapcsoló mögött. Parancsválaszok
A leírás és a thinking érti a markdownt: **bold**, _italic_, ~~strike~~, `inline code`, keretezett kódblokkok, > quotes, - [x] jelölőnégyzetek, @említések és :emoji:.

Státusz és diff-statisztika

A státuszcímke már azelőtt elmondja a lényeget, hogy bárki elolvasná a szöveget. A cím mellett áll, vagy ha nincs cím, a láblécben; a diff-statisztika az időpont mellett jelenik meg. Mindkettő működik parancsokra adott válaszokban, és a beépített GitHub-integráció is használja őket. A webhook elhagyja őket.

json
{
  "message_container": {
    "color": "red",
    "title": "Build failed on main",
    "status": { "label": "Failing", "color": "red" },
    "description": "`search.test.js`: 2 of 212 tests failed."
  }
}
MezőTípusMit csinál
statusobject vagy stringEgy sima string maga a címke: "status": "Open".
status.labelstringA címke szövege. Enélkül nincs címke.
status.colorstringgreen, purple, red, orange, yellow, blue vagy gray.
status.iconstringOpcionális ikon az alábbi listából.
additionsnumberHozzáadott sorok, zöld +86 formában.
deletionsnumberTörölt sorok, piros -12 formában.
files_changednumberMódosított fájlok, 3 files formában.

Ikonok

ÉrtékIkonJellemző használat
pull_requestgit-pull-requestMegnyitott pull request
pull_request_closedgit-pull-request-closedBeolvasztás nélkül lezárva
merge, mergedgit-mergeBeolvasztva
commitgit-commitPusholt commit
issuecircle-dotMegnyitott issue
issue_closedcircle-checkLezárt issue
checkcircle-checkSikeres tesztek, sikeresen lefutott feladat

GitHubhoz bevált megfeleltetés

A beépített GitHub-integráció ezeket használja; másold át őket a saját eszközeidbe.

EseményCímkeSzínIkon
Pull request megnyitvaOpengreenpull_request
PiszkozatDraftgraypull_request
BeolvasztvaMergedpurplemerged
Lezárva beolvasztás nélkülClosedredpull_request_closed
Issue megnyitvaOpengreenissue
Issue lezárvaClosedpurpleissue_closed
Commit pusholvaCommitgraycommit
Sikeres tesztekPassinggreencheck
Sikertelen tesztekFailingrednincs

Betöltésjelző és gondolatmenet

Ha valami eltart egy darabig, például egy AI-válasz vagy egy hosszú feladat, előbb küldj egy kártyát forgó jelzővel, majd cseréld le az eredményre. A betöltésjelző webhookokból és parancsválaszokból is működik. Parancsválaszban a modell gondolatmenetét is elhelyezheted a thinking mezőben: a tagok szövegfal helyett egy Show thinking kapcsolót látnak.

assistant
System
Message from Assistant
Gondolkodom…Olvasom az utolsó 50 üzenetet

Először: a betöltésjelző

assistant
System
Message from Assistant

maya: mikor van a standup?

A standup 09:30-kor kezdődik, a #daily csatornában.
Átnéztem a kitűzött üzeneteket és a #daily ismétlődő eseményét.

Utána: a válasz, összecsukott gondolatmenettel

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…"
  }
}
MezőTípusMit csinál
loaderbooleantrue esetén a törzs helyett a forgó jelző látszik.
loader_textstringA forgó jelző melletti sor, például „Gondolkodom…”.
loader_sub_textstringEgy kisebb sor alatta.
thinkingstringÖsszecsukott gondolatmenet a leírás alatt, markdownban.

Ha a betöltésjelzőt le akarod cserélni a válaszra, frissítsd az üzenetet egy új kártyával, amelyből kihagyod a loader mezőt. A módját az élő frissítések oldal írja le.

Hosszú leírások

Egy leírás legfeljebb 50 000 bájt lehet. Az első 1000 bájt után a tagok az elejét látják, és egy Show more gombot, amely betölti a többit, így egy hosszú jelentés nem árasztja el a csatornát.

Rendszerüzenetek

Állítsd be a "type": "system_message" értéket, ha közleményt küldesz, nem botbejegyzést: karbantartási időszakról, szabályzatváltozásról, bármiről, ami magának a közösségnek a nevében szól. Ugyanazokat a mezőket és gombokat fogadja.

json
{
  "message_container": {
    "type": "system_message",
    "color": "orange",
    "title": "Maintenance tonight",
    "description": "The build servers are down from 22:00 to 23:00."
  }
}

Színek

A szegély színe a leggyorsabb jelzés egy kártyán. Ugyanahhoz a hírtípushoz mindig ugyanazt a színt használd.

SzínMire használd
greenSiker: átment, élesítve, kész
redHiba: elbukott, leállt, elutasítva
orangeFigyelmeztetés, amelyre rá kell nézni
yellowValakire vár: jóváhagyások, kérdések
blueInformáció, az alapértelmezett
purpleKódesemények, vagy valami különleges

Építsd meg az embededet

Szerkeszd a mezőket vagy a JSON payloadot: a kettő együtt változik. Az előnézet pontosan úgy mutatja az üzenetet, ahogy a csatornában megjelenik. Ez a valódi webhook-törzs; másold ki, ha minden stimmel.

Sablonok
Gombok
Előnézet
Webhook-törzs

Építs tovább