Discord Components v2 usage with Custom Commands bot

Introduction

Discord has revolutionized the way communities interact, and bots play a pivotal role in automating tasks and enhancing user engagement. With the advent of Discord Components v2, developers are now equipped with a more flexible and powerful toolkit to create interactive and dynamic user interfaces within Discord messages. So lets see what are the available components and how we can use them

Text Display Component

This component lets us display text. It can be normal text or headings.

pyt1 = TextDisplay(content="A cool text to display")
t2 = TextDisplay(content="# This is a heading")

Media gallery Component

Media gallery component allows us to display multiple images in a gallery type look

pygallery = MediaGallery()
gallery.add_media_gallery_item("image_url_here", description="This is image 1")
gallery.add_media_gallery_item("image_url_here", description="This is image 2")

Section Component

Section component has 2 part, the section content, where you can add texts and accessory part where you can add thumbnail or buttons

py# section with button
btn = Button("Click Me", custom_id="btn1")
s1 = Section(accessory=btn)
s1.add_text_display("This is a cool section with a button")

# section with link button
btn = LinkButton("Blog", url="https://ccbot.app/blog")
s2 = Section(accessory=btn)
s2.add_text_display("Read our blog here")

# section with thumbnail
thumb = Thumbnail(media="image_url_here"))
s3 = Section(accessory=thumb)
s3.add_text_display("This is a cool section with a thumbnail")

Separator Component

Separator component lets us separate 2 components with a devider line. We can also control how much spacing it will have

pylarge = Separator(spacing=Spacing.LARGE)
small = Separator(spacing=Spacing.SMALL)
no_divider = Separator(divider=False)

File Component

If you want to add files in a message

pyimg = load_file("file_url", filename="filename.jpg")
img_file = File(file=img)

Container Component

Container component looks like an embed but it can have all the above components added to it

pycontainer = Container(accent_color=Color.from_hex_code("FFFFFF"))

t1 = TextDisplay(content="A cool text to display")
t2 = TextDisplay(content="# This is a heading")
large_sp = Separator(spacing=Spacing.LARGE)

container.add_component(t1)
container.add_component(large_sp)
container.add_component(t2)

Example

Here is an example of making a profile like view using components v2

py# Creating the container
container = Container(accent_color=Color.from_hex_code("#2F3136"))

# The image gallery
gallery = MediaGallery()
gallery.add_media_gallery_item("https://picsum.photos/id/15/367/267", description="This is image 1")
gallery.add_media_gallery_item("https://picsum.photos/id/16/367/267", description="This is image 2")
gallery.add_media_gallery_item("https://picsum.photos/id/17/367/267", description="This is image 3")

# A separator that separates things but has no visiable border
hidden_sp = Separator(spacing=Spacing.SMALL, divider=False)

# Bio Section with some Text and a thumbnail
thumbnail = Thumbnail(media="https://shahriyar.dev/images/me.jpg")
bio_section = Section(accessory=thumbnail)
bio_section.add_text_display("# Md Shahriyar Alam")
bio_section.add_text_display("Full-Stack Web Developer with knowledge of ReactJs NextJs, Redux, Typescript, ExpressJs, Node, MongoDB. Also has experience with developing backend APIs using Python web frameworks.")

# Large Spacing separator
sp = Separator(spacing=Spacing.LARGE)

# Contact button for container footer
contact_button = LinkButton("Contact Me", url="https://shahriyar.dev")
contact_section = Section(accessory=contact_button)
contact_section.add_text_display("> If you have any query feel free to contact me")

# Adding all the components into the contianer
container.add_component(gallery)
container.add_component(hidden_sp)
container.add_component(bio_section)
container.add_component(sp)
container.add_component(contact_section)

set_components([container])

And here is how it looks

If you dont want any container you can just do

pyset_components([gallery, hidden_sp, bio_section, sp, contact_section])

You can also use a component builder with it

pybuilder = ComponentBuilder()
builder.add_button(...)
builder.add_button(...)

# Now you can either add it to the container like 
container.add_component(builder.action_row)

# Or directly set it to components
set_components([gallery, hidden_sp, bio_section, sp, contact_section, builder])