feat(bot): add file an issue action

src/lib/discord/actions/file-an-issue.ts

@@ -0,0 +1,76 @@
+import {
+  ButtonInteraction,
+  MessageActionRow,
+  MessageButton,
+  Modal,
+  ModalSubmitInteraction,
+} from 'discord.js'
+
+export const button = new MessageButton()
+  .setCustomId('thread-file-issue')
+  .setLabel('File an issue')
+  .setStyle('SECONDARY')
+
+export const row = new MessageActionRow().addComponents(button)
+
+function createModal() {
+  const modal = new Modal()
+    .setCustomId('file-an-issue')
+    .setTitle('File an issue')
+
+  // select menu is not supported
+  // const row = new MessageActionRow().addComponents(
+  // new MessageSelectMenu()
+  //   .setCustomId('select-repo')
+  //   .setPlaceholder('Nothing selected')
+  //   .addOptions(
+  //     {
+  //       label: 'api',
+  //       description: 'Amplify API repository',
+  //       value: 'amplify-category-api',
+  //     },
+  //     {
+  //       label: 'bot',
+  //       description: 'Amplify Discord Bot repository',
+  //       value: 'discord-bot',
+  //     },
+  //     {
+  //       label: 'cli',
+  //       description: 'Amplify CLI repository',
+  //       value: 'amplify-cli',
+  //     },
+  //     {
+  //       label: 'docs',
+  //       description: 'Amplify Docs repository',
+  //       value: 'amplify-docs',
+  //     },
+  //     {
+  //       label: 'js',
+  //       description: 'Amplify JS repository',
+  //       value: 'amplify-js',
+  //     },
+  //     {
+  //       label: 'ui',
+  //       description: 'Amplify UI repository',
+  //       value: 'amplify-ui',
+  //     }
+  //   )
+  // )
+
+  // Add inputs to the modal
+  // modal.addComponents(row)
+  return modal
+}
+
+export const modal = createModal()
+
+export const buttonHandler = async (interaction: ButtonInteraction) => {
+  await interaction.showModal(modal)
+}
+
+export const modalHandler = async (interaction: ModalSubmitInteraction) => {
+  const favoriteColor =
+    interaction.fields.getTextInputValue('favoriteColorInput')
+  const hobbies = interaction.fields.getTextInputValue('hobbiesInput')
+  console.log({ favoriteColor, hobbies })
+}

src/lib/discord/client.ts

@@ -1,12 +1,19 @@
-import { Client, Intents, MessageEmbed } from 'discord.js'
+import { Client, Intents, MessageEmbed, Modal } from 'discord.js'
 import { createDiscordCommandBank } from '$discord'
-import type { Message, StartThreadOptions, ThreadChannel } from 'discord.js'
+import type {
+  ButtonInteraction,
+  Message,
+  ModalSubmitInteraction,
+  StartThreadOptions,
+  ThreadChannel,
+} from 'discord.js'
 import { prisma } from '$lib/db'
 // manually import the commands
 import giverole from './commands/giverole'
 import contribute from './commands/contribute'
 import thread, { PREFIXES } from './commands/thread'
 import github from './commands/github'
+import * as fileAnIssue from './actions/file-an-issue'
 
 export const client = new Client({
   intents: [
@@ -68,7 +75,8 @@ client.on('messageCreate', async (message: Message) => {
     embed.setDescription(
       "Hey there! :wave: we've created a thread for you!\n\nUse `/thread rename` to change the title.\n\nUse `/thread solved` to mark this thread as solved."
     )
-    thread.send({ embeds: [embed] })
+
+    thread.send({ embeds: [embed], components: [fileAnIssue.row] })
   }
 
   // capture thread updates in public "help" channels
@@ -95,24 +103,39 @@ client.on('messageCreate', async (message: Message) => {
 })
 
 client.on('interactionCreate', async (interaction) => {
-  if (!interaction.isCommand()) return
-  const { commandName } = interaction
-  console.log('Handling interaction for command', commandName)
-  const command = commands.get(commandName)
-  if (!command) {
-    await interaction.reply(`Command not found 🤕`)
-    return
+  // handle buttons
+  if (interaction.isButton()) {
+    interaction as ButtonInteraction
+    if (interaction.customId === fileAnIssue.button.customId) {
+      await fileAnIssue.buttonHandler(interaction)
+    }
   }
 
-  console.log(
-    `Handling command "${command?.name}" for ${interaction.user.username}#${interaction.user.discriminator}`
-  )
+  if (interaction.isModalSubmit()) {
+    interaction as ModalSubmitInteraction
+    // TODO: multiple modal handlers?
+    fileAnIssue.modalHandler(interaction)
+  }
 
-  const response = await commands.handle(interaction)
-  if (response) {
-    await interaction.reply(response)
+  // handle slash commands
+  if (interaction.isCommand()) {
+    const { commandName } = interaction
+    console.log('Handling interaction for command', commandName)
+    const command = commands.get(commandName)
+    if (!command) {
+      await interaction.reply(`Command not found 🤕`)
+      return
+    }
+
+    console.log(
+      `Handling command "${command?.name}" for ${interaction.user.username}#${interaction.user.discriminator}`
+    )
+
+    const response = await commands.handle(interaction)
+    if (response) {
+      await interaction.reply(response)
+    }
   }
-  return
 })
 
 client.on('rateLimit', (info) => {