Merge pull request #17 from BenjammingKirby/master

Add ephemeral selectors for multiple matching results

Author: ItsAzaria

.eslintrc.json

@@ -18,7 +18,7 @@
     "rules": {
         "indent": [
             "error",
-            4
+            4,  { "SwitchCase": 1 }
         ],
         "linebreak-style": [
             "error",

dockerfile

@@ -1,4 +1,4 @@
-FROM node:17-alpine3.12
+FROM node:17-alpine3.14
 RUN apk add --update git
 WORKDIR /usr/app
 COPY package*.json ./

package-lock.json

@@ -18,10 +18,10 @@
     "@discordjs/builders": "^0.11.0",
     "@discordjs/rest": "^0.2.0-canary.0",
     "discord-api-types": "^0.26.1",
-    "discord.js": "^13.5.1",
+    "discord.js": "^13.6.0",
     "discord.js-docs": "github:BenjammingKirby/discord.js-docs#typescriptRewrite",
-    "dotenv": "^10.0.0",
-    "fast-xml-parser": "^4.0.0-beta.7",
+    "dotenv": "^12.0.3",
+    "fast-xml-parser": "^4.0.1",
     "flexsearch": "^0.7.21",
     "glob": "^7.2.0",
     "node-fetch": "^2.6.6",
@@ -30,14 +30,14 @@
   "devDependencies": {
     "@types/flexsearch": "^0.7.2",
     "@types/glob": "^7.2.0",
-    "@types/node": "^16.11.11",
+    "@types/node": "^17.0.8",
     "@types/node-fetch": "^2.5.12",
-    "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "@typescript-eslint/parser": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.3.0",
-    "prettier": "^2.5.0",
+    "eslint": "^8.6.0",
+    "prettier": "^2.5.1",
     "ts-node-dev": "^1.1.8",
     "typescript": "^4.5.4"
   }
-}
+}

package.json

@@ -1,7 +1,7 @@
 import "dotenv/config";
 import { Client, Collection, LimitedCollection } from "discord.js";
 import { MyContext } from "./interfaces";
-import { loadCommands, commandHandler } from "./handlers/CommandHandler";
+import { loadCommands, interactionCreateHandler } from "./handlers/CommandHandler";
 import { messageHandler } from "./handlers/MessageHandler";
 
 (async function () {
@@ -42,7 +42,7 @@ import { messageHandler } from "./handlers/MessageHandler";
     });
 
     docsBot.on("messageCreate", messageHandler);
-    docsBot.on("interactionCreate", commandHandler.bind(null, context));
+    docsBot.on("interactionCreate", interactionCreateHandler.bind(null, context));
 
     docsBot.login(process.env.TOKEN);
 })();

src/bot.ts

@@ -2,6 +2,9 @@ import { Command } from "../../interfaces";
 import { SlashCommandBuilder } from "@discordjs/builders";
 import Doc, { sources } from "discord.js-docs";
 import { checkEmbedLimits } from "../../utils/EmbedUtils";
+import { deleteButton } from "../../utils/CommandUtils";
+import { MessageActionRow, MessageSelectMenu } from "discord.js";
+import type { APIEmbed } from "discord-api-types";
 
 const supportedBranches = Object.keys(sources).map((branch) => [capitalize(branch), branch] as [string, string]);
 
@@ -29,6 +32,7 @@ const command: Command = {
                 .setRequired(false),
         ),
     async execute(interaction) {
+        const deleteButtonRow = new MessageActionRow().addComponents([deleteButton(interaction.user.id)]);
         const query = interaction.options.getString("query");
         // The Default source should be stable
         const source: keyof typeof sources =
@@ -37,20 +41,38 @@ const command: Command = {
         const searchPrivate = interaction.options.getBoolean("private") || false;
         const doc = await Doc.fetch(source, { force: true });
 
-        const resultEmbed = doc.resolveEmbed(query, { excludePrivateElements: !searchPrivate });
-
-        const notFoundEmbed = doc.baseEmbed();
-        notFoundEmbed.description = "Didn't find any results for that query";
+        // const resultEmbed = doc.resolveEmbed(query, { excludePrivateElements: !searchPrivate });
+        const result = searchDJSDoc(doc, query, searchPrivate);
         // If a result wasn't found
-        if (!resultEmbed || resultEmbed.description === "") {
+        if (!result || (result as APIEmbed).description === "") {
+            const notFoundEmbed = doc.baseEmbed();
+            notFoundEmbed.description = "Didn't find any results for that query";
+
             const timeStampDate = new Date(notFoundEmbed.timestamp);
             // Satisfies the method's MessageEmbedOption type
             const embedObj = { ...notFoundEmbed, timestamp: timeStampDate };
 
-            interaction.editReply({ embeds: [embedObj] }).catch(console.error);
+            await interaction.reply({ embeds: [embedObj], ephemeral: true }).catch(console.error);
             return;
-        }
+        } else if (Array.isArray(result)) {
+            // If there are multiple results, send a select menu from which the user can choose which one to send
 
+            const selectMenuRow = new MessageActionRow().addComponents(
+                new MessageSelectMenu()
+                    .setCustomId(`djsselect/${source}/${searchPrivate}/${interaction.user.id}`)
+                    .addOptions(result)
+                    .setPlaceholder("Select documentation to send"),
+            );
+            await interaction
+                .reply({
+                    content: "Didn't find an exact match, please select one from below",
+                    ephemeral: true,
+                    components: [selectMenuRow],
+                })
+                .catch(console.error);
+            return;
+        }
+        const resultEmbed = result;
         const timeStampDate = new Date(resultEmbed.timestamp);
         const embedObj = { ...resultEmbed, timestamp: timeStampDate };
 
@@ -60,7 +82,7 @@ const command: Command = {
             // The final field should be the View Source button
             embedObj.fields = [embedObj.fields?.at(-1)];
         }
-        interaction.editReply({ embeds: [embedObj] }).catch(console.error);
+        await interaction.reply({ embeds: [embedObj], components: [deleteButtonRow] }).catch(console.error);
         return;
     },
 };
@@ -72,4 +94,51 @@ function capitalize(str: string) {
         .join("-");
 }
 
+// Export to reuse on the select menu handler
+export function searchDJSDoc(doc: Doc, query: string, searchPrivate?: boolean) {
+    const options = { excludePrivateElements: !searchPrivate };
+
+    const singleElement = doc.get(...query.split(/\.|#/));
+    // Return embed for the single element, the exact match
+    if (singleElement) return singleElement.embed(options);
+
+    const searchResults = doc.search(query, options);
+    if (!searchResults) return null;
+    return searchResults.map((res) => {
+        // Labels and values have a limit of 100 characters
+        const description = res.description.length >= 99 ? res.description.slice(0, 96) + "..." : res.description;
+        return {
+            label: res.formattedName,
+            description,
+            emoji: resolveRegionalEmoji(res.embedPrefix),
+            value: res.formattedName,
+        };
+    });
+}
+/**
+ * Return the unicode version of the regional emojis
+ * @param regionalEmoji
+ * @returns The unicode version of the emoji
+ */
+function resolveRegionalEmoji(regionalEmoji: string) {
+    const character = regionalEmoji.match(/:regional_indicator_(.):/)?.[1];
+    if (!character) return null;
+    switch (character) {
+        case "c":
+            return "🇨";
+        case "e":
+            return "🇪";
+        case "i":
+            return "🇮";
+        case "m":
+            return "🇲";
+        case "t":
+            return "🇹";
+        case "p":
+            return "🇵";
+        default:
+            return null;
+    }
+}
+
 export default command;

src/commands/docs/djs.ts

@@ -1,5 +1,6 @@
 import { SlashCommandBuilder } from "@discordjs/builders";
-import { MessageEmbed } from "discord.js";
+import { deleteButton } from "../../utils/CommandUtils";
+import { MessageActionRow, MessageEmbed, MessageSelectMenu } from "discord.js";
 import { gunzipSync } from "zlib";
 import { XMLParser } from "fast-xml-parser";
 import { Command } from "../../interfaces";
@@ -20,7 +21,7 @@ let sources = {
 
 const MDN_BASE_URL = "https://developer.mozilla.org/en-US/docs/" as const;
 const MDN_ICON_URL = "https://i.imgur.com/1P4wotC.png" as const;
-const MDN_BLUE_COLOR = 0x83BFFF as const;
+const MDN_BLUE_COLOR = 0x83bfff as const;
 
 const command: Command = {
     data: new SlashCommandBuilder()
@@ -33,52 +34,81 @@ const command: Command = {
                 .setRequired(true),
         ),
     async execute(interaction) {
+        const deleteButtonRow = new MessageActionRow().addComponents([deleteButton(interaction.user.id)]);
         const query = interaction.options.getString("query");
         const { index, sitemap } = await getSources();
         const search: string[] = index.search(query, { limit: 10 }).map((id) => sitemap[<number>id].loc);
         const embed = new MessageEmbed()
             .setColor(MDN_BLUE_COLOR)
-            .setAuthor("MDN Documentation", MDN_ICON_URL)
-            .setTitle(`Search for: ${query}`);
+            .setAuthor({ name: "MDN Documentation", iconURL: MDN_ICON_URL })
+            .setTitle(`Search for: ${query.slice(0, 243)}`);
 
         if (!search.length) {
-            embed.setColor(0xFF0000).setDescription("No results found...");
-            interaction.editReply({ embeds: [embed] });
+            embed.setColor(0xff0000).setDescription("No results found...");
+            await interaction.reply({ embeds: [embed], ephemeral: true });
             return;
-        }
+        } else if (search.length === 1) {
+            const resultEmbed = await getSingleMDNSearchResults(search[0]);
+            await interaction
+                .reply({
+                    embeds: [resultEmbed],
+                    components: [deleteButtonRow],
+                })
+                .catch(console.error);
 
-        if (search.length === 1) {
-            const res = await fetch(`${MDN_BASE_URL + search[0]}/index.json`);
-            const doc: MdnDoc = (await res.json()).doc;
-            const docEmbed = embed
-                .setColor(0xFFFFFF)
-                .setTitle(doc.pageTitle)
-                .setURL(`https://developer.mozilla.org/${doc.mdn_url}`)
-                .setThumbnail(this.MDN_ICON_URL)
-                .setDescription(doc.summary);
-            interaction.editReply({ embeds: [docEmbed] });
             return;
-        }
+        } else {
+            // If there are multiple results, send a select menu from which the user can choose which one to send
+            const results = search.map((path) => `**• [${path.replace(/_|-/g, " ")}](${MDN_BASE_URL}${path})**`);
 
-        const results = search.map((path) => `**• [${path.replace(/_|-/g, " ")}](${MDN_BASE_URL}${path})**`);
-        embed.setDescription(results.join("\n"));
-        interaction.editReply({ embeds: [embed] });
-        return;
+            embed.setDescription(results.join("\n"));
+            const selectMenuRow = new MessageActionRow().addComponents(
+                new MessageSelectMenu()
+                    .setCustomId("mdnselect/" + interaction.user.id)
+                    .addOptions(
+                        search.map((val) => {
+                            const parsed = val.length >= 99 ? val.split("/").at(-1) : val;
+                            return { label: parsed, value: parsed };
+                        }),
+                    )
+                    .setPlaceholder("Select documentation to send"),
+            );
+            await interaction
+                .reply({
+                    content: "Didn't find an exact match, please select one from below",
+                    ephemeral: true,
+                    components: [selectMenuRow],
+                })
+                .catch(console.error);
+            return;
+        }
     },
 };
 
+// Export to reuse on the select menu handler
+export async function getSingleMDNSearchResults(searchQuery: string) {
+    const res = await fetch(`${MDN_BASE_URL + searchQuery}/index.json`);
+    const doc: MdnDoc = (await res.json()).doc;
+
+    return new MessageEmbed()
+        .setColor(MDN_BLUE_COLOR)
+        .setAuthor({ name: "MDN Documentation", iconURL: MDN_ICON_URL })
+        .setColor(0xffffff)
+        .setTitle(doc.pageTitle)
+        .setURL(`https://developer.mozilla.org/${doc.mdn_url}`)
+        .setThumbnail(MDN_ICON_URL)
+        .setDescription(doc.summary);
+}
 async function getSources(): Promise<typeof sources> {
     if (sources.lastUpdated && Date.now() - sources.lastUpdated < 43200000 /* 12 hours */) return sources;
 
     const res = await fetch("https://developer.mozilla.org/sitemaps/en-us/sitemap.xml.gz");
     if (!res.ok) return sources; // Fallback to old sources if the new ones are not available for any reason
-
-    const sitemap: Sitemap<number> = new XMLParser()
-        .parse(gunzipSync(await res.buffer()).toString())
-        .urlset.url.map((entry: SitemapEntry<string>) => ({
-            loc: entry.loc.slice(MDN_BASE_URL.length),
-            lastmod: new Date(entry.lastmod).valueOf(),
-        }));
+    const something = new XMLParser().parse(gunzipSync(await res.buffer()).toString());
+    const sitemap: Sitemap<number> = something.urlset.url.map((entry: SitemapEntry<string>) => ({
+        loc: entry.loc.slice(MDN_BASE_URL.length),
+        lastmod: new Date(entry.lastmod).valueOf(),
+    }));
 
     const index = new flexsearch.Index();
     sitemap.forEach((entry, idx) => index.add(idx, entry.loc));