feat: general component improvements (#5787)

Author: monbrey

src/client/websocket/handlers/INTERACTION_CREATE.js

@@ -1,21 +1,27 @@
 'use strict';
 
-const { Events, InteractionTypes } = require('../../../util/Constants');
+const { Events, InteractionTypes, MessageComponentTypes } = require('../../../util/Constants');
 const Structures = require('../../../util/Structures');
 
 module.exports = (client, { d: data }) => {
-  let interaction;
+  let InteractionType;
   switch (data.type) {
-    case InteractionTypes.APPLICATION_COMMAND: {
-      const CommandInteraction = Structures.get('CommandInteraction');
-      interaction = new CommandInteraction(client, data);
+    case InteractionTypes.APPLICATION_COMMAND:
+      InteractionType = Structures.get('CommandInteraction');
       break;
-    }
-    case InteractionTypes.MESSAGE_COMPONENT: {
-      const MessageComponentInteraction = Structures.get('MessageComponentInteraction');
-      interaction = new MessageComponentInteraction(client, data);
+    case InteractionTypes.MESSAGE_COMPONENT:
+      switch (data.data.component_type) {
+        case MessageComponentTypes.BUTTON:
+          InteractionType = Structures.get('ButtonInteraction');
+          break;
+        default:
+          client.emit(
+            Events.DEBUG,
+            `[INTERACTION] Received component interaction with unknown type: ${data.data.component_type}`,
+          );
+          return;
+      }
       break;
-    }
     default:
       client.emit(Events.DEBUG, `[INTERACTION] Received interaction with unknown type: ${data.type}`);
       return;
@@ -26,5 +32,5 @@ module.exports = (client, { d: data }) => {
    * @event Client#interaction
    * @param {Interaction} interaction The interaction which was created
    */
-  client.emit(Events.INTERACTION_CREATE, interaction);
+  client.emit(Events.INTERACTION_CREATE, new InteractionType(client, data));
 };

src/index.js

@@ -70,6 +70,7 @@ module.exports = {
   BaseGuildEmoji: require('./structures/BaseGuildEmoji'),
   BaseGuildVoiceChannel: require('./structures/BaseGuildVoiceChannel'),
   BaseMessageComponent: require('./structures/BaseMessageComponent'),
+  ButtonInteraction: require('./structures/ButtonInteraction'),
   CategoryChannel: require('./structures/CategoryChannel'),
   Channel: require('./structures/Channel'),
   ClientApplication: require('./structures/ClientApplication'),

src/structures/APIMessage.js

@@ -3,6 +3,7 @@
 const BaseMessageComponent = require('./BaseMessageComponent');
 const MessageEmbed = require('./MessageEmbed');
 const { RangeError } = require('../errors');
+const { MessageComponentTypes } = require('../util/Constants');
 const DataResolver = require('../util/DataResolver');
 const MessageFlags = require('../util/MessageFlags');
 const Util = require('../util/Util');
@@ -152,7 +153,11 @@ class APIMessage {
     }
     const embeds = embedLikes.map(e => new MessageEmbed(e).toJSON());
 
-    const components = this.options.components?.map(c => BaseMessageComponent.create(c).toJSON());
+    const components = this.options.components?.map(c =>
+      BaseMessageComponent.create(
+        Array.isArray(c) ? { type: MessageComponentTypes.ACTION_ROW, components: c } : c,
+      ).toJSON(),
+    );
 
     let username;
     let avatarURL;

src/structures/BaseMessageComponent.js

@@ -22,13 +22,15 @@ class BaseMessageComponent {
    */
 
   /**
-   * Components that can be sent in a message
+   * Components that can be sent in a message. This can be:
+   * * MessageActionRow
+   * * MessageButton
    * @typedef {MessageActionRow|MessageButton} MessageComponent
    */
 
   /**
    * Data that can be resolved to a MessageComponentType. This can be:
-   * * {@link MessageComponentType}
+   * * MessageComponentType
    * * string
    * * number
    * @typedef {string|number|MessageComponentType} MessageComponentTypeResolvable

src/structures/ButtonInteraction.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const MessageComponentInteraction = require('./MessageComponentInteraction');
+
+/**
+ * Represents a button interaction.
+ * @exxtends {MessageComponentInteraction}
+ */
+class ButtonInteraction extends MessageComponentInteraction {}
+
+module.exports = ButtonInteraction;

src/structures/Emoji.js

@@ -3,6 +3,14 @@
 const Base = require('./Base');
 const SnowflakeUtil = require('../util/SnowflakeUtil');
 
+/**
+ * Represents raw emoji data from the API
+ * @typedef {Object} RawEmoji
+ * @property {?Snowflake} id ID of this emoji
+ * @property {?string} name Name of this emoji
+ * @property {?boolean} animated Whether this emoji is animated
+ */
+
 /**
  * Represents an emoji, see {@link GuildEmoji} and {@link ReactionEmoji}.
  * @extends {Base}

src/structures/Interaction.js

@@ -120,6 +120,14 @@ class Interaction extends Base {
   isMessageComponent() {
     return InteractionTypes[this.type] === InteractionTypes.MESSAGE_COMPONENT;
   }
+
+  /**
+   * Indicates whether this interaction is a button interaction.
+   * @returns {boolean}
+   */
+  isButton() {
+    return InteractionTypes[this.type] === InteractionTypes.MESSAGE_COMPONENT && this.componentType === 'BUTTON';
+  }
 }
 
 module.exports = Interaction;

src/structures/Message.js

@@ -538,8 +538,8 @@ class Message extends Base {
    * @property {MessageAttachment[]} [attachments] An array of attachments to keep,
    * all attachments will be kept if omitted
    * @property {FileOptions[]|BufferResolvable[]|MessageAttachment[]} [files] Files to add to the message
-   * @property {MessageActionRow[]} [components] Action rows containing interactive components for the message
-   * (buttons, select menus)
+   * @property {MessageActionRow[]|MessageActionRowOptions[]|MessageActionRowComponentResolvable[][]} [components]
+   * Action rows containing interactive components for the message (buttons, select menus)
    */
 
   /**

src/structures/MessageActionRow.js

@@ -4,24 +4,24 @@ const BaseMessageComponent = require('./BaseMessageComponent');
 const { MessageComponentTypes } = require('../util/Constants');
 
 /**
- * Represents an ActionRow containing message components.
+ * Represents an action row containing message components.
  * @extends {BaseMessageComponent}
  */
 class MessageActionRow extends BaseMessageComponent {
   /**
-   * Components that can be placed in a MessageActionRow
+   * Components that can be placed in an action row
    * * MessageButton
    * @typedef {MessageButton} MessageActionRowComponent
    */
 
   /**
-   * Options for components that can be placed in a MessageActionRow
+   * Options for components that can be placed in an action row
    * * MessageButtonOptions
    * @typedef {MessageButtonOptions} MessageActionRowComponentOptions
    */
 
   /**
-   * Data that can be resolved into a components that can be placed in a MessageActionRow
+   * Data that can be resolved into a components that can be placed in an action row
    * * MessageActionRowComponent
    * * MessageActionRowComponentOptions
    * @typedef {MessageActionRowComponent|MessageActionRowComponentOptions} MessageActionRowComponentResolvable
@@ -30,7 +30,7 @@ class MessageActionRow extends BaseMessageComponent {
   /**
    * @typedef {BaseMessageComponentOptions} MessageActionRowOptions
    * @property {MessageActionRowComponentResolvable[]} [components]
-   * The components to place in this ActionRow
+   * The components to place in this action row
    */
 
   /**
@@ -40,14 +40,14 @@ class MessageActionRow extends BaseMessageComponent {
     super({ type: 'ACTION_ROW' });
 
     /**
-     * The components in this MessageActionRow
+     * The components in this action row
      * @type {MessageActionRowComponent[]}
      */
     this.components = (data.components ?? []).map(c => BaseMessageComponent.create(c, null, true));
   }
 
   /**
-   * Adds components to the row.
+   * Adds components to the action row.
    * @param {...MessageActionRowComponentResolvable[]} components The components to add
    * @returns {MessageActionRow}
    */

src/structures/MessageButton.js

@@ -6,7 +6,7 @@ const { MessageButtonStyles, MessageComponentTypes } = require('../util/Constant
 const Util = require('../util/Util');
 
 /**
- * Represents a Button message component.
+ * Represents a button message component.
  * @extends {BaseMessageComponent}
  */
 class MessageButton extends BaseMessageComponent {
@@ -15,7 +15,7 @@ class MessageButton extends BaseMessageComponent {
    * @property {string} [label] The text to be displayed on this button
    * @property {string} [customID] A unique string to be sent in the interaction when clicked
    * @property {MessageButtonStyleResolvable} [style] The style of this button
-   * @property {Emoji} [emoji] The emoji to be displayed to the left of the text
+   * @property {EmojiIdentifierResolvable} [emoji] The emoji to be displayed to the left of the text
    * @property {string} [url] Optional URL for link-style buttons
    * @property {boolean} [disabled=false] Disables the button to prevent interactions
    */
@@ -50,9 +50,9 @@ class MessageButton extends BaseMessageComponent {
 
     /**
      * Emoji for this button
-     * @type {?Emoji|string}
+     * @type {?RawEmoji}
      */
-    this.emoji = data.emoji ?? null;
+    this.emoji = data.emoji ? Util.resolvePartialEmoji(data.emoji) : null;
 
     /**
      * The URL this button links to, if it is a Link style button
@@ -93,8 +93,7 @@ class MessageButton extends BaseMessageComponent {
    * @returns {MessageButton}
    */
   setEmoji(emoji) {
-    if (/^\d{17,19}$/.test(emoji)) this.emoji = { id: emoji };
-    else this.emoji = Util.parseEmoji(`${emoji}`);
+    this.emoji = Util.resolvePartialEmoji(emoji);
     return this;
   }
 
@@ -119,7 +118,8 @@ class MessageButton extends BaseMessageComponent {
   }
 
   /**
-   * Sets the URL of this button. MessageButton#style should be LINK
+   * Sets the URL of this button.
+   * <note>MessageButton#style must be LINK when setting a URL</note>
    * @param {string} url The URL of this button
    * @returns {MessageButton}
    */
@@ -146,14 +146,14 @@ class MessageButton extends BaseMessageComponent {
 
   /**
    * Data that can be resolved to a MessageButtonStyle. This can be
-   * * {@link MessageButtonStyle}
+   * * MessageButtonStyle
    * * string
    * * number
    * @typedef {string|number|MessageButtonStyle} MessageButtonStyleResolvable
    */
 
   /**
-   * Resolves the style of a MessageButton
+   * Resolves the style of a button
    * @param {MessageButtonStyleResolvable} style The style to resolve
    * @returns {MessageButtonStyle}
    * @private