Add Discord components v2 support for news in a beta state on a dedicated Discord server.

Author: tancred423

.env.skel

@@ -55,6 +55,7 @@ GAME_WORLDS="adamantoise,cactuar,faerie,gilgamesh,jenova,midgardsormr,sargatanas
 # Custom Emoji Markdowns
 EMOJI_DOGGO_SMILE="<:DoggoSmile:1439265481596076195>"
 EMOJI_LOADING="<a:Loading:1437414476138811422>"
+EMOJI_LODESTONE="<:Lodestone:1451149413228613773>"
 EMOJI_NEWS_TOPIC="<:Topic:1437414497383088178>"
 EMOJI_NEWS_NOTICE="<:Notice:1437414478529560637>"
 EMOJI_NEWS_MAINTENANCE="<:Maintenance:1437414477229195284>"
@@ -78,3 +79,11 @@ EMOJI_SERVER_PREFERRED_PLUS="<:SrvPrefPlus:1446646265801740448>"
 EMOJI_SERVER_PREFERRED="<:SrvPref:1446645177912524820>"
 EMOJI_SERVER_STANDARD="<:SrvStd:1446645181087744040>"
 EMOJI_SERVER_CONGESTED="<:SrvCong:1446645176079613982>"
+
+# Beta Feature Discord Components V2
+BETA_GUILD_ID_NEWS=
+BETA_CHANNEL_ID_TOPICS=
+BETA_CHANNEL_ID_NOTICES=
+BETA_CHANNEL_ID_MAINTENANCES=
+BETA_CHANNEL_ID_UPDATES=
+BETA_CHANNEL_ID_STATUSES=

src/index.ts

@@ -283,7 +283,7 @@ client.on("interactionCreate", async (interaction) => {
     if (!command) {
       log.error(`Command not found: ${interaction.commandName}`);
       const embed = DiscordEmbedService.getErrorEmbed(
-        `Command '${interaction.commandName}' not found. Try redeploying commands.`,
+        `Command '${interaction.commandName}' not found. Please try again later.`,
       );
       await interaction.reply({
         embeds: [embed],
@@ -367,7 +367,7 @@ client.on("interactionCreate", async (interaction) => {
     if (!command) {
       log.error(`Command not found: ${interaction.commandName}`);
       const embed = DiscordEmbedService.getErrorEmbed(
-        `Command '${interaction.commandName}' not found. Try redeploying commands.`,
+        `Command '${interaction.commandName}' not found. Please try again later.`,
       );
       await interaction.reply({
         embeds: [embed],

src/naagostone/type/DiscordComponentsV2.ts

@@ -0,0 +1,19 @@
+export interface TextDisplayComponent {
+  type: "textDisplay";
+  content: string;
+}
+
+export interface MediaGalleryComponent {
+  type: "mediaGallery";
+  urls: string[];
+}
+
+export interface SeparatorComponent {
+  type: "separator";
+}
+
+export type DiscordComponentV2 = TextDisplayComponent | MediaGalleryComponent | SeparatorComponent;
+
+export interface DiscordComponentsV2 {
+  components: DiscordComponentV2[];
+}

src/naagostone/type/Maintenance.ts

@@ -1,6 +1,9 @@
+import { DiscordComponentsV2 } from "./DiscordComponentsV2.ts";
+
 export interface MaintenanceDescription {
   html: string;
   markdown: string;
+  discord_components_v2?: DiscordComponentsV2;
 }
 
 export interface Maintenance {

src/naagostone/type/Notice.ts

@@ -1,6 +1,9 @@
+import { DiscordComponentsV2 } from "./DiscordComponentsV2.ts";
+
 export interface NoticeDescription {
   html: string;
   markdown: string;
+  discord_components_v2?: DiscordComponentsV2;
 }
 
 export interface Notice {

src/naagostone/type/Status.ts

@@ -1,6 +1,9 @@
+import { DiscordComponentsV2 } from "./DiscordComponentsV2.ts";
+
 export interface StatusDescription {
   html: string;
   markdown: string;
+  discord_components_v2?: DiscordComponentsV2;
 }
 
 export interface Status {

src/naagostone/type/Topic.ts

@@ -1,6 +1,9 @@
+import { DiscordComponentsV2 } from "./DiscordComponentsV2.ts";
+
 export interface TopicDescription {
   html: string;
   markdown: string;
+  discord_components_v2?: DiscordComponentsV2;
 }
 
 export interface Topic {

src/naagostone/type/Updates.ts

@@ -1,6 +1,9 @@
+import { DiscordComponentsV2 } from "./DiscordComponentsV2.ts";
+
 export interface UpdateDescription {
   html: string;
   markdown: string;
+  discord_components_v2?: DiscordComponentsV2;
 }
 
 export interface Update {

src/service/BetaComponentsV2Service.ts

@@ -0,0 +1,227 @@
+import { ContainerBuilder, MediaGalleryBuilder, MessageFlags, TextChannel, time, TimestampStyles } from "discord.js";
+import { DiscordComponentsV2 } from "../naagostone/type/DiscordComponentsV2.ts";
+import { GlobalClient } from "../index.ts";
+import * as log from "@std/log";
+
+const MAX_TOTAL_CHARACTERS = 4000;
+const MAX_TOTAL_COMPONENTS = 40;
+
+type NewsType = "topics" | "notices" | "maintenances" | "updates" | "statuses";
+
+interface NewsData {
+  title: string;
+  link: string;
+  date: number;
+  banner?: string;
+  tag?: string | null;
+  description: {
+    html: string;
+    markdown: string;
+    discord_components_v2?: DiscordComponentsV2;
+  };
+}
+
+function hexToNumber(hex: string): number {
+  return parseInt(hex.replace("#", ""), 16);
+}
+
+function getNewsTypeLabel(type: NewsType, tag?: string | null): string {
+  if (tag) return tag;
+  switch (type) {
+    case "topics":
+      return "Topic";
+    case "notices":
+      return "Notice";
+    case "maintenances":
+      return "Maintenance";
+    case "updates":
+      return "Update";
+    case "statuses":
+      return "Status";
+  }
+}
+
+function getColorEnvKey(type: NewsType): string {
+  switch (type) {
+    case "topics":
+      return "COLOR_TOPICS";
+    case "notices":
+      return "COLOR_NOTICES";
+    case "maintenances":
+      return "COLOR_MAINTENANCES";
+    case "updates":
+      return "COLOR_UPDATES";
+    case "statuses":
+      return "COLOR_STATUS";
+  }
+}
+
+function getBetaChannelEnvKey(type: NewsType): string {
+  switch (type) {
+    case "topics":
+      return "BETA_CHANNEL_ID_TOPICS";
+    case "notices":
+      return "BETA_CHANNEL_ID_NOTICES";
+    case "maintenances":
+      return "BETA_CHANNEL_ID_MAINTENANCES";
+    case "updates":
+      return "BETA_CHANNEL_ID_UPDATES";
+    case "statuses":
+      return "BETA_CHANNEL_ID_STATUSES";
+  }
+}
+
+function getNewsEmojiEnvKey(type: NewsType): string {
+  switch (type) {
+    case "topics":
+      return "EMOJI_NEWS_TOPIC";
+    case "notices":
+      return "EMOJI_NEWS_NOTICE";
+    case "maintenances":
+      return "EMOJI_NEWS_MAINTENANCE";
+    case "updates":
+      return "EMOJI_NEWS_UPDATE";
+    case "statuses":
+      return "EMOJI_NEWS_STATUS";
+  }
+}
+
+export class BetaComponentsV2Service {
+  public static async sendToBetaChannel(newsType: NewsType, data: NewsData): Promise<void> {
+    const client = GlobalClient.client;
+    if (!client) return;
+
+    const betaGuildId = Deno.env.get("BETA_GUILD_ID_NEWS");
+    const betaChannelId = Deno.env.get(getBetaChannelEnvKey(newsType));
+
+    if (!betaGuildId || !betaChannelId) return;
+
+    if (!data.description.discord_components_v2) return;
+
+    try {
+      const guild = await client.guilds.fetch(betaGuildId);
+      if (!guild) return;
+      const channel = await guild.channels.fetch(betaChannelId);
+      if (!channel) return;
+
+      const container = this.buildContainer(newsType, data);
+      if (!container) return;
+
+      await (channel as TextChannel).send({
+        components: [container],
+        flags: MessageFlags.IsComponentsV2,
+      });
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        log.error(`[BETA V2] Sending ${newsType} to beta channel was NOT successful: ${error.stack}`);
+      }
+    }
+  }
+
+  private static buildContainer(newsType: NewsType, data: NewsData): ContainerBuilder | null {
+    const colorHex = Deno.env.get(getColorEnvKey(newsType));
+    if (!colorHex) return null;
+
+    const componentsV2 = data.description.discord_components_v2;
+    if (!componentsV2) return null;
+
+    const container = new ContainerBuilder().setAccentColor(hexToNumber(colorHex));
+
+    let totalCharacters = 0;
+    let totalComponents = 0;
+
+    const newsEmoji = Deno.env.get(getNewsEmojiEnvKey(newsType)) ?? "";
+    const lodestoneEmoji = Deno.env.get("EMOJI_LODESTONE") ?? "";
+    const typeLabel = `${newsEmoji}  **${getNewsTypeLabel(newsType, data.tag)}**`;
+    const titleMarkdown = `## [${data.title}](${data.link})`;
+    const footerText = `${lodestoneEmoji}  Lodestone · ${
+      time(Math.floor(data.date / 1000), TimestampStyles.LongDateTime)
+    }`;
+
+    totalCharacters += typeLabel.length + titleMarkdown.length + footerText.length;
+    totalComponents += 4;
+
+    if (data.banner) {
+      totalComponents += 1;
+    }
+
+    for (const component of componentsV2.components) {
+      if (component.type === "textDisplay") {
+        totalCharacters += component.content.length;
+        totalComponents += 1;
+      } else if (component.type === "mediaGallery") {
+        totalComponents += 1 + component.urls.length;
+      } else if (component.type === "separator") {
+        totalComponents += 1;
+      }
+    }
+
+    if (totalCharacters > MAX_TOTAL_CHARACTERS || totalComponents > MAX_TOTAL_COMPONENTS) {
+      log.warn(
+        `[BETA V2] ${newsType} message exceeds limits (chars: ${totalCharacters}/${MAX_TOTAL_CHARACTERS}, components: ${totalComponents}/${MAX_TOTAL_COMPONENTS}). Truncating...`,
+      );
+    }
+
+    let currentCharacters = 0;
+    let currentComponents = 0;
+
+    container.addTextDisplayComponents((textDisplay) => textDisplay.setContent(typeLabel));
+    currentCharacters += typeLabel.length;
+    currentComponents += 1;
+
+    container.addTextDisplayComponents((textDisplay) => textDisplay.setContent(titleMarkdown));
+    currentCharacters += titleMarkdown.length;
+    currentComponents += 1;
+
+    if (data.banner) {
+      const bannerGallery = new MediaGalleryBuilder().addItems((item) =>
+        item.setDescription("Banner image").setURL(data.banner!)
+      );
+      container.addMediaGalleryComponents(bannerGallery);
+      currentComponents += 2;
+    }
+
+    for (const component of componentsV2.components) {
+      if (currentComponents >= MAX_TOTAL_COMPONENTS - 2) break;
+
+      if (component.type === "textDisplay") {
+        const remainingChars = MAX_TOTAL_CHARACTERS - currentCharacters - footerText.length;
+        if (remainingChars <= 0) break;
+
+        let content = component.content;
+        if (content.length > remainingChars) {
+          content = content.substring(0, remainingChars - 3) + "...";
+        }
+
+        container.addTextDisplayComponents((textDisplay) => textDisplay.setContent(content));
+        currentCharacters += content.length;
+        currentComponents += 1;
+      } else if (component.type === "mediaGallery") {
+        const remainingComponentSlots = MAX_TOTAL_COMPONENTS - currentComponents - 2;
+        if (remainingComponentSlots <= 1) break;
+
+        const maxItems = Math.min(component.urls.length, remainingComponentSlots - 1);
+        const gallery = new MediaGalleryBuilder();
+
+        for (let i = 0; i < maxItems; i++) {
+          gallery.addItems((item) => item.setDescription("Image").setURL(component.urls[i]));
+        }
+
+        container.addMediaGalleryComponents(gallery);
+        currentComponents += 1 + maxItems;
+      } else if (component.type === "separator") {
+        container.addSeparatorComponents((separator) => separator);
+        currentComponents += 1;
+      }
+    }
+
+    container.addSeparatorComponents((separator) => separator);
+    currentComponents += 1;
+
+    container.addTextDisplayComponents((textDisplay) => textDisplay.setContent(footerText));
+    currentCharacters += footerText.length;
+    currentComponents += 1;
+
+    return container;
+  }
+}

src/service/MaintenanceSenderService.ts

@@ -8,6 +8,7 @@ import { GlobalClient } from "../index.ts";
 import { Setup } from "../database/schema/setups.ts";
 import { SetupsRepository } from "../database/repository/SetupsRepository.ts";
 import { DiscordEmbedService } from "./DiscordEmbedService.ts";
+import { BetaComponentsV2Service } from "./BetaComponentsV2Service.ts";
 import * as log from "@std/log";
 
 const saveLodestoneNews = Deno.env.get("SAVE_LODESTONE_NEWS") === "true";
@@ -69,5 +70,13 @@ export class MaintenanceSenderService {
         continue;
       }
     }
+
+    await BetaComponentsV2Service.sendToBetaChannel("maintenances", {
+      title: maintenance.title,
+      link: maintenance.link,
+      date: maintenance.date,
+      tag: maintenance.tag,
+      description: maintenance.description,
+    });
   }
 }