feat(api): Message Accessories API (#131)

src/api/MessageAccessories.ts

@@ -0,0 +1,41 @@
+export type AccessoryCallback = (props: Record<string, any>) => JSX.Element;
+export type Accessory = {
+    callback: AccessoryCallback;
+    position?: number;
+};
+
+export const accessories = new Map<String, Accessory>();
+
+export function addAccessory(
+    identifier: string,
+    callback: AccessoryCallback,
+    position?: number
+) {
+    accessories.set(identifier, {
+        callback,
+        position,
+    });
+}
+
+export function removeAccessory(identifier: string) {
+    accessories.delete(identifier);
+}
+
+export function _modifyAccessories(
+    elements: JSX.Element[],
+    props: Record<string, any>
+) {
+    for (const accessory of accessories.values()) {
+        elements.splice(
+            accessory.position != null
+                ? accessory.position < 0
+                    ? elements.length + accessory.position
+                    : accessory.position
+                : elements.length,
+            0,
+            accessory.callback(props)
+        );
+    }
+
+    return elements;
+}

src/api/index.ts

@@ -6,6 +6,7 @@ import * as $MessageEventsAPI from "./MessageEvents";
 import * as $Notices from "./Notices";
 import * as $Commands from "./Commands";
 import * as $DataStore from "./DataStore";
+import * as $MessageAccessories from "./MessageAccessories";
 
 /**
  * An API allowing you to listen to Message Clicks or run your own logic
@@ -36,12 +37,11 @@ const Commands = $Commands;
  *
  * This is actually just idb-keyval, so if you're familiar with that, you're golden!
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types}
-*/
+ */
 const DataStore = $DataStore;
+/**
+ * An API allowing you to add custom components as message accessories
+ */
+const MessageAccessories = $MessageAccessories;
 
-export {
-    DataStore,
-    MessageEvents,
-    Notices,
-    Commands
-};
+export { DataStore, MessageAccessories, MessageEvents, Notices, Commands };

src/plugins/apiMessageAccessories.ts

@@ -0,0 +1,18 @@
+import { Devs } from "../utils/constants";
+import definePlugin from "../utils/types";
+
+export default definePlugin({
+    name: "MessageAccessoriesAPI",
+    description: "API to add message accessories.",
+    authors: [Devs.Cyn],
+    patches: [
+        {
+            find: "_messageAttachmentToEmbedMedia",
+            replacement: {
+                match: /\(\)\.container\)},(.+?)\)};return/,
+                replace: (_, accessories) =>
+                    `().container)},Vencord.Api.MessageAccessories._modifyAccessories([${accessories}],this.props))};return`,
+            },
+        },
+    ],
+});