feat(ping): implement button for normal people

package.json

@@ -15,6 +15,7 @@
     "@lilybird/jsx": "0.2.0",
     "@lilybird/transformers": "^0.2.0",
     "@paperdave/logger": "^3.0.1",
+    "@purplet/serialize": "^2.0.0",
     "@wolfram-alpha/wolfram-alpha-api": "^23.1004.144821-RELEASE",
     "algoliasearch": "^4.23.2",
     "bun-tracestrings": "github:oven-sh/bun.report",

src/commands/ping.tsx

@@ -1,6 +1,12 @@
-import { ApplicationCommand as JSXApplicationCommand } from "@lilybird/jsx";
+import {
+  ActionRow,
+  Button,
+  ApplicationCommand as JSXApplicationCommand,
+} from "@lilybird/jsx";
 import { ApplicationCommand } from "@lilybird/handlers";
+import { serializers as S } from "@purplet/serialize";
 import { possibleClosedForm } from "../util.ts";
+import { ButtonStyle } from "lilybird";
 
 export default {
   post: "GLOBAL",
@@ -15,12 +21,29 @@ export default {
       possibleClosedForm(rest),
     ]);
 
+    const serialized = S.generic.encodeCustomId([
+      ws,
+      wsClosedForm,
+      rest,
+      restClosedForm,
+    ]);
+
     await interaction.editReply({
       content: [
         `🏓`,
         `WebSocket: \`${wsClosedForm} ms\``,
         `Rest: \`${restClosedForm} ms\``,
       ].join("\n"),
+      components: [
+        <ActionRow>
+          <Button
+            label="I'm dumb!"
+            style={ButtonStyle.Danger}
+            emoji={{ name: "😕", id: null, animated: false }}
+            id={`0-${serialized}`}
+          />
+        </ActionRow>,
+      ],
     });
   },
 } satisfies ApplicationCommand;

src/listeners/interaction_create.ts

@@ -0,0 +1,42 @@
+import { Event } from "@lilybird/handlers";
+import { serializers as S } from "@purplet/serialize";
+import { silently } from "src/util.ts";
+
+export default {
+  event: "interactionCreate",
+  run: (interaction) => {
+    if (
+      !interaction.isMessageComponentInteraction() ||
+      !interaction.data.isButton()
+    )
+      return;
+
+    const id = interaction.data.id;
+
+    if (id?.[0] == "0" && id?.[1] == "-") {
+      const combined = interaction.data.id.split("-")?.[1];
+      if (!combined) return;
+
+      const [ws, wsClosedForm, rest, restClosedForm] =
+        S.generic.decodeCustomId(combined);
+
+      silently(
+        interaction.reply({
+          content: [
+            `🏓`,
+            "**WebSocket:**",
+            `\`${wsClosedForm}\``,
+            `\`≈ ${ws} ms\``,
+            "",
+            "**Rest:**",
+            `\`${restClosedForm}\``,
+            `\`≈ ${rest} ms\``,
+            "",
+            "Mathematics is the language of the universe, it's truly fascinating! And being a software engineer requires a deep understanding of this language. It's not an easy field, but it's incredibly rewarding. 😄",
+          ].join("\n"),
+          ephemeral: true,
+        })
+      );
+    }
+  },
+} satisfies Event<"interactionCreate">;

src/message-commands/ping.tsx

@@ -1,5 +1,8 @@
+import { serializers as S } from "@purplet/serialize";
 import { MessageCommand } from "@lilybird/handlers";
+import { ActionRow, Button } from "@lilybird/jsx";
 import { possibleClosedForm } from "../util.ts";
+import { ButtonStyle } from "lilybird";
 
 export default {
   name: "ping",
@@ -15,12 +18,29 @@ export default {
       possibleClosedForm(rest),
     ]);
 
+    const serialized = S.generic.encodeCustomId([
+      ws,
+      wsClosedForm,
+      rest,
+      restClosedForm,
+    ]);
+
     await newMessage.edit({
       content: [
         `🏓`,
         `WebSocket: \`${wsClosedForm} ms\``,
         `Rest: \`${restClosedForm} ms\``,
       ].join("\n"),
+      components: [
+        <ActionRow>
+          <Button
+            label="I'm dumb!"
+            style={ButtonStyle.Danger}
+            emoji={{ name: "😕", id: null, animated: false }}
+            id={`0-${serialized}`}
+          />
+        </ActionRow>,
+      ],
     });
   },
 } satisfies MessageCommand;