Skip to navigation
Components

DMs list element

The DMs list element renders a navigable list of the user’s direct message conversations.

Basic usage

Mount the DMs list and listen for channel selection events to navigate users into a conversation.

"use client";
import { useCallback, useMemo, useState } from "react";
import {
	ChatSession,
	DmsListElement,
	Elements,
} from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";
import type {
	DmsListElementEvent,
	DmsListElementOptions,
} from "@whop/embedded-components-vanilla-js/types";
const elements = loadWhopElements();
async function getToken() {
	const response = await fetch("/api/token");
	const data = await response.json();
	return data.token;
}
export function MessagesPage() {
	const [channelId, setChannelId] = useState<string>();
	const handleDmsEvent = useCallback((event: DmsListElementEvent) => {
		switch (event.type) {
			case "channelSelected":
				setChannelId(event.detail.id);
				break;
		}
	}, []);
	const dmsOptions: DmsListElementOptions = useMemo(() => {
		return {
			selectedChannel: channelId,
			onEvent: handleDmsEvent,
		};
	}, [channelId, handleDmsEvent]);
	return (
		<Elements elements={elements}>
			<ChatSession token={getToken}>
				<DmsListElement options={dmsOptions} />
			</ChatSession>
		</Elements>
	);
}

Company scoping

Filter the DMs list to only show conversations belonging to a specific company by passing a companyId. To programmatically create DMs, use the Create DM Channel endpoint — make sure to pass the same companyId so the DM appears in the scoped list.

const dmsOptions: DmsListElementOptions = useMemo(() => {
	return {
		companyId: "biz_xxxx",
		selectedChannel: channelId,
		onEvent: handleDmsEvent,
	};
}, [channelId, handleDmsEvent]);
return (
	<Elements elements={elements}>
		<ChatSession token={getToken}>
			<DmsListElement options={dmsOptions} />
		</ChatSession>
	</Elements>
);

Event handling

Listen for channel selection to open the corresponding chat view.

EventDetailDescription
channelSelected{ id: string }Emitted when the user clicks a channel
const handleDmsEvent = useCallback((event: DmsListElementEvent) => {
	switch (event.type) {
		case "channelSelected":
			setChannelId(event.detail.id);
			break;
	}
}, []);