web/roomview: add support for sending messages

go.mod

@@ -11,7 +11,7 @@ require (
 	go.mau.fi/util v0.8.1-0.20241003092848-3b49d3e0b9ee
 	go.mau.fi/zeroconfig v0.1.3
 	maunium.net/go/mauflag v1.0.0
-	maunium.net/go/mautrix v0.21.1-0.20241008230253-c068fd7bd7c2
+	maunium.net/go/mautrix v0.21.1-0.20241009182323-33834b1b2cf4
 )
 
 require (

go.sum

@@ -58,5 +58,5 @@ gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 maunium.net/go/mauflag v1.0.0 h1:YiaRc0tEI3toYtJMRIfjP+jklH45uDHtT80nUamyD4M=
 maunium.net/go/mauflag v1.0.0/go.mod h1:nLivPOpTpHnpzEh8jEdSL9UqO9+/KBJFmNRlwKfkPeA=
-maunium.net/go/mautrix v0.21.1-0.20241008230253-c068fd7bd7c2 h1:7e4yLzsQwUKuzzgSskXAixgbC6/5MhGhYUfd8uafWp0=
+maunium.net/go/mautrix v0.21.1-0.20241009182323-33834b1b2cf4 h1:QETZBSQjudnQXtzowS0X1qO+CWbDHTMDmDZMxvEV3W4=
-maunium.net/go/mautrix v0.21.1-0.20241008230253-c068fd7bd7c2/go.mod h1:+fF5qsmXRCEXQZgW5ececC0PI3c7gISHTLcyftP4Bh0=
+maunium.net/go/mautrix v0.21.1-0.20241009182323-33834b1b2cf4/go.mod h1:+fF5qsmXRCEXQZgW5ececC0PI3c7gISHTLcyftP4Bh0=

web/src/api/rpc.ts

@@ -103,8 +103,8 @@ export default abstract class RPCClient {
 		}, this.cancelRequest.bind(this, request_id))
 	}
 
-	sendMessage(room_id: RoomID, event_type: EventType, content: Record<string, unknown>): Promise<DBEvent> {
+	sendMessage(room_id: RoomID, type: EventType, content: Record<string, unknown>): Promise<DBEvent> {
-		return this.request("send_message", { room_id, event_type, content })
+		return this.request("send_message", { room_id, type, content })
 	}
 
 	ensureGroupSessionShared(room_id: RoomID): Promise<boolean> {

web/src/ui/RoomView.css

@@ -1,3 +1,17 @@
 div.room-view {
-	overflow-y: scroll;
+	overflow: hidden;
+	height: 100%;
+	display: grid;
+	grid-template:
+		"header" 2rem
+		"messageview" 1fr
+		"input" 2rem
+		/ 1fr;
+}
+
+form.message-composer {
+	display: flex;
+	> input {
+		flex: 1;
+	}
 }

web/src/ui/RoomView.tsx

@@ -13,20 +13,42 @@
 //
 // 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 React, { use, useState } from "react"
 import { RoomStateStore } from "../api/statestore.ts"
 import { useNonNullEventAsState } from "../util/eventdispatcher.ts"
-import "./RoomView.css"
 import TimelineView from "./timeline/TimelineView.tsx"
+import { ClientContext } from "./ClientContext.ts"
+import "./RoomView.css"
 
 interface RoomViewProps {
 	room: RoomStateStore
 }
 
 const RoomView = ({ room }: RoomViewProps) => {
+	const [text, setText] = useState("")
+	const client = use(ClientContext)!
 	const roomMeta = useNonNullEventAsState(room.meta)
+	const sendMessage = (evt: React.FormEvent) => {
+		evt.preventDefault()
+		client.rpc.sendMessage(room.roomID, "m.room.message", {
+			body: text,
+			msgtype: "m.text",
+		}).catch(err => window.alert("Failed to send message: " + err))
+	}
 	return <div className="room-view">
-		{roomMeta.room_id}
+		<div className="room-header">
+			{roomMeta.room_id}
+		</div>
 		<TimelineView room={room} />
+		<form className="message-composer" onSubmit={sendMessage}>
+			<input
+				type="text"
+				value={text}
+				onChange={evt => setText(evt.target.value)}
+				placeholder="Send a message"
+			/>
+			<button type="submit">Send</button>
+		</form>
 	</div>
 }
 

web/src/ui/timeline/TimelineView.css

@@ -1,3 +1,4 @@
 div.timeline-view {
 	padding: 1rem;
+	overflow-y: scroll;
 }