DocsInteraction Commands

Interaction Commands

Learn how to use Discord's modern interaction system with slash commands, buttons, select menus, and modals.

Introduction to Interactions

Interactions are Discord's modern way of handling user input. They include slash commands, buttons, select menus, and modals. Unlike traditional message-based commands, interactions provide a more integrated and user-friendly experience.

Meowcord v0.1.6 introduces full support for interaction commands through the interactionCommand method.

Slash Commands

Slash commands are the most common type of interaction. They appear in Discord's command picker when users type "/".

index.js

bot.interactionCommand({
  cmdName: "ping",
  interactionType: "slash",
  cmdCode: async (interaction) => {
    const ping = Date.now() - interaction.createdTimestamp;
    await interaction.reply(`🏓 Pong! Latency: ${ping}ms`);
  }
});

To use slash commands, you need to register them with Discord using the SlashCommandsUpdate class.

Button Interactions

Buttons allow users to interact with your bot by clicking on interactive elements attached to messages.

index.js

// Create a message with buttons
bot.basicCommand({
  cmdName: "buttons",
  cmdCode: async (message) => {
    const row = {
      type: 1, // Action Row
      components: [
        {
          type: 2, // Button
          style: 1, // Primary (blue)
          custom_id: "confirm_button",
          label: "Confirm"
        },
        {
          type: 2, // Button
          style: 4, // Danger (red)
          custom_id: "cancel_button",
          label: "Cancel"
        }
      ]
    };
    
    message.reply({
      content: "Please choose an option:",
      components: [row]
    });
  }
});

// Handle button interactions
bot.interactionCommand({
  cmdName: "confirm_button",
  interactionType: "button",
  cmdCode: async (interaction) => {
    await interaction.reply("You confirmed the action!");
  }
});

bot.interactionCommand({
  cmdName: "cancel_button",
  interactionType: "button",
  cmdCode: async (interaction) => {
    await interaction.reply("Action cancelled.");
  }
});

Select Menu Interactions

Select menus (also called dropdowns) allow users to choose from a list of options.

index.js

// Create a message with a select menu
bot.basicCommand({
  cmdName: "menu",
  cmdCode: async (message) => {
    const row = {
      type: 1, // Action Row
      components: [
        {
          type: 3, // Select Menu
          custom_id: "color_select",
          placeholder: "Choose a color",
          options: [
            {
              label: "Red",
              value: "red",
              description: "The color red"
            },
            {
              label: "Blue",
              value: "blue",
              description: "The color blue"
            },
            {
              label: "Green",
              value: "green",
              description: "The color green"
            }
          ]
        }
      ]
    };
    
    message.reply({
      content: "Pick your favorite color:",
      components: [row]
    });
  }
});

// Handle select menu interactions
bot.interactionCommand({
  cmdName: "color_select",
  interactionType: "selectMenu",
  cmdCode: async (interaction) => {
    const selectedColor = interaction.values[0];
    await interaction.reply(`You selected: ${selectedColor}`);
  }
});

Modal Interactions

Modals are pop-up forms that allow users to input text data. They're perfect for collecting detailed information.

index.js

// Create a button that opens a modal
bot.basicCommand({
  cmdName: "feedback",
  cmdCode: async (message) => {
    const row = {
      type: 1, // Action Row
      components: [
        {
          type: 2, // Button
          style: 1, // Primary
          custom_id: "feedback_modal_button",
          label: "Give Feedback"
        }
      ]
    };
    
    message.reply({
      content: "Click the button to give feedback:",
      components: [row]
    });
  }
});

// Handle button click to show modal
bot.interactionCommand({
  cmdName: "feedback_modal_button",
  interactionType: "button",
  cmdCode: async (interaction) => {
    const modal = {
      title: "Feedback Form",
      custom_id: "feedback_modal",
      components: [
        {
          type: 1, // Action Row
          components: [
            {
              type: 4, // Text Input
              custom_id: "feedback_input",
              label: "Your Feedback",
              style: 2, // Paragraph
              placeholder: "Tell us what you think...",
              required: true,
              max_length: 1000
            }
          ]
        }
      ]
    };
    
    await interaction.showModal(modal);
  }
});

// Handle modal submission
bot.interactionCommand({
  cmdName: "feedback_modal",
  interactionType: "modal",
  cmdCode: async (interaction) => {
    const feedback = interaction.fields.getTextInputValue("feedback_input");
    await interaction.reply(`Thank you for your feedback: "${feedback}"`);
  }
});

Loading Interactions from Files

Just like regular commands, you can organize interaction commands in separate files:

interactions/ping-slash.js

// interactions/ping-slash.js
module.exports = {
  cmdName: "ping",
  interactionType: "slash",
  type: "interaction",
  cmdCode: async (interaction) => {
    const ping = Date.now() - interaction.createdTimestamp;
    await interaction.reply(`🏓 Pong! Latency: ${ping}ms`);
  }
};

Load interaction commands from files:

index.js

// Load a specific interaction file
bot.loadInteractionFrom("./interactions/ping-slash.js");

// Load all interactions from a folder
bot.loadInteractionFromFolder("./interactions");

Complete Example

Here's a complete example showcasing different types of interactions:

index.js

const { Meow, Intents } = require("meowcord");

const bot = new Meow({
  intents: [Intents.Guilds, Intents.GuildMessages, Intents.MessageContent],
  prefix: "!",
});

bot.start("YOUR_BOT_TOKEN");

// Slash command
bot.interactionCommand({
  cmdName: "hello",
  interactionType: "slash",
  cmdCode: async (interaction) => {
    await interaction.reply("Hello from a slash command!");
  }
});

// Button command that creates interactive components
bot.basicCommand({
  cmdName: "interactive",
  cmdCode: async (message) => {
    const row = {
      type: 1,
      components: [
        {
          type: 2,
          style: 1,
          custom_id: "info_button",
          label: "Get Info"
        },
        {
          type: 2,
          style: 2,
          custom_id: "help_button",
          label: "Get Help"
        }
      ]
    };
    
    message.reply({
      content: "Choose an option:",
      components: [row]
    });
  }
});

// Handle button interactions
bot.interactionCommand({
  cmdName: "info_button",
  interactionType: "button",
  cmdCode: async (interaction) => {
    await interaction.reply("This is some information!");
  }
});

bot.interactionCommand({
  cmdName: "help_button",
  interactionType: "button",
  cmdCode: async (interaction) => {
    await interaction.reply("This is help information!");
  }
});