refactor(chat): unify message rendering as components

src/lib/commands/built-in/founders.ts

@@ -1,27 +1,22 @@
 import { foundersQuery } from "$lib/graphql/twitch";
-import { SystemMessage } from "$lib/models/message/system-message";
 import { defineCommand } from "../util";
 
 export default defineCommand({
 	provider: "Built-in",
 	name: "founders",
 	description: "Display a list of founders for this channel",
 	async exec(_, channel) {
-		const message = new SystemMessage(channel);
-
 		const { user } = await channel.client.send(foundersQuery, { id: channel.id });
 
 		const founders =
 			user?.channel?.founders
 				?.flatMap((founder) => (founder?.user ? [founder.user.displayName] : []))
 				.toSorted() ?? [];
 
-		if (!founders.length) {
-			message.text = "This channel has no founders.";
-		} else {
-			message.text = `Channel founders (${founders.length}): ${founders.join(", ")}`;
-		}
+		const text = founders.length
+			? `Channel founders (${founders.length}): ${founders.join(", ")}`
+			: "This channel has no founders.";
 
-		channel.chat.addMessage(message);
+		channel.chat.notice(text);
 	},
 });

src/lib/commands/built-in/reload-badges.ts

@@ -30,6 +30,6 @@ export default defineCommand({
 			await Promise.all(promises);
 		}
 
-		channel.chat.addSystemMessage("Reloaded badges.");
+		channel.chat.notice("Reloaded badges.");
 	},
 });

src/lib/commands/built-in/reload-cheermotes.ts

@@ -7,6 +7,6 @@ export default defineCommand({
 	async exec(_, channel) {
 		await channel.fetchCheermotes(true);
 
-		channel.chat.addSystemMessage("Reloaded cheermotes.");
+		channel.chat.notice("Reloaded cheermotes.");
 	},
 });

src/lib/commands/built-in/reload-emotes.ts

@@ -18,6 +18,6 @@ export default defineCommand({
 		await app.emotes.fetch(includeGlobal);
 		await channel.emotes.fetch(true);
 
-		channel.chat.addSystemMessage("Reloaded emotes.");
+		channel.chat.notice("Reloaded emotes.");
 	},
 });

src/lib/commands/built-in/reload-theme.ts

@@ -10,6 +10,6 @@ export default defineCommand({
 		await loadThemes(settings.state["appearance.theme"]);
 		await injectTheme(settings.state["appearance.theme"]);
 
-		channel.chat.addSystemMessage("Reloaded theme.");
+		channel.chat.notice("Reloaded theme.");
 	},
 });

src/lib/commands/twitch/block.ts

@@ -1,4 +1,5 @@
 import { app } from "$lib/app.svelte";
+import BlockStatus from "$lib/components/message/events/BlockStatus.svelte";
 import { defineCommand, getTarget } from "../util";
 
 export default defineCommand({
@@ -12,10 +13,6 @@ export default defineCommand({
 
 		await app.twitch.users.block(target.id);
 
-		channel.chat.addSystemMessage({
-			type: "blockStatus",
-			blocked: true,
-			user: target.user,
-		});
+		channel.chat.event(BlockStatus, { blocked: true, user: target.user });
 	},
 });

src/lib/commands/twitch/marker.ts

@@ -27,6 +27,6 @@ export default defineCommand({
 
 		const echo = description ? `: ${description}` : "";
 
-		channel.chat.addSystemMessage(`Stream marker created at ${duration.format(format) + echo}`);
+		channel.chat.notice(`Stream marker created at ${duration.format(format) + echo}`);
 	},
 });

src/lib/commands/twitch/mods.ts

@@ -1,27 +1,22 @@
 import { modsQuery } from "$lib/graphql/twitch";
-import { SystemMessage } from "$lib/models/message/system-message";
 import { defineCommand } from "../util";
 
 export default defineCommand({
 	provider: "Twitch",
 	name: "mods",
 	description: "Display a list of moderators for this channel",
 	async exec(_, channel) {
-		const message = new SystemMessage(channel);
-
 		const { user } = await channel.client.send(modsQuery, { id: channel.id });
 
 		const mods =
 			user?.mods?.edges
 				.flatMap((edge) => (edge.node ? [edge.node.displayName] : []))
 				.toSorted() ?? [];
 
-		if (!mods.length) {
-			message.text = "This channel has no moderators.";
-		} else {
-			message.text = `Channel moderators (${mods.length}): ${mods.join(", ")}`;
-		}
+		const text = mods.length
+			? `Channel moderators (${mods.length}): ${mods.join(", ")}`
+			: "This channel has no moderators.";
 
-		channel.chat.addMessage(message);
+		channel.chat.notice(text);
 	},
 });

src/lib/commands/twitch/unblock.ts

@@ -1,4 +1,5 @@
 import { app } from "$lib/app.svelte";
+import BlockStatus from "$lib/components/message/events/BlockStatus.svelte";
 import { defineCommand, getTarget } from "../util";
 
 export default defineCommand({
@@ -11,10 +12,6 @@ export default defineCommand({
 
 		await app.twitch.users.unblock(target.id);
 
-		channel.chat.addSystemMessage({
-			type: "blockStatus",
-			blocked: false,
-			user: target.user,
-		});
+		channel.chat.event(BlockStatus, { blocked: false, user: target.user });
 	},
 });

src/lib/commands/twitch/vips.ts

@@ -1,27 +1,22 @@
 import { vipsQuery } from "$lib/graphql/twitch";
-import { SystemMessage } from "$lib/models/message/system-message";
 import { defineCommand } from "../util";
 
 export default defineCommand({
 	provider: "Twitch",
 	name: "vips",
 	description: "Display a list of VIPs for this channel",
 	async exec(_, channel) {
-		const message = new SystemMessage(channel);
-
 		const { user } = await channel.client.send(vipsQuery, { id: channel.id });
 
 		const vips =
 			user?.vips?.edges
 				?.flatMap((edge) => (edge.node ? [edge.node.displayName] : []))
 				.toSorted() ?? [];
 
-		if (!vips.length) {
-			message.text = "This channel has no VIPs.";
-		} else {
-			message.text = `Channel VIPs (${vips.length}): ${vips.join(", ")}`;
-		}
+		const text = vips.length
+			? `Channel VIPs (${vips.length}): ${vips.join(", ")}`
+			: "This channel has no VIPs.";
 
-		channel.chat.addMessage(message);
+		channel.chat.notice(text);
 	},
 });

src/lib/components/chat/Chat.svelte

@@ -4,8 +4,8 @@
 	import type { Message } from "$lib/models/message/message";
 	import { settings } from "$lib/settings";
 	import AutoMod from "../message/AutoMod.svelte";
+	import Event from "../message/Event.svelte";
 	import Notification from "../message/Notification.svelte";
-	import SystemMessage from "../message/SystemMessage.svelte";
 	import UserMessage from "../message/UserMessage.svelte";
 	import Separator from "./Separator.svelte";
 
@@ -101,7 +101,7 @@
 		bind:this={list}
 	>
 		{#snippet children(message, i)}
-			{#if message.isSystem() || message.isUser()}
+			{#if message.isEvent() || message.isUser()}
 				{@const prev = chat.messages[i - 1]}
 				{@const isNewDay = prev && prev.timestamp.getDate() !== message.timestamp.getDate()}
 
@@ -118,8 +118,8 @@
 					</Separator>
 				{/if}
 
-				{#if message.isSystem()}
-					<SystemMessage {message} context={message.context} />
+				{#if message.isEvent()}
+					<Event {message} />
 				{:else if message.isUser()}
 					{#if message.event}
 						<Notification {message} />
@@ -131,7 +131,7 @@
 				{/if}
 
 				{@const next = chat.messages.at(i + 1)}
-				{@const nextRecent = next && (next.isSystem() || next.isUser()) && next.recent}
+				{@const nextRecent = next && (next.isEvent() || next.isUser()) && next.recent}
 
 				{#if message === lastRead && next && settings.state["chat.newSeparator"]}
 					<Separator class="text-red-400">New messages</Separator>

src/lib/components/message/Event.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { EventMessage } from "$lib/models/message/event-message";
+	import Timestamp from "../Timestamp.svelte";
+
+	interface Props {
+		message: EventMessage;
+	}
+
+	const { message }: Props = $props();
+
+	const Inner = $derived(message.component);
+</script>
+
+<div
+	class="px-3 py-2 text-muted-foreground aria-disabled:opacity-50"
+	aria-disabled={message.deleted}
+>
+	<Timestamp date={message.timestamp} />
+
+	<p class="inline">
+		<Inner {...message.props} />
+	</p>
+</div>