Files
discord-example-app/examples/modal.js
T
AnthonyandGitHub 0cb592adfe Update examples to use components v2 (#83)
* Update dependencies

* Update docs links

* Use components v2 in examples

* Update interaction link

* Fix text display fields

* Update app.js to match tutorial
2025-05-19 15:46:48 -07:00

90 lines
2.5 KiB
JavaScript

import 'dotenv/config';
import express from 'express';
import {
InteractionType,
InteractionResponseType,
MessageComponentTypes,
verifyKeyMiddleware,
} from 'discord-interactions';
// Create and configure express app
const app = express();
app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), function (req, res) {
// Interaction type and data
const { type, data } = req.body;
/**
* Handle slash command requests
*/
if (type === InteractionType.APPLICATION_COMMAND) {
// Slash command with name of "test"
if (data.name === 'test') {
// Send a modal as response
return res.send({
type: InteractionResponseType.MODAL,
data: {
custom_id: 'my_modal',
title: 'Modal title',
components: [
{
// Text inputs must be inside of an action component
type: MessageComponentTypes.ACTION_ROW,
components: [
{
// See https://discord.com/developers/docs/components/reference#text-input
type: MessageComponentTypes.INPUT_TEXT,
custom_id: 'my_text',
style: 1,
label: 'Type some text',
},
],
},
{
type: MessageComponentTypes.ACTION_ROW,
components: [
{
type: MessageComponentTypes.INPUT_TEXT,
custom_id: 'my_longer_text',
// Bigger text box for input
style: 2,
label: 'Type some (longer) text',
},
],
},
],
},
});
}
}
/**
* Handle modal submissions
*/
if (type === InteractionType.MODAL_SUBMIT) {
// custom_id of modal
const modalId = data.custom_id;
// user ID of member who filled out modal
const userId = req.body.member.user.id;
if (modalId === 'my_modal') {
let modalValues = '';
// Get value of text inputs
for (let action of data.components) {
let inputComponent = action.components[0];
modalValues += `${inputComponent.custom_id}: ${inputComponent.value}\n`;
}
return res.send({
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
data: {
content: `<@${userId}> typed the following (in a modal):\n\n${modalValues}`,
},
});
}
}
});
app.listen(3000, () => {
console.log('Listening on port 3000');
});