Merge pull request #1 from BenjammingKirby/autocomplete

add autocomplete

Author: BenjammingKirby

src/bot.ts

@@ -1,7 +1,7 @@
 import "dotenv/config";
 import { Client, Collection, LimitedCollection } from "discord.js";
 import { MyContext } from "./interfaces";
-import { loadCommands, interactionCreateHandler } from "./handlers/CommandHandler";
+import { loadCommands, interactionCreateHandler } from "./handlers/InteractionCreateHandler";
 import { messageHandler } from "./handlers/MessageHandler";
 
 (async function () {

src/commands/docs/djs.ts

@@ -16,7 +16,8 @@ const command: Command = {
             option
                 .setName("query")
                 .setDescription("Enter the phrase you'd like to search for, e.g: client#isready")
-                .setRequired(true),
+                .setRequired(true)
+                .setAutocomplete(true),
         )
         .addStringOption((option) =>
             option
@@ -39,8 +40,12 @@ const command: Command = {
             (interaction.options.getString("source") as keyof typeof sources) || "stable";
         // Whether to include private elements on the search results, by default false, shows private elements if the search returns an exact result;
         const searchPrivate = interaction.options.getBoolean("private") || false;
-        const doc = await Doc.fetch(source, { force: true });
+        const doc = await Doc.fetch(source, { force: true }).catch(console.error);
 
+        if (!doc) {
+            await interaction.reply({ content: "Couldn't fetch docs", ephemeral: true }).catch(console.error);
+            return;
+        }
         // const resultEmbed = doc.resolveEmbed(query, { excludePrivateElements: !searchPrivate });
         const result = searchDJSDoc(doc, query, searchPrivate);
         // If a result wasn't found

src/commands/docs/mdn.ts

@@ -31,7 +31,8 @@ const command: Command = {
             opt
                 .setName("query")
                 .setDescription("Enter the phrase you'd like to search for. Example: Array.filter")
-                .setRequired(true),
+                .setRequired(true)
+                .setAutocomplete(true),
         ),
     async execute(interaction) {
         const deleteButtonRow = new MessageActionRow().addComponents([deleteButton(interaction.user.id)]);
@@ -45,10 +46,15 @@ const command: Command = {
 
         if (!search.length) {
             embed.setColor(0xff0000).setDescription("No results found...");
-            await interaction.reply({ embeds: [embed], ephemeral: true });
+            await interaction.reply({ embeds: [embed], ephemeral: true }).catch(console.error);
             return;
         } else if (search.length === 1) {
             const resultEmbed = await getSingleMDNSearchResults(search[0]);
+            if (!resultEmbed) {
+                await interaction.reply({ content: "Couldn't find any results", ephemeral: true }).catch(console.error);
+                return;
+            }
+
             await interaction
                 .reply({
                     embeds: [resultEmbed],
@@ -59,15 +65,12 @@ const command: Command = {
             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})**`);
-
-            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;
+                            const parsed = val.length >= 99 ? val.split("/").slice(-2).join("/") : val;
                             return { label: parsed, value: parsed };
                         }),
                     )
@@ -87,8 +90,16 @@ const command: Command = {
 
 // 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;
+    // Search for the match once again
+    const { index, sitemap } = await getSources();
+    const secondSearch = index.search(searchQuery, { limit: 10 }).map((id) => sitemap[<number>id].loc)[0];
+
+    const res = await fetch(`${MDN_BASE_URL + secondSearch}/index.json`).catch(console.error);
+    if (!res || !res?.ok) return null;
+    const resJSON = await res.json?.().catch(console.error);
+    if (!res.json) return null;
+
+    const doc: MdnDoc = resJSON.doc;
 
     return new MessageEmbed()
         .setColor(MDN_BLUE_COLOR)
@@ -99,7 +110,7 @@ export async function getSingleMDNSearchResults(searchQuery: string) {
         .setThumbnail(MDN_ICON_URL)
         .setDescription(doc.summary);
 }
-async function getSources(): Promise<typeof sources> {
+export 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");
@@ -109,7 +120,6 @@ async function getSources(): Promise<typeof sources> {
         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));
 

src/handlers/CommandHandler.ts src/handlers/InteractionCreateHandler.tssrc/handlers/CommandHandler.ts renamed to src/handlers/InteractionCreateHandler.ts

@@ -1,22 +1,35 @@
 import type { Command, MyContext } from "../interfaces";
-import type { ButtonInteraction, CommandInteraction, Interaction, Message, SelectMenuInteraction } from "discord.js";
+import type {
+    AutocompleteInteraction,
+    ButtonInteraction,
+    CommandInteraction,
+    Interaction,
+    Message,
+    SelectMenuInteraction,
+} from "discord.js";
 import type { APIEmbed } from "discord-api-types";
 
 import { commandCooldownCheck, commandPermissionCheck, deleteButton } from "../utils/CommandUtils";
-import { getSingleMDNSearchResults } from "../commands/docs/mdn";
+import { getSingleMDNSearchResults, getSources } from "../commands/docs/mdn";
 import { searchDJSDoc } from "../commands/docs/djs";
 import { MessageActionRow } from "discord.js";
 
 import glob from "glob";
 import Doc from "discord.js-docs";
 
 export async function interactionCreateHandler(context: MyContext, interaction: Interaction<"cached">) {
-    if (interaction.isCommand()) {
-        commandInteractionHandler(context, interaction);
-    } else if (interaction.isButton()) {
-        buttonInteractionHandler(context, interaction);
-    } else if (interaction.isSelectMenu()) {
-        selectMenuInteractionHandler(context, interaction);
+    try {
+        if (interaction.isCommand()) {
+            await commandInteractionHandler(context, interaction);
+        } else if (interaction.isButton()) {
+            await buttonInteractionHandler(context, interaction);
+        } else if (interaction.isSelectMenu()) {
+            await selectMenuInteractionHandler(context, interaction);
+        } else if (interaction.isAutocomplete()) {
+            await autocompleteInteractionHandler(context, interaction);
+        }
+    } catch (e) {
+        console.error(e);
     }
 }
 /**
@@ -119,5 +132,40 @@ async function buttonInteractionHandler(context: MyContext, interaction: ButtonI
                 .catch(console.error);
     }
 }
-// TODO add autocomplete
-// async function autocompleteInteractionHandler(context: MyContext, interaction: AutocompleteInteraction) {}s
+
+async function autocompleteInteractionHandler(context: MyContext, interaction: AutocompleteInteraction) {
+    switch (interaction.commandName) {
+        case "djs": {
+            // Check the cache, the command will force fetch anyway
+            const doc = await Doc.fetch("stable", { force: false });
+            const query = interaction.options.getFocused() as string;
+            const singleElement = doc.get(...query.split(/\.|#/));
+            if (singleElement) {
+                await interaction
+                    .respond([{ name: singleElement.formattedName, value: singleElement.formattedName }])
+                    .catch(console.error);
+                return;
+            }
+            const searchResults = doc.search(query, { excludePrivateElements: false });
+            if (!searchResults) {
+                await interaction.respond([]).catch(console.error);
+                return;
+            }
+            await interaction
+                .respond(searchResults.map((elem) => ({ name: elem.formattedName, value: elem.formattedName })))
+                .catch(console.error);
+            break;
+        }
+        case "mdn": {
+            const query = interaction.options.getFocused() as string;
+
+            const { index, sitemap } = await getSources();
+            const search = index.search(query, { limit: 10 }).map((id) => {
+                const val = sitemap[<number>id].loc;
+                const parsed = val.length >= 99 ? val.split("/").slice(-2).join("/") : val;
+                return { name: parsed, value: parsed };
+            });
+            await interaction.respond(search).catch(console.error);
+        }
+    }
+}