Skip to content

Commit f5c4486

Browse files
anthonydiscordanthonydiscord
committed
Updated many things
1 parent 58c0d11 commit f5c4486

File tree

5 files changed

+23
-23
lines changed

5 files changed

+23
-23
lines changed

‎docs/change-log/2025-04-22-components-v2.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ We're bringing new components to messages that you can use in your apps. They al
1313

1414
Our previous components system, while functional, had limitations:
1515

16-
- Content, attachments, embeds, and components had to follow fixed positioning rules
16+
- Content, attachments, embeds, and components had to follow fixed vertical positioning rules
1717
- Visual styling options were limited
18+
- It was difficult to make visually cohesive experiences that combined the various functionalities of messages given they were expressed in a non-unified system
1819

1920
Our new component system addresses these challenges with fully composable components that can be arranged and laid out in any order, allowing for a more flexible and visually appealing design.
2021

@@ -32,7 +33,7 @@ Our new component system addresses these challenges with fully composable compon
3233

3334
- [**Text Display**](/docs/components/reference#text-display) - Add rich markdown-formatted text anywhere in your messages
3435
- [**Thumbnail**](/docs/components/reference#thumbnail) - An image used in a [section](/docs/components/reference#section)
35-
- [**Media Gallery**](/docs/components/reference#media-gallery) - Present collections of images in an organized grid
36+
- [**Media Gallery**](/docs/components/reference#media-gallery) - Present collections of images and videos in an organized grid
3637
- [**File**](/docs/components/reference#file) - Embed file attachments as part of your message layout
3738

3839
#### Getting Started
@@ -49,7 +50,7 @@ We've created guides to help you implement these new features:
4950
[Legacy component behavior](/docs/components/reference#legacy-message-component-behavior) will continue to work as before, so your existing integrations won't break. However, when using the Components V2 flag, you'll need to adapt to a few changes:
5051

5152
- The `content` and `embeds` fields will no longer work but you'll be able to use [Text Display](/docs/components/reference#text-display) and [Container](/docs/components/reference#container) as replacements
52-
- Attachments need to be exposed through components to be visible
53+
- Attachments need to be exposed through components to be visible. You can use a [Media Gallery](/docs/components/reference#media-gallery), [Thumbnail](/docs/components/reference#thumbnail), or [File](/docs/components/reference#file) component to display them
5354
- The `poll` and `stickers` fields are disabled
5455
- A max of 10 top-level components and 30 total components in a message
5556

‎docs/components/reference.mdx

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ Action Rows can contain:
112112
"type": 2,
113113
"label": "Learn More",
114114
"style": 5,
115-
"url": "https://discord.com"
115+
"url": "http://watchanimeattheoffice.com/"
116116
},
117117
{
118118
"type": 2,
@@ -333,6 +333,7 @@ String Selects must be placed inside an [Action Row](/docs/components/reference#
333333
{
334334
"type": 3,
335335
"custom_id": "string_select",
336+
"placeholder": "Favorite bug?",
336337
"options": [
337338
{
338339
"label": "Ant",
@@ -866,7 +867,7 @@ Don't hardcode `components` to contain only text components. We may add other co
866867
"accessory": {
867868
"type": 11,
868869
"media": {
869-
"url": "websitewithopensourceimages/gamepreview.png"
870+
"url": "https://websitewithopensourceimages/gamepreview.png"
870871
}
871872
}
872873
}
@@ -892,14 +893,14 @@ To use this component, you need to send the [message flag](/docs/resources/messa
892893
| type | integer | `10` for text display |
893894
| id? | integer | Optional identifier for component |
894895
| content | string | Text that will be displayed similar to a message |
895-
896+
Th
896897
###### Example
897898

898899
```json
899900
"components": [
900901
{
901902
"type": 10,
902-
"content": "# This is a Text Display\nAll the regular markdown rules apply\n- You can make lists\n- You can use `code blocks`\n- You can use [links](https://discord.com/)\n- Even :blush: :star_struck: :exploding_head:\n- Spolier alert: ||these too!||"
903+
"content": "# This is a Text Display\nAll the regular markdown rules apply\n- You can make lists\n- You can use `code blocks`\n- You can use [links](http://watchanimeattheoffice.com/)\n- Even :blush: :star_struck: :exploding_head:\n- Spolier alert: ||these too!||"
903904
}
904905
]
905906
```
@@ -968,16 +969,16 @@ To use this component, you need to send the [message flag](/docs/resources/messa
968969
"type": 12,
969970
"items": [
970971
{
971-
"media": {"url": "livevideofeedconvertedtoimage/webcam1.png"},
972-
"description": "Feed 1"
972+
"media": {"url": "https://livevideofeedconvertedtoimage/webcam1.png"},
973+
"description": "An aerial view looking down on older industrial complex buildings. The main building is white with many windows and pipes running up the walls."
973974
},
974975
{
975-
"media": {"url": "livevideofeedconvertedtoimage/webcam2.png"},
976-
"description": "Feed 2"
976+
"media": {"url": "https://livevideofeedconvertedtoimage/webcam2.png"},
977+
"description": "An aerial view of old broken buildings. Nature has begun to take root in the rooftops. A portion of the middle building's roof has collapsed inward. In the distant haze you can make out a far away city."
977978
},
978979
{
979-
"media": {"url": "livevideofeedconvertedtoimage/webcam3.png"},
980-
"description": "Feed 3"
980+
"media": {"url": "https://livevideofeedconvertedtoimage/webcam3.png"},
981+
"description": "A street view of a downtown city. Prominently in photo are skyscrapers and a domed building"
981982
}
982983
]
983984
}
@@ -988,7 +989,7 @@ To use this component, you need to send the [message flag](/docs/resources/messa
988989

989990
## File
990991

991-
A File is a top-level component that allows you to display an uploaded file as an attachment to the message and reference it in the component. This is similar to the `embeds` field of a message but allows you to control the layout of your message by using this anywhere as a component. Files are only available in messages.
992+
A File is a top-level component that allows you to display an [uploaded file](/docs/components/reference#uploading-a-file) as an attachment to the message and reference it in the component. Each file component can only display 1 attached file, but you can upload multiple files and add them to different file components within your payload. This is similar to the `embeds` field of a message but allows you to control the layout of your message by using this anywhere as a component. Files are only available in messages.
992993

993994
:::info
994995
To use this component, you need to send the [message flag](/docs/resources/message#message-object-message-flags) `1 << 15` (IS_COMPONENTS_V2) which can be activated on a per-message basis.
@@ -1061,16 +1062,16 @@ To use this component, you need to send the [message flag](/docs/resources/messa
10611062
"components": [
10621063
{
10631064
"type": 10,
1064-
"content": "Above"
1065+
"content": "It's dangerous to go alone!"
10651066
},
10661067
{
10671068
"type": 14,
10681069
"divider": true,
1069-
"spacing": 2
1070+
"spacing": 1
10701071
},
10711072
{
10721073
"type": 10,
1073-
"content": "Below"
1074+
"content": "Take this."
10741075
}
10751076
]
10761077
```
@@ -1113,7 +1114,7 @@ To use this component, you need to send the [message flag](/docs/resources/messa
11131114
"type": 12,
11141115
"items": [
11151116
{
1116-
"media": {"url": "websitewithopensourceimages/coyote.png"},
1117+
"media": {"url": "https://websitewithopensourceimages/coyote.png"},
11171118
}
11181119
]
11191120
},
@@ -1155,21 +1156,19 @@ To use this component, you need to send the [message flag](/docs/resources/messa
11551156

11561157
| Field | Type | Description |
11571158
|---------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------|
1158-
| url | string | Supports arbitrary urls and attachment://\<filename> references |
1159+
| url | string | Supports arbitrary urls and `attachment://<filename>` references |
11591160
| proxy_url? | string | The proxied url of the media item. This field is ignored and provided by the API as part of the response |
11601161
| height? | ?integer | The height of the media item. This field is ignored and provided by the API as part of the response |
11611162
| width? | ?integer | The width of the media item. This field is ignored and provided by the API as part of the response |
11621163
| content_type? | string | The [media type](https://en.wikipedia.org/wiki/Media_type) of the content. This field is ignored and provided by the API as part of the response |
11631164

11641165
### Uploading a file
11651166

1166-
You can upload a file when sending a message and reference it within a file component using the `attachment://<filename>` syntax. Each file component can only display 1 attached file, but you can upload multiple files and add them to different file components within your payload.
1167-
11681167
To upload a file with your message, you'll need to send your payload as `multipart/form-data` (rather than `application/json`) and include your file with a valid filename in your payload. Details and examples for uploading files can be found in the [API Reference](/docs/reference#uploading-files).
11691168

11701169
## Legacy Message Component Behavior
11711170

1172-
Before the introduction of the `IS_COMPONENTS_V2` flag ([see changelog](/docs/change-log/2025-04-22-components-v2)), message components were sent as part of the message content. This means that you could send a message with components without setting the `IS_COMPONENTS_V2` flag, and the components would be included in the message content along with `content` and `embeds`.
1171+
Before the introduction of the `IS_COMPONENTS_V2` flag ([see changelog](/docs/change-log/2025-04-22-components-v2)), message components were sent in conjunction with message content. This means that you could send a message using a subset of the available components without setting the `IS_COMPONENTS_V2` flag, and the components would be included in the message content along with `content` and `embeds`.
11731172

11741173
Apps using this Legacy Message Component behavior will continue to work as expected, but it is recommended to use the new `IS_COMPONENTS_V2` flag for new apps or features as they offer more options for layout and customization.
11751174

‎docs/components/using-message-components.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ If you are sending components as part of a [webhook](/docs/resources/webhook) yo
2222

2323
## Sending a Message with a Component
2424

25-
To send a message with a component, you need to set the `IS_COMPONENTS_V2` flag (`1<<15`) in your message's `flags` field. This can be done when using [Message Create](/docs/resources/message#create-message), [Execute Webhook](/docs/resources/webhook#execute-webhook), or responding to an interaction.
25+
To send a message with a component, you need to set the `IS_COMPONENTS_V2` flag (`1<<15`) in your message's `flags` field. This can be done when using [Message Create](/docs/resources/message#create-message), [Execute Webhook](/docs/resources/webhook#execute-webhook), or [responding to an interaction](/docs/interactions/receiving-and-responding#create-followup-message).
2626

2727
This flag indicates that the message contains components and disables traditional content and embeds.
2828

‎static/images/components/separator.png

6.18 KB
Loading

‎static/images/components/string-select.png

-3.67 KB
Loading

0 commit comments

Comments
 (0)