disnake icon indicating copy to clipboard operation
disnake copied to clipboard

feat: components v2

Open shiftinv opened this issue 7 months ago • 2 comments

Summary

First off, this isn't quite finished, as evidenced by the fact that this is marked as a draft PR and the numerous TODOs scattered across the code, but still very much usable in its current state (once the experiment lock gets removed for everyone). Most of the remaining changes are quality-of-life/DX improvements. I consider the interface fairly stable at this point, don't expect many further changes there. It would probably make sense to wait a little longer with any reviews though, unless it's some glaring issue.

Description

https://github.com/discord/discord-api-docs/commit/af1843d15bca8fffb76e1421fbb060761361d469

This implements the new v2 components, including:

  • Section: displays a thumbnail or button next to some text
  • TextDisplay: plaintext, but as a component
  • MediaGallery: gallery/mosaic for up to 10 images
  • File: non-image attachments
  • Separator: vertical spacer/separator
  • Container: can be considered similar to an Embed

These new components are all non-interactive and intended for layout only, they are quite a bit more flexible than the previous content/embeds/attachments/components combo, and allow for much nicer looking/better structured messages.

Scope

I feel like it's worth clarifying that this is about as straightforward as the interface could be, only building on the existing implementation/functionality for components. There may very well be better ways (in terms of DX) to implement these components (namely, builder pattern, yippee), but I've considered this out of scope from the start. I've intentionally not implemented support for the new components in Views, given the intended scope of this PR and the complexities that somehow integrating them would bring, especially since all of the components are non-interactive. The goal with this PR was to get just about the most basic implementation going, any further work building on top of it will be in separate future PRs.

Example

code

(consider MediaGalleryItem unfinished, it is largely a placeholder implementation for now)

components: Sequence[ui.UIComponent] = [
    ui.TextDisplay("test"),
    ui.Separator(),
    ui.Container(
        ui.TextDisplay("this is text inside a container"),
        ui.MediaGallery(
            disnake.MediaGalleryItem(
                {
                    "media": {"url": "https://placecats.com/500/600"},
                    "description": "a cool media item",
                },
            ),
            disnake.MediaGalleryItem(
                {
                    "media": {"url": "https://placecats.com/800/600"},
                    "description": "more kitty",
                    "spoiler": True,
                },
            ),
        ),
        ui.Section(
            ui.TextDisplay(
                "What an incredible media gallery.\nOkay, that's all the time I've got. I got to get back to playing Animal Crossing New Leaf on my Nintendo 3DS."
            ),
            accessory=ui.Thumbnail(
                media={
                    "url": "https://i.kym-cdn.com/entries/icons/facebook/000/026/585/reggie_animalcrossingtour.jpg"
                },
                description="desc",
            ),
        ),
        ui.Separator(spacing=disnake.SeparatorSpacingSize.large),
        ui.ActionRow(disnake.ui.ChannelSelect(placeholder="Choose a Channel!")),
        accent_colour=disnake.Colour(0xEE99CC),
        spoiler=False,
    ),
]

await inter.response.send_message(components=components, flags=disnake.MessageFlags(is_components_v2=True))

image

Checklist

  • [x] If code changes were made, then they have been tested
    • [x] I have updated the documentation to reflect the changes
    • [x] I have formatted the code properly by running pdm lint
    • [ ] I have type-checked the code by running pdm pyright
  • [ ] This PR fixes an issue
  • [x] 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, ...)

shiftinv avatar Apr 18 '25 17:04 shiftinv