Thiết kế website giá rẻ

Question

i cant add more than 5 components
i tried to make it rows but still it didnt work
it shows that error:
node:events:497
throw er; // Unhandled ‘error’ event
^

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[0].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[0].components[3][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[0].components[4][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[1].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[1].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[1].components[3][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[1].components[4][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[2].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[2].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[2].components[3][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[2].components[4][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
data.components[3].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component e
xceeds the maximum width
at handleErrors (D:SRT-Discordnode_modules@discordjsrestdistindex.js:730:13)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async BurstHandler.runRequest (D:SRT-Discordnode_modules@discordjsrestdistindex
.js:835:23)
at async _REST.request (D:SRT-Discordnode_modules@discordjsrestdistindex.js:1278:2
2)
at async ButtonInteraction.showModal (D:SRT-Discordnode_modulesdiscord.jssrcstructu
resinterfacesInteractionResponses.js:256:5)
at async Client. (D:SRT-Discordmain.js:77:9)
Emitted ‘error’ event on Client instance at:
at emitUnhandledRejectionOrErr (node:events:402:10)
at process.processTicksAndRejections (node:internal/process/task_queues:84:21) {
requestBody: {
files: undefined,
json: {
type: 9,
data: {
custom_id: ‘leadSubmission’,
title: ‘Submit a Lead’,
components: [
{ type: 1, components: [Array] },
{ type: 1, components: [Array] },
{ type: 1, components: [Array] },
{ type: 1, components: [Array] }
]
}
}
},
rawError: {
message: ‘Invalid Form Body’,
code: 50035,
errors: {
data: {
components: {
‘0’: { components: [Object] },
‘1’: { components: [Object] },
‘2’: { components: [Object] },
‘3’: { components: [Object] }
}
}
}
},
code: 50035,
status: 400,
method: ‘POST’,
url: ‘https://discord.com/api/v10/interactions/1246007518053011508/aW50ZXJhY3Rpb246MTI0NjA
wNzUxODA1MzAxMTUwODpQRlVhUFltOEFySEN2Umg4MlM0SVZzVXlIeWZKMEl1UUNHUGpCbmxwVFAzZ2lwejRXWnVqb1J
OUWJ0ajNaQ1Vxa2J0ek9PYklrNFNQNktCMHJjOWl3UHI0ZTBLUFpvQ1VVdnEyZ05ZNGVyTWRPcHVreDd3c2dSa2JnWk5
2aHQyRw/callback’
}

the code:


const client = new Client({
    intents: [
        GatewayIntentBits.Guilds,
        GatewayIntentBits.GuildMessages,
        GatewayIntentBits.GuildMembers
    ],
    partials: [Partials.Channel]
});

const CHANNEL_ID_LEADS = '1045292255948324876';
const CHANNEL_ID_CHECKING = '1048198720036020257';
const CHANNEL_ID_APPROVED = '1057443388770750486';
const CHANNEL_ID_DISAPPROVED = '1051993159778971739';


client.once('ready', () => {
    console.log(`Logged in as ${client.user.tag}!`);

    const channel = client.channels.cache.get(CHANNEL_ID_LEADS);
    if (channel) {
        const embed = new EmbedBuilder()
            .setTitle('SRT-VA Leads System');

        const button = new ButtonBuilder()
            .setCustomId('submitLead')
            .setLabel('Submit Lead')
            .setStyle(ButtonStyle.Success);

        const row = new ActionRowBuilder().addComponents(button);

        channel.send({ embeds: , components: [row] });
    }
});

client.on('interactionCreate', async interaction => {
    if (!interaction.isButton() && !interaction.isModalSubmit()) return;

    if (interaction.isButton() && interaction.customId === 'submitLead') {
        const modal = new ModalBuilder()
            .setCustomId('leadSubmission')
            .setTitle('Submit a Lead');

        const components = [
            new TextInputBuilder().setCustomId('date').setLabel('Date').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('temperature').setLabel('Lead Temperature').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('campaign').setLabel('Campaign Name').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('address').setLabel('Address').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('bedrooms').setLabel('How many bedrooms?').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('bathrooms').setLabel('How many bathrooms?').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('condition').setLabel('Condition').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('seller').setLabel('Seller's Name').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('phone').setLabel('Phone').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('contact').setLabel('Best time to contact').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('price').setLabel('Price').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('zestimate').setLabel('Zestimate').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('motivation').setLabel('Motivation').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('timeline').setLabel('Timeline').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('notes').setLabel('Notes').setStyle(TextInputStyle.Paragraph),
            new TextInputBuilder().setCustomId('link').setLabel('Zillow/Realtor/Red Link').setStyle(TextInputStyle.Short),
            new TextInputBuilder().setCustomId('callLink').setLabel('Call Link').setStyle(TextInputStyle.Short)
        ];

        // Grouping components into rows of up to 5
        const rows = [];
        for (let i = 0; i < components.length; i += 5) {
            const slice = components.slice(i, i + 5);
            const actionRow = new ActionRowBuilder().addComponents(...slice);
            rows.push(actionRow);
        }

        modal.addComponents(...rows);

        await interaction.showModal(modal);
    }

    if (interaction.isModalSubmit() && interaction.customId === 'leadSubmission') {
        const collectedData = {};
        const inputs = [
            'date', 'temperature', 'campaign', 'address', 'bedrooms', 'bathrooms',
            'condition', 'seller', 'phone', 'contact', 'price', 'zestimate',
            'motivation', 'timeline', 'notes', 'link', 'callLink'
        ];

        inputs.forEach(input => {
            collectedData[input] = interaction.fields.getTextInputValue(input);
        });

        const embed = new EmbedBuilder()
            .setTitle('New Lead Submission')
            .addFields(inputs.map(input => ({
                name: input.charAt(0).toUpperCase() + input.slice(1),
                value: collectedData[input],
                inline: true
            })))
            .setAuthor({ name: interaction.user.tag, iconURL: interaction.user.displayAvatarURL() });

        const approveButton = new ButtonBuilder()
            .setCustomId('approveLead')
            .setLabel('Approve')
            .setStyle(ButtonStyle.Success);

        const disapproveButton = new ButtonBuilder()
            .setCustomId('disapproveLead')
            .setLabel('Disapprove')
            .setStyle(ButtonStyle.Danger);

        const row = new ActionRowBuilder().addComponents(approveButton, disapproveButton);

        const checkingChannel = client.channels.cache.get(CHANNEL_ID_CHECKING);
        if (checkingChannel) {
            await checkingChannel.send({ embeds: , components: [row] });
        }
    }

    if (interaction.isButton() && (interaction.customId === 'approveLead' || interaction.customId === 'disapproveLead')) {
        const modal = new ModalBuilder()
            .setCustomId(interaction.customId === 'approveLead' ? 'leadApproval' : 'leadDisapproval')
            .setTitle(interaction.customId === 'approveLead' ? 'Approve Lead' : 'Disapprove Lead');

        const textInput = new TextInputBuilder()
            .setCustomId(interaction.customId === 'approveLead' ? 'rating' : 'disapprovalReason')
            .setLabel(interaction.customId === 'approveLead' ? 'Rating?' : 'Why Disapprove?')
            .setStyle(TextInputStyle.Short);

        modal.addComponents(new ActionRowBuilder().addComponents(textInput));

        await interaction.showModal(modal);
    }

    if (interaction.isModalSubmit() && (interaction.customId === 'leadApproval' || interaction.customId === 'leadDisapproval')) {
        const reasonOrRating = interaction.fields.getTextInputValue(interaction.customId === 'leadApproval' ? 'rating' : 'disapprovalReason');
        const originalEmbed = interaction.message.embeds[0];

        const newEmbed = new EmbedBuilder(originalEmbed)
            .addFields({ name: interaction.customId === 'leadApproval' ? 'Rating' : 'Disapproval Reason', value: reasonOrRating });

        const targetChannelId = interaction.customId === 'leadApproval' ? CHANNEL_ID_APPROVED : CHANNEL_ID_DISAPPROVED;
        const targetChannel = client.channels.cache.get(targetChannelId);

        if (targetChannel) {
            await targetChannel.send({ embeds: [newEmbed] });
        }

        await interaction.message.delete();

        const userNotificationEmbed = new EmbedBuilder()
            .setTitle(`Your lead has been ${interaction.customId === 'leadApproval' ? 'approved' : 'disapproved'}`)
            .addFields(originalEmbed.fields)
            .addFields({ name: interaction.customId === 'leadApproval' ? 'Rating' : 'Disapproval Reason', value: reasonOrRating });

        const originalUserId = originalEmbed.author.name;
        const originalUser = await client.users.fetch(originalUserId);

        if (originalUser) {
            await originalUser.send({ embeds: [userNotificationEmbed] });
        }
    }
});

client.login('token') ```


--------------------------------------------
--------------------------------------------
--------------------------------------------

Thiết kế website giá rẻ

Danh mục

how to add more than 5 components in discord.js actionrowbuilder