Message Components

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

Here's a simple example:

JavaScript

const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');

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

  parse(interaction) {
    if (interaction.customId !== 'my-echo-button-or-select') return this.none();

    return this.some();
  }

  async run(interaction) {
    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]}`
      });
    }
  }
}

module.exports = {
  MessageComponentHandler
};

ESM

import { InteractionHandler, InteractionHandlerTypes } from '@sapphire/framework';

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

  parse(interaction) {
    if (interaction.customId !== 'my-echo-button-or-select') return this.none();

    return this.some();
  }

  async run(interaction) {
    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]}`
      });
    }
  }
}

TypeScript

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]}`
      });
    }
  }
}