Discord Bot 按鈕互動：ActionRow、ButtonBuilder 與事件處理

import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from "discord.js";
 
const row = new ActionRowBuilder().addComponents(
  new ButtonBuilder()
    .setCustomId("confirm_delete")
    .setLabel("確認刪除")
    .setStyle(ButtonStyle.Danger),
  new ButtonBuilder()
    .setCustomId("cancel_delete")
    .setLabel("取消")
    .setStyle(ButtonStyle.Secondary)
);
 
await interaction.reply({
  content: "確定要刪除這筆記錄嗎？",
  components: [row],
  flags: 64, // ephemeral，只有本人看到
});

client.on("interactionCreate", async (interaction) => {
 
  if (interaction.isButton()) {
    const { customId } = interaction;
 
    if (customId === "confirm_delete") {
      return handleConfirmDelete(interaction);
    }
    if (customId === "cancel_delete") {
      return handleCancelDelete(interaction);
    }
    return;
  }
 
  // ... 其他互動類型
});

async function handleConfirmDelete(interaction) {
  // 執行刪除邏輯...
  await doDelete(interaction.user.id);
 
  // 更新原本的訊息，移除按鈕
  await interaction.update({
    content: "✅ 已刪除。",
    components: [], // 清空按鈕
  });
}
 
async function handleCancelDelete(interaction) {
  await interaction.update({
    content: "已取消。",
    components: [],
  });
}

// 建立按鈕時帶入目標 ID
const targetId = "user_abc123";
 
const row = new ActionRowBuilder().addComponents(
  new ButtonBuilder()
    .setCustomId(`confirm_kick_${targetId}`)
    .setLabel("確認踢出")
    .setStyle(ButtonStyle.Danger)
);

if (customId.startsWith("confirm_kick_")) {
  const targetId = customId.replace("confirm_kick_", "");
  return handleConfirmKick(interaction, targetId);
}

const row = new ActionRowBuilder().addComponents(
  new ButtonBuilder()
    .setCustomId("confirm_action")
    .setLabel("確認")
    .setStyle(ButtonStyle.Primary)
);
 
// 30 秒後停用按鈕
const reply = await interaction.reply({
  content: "請在 30 秒內確認：",
  components: [row],
  flags: 64,
});
 
setTimeout(async () => {
  const disabledRow = new ActionRowBuilder().addComponents(
    new ButtonBuilder()
      .setCustomId("confirm_action")
      .setLabel("已逾時")
      .setStyle(ButtonStyle.Secondary)
      .setDisabled(true)
  );
  await interaction.editReply({ components: [disabledRow] });
}, 30_000);

import {
  Client, GatewayIntentBits,
  ActionRowBuilder, ButtonBuilder, ButtonStyle,
} from "discord.js";
import "dotenv/config";
 
const client = new Client({
  intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMembers],
});
 
// ── 1. 指令定義 ───────────────────────────────────────────────
const COMMANDS = [
  {
    name: "delete",
    description: "刪除一筆記錄",
    options: [
      {
        name: "target_id",
        type: 3,            // STRING
        description: "要刪除的記錄 ID",
        required: true,
      },
    ],
  },
];
 
// ── 2. ready：註冊指令 ────────────────────────────────────────
client.once("ready", async () => {
  const guild = await client.guilds.fetch(process.env.GUILD_ID);
  await guild.commands.set(COMMANDS);
  console.log("✅ Bot 上線，指令已更新");
});
 
// ── 3. 發送帶按鈕的訊息（在 Slash Command handler 裡呼叫）──────
async function handleDelete(interaction) {
  const targetId = interaction.options.getString("target_id"); // 假設指令有此 option
 
  const row = new ActionRowBuilder().addComponents(
    new ButtonBuilder()
      .setCustomId(`confirm_delete_${targetId}`)
      .setLabel("確認刪除")
      .setStyle(ButtonStyle.Danger),
    new ButtonBuilder()
      .setCustomId("cancel_delete")
      .setLabel("取消")
      .setStyle(ButtonStyle.Secondary)
  );
 
  await interaction.reply({
    content: `確定要刪除 \`${targetId}\` 嗎？`,
    components: [row],
    flags: 64, // ephemeral，只有本人看到
  });
 
  // 30 秒後自動停用按鈕
  setTimeout(async () => {
    const disabledRow = new ActionRowBuilder().addComponents(
      new ButtonBuilder()
        .setCustomId(`confirm_delete_${targetId}`)
        .setLabel("已逾時")
        .setStyle(ButtonStyle.Secondary)
        .setDisabled(true)
    );
    await interaction.editReply({ components: [disabledRow] });
  }, 30_000);
}
 
// ── 4. interactionCreate：按鈕事件路由 ───────────────────────
client.on("interactionCreate", async (interaction) => {
 
  // 按鈕互動
  if (interaction.isButton()) {
    const { customId } = interaction;
 
    if (customId.startsWith("confirm_delete_")) {
      const targetId = customId.replace("confirm_delete_", "");
      return handleConfirmDelete(interaction, targetId);
    }
    if (customId === "cancel_delete") {
      return handleCancelDelete(interaction);
    }
    return;
  }
 
  // Slash Command
  if (!interaction.isChatInputCommand()) return;
  if (interaction.commandName === "delete") return handleDelete(interaction);
});
 
// ── 5. handler：確認刪除 ──────────────────────────────────────
async function handleConfirmDelete(interaction, targetId) {
  // 執行實際刪除邏輯（換成你的資料層呼叫）
  // await deleteRecord(targetId);
 
  await interaction.update({
    content: `✅ \`${targetId}\` 已刪除。`,
    components: [], // 清空按鈕
  });
}
 
async function handleCancelDelete(interaction) {
  await interaction.update({
    content: "已取消。",
    components: [],
  });
}
 
client.login(process.env.BOT_TOKEN);