feat: typing indicators

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}

client/public/css/style.css

@@ -400,6 +400,7 @@ body {
 	margin: var(--gap);
 	gap: var(--gap-half);
 	anchor-name: --emoji-picker-anchor;
+	margin-top: 0;
 }
 
 .file-upload-button,
@@ -720,13 +721,12 @@ dialog {
 	margin-top: 10px;
 }
 
-.member-avatar,
-.member-avatar img {
+.avatar.member-avatar,
+.avatar.member-avatar img {
 	width: 30px;
 	aspect-ratio: 1 / 1;
 	border-radius: 100%;
-	/* eslint-disable-next-line css/no-important -- It's not unexpected, I expected it! */
-	font-size: 14px !important;
+	font-size: 14px;
 }
 
 .context-menu {
@@ -779,6 +779,7 @@ dialog {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
+	gap: var(--gap-half);
 }
 
 .message audio,
@@ -844,3 +845,42 @@ dialog {
 	flex-direction: row;
 	justify-content: center;
 }
+
+#typing-indicator {
+	display: flex;
+	gap: var(--space-width);
+	align-items: center;
+	margin-left: var(--gap);
+	min-height: 20px;
+}
+
+.typing-avatar-list .avatar-list-avatar {
+	height: 1.5em;
+	font-size: 16px;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+}
+
+#avatar-list .avatar-list-avatar:not(:first-child) {
+	margin-right: -16px;
+}
+
+.avatar-list-avatar {
+	border: 4px solid var(--background-primary);
+}
+
+#avatar-list {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+
+.typing-label {
+	font-size: 0.75em;
+	color: var(--text-muted);
+}
+
+.typing-user {
+	font-weight: bold;
+	color: white;
+}

client/src/comps/AvatarList.ts

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar"
+import Component from "./Component"
+
+export default class AvatarList extends Component {
+	maxAvatars: number
+
+	constructor(
+ users: string[],
+ { classes = [], maxAvatars = 3 }: { classes?: string[]; maxAvatars: number }
+	) {
+ super("div", { id: "avatar-list", classes })
+ this.maxAvatars = maxAvatars
+ this.reset(users)
+	}
+
+	reset(users: string[]) {
+ this.element.innerHTML = ""
+ for (const user of users.slice(0, this.maxAvatars).toReversed()) {
+ const avatar = new Avatar(user, "avatar-list-avatar")
+ this.element.appendChild(avatar.element)
+ }
+	}
+}

client/src/comps/ChatInput.ts

@@ -7,6 +7,8 @@ import RoomView from "./views/RoomView"
 
 // Credits to DeepSeek-R1, wow (edited though)
 export default class ChatInput extends Component {
+	public static readonly TYPING_TIMEOUT = 10000
+
 	readonly emojiPicker: EmojiPicker
 
 	constructor(view: PostView | RoomView) {
@@ -65,6 +67,27 @@ export default class ChatInput extends Component {
  // this fixes weird browser behavior
  if (chatInput.innerHTML == "<br>") chatInput.innerHTML = ""
  })
+ let lastTypingSent = 0
+ let lastTypingValue = false
+ chatInput.addEventListener("keyup", async () => {
+ if (!(view instanceof RoomView)) return
+ if (view.getCurrentRoom() == undefined) return
+ const isEmpty = chatInput.innerText.trim() == ""
+ if (
+ lastTypingValue != isEmpty ||
+ Date.now() - lastTypingSent > ChatInput.TYPING_TIMEOUT
+ ) {
+ lastTypingSent = Date.now()
+ lastTypingValue = isEmpty
+ // TODO: configurable timeout?
+ // TODO: allow disabling typing notifications?
+ await matrix.sendTyping(
+ view.getCurrentRoom()!.roomId,
+ !isEmpty,
+ ChatInput.TYPING_TIMEOUT
+ )
+ }
+ })
 
  // Create emoji button
  const emojiButton = document.createElement("button")

client/src/comps/TypingIndicator.ts

@@ -0,0 +1,38 @@
+import { RoomMember } from "matrix-js-sdk"
+import Component from "./Component"
+import { twemojiParse } from "../md"
+import AvatarList from "./AvatarList"
+
+export default class TypingIndicator extends Component {
+	avatarList: AvatarList
+	label: HTMLSpanElement
+
+	constructor() {
+ super("div", { id: "typing-indicator" })
+ this.avatarList = new AvatarList([], {
+ classes: ["typing-avatar-list"],
+ maxAvatars: 3,
+ })
+ this.label = document.createElement("span")
+ this.label.className = "typing-label"
+ this.element.appendChild(this.avatarList.element)
+ this.element.appendChild(this.label)
+	}
+
+	reset(users: RoomMember[]) {
+ this.avatarList.reset(users.map(u => u.userId))
+ this.label.innerHTML = this.renderLabel(users)
+	}
+
+	renderLabel(users: RoomMember[]) {
+ const names = users.map(
+ u => `<span class="typing-user">${twemojiParse(u.name)}</span>`
+ )
+ if (users.length === 0) return ""
+ if (users.length === 1) return `${names[0]} is typing...`
+ if (users.length === 2) return `${names[0]} and ${names[1]} are typing...`
+ if (users.length === 3)
+ return `${names[0]}, ${names[1]}, and ${names[2]} are typing...`
+ return `${names[0]} and <span class="typing-user">${users.length - 1} others</span> are typing...`
+	}
+}

client/src/comps/views/RoomView.ts

@@ -1,34 +1,41 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, Room, RoomEvent, RoomMember, RoomMemberEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import TypingIndicator from "../TypingIndicator"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
 
 	public readonly msgList: EventList
 	public readonly chatInput: ChatInput
 	public readonly memberList: MemberList
+	public readonly typingIndicator: TypingIndicator
 
 	private timelineEventHandler?: (event: MatrixEvent) => void
 	private redactionEventHandler?: (event: MatrixEvent) => Promise<void>
+	private typingEventHandler?: (event: MatrixEvent) => void
+
+	public typingUsers: RoomMember[] = []
 
 	constructor() {
  super("div", { id: "room-view" })
 
  this.msgList = new EventList()
  this.chatInput = new ChatInput(this)
  this.memberList = new MemberList()
+ this.typingIndicator = new TypingIndicator()
 
  const container = document.createElement("div")
  container.className = "post-container"
 
  const wrapper = document.createElement("div")
  wrapper.className = "room-wrapper"
  wrapper.appendChild(this.msgList.element)
+ wrapper.appendChild(this.typingIndicator.element)
  wrapper.appendChild(this.chatInput.element)
  container.appendChild(wrapper)
 
@@ -61,23 +68,41 @@ export default class RoomView extends View {
  }
 	}
 
+	onTypingEvent(room: Room) {
+ return () => {
+ this.updateTypingIndicator(room)
+ }
+	}
+
+	updateTypingIndicator(room: Room) {
+ this.typingUsers = room
+ .getMembers()
+ .filter(m => m.typing && m.userId !== matrix.getUserId())
+ this.typingIndicator.reset(this.typingUsers)
+	}
+
 	async reset(room: Room) {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
  this.msgList.reset(events)
+ this.updateTypingIndicator(room)
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)
  if (this.redactionEventHandler)
  matrix.off(RoomEvent.Redaction, this.redactionEventHandler)
+ if (this.typingEventHandler)
+ matrix.off(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.currentRoom = room
 
  this.timelineEventHandler = this.onTimelineEvent(this.currentRoom)
  this.redactionEventHandler = this.onRedaction(this.currentRoom)
+ this.typingEventHandler = this.onTypingEvent(this.currentRoom)
  matrix.on(RoomEvent.Timeline, this.timelineEventHandler)
  matrix.on(RoomEvent.Redaction, this.redactionEventHandler)
+ matrix.on(RoomMemberEvent.Typing, this.typingEventHandler)
 
  this.updateMemberList(room)
 	}