#How do you create selection menus and buttons in discord deno?

1 messages · Page 1 of 1 (latest)

pseudo sun
#

you create an object with the type of ButtonComponent or for select menu one from SelectMenuComponent, SelectMenuChannelsComponent, SelectMenuRolesComponent, SelectMenuUsersComponent, SelectMenuUsersAndRolesComponent based on what you need (the type will require the type to be set according to the type you use)

hexed apex
pseudo sun
# hexed apex Could you show me a code example using them? 
import { ButtonComponent, MessageComponentTypes } from "@discordeno/types" // or "@discordeno/bot" or "discordeno" based on what you are using

const button: ButtonComponent = {
  type: MessageComponentTypes.Button,
  label: "Button lable",
  customId: "button-id"
}

(sorry i didn't ask, you are using v19 or v18? the above code is v19, if you are using v18 let me know that if that is the case i need to check the v18 codebase to see what you need to import)

#

for the select menu types it is the same, Typescript / autocomple should give you everything you need

hexed apex
#

v19

hexed apex
#

thanks

pseudo sun
#

to then send them you can use the components array in the methods for sendMessage and the ones for interactions

#

and remember the ActionRow

hexed apex
#

I looked here and couldn't find it

pseudo sun
hexed apex
#

ok

pseudo sun
#

avatarUrl for the user avatar
memberAvatarUrl for the member avatar (if you need it)
guildIconUrl for the guild icon

hexed apex
#

thanks

hexed apex
pseudo sun
hexed apex
hexed apex
pseudo sun
hexed apex
#

ok

#

thanks bro

hexed apex
pseudo sun
#

you need to import those functions

hexed apex
#

ahh ok

#

thanks

pseudo sun
#

they aren't a member of the objects

hexed apex
#

guildIconUrl(interaction.guildId, undefined, { size: 2048, format: "jpg" })

hexed apex
pseudo sun
#

guildIconUrl has 2 params

#

nvm

#

i'm stupid, i was checking the wrong function lol

pseudo sun
#

also without the types, i'm not sure what is the TS error you sent

hexed apex
#

How do I get the hash of the image?

pseudo sun
hexed apex
#

ok

pseudo sun
#

interaction.guild has a Partial Guild object, so it might have the icon hash

hexed apex
#

This code:

# 
        .setTitle(`${emojis.emojiduvida} | Support Dúvidas Mised`)
        .setDescription(`${emojis.emojicerto} | Olá membros, então aqui é a parte onde vocês poderam tirar algumas dúvidas sobre o Mised com algumas perguntas frequentes, e por isso fizemos esse sistema com respostas prontas para sanar suas dúvidas. \n\n ${emojis.emojisetinha} | **Para tirar suas dúvidas selecione uns dos menus abaixo e siga as instruções do bot.**`)
        .setColor(configs.color)
        .setThumbnail(guildIconUrl(interaction.guildId, guild?.icon, { size: 2048, format: "jpg" }))
        .setFooter(`Mised Support`)```
pseudo sun
hexed apex
#

Type 'EmbedsBuilder' has no properties in common with type '{ title?: string | undefined; type?: EmbedTypes | undefined; description?: string | undefined; url?: string | undefined; color?: number | undefined; timestamp?: string | undefined; ... 6 more ...; fields?: { ...; }[] | undefined; }

pseudo sun
#

createEmebds() is already an array of embeds

#

(to add a new one use .newEmbed() and then use the .setXXXX methods to customize this other embed)

hexed apex
hexed apex
pseudo sun
#

then remove the [ ] of the array, as it is already one (or spread the array, do whatever you need)

hexed apex
#

ok resolve this error

#

thanks my bro

hexed apex
pseudo sun
hexed apex
pseudo sun
#

bot.start() in the code

then you need to run the code with the runtime

hexed apex
#

ok

#

thanks

hexed apex
#

If you can help me with this file error, that's all that's missing.

# 
  const files = readdir(folder, { recursive: true })

  for (const filename of files) {
    if (!filename.endsWith('.js')) continue

    // Using `file://` and `process.cwd()` to avoid weird issues with relative paths and/or Windows
    await import(`file://${process.cwd()}/${folder}/${filename}`).catch((x) =>
      logger.fatal(`Não foi possível importar o arquivo (${folder}/${filename}) for reason:`, x),
    )
  }```
pseudo sun
#

await

hexed apex
#

o erro ta nesse files ai

#

ok

#

thanks

pseudo sun
#

to unwrap a Promise<T> you need await

hexed apex
#

Now this is new error: Uncaught (in promise) Error: ENOENT: no such file or directory, readdir

#

import { readdir } from 'node:fs/promises'

#

That's how it's imported

pseudo sun
pseudo sun
hexed apex
#

it comes from @types/nodes

pseudo sun
hexed apex
#

so it would be like importing?

pseudo sun
# hexed apex yes

^ my mess above, does it exist relative to the CWD? (from where you are running node or whatever)

pseudo sun
hexed apex
pseudo sun
#

(CWD = Current Working Directory btw)

pseudo sun
# hexed apex yes

can you send the folder structure and what is that folder var set to? it might help as i'm not sure what is the issue if the folder exists

hexed apex
pseudo sun
# hexed apex

??????????????????????????????????????????????????

why the @types/node file for node:fs/promises?

hexed apex
pseudo sun
#

it is about the first argument you are giving to readdir

hexed apex
hexed apex
pseudo sun
# hexed apex Who argument?

you have readdir(folder, { recursive: true }) in the code you sent before, what is the value of folder when it errors?

hexed apex
pseudo sun
#

i meant when the code runs, the actual string, not the type

hexed apex
# 

bot.logger.info('Loading commands...')
importDirectory('./dist/commands')

bot.logger.info('Loading events...')
importDirectory('./dist/events')```
pseudo sun
#

does dist exist? usually it is created by something like tsc/swc/ecc

hexed apex
#

That's right, now the code works.

#

thanks

#

@pseudo sun So I'm using the advanced bot example from discord deno and it's not registering the slash commands, like I give the / there but it doesn't work. What do you think it could be?

pseudo sun
#

i can't help with eris, i can help with discordeno if you need help with that

#

i do not know literally anything about eris

hexed apex
#

sorry

#

read

#

again

pseudo sun
#

you need to run that, node dist/register-commands.js

hexed apex
pseudo sun
#

did you run the build script?

hexed apex
#

this filename is .swcrc
?

pseudo sun
hexed apex
#

ok, how run this swc?

pseudo sun
#

and in the package.json there is swc src --strip-leading-paths --delete-dir-on-start --out-dir dist under the build script (so if you are using yarn: yarn build, if you are using npm: npm run build, if you are using pnpm: pnpm build)

hexed apex
#

now is new error Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\Bruno Henrique\Desktop\mised-support-deno\dist\utils\updateCommands' imported from C:\Users\Bruno Henrique\Desktop\mised-support-deno\dist\register-commands.js

#

When I give node dist/register-commands.js

pseudo sun
#

the error suggests you only compiled the register-commands file

hexed apex
#

And how do you solve it?

pseudo sun
#

not sure, what did you run exacly to build?

hexed apex
#

Or did it work?

hexed apex
pseudo sun
#

can you run dir /w dist ?

#

(assuming you are in cmd, else run ls dist if you are on powershell/anything else)

hexed apex
#

dir /w where?

pseudo sun
#

from where you are running node

hexed apex
#

swc src --strip-leading-paths --delete-dir-on-start --out-dir dist this code?

pseudo sun
#

in this directory you need to run the dir command C:\Users\Bruno Henrique\Desktop\mised-support-deno

hexed apex
#

I put it here and the same error remains

pseudo sun
#

i meant, what is the output of that dir command

hexed apex
#

So it just moves on to the next cmd step as if nothing had happened.

pseudo sun
#

? dir just shows what is in the folder

#

it does not do anything else

hexed apex
pseudo sun
#

so it is empty....

#

since i see PS at the beginning of the dir, can you try ls dist just to be sure?

hexed apex
pseudo sun
hexed apex
# 


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        10/08/2024     17:36                commands
d-----        10/08/2024     17:36                events
d-----        10/08/2024     17:36                interfaces
d-----        10/08/2024     17:36                utils
-a----        10/08/2024     17:36           2220 bot.js
-a----        10/08/2024     17:36            172 commands.js
-a----        10/08/2024     17:36            393 config.js
-a----        10/08/2024     17:36            297 index.js
-a----        10/08/2024     17:36            194 register-commands.js```
pseudo sun
#

ls dist\utils?

hexed apex
# 
    Diretório: C:\Users\Bruno Henrique\Desktop\mised-support-deno\dist\utils


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        10/08/2024     17:36            588 loader.js
-a----        10/08/2024     17:36            733 permissions.js
-a----        10/08/2024     17:36            200 updateCommands.js```
pseudo sun
#

so the file exists, mhhh strange

hexed apex
#

then

pseudo sun
#

can you try running again node dist/register-commands.js?

hexed apex
#

yes

pseudo sun
#

i'm very much confused if it errors for a missing file

hexed apex
#

So it keeps giving this error when the file is there

pseudo sun
#

can you runcat dist/register-commands.js? (cat gets the file content)

hexed apex
# 
import { bot } from './bot.js';
import { updateApplicationCommands } from './utils/updateCommands';
bot.logger.info('Updating commands...');
updateApplicationCommands();```
pseudo sun
#

can you open the file in vscode and add .js to the end of ./utils/updateCommands?

#

and then try running the file again

hexed apex
#

Same error

pseudo sun
#

still the Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\Bruno Henrique\Desktop\mised-support-deno\dist\utils\updateCommands' imported from C:\Users\Bruno Henrique\Desktop\mised-support-deno\dist\register-commands.js? it should have a .js at the end of the utils\updateCommands now

hexed apex
#

it worked

#

thanks

hexed apex
pseudo sun
hexed apex
#

ok

#

so minute

#

It hasn't happened yet, but I'll wait here to see if it does.

#

thanks

pseudo sun
#

whoops lol

#

give me a moment that i give you the code that should work

hexed apex
#

ok

#

await

pseudo sun
#

change the content of dist/register-commands.js with this: ```js
import 'dotenv/config';
import { bot } from './bot.js';
import importDirectory from './utils/loader.js';
import { updateApplicationCommands } from './utils/updateCommands.js';

bot.logger.info('Loading the commands')
await importDirectory('./dist/commands');

bot.logger.info('Updating commands...');
await updateApplicationCommands();

bot.logger.info('Done!');
// We need to exit explicitly or else the REST manager will keep NodeJS alive
process.exit();


I will do a PR tomorrow to fix the example(s) to use this code
hexed apex
pseudo sun
hexed apex
#

ok

#

@pseudo sun thanks work it

hexed apex
#

application is not responding

pseudo sun
#

are you running the bot ?

#

the dist/index.js file

hexed apex
#

yes

#

yet the error continues

pseudo sun
#

in the console of the bot do you see any errors?

hexed apex
#

no

#

some the discord

pseudo sun
# hexed apex more error

can you send the code for this msgduvimised command?

interactions have 3 seconds to respond, and if you defer you get 15 minutes

hexed apex
# 

import { MessageComponentTypes, ApplicationCommandTypes, createEmbeds } from '@discordeno/bot';
import { createCommand } from '../commands.js';
import { bot } from '../bot.js';
import emojis from '../interfaces/emojis.js';
import { configs } from '../config.js';
createCommand({
    name: 'msgduvidamised',
    description: 'Envia a mensagem dúvidas do mised.',
    type: ApplicationCommandTypes.ChatInput,
    async execute (interaction) {
        const menuzinpt = {
            type: MessageComponentTypes.SelectMenu,
            placeholder: `Selecione qual é a sua dúvida`,
            customId: "menuzin_duvidas_mised",
            options: [
                {
                    label: `Como adicionar o Mised no seu servidor?`,
                    description: `Explicação de como adicionar o mised`,
                    emoji: {
                        id: BigInt(1269443633027743806),
                        name: "direita",
                        animated: true
                    },
                    value: "mised_add"
                },
                {
                    label: `Por que o Mised está offline`,
                    description: `Explicação o por que ele pode estar off`,
                    emoji: {
                        id: BigInt(1269443633027743806),
                        name: "direita",
                        animated: true
                    },
                    value: "mised_off"
                },
                {
                    label: `O Mised não responde aos meus comandos!`,
                    description: `Explicação caso o Mised não responda`,
                    emoji: {
                        id: BigInt(1269443633027743806),
                        name: "direita",
                        animated: true
                    },
                    value: "mised_notcommands"
                },
                {
                    label: `O Mised não defendeu meu servidor de um raid!`,
                    description: `Explicação sobre o sistema de defesa do mised`,
                    emoji: {
                        id: BigInt(1269443633027743806),
                        name: "direita",
                        animated: true
                    },
                    value: "mised_raid"
                }
            ]
        };
        const guild = await bot.cache.guilds.get(BigInt(`${interaction.guildId}`));
        let embedexplicação = createEmbeds().newEmbed().setTitle(`${emojis.emojiduvida} | Support Dúvidas Mised`).setDescription(`${emojis.emojicerto} | Olá membros, então aqui é a parte onde vocês poderam tirar algumas dúvidas sobre o Mised com algumas perguntas frequentes, e por isso fizemos esse sistema com respostas prontas para sanar suas dúvidas. \n\n ${emojis.emojisetinha} | **Para tirar suas dúvidas selecione uns dos menus abaixo e siga as instruções do bot.**`).setColor(configs.color).setThumbnail(configs.image).setFooter(`Mised Support`);
        interaction.respond({
            embeds: embedexplicação,
            components: [
                {
                    type: MessageComponentTypes.ActionRow,
                    components: [
                        menuzinpt
                    ]
                }
            ]
        });
    }
});
pseudo sun
#

mhh, to me it seems that it should work so I'm kinda confused rn

hexed apex
#

I see

pseudo sun
#

ohhhh, try removing the newEmbed() right after the createEmbeds()

#

(also make sure you are re-building the code each time you edit a .ts file)

hexed apex
#

ok

hexed apex
pseudo sun
#

uhhhh??? not sure what that means

#

i mean, i know what error is saying, but not how to fix it in this context