web/typing: render typing notifications below composer

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>

web/src/api/client.ts

@@ -116,6 +116,8 @@ export default class Client {
 			this.store.applySendComplete(ev.data)
 		} else if (ev.command === "image_auth_token") {
 			this.store.imageAuthToken = ev.data
+		} else if (ev.command === "typing") {
+			this.store.applyTyping(ev.data)
 		}
 	}
 

web/src/api/statestore/hooks.ts

@@ -27,6 +27,10 @@ export function useRoomTimeline(room: RoomStateStore): (MemDBEvent | null)[] {
 	)
 }
 
+export function useRoomTyping(room: RoomStateStore): string[] {
+	return useSyncExternalStore(room.typingSub.subscribe, () => room.typing)
+}
+
 export function useRoomState(
 	room?: RoomStateStore, type?: EventType, stateKey: string | undefined = "",
 ): MemDBEvent | null {

web/src/api/statestore/main.ts

@@ -32,6 +32,7 @@ import {
 	SendCompleteData,
 	SyncCompleteData,
 	SyncRoom,
+	TypingEventData,
 	UnknownEventContent,
 	UserID,
 	roomStateGUIDToString,
@@ -382,6 +383,15 @@ export class StateStore {
 		}
 	}
 
+	applyTyping(typing: TypingEventData) {
+		const room = this.rooms.get(typing.room_id)
+		if (!room) {
+			// TODO log or something?
+			return
+		}
+		room.applyTyping(typing.user_ids)
+	}
+
 	doGarbageCollection() {
 		const maxLastOpened = Date.now() - window.gcSettings.lastOpenedCutoff
 		let deletedEvents = 0

web/src/api/statestore/room.ts

@@ -90,10 +90,12 @@ export class RoomStateStore {
 	timelineCache: (MemDBEvent | null)[] = []
 	state: Map<EventType, Map<string, EventRowID>> = new Map()
 	stateLoaded = false
+	typing: UserID[] = []
 	fullMembersLoaded = false
 	readonly eventsByRowID: Map<EventRowID, MemDBEvent> = new Map()
 	readonly eventsByID: Map<EventID, MemDBEvent> = new Map()
 	readonly timelineSub = new Subscribable()
+	readonly typingSub = new Subscribable()
 	readonly stateSubs = new MultiSubscribable()
 	readonly eventSubs = new MultiSubscribable()
 	readonly requestedEvents: Set<EventID> = new Set()
@@ -418,6 +420,11 @@ export class RoomStateStore {
 		}
 	}
 
+	applyTyping(users: string[]) {
+		this.typing = users
+		this.typingSub.notify()
+	}
+
 	doGarbageCollection() {
 		const memberEventsToKeep = new Set<UserID>()
 		const eventsToKeep = new Set<EventRowID>()

web/src/ui/composer/TypingNotifications.css

@@ -0,0 +1,19 @@
+div.typing-notifications {
+	grid-area: typing;
+	height: 1.6rem;
+	margin: 0 1.6rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	font-size: 0.9rem;
+
+	> div.avatars {
+		display: flex;
+		align-items: center;
+		margin-left: 0.35rem;
+
+		> img {
+			margin-left: -0.35rem;
+		}
+	}
+}

web/src/ui/composer/TypingNotifications.tsx

@@ -0,0 +1,71 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Sumner Evans
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { JSX, use } from "react"
+import { PulseLoader } from "react-spinners"
+import { getAvatarURL } from "@/api/media.ts"
+import { useRoomTyping } from "@/api/statestore"
+import { MemberEventContent } from "@/api/types/mxtypes.ts"
+import { oxfordHumanJoinReact } from "@/util/reactjoin.tsx"
+import ClientContext from "../ClientContext.ts"
+import { useRoomContext } from "../roomview/roomcontext.ts"
+import "./TypingNotifications.css"
+
+const TypingNotifications = () => {
+	const roomCtx = useRoomContext()
+	const client = use(ClientContext)!
+	const room = roomCtx.store
+	const typing = useRoomTyping(room).filter(u => u !== client.userID)
+	let loader: JSX.Element | null = null
+	if (typing.length > 0) {
+		loader = <PulseLoader size={5} color="var(--primary-color)" />
+	}
+	const avatars: JSX.Element[] = []
+	const memberNames: string[] = []
+	for (let i = 0; i < 5 && i < typing.length; i++) {
+		const sender = typing[i]
+		const memberEvt = room.getStateEvent("m.room.member", sender)
+		const member = (memberEvt?.content ?? null) as MemberEventContent | null
+		if (!memberEvt) {
+			use(ClientContext)?.requestMemberEvent(room, sender)
+		}
+		avatars.push(<img
+			className="small avatar"
+			loading="lazy"
+			src={getAvatarURL(sender, member)}
+			alt=""
+		/>)
+		memberNames.push(member?.displayname ?? sender)
+	}
+
+	let description: JSX.Element | null = null
+	if (typing.length > 4) {
+		description = <div>{typing.length} users are typing</div>
+	} else if (typing.length > 0) {
+		description = <div>
+			{oxfordHumanJoinReact(memberNames)}
+			{typing.length === 1 ? " is " : " are "}
+			typing
+		</div>
+	}
+
+	return <div className={typing.length ? "typing-notifications" : "typing-notifications empty"}>
+		<div className="avatars">{avatars}</div>
+		{description}
+		{loader}
+	</div>
+}
+
+export default TypingNotifications

web/src/ui/roomview/RoomView.css

@@ -9,6 +9,7 @@ div.room-view {
 		"messageview" 1fr
 		"autocomplete" 0
 		"input" auto
+		"typing" auto
 		/ 1fr;
 	contain: strict;
 }

web/src/ui/roomview/RoomView.tsx

@@ -16,6 +16,7 @@
 import { JSX, useRef } from "react"
 import { RoomStateStore } from "@/api/statestore"
 import MessageComposer from "../composer/MessageComposer.tsx"
+import TypingNotifications from "../composer/TypingNotifications.tsx"
 import RightPanel, { RightPanelProps } from "../rightpanel/RightPanel.tsx"
 import TimelineView from "../timeline/TimelineView.tsx"
 import RoomViewHeader from "./RoomViewHeader.tsx"
@@ -38,6 +39,7 @@ const RoomView = ({ room, rightPanelResizeHandle, rightPanel }: RoomViewProps) =
 			<RoomViewHeader room={room}/>
 			<TimelineView/>
 			<MessageComposer/>
+			<TypingNotifications/>
 		</div>
 		{rightPanelResizeHandle}
 		{rightPanel && <RightPanel {...rightPanel}/>}