Select menus

A select menu is declared with select(), in any file of src/, and exported. Declare its options, and run receives what was picked, typed from them.

src/components/color.ts

import { select } from 'chapterjs';

export default select({
  placeholder: 'Pick a color',
  options: { Red: 'red', Blue: 'blue', Green: 'green' },
  async run({ interaction, value }) {
    await interaction.update({ content: `You picked ${value}.`, components: [] });
  },
});

src/commands/color.ts

import { command } from 'chapterjs';
import color from '../components/color';

export default command({
  name: 'color',
  description: 'Asks for your favorite color',
  async run({ interaction }) {
    await interaction.reply({ content: 'Which one?', components: [color] });
  },
});

That is all: value is 'red' | 'blue' | 'green', and values is the list of everything picked. A menu takes a whole row by itself.

Everything a select menu declares is in the reference. What a menu shares with a button (data, who, where, ephemeral, the answers) is explained in Buttons.

Options

options is written in one of three ways:

Write	When
`['Pizza', 'Pasta']`	What is shown is what your code receives
`{ 'Pizza 🍕': 'pizza' }`	Keys are shown, values are what your code receives
`[{ label: 'Pizza', value: 'pizza', description: 'With cheese', emoji: '🍕' }]`	With a description, an emoji, or `default: true`

Up to 25 options. min and max say how many can be picked (1 by default): with max: 3, values holds up to three.

src/components/toppings.ts

import { select } from 'chapterjs';

export default select({
  placeholder: 'Up to three',
  min: 0,
  max: 3,
  options: [
    { label: 'Cheese', value: 'cheese', emoji: '🧀' },
    { label: 'Mushrooms', value: 'mushrooms', description: 'Fresh ones' },
    { label: 'Olives', value: 'olives' },
  ],
  async run({ interaction, values }) {
    await interaction.update(values.length === 0 ? 'Plain, then.' : `With ${values.join(', ')}.`);
  },
});

Users, roles and channels

With a type, Discord fills the menu with the server: 'user', 'role', 'mentionable' (users and roles) or 'channel'. values is then a list of User, Role, User | Role or Channel, and channelTypes narrows what channels are listed.

src/components/helpers.ts

import { select } from 'chapterjs';

export default select({
  type: 'role',
  placeholder: 'Who helps?',
  max: 5,
  async run({ interaction, values }) {
    await interaction.update({
      content: `Helpers: ${values.map(role => role.name).join(', ')}`,
      components: [],
    });
  },
});

src/components/logs.ts

import { ChannelType, select } from 'chapterjs';

export default select({
  type: 'channel',
  channelTypes: [ChannelType.GuildText],
  async run({ interaction, value }) {
    await interaction.update({ content: `Logs go to ${value}.`, components: [] });
  },
});

Where you put the menu in a message, pass what to show: placeholder, disabled, and defaults, what is picked when the menu appears (the values of the options, or the ids of the users, roles or channels):

src/commands/setup.ts

import { command } from 'chapterjs';
import color from '../components/color';
import helpers from '../components/helpers';

export default command({
  name: 'setup',
  description: 'Sets the bot up',
  async run({ interaction, guild }) {
    await interaction.reply({
      content: 'Your settings',
      components: [
        color({ defaults: ['blue'] }),
        helpers({ defaults: [guild.everyoneRole], placeholder: 'Pick the helpers' }),
      ],
    });
  },
});

A menu with data takes it first: menu({ page: 2 }, { defaults: ['blue'] }).

Forms

Ask for text and choices in a form that opens in Discord.

Embeds and layout

Reuse an embed, and build messages out of texts, sections and containers.

Get started

Commands

Messages

Events

Voice

Components

Tasks

Presence

Storage

Translations

Memory

Testing

Run your bot

Roadmap

Options

Users, roles and channels

What a menu is shown with

Forms

Embeds and layout