Skip to main content

Message Components

Setting the InteractionHandlerTypes option MessageComponent will have this InteractionHandler trigger for both SelectMenus and Buttons.

Here's a simple example:

import { InteractionHandler, InteractionHandlerTypes, PieceContext } from '@sapphire/framework';
import type { StringSelectMenuInteraction, ButtonInteraction } from 'discord.js';

export class MessageComponentHandler extends InteractionHandler {
public constructor(ctx: PieceContext, options: InteractionHandler.Options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.MessageComponent
});
}

public override parse(interaction: ButtonInteraction | StringSelectMenuInteraction) {
if (interaction.customId !== 'my-echo-button-or-select') return this.none();

return this.some();
}

public async run(interaction: ButtonInteraction | StringSelectMenuInteraction) {
if (interaction.isButton()) {
await interaction.reply({
content: `You clicked a button`
});
} else {
await interaction.reply({
// Remember how we can have multiple values? Let's get the first one!
content: `You selected: ${interaction.values[0]}`
});
}
}
}