diff --git a/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts b/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts index f24dd1b..cd97463 100644 --- a/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts +++ b/matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts @@ -80,4 +80,15 @@ export class MatrixApiEvent { room.id }/event/${event_id}/file?thumbnail=${thumbnail}`; } + + /** + * Send text message + */ + static async SendTextMessage(room: Room, content: string): Promise { + await APIClient.exec({ + method: "POST", + uri: `/matrix/room/${room.id}/send_text_message`, + jsonData: { content }, + }); + } } diff --git a/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx b/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx index a5aeaf0..e990666 100644 --- a/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx +++ b/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx @@ -5,6 +5,7 @@ import type { Room } from "../../api/matrix/MatrixApiRoom"; import { RoomEventsManager } from "../../utils/RoomEventsManager"; import { AsyncWidget } from "../AsyncWidget"; import { RoomMessagesList } from "./RoomMessagesList"; +import { SendMessageForm } from "./SendMessageForm"; export function RoomWidget(p: { room: Room; @@ -28,7 +29,7 @@ export function RoomWidget(p: { build={() => (
-
Send message form
+
)} /> diff --git a/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx b/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx new file mode 100644 index 0000000..41b6ae0 --- /dev/null +++ b/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx @@ -0,0 +1,63 @@ +import SendIcon from "@mui/icons-material/Send"; +import { IconButton, TextField } from "@mui/material"; +import React, { type FormEvent } from "react"; +import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent"; +import type { Room } from "../../api/matrix/MatrixApiRoom"; +import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider"; +import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider"; + +export function SendMessageForm(p: { room: Room }): React.ReactElement { + const loadingMessage = useLoadingMessage(); + const alert = useAlert(); + + const [text, setText] = React.useState(""); + + const handleTextSubmit = async (e: FormEvent) => { + e.preventDefault(); + + if (text === "") return; + + loadingMessage.show("Sending message..."); + + try { + await MatrixApiEvent.SendTextMessage(p.room, text); + + setText(""); + } catch (e) { + console.error(`Failed to send message! ${e}`); + alert(`Failed to send message! ${e}`); + } finally { + loadingMessage.hide(); + } + }; + + return ( +
+
+ setText(e.target.value)} + /> + + + +
+
+ ); +}