feat(types,bot)!: Components V2 (#4080)

* UI

* change component names to match Discord's names

* add divider prop to separator component

* rename thumbnail component image property to media

* Rename MessageFlags.IsUiKit to IsComponentsV2

* Rename FileDisplay component to File component

* Added container component

* add id to container component transformers

* add id to all components

* SectionComponent.accessory now accepts ButtonComponent as well

* Update description for FileComponent.file

* fix bad merge

* Change Component.accessory to ButtonComponent | ThumbnailComponent

* Add section to reverse, fix Component#accessory

* remove type cast on section transform

* Add docs link for CreateGuildChannel

Co-authored-by: LTS (Link) <lts20050703@gmail.com>

* Update comments & split components

* fix type errors

* Really fix CI

* transform UnfurledMediaItem

* Apply suggestions from code review

Co-authored-by: LTS (Link) <lts20050703@gmail.com>

* change DiscordInputTextComponent to DiscordTextInputComponent

* fix order in Transformers.customizers

* Fix missing transformers

* update action row components type

---------

Co-authored-by: Awesome Stickz <awesome@stickz.dev>
Co-authored-by: LTS (Link) <lts20050703@gmail.com>

packages/bot/src/transformers.ts

@@ -43,6 +43,7 @@ import type {
   DiscordInviteStageInstance,
   DiscordLobby,
   DiscordLobbyMember,
+  DiscordMediaGalleryItem,
   DiscordMember,
   DiscordMessage,
   DiscordMessageCall,
@@ -65,6 +66,7 @@ import type {
   DiscordTemplate,
   DiscordThreadMember,
   DiscordThreadMemberGuildCreate,
+  DiscordUnfurledMediaItem,
   DiscordUser,
   DiscordVoiceRegion,
   DiscordVoiceState,
@@ -120,6 +122,7 @@ import {
   type InviteStageInstance,
   type Lobby,
   type LobbyMember,
+  type MediaGalleryItem,
   type Member,
   type Message,
   type MessageCall,
@@ -141,6 +144,7 @@ import {
   type Template,
   type ThreadMember,
   type ThreadMemberGuildCreate,
+  type UnfurledMediaItem,
   type User,
   type VoiceRegion,
   type VoiceState,
@@ -190,6 +194,7 @@ import {
   transformInviteStageInstance,
   transformLobby,
   transformLobbyMember,
+  transformMediaGalleryItem,
   transformMember,
   transformMemberToDiscordMember,
   transformMessage,
@@ -213,6 +218,7 @@ import {
   transformTemplate,
   transformThreadMember,
   transformThreadMemberGuildCreate,
+  transformUnfurledMediaItem,
   transformUser,
   transformUserToDiscordUser,
   transformVoiceRegion,
@@ -225,6 +231,8 @@ import {
 import {
   transformAllowedMentionsToDiscordAllowedMentions,
   transformCreateApplicationCommandToDiscordCreateApplicationCommand,
+  transformMediaGalleryItemToDiscordMediaGalleryItem,
+  transformUnfurledMediaItemToDiscordUnfurledMediaItem,
 } from './transformers/reverse/index.js'
 import { bigintToSnowflake, snowflakeToBigint } from './utils.js'
 
@@ -339,6 +347,7 @@ export type Transformers<TProps extends TransformersDesiredProperties, TBehavior
     ) => any
     lobby: (bot: Bot<TProps, TBehavior>, payload: DiscordLobby, lobby: SetupDesiredProps<Lobby, TProps, TBehavior>) => any
     lobbyMember: (bot: Bot<TProps, TBehavior>, payload: DiscordLobbyMember, lobbyMember: SetupDesiredProps<LobbyMember, TProps, TBehavior>) => any
+    mediaGalleryItem: (bot: Bot<TProps, TBehavior>, payload: DiscordMediaGalleryItem, item: MediaGalleryItem) => any
     member: (bot: Bot<TProps, TBehavior>, payload: DiscordMember, member: SetupDesiredProps<Member, TProps, TBehavior>) => any
     message: (bot: Bot<TProps, TBehavior>, payload: DiscordMessage, message: SetupDesiredProps<Message, TProps, TBehavior>) => any
     messageCall: (bot: Bot<TProps, TBehavior>, payload: DiscordMessageCall, call: SetupDesiredProps<MessageCall, TProps, TBehavior>) => any
@@ -388,6 +397,7 @@ export type Transformers<TProps extends TransformersDesiredProperties, TBehavior
       payload: DiscordThreadMemberGuildCreate,
       threadMemberGuildCreate: ThreadMemberGuildCreate,
     ) => any
+    unfurledMediaItem: (bot: Bot<TProps, TBehavior>, payload: DiscordUnfurledMediaItem, unfurledMediaItem: UnfurledMediaItem) => any
     user: (bot: Bot<TProps, TBehavior>, payload: DiscordUser, user: SetupDesiredProps<User, TProps, TBehavior>) => any
     voiceRegion: (bot: Bot<TProps, TBehavior>, payload: DiscordVoiceRegion, voiceRegion: VoiceRegion) => any
     voiceState: (bot: Bot<TProps, TBehavior>, payload: DiscordVoiceState, voiceState: SetupDesiredProps<VoiceState, TProps, TBehavior>) => any
@@ -408,9 +418,11 @@ export type Transformers<TProps extends TransformersDesiredProperties, TBehavior
     component: (bot: Bot<TProps, TBehavior>, payload: Component) => DiscordMessageComponent
     createApplicationCommand: (bot: Bot<TProps, TBehavior>, payload: CreateApplicationCommand) => DiscordCreateApplicationCommand
     embed: (bot: Bot<TProps, TBehavior>, payload: Embed) => DiscordEmbed
+    mediaGalleryItem: (bot: Bot<TProps, TBehavior>, payload: MediaGalleryItem) => DiscordMediaGalleryItem
     member: (bot: Bot<TProps, TBehavior>, payload: SetupDesiredProps<Member, TProps, TBehavior>) => DiscordMember
     snowflake: (snowflake: BigString) => string
     team: (bot: Bot<TProps, TBehavior>, payload: Team) => DiscordTeam
+    unfurledMediaItem: (bot: Bot<TProps, TBehavior>, payload: UnfurledMediaItem) => DiscordUnfurledMediaItem
     user: (bot: Bot<TProps, TBehavior>, payload: SetupDesiredProps<User, TProps, TBehavior>) => DiscordUser
   }
   activity: (bot: Bot<TProps, TBehavior>, payload: DiscordActivity) => Activity
@@ -480,6 +492,7 @@ export type Transformers<TProps extends TransformersDesiredProperties, TBehavior
   ) => SetupDesiredProps<InviteStageInstance, TProps, TBehavior>
   lobby: (bot: Bot<TProps, TBehavior>, payload: DiscordLobby) => SetupDesiredProps<Lobby, TProps, TBehavior>
   lobbyMember: (bot: Bot<TProps, TBehavior>, payload: DiscordLobbyMember) => SetupDesiredProps<LobbyMember, TProps, TBehavior>
+  mediaGalleryItem: (bot: Bot<TProps, TBehavior>, payload: DiscordMediaGalleryItem) => MediaGalleryItem
   member: (
     bot: Bot<TProps, TBehavior>,
     payload: DiscordMember,
@@ -516,6 +529,7 @@ export type Transformers<TProps extends TransformersDesiredProperties, TBehavior
   template: (bot: Bot<TProps, TBehavior>, payload: DiscordTemplate) => Template
   threadMember: (bot: Bot<TProps, TBehavior>, payload: DiscordThreadMember) => ThreadMember
   threadMemberGuildCreate: (bot: Bot<TProps, TBehavior>, payload: DiscordThreadMemberGuildCreate) => ThreadMemberGuildCreate
+  unfurledMediaItem: (bot: Bot<TProps, TBehavior>, payload: DiscordUnfurledMediaItem) => UnfurledMediaItem
   user: (bot: Bot<TProps, TBehavior>, payload: DiscordUser) => SetupDesiredProps<User, TProps, TBehavior>
   voiceRegion: (bot: Bot<TProps, TBehavior>, payload: DiscordVoiceRegion) => VoiceRegion
   voiceState: (
@@ -572,6 +586,7 @@ export function createTransformers<TProps extends TransformersDesiredProperties,
       inviteStageInstance: options.customizers?.inviteStageInstance ?? defaultCustomizer,
       lobby: options.customizers?.lobby ?? defaultCustomizer,
       lobbyMember: options.customizers?.lobbyMember ?? defaultCustomizer,
+      mediaGalleryItem: options.customizers?.mediaGalleryItem ?? defaultCustomizer,
       member: options.customizers?.member ?? defaultCustomizer,
       message: options.customizers?.message ?? defaultCustomizer,
       messageCall: options.customizers?.messageCall ?? defaultCustomizer,
@@ -593,6 +608,7 @@ export function createTransformers<TProps extends TransformersDesiredProperties,
       template: options.customizers?.template ?? defaultCustomizer,
       threadMember: options.customizers?.threadMember ?? defaultCustomizer,
       threadMemberGuildCreate: options.customizers?.threadMemberGuildCreate ?? defaultCustomizer,
+      unfurledMediaItem: options.customizers?.unfurledMediaItem ?? defaultCustomizer,
       user: options.customizers?.user ?? defaultCustomizer,
       voiceRegion: options.customizers?.voiceRegion ?? defaultCustomizer,
       voiceState: options.customizers?.voiceState ?? defaultCustomizer,
@@ -614,9 +630,11 @@ export function createTransformers<TProps extends TransformersDesiredProperties,
       component: options.reverse?.component ?? transformComponentToDiscordComponent,
       createApplicationCommand: options.reverse?.createApplicationCommand ?? transformCreateApplicationCommandToDiscordCreateApplicationCommand,
       embed: options.reverse?.embed ?? transformEmbedToDiscordEmbed,
+      mediaGalleryItem: options.reverse?.mediaGalleryItem ?? transformMediaGalleryItemToDiscordMediaGalleryItem,
       member: options.reverse?.member ?? transformMemberToDiscordMember,
       snowflake: options.reverse?.snowflake ?? bigintToSnowflake,
       team: options.reverse?.team ?? transformTeamToDiscordTeam,
+      unfurledMediaItem: options.reverse?.unfurledMediaItem ?? transformUnfurledMediaItemToDiscordUnfurledMediaItem,
       user: options.reverse?.user ?? transformUserToDiscordUser,
     },
     activity: options.activity ?? transformActivity,
@@ -656,6 +674,7 @@ export function createTransformers<TProps extends TransformersDesiredProperties,
     inviteStageInstance: options.inviteStageInstance ?? transformInviteStageInstance,
     lobby: options.lobby ?? transformLobby,
     lobbyMember: options.lobbyMember ?? transformLobbyMember,
+    mediaGalleryItem: options.mediaGalleryItem ?? transformMediaGalleryItem,
     member: options.member ?? transformMember,
     message: options.message ?? transformMessage,
     messageCall: options.messageCall ?? transformMessageCall,
@@ -678,6 +697,7 @@ export function createTransformers<TProps extends TransformersDesiredProperties,
     template: options.template ?? transformTemplate,
     threadMember: options.threadMember ?? transformThreadMember,
     threadMemberGuildCreate: options.threadMemberGuildCreate ?? transformThreadMemberGuildCreate,
+    unfurledMediaItem: options.unfurledMediaItem ?? transformUnfurledMediaItem,
     user: options.user ?? transformUser,
     voiceRegion: options.voiceRegion ?? transformVoiceRegion,
     voiceState: options.voiceState ?? transformVoiceState,

packages/bot/src/transformers/component.ts

@@ -1,12 +1,26 @@
 import {
   type DiscordActionRow,
   type DiscordButtonComponent,
-  type DiscordInputTextComponent,
+  type DiscordFileComponent,
+  type DiscordMediaGalleryComponent,
   type DiscordMessageComponent,
+  type DiscordSectionComponent,
   type DiscordSelectMenuComponent,
+  type DiscordSeparatorComponent,
+  type DiscordTextDisplayComponent,
+  type DiscordTextInputComponent,
+  type DiscordThumbnailComponent,
   MessageComponentTypes,
 } from '@discordeno/types'
-import type { Bot, Component } from '../index.js'
+import type {
+  Bot,
+  Component,
+  DiscordContainerComponent,
+  DiscordMediaGalleryItem,
+  DiscordUnfurledMediaItem,
+  MediaGalleryItem,
+  UnfurledMediaItem,
+} from '../index.js'
 
 export function transformComponent(bot: Bot, payload: DiscordMessageComponent): Component {
   let component: Component
@@ -17,26 +31,78 @@ export function transformComponent(bot: Bot, payload: DiscordMessageComponent):
       component = transformActionRow(bot, payload)
       break
     case MessageComponentTypes.Button:
-      component = transformButtonComponent(bot, payload as DiscordButtonComponent)
+      component = transformButtonComponent(bot, payload)
+      break
+    case MessageComponentTypes.Container:
+      component = transformContainerComponent(bot, payload)
       break
     case MessageComponentTypes.InputText:
-      component = transformInputTextComponent(bot, payload as DiscordInputTextComponent)
+      component = transformInputTextComponent(bot, payload)
       break
     case MessageComponentTypes.SelectMenu:
     case MessageComponentTypes.SelectMenuChannels:
     case MessageComponentTypes.SelectMenuRoles:
     case MessageComponentTypes.SelectMenuUsers:
     case MessageComponentTypes.SelectMenuUsersAndRoles:
-      component = transformSelectMenuComponent(bot, payload as DiscordSelectMenuComponent)
+      component = transformSelectMenuComponent(bot, payload)
+      break
+    case MessageComponentTypes.Section:
+      component = transformSectionComponent(bot, payload)
+      break
+    case MessageComponentTypes.Thumbnail:
+      component = transformThumbnailComponent(bot, payload)
+      break
+    case MessageComponentTypes.MediaGallery:
+      component = transformMediaGalleryComponent(bot, payload)
+      break
+    case MessageComponentTypes.File:
+      component = transformFileComponent(bot, payload)
+      break
+    case MessageComponentTypes.Separator:
+    case MessageComponentTypes.TextDisplay:
+      component = keepAsIs(bot, payload)
       break
   }
 
   return bot.transformers.customizers.component(bot, payload, component)
 }
 
+export function transformUnfurledMediaItem(bot: Bot, payload: DiscordUnfurledMediaItem): UnfurledMediaItem {
+  const mediaItem: UnfurledMediaItem = {
+    url: payload.url,
+    proxyUrl: payload.proxy_url,
+    height: payload.height,
+    width: payload.width,
+    contentType: payload.content_type,
+  }
+
+  return bot.transformers.customizers.unfurledMediaItem(bot, payload, mediaItem)
+}
+
+export function transformMediaGalleryItem(bot: Bot, payload: DiscordMediaGalleryItem): MediaGalleryItem {
+  const mediaItem: MediaGalleryItem = {
+    media: bot.transformers.unfurledMediaItem(bot, payload.media),
+    description: payload.description,
+    spoiler: payload.spoiler,
+  }
+
+  return bot.transformers.customizers.mediaGalleryItem(bot, payload, mediaItem)
+}
+
 function transformActionRow(bot: Bot, payload: DiscordActionRow): Component {
   return {
     type: MessageComponentTypes.ActionRow,
+    id: payload.id,
+    components: payload.components.map((component) => bot.transformers.component(bot, component)),
+  }
+}
+
+function transformContainerComponent(bot: Bot, payload: DiscordContainerComponent): Component {
+  return {
+    type: MessageComponentTypes.Container,
+    id: payload.id,
+    accentColor: payload.accent_color ?? undefined,
+    spoiler: payload.spoiler,
     components: payload.components.map((component) => bot.transformers.component(bot, component)),
   }
 }
@@ -44,6 +110,7 @@ function transformActionRow(bot: Bot, payload: DiscordActionRow): Component {
 function transformButtonComponent(bot: Bot, payload: DiscordButtonComponent): Component {
   return {
     type: MessageComponentTypes.Button,
+    id: payload.id,
     label: payload.label,
     customId: payload.custom_id,
     style: payload.style,
@@ -60,9 +127,10 @@ function transformButtonComponent(bot: Bot, payload: DiscordButtonComponent): Co
   }
 }
 
-function transformInputTextComponent(_bot: Bot, payload: DiscordInputTextComponent): Component {
+function transformInputTextComponent(_bot: Bot, payload: DiscordTextInputComponent): Component {
   return {
     type: MessageComponentTypes.InputText,
+    id: payload.id,
     style: payload.style,
     required: payload.required,
     customId: payload.custom_id,
@@ -77,6 +145,7 @@ function transformInputTextComponent(_bot: Bot, payload: DiscordInputTextCompone
 function transformSelectMenuComponent(bot: Bot, payload: DiscordSelectMenuComponent): Component {
   return {
     type: payload.type,
+    id: payload.id,
     customId: payload.custom_id,
     placeholder: payload.placeholder,
     minValues: payload.min_values,
@@ -102,3 +171,43 @@ function transformSelectMenuComponent(bot: Bot, payload: DiscordSelectMenuCompon
     disabled: payload.disabled,
   }
 }
+
+function transformSectionComponent(bot: Bot, payload: DiscordSectionComponent): Component {
+  return {
+    type: MessageComponentTypes.Section,
+    id: payload.id,
+    components: payload.components.map((component) => bot.transformers.component(bot, component)),
+    accessory: bot.transformers.component(bot, payload.accessory),
+  }
+}
+
+function transformThumbnailComponent(bot: Bot, payload: DiscordThumbnailComponent): Component {
+  return {
+    type: MessageComponentTypes.Thumbnail,
+    id: payload.id,
+    media: bot.transformers.unfurledMediaItem(bot, payload.media),
+    description: payload.description,
+    spoiler: payload.spoiler,
+  }
+}
+
+function transformMediaGalleryComponent(bot: Bot, payload: DiscordMediaGalleryComponent): Component {
+  return {
+    type: MessageComponentTypes.MediaGallery,
+    id: payload.id,
+    items: payload.items.map((media) => bot.transformers.mediaGalleryItem(bot, media)),
+  }
+}
+
+function transformFileComponent(bot: Bot, payload: DiscordFileComponent): Component {
+  return {
+    type: MessageComponentTypes.File,
+    id: payload.id,
+    file: bot.transformers.unfurledMediaItem(bot, payload.file),
+    spoiler: payload.spoiler,
+  }
+}
+
+function keepAsIs(_bot: Bot, payload: DiscordTextDisplayComponent | DiscordSeparatorComponent): Component {
+  return payload
+}

packages/bot/src/transformers/reverse/component.ts

@@ -1,5 +1,22 @@
 import { type DiscordButtonComponent, type DiscordMessageComponent, MessageComponentTypes, type TextStyles } from '@discordeno/types'
-import type { Bot, ButtonStyles, Component, DiscordActionRow, DiscordInputTextComponent, DiscordSelectMenuComponent } from '../../index.js'
+import type {
+  Bot,
+  ButtonStyles,
+  Component,
+  DiscordActionRow,
+  DiscordContainerComponent,
+  DiscordFileComponent,
+  DiscordMediaGalleryComponent,
+  DiscordMediaGalleryItem,
+  DiscordSectionComponent,
+  DiscordSelectMenuComponent,
+  DiscordTextDisplayComponent,
+  DiscordTextInputComponent,
+  DiscordThumbnailComponent,
+  DiscordUnfurledMediaItem,
+  MediaGalleryItem,
+  UnfurledMediaItem,
+} from '../../index.js'
 
 export function transformComponentToDiscordComponent(bot: Bot, payload: Component): DiscordMessageComponent {
   // This switch should include all cases
@@ -8,6 +25,8 @@ export function transformComponentToDiscordComponent(bot: Bot, payload: Componen
       return transformActionRow(bot, payload)
     case MessageComponentTypes.Button:
       return transformButtonComponent(bot, payload)
+    case MessageComponentTypes.Container:
+      return transformContainerComponent(bot, payload)
     case MessageComponentTypes.InputText:
       return transformInputTextComponent(bot, payload)
     case MessageComponentTypes.SelectMenu:
@@ -16,21 +35,64 @@ export function transformComponentToDiscordComponent(bot: Bot, payload: Componen
     case MessageComponentTypes.SelectMenuUsers:
     case MessageComponentTypes.SelectMenuUsersAndRoles:
       return transformSelectMenuComponent(bot, payload)
+    case MessageComponentTypes.Section:
+      return transformSectionComponent(bot, payload)
+    case MessageComponentTypes.File:
+      return transformFileComponent(bot, payload)
+    case MessageComponentTypes.MediaGallery:
+      return transformMediaGalleryComponent(bot, payload)
+    case MessageComponentTypes.Thumbnail:
+      return transformThumbnailComponent(bot, payload)
+    case MessageComponentTypes.Separator:
+    case MessageComponentTypes.TextDisplay:
+      // As of now they are compatible
+      return payload as DiscordMessageComponent
+  }
+}
+
+export function transformUnfurledMediaItemToDiscordUnfurledMediaItem(_bot: Bot, payload: UnfurledMediaItem): DiscordUnfurledMediaItem {
+  return {
+    url: payload.url,
+    proxy_url: payload.proxyUrl,
+    height: payload.height,
+    width: payload.width,
+    content_type: payload.contentType,
+  }
+}
+
+export function transformMediaGalleryItemToDiscordMediaGalleryItem(bot: Bot, payload: MediaGalleryItem): DiscordMediaGalleryItem {
+  return {
+    media: bot.transformers.reverse.unfurledMediaItem(bot, payload.media),
+    description: payload.description,
+    spoiler: payload.spoiler,
   }
 }
 
 function transformActionRow(bot: Bot, payload: Component): DiscordActionRow {
   return {
     type: MessageComponentTypes.ActionRow,
+    id: payload.id,
     // The actionRow.components type is kinda annoying, so we need a cast for this
     components: (payload.components?.map((component) => bot.transformers.reverse.component(bot, component)) ?? []) as DiscordActionRow['components'],
   }
 }
 
+function transformContainerComponent(bot: Bot, payload: Component): DiscordContainerComponent {
+  return {
+    type: MessageComponentTypes.Container,
+    id: payload.id,
+    accent_color: payload.accentColor,
+    spoiler: payload.spoiler,
+    components: (payload.components?.map((component) => bot.transformers.reverse.component(bot, component)) ??
+      []) as DiscordContainerComponent['components'],
+  }
+}
+
 function transformButtonComponent(bot: Bot, payload: Component): DiscordButtonComponent {
   // Since Component is a merge of all components, some casts are necessary
   return {
     type: MessageComponentTypes.Button,
+    id: payload.id,
     style: payload.style as ButtonStyles,
     custom_id: payload.customId,
     disabled: payload.disabled,
@@ -47,10 +109,11 @@ function transformButtonComponent(bot: Bot, payload: Component): DiscordButtonCo
   }
 }
 
-function transformInputTextComponent(_bot: Bot, payload: Component): DiscordInputTextComponent {
+function transformInputTextComponent(_bot: Bot, payload: Component): DiscordTextInputComponent {
   // Since Component is a merge of all components, some casts are necessary
   return {
     type: MessageComponentTypes.InputText,
+    id: payload.id,
     style: payload.style as TextStyles,
     custom_id: payload.customId!,
     label: payload.label!,
@@ -65,6 +128,7 @@ function transformInputTextComponent(_bot: Bot, payload: Component): DiscordInpu
 function transformSelectMenuComponent(bot: Bot, payload: Component): DiscordSelectMenuComponent {
   return {
     type: payload.type as DiscordSelectMenuComponent['type'],
+    id: payload.id,
     custom_id: payload.customId!,
     channel_types: payload.channelTypes,
     default_values: payload.defaultValues?.map((defaultValue) => ({
@@ -90,3 +154,39 @@ function transformSelectMenuComponent(bot: Bot, payload: Component): DiscordSele
     placeholder: payload.placeholder,
   }
 }
+
+function transformSectionComponent(bot: Bot, payload: Component): DiscordSectionComponent {
+  return {
+    type: MessageComponentTypes.Section,
+    id: payload.id,
+    components: payload.components?.map((component) => bot.transformers.reverse.component(bot, component)) as DiscordTextDisplayComponent[],
+    accessory: (payload.accessory ? bot.transformers.reverse.component(bot, payload.accessory) : undefined) as DiscordSectionComponent['accessory'],
+  }
+}
+
+function transformFileComponent(bot: Bot, payload: Component): DiscordFileComponent {
+  return {
+    type: MessageComponentTypes.File,
+    id: payload.id,
+    file: bot.transformers.reverse.unfurledMediaItem(bot, payload.file!),
+    spoiler: payload.spoiler,
+  }
+}
+
+function transformMediaGalleryComponent(bot: Bot, payload: Component): DiscordMediaGalleryComponent {
+  return {
+    type: MessageComponentTypes.MediaGallery,
+    id: payload.id,
+    items: payload.items?.map((item) => bot.transformers.reverse.mediaGalleryItem(bot, item)) ?? [],
+  }
+}
+
+function transformThumbnailComponent(bot: Bot, payload: Component): DiscordThumbnailComponent {
+  return {
+    type: MessageComponentTypes.Thumbnail,
+    id: payload.id,
+    media: bot.transformers.reverse.unfurledMediaItem(bot, payload.media!),
+    description: payload.description,
+    spoiler: payload.spoiler,
+  }
+}

packages/bot/src/transformers/types.ts

@@ -58,6 +58,7 @@ import type {
   ScheduledEventPrivacyLevel,
   ScheduledEventStatus,
   SelectOption,
+  SeparatorSpacingSize,
   SkuFlags,
   SortOrderTypes,
   StickerFormatTypes,
@@ -546,6 +547,50 @@ export interface Component {
   defaultValues?: DiscordComponentDefaultValue[]
   /** Identifier for a purchasable SKU, only available when using premium-style buttons */
   skuId?: bigint
+  /** Optional identifier for component */
+  id?: number
+  /** A thumbnail or a button component, with a future possibility of adding more compatible components */
+  accessory?: Component
+  /** Text that will be displayed similar to a message */
+  content?: string
+  /** Alt text for the media */
+  description?: string
+  /** Whether the thumbnail should be a spoiler (or blurred out). Defaults to `false` */
+  spoiler?: boolean
+  /** 1 to 10 media gallery items */
+  items?: MediaGalleryItem[]
+  /** Whether a visual divider should be displayed in the component. Defaults to `true` */
+  divider?: boolean
+  /** Size of separator padding — `1` for small padding, `2` for large padding. Defaults to `1` */
+  spacing?: SeparatorSpacingSize
+  /** This unfurled media item is unique in that it only supports attachment references using the attachment://<filename> syntax */
+  file?: UnfurledMediaItem
+  /** This unfurled media item is unique in that it only supports attachment references using the attachment://<filename> syntax */
+  media?: UnfurledMediaItem
+  /** Color for the accent on the container as RGB from 0x000000 to 0xFFFFFF */
+  accentColor?: number
+}
+
+export interface UnfurledMediaItem {
+  /** Supports arbitrary urls and attachment://<filename> references */
+  url: string
+  /** The proxied url of the media item. This field is ignored and provided by the API as part of the response */
+  proxyUrl?: string
+  /** The height of the media item. This field is ignored and provided by the API as part of the response */
+  height?: number | null
+  /** The width of the media item. This field is ignored and provided by the API as part of the response */
+  width?: number | null
+  /** The media type of the content. This field is ignored and provided by the API as part of the response */
+  contentType?: string
+}
+
+export interface MediaGalleryItem {
+  /** A url or attachment */
+  media: UnfurledMediaItem
+  /** Alt text for the media */
+  description?: string
+  /** Whether the media should be a spoiler (or blurred out). Defaults to `false` */
+  spoiler?: boolean
 }
 
 export interface DiscordComponentDefaultValue {