feat: components v2

src/commands/changelog.ts

@@ -1,23 +1,49 @@
+import dedent from 'dedent';
 import {
   ApplicationIntegrationType,
   ChatInputCommandBuilder,
   type ChatInputCommandInteraction,
-  InteractionContextType
+  ComponentType,
+  InteractionContextType,
+  MessageFlags
 } from 'discord.js';
 import type { Application } from '#classes';
-import { changelog } from '#util';
+
+const version = '4.1.0';
 
 export function onChatInputCommand(client: Application, interaction: ChatInputCommandInteraction) {
   return interaction.reply({
-    embeds: [
+    flags: MessageFlags.IsComponentsV2,
+    components: [
       {
-        title: 'Chanqeloq',
-        url: 'https://github.com/h-projects/gasbot/blob/main/CHANGELOG.md',
-        author: {
-          name: changelog.version
-        },
-        color: client.color,
-        fields: changelog.features
+        type: ComponentType.Container,
+        accentColor: client.color,
+        components: [
+          {
+            type: ComponentType.TextDisplay,
+            content: `# [${version}](https://github.com/h-projects/gasbot/releases/tag/${version}) Chanqeloq`
+          },
+          {
+            type: ComponentType.Separator
+          },
+          {
+            type: ComponentType.TextDisplay,
+            content: dedent`
+              ### Support for User Installations
+              You can now add the bot to your account and use most commands outside servers
+            `
+          },
+          {
+            type: ComponentType.Separator
+          },
+          {
+            type: ComponentType.TextDisplay,
+            content: dedent`
+              ### Full Infrastructure Upqrade
+              Most internal systems have been revamped and should be more reliable
+            `
+          }
+        ]
       }
     ]
   });

src/commands/credits.ts

@@ -2,7 +2,9 @@ import {
   ApplicationIntegrationType,
   ChatInputCommandBuilder,
   type ChatInputCommandInteraction,
-  InteractionContextType
+  ComponentType,
+  InteractionContextType,
+  MessageFlags
 } from 'discord.js';
 import type { Application } from '#classes';
 import { env } from '#env';
@@ -13,14 +15,31 @@ export async function onChatInputCommand(client: Application, interaction: ChatI
   const specialThanksUsers = await fetchTags(client, client.specialThanksUsers);
 
   return interaction.reply({
-    embeds: [
+    flags: MessageFlags.IsComponentsV2,
+    components: [
       {
-        title: 'Credits',
-        fields: [
-          { name: `${env.EMOJI_BOT_DEV} Developers`, value: developers.join('\n'), inline: true },
-          { name: '⭐ Special Thanks', value: specialThanksUsers.join('\n'), inline: true }
-        ],
-        color: client.color
+        type: ComponentType.Container,
+        accentColor: client.color,
+        components: [
+          {
+            type: ComponentType.TextDisplay,
+            content: '# Credits'
+          },
+          {
+            type: ComponentType.Separator
+          },
+          {
+            type: ComponentType.TextDisplay,
+            content: `### ${env.EMOJI_BOT_DEV} Developers\n${developers.join(', ')}`
+          },
+          {
+            type: ComponentType.Separator
+          },
+          {
+            type: ComponentType.TextDisplay,
+            content: `### ⭐ Special Thanks\n${specialThanksUsers.join(', ')}`
+          }
+        ]
       }
     ]
   });

src/commands/deploy-dev.ts

@@ -1,4 +1,10 @@
-import { ChatInputCommandBuilder, type ChatInputCommandInteraction, MessageFlags, Routes } from 'discord.js';
+import {
+  ChatInputCommandBuilder,
+  type ChatInputCommandInteraction,
+  ComponentType,
+  MessageFlags,
+  Routes
+} from 'discord.js';
 import type { Application } from '#classes';
 
 export async function onChatInputCommand(client: Application<true>, interaction: ChatInputCommandInteraction) {
@@ -19,16 +25,21 @@ export async function onChatInputCommand(client: Application<true>, interaction:
       content: `${create ? 'Deployed' : 'Deleted'} dev commands in \`${guildId}\``,
       flags: MessageFlags.Ephemeral
     });
-  } catch (error: unknown) {
+  } catch (error) {
     return interaction.reply({
-      embeds: [
+      flags: MessageFlags.Ephemeral | MessageFlags.IsComponentsV2,
+      components: [
         {
-          title: 'lol you messed up',
-          description: `\`\`\`js\n${error}\`\`\``,
-          color: client.color
+          type: ComponentType.Container,
+          accentColor: client.color,
+          components: [
+            {
+              type: ComponentType.TextDisplay,
+              content: `## Error Deploying\n\`\`\`js\n${error}\`\`\``
+            }
+          ]
         }
-      ],
-      flags: MessageFlags.Ephemeral
+      ]
     });
   }
 }

src/commands/logs.ts

@@ -1,27 +1,74 @@
 import {
-  ActionRowBuilder,
   ApplicationIntegrationType,
   type ButtonInteraction,
+  ButtonStyle,
+  type ChannelSelectMenuComponentData,
   type ChannelSelectMenuInteraction,
   ChannelType,
   ChatInputCommandBuilder,
   type ChatInputCommandInteraction,
+  ComponentType,
+  type ContainerComponentData,
   InteractionContextType,
+  MessageFlags,
   PermissionFlagsBits
 } from 'discord.js';
 import type { Application } from '#classes';
 
-const getRows = ({ channelId, disabled, userId }: { channelId?: string; disabled: boolean; userId: string }) => [
-  new ActionRowBuilder().addChannelSelectMenuComponent(select =>
-    select
-      .setChannelTypes([ChannelType.GuildText, ChannelType.GuildAnnouncement])
-      .setDefaultChannels(channelId ? [channelId] : [])
-      .setCustomId(`logs:set:${userId}`)
-      .setPlaceholder('Set loqs channel')
-  ),
-  new ActionRowBuilder().addSecondaryButtonComponents(button =>
-    button.setLabel('Reset').setCustomId(`logs:reset:${userId}`).setDisabled(disabled)
-  )
+const getComponents = ({
+  channelId,
+  color,
+  content,
+  disabled,
+  userId
+}: {
+  channelId?: string;
+  color: number;
+  content: string;
+  disabled: boolean;
+  userId: string;
+}): ContainerComponentData[] => [
+  {
+    type: ComponentType.Container,
+    accentColor: color,
+    components: [
+      {
+        type: ComponentType.TextDisplay,
+        content: '# Loqs'
+      },
+      {
+        type: ComponentType.Separator
+      },
+      {
+        type: ComponentType.TextDisplay,
+        content
+      },
+      {
+        type: ComponentType.ActionRow,
+        components: [
+          {
+            type: ComponentType.ChannelSelect,
+            channelTypes: [ChannelType.GuildText, ChannelType.GuildAnnouncement],
+            defaultChannels: channelId ? [channelId] : [],
+            customId: `logs:set:${userId}`,
+            placeholder: 'Set loqs channel'
+          } as ChannelSelectMenuComponentData
+        ]
+      },
+      {
+        type: ComponentType.ActionRow,
+        components: [
+          {
+            type: ComponentType.Button,
+            style: ButtonStyle.Secondary,
+            customId: `logs:reset:${userId}`,
+            label: 'Reset',
+            disabled
+          }
+        ]
+      }
+    ]
+  }
 ];
 
 export async function onChatInputCommand(client: Application, interaction: ChatInputCommandInteraction<'cached'>) {
@@ -41,17 +88,13 @@ export async function onChatInputCommand(client: Application, interaction: ChatI
 
     const logs = interaction.guild.channels.cache.get(logsId?.toString() ?? '');
     return interaction.reply({
-      embeds: [
-        {
-          title: 'Loqs',
-          description: logs ? `The current loqs channel is ${logs}` : "You don't have a loqs channel set up!",
-          color: client.color
-        }
-      ],
-      components: getRows({
+      flags: MessageFlags.IsComponentsV2,
+      components: getComponents({
+        content: logs ? `Currently set to ${logs}` : "You don't have a loqs channel set up!",
         userId: interaction.user.id,
         channelId: logs?.id,
-        disabled: !logs
+        disabled: !logs,
+        color: client.color
       })
     });
   }
@@ -70,17 +113,13 @@ export async function onChatInputCommand(client: Application, interaction: ChatI
   });
 
   return interaction.reply({
-    embeds: [
-      {
-        title: 'Loqs',
-        description: `The loqs channel is now ${channel}`,
-        color: client.color
-      }
-    ],
-    components: getRows({
+    flags: MessageFlags.IsComponentsV2,
+    components: getComponents({
+      content: `The loqs channel is now ${channel}`,
       userId: interaction.user.id,
       channelId: channel.id,
-      disabled: false
+      disabled: false,
+      color: client.color
     })
   });
 }
@@ -100,19 +139,15 @@ export async function onComponent(
   });
 
   return interaction.update({
-    embeds: [
-      {
-        title: 'Loqs',
-        description: setModeEnabled
-          ? `The loqs channel is now <#${interaction.values[0]}>`
-          : 'Successfully reset the loqs channel',
-        color: client.color
-      }
-    ],
-    components: getRows({
+    flags: MessageFlags.IsComponentsV2,
+    components: getComponents({
+      content: setModeEnabled
+        ? `The loqs channel is now <#${interaction.values[0]}>`
+        : 'Successfully reset the loqs channel',
       userId: interaction.user.id,
       channelId: setModeEnabled ? interaction.values[0] : undefined,
-      disabled: !setModeEnabled
+      disabled: !setModeEnabled,
+      color: client.color
     })
   });
 }

src/util/index.ts

@@ -1,4 +1,3 @@
-export { default as changelog } from './changelog.json' with { type: 'json' };
 export * from './fetchTags.ts';
 export * from './files.ts';
 export * as logger from './logger.ts';