Skip to main content

Composants de message

Les composants de message — que nous appellerons « composants » par la suite — constituent un cadre permettant d'ajouter des éléments interactifs aux messages que votre application ou votre bot envoie. Ils sont accessibles, personnalisables et faciles à utiliser.

Il existe plusieurs types de composants ; cette documentation présente les bases de ce nouveau cadre ainsi que chaque exemple.

Bouton​

Les boutons sont des composants interactifs qui s'affichent sur les messages. Les utilisateurs peuvent cliquer dessus, ce qui envoie une interaction à votre application lorsqu'ils sont cliqués.

Button

app.components.ts
import { Injectable } from '@nestjs/common';
import { Context, Button, ButtonContext } from 'necord';

@Injectable()
export class AppComponents {
    @Button('BUTTON')
    public onButton(@Context() [interaction]: ButtonContext) {
        return interaction.reply({ content: 'Button clicked!' });
    }
}

Bouton dynamique​

Vous pouvez créer des boutons avec un champ id dynamique. Cela est utile pour transmettre des métadonnées aux boutons.

Les boutons dynamiques utilisent le format path-to-regexp pour effectuer la correspondance par expression régulière. Transformez une chaîne de chemin telle que user/:name en une expression régulière.

Pour créer un bouton dynamique

new ButtonBuilder()
  .setCustomId('click/12345')
  .setLabel('LABEL')
  .setStyle(ButtonStyle.Primary)

Pour recevoir un bouton dynamique

import { Injectable } from '@nestjs/common';
import { Context, Button, ButtonContext } from 'necord';

@Injectable()
export class AppComponents {
  @Button('click/:value')
  public onButton(
    @Context() [interaction]: ButtonContext,
    @ComponentParam('value') value: string
  ) {
    return interaction.reply({ content: `Button clicked! Value: ${value}` });
  }


Menu de sélection​

Les menus de sélection sont un autre composant interactif qui s'affiche sur les messages. Sur ordinateur, cliquer sur un menu de sélection ouvre une interface de type liste déroulante ; sur mobile, appuyer sur un menu de sélection ouvre une demi-feuille présentant les options.

Select Menu

Discord a introduit de nouveaux composants de menu de sélection :

  • String Select
  • User Select
  • Role Select
  • Mentionable Select
  • Channel Select

String Select​

Le String Select est un menu de sélection permettant de choisir des options de texte définies

Pour créer un String Select :

new StringSelectMenuBuilder()
  .setCustomId('STRING_SELECT_MENU') // replace with your customId
  .setPlaceholder('Select your color')
  .setMaxValues(1)
  .setMinValues(1)
  .setOptions([
    { label: 'Red', value: 'Red' },
    { label: 'Blue', value: 'Blue' },
    { label: 'Yellow', value: 'Yellow' }
  ])

Pour recevoir un String Select :

import { Injectable } from '@nestjs/common';
import { Context, StringSelect, StringSelectContext, SelectedStrings } from 'necord';

@Injectable()
export class AppComponents {
    @StringSelect('STRING_SELECT_MENU')
    public onStringSelect(
      @Context() [interaction]: StringSelectContext,
      @SelectedStrings() selected: string[]
    ) {
      return interaction.reply({
        content: `Your selected color - ${selected.join(' ')}`
      });
    }
}

User Select​

Le User Select est un menu de sélection permettant de sélectionner des utilisateurs

Pour créer un User Select :

new UserSelectMenuBuilder()
  .setCustomId('USER_SELECT_MENU')
  .setPlaceholder('Select a user')
  .setMaxValues(1)
  .setMinValues(1)

Pour recevoir un User Select :

import { Injectable } from '@nestjs/common';
import {
  Context,
  UserSelect,
  UserSelectContext,
  SelectedUser,
  ISelectedUser,
  SelectedMembers,
  ISelectedMembers
} from 'necord';

@Injectable()
export class AppComponents {
    @UserSelect('USER_SELECT_MENU')
    public onUserSelect(
      @Context() [interaction]: UserSelectContext,
      @SelectedUsers() users: ISelectedUsers, // Collection of users
      @SelectedMembers() members: ISelectedMembers // Collection of members
    ) {
      interaction.reply({
        content: `
        Selected users - ${users.map(user => user.username).join(',')}\n
        Selected members - ${members.map(member => member.user?.username).join(',')}
        `
      });
    }
}

Role Select​

Le Role Select est un menu de sélection permettant de sélectionner des rôles

Pour créer un Role Select :

new RoleSelectMenuBuilder()
  .setCustomId('ROLE_SELECT_MENU')
  .setPlaceholder('Select a role')
  .setMaxValues(1)
  .setMinValues(1)

Pour recevoir un Role Select :

import { Injectable } from '@nestjs/common';
import {
  Context,
  RoleSelect,
  RoleSelectContext,
  SelectedRole,
  ISelectedRole,
} from 'necord';

@Injectable()
export class AppComponents {
    @RoleSelect('ROLE_SELECT_MENU')
    public onRoleSelect(
      @Context() [interaction]: RoleSelectContext,
      @SelectedRoles() roles: ISelectedRoles, // Collection of roles,
    ) {
      interaction.reply({
        content: `
        Selected roles - ${roles.map(role => role.id).join(',')}
        `
      });
    }
}

Channel Select​

Channel Select are Select Menu for selecting channels

To create Channel Select:

new ChannelSelectMenuBuilder()
  .setCustomId('CHANNEL_SELECT_MENU')
  .setPlaceholder('Select a channel')
  .setMaxValues(1)
  .setMinValues(1)

To receive a Channel Select:

import { Injectable } from '@nestjs/common';
import {
  Context,
  ChannelSelect,
  ChannelSelectContext,
} from 'necord';

@Injectable()
export class AppComponents {
    @ChannelSelect('CHANNEL_SELECT_MENU')
    public onChannelSelect(
      @Context() [interaction]: ChannelSelectContext,
      @SelectedChannels() channels: ISelectedChannels, // Collection of channels
    ) {
      interaction.reply({
        content: `
        Selected channels - ${channels.map(channel => channel.id).join(',')}
        `
      });
    }
}

Mentionable Select​

Mentionable Select are Select Menu for selecting mentionables (users and roles)

To create Mentionable Select:

new MentionableSelectMenuBuilder()
  .setCustomId('MENTIONABLE_SELECT_MENU')
  .setPlaceholder('Select a user/role')
  .setMaxValues(1)
  .setMinValues(1)

To receive a Mentionable Select:

import { Injectable } from '@nestjs/common';
import {
  Context,
  MentionableSelect,
  MentionableSelectContext,
  SelectedUsers,
  ISelectedUsers,
  SelectedMembers,
  ISelectedMembers,
  SelectedRoles,
  ISelectedRoles,
} from 'necord';

@Injectable()
export class AppComponents {
    @MentionableSelect('MENTIONABLE_SELECT_MENU')
    public onMentionableSelect(
      @Context() [interaction]: MentionableSelectContext,
      @SelectedUsers() users: ISelectedUsers,
      @SelectedMembers() members: ISelectedMembers,
      @SelectedRoles() roles: ISelectedRoles
    ) {
      return interaction.reply({
        content: `
        Selected users - ${users.map(user => user.username).join(',')}\n
        Selected members - ${members.map(member => member.user?.username).join(',')}\n
        Selected roles - ${roles.map(role => role.name).join(',')}
        `
      });
    }
}

Dynamic Select Menu​

All the Select Menu types, support Dynamic id using path-to-regexp format.

To create a Dynamic select menu

new StringSelectMenuBuilder()
  .setCustomId('preferences/color')
  .setPlaceholder('Select a color')
  .setMaxValues(1)
  .setMinValues(1)
  .setOptions([
    { label: 'Red', value: 'Red' },
    { label: 'Blue', value: 'Blue' },
    { label: 'Yellow', value: 'Yellow' }
  ])

To receive a Dynamic select menu

import { Injectable } from '@nestjs/common';
import { Context, StringSelect, StringSelectContext,SelectedStrings } from 'necord';

@Injectable()
export class AppComponents {
    @StringSelect('preferences/:item')
	public onPreferenceSelect(
		@Context() [interaction]: StringSelectContext,
		@SelectedStrings() values: string[],
		@ComponentParam('item') item: string
	) {
		return interaction.reply({
			content: `
      ${item} = ${values.join(',')}\n
      `
		});
	}
}

Dynamic select menus are compatible with :

  • StringSelect
  • UserSelect
  • RoleSelect
  • MentionableSelect
  • ChannelSelect

You can view a working example here.