Handle typing events

matrixgw_frontend/src/widgets/messages/TypingNotice.tsx

@@ -0,0 +1,35 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { RoomEventsManager } from "../../utils/RoomEventsManager";
+import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
+
+export function TypingNotice(p: {
+  users: UsersMap;
+  manager: RoomEventsManager;
+}): React.ReactElement {
+  const user = useUserInfo();
+
+  const users = React.useMemo(
+    () =>
+      [...p.users.values()].filter(
+        (u) =>
+          p.manager.typingUsers.includes(u.user_id) &&
+          u.user_id !== user.info.matrix_user_id
+      ),
+    [p.manager.typingUsers]
+  );
+
+  if (users.length === 0) return <></>;
+
+  return (
+    <Typography
+      variant="caption"
+      component="div"
+      style={{ paddingLeft: "20px" }}
+    >
+      {users.map((u) => u.display_name ?? u.display_name).join(", ")}{" "}
+      {users.length > 1 ? "are" : "is"} typing...
+    </Typography>
+  );
+}