From c914bd17c1ee1be272f86d80e777eb08f3c2a9bc Mon Sep 17 00:00:00 2001
From: Rico <rico@7tv.app>
Date: Thu, 21 May 2026 22:57:44 +0200
Subject: [PATCH 1/4] fix: unbreak twitch chat input

---
 .../ChatInputControllerModule.vue             | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue b/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
index 68974e9b5..355c8c8c1 100644
--- a/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
+++ b/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
@@ -33,16 +33,20 @@ useComponentHook<Twitch.ChatInputControllerComponent>(
 				if (!inst.component.container.parentElement.classList.contains("chat-input")) return cur;
 
 				const props = (cur as ReactExtended.ReactRuntimeElement).props ?? {};
-				const child = (props.children as ReactExtended.ReactRuntimeElement[]).find(
+				const child = normalizeReactChildren(props.children).find(
 					(c) => c.props.className === "chat-input__buttons-container",
 				);
 				if (!child) return cur;
 
-				const buttons = child.props.children.at(-1);
+				const buttons = normalizeReactChildren(child.props.children).at(-1);
 				if (!buttons) return cur;
 
+				const buttonChildren = normalizeReactChildren(buttons.props.children).filter(
+					(c) => c.type !== "seventv-chat-input-button-container",
+				);
+
 				for (const btn of tButtons.values()) {
-					buttons.props.children.splice(buttons.props.children.length - btn.offset, 0, {
+					buttonChildren.splice(Math.max(0, buttonChildren.length - btn.offset), 0, {
 						[REACT_TYPEOF_TOKEN]: REACT_ELEMENT_SYMBOL,
 						key: null,
 						ref: btn.parent,
@@ -51,6 +55,8 @@ useComponentHook<Twitch.ChatInputControllerComponent>(
 					});
 				}
 
+				buttons.props.children = buttonChildren;
+
 				return cur;
 			},
 		},
@@ -84,6 +90,15 @@ function addButton<T extends ComponentFactory>(
 	return track;
 }
 
+function normalizeReactChildren(children: React.ReactNode): ReactExtended.ReactRuntimeElement[] {
+	if (!children) return [];
+
+	return (Array.isArray(children) ? children : [children]).filter(
+		(child): child is ReactExtended.ReactRuntimeElement =>
+			typeof child === "object" && child !== null && "props" in child,
+	);
+}
+
 interface InsertedButton<T extends ComponentFactory> {
 	key: string;
 	offset: number;

From 12e9e7ef147a45fc84dc7ad3c379a8f22e006366 Mon Sep 17 00:00:00 2001
From: Rico <rico@7tv.app>
Date: Thu, 21 May 2026 23:50:42 +0200
Subject: [PATCH 2/4] fix: icon alignment

---
 .../ChatInputControllerModule.vue             | 165 +++++++++++-------
 1 file changed, 101 insertions(+), 64 deletions(-)

diff --git a/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue b/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
index 355c8c8c1..aa8bf940c 100644
--- a/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
+++ b/src/site/twitch.tv/modules/chat-input-controller/ChatInputControllerModule.vue
@@ -1,15 +1,13 @@
 <template>
 	<template v-for="({ parent, component, props, condition }, i) of tButtons.values()" :key="i">
-		<Teleport v-if="parent.current && (typeof condition !== 'function' || condition())" :to="parent.current">
+		<Teleport v-if="parent.current && isButtonActive(condition)" :to="parent.current">
 			<Component :is="component" v-bind="props" />
 		</Teleport>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { markRaw, reactive, ref } from "vue";
-import { REACT_TYPEOF_TOKEN } from "@/common/Constant";
-import { REACT_ELEMENT_SYMBOL, useComponentHook } from "@/common/ReactHooks";
+import { markRaw, onMounted, onUnmounted, onUpdated, reactive, ref } from "vue";
 import { declareModule } from "@/composable/useModule";
 
 const { markAsReady } = declareModule("chat-input-controller", {
@@ -19,49 +17,36 @@ const { markAsReady } = declareModule("chat-input-controller", {
 
 // Button renderer
 const tButtons = reactive(new Map<string, InsertedButton<ComponentFactory>>());
-useComponentHook<Twitch.ChatInputControllerComponent>(
-	{
-		parentSelector: ".chat-input",
-		predicate: (n) => {
-			return n.handleGlobalMousedown && n.props && n.props.children && n.props.onClickOut;
-		},
-	},
-	{
-		hooks: {
-			render(inst, cur) {
-				if (!inst.component.container || !inst.component.container.parentElement) return cur;
-				if (!inst.component.container.parentElement.classList.contains("chat-input")) return cur;
-
-				const props = (cur as ReactExtended.ReactRuntimeElement).props ?? {};
-				const child = normalizeReactChildren(props.children).find(
-					(c) => c.props.className === "chat-input__buttons-container",
-				);
-				if (!child) return cur;
-
-				const buttons = normalizeReactChildren(child.props.children).at(-1);
-				if (!buttons) return cur;
-
-				const buttonChildren = normalizeReactChildren(buttons.props.children).filter(
-					(c) => c.type !== "seventv-chat-input-button-container",
-				);
-
-				for (const btn of tButtons.values()) {
-					buttonChildren.splice(Math.max(0, buttonChildren.length - btn.offset), 0, {
-						[REACT_TYPEOF_TOKEN]: REACT_ELEMENT_SYMBOL,
-						key: null,
-						ref: btn.parent,
-						type: "seventv-chat-input-button-container",
-						props: {},
-					});
-				}
-
-				buttons.props.children = buttonChildren;
-
-				return cur;
-			},
-		},
-	},
-);
+let mountFrame = 0;
+let observer: MutationObserver | undefined;
+
+onMounted(() => {
+	observer = new MutationObserver(() => scheduleRemount());
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+
+	scheduleRemount();
+});
+
+onUpdated(() => {
+	scheduleRemount();
+});
+
+onUnmounted(() => {
+	observer?.disconnect();
+	observer = undefined;
+
+	if (mountFrame) {
+		cancelAnimationFrame(mountFrame);
+		mountFrame = 0;
+	}
+
+	for (const btn of tButtons.values()) {
+		btn.parent.current?.remove();
+	}
+});
 
 /**
  * Add a button under the chat input, with a given offset
@@ -75,28 +60,65 @@ function addButton<T extends ComponentFactory>(
 	offset: number,
 	condition?: () => boolean,
 ) {
-	const track = ref({ current: null as HTMLElement | null });
-
-	if (tButtons)
-		tButtons.set(key, {
-			key,
-			offset,
-			parent: track.value,
-			component: markRaw(com),
-			props,
-			condition: condition ?? (() => true),
-		});
+	const container = document.createElement("seventv-chat-input-button-container");
+	const track = ref({ current: container as HTMLElement | null });
+
+	tButtons.set(key, {
+		key,
+		offset,
+		parent: track.value,
+		component: markRaw(com),
+		props,
+		condition: condition ?? (() => true),
+	});
+
+	scheduleRemount();
 
 	return track;
 }
 
-function normalizeReactChildren(children: React.ReactNode): ReactExtended.ReactRuntimeElement[] {
-	if (!children) return [];
+function scheduleRemount() {
+	if (mountFrame) return;
+
+	mountFrame = requestAnimationFrame(() => {
+		mountFrame = 0;
+		remountButtons();
+	});
+}
+
+function remountButtons() {
+	const row = document.querySelector<HTMLElement>("div[data-test-selector='chat-input-buttons-container']");
+	if (!row) return;
+
+	const anchor =
+		row.querySelector<HTMLElement>("button[data-a-target='chat-settings']") ??
+		row.querySelector<HTMLElement>("button[data-a-target='chat-send-button']");
+	const wrapper = anchor?.parentElement;
+	const container = wrapper?.parentElement ?? row;
+
+	const buttons = [...tButtons.values()].sort((a, b) => b.offset - a.offset);
+
+	let reference: Element | null = wrapper ?? anchor;
+	for (let i = buttons.length - 1; i >= 0; i--) {
+		const btn = buttons[i];
+		const el = btn.parent.current;
+		if (!el) continue;
 
-	return (Array.isArray(children) ? children : [children]).filter(
-		(child): child is ReactExtended.ReactRuntimeElement =>
-			typeof child === "object" && child !== null && "props" in child,
-	);
+		if (!isButtonActive(btn.condition)) {
+			el.remove();
+			continue;
+		}
+
+		if (el.parentElement !== container || el.nextSibling !== reference) {
+			container.insertBefore(el, reference);
+		}
+
+		reference = el;
+	}
+}
+
+function isButtonActive(condition?: () => boolean): boolean {
+	return typeof condition !== "function" || condition();
 }
 
 interface InsertedButton<T extends ComponentFactory> {
@@ -114,3 +136,18 @@ defineExpose({
 
 markAsReady();
 </script>
+
+<style lang="scss">
+div[data-test-selector="chat-input-buttons-container"] seventv-chat-input-button-container {
+	display: flex;
+	align-items: center;
+}
+
+div[data-test-selector="chat-input-buttons-container"] > div:has(button[data-a-target="chat-settings"]) {
+	display: contents !important;
+
+	> :not(:has(button[data-a-target="chat-settings"])) {
+		display: none !important;
+	}
+}
+</style>

From 561df212f3db02a86788ecceb6be85aea8908436 Mon Sep 17 00:00:00 2001
From: Rico <rico@7tv.app>
Date: Thu, 21 May 2026 23:56:29 +0200
Subject: [PATCH 3/4] docs: update changelog

---
 CHANGELOG-nightly.md | 4 ++++
 CHANGELOG.md         | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index e289cce6a..48300760e 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -1,3 +1,7 @@
+### 3.1.22.1000
+
+-   Fixed an issue that caused chat input to break after a Twitch update
+
 ### 3.1.21.1000
 
 -   Added new extension notice
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5825b18ca..c611ac158 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 3.1.22
+
+-   Fixed an issue that caused chat input to break after a Twitch update
+
 ### 3.1.21
 
 -   Added new extension notice

From 326acb9256ae0455b4d7b0ae1e2e43df3c6c4e36 Mon Sep 17 00:00:00 2001
From: Rico <rico@7tv.app>
Date: Thu, 21 May 2026 23:56:46 +0200
Subject: [PATCH 4/4] chore(release): bump to 3.1.22

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ac07570c9..de4728006 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & Kick with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.21",
+	"version": "3.1.22",
 	"dev_version": "1.0",
 	"scripts": {
 		"start": "cross-env NODE_ENV=dev yarn build:dev && cross-env NODE_ENV=dev vite --mode dev",