diff --git a/packages/element-web-module-api/element-web-module-api.api.md b/packages/element-web-module-api/element-web-module-api.api.md index 56fa2bb..fa02433 100644 --- a/packages/element-web-module-api/element-web-module-api.api.md +++ b/packages/element-web-module-api/element-web-module-api.api.md @@ -78,8 +78,11 @@ export interface ConfigApi { // @alpha export interface CustomComponentsApi { + registerMessageProfile(renderer: MessageProfileRenderFunction): void; registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void; registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void; + // (undocumented) + registerUserInfo(renderer: UserInfoRenderFunction): void; } // @alpha @@ -238,6 +241,18 @@ export interface MediaCustomisations { mediaFromMxc(mxc?: string, client?: Client): Media; } +// @alpha +export type MessageProfileComponentProps = { + mxEvent: MatrixEvent; + onClick?: () => void; + member?: MemberInfo; +}; + +// @alpha +export type MessageProfileRenderFunction = ( +props: MessageProfileComponentProps, +originalComponent: (props: MessageProfileComponentProps) => React.JSX.Element) => JSX.Element; + // @public export interface Module { // (undocumented) @@ -313,6 +328,16 @@ export interface UserIdentifierCustomisations { }): string | null; } +// @alpha +export type UserInfoComponentProps = { + userId: string; +}; + +// @alpha +export type UserInfoRenderFunction = ( +props: UserInfoComponentProps, +originalComponent: (props: UserInfoComponentProps) => React.JSX.Element) => JSX.Element; + // @public export function useWatchable(watchable: Watchable): T; @@ -354,6 +379,10 @@ export interface WidgetVariablesCustomisations { }; } +// Warnings were encountered during analysis: +// +// src/api/custom-components/message-profile.ts:19:5 - (ae-forgotten-export) The symbol "MemberInfo" needs to be exported by the entry point index.d.ts + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/element-web-module-api/src/api/custom-components.ts b/packages/element-web-module-api/src/api/custom-components.ts index faba9c0..ee4f254 100644 --- a/packages/element-web-module-api/src/api/custom-components.ts +++ b/packages/element-web-module-api/src/api/custom-components.ts @@ -7,6 +7,8 @@ Please see LICENSE files in the repository root for full details. import type { JSX } from "react"; import type { MatrixEvent } from "../models/event"; +import type { UserInfoRenderFunction } from "./custom-components/userinfo"; +import type { MessageProfileRenderFunction } from "./custom-components/message-profile"; /** * Properties for all message components. @@ -126,6 +128,29 @@ export interface CustomComponentsApi { hints?: CustomMessageRenderHints, ): void; + /** + * Register a renderer for the profile component next to a message in the room timeline. + * + * The render function should return a rendered component. + * + * @param renderer - The render function. + * @throws If another module specifies a render function, this will throw. + * @example + * ``` + * customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => { + * return ; + * }); + * customComponents.registerMessageRenderer( + * (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(), + * (props, originalComponent) => { + * return ; + * } + * ); + * ``` + */ + + registerMessageProfile(renderer: MessageProfileRenderFunction): void; + /** * Register a renderer for the room preview bar. * @@ -143,4 +168,6 @@ export interface CustomComponentsApi { * ``` */ registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void; + + registerUserInfo(renderer: UserInfoRenderFunction): void; } diff --git a/packages/element-web-module-api/src/api/custom-components/message-profile.ts b/packages/element-web-module-api/src/api/custom-components/message-profile.ts new file mode 100644 index 0000000..0b68a35 --- /dev/null +++ b/packages/element-web-module-api/src/api/custom-components/message-profile.ts @@ -0,0 +1,34 @@ +import { JSX } from "react"; +import { MatrixEvent } from "../../models/event"; + +interface MemberInfo { + userId: string; + roomId: string; + rawDisplayName?: string; + disambiguate: boolean; +} + +/** + * Properties for all message components. + * @alpha Subject to change. + */ +export type MessageProfileComponentProps = { + mxEvent: MatrixEvent; + onClick?: () => void; + member?: MemberInfo; +}; + +/** + * Function used to render a message profile + * @alpha Subject to change. + */ +export type MessageProfileRenderFunction = ( + /** + * Properties for the message to be renderered. + */ + props: MessageProfileComponentProps, + /** + * Render function for the original component. + */ + originalComponent: (props: MessageProfileComponentProps) => React.JSX.Element, +) => JSX.Element; diff --git a/packages/element-web-module-api/src/api/custom-components/userinfo.ts b/packages/element-web-module-api/src/api/custom-components/userinfo.ts new file mode 100644 index 0000000..9db302d --- /dev/null +++ b/packages/element-web-module-api/src/api/custom-components/userinfo.ts @@ -0,0 +1,23 @@ +import { JSX } from "react"; + +/** + * @alpha Subject to change. + */ +export type UserInfoComponentProps = { + userId: string; +}; + +/** + * Function used to render a message profile + * @alpha Subject to change. + */ +export type UserInfoRenderFunction = ( + /** + * Properties for the message to be renderered. + */ + props: UserInfoComponentProps, + /** + * Render function for the original component. This may be omitted if the message would not normally be rendered. + */ + originalComponent: (props: UserInfoComponentProps) => React.JSX.Element, +) => JSX.Element; diff --git a/packages/element-web-module-api/src/index.ts b/packages/element-web-module-api/src/index.ts index 196db8d..6de699b 100644 --- a/packages/element-web-module-api/src/index.ts +++ b/packages/element-web-module-api/src/index.ts @@ -11,6 +11,8 @@ export type { Config, ConfigApi } from "./api/config"; export type { I18nApi, Variables, Translations } from "./api/i18n"; export type * from "./models/event"; export type * from "./api/custom-components"; +export type * from "./api/custom-components/userinfo"; +export type * from "./api/custom-components/message-profile"; export type * from "./api/legacy-modules"; export type * from "./api/legacy-customisations"; export type * from "./api/auth";