Merge pull request #537 from seeyebe/fix/button-interaction-acknowledgment

fix: handle button interactions properly for slash commands

Author: Dragory

backend/src/utils.ts

@@ -1,5 +1,7 @@
 import {
+  ActionRowBuilder,
   APIEmbed,
+  ButtonBuilder,
   ChannelType,
   Client,
   DiscordAPIError,
@@ -18,6 +20,7 @@ import {
   InviteType,
   LimitedCollection,
   Message,
+  MessageActionRowComponentBuilder,
   MessageCreateOptions,
   MessageMentionOptions,
   PartialGroupDMChannel,
@@ -1306,6 +1309,20 @@ export async function confirm(
   return waitForButtonConfirm(context, content, { restrictToId: userId });
 }
 
+export function createDisabledButtonRow(
+  row: ActionRowBuilder<MessageActionRowComponentBuilder>
+): ActionRowBuilder<MessageActionRowComponentBuilder> {
+  const newRow = new ActionRowBuilder<MessageActionRowComponentBuilder>();
+  for (const component of row.components) {
+    if (component instanceof ButtonBuilder) {
+      newRow.addComponents(
+        ButtonBuilder.from(component).setDisabled(true)
+      );
+    }
+  }
+  return newRow;
+}
+
 export function messageSummary(msg: SavedMessage) {
   // Regular text content
   let result = "```\n" + (msg.data.content ? escapeCodeBlock(msg.data.content) : "<no text content>") + "```";

backend/src/utils/waitForInteraction.ts

@@ -9,7 +9,7 @@ import {
 import moment from "moment-timezone";
 import { v4 as uuidv4 } from "uuid";
 import { GenericCommandSource, isContextInteraction, sendContextResponse } from "../pluginUtils.js";
-import { noop } from "../utils.js";
+import { noop, createDisabledButtonRow } from "../utils.js";
 
 export async function waitForButtonConfirm(
   context: GenericCommandSource,
@@ -24,34 +24,42 @@ export async function waitForButtonConfirm(
         .setStyle(ButtonStyle.Success)
         .setLabel(options?.confirmText || "Confirm")
         .setCustomId(`confirmButton:${idMod}:${uuidv4()}`),
-
       new ButtonBuilder()
         .setStyle(ButtonStyle.Danger)
         .setLabel(options?.cancelText || "Cancel")
         .setCustomId(`cancelButton:${idMod}:${uuidv4()}`),
     ]);
     const message = await sendContextResponse(context, { ...toPost, components: [row] }, true);
-
     const collector = message.createMessageComponentCollector({ time: 10000 });
 
     collector.on("collect", (interaction: MessageComponentInteraction) => {
       if (options?.restrictToId && options.restrictToId !== interaction.user.id) {
         interaction
           .reply({ content: `You are not permitted to use these buttons.`, ephemeral: true })
-          // tslint:disable-next-line no-console
-          .catch((err) => console.trace(err.message));
-      } else {
-        if (interaction.customId.startsWith(`confirmButton:${idMod}:`)) {
-          if (!contextIsInteraction) message.delete();
-          resolve(true);
-        } else if (interaction.customId.startsWith(`cancelButton:${idMod}:`)) {
-          if (!contextIsInteraction) message.delete();
-          resolve(false);
+          .catch(noop);
+      } else if (interaction.customId.startsWith(`confirmButton:${idMod}:`)) {
+        if (!contextIsInteraction) {
+          message.delete().catch(noop);
+        } else {
+          interaction.update({ components: [createDisabledButtonRow(row)] }).catch(noop);
+        }
+        resolve(true);
+      } else if (interaction.customId.startsWith(`cancelButton:${idMod}:`)) {
+        if (!contextIsInteraction) {
+          message.delete().catch(noop);
+        } else {
+          interaction.update({ components: [createDisabledButtonRow(row)] }).catch(noop);
         }
+        resolve(false);
       }
     });
+
     collector.on("end", () => {
-      if (!contextIsInteraction && message.deletable) message.delete().catch(noop);
+      if (!contextIsInteraction) {
+        if (message.deletable) message.delete().catch(noop);
+      } else {
+        message.edit({ components: [createDisabledButtonRow(row)] }).catch(noop);
+      }
       resolve(false);
     });
   });