Message event zod types

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/package.json

@@ -25,7 +25,8 @@
  "marked": "^18.0.4",
  "marked-alert": "^2.1.2",
  "marked-highlight": "^2.2.4",
- "matrix-js-sdk": "^41.5.0"
+ "matrix-js-sdk": "^41.5.0",
+ "zod": "^4.4.3"
 	},
 	"devDependencies": {
  "@eslint/css": "^1.2.0",

client/public/css/style.css

@@ -829,6 +829,14 @@ dialog {
 	}
 }
 
+.message[data-event-type="$error"] {
+	background-color: rgb(255 0 0 / 0.05);
+
+	.message-content.md > pre > code.language-text {
+ color: #ff8080;
+	}
+}
+
 .modal {
 	background-color: var(--background-primary);
 	border: none;

client/src/comps/EventList.ts

@@ -3,11 +3,19 @@ import { MatrixEvent } from "matrix-js-sdk"
 import { renderEvent } from "./events/Event"
 import ChatMessageBase from "./events/ChatMessageBase"
 import EventMessageBase from "./events/EventMessageBase"
+import {
+	UNKNOWN_EVENT_KEY,
+	type SupportedStateEvents,
+} from "../schemas/ClientEvent"
 
 const HIDDEN_EVENTS = ["m.room.redaction"]
 
 export default class EventList extends Component {
-	eventComponents: Map<string, ChatMessageBase | EventMessageBase>
+	eventComponents: Map<
+ string,
+ | ChatMessageBase<"m.room.message" | typeof UNKNOWN_EVENT_KEY>
+ | EventMessageBase<SupportedStateEvents>
+	>
 
 	constructor() {
  super("div", { id: `events` })
@@ -34,6 +42,7 @@ export default class EventList extends Component {
  this.element.scrollHeight - 10
 
  const comp = renderEvent(event)
+ void comp.reset()
  this.eventComponents.set(event.getId()!, comp)
  this.element.appendChild(comp.element)
 

client/src/comps/events/ChatMessageBase.ts

@@ -5,8 +5,11 @@ import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
 
-export default class ChatMessageBase extends EventBase {
+export default class ChatMessageBase<
+	Type extends "m.room.message" | typeof UNKNOWN_EVENT_KEY = "m.room.message",
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 
@@ -17,8 +20,7 @@ export default class ChatMessageBase extends EventBase {
  this.asideElement.append(this.avatar.element)
  this.mainElement.append(header, this.contentElement)
 
- const content = this.message.getContent()
- this.element.dataset.msgtype = content.msgtype || "m.text"
+ this.element.dataset.msgtype = this.content.msgtype
 
  const room = matrix.getRoom(this.message.getRoomId())
 
@@ -56,8 +58,6 @@ export default class ChatMessageBase extends EventBase {
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
-
- void this.reset()
 	}
 
 	async reset() {

client/src/comps/events/ErrorEvent.ts

@@ -0,0 +1,47 @@
+import z from "zod"
+import { MatrixEvent } from "matrix-js-sdk"
+import ChatMessageBase from "./ChatMessageBase"
+import { markdownToHtml } from "../../md"
+import { UNKNOWN_EVENT_KEY } from "../../schemas/ClientEvent"
+import { ZodError } from "zod"
+
+export default class ErrorEvent extends ChatMessageBase<
+	typeof UNKNOWN_EVENT_KEY
+> {
+	private readonly errorabc: unknown
+
+	constructor(msg: MatrixEvent, error: unknown) {
+ super(msg)
+ this.element.dataset.eventType = "$error"
+ this.errorabc = error
+	}
+
+	async reset(): Promise<void> {
+ let errorMessage: string
+ if (this.errorabc instanceof ZodError) {
+ errorMessage = z.prettifyError(this.errorabc)
+ } else if (this.errorabc instanceof Error) {
+ errorMessage = this.errorabc.message
+ } else {
+ errorMessage = String(this.errorabc)
+ }
+
+ this.contentElement.innerHTML = markdownToHtml(
+ `
+Error parsing content of ${this.message.getType()} message:
+\`\`\`json
+${JSON.stringify(this.message.getContent(), undefined, " ")}
+\`\`\`
+Error:
+\`\`\`text
+${errorMessage}
+\`\`\`
+ `.trim()
+ )
+ await super.reset()
+	}
+
+	get type() {
+ return UNKNOWN_EVENT_KEY
+	}
+}

client/src/comps/events/Event.ts

@@ -9,11 +9,13 @@ import RoomAudioMessage from "./RoomAudioMessage"
 import RoomFileMessage from "./RoomFileMessage"
 import UnknownEvent from "./UnknownEvent"
 import RoomNameEvent from "./RoomNameEvent"
+import { SupportedStateEvents } from "../../schemas/ClientEvent"
+import ChatMessageBase from "./ChatMessageBase"
+import ErrorEvent from "./ErrorEvent"
 
 const eventTypes = {
-	"m.room.message": RoomTextMessage,
 	"m.room.name": RoomNameEvent,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof EventBase<SupportedStateEvents>>
 
 const msgTypes = {
 	"m.text": RoomTextMessage,
@@ -23,7 +25,7 @@ const msgTypes = {
 	"m.audio": RoomAudioMessage,
 	"m.video": RoomVideoMessage,
 	"m.file": RoomFileMessage,
-} satisfies Record<string, typeof EventBase>
+} satisfies Record<string, typeof ChatMessageBase<"m.room.message">>
 
 type EventClasses =
 	| (typeof eventTypes)[keyof typeof eventTypes]
@@ -45,5 +47,9 @@ export function renderEvent(event: MatrixEvent) {
  : RoomTextMessage
 	}
 
-	return new EventClass(event)
+	try {
+ return new EventClass(event)
+	} catch (e) {
+ return new ErrorEvent(event, e)
+	}
 }

client/src/comps/events/EventBase.ts

@@ -1,9 +1,15 @@
+import z from "zod"
 import { MatrixEvent } from "matrix-js-sdk"
 import Component from "../Component"
 import Avatar from "../Avatar"
+import { EventContentMap } from "../../schemas/ClientEvent"
+import { parseEventContent } from "../../events"
 
-export default abstract class EventBase extends Component {
+export default abstract class EventBase<
+	Type extends keyof typeof EventContentMap = keyof typeof EventContentMap,
+> extends Component {
 	readonly message: MatrixEvent
+	readonly content: z.infer<(typeof EventContentMap)[Type]>
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement
@@ -18,6 +24,7 @@ export default abstract class EventBase extends Component {
 	) {
  super(tagName, options)
  this.message = msg
+ this.content = parseEventContent(this.type, msg.getContent())
 
  this.contentElement = document.createElement("div")
  this.contentElement.className = "message-content md"
@@ -41,4 +48,8 @@ export default abstract class EventBase extends Component {
 	}
 
 	abstract reset(): Promise<void>
+
+	get type(): Type {
+ return this.message.getType() as Type
+	}
 }

client/src/comps/events/EventMessageBase.ts

@@ -1,8 +1,11 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
+import { type SupportedStateEvents } from "../../schemas/ClientEvent"
 
-export default class EventMessageBase extends EventBase {
+export default class EventMessageBase<
+	Type extends SupportedStateEvents,
+> extends EventBase<Type> {
 	constructor(msg: MatrixEvent) {
  super(msg, "div", { id: `message-${msg.getId()}`, classes: ["message"] })
 

client/src/comps/events/RoomAudioMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { Audio } from "../../schemas/msgtypes/m/Audio"
 
 export default class RoomAudioMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Audio
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -1,9 +1,9 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import { markdownToHtml, twemojiParse } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXUser } from "../../matrix"
+import { Emote } from "../../schemas/msgtypes/m/Emote"
 
 export default class RoomEmoteMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -20,7 +20,7 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Emote
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomFileMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { getMXCData } from "../../matrix"
-import { parseEventContent } from "../../events"
+import { File } from "../../schemas/msgtypes/m/File"
 
 export default class RoomFileMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,8 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as File
+
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -1,7 +1,7 @@
 import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import MXCImage from "../MXCImage"
-import { parseEventContent } from "../../events"
+import { Image } from "../../schemas/msgtypes/m/Image"
 
 export default class RoomImageMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Image
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNameEvent.ts

@@ -2,9 +2,8 @@ import { MatrixEvent } from "matrix-js-sdk"
 import EventMessageBase from "./EventMessageBase"
 import { getMXUser } from "../../matrix"
 import { twemojiParse } from "../../md"
-import { parseEventContent } from "../../events"
 
-export default class RoomNameEvent extends EventMessageBase {
+export default class RoomNameEvent extends EventMessageBase<"m.room.name"> {
 	constructor(msg: MatrixEvent) {
  super(msg)
  void this.reset()
@@ -16,9 +15,7 @@ export default class RoomNameEvent extends EventMessageBase {
  const { mxid, displayname } = await getMXUser(this.message.getSender()!)
  const authorName = twemojiParse(displayname || mxid || "Unknown User")
 
- const content = parseEventContent(this.message.getContent())
- // @ts-expect-error content.name should be string
- const roomName = twemojiParse(content.name || "Unknown")
+ const roomName = twemojiParse(this.content.name || "Unknown")
 
  this.nameElement.innerHTML = authorName
  this.contentElement.innerHTML = `<span>changed the room name to ${roomName}</span>`

client/src/comps/events/RoomNoticeMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Notice } from "../../schemas/msgtypes/m/Notice"
 
 export default class RoomNoticeMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Notice
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":

client/src/comps/events/RoomTextMessage.ts

@@ -2,15 +2,15 @@ import { MatrixEvent } from "matrix-js-sdk"
 import ChatMessageBase from "./ChatMessageBase"
 import { markdownToHtml } from "../../md"
 import { purifyHTML } from "./HTMLFormat"
-import { parseEventContent } from "../../events"
+import { Text } from "../../schemas/msgtypes/m/Text"
 
 export default class RoomTextMessage extends ChatMessageBase {
 	constructor(msg: MatrixEvent) {
  super(msg)
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = this.content as Text
 
  switch (this.message.getContent().format) {
  case "org.matrix.custom.html":