Sapphire - Imagine a framework•3mo ago

Cannot find how I can use buttons

I want to create a message with some buttons for people to click on and recieve some messages something like what it is in the attached image. What I cannot figure out is how do I use it. I tried to read the documentation and I'm pretty sure im missing a big gotcha https://sapphirejs.dev/docs/Guide/interaction-handlers/buttons

Sapphire Framework

Buttons | Sapphire

Buttons are components that are clickable. You will recieve an interaction for every click of a button! Here's an

17 Replies

Devvvvvv•3mo ago

I understand that it will be a component of a message reply, I just dont get how the syntax goes, the documentation is also doesnt show it

Favna•3mo ago

buttons are part of interaction handlers: https://sapphirejs.dev/docs/Guide/interaction-handlers/what-are-they

Sapphire Framework

What are they? | Sapphire

These are interaction handlers! A simple class you can extend to handle almost all the interactions you may receive in

Devvvvvv•3mo ago

im still struggling to figure out how I can get a button to be with a message as a reply 😭 😭 😭 😭 😭 😭 😭

Favna•3mo ago

maybe check out some of the other open source bots

Spinel•3mo ago

Discord Bots using @sapphire/framework v5.x - Gemboard ᴱ ᴰ - Skyra ᴱ ᴬ ᴰ - Dragonite ᴱ ᴰ - Archangel ᴱ ᴰ - Official Bot Examples ᴱ ᴰ ᴶˢ - KBot ᴱ ᴬ ᴰ - Perpetual Mechanical Array ᴰ v4.x - Radon ᴱ ᴬ - Sapphire Application Commands Examples ᴱ - Zeyr ᴰ ᴬ - Birthdayy ᴰ - RTByte ᴱ ᴬ Legend for the identifiers ᴱ: Uses ESM (if not specified then uses CJS) ᴬ: Advanced bot (if not specified it is a simple bot, or not graded) ᴰ: Uses Docker in production ᴶˢ: Written in JavaScript. If not specified then the bot is written in TypeScript.

Devvvvvv•3mo ago

oo free freference they are all typescript 😭 and I still dont get how the interaction handler works for this situation

Favna•3mo ago

typescript just just javascript with types. When you remove the : type syntax from everything it's just javascript.

Favna•3mo ago

1. Create a button component through the discordjs code for that 2. assign a custom id 3. add an interaction handler file 4. in the parse method check the custom id, return this.none() if it doesnt match and this.some() if it does 5. Create a the run method, now ensured to be a click of the desired button 6. Process the interaction Steps 1, 2, and 6 are all pure DiscordJS. Refer to https://discordjs.guide and https://discord.js.org for their guide and documentation respectively. This is also not something we can help with because it all comes down to what you want the button to do.

discord.js Guide

Imagine a guide... that explores the many possibilities for your discord.js bot.

discord.js

discord.js is a powerful Node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.

Devvvvvv•3mo ago

okay this is so helpful i will go through this now I just wanted a reply to one of my commands to have a button and for starters the button on click can get the bot to say hi

Favna•3mo ago

you reacted with sad here but let me give you an example and you'll start to understand it's really not that hard to mentally convert it. You'll be much much better of if you do learn it. typescript:

function sum(numberOne: number, numberTwo: number): number {
  return a + b;
}

function sum(numberOne: number, numberTwo: number): number {
  return a + b;
}

javascript:

function sum(numberOne, numberTwo) {
  return a + b;
}

function sum(numberOne, numberTwo) {
  return a + b;
}

(or preferebly javascript with doc comments so it's still has type information in your editor):

/**
 * @param {number} numerbOne
 * @param {number} numberTwo
 * @returns {number}
 */
function sum(numberOne, numberTwo) {
  return a + b;
}

/**
 * @param {number} numerbOne
 * @param {number} numberTwo
 * @returns {number}
 */
function sum(numberOne, numberTwo) {
  return a + b;
}

Devvvvvv•3mo ago

oh no 😭 is like the laughing in pain kind of thing ive worked with js a lot before so ive checked out ts but its just taht im super new to discord bot and this framework is very new to me too reminds me of type declaration in pyton even though it diesnt affect 😭 i dont get it :c isnt there a simpler dirty hack where i can just write a button inside the reply?? something like this

const { Command } = require('@sapphire/framework');

class PingCommand extends Command {
  constructor(context, options) {
    super(context, {
      ...options,
      name: 'ping',
      aliases: ['pong'],
      description: 'ping pong'
    });
  }

  async messageRun(message) {
    await message.channel.send('Ping?', components: [
          new MessageActionRow().addComponents(
            new MessageButton()......... whatever
          );
      ]);
  }
}
module.exports = {
  PingCommand
};

const { Command } = require('@sapphire/framework');

class PingCommand extends Command {
  constructor(context, options) {
    super(context, {
      ...options,
      name: 'ping',
      aliases: ['pong'],
      description: 'ping pong'
    });
  }

  async messageRun(message) {
    await message.channel.send('Ping?', components: [
          new MessageActionRow().addComponents(
            new MessageButton()......... whatever
          );
      ]);
  }
}
module.exports = {
  PingCommand
};

secre•3mo ago

You can use component collector if you wanna use classic approach https://discordjs.guide/popular-topics/collectors.html#interaction-collectors

discord.js Guide

Imagine a guide... that explores the many possibilities for your discord.js bot.

secre•3mo ago

What exactly you can't figure out with sapphire approach with interaction-handlers directory?

Devvvvvv•3mo ago

i figured this out a while back so thanks 😀 is there any way for my bot to use a carlbot or a dyno bot command and not get ignored? like the carlbot/dynobot should react to prefix commands from my bot cant figure that out

secre•3mo ago

i dont think that this is possible

Gaming

Programming

Cannot find how I can use buttons