feat: Add Modals and Text Inputs

[suneettipirneni]

Please describe the changes this PR makes and why it should be merged:

Adds support for modal submit interactions as well as text input components.

Prerequisites:

• feat(Interactions): add modal and text input interactions discord-api-types#243
• refactor: make public builder props getters #7422
• refactor: allow discord.js builders to accept camelCase #7424
• fix: use case converter for json component serialization #7464

Ref:

• document modals discord/discord-api-docs#4459

Usage

Sending

import {
  ActionRow,
  TextInputComponent,
  TextInputStyle,
  Modal,
  type ModalActionRowComponent,
} from 'discord.js';

// Create the modal
const modal = new Modal()
  .setTitle('My Awesome Form')
  .setCustomId('AwesomeForm');

// Create text input fields
const tvShowInputComponent = new TextInputComponent()
  .setCustomId('tvField')
  .setLabel('Favorite TV show')
  .setStyle(TextInputStyle.Short);

const haikuInputComponent = new TextInputComponent()
  .setCustomId('haikuField')
  .setLabel('Write down your favorite haiku')
  .setStyle(TextInputStyle.Paragraph);

const rows = [tvShowInputComponent, haikuInputComponent].map(
  (component) =>
    new ActionRow<ModalActionRowComponent>().addComponents(component)
);

// Add action rows to form
modal.addComponents(...rows);

// --- snip ---

// Present the modal to the user
await interaction.showModal(modal);

Receiving

client.on('interactionCreate', async (interaction) => {
  if (!interaction.isModalSubmit()) {
    return;
  }
  
  // Verify we have the right modal
  if (interaction.customId !== 'AwesomeForm') {
    return;
  }

  // Extract text input components from submitted modal
  const [favTVShow, favHaiku] = ['tvField', 'haikuField']
    .map(id => interaction.fields.getTextInputValue(id));
  
  // ACK the interaction
  await interaction.reply(`Favorite TV Show: ${favTVShow}, Favorite haiku: ${favHaiku}`);
});

TODO:

• Add the rest of the typings
• Implement the proper type guards
• Refine and finish doc types and descriptions
• Fix any discrepancies with data deserialization of components.
• Throw API errors in unsupported configurations
• Test

Status and versioning classification:

• Code changes have been tested against the Discord API, or there are no code changes
• I know how to update typings and have done so, or typings don't need updating
• This PR changes the library's interface (methods or parameters added)

[ImRodry]

Not sure if some of these things were done on purpose due to this being a draft, so sorry if they were!

[manuelvleeuwen]

ModalInputText needs to be added to the MessageActionRowComponent type as well.

[almeidx]

receive is spelt as recieve a couple of times in this pull request. (search for the misspelt word in the files tab)

[samarmeena]

@suneettipirneni I was trying modal with discord.js@dev, receiving this error, do know why?

[ImRodry]

You need to install the latest builders dev release too. Please send questions like these to the Discord server though

[berkbuzcu]

Any plans to implement the rest of the components for the Modal builder?

[ImRodry]

That’s a question you gotta ask Discord

[waki285]

merge 🎉

[maxschnee-dev]

quick question. when will this be pushed to production?

[Syjalo]

quick question. when will this be pushed to production?

When discord.js v14 will be ready™️

[ACGaming1508]

I got this error while trying to build a modal:

const Discord = require('discord.js');
console.log(Discord.ActionRow);
// => undefined

[megatank58]

I got this error while trying to build a modal:

const Discord = require('discord.js');
console.log(Discord.ActionRow);
// => undefined

The pull request has been merged, it's better to make an issue or ask in the discord server, also ActionRow has been renamed to ActionRowBuilder now

[ArvidWedtstein]

.