Expose components

index.d.ts

@@ -53,6 +53,7 @@ declare namespace Eris {
   // Message
   type AdvancedMessageContent = {
     allowedMentions?: AllowedMentions;
+    components?: ActionRow[];
     content?: string;
     embed?: EmbedOptions;
     flags?: number;
@@ -61,6 +62,9 @@ declare namespace Eris {
     messageReferenceID?: string;
     tts?: boolean;
   };
+  type ActionRowComponents = Button | Dropdown;
+  type Button = InteractionButton | URLButton;
+  type Component = ActionRow | ActionRowComponents;
   type ImageFormat = "jpg" | "jpeg" | "png" | "gif" | "webp";
   type MessageContent = string | AdvancedMessageContent;
   type MFALevel = 0 | 1;
@@ -80,7 +84,7 @@ declare namespace Eris {
   type ConverterCommand = "./ffmpeg" | "./avconv" | "ffmpeg" | "avconv";
 
   // Webhook
-  type MessageWebhookContent = Pick<WebhookPayload, "content" | "embeds" | "file" | "allowedMentions">;
+  type MessageWebhookContent = Pick<WebhookPayload, "content" | "embeds" | "file" | "allowedMentions" | "components">;
 
   // INTERFACES
   // Internals
@@ -814,6 +818,10 @@ declare namespace Eris {
   }
 
   // Message
+  interface ActionRow {
+    components: ActionRowComponents[];
+    type: 1;
+  }
   interface ActiveMessages {
     args: string[];
     command: Command;
@@ -835,12 +843,37 @@ declare namespace Eris {
     url: string;
     width?: number;
   }
+  interface ButtonBase {
+    disabled?: boolean;
+    emoji?: Partial<PartialEmoji>;
+    label?: string;
+    type: 2;
+  }
+  interface Dropdown {
+    custom_id: string;
+    max_values?: number;
+    min_values?: number;
+    options: DropdownOptions[];
+    placeholder?: string;
+    type: 3;
+  }
+  interface DropdownOptions {
+    default?: boolean;
+    description?: string;
+    emoji?: Partial<PartialEmoji>;
+    label: string;
+    value: number | string;
+  }
   interface GetMessageReactionOptions {
     after?: string;
     /** @deprecated */
     before?: string;
     limit?: number;
   }
+  interface InteractionButton extends ButtonBase {
+    custom_id: string;
+    style: 1 | 2 | 3 | 4;
+  }
   interface MessageActivity {
     party_id?: string;
     type: Constants["MessageActivityTypes"][keyof Constants["MessageActivityTypes"]];
@@ -884,6 +917,10 @@ declare namespace Eris {
     pack_id: string;
     tags?: string;
   }
+  interface URLButton extends ButtonBase {
+    style: 5;
+    url: string;
+  }
 
   // Presence
   interface Activity extends ActivityPartial<ActivityType> {
@@ -1011,6 +1048,7 @@ declare namespace Eris {
     allowedMentions?: AllowedMentions;
     auth?: boolean;
     avatarURL?: string;
+    components?: ActionRow[];
     content?: string;
     embeds?: EmbedOptions[];
     file?: MessageFile | MessageFile[];
@@ -2229,6 +2267,7 @@ declare namespace Eris {
     /** @deprecated */
     cleanContent: string;
     command?: Command;
+    components?: ActionRow[];
     content: string;
     createdAt: number;
     editedTimestamp?: number;

lib/Client.js

@@ -579,6 +579,23 @@ class Client extends EventEmitter {
     * @arg {Boolean | Array<String>} [content.allowedMentions.roles] Whether or not to allow all role mentions, or an array of specific role mentions to allow.
     * @arg {Boolean | Array<String>} [content.allowedMentions.users] Whether or not to allow all user mentions, or an array of specific user mentions to allow.
     * @arg {Boolean} [content.allowedMentions.repliedUser] Whether or not to mention the author of the message being replied to.
+    * @arg {Array<Object>} [content.components] An array of component objects
+    * @arg {String} [content.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [content.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [content.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [content.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [content.components[].max_values] TODO Pending documentation
+    * @arg {Number} [content.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [content.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [content.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [content.components[].options[].description] The description for this option
+    * @arg {Object} [content.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} content.components[].options[].label The label for this option
+    * @arg {Number | String} content.components[].options[].value The value for this option
+    * @arg {String} [content.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [content.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} content.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [content.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} content.content A content string
     * @arg {Object} [content.embed] An embed object. See [the official Discord API documentation entry](https://discord.com/developers/docs/resources/channel#embed-object) for object structure
     * @arg {Object} [content.messageReference] The message reference, used when replying to messages
@@ -1221,6 +1238,23 @@ class Client extends EventEmitter {
     * @arg {Boolean} [content.allowedMentions.everyone] Whether or not to allow @everyone/@here.
     * @arg {Boolean | Array<String>} [content.allowedMentions.roles] Whether or not to allow all role mentions, or an array of specific role mentions to allow.
     * @arg {Boolean | Array<String>} [content.allowedMentions.users] Whether or not to allow all user mentions, or an array of specific user mentions to allow.
+    * @arg {Array<Object>} [content.components] An array of component objects
+    * @arg {String} [content.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [content.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [content.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [content.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [content.components[].max_values] TODO Pending documentation
+    * @arg {Number} [content.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [content.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [content.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [content.components[].options[].description] The description for this option
+    * @arg {Object} [content.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} content.components[].options[].label The label for this option
+    * @arg {Number | String} content.components[].options[].value The value for this option
+    * @arg {String} [content.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [content.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} content.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [content.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} content.content A content string
     * @arg {Object} [content.embed] An embed object. See [the official Discord API documentation entry](https://discord.com/developers/docs/resources/channel#embed-object) for object structure
     * @arg {Number} [content.flags] A number representing the flags to apply to the message. See [the official Discord API documentation entry](https://discord.com/developers/docs/resources/channel#message-object-message-flags) for flags reference
@@ -1468,6 +1502,23 @@ class Client extends EventEmitter {
     * @arg {Boolean | Array<String>} [options.allowedMentions.roles] Whether or not to allow all role mentions, or an array of specific role mentions to allow.
     * @arg {Boolean | Array<String>} [options.allowedMentions.users] Whether or not to allow all user mentions, or an array of specific user mentions to allow.
     * @arg {Boolean} [options.allowedMentions.repliedUser] Whether or not to mention the author of the message being replied to.
+    * @arg {Array<Object>} [options.components] An array of component objects
+    * @arg {String} [options.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [options.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [options.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [options.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [options.components[].max_values] TODO Pending documentation
+    * @arg {Number} [options.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [options.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [options.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [options.components[].options[].description] The description for this option
+    * @arg {Object} [options.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} options.components[].options[].label The label for this option
+    * @arg {Number | String} options.components[].options[].value The value for this option
+    * @arg {String} [options.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [options.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} options.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [options.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} [options.content=""] A content string
     * @arg {Array<Object>} [options.embeds] An array of Discord embeds
     * @arg {Object | Array<Object>} [options.file] A file object (or an Array of them)
@@ -1530,6 +1581,23 @@ class Client extends EventEmitter {
     * @arg {Boolean | Array<String>} [options.allowedMentions.users] Whether or not to allow all user mentions, or an array of specific user mentions to allow.
     * @arg {Boolean} [options.auth=false] Whether or not to authenticate with the bot token.
     * @arg {String} [options.avatarURL] A URL for a custom avatar, defaults to webhook default avatar if not specified
+    * @arg {Array<Object>} [options.components] An array of component objects
+    * @arg {String} [options.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [options.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [options.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [options.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [options.components[].max_values] TODO Pending documentation
+    * @arg {Number} [options.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [options.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [options.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [options.components[].options[].description] The description for this option
+    * @arg {Object} [options.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} options.components[].options[].label The label for this option
+    * @arg {Number | String} options.components[].options[].value The value for this option
+    * @arg {String} [options.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [options.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} options.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [options.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} [options.content=""] A content string
     * @arg {Array<Object>} [options.embeds] An array of Discord embeds
     * @arg {Object | Array<Object>} [options.file] A file object (or an Array of them)
@@ -1550,7 +1618,8 @@ class Client extends EventEmitter {
             username: options.username,
             avatar_url: options.avatarURL,
             tts: options.tts,
-            allowed_mentions: this._formatAllowedMentions(options.allowedMentions)
+            allowed_mentions: this._formatAllowedMentions(options.allowedMentions),
+            components: options.components
         }, options.file).then((response) => options.wait ? new Message(response, this) : undefined);
     }
 

lib/structures/Message.js

@@ -16,6 +16,7 @@ const User = require("./User");
 * @prop {Array<String>} channelMentions Array of mentions channels' ids
 * @prop {String?} cleanContent Message content with mentions replaced by names. Mentions are currently escaped, but this behavior is [DEPRECATED] and will be removed soon. Use allowed mentions, the official way of avoiding unintended mentions, when creating messages.
 * @prop {Command?} command The Command used in the Message, if any (CommandClient only)
+* @prop {Array<Object>} components An array of component objects
 * @prop {String} content Message content
 * @prop {Number} createdAt Timestamp of message creation
 * @prop {Number?} editedTimestamp Timestamp of latest message edit
@@ -291,6 +292,9 @@ class Message extends Base {
         if(data.stickers !== undefined) {
             this.stickers = data.stickers;
         }
+        if(data.components !== undefined) {
+            this.components = data.components;
+        }
     }
 
     get channelMentions() {
@@ -389,6 +393,23 @@ class Message extends Base {
     /**
     * Edit the message
     * @arg {String | Array | Object} content A string, array of strings, or object. If an object is passed:
+    * @arg {Array<Object>} [options.components] An array of component objects
+    * @arg {String} [options.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [options.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [options.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [options.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [options.components[].max_values] TODO Pending documentation
+    * @arg {Number} [options.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [options.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [options.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [options.components[].options[].description] The description for this option
+    * @arg {Object} [options.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} options.components[].options[].label The label for this option
+    * @arg {Number | String} options.components[].options[].value The value for this option
+    * @arg {String} [options.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [options.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} options.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [options.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} content.content A content string
     * @arg {Boolean} [content.disableEveryone] Whether to filter @everyone/@here or not (overrides default)
     * @arg {Object} [content.embed] An embed object. See [the official Discord API documentation entry](https://discord.com/developers/docs/resources/channel#embed-object) for object structure
@@ -412,6 +433,23 @@ class Message extends Base {
     * @arg {Boolean | Array<String>} [options.allowedMentions.roles] Whether or not to allow all role mentions, or an array of specific role mentions to allow.
     * @arg {Boolean | Array<String>} [options.allowedMentions.users] Whether or not to allow all user mentions, or an array of specific user mentions to allow.
     * @arg {Boolean} [options.allowedMentions.repliedUser] Whether or not to mention the author of the message being replied to.
+    * @arg {Array<Object>} [options.components] An array of component objects
+    * @arg {String} [options.components[].custom_id] The ID of the component (type 2 style 0-4 and type 3 only)
+    * @arg {Boolean} [options.components[].disabled] Whether the component is disabled (type 2 only)
+    * @arg {Object} [options.components[].emoji] The emoji to be displayed in the component (type 2)
+    * @arg {String} [options.components[].label] The label to be displayed in the component (type 2)
+    * @arg {Number} [options.components[].max_values] TODO Pending documentation
+    * @arg {Number} [options.components[].min_values] TODO Pending documentation
+    * @arg {Array<Object>} [options.components[].options] The options for this component (type 3 only)
+    * @arg {Boolean} [options.components[].options[].default] Whether this option should be the default value selected
+    * @arg {String} [options.components[].options[].description] The description for this option
+    * @arg {Object} [options.components[].options[].emoji] The emoji to be displayed in this option
+    * @arg {String} options.components[].options[].label The label for this option
+    * @arg {Number | String} options.components[].options[].value The value for this option
+    * @arg {String} [options.components[].placeholder] The placeholder text for the component when no option is selected (type 3 only)
+    * @arg {Number} [options.components[].style] The style of the component (type 2 only) - If 0-4, `custom_id` is required; if 5, `url` is required
+    * @arg {Number} options.components[].type The type of component - If 1, it is a collection and a `components` array (nested) is required; if 2, it is a button; if 3, it is a dropdown
+    * @arg {String} [options.components[].url] The URL that the component should open for users (type 2 style 5 only)
     * @arg {String} [options.content=""] A content string
     * @arg {Array<Object>} [options.embeds] An array of Discord embeds
     * @arg {Object | Array<Object>} [options.file] A file object (or an Array of them)