feat(command): enhance ping command with button interaction and improved response format

src/commands/utility/ping.command.ts

@@ -1,4 +1,4 @@
-import { ApplicationIntegrationType, ChatInputCommandInteraction, CommandInteraction, InteractionContextType, SlashCommandBuilder } from "discord.js";
+import { ApplicationIntegrationType, ButtonInteraction, ButtonStyle, ChatInputCommandInteraction, CommandInteraction, ComponentType, ContainerBuilder, InteractionContextType, MessageFlags, SlashCommandBuilder } from "discord.js";
 
 export default {
     data: new SlashCommandBuilder()
@@ -14,6 +14,33 @@ export default {
             InteractionContextType.PrivateChannel
         ),
     async execute(interaction : ChatInputCommandInteraction) {
-        await interaction.reply(`🏓 Latency is ${Date.now() - interaction.createdTimestamp}ms. API Latency : ${interaction.client.ws.ping}ms`);
+
-    }
+        const container = new ContainerBuilder()
+            .addTextDisplayComponents((textDisplay) => textDisplay.setContent(`🏓 Latency is ${Date.now() - interaction.createdTimestamp}ms. API Latency : ${interaction.client.ws.ping}ms`))
+            .addSeparatorComponents((s) => s)
+            .addSectionComponents((section) => 
+                section
+                    .addTextDisplayComponents((textDisplay) =>
+                        textDisplay
+                            .setContent('Oh, that\'s a beautiful button!')
+                    )
+                    .setButtonAccessory((button) => 
+                        button
+                            .setCustomId('testClick')
+                            .setLabel('Click Me !')
+                            .setStyle(ButtonStyle.Success)
+                    )
+            )
+
+        // await interaction.reply();
+        await interaction.reply({
+                components: [container],
+                flags: MessageFlags.IsComponentsV2
+        })
+    },
+    buttons: [
+        {id: 'testClick', handle: (interaction : ButtonInteraction) => {
+            interaction.reply({content: 'Ho !', flags: [MessageFlags.Ephemeral]})
+        }}
+    ]
 }

src/index.ts

@@ -1,4 +1,4 @@
-import { Client, Collection, Events, GatewayIntentBits, MessageFlags } from "discord.js";
+import { ButtonInteraction, ChatInputCommandInteraction, Client, Collection, Events, GatewayIntentBits, MessageFlags, SlashCommandBuilder } from "discord.js";
 import { configDotenv } from "dotenv";
 import path from "path";
 import fs from "fs";
@@ -24,8 +24,7 @@ const client = new Client({
     ]
 });
 
-// @ts-expect-error
+const commands = new Collection<string, {data: SlashCommandBuilder, execute: (interaction: ChatInputCommandInteraction) => void, buttons?: {id: string, handle: (interaction : ButtonInteraction) => void}[]}>();
-client.commands = new Collection();
 
 const foldersPath = path.join(__dirname, 'commands');
 const commandFolders = fs.readdirSync(foldersPath);
@@ -38,8 +37,7 @@ for (const folder of commandFolders) {
 		const command = require(filePath);
         const commandModule = command.default || command;
 		if ('data' in commandModule && 'execute' in commandModule) {
-            // @ts-expect-error
+			commands.set(commandModule.data.name, commandModule);
-			client.commands.set(commandModule.data.name, commandModule);
 		} else {
 			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
 		}
@@ -47,10 +45,26 @@ for (const folder of commandFolders) {
 }
 
 client.on(Events.InteractionCreate, async interaction => {
+
+	if(interaction.isButton()) {
+		
+		const id = interaction.customId;
+
+		commands.forEach((value, key) => {
+			if(value.buttons) {
+				const button = value.buttons.filter((b) => b.id == id);
+				if(button.length == 1) {
+					button[0]?.handle(interaction);
+				}
+			}
+		});
+
+		return;
+	}
+
 	if (!interaction.isChatInputCommand()) return;
 
-    // @ts-expect-error
+	const command = commands.get(interaction.commandName);
-	const command = interaction.client.commands.get(interaction.commandName);
 
 	if (!command) {
 		console.error(`No command matching ${interaction.commandName} was found.`);