Components V2

[DA-344]

Summary

Adds support for discord's components v2.

Testing and bug reporting is very much appreciated!

DDevs PR: discord/discord-api-docs#7487

1. Adds the following Components -> UI Version:

• SectionComponent -> ui.Section
• TextDisplay -> ui.TextDisplay
• ThumbnailComponent -> ui.Thumbnail
• MediaGalleryComponent -> ui.MediaGallery
• FileComponent -> ui.File
• SeparatorComponent -> ui.Separator
• Container -> ui.Container
• ActionRow -> ui.ActionRow

2. Adds a new ui view like class, ui.LayoutView, that allows for these components to exist.
3. Adds the id attribute to all Components and UI Components.
   -> This also adds the get_item method to ui.View, ui.LayoutView, ui.Container, and ui.Section.

You can install this branch for testing using py -m pip install -U git+https://github.com/DA-344/d.py@feat/components-v2

These changes have been tested with the following snippets **(outdated)**:

All of these use the jishaku package

Sending Components v2

Code:

class TestButton(discord.ui.Button):
    async def callback(self, interaction):
        await interaction.response.send_message('t')

class TestContainer(discord.ui.Container):
    text1 = discord.ui.TextDisplay("Hello world")
    text2 = discord.ui.TextDisplay("Row 3", row=2)

    section = discord.ui.Section(
        accessory=TestButton(
            label="Section Button",
        )
    ).add_item(discord.ui.TextDisplay("Text in a section"))


class TestView(discord.ui.LayoutView):
    container = TestContainer(id=1)

await _ctx.send(view=TestView())

Result (as expected):

Sending Components v2 items on webhooks

1st snippet: sends interactible items on app owned and not app owned webhooks

wh = await _channel.create_webhook(name='sumth')  # app owned

class TestButton(discord.ui.Button):
    async def callback(self, interaction):
        await interaction.response.send_message('t')

class TestContainer(discord.ui.Container):
    text1 = discord.ui.TextDisplay("Hello world")
    text2 = discord.ui.TextDisplay("Row 3", row=2)

    section = discord.ui.Section(
        accessory=TestButton(
            label="Section Button",
        )
    ).add_item(discord.ui.TextDisplay("Text in a section"))


class TestView(discord.ui.LayoutView):
    container = TestContainer(id=1)

v = TestView()

await wh.send(view=v)

wh2 = discord.Webhook.from_url('https://discord.com/api/webhooks/1362896342581641286/TOKEN', client=_bot)  # not app owned

await wh2.send(view=TestView())

Result (as expected):

2nd snippet: sends non-interactible items on not app owned webhook

class TestButton(discord.ui.Button):
    async def callback(self, interaction):
        await interaction.response.send_message('t')

class TestContainer(discord.ui.Container):
    text1 = discord.ui.TextDisplay("Hello world")
    text2 = discord.ui.TextDisplay("Row 3", row=2)

    section = discord.ui.Section(
        accessory=TestButton(
            url="https://google.com",
            label='gugol',
        )
    ).add_item(discord.ui.TextDisplay("Text in a section"))


class TestView(discord.ui.LayoutView):
    container = TestContainer(id=1)

wh2 = discord.Webhook.from_url('https://discord.com/api/webhooks/1362896342581641286/TOKEN', client=_bot)

await wh2.send(view=TestView())

Result (as expected):

Receiving other message's components v2

Code:

yield _message.reference.resolved.components

Result (as expected):

Checklist

• If code changes were made then they have been tested.
  • I have updated the documentation to reflect the changes.
• This PR fixes an issue.
• This PR adds something new (e.g. new method or parameters).
• This PR is a breaking change (e.g. methods or parameters removed/renamed)
• This PR is not a code change (e.g. documentation, README, ...)

[Soheab]

Small mistakes in documentation that I found.

Something that I noticed later but didn't include here for reasons, in all walk_children methods you used “it's children" instead of "its children", please correct that too.

[Rapptz]

This looks fine, there are still some nits but they're not blocking.

[ConnerAdamsMaine]

I've started testing, just to grasp the fundamentals. How would you go about embeding the LayoutView in a discord.embeds.Embed() or has this not yet been implemented? I know it can be done in discord.js I just don't see how it would be done in discord.py?

I was thinking maybe using the example below, and will test with this but am unsure.

class foo(Embed, LayoutView):

[Rapptz]

@ConnerAdamsMaine Embeds and container v2 are two different things. The closest you have to an "embed" is Container which lets you set an accent colour. There is no way that discord.js supports whatever you're suggesting because they are fundamentally different things at an API layer.

[ConnerAdamsMaine]

@Rapptz it's not an embed per-say, it was just the best way I could think of it. I realize now that it was an idiotic idea, I do apologize on that part. It's hard thinking with 48 hours of sleep deprivation. I have checked and it is the Container class that I was looking for!