36 lines
998 B
TypeScript
36 lines
998 B
TypeScript
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, p.users, user.info.matrix_user_id]
|
|
);
|
|
|
|
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>
|
|
);
|
|
}
|