Add custom component surface for "message profile" and "user info"

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<Content, Client, PreparedMedia> {
     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<T>(watchable: Watchable<T>): 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)
 
 ```

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 <YourCustomComponent mxEvent={props.mxEvent} />;
+     *  });
+     *  customComponents.registerMessageRenderer(
+     *      (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(),
+     *      (props, originalComponent) => {
+     *          return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
+     *      }
+     * );
+     * ```
+     */
+
+    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;
 }

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;

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;

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";