Skip to content

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 { 
class Modal<T extends ModalBuilderComponents = TextInput>
Represents a modal for user interactions.
@example const modal = new Modal();
modal.setTitle("Sample Modal");
modal.addComponents(
new ActionRow()
.addComponents(new TextInput().setLabel("Enter text"))
));
modal.run((interaction) => {
// Handle modal submission
});
const json = modal.toJSON();
Modal, 
class TextInput
Represents a text input component builder.
@example const textInput = new TextInput().setLabel("Enter text");
textInput.setStyle(TextInputStyle.Paragraph);
textInput.setPlaceholder("Type here");
const json = textInput.toJSON();
TextInput, 
class ActionRow<T extends BuilderComponents>
Represents an Action Row component in a message.
ActionRow } from 'seyfert';

import { 
enum TextInputStyle
https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-styles
TextInputStyle } from 'seyfert/lib/types';

const 
const nameInput: TextInput
nameInput = new 
new TextInput(data?: Partial<APITextInputComponent>): TextInput
Creates a new TextInput instance.
@param ― data - Optional data for the text input.
TextInput()
  .
TextInput.setCustomId(id: string): TextInput
Sets the custom ID of the text input.
@param ― id - The custom ID for the text input.
@returns ― The current TextInput instance.
setCustomId('name')
  .
TextInput.setStyle(style: TextInputStyle): TextInput
Sets the style of the text input.
@param ― style - The style of the text input.
@returns ― The current TextInput instance.
setStyle(
enum TextInputStyle
https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-styles
TextInputStyle.
function (enum member) TextInputStyle.Short = 1
Short)
  .
TextInput.setLabel(label: string): TextInput
Sets the label of the text input.
@param ― label - The label of the text input.
@returns ― The current TextInput instance.
setLabel('Name');

const 
const row1: ActionRow<TextInput>
row1 = new 
new ActionRow<TextInput>({ components, ...data }?: Partial<APIActionRowComponent<APIActionRowComponentTypes>>): ActionRow<...>
Creates a new instance of the ActionRow class.
@param ― data - Optional data to initialize the Action Row.
@example const actionRow = new ActionRow({ components: [buttonRawJSON] });
ActionRow<
class TextInput
Represents a text input component builder.
@example const textInput = new TextInput().setLabel("Enter text");
textInput.setStyle(TextInputStyle.Paragraph);
textInput.setPlaceholder("Type here");
const json = textInput.toJSON();
TextInput>().
ActionRow<TextInput>.setComponents(component: TextInput[]): ActionRow<TextInput>
Sets the components of the Action Row.
@param ― component - The components to set.
@returns ― The updated Action Row instance.
@example actionRow.setComponents([buttonComponent1, buttonComponent2]);
setComponents([
const nameInput: TextInput
nameInput]);

const 
const ageInput: TextInput
ageInput = new 
new TextInput(data?: Partial<APITextInputComponent>): TextInput
Creates a new TextInput instance.
@param ― data - Optional data for the text input.
TextInput()
  .
TextInput.setCustomId(id: string): TextInput
Sets the custom ID of the text input.
@param ― id - The custom ID for the text input.
@returns ― The current TextInput instance.
setCustomId('age')
  .
TextInput.setStyle(style: TextInputStyle): TextInput
Sets the style of the text input.
@param ― style - The style of the text input.
@returns ― The current TextInput instance.
setStyle(
enum TextInputStyle
https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-styles
TextInputStyle.
function (enum member) TextInputStyle.Short = 1
Short)
  .
TextInput.setLabel(label: string): TextInput
Sets the label of the text input.
@param ― label - The label of the text input.
@returns ― The current TextInput instance.
setLabel('Age');

const 
const row2: ActionRow<TextInput>
row2 = new 
new ActionRow<TextInput>({ components, ...data }?: Partial<APIActionRowComponent<APIActionRowComponentTypes>>): ActionRow<...>
Creates a new instance of the ActionRow class.
@param ― data - Optional data to initialize the Action Row.
@example const actionRow = new ActionRow({ components: [buttonRawJSON] });
ActionRow<
class TextInput
Represents a text input component builder.
@example const textInput = new TextInput().setLabel("Enter text");
textInput.setStyle(TextInputStyle.Paragraph);
textInput.setPlaceholder("Type here");
const json = textInput.toJSON();
TextInput>().
ActionRow<TextInput>.setComponents(component: TextInput[]): ActionRow<TextInput>
Sets the components of the Action Row.
@param ― component - The components to set.
@returns ― The updated Action Row instance.
@example actionRow.setComponents([buttonComponent1, buttonComponent2]);
setComponents([
const ageInput: TextInput
ageInput]);

const 
const modal: Modal<TextInput>
modal = new 
new Modal<TextInput>(data?: Partial<APIModalInteractionResponseCallbackData>): Modal<TextInput>
Creates a new Modal instance.
@param ― data - Optional data for the modal.
Modal()
  .
Modal<TextInput>.setCustomId(id: string): Modal<TextInput>
Sets the custom ID of the modal.
@param ― id - The custom ID for the modal.
@returns ― The current Modal instance.
setCustomId('mymodal')
  .
Modal<TextInput>.setTitle(title: string): Modal<TextInput>
Sets the title of the modal.
@param ― title - The title of the modal.
@returns ― The current Modal instance.
setTitle('My Modal')
  .
Modal<TextInput>.setComponents(component: ActionRow<TextInput>[]): Modal<TextInput>
Set the components to the modal.
@param ― component - The components to set into the modal.
@returns ― The current Modal instance.
setComponents([
const row1: ActionRow<TextInput>
row1, 
const row2: ActionRow<TextInput>
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 { 
class ModalCommand
ModalCommand, type 
class ModalContext<M extends keyof RegisteredMiddlewares = never>
interface ModalContext<M extends keyof RegisteredMiddlewares = never>
Represents a context for interacting with components in a Discord bot.
ModalContext } from 'seyfert';

export default class 
class MyModal
MyModal extends 
class ModalCommand
ModalCommand {
  
MyModal.filter(context: ModalContext): boolean
filter(
context: ModalContext<never>
context: 
class ModalContext<M extends keyof RegisteredMiddlewares = never>
interface ModalContext<M extends keyof RegisteredMiddlewares = never>
Represents a context for interacting with components in a Discord bot.
ModalContext) {
    return 
context: ModalContext<never>
context.
ModalContext<never>.customId: string
customId === 'mymodal';
  }

  async 
MyModal.run(context: ModalContext): Promise<void>
run(
context: ModalContext<never>
context: 
class ModalContext<M extends keyof RegisteredMiddlewares = never>
interface ModalContext<M extends keyof RegisteredMiddlewares = never>
Represents a context for interacting with components in a Discord bot.
ModalContext) {
    const 
const interaction: ModalSubmitInteraction<boolean>
interaction = 
context: ModalContext<never>
context.
ModalContext<never>.interaction: ModalSubmitInteraction<boolean>
interaction;

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

    const 
const name: string
name = 
const interaction: ModalSubmitInteraction<boolean>
interaction.
ModalSubmitInteraction<boolean>.getInputValue(customId: string, required: true): string (+1 overload)
getInputValue('name', true);

    const 
const age: string
age = 
const interaction: ModalSubmitInteraction<boolean>
interaction.
ModalSubmitInteraction<boolean>.getInputValue(customId: string, required: true): string (+1 overload)
getInputValue('age', true);

    return 
context: ModalContext<never>
context.
ModalContext<never>.write<false>(body: InteractionCreateBodyRequest, fetchReply?: false | undefined): Promise<void>
Writes a response to the interaction.
@param ― body - The body of the response.
@param ― fetchReply - Whether to fetch the reply or not.
write({
      
content?: string | undefined
The message contents (up to 2000 characters)
content: `You are ${
const name: string
name} and you have ${
const age: string
age} years`
    });
  }
}