Component API

Browser elements (chat + chat-component)

Both packages register the same set in src/browser/register-elements.ts:

Tag	Class	Source
chat-app	MatrixChatApp	ChatApp.ts
chat-input	ChatInput	components/ChatInput.ts
chat-message-list	ChatMessageList	components/ChatMessageList.ts
chat-sidebar	ChatSidebar	components/ChatSidebar.ts
chat-header	ChatHeader	components/ChatHeader.ts
chat-session-panel	SessionPanel	components/SessionPanel.ts
chat-connection-status	ConnectionStatus	components/ConnectionStatus.ts
chat-status-bar	ChatStatusBar	components/ChatStatusBar.ts
mx-chat-message	MxChatMessage	elements/mx-chat-message.ts
mx-code-viewer	MxCodeViewer	elements/mx-code-viewer.ts
mx-markdown-viewer	MxMarkdownViewer	elements/mx-markdown-viewer.ts
mx-data-table	MxDataTable	elements/mx-data-table.ts
mx-component-browser	MxComponentBrowser	elements/mx-component-browser.ts
mx-activity-trace	MxActivityTraceActor	elements/mx-activity-trace.ts
mx-theme	ChatTheme	app/services/ChatTheme.ts
mx-split	MxSplit (re-export from @open-matrix/core)	core

Surface elements (chat-component only)

Registered via src/surface/register-surface.ts:

Tag	Class	Source
conversation-surface	ConversationSurfaceActor	surface/ConversationSurfaceActor.ts
conversation-renderer	ConversationRenderer	surface/ConversationRenderer.ts
conversation-input	ConversationInput	surface/ConversationInput.ts
conversation-session-list	ConversationSessionList	surface/ConversationSessionList.ts

These four are loaded as a separate lazy chunk by hosts (e.g., Director) that dynamically import @open-matrix/chat-component/surface.

Page actor (<chat-app>)

MatrixChatApp (src/ChatApp.ts:151):

• static description — "Conversational AI chat interface with message history, session management, and cross-root agent targeting."
• static skills.agent-conversation — ops: ['app.send-message', 'app.select-session', 'app.new-session']
• static accepts:
  • app.send-message
  • app.select-session
  • app.new-session
  • app.activate-component
  • app.standalone
• static emits:
  • app.connected
  • app.disconnected
  • app.message-sent
  • app.stream-started
  • app.stream-ended

Surface actor (<conversation-surface>)

ConversationSurfaceActor:

• static accepts:
  • surface.set-target { mount } — set the target actor for conversation
  • surface.set-session { sessionId } — resume an existing session
  • surface.clear { options? } — clear conversation, reset state
• static emits:
  • conversation:target-changed { mount }
  • conversation:session-changed { sessionId }
  • conversation:error { message }

Renderer (<conversation-renderer>)

Accepts:

• renderer.add-message { role, content }
• renderer.set-messages { messages }
• renderer.stream-thinking { text }
• renderer.stream-append { text }
• renderer.add-tool { op, target }
• renderer.add-tool-result { op, summary, duration }
• renderer.stream-end { text }
• renderer.clear

Input (<conversation-input>)

Accepts:

• input.enable
• input.disable
• input.focus
• input.set-placeholder { text }

Emits:

• conversation:submit { text } — fired when user hits Enter.

Session list (<conversation-session-list>)

Accepts:

• sessions.set-list { sessions: [{ sessionId, ts?, prompt? }] }
• sessions.set-active { sessionId }

Emits:

• conversation:session-selected { sessionId }
• conversation:session-new
• conversation:sessions-refresh-requested

Render-only mx-* elements

These don't emit events; they only render data passed in via ops. Each declares its own accepts for content updates (e.g., chat-message.set-content, code-viewer.set-source, markdown-viewer.set-text, data-table.setData/sortBy/getData).

For full per-element APIs, read the source — each file is small (50-200 lines) and self-documenting.

See also

• Actor ops
• Events
• Developer Guide: surface registration

Source: projects/matrix-3/packages/chat/src/browser/register-elements.ts, chat-component/src/browser/register-elements.ts, chat-component/src/surface/register-surface.ts, individual element source files.