Mise en page

Les components d’un message prennent des pièces fabriquées par ChapterJS : vos boutons, menus et formulaires, et les helpers de cette page, importés de 'chapterjs'. Chacune est vérifiée par rapport aux limites de Discord à sa fabrication.

import { container, separator, text, type GuildMember, type TextChannel } from 'chapterjs';

async function profile(channel: TextChannel, member: GuildMember) {
  await channel.send({
    components: [container([text(`## ${member.displayName}`), separator(), text(`${member.roles.length} rôles`)], { color: 0xc026d3 })],
  });
}

Comment construire un message avec ces pièces est dans Embeds et mise en page.

Helpers

row()

row(components: readonly (ButtonComponent | SelectComponent)[]): ActionRowComponent

Une rangée de composants : jusqu’à 5 boutons, ou un menu déroulant. Le framework fabrique les rangées tout seul ; utilisez ceci pour choisir quels boutons partagent une rangée. Documentation de Discord

linkButton()

linkButton(options: LinkButtonOptions): ButtonComponent

Un bouton qui ouvre un lien. Rien ne tourne dans votre bot quand on clique dessus : Discord ouvre l’adresse. Documentation de Discord

premiumButton()

premiumButton(skuId: Snowflake, options?: { disabled?: boolean }): ButtonComponent

Un bouton qui propose quelque chose à acheter : Discord affiche lui-même le nom et le prix du SKU. Documentation de Discord

text()

text(content: string): TextComponent

Un texte dans un message construit avec des composants. Le Markdown fonctionne comme dans n’importe quel message, mentions comprises. Les textes d’un message font 4000 caractères au plus au total. Documentation de Discord

section()

section(texts: string | readonly string[], accessory: ButtonComponent | ThumbnailComponent): SectionComponent

Un à trois textes avec un bouton ou une miniature à côté. Documentation de Discord

thumbnail()

thumbnail(media: string | MediaOptions): ThumbnailComponent

Une petite image à côté des textes d’une section. Documentation de Discord

gallery()

gallery(items: readonly (string | MediaOptions)[]): GalleryComponent

Jusqu’à 10 images ou vidéos, affichées en grille. Documentation de Discord

file()

file(name: string, options?: { spoiler?: boolean }): FileComponent

Un fichier envoyé avec le message (ses files), affiché là où il est placé. Documentation de Discord

separator()

separator(options?: SeparatorOptions): SeparatorComponent

De l’espace entre deux pièces, avec une ligne par défaut. Documentation de Discord

container()

container(children: readonly ContainerChild[], options?: ContainerOptions): ContainerComponent

Un cadre autour de textes, sections, rangées, galeries, fichiers et séparateurs, avec une couleur facultative sur sa gauche, comme un embed. Documentation de Discord

Options

LinkButtonOptions

Un bouton de lien : ce qu’il affiche, et l’adresse qu’il ouvre.

string

requis

L’adresse qu’ouvre le bouton (512 caractères au plus).

string

Le texte sur le bouton (80 caractères au plus).

EmojiInput

Un emoji sur le bouton, avant l’étiquette.

boolean

Affiche le bouton grisé, impossible à cliquer.

MediaOptions

Une image ou une vidéo : son adresse, ou attachment://nom pour un fichier du message.

string

requis

L’adresse du média : un lien, ou attachment://chart.png pour un fichier envoyé avec le message.

string

Ce que montre le média, pour les personnes qui ne peuvent pas le voir (1024 caractères au plus).

boolean

Floute le média jusqu’à ce qu’on clique dessus.

SeparatorOptions

L’apparence d’un séparateur.

boolean

Affiche une ligne. Affichée par défaut.

'small' | 'large'

Combien d’espace : 'small' (par défaut) ou 'large'.

ContainerOptions

L’apparence d’un conteneur.

number

La couleur de la ligne sur sa gauche, sous forme de nombre (0xc026d3).

boolean

Floute tout le conteneur jusqu’à ce qu’on clique dessus.

Les pièces

MessageComponent

type MessageComponent = ContainerChild | ContainerComponent

Ce que prennent les components d’un message. Les boutons et menus sont mis en rangées par le framework (5 boutons par rangée, un menu seul dans sa rangée) ; row() est là pour choisir. Un tel message contient 5 rangées au plus. Dès qu’un message a un texte, une section, une galerie, un fichier, un séparateur ou un conteneur, il est construit uniquement avec des composants : Discord ne prend alors ni content ni embeds.

ContainerChild

type ContainerChild = ButtonComponent | SelectComponent | ActionRowComponent | TextComponent | SectionComponent | GalleryComponent | FileComponent | SeparatorComponent

Ce que peut contenir un conteneur.

Piece

interface Piece<Kind extends string> { readonly [brand]: Kind }

Une pièce d’un message fabriquée par ChapterJS : un bouton, un menu, une mise en page. Seul le framework fabrique des pièces : un objet simple est refusé là où une pièce est attendue, avec un message qui dit quoi utiliser à la place. Chaque pièce est une Piece :

Type	Fabriqué par
`ButtonComponent`	Un bouton déclaré avec `button()`, `linkButton()`, `premiumButton()`
`SelectComponent`	Un menu déroulant déclaré avec `select()`
`ModalComponent`	Un formulaire déclaré avec `modal()`, pour `interaction.showModal()`
`ActionRowComponent`	`row()`
`TextComponent`	`text()`
`SectionComponent`	`section()`
`ThumbnailComponent`	`thumbnail()`
`GalleryComponent`	`gallery()`
`FileComponent`	`file()`
`SeparatorComponent`	`separator()`
`ContainerComponent`	`container()`

Documentation de Discord

Référence

Vos fichiers

Structures

Types

CLI

Helpers

row()

linkButton()

premiumButton()

text()

section()

thumbnail()

gallery()

file()

separator()

container()

Options

LinkButtonOptions

MediaOptions

SeparatorOptions

ContainerOptions

Les pièces

MessageComponent

ContainerChild

Piece