### Complete ComponentsV2 Configuration Example

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/configuration.md

Demonstrates a comprehensive setup for ComponentsV2, including minimal and extended configurations. The extended example shows how to enable ephemeral messages and fetch the reply for further interaction handling.

```javascript
const {
    TextDisplayBuilder,
    SeparatorBuilder,
    MessageFlags
} = require('discord.js');

// Minimal configuration
interaction.reply({
    components: [
        new TextDisplayBuilder().setContent('Hello World')
    ],
    flags: [MessageFlags.IsComponentsV2]
});

// Extended configuration with message retrieval
const message = await interaction.reply({
    components: [
        new TextDisplayBuilder().setContent('Hello World')
    ],
    flags: [MessageFlags.IsComponentsV2],
    ephemeral: true,
    fetchReply: true
});

// Collect interactions on the message
const collector = message.createMessageComponentCollector({ time: 15000 });

collector.on('collect', interaction => {
    console.log('Component interaction received');
});
```

--------------------------------

### Example: Creating and Replying with an Image Gallery

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaGalleryBuilder.md

Demonstrates how to create an image gallery with multiple attachments, including descriptions and spoiler tags, and then reply with it using interaction.reply. Ensure discord.js is installed and configured.

```javascript
const {
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    MessageFlags
} = require('discord.js');

const imageGallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https_url_1.png')
            .setDescription('This is the description for the first image.'),
        new MediaAttachmentBuilder('https_url_2.png')
            .setDescription('This is the second image.')
            .setSpoiler(true)
    );

interaction.reply({
    components: [imageGallery],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Minimal Discord.js v14 ComponentsV2 Example

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/README.md

This snippet demonstrates the basic setup for using ComponentsV2 with discord.js v14. It shows how to create a client, handle chat input commands, and reply with a TextDisplayBuilder component. Ensure you have the necessary intents configured and your bot token is available as an environment variable.

```javascript
const { Client, GatewayIntentBits, MessageFlags, TextDisplayBuilder } = require('discord.js');

const client = new Client({ intents: [GatewayIntentBits.DirectMessages] });

client.on('interactionCreate', async interaction => {
    if (!interaction.isChatInputCommand()) return;
    
    await interaction.reply({
        components: [
            new TextDisplayBuilder().setContent('# Hello\nWelcome to ComponentsV2!')
        ],
        flags: [MessageFlags.IsComponentsV2]
    });
});

client.login(process.env.TOKEN);
```

--------------------------------

### Example: Create User Info Section

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/SectionBuilder.md

Demonstrates creating a SectionBuilder with a thumbnail, text content, and a button within an ActionRow. Interactive elements must be within an ActionRowBuilder.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
    MessageFlags
} = require('discord.js');

const userInfoSection = new SectionBuilder()
    .setThumbnail('https://cdn.discordapp.com/avatars/USER_ID/AVATAR_ID.png')
    .addComponents(
        new TextDisplayBuilder()
            .setContent('### User Profile\n**Username:** Test User\n**Role:** Member'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder()
                .setCustomId('user_profile_website')
                .setLabel('Website')
                .setStyle(ButtonStyle.Link)
                .setURL('https://discord.js.org')
        )
    );

interaction.reply({
    components: [userInfoSection],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Component Limit Constraint Example

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/rules-and-constraints.md

Demonstrates how to count all components within a message, including nested ones, to ensure the total does not exceed the limit of 40 components.

```javascript
// This counts all components:
new SectionBuilder()         // 1
    .addComponents(
        new TextDisplayBuilder(),  // 2
        new ActionRowBuilder()     // 3
            .addComponents(
                new ButtonBuilder(),    // 4
                new ButtonBuilder()     // 5
            )
    )
```

--------------------------------

### Create a Complex Product Showcase

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/examples.md

Construct a detailed product showcase using various builders like SectionBuilder, TextDisplayBuilder, ActionRowBuilder, ButtonBuilder, SeparatorBuilder, and MediaGalleryBuilder. This example demonstrates a multi-section message with a header, features, and a media gallery. MessageFlags.IsComponentsV2 must be included.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    SeparatorBuilder,
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    MessageFlags
} = require('discord.js');

await interaction.reply({
    components: [
        // Product header with thumbnail
        new SectionBuilder()
            .setThumbnail('https://example.com/product_logo.png')
            .addComponents(
                new TextDisplayBuilder().setContent(
                    '## Premium Video Hosting\n' +
                    'Stream unlimited videos at 4K resolution\n' +
                    '**$9.99/month** or **$99/year**'
                ),
                new ActionRowBuilder().addComponents(
                    new ButtonBuilder()
                        .setCustomId('purchase_monthly')
                        .setLabel('Buy Monthly')
                        .setStyle(ButtonStyle.Success),
                    new ButtonBuilder()
                        .setCustomId('purchase_yearly')
                        .setLabel('Buy Yearly')
                        .setStyle(ButtonStyle.Success)
                )
            ),
        
        new SeparatorBuilder(),
        
        // Features section
        new TextDisplayBuilder().setContent(
            '**Key Features:**\n' +
            '✓ 4K/8K Resolution\n' +
            '✓ Multi-Region CDN\n' +
            '✓ Live Streaming\n' +
            '✓ Analytics Dashboard'
        ),
        
        new SeparatorBuilder(),
        
        // Screenshots gallery
        new MediaGalleryBuilder()
            .addAttachments(
                new MediaAttachmentBuilder('https://example.com/screenshot1.png')
                    .setDescription('Player interface'),
                new MediaAttachmentBuilder('https://example.com/screenshot2.png')
                    .setDescription('Analytics dashboard'),
                new MediaAttachmentBuilder('https://example.com/screenshot3.png')
                    .setDescription('Settings panel')
            )
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Reference Implementation: Discord Bot with ComponentsV2

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

A complete example of a Discord bot using discord.js v14 to send a message with buttons and handle interactions. Requires `discord.js` and a valid bot token.

```javascript
const { Client, GatewayIntentBits } = require('discord.js');
const {
    TextDisplayBuilder,
    SectionBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    MessageFlags
} = require('discord.js');

const client = new Client({ intents: [GatewayIntentBits.DirectMessages] });

client.on('interactionCreate', async interaction => {
    if (!interaction.isChatInputCommand()) return;
    
    const section = new SectionBuilder()
        .addComponents(
            new TextDisplayBuilder().setContent('# Hello\nClick the button'),
            new ActionRowBuilder().addComponents(
                new ButtonBuilder()
                    .setCustomId('greet')
                    .setLabel('Greet')
                    .setStyle(ButtonStyle.Primary)
            )
        );
    
    const message = await interaction.reply({
        components: [section],
        flags: [MessageFlags.IsComponentsV2],
        fetchReply: true
    });
    
    const collector = message.createMessageComponentCollector({ time: 15000 });
    
    collector.on('collect', async i => {
        if (i.customId === 'greet') {
            await i.reply({ content: 'Hello!', ephemeral: true });
        }
    });
});

client.login(process.env.TOKEN);
```

--------------------------------

### Component Nesting Hierarchy Example

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/rules-and-constraints.md

Illustrates the valid hierarchical structure for nesting Discord components. Direct nesting is allowed for top-level components, while others must be wrapped within specific parent components like ActionRowBuilder.

```plaintext
Message
├── TextDisplayBuilder ✓ (direct)
├── SeparatorBuilder ✓ (direct)
├── SectionBuilder ✓ (direct)
│   ├── TextDisplayBuilder ✓
│   └── ActionRowBuilder ✓
│       ├── ButtonBuilder ✓
│       └── StringSelectMenuBuilder ✓
├── MediaGalleryBuilder ✓ (direct)
│   └── MediaAttachmentBuilder ✓
└── ActionRowBuilder ✓ (direct)
    ├── ButtonBuilder ✓
    └── StringSelectMenuBuilder ✓
```

--------------------------------

### Message Component Collector Setup

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/configuration.md

Configures a collector to listen for interactions on a message sent with ComponentsV2. It specifies a duration for the collector and includes handlers for collected interactions and collector end events.

```javascript
const message = await interaction.reply({
    components: [/* ...components... */],
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true
});

const collector = message.createMessageComponentCollector({
    time: 15000  // Collector duration in milliseconds
});

collector.on('collect', i => {
    // Handle interaction
});

collector.on('end', collected => {
    // Handle collector timeout
});
```

--------------------------------

### Content with Multiple Sections

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/patterns.md

Organize information into distinct sections using SeparatorBuilder. Useful for documentation or guides. Requires discord.js imports.

```javascript
const { TextDisplayBuilder, SeparatorBuilder, MessageFlags } = require('discord.js');

const section1 = new TextDisplayBuilder()
    .setContent('## About\nThis describes the service');

const separator = new SeparatorBuilder();

const section2 = new TextDisplayBuilder()
    .setContent('## Features\n- Feature 1\n- Feature 2\n- Feature 3');

const separator2 = new SeparatorBuilder();

const section3 = new TextDisplayBuilder()
    .setContent('## Pricing\nStarting at $9.99/month');

await interaction.reply({
    components: [section1, separator, section2, separator2, section3],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Text Content Limit Constraint Example

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/rules-and-constraints.md

Shows how to manage text content length across multiple TextDisplayBuilder components to stay within the 4000-character limit per message. Exceeding this limit will result in an error.

```javascript
const text1 = new TextDisplayBuilder().setContent('A'.repeat(2000));
const text2 = new TextDisplayBuilder().setContent('B'.repeat(2000));

await interaction.reply({
    components: [text1, text2],  // Total: 4000 characters (acceptable)
    flags: [MessageFlags.IsComponentsV2]
});

// With 2001 characters each, this would exceed the limit
const text3 = new TextDisplayBuilder().setContent('C'.repeat(2001));
const text4 = new TextDisplayBuilder().setContent('D'.repeat(2001));
// ❌ Exceeds 4000 character limit
```

--------------------------------

### Count Discord Components and Consolidate

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

This JavaScript snippet demonstrates how to count all components, including nested ones, and provides an example of consolidating components to stay under the 40-component limit per message. Use this when encountering errors due to too many components.

```javascript
// Count all components (including nested)
// SectionBuilder = 1
//   TextDisplayBuilder = 1
//   ActionRowBuilder = 1
//     ButtonBuilder = 1
// Total per section = 4 components

const components = [];
for (let i = 0; i < 15; i++) {
    components.push(
        new SectionBuilder()  // 1
            .addComponents(
                new TextDisplayBuilder(),  // 1
                new ActionRowBuilder()  // 1
                    .addComponents(
                        new ButtonBuilder()  // 1
                    )
            )
    );
}
// Total: 15 * 4 = 60 components ❌ EXCEEDS LIMIT!

// ✓ CORRECT - Consolidate components
const components = [];
for (let i = 0; i < 8; i++) {
    components.push(
        new SectionBuilder()
            .addComponents(
                new TextDisplayBuilder(),
                new ActionRowBuilder()
                    .addComponents(
                        new ButtonBuilder()
                    )
            )
    );
}
// Total: 8 * 4 = 32 components ✓
```

--------------------------------

### Check Discord.js Version

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

Verify that your discord.js version is 14.0.0 or higher, as ComponentsV2 requires this version. Update using `npm install discord.js@latest` if necessary.

```javascript
// Check version
const { version } = require('discord.js');
console.log(`discord.js version: ${version}`);
// Should be 14.0.0 or higher
```

--------------------------------

### Fetching Message for Collector

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Fetch a message to create a component collector. Set `fetchReply: true` to get the `Message` object.

```typescript
const message = await interaction.reply({
    components: [...],
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true  // Returns Message object
});

const collector = message.createMessageComponentCollector({
    time: 15000  // 15 seconds
});
```

--------------------------------

### Build MediaGallery with Attachments

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaAttachmentBuilder.md

Demonstrates how to create a MediaGalleryBuilder and add multiple MediaAttachmentBuilder instances to it. This gallery can then be used in a message reply.

```javascript
const { MediaAttachmentBuilder, MediaGalleryBuilder, MessageFlags } = require('discord.js');

// Using URL source
const urlAttachment = new MediaAttachmentBuilder('https://example.com/image1.png')
    .setDescription('Screenshot of the application')
    .setSpoiler(false);

// Using Buffer source
const bufferAttachment = new MediaAttachmentBuilder(imageBuffer)
    .setDescription('Dynamically generated image')
    .setSpoiler(true);

const gallery = new MediaGalleryBuilder()
    .addAttachments(urlAttachment, bufferAttachment);

interaction.reply({
    components: [gallery],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### TextDisplayBuilder Constructor

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/TextDisplayBuilder.md

Initializes a new instance of TextDisplayBuilder.

```APIDOC
## Constructor

```typescript
constructor()
```

Creates a new TextDisplayBuilder instance with no parameters.
```

--------------------------------

### Correcting Typo in discord.js Import

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

This example highlights the importance of exact spelling when importing discord.js builders. A typo, such as missing a character, will lead to import errors.

```javascript
// ❌ WRONG - Typo
const { TextDisplayBuilde } = require('discord.js');  // Missing 'r'

// ✓ CORRECT
const { TextDisplayBuilder } = require('discord.js');
```

--------------------------------

### MediaGalleryBuilder Constructor

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaGalleryBuilder.md

Creates a new MediaGalleryBuilder instance. This constructor does not accept any parameters.

```APIDOC
## Constructor

```typescript
constructor()
```

Creates a new MediaGalleryBuilder instance with no parameters.
```

--------------------------------

### Update an Existing Interaction Reply

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Modify an existing interaction reply, for example, to change components or content after the initial reply. This is typically used when a user interacts with a component on the original message.

```javascript
await interaction.update({
    components: [newComponent],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Create MediaGalleryBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Construct a media gallery with multiple attachments, each with a description and spoiler option.

```javascript
const gallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https://...').setDescription('Image 1').setSpoiler(false),
        new MediaAttachmentBuilder('https://...').setDescription('Image 2').setSpoiler(true)
    );

```

--------------------------------

### File Organization Structure

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/MANIFEST.md

Illustrates the directory structure for the project's documentation files.

```tree
output/
├── README.md                          # Entry point
├── MANIFEST.md                        # This file
├── index.md                           # Navigation hub
├── overview.md                        # System overview
├── quick-reference.md                 # One-page cheat sheet
├── types.md                           # Type definitions
├── configuration.md                   # Configuration options
├── rules-and-constraints.md           # Rules and limits
├── examples.md                        # Working examples
├── patterns.md                        # Design patterns
├── troubleshooting.md                 # Debugging guide
├── migration-guide.md                 # Upgrade guide
└── api-reference/
    ├── TextDisplayBuilder.md          # TextDisplayBuilder API
    ├── SeparatorBuilder.md            # SeparatorBuilder API
    ├── SectionBuilder.md              # SectionBuilder API
    ├── MediaGalleryBuilder.md         # MediaGalleryBuilder API
    ├── MediaAttachmentBuilder.md      # MediaAttachmentBuilder API
    ├── ActionRowBuilder.md            # ActionRowBuilder API
    └── EXPORTS.md                     # Complete exports reference
```

--------------------------------

### Handle Button and Select Menu Interactions

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Set up an event listener for 'interactionCreate' to handle button clicks and select menu interactions. This is the primary way to respond to user input on components.

```javascript
client.on('interactionCreate', async interaction => {
    if (interaction.isButton()) {
        // Handle button click
        await interaction.reply({ content: 'Button clicked!' });
    } else if (interaction.isStringSelectMenu()) {
        // Handle select menu interaction
        await interaction.reply({ content: 'Selection made!' });
    }
});
```

--------------------------------

### Build a Discord Product Showcase Card

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/README.md

Constructs a complex message with various components including sections, text displays, buttons, separators, and media galleries. Ensure `flags: [MessageFlags.IsComponentsV2]` is included when sending.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
    SeparatorBuilder,
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    MessageFlags
} = require('discord.js');

// 1. Product Information Section
const productInfoSection = new SectionBuilder()
    .setThumbnail('https_url_to_product_logo.png')
    .addComponents(
        new TextDisplayBuilder().setContent('## New Product: AI Assistant Pro\n*Advanced AI-powered coding assistant.*'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('buy_now').setLabel('Buy Now').setStyle(ButtonStyle.Success),
            new ButtonBuilder().setCustomId('more_info').setLabel('More Info').setStyle(ButtonStyle.Secondary)
        )
    );

// 2. Separator
const separator = new SeparatorBuilder();

// 3. Features Text
const featuresText = new TextDisplayBuilder()
    .setContent('**Key Features:**\n- Automatic Code Completion\n- Error Analysis and Correction\n- Unit Test Generation');

// 4. Media Gallery
const productGallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https_url_screenshot_1.jpg').setDescription('Code Completion Screenshot'),
        new MediaAttachmentBuilder('https_url_screenshot_2.jpg').setDescription('Error Analysis Interface')
    );

// Combine and send all components
/*
await interaction.reply({
    components: [
        productInfoSection,
        separator,
        featuresText,
        productGallery
    ],
    flags: [MessageFlags.IsComponentsV2]
});
*/
```

--------------------------------

### Creating and Using an ActionRowBuilder with Buttons

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/ActionRowBuilder.md

Demonstrates how to create buttons, add them to an ActionRowBuilder, and then use the action row within a SectionBuilder for a message reply. Requires discord.js imports.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
    MessageFlags
} = require('discord.js');

// Create buttons
const approveButton = new ButtonBuilder()
    .setCustomId('approve_request')
    .setLabel('Approve')
    .setStyle(ButtonStyle.Success);

const denyButton = new ButtonBuilder()
    .setCustomId('deny_request')
    .setLabel('Deny')
    .setStyle(ButtonStyle.Danger);

// Add to action row
const actionRow = new ActionRowBuilder()
    .addComponents(approveButton, denyButton);

// Use in section
const section = new SectionBuilder()
    .addComponents(
        new TextDisplayBuilder().setContent('Please review this request:'),
        actionRow
    );

interaction.reply({
    components: [section],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Send and Handle Interactive Buttons

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/examples.md

This snippet shows how to send a message with two buttons (Good/Bad) and collect user interactions. It updates the message content based on which button is clicked. Ensure you have discord.js v14+ installed for components.

```javascript
const { MessageFlags, TextDisplayBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');

// Send interactive message
const message = await interaction.reply({
    components: [
        new SectionBuilder()
            .addComponents(
                new TextDisplayBuilder().setContent('Rate this service:'),
                new ActionRowBuilder().addComponents(
                    new ButtonBuilder()
                        .setCustomId('rate_good')
                        .setLabel('👍 Good')
                        .setStyle(ButtonStyle.Success),
                    new ButtonBuilder()
                        .setCustomId('rate_bad')
                        .setLabel('👎 Bad')
                        .setStyle(ButtonStyle.Danger)
                )
            )
    ],
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true
});

// Handle interactions
const collector = message.createMessageComponentCollector({ time: 60000 });

collector.on('collect', async i => {
    if (i.customId === 'rate_good') {
        await i.update({
            components: [
                new SectionBuilder()
                    .addComponents(
                        new TextDisplayBuilder().setContent('Thank you for your feedback! 😊')
                    )
            ],
            flags: [MessageFlags.IsComponentsV2]
        });
    } else if (i.customId === 'rate_bad') {
        await i.update({
            components: [
                new SectionBuilder()
                    .addComponents(
                        new TextDisplayBuilder().setContent('We appreciate your feedback and will improve. 💪')
                    )
            ],
            flags: [MessageFlags.IsComponentsV2]
        });
    }
});

collector.on('end', () => {
    console.log('Rating collection ended');
});
```

--------------------------------

### Section with Thumbnail and Button

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/examples.md

Creates a section with a thumbnail, text content, and an action button. Ensure MessageFlags.IsComponentsV2 is set.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    MessageFlags
} = require('discord.js');

await interaction.reply({
    components: [
        new SectionBuilder()
            .setThumbnail('https://example.com/avatar.png')
            .addComponents(
                new TextDisplayBuilder().setContent('## User Profile\n**Name:** John Doe\n**Level:** 42'),
                new ActionRowBuilder().addComponents(
                    new ButtonBuilder()
                        .setCustomId('view_profile')
                        .setLabel('View Full Profile')
                        .setStyle(ButtonStyle.Primary)
                )
            )
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Creating an Image Gallery

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Use MediaGalleryBuilder to construct a message displaying images. Attachments can include URLs and descriptions.

```javascript
new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('url1').setDescription('Image 1'),
        new MediaAttachmentBuilder('url2').setDescription('Image 2')
    )
```

--------------------------------

### Create SectionBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Build a section with an optional thumbnail and components, including text and buttons.

```javascript
const section = new SectionBuilder()
    .setThumbnail('https://...')
    .addComponents(
        new TextDisplayBuilder().setContent('Text'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('id').setLabel('Button').setStyle(ButtonStyle.Primary)
        )
    );

```

--------------------------------

### MediaAttachmentBuilder Source Types

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/rules-and-constraints.md

Shows how to instantiate MediaAttachmentBuilder using either a URL string or a Buffer for the media source. This applies to all MediaAttachmentBuilder instantiations.

```javascript
// From URL
const fromUrl = new MediaAttachmentBuilder('https://example.com/image.png')
    .setDescription('Image from URL');

// From Buffer
const imageBuffer = await fs.promises.readFile('./image.png');
const fromBuffer = new MediaAttachmentBuilder(imageBuffer)
    .setDescription('Image from Buffer');
```

--------------------------------

### Building a Media Gallery

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/README.md

MediaGalleryBuilder displays multiple images or videos. Use MediaAttachmentBuilder for each item, specifying the source URL or buffer and an optional description or spoiler tag.

```javascript
const { MediaGalleryBuilder, MediaAttachmentBuilder, MessageFlags } = require('discord.js');

const imageGallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https_url_1.png')
            .setDescription('This is the description for the first image.'),
        new MediaAttachmentBuilder('https_url_2.png')
            .setDescription('This is the second image.')
            .setSpoiler(true)
    );
        
// Usage:
// interaction.reply({ components: [imageGallery], flags: [MessageFlags.IsComponentsV2] });
```

--------------------------------

### Create MediaGalleryBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Use MediaGalleryBuilder to construct a component for displaying a gallery of images and videos. This is ideal for showcasing multiple media items.

```typescript
constructor(): MediaGalleryBuilder
```

--------------------------------

### MediaAttachmentBuilder Constructor

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaAttachmentBuilder.md

Initializes a new MediaAttachmentBuilder with a specified media source, which can be a URL or a Buffer.

```APIDOC
## constructor(source: string | Buffer)

### Description
Creates a new MediaAttachmentBuilder with the provided media source.

### Parameters
#### Path Parameters
- **source** (string | Buffer) - Required - Either a URL string pointing to the media resource or a Buffer containing the media data
```

--------------------------------

### Import Discord.js Components

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Import all necessary builders and enums from the discord.js library.

```javascript
const {
    TextDisplayBuilder,
    SeparatorBuilder,
    SectionBuilder,
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    StringSelectMenuBuilder,
    MessageFlags
} = require('discord.js');
```

--------------------------------

### Create Link Button

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Create a button that navigates to a URL by setting the `setStyle` to `ButtonStyle.Link` and providing a `setURL`.

```javascript
new ButtonBuilder()
    .setLabel('Visit Website')
    .setStyle(ButtonStyle.Link)
    .setURL('https://example.com')
```

--------------------------------

### ActionRowBuilder Constructor

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/ActionRowBuilder.md

Initializes a new ActionRowBuilder instance. This constructor does not accept any parameters.

```APIDOC
## Constructor

```typescript
constructor()
```

Creates a new ActionRowBuilder instance with no parameters.
```

--------------------------------

### Fetching Message for Collector

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Demonstrates how to fetch a message with ComponentsV2 enabled to create a message component collector.

```APIDOC
## Fetching Message for Collector

### Description
This example shows how to reply with components, fetch the reply message, and then create a collector for its components.

### Usage
```typescript
const message = await interaction.reply({
    components: [...],
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true  // Returns Message object
});

const collector = message.createMessageComponentCollector({
    time: 15000  // 15 seconds
});
```

### Parameters
- `fetchReply` (boolean): If true, returns the `Message` object.
- `time` (number): The time in milliseconds to collect interactions for.
```

--------------------------------

### Migrate Image Galleries: After

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/migration-guide.md

This snippet demonstrates the new approach using `MediaGalleryBuilder` and `MediaAttachmentBuilder` for embedding images in Components v2.

```javascript
const gallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https://example.com/image1.jpg')
            .setDescription('Image 1'),
        new MediaAttachmentBuilder('https://example.com/image2.jpg')
            .setDescription('Image 2')
    );

await interaction.reply({
    components: [gallery],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### MediaGalleryBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Builder for creating media gallery components.

```APIDOC
## MediaGalleryBuilder

### Description
Builder for creating media gallery components.

### Constructor
`constructor()`

### Methods
#### `addAttachments(...attachments: MediaAttachmentBuilder[]): MediaGalleryBuilder`
Adds attachments to the media gallery.
```

--------------------------------

### MediaGalleryBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Builder for creating image and video gallery display components. It allows adding multiple media items.

```APIDOC
## Class: MediaGalleryBuilder

### Description
Component for displaying an image and video gallery.

### Constructor
```typescript
constructor(): MediaGalleryBuilder
```

### Methods
#### addAttachments
- **Signature**: `addAttachments(...attachments: MediaAttachmentBuilder[])`
- **Returns**: `MediaGalleryBuilder`
- **Description**: Adds media items (MediaAttachmentBuilder instances) to the gallery.
```

--------------------------------

### Create TextDisplayBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Use TextDisplayBuilder to create rich text content with markdown support.

```javascript
const text = new TextDisplayBuilder()
    .setContent('# Header\n**Bold** and *italic* text');

```

--------------------------------

### Build and Send Message with Components v2

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/overview.md

This snippet demonstrates how to construct various components like sections, text displays, action rows, buttons, and media galleries, and then send them in a message using Discord.js Components v2. Ensure all necessary classes are imported.

```javascript
const {
    TextDisplayBuilder,
    SeparatorBuilder,
    SectionBuilder,
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    MessageFlags
} = require('discord.js');

// Build components
const section1 = new SectionBuilder()
    .setThumbnail('https://example.com/image.png')
    .addComponents(
        new TextDisplayBuilder().setContent('# Welcome\nThis is a section with thumbnail'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder()
                .setCustomId('click_me')
                .setLabel('Click Me')
                .setStyle(ButtonStyle.Primary)
        )
    );

const separator = new SeparatorBuilder();

const gallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https://example.com/image1.png')
            .setDescription('First image'),
        new MediaAttachmentBuilder('https://example.com/image2.png')
            .setDescription('Second image')
    );

// Send message
await interaction.reply({
    components: [section1, separator, gallery],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Build a Media Gallery

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/examples.md

Use MediaGalleryBuilder to create a gallery of media attachments. Each attachment can have a description and optionally be marked as a spoiler. Ensure MessageFlags.IsComponentsV2 is set for component v2 messages.

```javascript
const {
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    MessageFlags
} = require('discord.js');

await interaction.reply({
    components: [
        new MediaGalleryBuilder()
            .addAttachments(
                new MediaAttachmentBuilder('https://example.com/image1.jpg')
                    .setDescription('Sunset over the ocean'),
                new MediaAttachmentBuilder('https://example.com/image2.jpg')
                    .setDescription('Mountain landscape'),
                new MediaAttachmentBuilder('https://example.com/image3.jpg')
                    .setDescription('City skyline')
                    .setSpoiler(true)
            )
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Migrate Image Galleries: Before

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/migration-guide.md

This snippet shows the previous method of embedding images using `EmbedBuilder` and `setImage`.

```javascript
const embed = new EmbedBuilder()
    .setTitle('Image 1')
    .setImage('https://example.com/image1.jpg');

const embed2 = new EmbedBuilder()
    .setTitle('Image 2')
    .setImage('https://example.com/image2.jpg');

await interaction.reply({ embeds: [embed, embed2] });
```

--------------------------------

### setDescription

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaAttachmentBuilder.md

Sets a description for the media attachment, which is displayed on hover.

```APIDOC
## setDescription(description: string): MediaAttachmentBuilder

### Description
Sets the description text that appears when hovering over the media item.

### Parameters
#### Path Parameters
- **description** (string) - Required - Description text to display on hover

### Return Type
MediaAttachmentBuilder - Returns the builder instance for method chaining.
```

--------------------------------

### Gallery with Description

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/patterns.md

Display a collection of images with descriptions. Ideal for portfolios or photo sharing. Requires discord.js imports.

```javascript
const {
    TextDisplayBuilder,
    MediaGalleryBuilder,
    MediaAttachmentBuilder,
    SeparatorBuilder,
    MessageFlags
} = require('discord.js');

const description = new TextDisplayBuilder()
    .setContent('## Photo Gallery\nClick on images to view in full size.');

const separator = new SeparatorBuilder();

const gallery = new MediaGalleryBuilder()
    .addAttachments(
        new MediaAttachmentBuilder('https://example.com/img1.jpg')
            .setDescription('Beautiful sunset'),
        new MediaAttachmentBuilder('https://example.com/img2.jpg')
            .setDescription('Mountain landscape'),
        new MediaAttachmentBuilder('https://example.com/img3.jpg')
            .setDescription('Ocean waves')
    );

await interaction.reply({
    components: [description, separator, gallery],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Building a Simple Button Component

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

This pattern demonstrates how to create a basic interactive message with a button. It uses SectionBuilder and ActionRowBuilder to structure the components.

```javascript
new SectionBuilder()
    .addComponents(
        new TextDisplayBuilder().setContent('Text'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder()
                .setCustomId('id')
                .setLabel('Click Me')
                .setStyle(ButtonStyle.Primary)
        )
    )
```

--------------------------------

### Enable ComponentsV2 Rendering

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/types.md

Use the MessageFlags.IsComponentsV2 constant in the flags array when replying to enable ComponentsV2 display component rendering. This is required for ComponentsV2 to function.

```javascript
const {
    MessageFlags
} = require('discord.js');

interaction.reply({
    components: [/* ...components... */],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Create MediaAttachmentBuilder with URL

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaAttachmentBuilder.md

Instantiate MediaAttachmentBuilder with a URL string for the media source. Use this to set the description and spoiler status for the attachment.

```typescript
new MediaAttachmentBuilder('https://example.com/image1.png')
    .setDescription('Screenshot of the application')
    .setSpoiler(false);
```

--------------------------------

### Set Media Attachment Description (Optional)

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

Add a description to a media attachment, which will be displayed on hover. This is an optional step and does not affect image display.

```javascript
const media = new MediaAttachmentBuilder('https://...')
    .setDescription('This appears on hover');

```

--------------------------------

### Building an Action Menu with Buttons

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

This pattern creates a message with text and multiple action buttons grouped within an ActionRowBuilder. It's useful for presenting choices to the user.

```javascript
new SectionBuilder()
    .addComponents(
        new TextDisplayBuilder().setContent('Choose action:'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('a').setLabel('Action 1').setStyle(ButtonStyle.Primary),
            new ButtonBuilder().setCustomId('b').setLabel('Action 2').setStyle(ButtonStyle.Primary)
        )
    )
```

--------------------------------

### Create Multi-Row Action Grid with Discord.js

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/patterns.md

Constructs a complex action menu with multiple rows of buttons for administrative tasks. This pattern is useful for creating dashboards or feature selection menus. Requires `discord.js`.

```javascript
const { SectionBuilder, TextDisplayBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, MessageFlags } = require('discord.js');

const actionGrid = new SectionBuilder()
    .addComponents(
        new TextDisplayBuilder().setContent('## Admin Panel\nSelect an action:'),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('admin_users').setLabel('👥 Users').setStyle(ButtonStyle.Primary),
            new ButtonBuilder().setCustomId('admin_roles').setLabel('🏷️ Roles').setStyle(ButtonStyle.Primary),
            new ButtonBuilder().setCustomId('admin_logs').setLabel('📋 Logs').setStyle(ButtonStyle.Primary)
        ),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('admin_settings').setLabel('⚙️ Settings').setStyle(ButtonStyle.Secondary),
            new ButtonBuilder().setCustomId('admin_backup').setLabel('💾 Backup').setStyle(ButtonStyle.Secondary),
            new ButtonBuilder().setCustomId('admin_stats').setLabel('📊 Stats').setStyle(ButtonStyle.Secondary)
        ),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder().setCustomId('admin_help').setLabel('❓ Help').setStyle(ButtonStyle.Secondary),
            new ButtonBuilder().setCustomId('admin_close').setLabel('✖️ Close').setStyle(ButtonStyle.Danger)
        )
    );

await interaction.reply({
    components: [actionGrid],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Handle Button Interactions Globally

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Set up a global event listener for `interactionCreate` to handle button clicks from anywhere in your bot. This is an alternative to message-specific collectors for simpler bots or global actions.

```javascript
client.on('interactionCreate', async interaction => {
    if (!interaction.isButton()) return;
    
    if (interaction.customId === 'button_id') {
        await interaction.reply({ content: 'Clicked!', ephemeral: true });
    }
});
```

--------------------------------

### SectionBuilder Constructor

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/SectionBuilder.md

Initializes a new instance of SectionBuilder. This constructor does not accept any parameters.

```APIDOC
## SectionBuilder Constructor

### Description
Creates a new SectionBuilder instance with no parameters.

### Method
constructor()

### Parameters
None

### Return Type
`SectionBuilder`
```

--------------------------------

### Enable ComponentsV2 Rendering

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Use MessageFlags.IsComponentsV2 when replying to an interaction to enable ComponentsV2 rendering. This flag is required for ComponentsV2.

```javascript
const { MessageFlags } = require('discord.js');

interaction.reply({
    components: [/* ... */],
    flags: [MessageFlags.IsComponentsV2]  // Required
});
```

--------------------------------

### Correctly Update Message with Components and Flags

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/rules-and-constraints.md

Demonstrates the correct way to update a message containing display components. It requires providing the complete `components` array along with the `flags` parameter, specifically `MessageFlags.IsComponentsV2`.

```javascript
// CORRECT - Full components array with flag
await interaction.update({
    components: [
        new TextDisplayBuilder().setContent('Updated text')
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### MediaGalleryBuilder Class

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/types.md

Builds a gallery component for displaying multiple images or videos. Attach individual media items using MediaAttachmentBuilder.

```typescript
class MediaGalleryBuilder {
    constructor(): void;
    addAttachments(...attachments: MediaAttachmentBuilder[]): MediaGalleryBuilder;
}
```

--------------------------------

### ButtonStyle

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

An object containing available styles for buttons.

```APIDOC
## ButtonStyle

### Description
An object containing available styles for buttons.

### Type
Object

### Requires Discord.js
v12.0+

### Status
✓ Stable
```

--------------------------------

### Create ActionRowBuilder with Buttons

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Assemble an ActionRowBuilder containing multiple buttons with different custom IDs, labels, and styles.

```javascript
const row = new ActionRowBuilder()
    .addComponents(
        new ButtonBuilder().setCustomId('id').setLabel('Button').setStyle(ButtonStyle.Primary),
        new ButtonBuilder().setCustomId('id2').setLabel('Button 2').setStyle(ButtonStyle.Secondary)
    );

```

--------------------------------

### Importing TextDisplayBuilder in discord.js

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

Ensure that builders like TextDisplayBuilder are correctly imported from the 'discord.js' library before use to avoid 'not defined' errors.

```javascript
// ❌ WRONG - Not imported
const text = new TextDisplayBuilder();
// ReferenceError: TextDisplayBuilder is not defined

// ✓ CORRECT - Import before use
const { TextDisplayBuilder } = require('discord.js');
const text = new TextDisplayBuilder();
```

--------------------------------

### Create SeparatorBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Instantiate a SeparatorBuilder to add a visual separator line.

```javascript
const separator = new SeparatorBuilder();

```

--------------------------------

### Add Event Listener for Interactions

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

Ensure your bot listens for the 'interactionCreate' event to handle user interactions with components. This is the fundamental step for any component to function.

```javascript
// ❌ WRONG - No event handler
// Buttons won't do anything when clicked

// ✓ CORRECT
client.on('interactionCreate', async interaction => {
    if (!interaction.isButton()) return;
    
    if (interaction.customId === 'button_id') {
        await interaction.reply({ content: 'Button clicked!' });
    }
});
```

--------------------------------

### Create MediaAttachmentBuilder with Buffer

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/MediaAttachmentBuilder.md

Instantiate MediaAttachmentBuilder with a Buffer containing media data. This is useful for dynamically generated images or other media. You can chain methods to set description and spoiler.

```typescript
new MediaAttachmentBuilder(imageBuffer)
    .setDescription('Dynamically generated image')
    .setSpoiler(true);
```

--------------------------------

### Migrate Basic Message Structure

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/migration-guide.md

Replace the old embed and ActionRow structure with a SectionBuilder for ComponentsV2. This allows for richer content and better organization.

```javascript
const section = new SectionBuilder()
    .addComponents(
        new TextDisplayBuilder()
            .setContent('## User Profile\nClick the button below to view details'),
        new ActionRowBuilder()
            .addComponents(
                new ButtonBuilder()
                    .setCustomId('view_profile')
                    .setLabel('View Profile')
                    .setStyle(ButtonStyle.Primary)
            )
    );

await interaction.reply({
    components: [section],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Dynamic Content Update with Buttons

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/patterns.md

Updates message content dynamically based on button clicks, managing a multi-step process. Use for wizards or step-by-step tutorials.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    MessageFlags
} = require('discord.js');

let currentStep = 1;

const message = await interaction.reply({
    components: getStepComponents(currentStep),
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true
});

const collector = message.createMessageComponentCollector({ time: 60000 });

collector.on('collect', async i => {
    if (i.customId === 'step_next' && currentStep < 3) {
        currentStep++;
        await i.update({
            components: getStepComponents(currentStep),
            flags: [MessageFlags.IsComponentsV2]
        });
    } else if (i.customId === 'step_prev' && currentStep > 1) {
        currentStep--;
        await i.update({
            components: getStepComponents(currentStep),
            flags: [MessageFlags.IsComponentsV2]
        });
    }
});

function getStepComponents(step) {
    const content = {
        1: 'Step 1: Initial Setup',
        2: 'Step 2: Configuration',
        3: 'Step 3: Complete'
    };

    return [
        new SectionBuilder()
            .addComponents(
                new TextDisplayBuilder().setContent(
                    `## ${content[step]}\n\nProgress: ${step}/3`
                ),
                new ActionRowBuilder().addComponents(
                    new ButtonBuilder()
                        .setCustomId('step_prev')
                        .setLabel('← Previous')
                        .setStyle(ButtonStyle.Secondary)
                        .setDisabled(step === 1),
                    new ButtonBuilder()
                        .setCustomId('step_next')
                        .setLabel('Next →')
                        .setStyle(ButtonStyle.Primary)
                        .setDisabled(step === 3)
                )
            )
    ];
}
```

--------------------------------

### TextDisplayBuilder Class

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/types.md

Builds Markdown-formatted text blocks for display components. Use this to render text content within messages.

```typescript
class TextDisplayBuilder {
    constructor(): void;
    setContent(content: string): TextDisplayBuilder;
}
```

--------------------------------

### Create MediaAttachmentBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Instantiate MediaAttachmentBuilder for individual media items within a gallery. The source can be a URL string or a Buffer containing image data.

```typescript
constructor(source: string | Buffer): MediaAttachmentBuilder
```

--------------------------------

### Configure MediaAttachmentBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Configures a MediaAttachmentBuilder by setting a description and optionally marking it as a spoiler. This allows for hover text and spoiler tags on media items.

```javascript
const attachment = new MediaAttachmentBuilder('https://...')
    .setDescription('Image description')
    .setSpoiler(false);

```

--------------------------------

### Reply with Components and Fetch Reply

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Reply to an interaction with components and immediately fetch the sent message object. This is useful if you need to interact with the message after sending it, such as creating a collector.

```javascript
const message = await interaction.reply({
    components: [component],
    flags: [MessageFlags.IsComponentsV2],
    fetchReply: true
});
```

--------------------------------

### TextDisplayBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/api-reference/EXPORTS.md

Builder for creating text display components.

```APIDOC
## TextDisplayBuilder

### Description
Builder for creating text display components.

### Constructor
`constructor()`

### Methods
#### `setContent(content: string): TextDisplayBuilder`
Sets the content of the text display.
```

--------------------------------

### Basic Text Display

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/examples.md

Displays basic text content using TextDisplayBuilder. Ensure MessageFlags.IsComponentsV2 is set when replying.

```javascript
const { TextDisplayBuilder, MessageFlags } = require('discord.js');

const message = new TextDisplayBuilder()
    .setContent('# Hello World\n\nThis is a **bold** text example with *italics*.');

await interaction.reply({
    components: [message],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Send a Simple Message with TextDisplayBuilder

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/index.md

Use TextDisplayBuilder to send a message with rich text formatting. Ensure MessageFlags.IsComponentsV2 is set.

```javascript
const { TextDisplayBuilder, MessageFlags } = require('discord.js');

await interaction.reply({
    components: [
        new TextDisplayBuilder().setContent('# Hello World\n\nThis is **bold** text')
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Use TextDisplayBuilder for Formatted Text

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/troubleshooting.md

For formatted text within message components, use `TextDisplayBuilder`. The `content` field of `interaction.reply` does not support Markdown formatting when used with components.

```javascript
// ❌ WRONG - Using reply content instead of TextDisplayBuilder
await interaction.reply({
    content: '**This won\'t be bold in display components**',
    components: [/* ... */],
    flags: [MessageFlags.IsComponentsV2]
});

// ✓ CORRECT
await interaction.reply({
    components: [
        new TextDisplayBuilder().setContent('**This will be bold**')
    ],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Header with Icon and CTA

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/patterns.md

Use for announcements or feature highlights. Requires discord.js imports.

```javascript
const {
    SectionBuilder,
    TextDisplayBuilder,
    ActionRowBuilder,
    ButtonBuilder,
    ButtonStyle,
    MessageFlags
} = require('discord.js');

const headerSection = new SectionBuilder()
    .setThumbnail('https://example.com/icon.png')
    .addComponents(
        new TextDisplayBuilder().setContent(
            '## Feature Announcement\n' +
            'Check out our latest feature that improves your workflow.'
        ),
        new ActionRowBuilder().addComponents(
            new ButtonBuilder()
                .setCustomId('learn_more')
                .setLabel('Learn More')
                .setStyle(ButtonStyle.Primary)
        )
    );

await interaction.reply({
    components: [headerSection],
    flags: [MessageFlags.IsComponentsV2]
});
```

--------------------------------

### Reply to Interaction with Components

Source: https://github.com/calaisgg/djs_componentsv2/blob/main/_autodocs/quick-reference.md

Use this to reply to an interaction and include components like buttons or select menus. Ensure `MessageFlags.IsComponentsV2` is set for v2 components.

```javascript
await interaction.reply({
    components: [component],
    flags: [MessageFlags.IsComponentsV2]
});
```