Register mentions messageHandler (#48)

src/site/twitch.tv/ChatAPI.ts

@@ -37,6 +37,8 @@ const data = reactive({
 	paused: false, // whether or not scrolling is paused
 	duration: scrollduration,
 
+	messageHandlers: new Set<(v: Twitch.AnyMessage) => void>(),
+
 	scrollBuffer: [] as Twitch.DisplayableMessage[], // twitch chat message buffe when scrolling is paused
 	scrollClear: () => {
 		return;
@@ -231,6 +233,7 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		primaryColorHex,
 		useHighContrastColors,
 		showTimestamps,
+		messageHandlers,
 	} = toRefs(data);
 
 	return {
@@ -249,6 +252,8 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		showTimestamps: showTimestamps,
 		currentChannel: currentChannel,
 
+		messageHandlers: messageHandlers,
+
 		scrollSys: sys,
 		scrollInit: init,
 		scrollBuffer: scrollBuffer,

src/site/twitch.tv/modules/chat-input/ChatInput.vue

@@ -7,6 +7,7 @@ import { HookedInstance } from "@/common/ReactHooks";
 import {
 	defineFunctionHook,
 	defineNamedEventHandler,
+	definePropertyHook,
 	unsetNamedEventHandler,
 	unsetPropertyHook,
 } from "@/common/Reflection";
@@ -18,7 +19,7 @@ const props = defineProps<{
 }>();
 
 const store = useStore();
-const { emoteMap } = useChatAPI();
+const { emoteMap, messageHandlers } = useChatAPI();
 const { sendMessage } = useWorker();
 
 const providers = ref<Record<string, Twitch.ChatAutocompleteProvider>>({});
@@ -388,6 +389,11 @@ onMounted(() => {
 	if (mentionProvider) {
 		providers.value.mention = mentionProvider;
 		mentionProvider.canBeTriggeredByTab = false;
+		definePropertyHook(mentionProvider as Twitch.ChatAutocompleteProvider<"mention">, "props", {
+			value(v: Twitch.ChatAutocompleteProvider<"mention">["props"]) {
+				messageHandlers.value.add(v.activeChattersAPI.handleMessage);
+			},
+		});
 	}
 
 	const emoteProvider = component.providers.find((provider) => provider.autocompleteType == "emote");
@@ -411,6 +417,7 @@ onUnmounted(() => {
 
 	if (providerList.mention) {
 		providerList.mention.canBeTriggeredByTab = true;
+		unsetPropertyHook(providerList.mention, "props");
 	}
 
 	if (providerList.emote) {

src/site/twitch.tv/modules/chat/ChatController.vue

@@ -69,7 +69,8 @@ watch(channel, (channel) => {
 });
 
 const chatAPI = useChatAPI(scroller, bounds);
-const { scrollBuffer, scrollPaused, messages, lineLimit, twitchBadgeSets, clear, primaryColorHex } = chatAPI;
+const { scrollBuffer, scrollPaused, messages, lineLimit, twitchBadgeSets, clear, primaryColorHex, messageHandlers } =
+	chatAPI;
 
 const dataSets = reactive({
 	badges: false,
@@ -254,6 +255,9 @@ const onMessage = (msg: Twitch.AnyMessage): boolean => {
 		default:
 			return false;
 	}
+
+	//Send message to our registered message handlers
+	messageHandlers.value.forEach((h) => h(msg));
 	return true;
 };
 

src/twitch.d.ts

@@ -388,8 +388,8 @@ declare module Twitch {
 		text?: string;
 	};
 
-	export type ChatAutocompleteProvider = {
-		autocompleteType: string;
+	export type ChatAutocompleteProvider<T extends "emote" | "mention" | "command" | string = unknown> = {
+		autocompleteType: T;
 		canBeTriggeredByTab: boolean;
 		getMatches: (
 			string: string,
@@ -404,11 +404,30 @@ declare module Twitch {
 			  }[]
 			| undefined;
 		props: {
-			emotes: TwitchEmoteSet[];
-			isEmoteAnimationsEnabled: boolean;
 			registerAutocompleteProvider: (p: ChatAutocompleteProvider) => void;
-			theme: Theme;
-		};
+		} & {
+			emote: {
+				emotes: TwitchEmoteSet[];
+				isEmoteAnimationsEnabled: boolean;
+				theme: Theme;
+			};
+			mention: {
+				activeChattersAPI: {
+					getActiveChatterLoginFromDisplayName: () => void;
+					getActiveChatters: () => void;
+					handleMessage: (m: AnyMessage) => void;
+				};
+				showReplyPrompt: boolean;
+				channelID: string;
+				currentUserLogin: string;
+			};
+			command: {
+				getCommands: () => any[];
+				isCurrentUserEditor: boolean;
+				permissionLevel: number;
+			};
+			unknown: undefined;
+		}[T];
 	};
 
 	export enum Theme {