Can send text messages in conversations

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<void> {
+    await APIClient.exec({
+      method: "POST",
+      uri: `/matrix/room/${room.id}/send_text_message`,
+      jsonData: { content },
+    });
+  }
 }

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={() => (
         <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
           <RoomMessagesList mgr={roomMgr!} {...p} />
-          <div>Send message form</div>
+          <SendMessageForm {...p} />
         </div>
       )}
     />

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 (
+    <form onSubmit={handleTextSubmit}>
+      <div
+        style={{
+          padding: "10px",
+          paddingLeft: "20px",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        <TextField
+          placeholder="Send a message..."
+          variant="standard"
+          fullWidth
+          style={{}}
+          slotProps={{ input: { disableUnderline: true } }}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+        <IconButton
+          size="small"
+          style={{ visibility: text === "" ? "hidden" : "visible" }}
+          onClick={handleTextSubmit}
+        >
+          <SendIcon />
+        </IconButton>
+      </div>
+    </form>
+  );
+}