Show user status in timeline #32991
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| /** | ||
| Copyright 2026 Element Creations Ltd. | ||
|
|
||
| SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial | ||
| Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
| import { ClientEvent, MatrixError } from "matrix-js-sdk/src/matrix"; | ||
| import { logger as rootLogger } from "matrix-js-sdk/src/logger"; | ||
|
|
||
| import { useMatrixClientContext } from "../contexts/MatrixClientContext"; | ||
| import { useTypedEventEmitter } from "./useEventEmitter"; | ||
| import { useFeatureEnabled } from "./useSettings"; | ||
|
|
||
| const logger = rootLogger.getChild("useUserStatus"); | ||
|
|
||
| export interface UserStatus { | ||
| emoji: string; | ||
| text: string; | ||
| } | ||
|
|
||
| const MAX_STATUS_TEXT_BYTES = 256; | ||
|
|
||
| export function userStatusTextWithinMaxLength(text: string): boolean { | ||
| const textEncoder = new TextEncoder(); | ||
| return textEncoder.encode(text).length <= MAX_STATUS_TEXT_BYTES; | ||
| } | ||
|
|
||
| /** | ||
| * Hook to get the MSC4426 user status for a given user ID. Returns undefined if the feature is disabled, | ||
| * the user does not have a status, or if there was an error fetching the status. | ||
| * | ||
| * @param userId The ID of the user whose status is being fetched. | ||
| * @returns The user's status, or undefined if not available. | ||
| */ | ||
| export function useUserStatus(userId: string | undefined): UserStatus | undefined { | ||
| const isEnabled = useFeatureEnabled("feature_user_status"); | ||
| const matrixClient = useMatrixClientContext(); | ||
| const [rawUserStatus, setRawUserStatus] = useState<unknown>(); | ||
|
|
||
| useTypedEventEmitter(matrixClient, ClientEvent.UserProfileUpdate, (syncedUserId, syncProfile) => { | ||
| if (syncedUserId !== userId) { | ||
| return; | ||
| } | ||
| if (syncProfile["org.matrix.msc4426.status"]) { | ||
| setRawUserStatus(syncProfile["org.matrix.msc4426.status"]); | ||
| } | ||
| }); | ||
| useEffect(() => { | ||
| (async () => { | ||
| if (!isEnabled) { | ||
| return; | ||
| } | ||
| if (!userId) { | ||
| setRawUserStatus(undefined); | ||
| return; | ||
| } | ||
| if ((await matrixClient.doesServerSupportExtendedProfiles()) === false) { | ||
| setRawUserStatus(undefined); | ||
| return; | ||
| } | ||
| try { | ||
| const result = await matrixClient.getExtendedProfileProperty(userId, "org.matrix.msc4426.status"); | ||
| setRawUserStatus(result); | ||
| } catch (ex) { | ||
| if (ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND") { | ||
| setRawUserStatus(undefined); | ||
| } else { | ||
| logger.warn(`Failed to get userStatus for ${userId}`, ex); | ||
| } | ||
| } | ||
| })(); | ||
| }, [isEnabled, userId, matrixClient]); | ||
| if (!isEnabled) { | ||
| return; | ||
| } | ||
|
|
||
| if (typeof rawUserStatus !== "object" || rawUserStatus === null) { | ||
| logger.warn(`value of "org.matrix.msc4426.status" was not an object for ${userId}`); | ||
| return; | ||
| } | ||
| if ("emoji" in rawUserStatus === false || typeof rawUserStatus.emoji !== "string" || !rawUserStatus.emoji) { | ||
| logger.warn(`"emoji" property was not a valid string for ${userId}`); | ||
| return; | ||
| } | ||
| if ("text" in rawUserStatus === false || typeof rawUserStatus.text !== "string" || !rawUserStatus.text) { | ||
| logger.warn(`"text" property was not a valid string for ${userId}`); | ||
| return; | ||
| } | ||
|
|
||
| return { | ||
| emoji: rawUserStatus.emoji, | ||
| text: userStatusTextWithinMaxLength(rawUserStatus.text) | ||
| ? rawUserStatus.text | ||
| : `${rawUserStatus.text.slice(0, MAX_STATUS_TEXT_BYTES)}…`, | ||
| }; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /* | ||
| Copyright 2026 Element Creations Ltd. | ||
|
|
||
| SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial | ||
| Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import { _td } from "@element-hq/web-shared-components"; | ||
|
|
||
| import { Command, CommandCategories, splitAtFirstSpace } from "./SlashCommands"; | ||
| import SettingsStore from "../settings/SettingsStore"; | ||
| import { reject, success } from "./utils"; | ||
| import { UserFriendlyError } from "../languageHandler"; | ||
| import { userStatusTextWithinMaxLength } from "../hooks/useUserStatus"; | ||
| import { TimelineRenderingType } from "../contexts/RoomContext"; | ||
|
|
||
| export const statusCommand = new Command({ | ||
| command: "status", | ||
| args: "<emoji> <text>", | ||
| description: _td("slash_command|status|description"), | ||
| isEnabled: () => SettingsStore.getValue("feature_user_status"), | ||
| runFn: function (cli, _roomId, _threadId, args) { | ||
| if (!args) { | ||
| return reject(new UserFriendlyError("slash_command|status|no_args")); | ||
| } | ||
| const [emojiText, text] = splitAtFirstSpace(args); | ||
| if (!emojiText) { | ||
| return reject(new UserFriendlyError("slash_command|status|no_emoji")); | ||
| } | ||
| if (!text) { | ||
| return reject(new UserFriendlyError("slash_command|status|no_text")); | ||
| } | ||
| const [emoji, additionalSegment] = [...new Intl.Segmenter().segment(emojiText)]; | ||
| if (additionalSegment) { | ||
| // This is "too long" in that it's more than one grapheme, so the error we give is | ||
| // that it's "not an emoji". | ||
| return reject(new UserFriendlyError("slash_command|status|too_long_emoji")); | ||
| } | ||
| if (!userStatusTextWithinMaxLength(text)) { | ||
| return reject(new UserFriendlyError("slash_command|status|too_long_text")); | ||
| } | ||
| return success( | ||
| cli.setExtendedProfileProperty("org.matrix.msc4426.status", { | ||
| emoji: emoji.segment, | ||
| text, | ||
| }), | ||
| ); | ||
| }, | ||
| category: CommandCategories.actions, | ||
| renderingTypes: [TimelineRenderingType.Room], | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.