Modals

Modals can also be created in Seyfert. They are created with a builder like other components do and then TextInput components, inside an ActionRow, are attached to it.

Here is an example of how to create a modal with two text inputs:

import { Modal, TextInput, ActionRow } from 'seyfert';

import { TextInputStyle } from 'seyfert/lib/types';

const nameInput = new TextInput()
  .setCustomId('name')
  .setStyle(TextInputStyle.Short)
  .setLabel('Name');

const row1 = new ActionRow<TextInput>().setComponents([nameInput]);

const ageInput = new TextInput()
  .setCustomId('age')
  .setStyle(TextInputStyle.Short)
  .setLabel('Age');

const row2 = new ActionRow<TextInput>().setComponents([ageInput]);

const modal = new Modal()
  .setCustomId('mymodal')
  .setTitle('My Modal')
  .setComponents([row1, row2]);

Handling Modals

To handle modals, as they aren’t components, Seyfert provides ModalCommmand class which has the same logic as the ComponentCommand class.

import { ModalCommand, type ModalContext } from 'seyfert';

export default class MyModal extends ModalCommand {
  filter(context: ModalContext) {
    return context.customId === 'mymodal';
  }

  async run(context: ModalContext) {
    const interaction = context.interaction;

    //we are getting the textinput values by passing their custom ids in the getInputValue method.

    const name = interaction.getInputValue('name', true);

    const age = interaction.getInputValue('age', true);

    return context.write({
      content: `You are ${name} and you have ${age} years`
    });
  }
}